/* zweito - Farben und Masse. ERZEUGT von design/farben.py, nicht von Hand
   aendern: Dieselben Werte stehen in farben.json und in design/UEBERGABE.md,
   und drei Fassungen derselben Zahl laufen auseinander.

   Herkunft: Zweito Master Design Prompt & Handoff Spec 1.0, Teil D.

   Aufbau: erst die helle Sicht vollstaendig, dann die dunkle - einmal fuer die
   Einstellung des Geraets und einmal fuer einen Schalter auf der Seite. Jede
   Farbe ist in BEIDEN Sichten definiert; keine bekommt ihren einzigen Wert in
   einem Medienblock, sonst faellt sie in der anderen Sicht aus.

   Die dunkle Sicht ist KEINE Umkehrung: Hoehe entsteht ueber hellere Flaechen
   (--flaeche -> --flaeche-gedaempft), nicht ueber staerkere Schatten. */

:root {
  color-scheme: light dark;

  /* ------------------------------------------------------------- Farbe */
  --marke: #5227D6;
  --marke-tief: #4318B0;
  --marke-link: #5227D6;
  --marke-flaeche: #E4DCFD;
  --marke-flaeche-tinte: #260C63;
  --ki: #00626E;
  --ki-flaeche: #E0F7FA;
  --grund: #FFFFFF;
  --flaeche: #FFFFFF;
  --flaeche-gedaempft: #F4F4F6;
  --flaeche-vertieft: #EDEDF0;
  --tinte: #0B0B0F;
  --tinte-2: #43434E;
  --tinte-3: #5C5C69;
  --linie: #E1E1E6;
  --linie-stark: #8A8A95;
  --gut: #0A6238;
  --gut-grund: #E6F5EC;
  --warn: #7A4A00;
  --warn-grund: #FFF4E0;
  --schlecht: #A81A14;
  --schlecht-grund: #FDECEA;

  /* ----------------------------------------------------------- Schrift */
  --schrift-12: 0.75rem;  --zeile-12: 1rem;  --spur-12: .005em;   /* Caption, Meta, Badge */
  --schrift-14: 0.875rem;  --zeile-14: 1.25rem;  --spur-14: 0;   /* Body S, Beschriftung, Knopfschrift */
  --schrift-16: 1rem;  --zeile-16: 1.5rem;  --spur-16: 0;   /* Fliesstext - die Basis */
  --schrift-18: 1.125rem;  --zeile-18: 1.75rem;  --spur-18: 0;   /* Body L, Vorspann */
  --schrift-20: 1.25rem;  --zeile-20: 1.625rem;  --spur-20: -.005em;   /* H3 */
  --schrift-24: 1.5rem;  --zeile-24: 1.875rem;  --spur-24: -.01em;   /* H2 */
  --schrift-30: 1.875rem;  --zeile-30: 2.25rem;  --spur-30: -.015em;   /* H1, grosser Preis */
  --schrift-38: 2.375rem;  --zeile-38: 2.75rem;  --spur-38: -.02em;   /* Display M */
  --schrift-48: 3rem;  --zeile-48: 3.25rem;  --spur-48: -.025em;   /* Display L, nur die Buehne */

  /* -------------------------------------------- Abstand, Form, Bewegung */
  --raum-2: 2px;
  --raum-4: 4px;
  --raum-8: 8px;
  --raum-12: 12px;
  --raum-16: 16px;
  --raum-20: 20px;
  --raum-24: 24px;
  --raum-32: 32px;
  --raum-40: 40px;
  --raum-48: 48px;
  --raum-64: 64px;
  --raum-80: 80px;
  --rund-xs: 6px;
  --rund-sm: 10px;
  --rund-md: 14px;
  --rund-lg: 20px;
  --rund-voll: 999px;
  --zeit-schnell: 120ms;
  --kurve-schnell: cubic-bezier(.2, 0, .38, .9);
  --zeit-sheet: 260ms;
  --kurve-sheet: cubic-bezier(.32, .72, 0, 1);
  --bahn: 1280px;
  --rand: 32px;
  --gutter: 24px;
  --filterspalte: 280px;
  --lesebreite: 68ch;
  --ziel: 48px;
  --fokus-breite: 2px;
  --fokus-abstand: 2px;
  --schrift-familie: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --schrift-display: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --hoehe-1: 0 1px 2px rgba(11, 11, 15, .06);
  --hoehe-2: 0 4px 16px rgba(11, 11, 15, .08);
  --hoehe-3: 0 12px 40px rgba(11, 11, 15, .14);
}

/* Dunkel, wenn das Geraet es so eingestellt hat - ausser die Seite sagt
   ausdruecklich "hell". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marke: #6A3EE6;
    --marke-tief: #7549E9;
    --marke-link: #A88FF5;
    --marke-flaeche: #260C63;
    --marke-flaeche-tinte: #C9B9FA;
    --ki: #4DD9E8;
    --ki-flaeche: #04333A;
    --grund: #0B0B0F;
    --flaeche: #16161C;
    --flaeche-gedaempft: #1E1E26;
    --flaeche-vertieft: #2A2A33;
    --tinte: #F4F4F6;
    --tinte-2: #B4B4BE;
    --tinte-3: #8A8A95;
    --linie: #2E2E38;
    --linie-stark: #6B6B77;
    --gut: #5FD39A;
    --gut-grund: #0A2A1C;
    --warn: #FFC661;
    --warn-grund: #33240A;
    --schlecht: #FF8A80;
    --schlecht-grund: #3A1512;

    --hoehe-1: 0 1px 2px rgba(0, 0, 0, .5);
    --hoehe-2: 0 4px 16px rgba(0, 0, 0, .55);
    --hoehe-3: 0 12px 40px rgba(0, 0, 0, .65);
  }
}

/* Dunkel, weil jemand es auf der Seite umgestellt hat. Steht hinter dem
   Medienblock, damit der Schalter in beide Richtungen gewinnt. */
:root[data-theme="dark"] {
  --marke: #6A3EE6;
  --marke-tief: #7549E9;
  --marke-link: #A88FF5;
  --marke-flaeche: #260C63;
  --marke-flaeche-tinte: #C9B9FA;
  --ki: #4DD9E8;
  --ki-flaeche: #04333A;
  --grund: #0B0B0F;
  --flaeche: #16161C;
  --flaeche-gedaempft: #1E1E26;
  --flaeche-vertieft: #2A2A33;
  --tinte: #F4F4F6;
  --tinte-2: #B4B4BE;
  --tinte-3: #8A8A95;
  --linie: #2E2E38;
  --linie-stark: #6B6B77;
  --gut: #5FD39A;
  --gut-grund: #0A2A1C;
  --warn: #FFC661;
  --warn-grund: #33240A;
  --schlecht: #FF8A80;
  --schlecht-grund: #3A1512;

  --hoehe-1: 0 1px 2px rgba(0, 0, 0, .5);
  --hoehe-2: 0 4px 16px rgba(0, 0, 0, .55);
  --hoehe-3: 0 12px 40px rgba(0, 0, 0, .65);
}