/* ============================================================
   farben.css — die beiden Farbsätze von Kahf OS
   ============================================================
   Hell ist der Standard, Dunkel der Modus. Beide Sätze belegen
   dieselben Variablen; alle anderen Stylesheets und Skripte
   benutzen nur diese Variablen — feste Farbwerte stehen nur hier.
   tests/farben.test.js hält das fest (und dass beide Sätze
   vollständig sind).

   Umschalten (Konto-Menü: Hell / Dunkel / Wie das Gerät):
     <html data-modus="hell">    immer hell
     <html data-modus="dunkel">  immer dunkel
     ohne data-modus             wie das Gerät (prefers-color-scheme)
   modus-frueh.js setzt das Attribut vor dem ersten Bild, damit im
   Dunkelmodus nichts hell aufblitzt.

   Hell orientiert sich am Markenhandbuch (Welt W3, wie die
   Lernvideos): Navy #152E3E, Teal #1E9B8A, Gold #C9A14A.
   Teal als Schrift und Knopf eine Stufe dunkler (#13786A), damit
   es auf Weiß 4,5 : 1 erreicht.
   ============================================================ */

/* ---------- Hell (Standard) ---------- */
:root {
  color-scheme: light;

  /* Flächen */
  --hintergrund: #EEF2F4;
  --flow-tief: #EEF2F4;
  --karte: #FFFFFF;
  --flow-karte: #FFFFFF;
  --flow-karte-hell: #F7F9FA;
  --segment-spur: rgba(15, 36, 51, .07);   /* BS.segment: Spur und aktives Feld */
  --segment-aktiv: #FFFFFF;
  --flach: #FFFFFF;
  --flach-hoch: #FFFFFF;
  --papier: #FFFFFF;
  --flaeche: #FFFFFF;
  --abdunkeln-basis: rgba(15, 36, 51, .55);

  /* Schrift */
  --text: #0F2433;
  --text-leise: #536370;
  --flow-leise: #536370;
  --platzhalter: #6E828C;
  --still: #8AA0AA;

  /* Linien */
  --rand: #DDE5E9;
  --flow-rand-hell: #C7D4DA;
  --linie: #8AA4B0;

  /* Akzent und Signalfarben */
  --akzent: #13786A;
  --akzent-hell: #1E9B8A;
  --akzent-tief: #0F6458;
  --akzent-text: #0F6458;
  --auf-akzent: #FFFFFF;
  --primaer: #0F2433;
  --auf-primaer: #FFFFFF;
  --gruen: #1B7548;
  --gruen-tief: #155E3A;
  --gruen-text: #1B7548;
  --orange: #A3560B;
  --auf-orange: #FFFFFF;
  --rot: #C2412D;
  --rot-tief: #9E3222;
  --rot-text: #9E3222;
  --auf-rot: #FFFFFF;
  --lila: #6248C8;
  --lila-text: #5038B0;
  --blau: #1A6797;
  --blau-text: #15577F;
  --gold: #C9A14A;
  /* „Braucht dich heute" im Cockpit (ADR-044): warmes Band, Schrift 7 : 1 */
  --heute-flaeche: #FFF4DC;
  --heute-rand: #E9C46A;
  --heute-text: #7A4E00;

  /* Tinte für Hauche und Schatten: auf Hell ist es Navy, auf Dunkel Weiß bzw. Schwarz */
  --vorder: #0F2433;
  --schatten: rgba(15, 36, 51, .30);
  --flow-glanz: 0 1px 2px rgba(15, 36, 51, .06), 0 8px 24px rgba(15, 36, 51, .08);
  --karte-schatten: 0 1px 2px rgba(15, 36, 51, .06), 0 8px 24px rgba(15, 36, 51, .08);

  /* Bänder des Handbuchs (Netz, Landkarte, Chips) */
  --band-i: #13786A;
  --band-ii: #1A6797;
  --band-iii: #6248C8;
  --band-iv: #A37A1E;
  --band-v: #2E7D32;
  --band-vi: #B4511F;
  --band-z: #BE2F46;
  --band-standard: #3D6F8E;
  --netz-kante: #5F7E8C;
  --netz-deckung: .22;

  /* Cockpit-Kern: die Kugel innen */
  --kern-innen: #FFFFFF;

  /* „Ruhige Zukunft" (ADR-048): Aura, Hero-Karte, Ring Teal→Gold, Hochladen-Knopf */
  --aura-teal: rgba(30, 155, 138, .26);
  --aura-gold: rgba(201, 161, 74, .20);
  --held-von: #0F2433;
  --held-bis: #16394D;
  --held-text: #FFFFFF;
  --held-leise: #B9CBD3;
  --held-spur: rgba(255, 255, 255, .15);
  --ring-von: #1E9B8A;
  --ring-bis: #C9A14A;
  --hoch-flaeche: #0F2433;
  --hoch-text: #FFFFFF;
  --glas: rgba(255, 255, 255, .75);
  --kante: rgba(15, 36, 51, .08);
}

/* ---------- Dunkel (bei „Wie das Gerät" und dunklem Gerät) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) {
    color-scheme: dark;
    --hintergrund: #0B1620;
    --flow-tief: #0B1620;
    --karte: #11283A;
    --flow-karte: #11283A;
    --flow-karte-hell: #163246;
    --segment-spur: #163246;
    --segment-aktiv: #2A4A62;
    --flach: #0F2433;
    --flach-hoch: #163246;
    --papier: #EEF3F5;
    --flaeche: #0D1D2A;
    --abdunkeln-basis: rgba(3, 9, 14, 1);
    --text: #EAF2F6;
    --text-leise: #A3B8C4;
    --flow-leise: #98AEBB;
    --platzhalter: #708A99;
    --still: #647F8E;
    --rand: rgba(160, 205, 225, .14);
    --flow-rand-hell: rgba(160, 205, 225, .28);
    --linie: #7DCDE6;
    --akzent: #3CCFB6;
    --akzent-hell: #5FDDC6;
    --akzent-tief: #1E9B8A;
    --akzent-text: #8AEBD9;
    --auf-akzent: #04222B;
    --primaer: #0F2433;
    --auf-primaer: #EAF6FB;
    --gruen: #35D08A;
    --gruen-tief: #1B8F5C;
    --gruen-text: #8EF0C0;
    --orange: #F0A64A;
    --auf-orange: #2A1600;
    --rot: #FF6B78;
    --rot-tief: #B03145;
    --rot-text: #FF8A95;
    --auf-rot: #2D080D;
    --lila: #A98BFF;
    --lila-text: #CDBEFF;
    --blau: #4FC3F7;
    --blau-text: #9BD8F5;
    --gold: #D9B25E;
    --heute-flaeche: rgba(217, 178, 94, .12);
    --heute-rand: rgba(217, 178, 94, .42);
    --heute-text: #E9C677;
    --vorder: #FFFFFF;
    --schatten: #000000;
    --flow-glanz: 0 0 0 1px rgba(160, 205, 225, .10), 0 12px 32px rgba(0, 0, 0, .35);
    --karte-schatten: 0 0 0 1px rgba(160, 205, 225, .10);
    --band-i: #3CCFB6;
    --band-ii: #4FC3F7;
    --band-iii: #A98BFF;
    --band-iv: #F0C05A;
    --band-v: #7BE38A;
    --band-vi: #FF9F6E;
    --band-z: #FF7A8A;
    --band-standard: #4FA3D1;
    --netz-kante: #7DCDE6;
    --netz-deckung: .085;
    --kern-innen: rgba(2, 8, 12, .82);
    --aura-teal: rgba(60, 207, 182, .16);
    --aura-gold: rgba(217, 178, 94, .10);
    --held-von: #14344A;
    --held-bis: #0F2433;
    --held-text: #FFFFFF;
    --held-leise: #A9C0CC;
    --held-spur: rgba(255, 255, 255, .12);
    --ring-von: #3CCFB6;
    --ring-bis: #D9B25E;
    --hoch-flaeche: #EAF2F6;
    --hoch-text: #0B1620;
    --glas: rgba(17, 40, 58, .72);
    --kante: rgba(160, 205, 225, .14);
  }
}

/* ---------- Dunkel (ausdrücklich gewählt) — derselbe Satz wie oben ---------- */
:root[data-modus="dunkel"] {
  color-scheme: dark;
  --hintergrund: #0B1620;
  --flow-tief: #0B1620;
  --karte: #11283A;
  --flow-karte: #11283A;
  --flow-karte-hell: #163246;
  --segment-spur: #163246;
  --segment-aktiv: #2A4A62;
  --flach: #0F2433;
  --flach-hoch: #163246;
  --papier: #EEF3F5;
  --flaeche: #0D1D2A;
  --abdunkeln-basis: rgba(3, 9, 14, 1);
  --text: #EAF2F6;
  --text-leise: #A3B8C4;
  --flow-leise: #98AEBB;
  --platzhalter: #708A99;
  --still: #647F8E;
  --rand: rgba(160, 205, 225, .14);
  --flow-rand-hell: rgba(160, 205, 225, .28);
  --linie: #7DCDE6;
  --akzent: #3CCFB6;
  --akzent-hell: #5FDDC6;
  --akzent-tief: #1E9B8A;
  --akzent-text: #8AEBD9;
  --auf-akzent: #04222B;
  --primaer: #0F2433;
  --auf-primaer: #EAF6FB;
  --gruen: #35D08A;
  --gruen-tief: #1B8F5C;
  --gruen-text: #8EF0C0;
  --orange: #F0A64A;
  --auf-orange: #2A1600;
  --rot: #FF6B78;
  --rot-tief: #B03145;
  --rot-text: #FF8A95;
  --auf-rot: #2D080D;
  --lila: #A98BFF;
  --lila-text: #CDBEFF;
  --blau: #4FC3F7;
  --blau-text: #9BD8F5;
  --gold: #D9B25E;
  --heute-flaeche: rgba(217, 178, 94, .12);
  --heute-rand: rgba(217, 178, 94, .42);
  --heute-text: #E9C677;
  --vorder: #FFFFFF;
  --schatten: #000000;
  --flow-glanz: 0 0 0 1px rgba(160, 205, 225, .10), 0 12px 32px rgba(0, 0, 0, .35);
  --karte-schatten: 0 0 0 1px rgba(160, 205, 225, .10);
  --band-i: #3CCFB6;
  --band-ii: #4FC3F7;
  --band-iii: #A98BFF;
  --band-iv: #F0C05A;
  --band-v: #7BE38A;
  --band-vi: #FF9F6E;
  --band-z: #FF7A8A;
  --band-standard: #4FA3D1;
  --netz-kante: #7DCDE6;
  --netz-deckung: .085;
  --kern-innen: rgba(2, 8, 12, .82);
  --aura-teal: rgba(60, 207, 182, .16);
  --aura-gold: rgba(217, 178, 94, .10);
  --held-von: #14344A;
  --held-bis: #0F2433;
  --held-text: #FFFFFF;
  --held-leise: #A9C0CC;
  --held-spur: rgba(255, 255, 255, .12);
  --ring-von: #3CCFB6;
  --ring-bis: #D9B25E;
  --hoch-flaeche: #EAF2F6;
  --hoch-text: #0B1620;
  --glas: rgba(17, 40, 58, .72);
  --kante: rgba(160, 205, 225, .14);
}