/* ==========================================================================
   KYTH.Kladde: Die helle Darstellung (Schalter Hell/Dunkel, Entscheidung vom 01.11.2026).
   Dunkel bleibt die Vorgabe; hell wird es nur, wenn jemand in der Kopfzeile umschaltet. Dann setzt
   darstellung-vorab.js vor dem ersten Bild data-theme="light" auf <html>, und diese Datei legt ihre Tokens
   über die des Kits. kyth-tokens.css bleibt die unveränderte Kopie des Kits.

   Die Tokens behalten ihre Rolle, nicht ihren Namen: --black ist der Grund der Seite, --surface bis
   --surface-3 sind die Flächen, die --white-Stufen die Schrift als dunkle Transparenzen von #0A0A0B, --border
   die Linien. So gelten alle Regeln von kyth-tokens.css und app.css unverändert. Eigene Regeln stehen nur dort,
   wo eine Farbe in Hell die Rolle wechselt: Schrift auf Grün und Blau (im Dunklen --black), grüne Schrift
   (--green-on-light des Kits), Fokusring und Markierung der aktuellen Seite (--green-dark) und die weiße
   Bildfläche der Logos. Der Test der Darstellung rechnet jeden Kontrast nach.
   ========================================================================== */

:root[data-theme="light"] {
  color-scheme: light;

  /* Flächen: Grund der Seite, Kopf/Fuß/Karte, Feld, gesperrt */
  --black: #F2F2F4;
  --surface: #FAFAFB;
  --surface-2: #FFFFFF;
  --surface-3: #E6E6EA;

  /* Schrift: die Stufen der Weiß-Transparenzen als dunkle Transparenzen. --white-60 trägt 0.62 und
     --white-40 0.58, damit beide auch auf --surface-3 AA erreichen (5,2:1 und 4,6:1). */
  --white: #0A0A0B;
  --white-80: rgba(10,10,11,0.8);
  --white-60: rgba(10,10,11,0.62);
  --white-40: rgba(10,10,11,0.58);
  --white-20: rgba(10,10,11,0.2);
  --white-10: rgba(10,10,11,0.1);
  --white-08: rgba(10,10,11,0.08);
  --white-05: rgba(10,10,11,0.05);

  /* Akzente: der Knopf bleibt grün mit dunkler Schrift (#16A34A, 6,0:1), sein Schweben das Grün des Kits
     (8,7:1). Linien und Ring nehmen --green-dark (4,5:1 auf dem Grund der Seite, 4,0:1 auf --surface-3), grüne
     Schrift --green-on-light. */
  --green: #16A34A;
  --green-light: #22C55E;
  --green-dark: #15803D;
  --green-on-light: #0F5132;
  --blue: #3B82F6;
  --blue-light: #2563EB;
  --purple: #A855F7;

  /* Linien: dunkel auf hell braucht etwas mehr Deckkraft als hell auf dunkel. */
  --border: rgba(10,10,11,0.1);
  --border-hover: rgba(10,10,11,0.2);
  /* Rand der Eingabefelder (app.css): 0.5 ergibt gegen Feld, Fläche und Grund 3,5:1 bis 3,7:1. */
  --feldrand: rgba(10,10,11,0.5);

  --glow-green: 0 0 20px rgba(22,163,74,0.25), 0 0 60px rgba(22,163,74,0.1);
  --glow-green-strong: 0 0 20px rgba(22,163,74,0.4), 0 0 60px rgba(22,163,74,0.2), 0 0 100px rgba(22,163,74,0.08);
}

/* Schrift auf Grün und Blau: im Dunklen --black, in Hell die dunkle Schrift (--white). */
:root[data-theme="light"] .btn-primary:not(:disabled),
:root[data-theme="light"] .skip-link,
:root[data-theme="light"] .testband,
:root[data-theme="light"] .supportband,
:root[data-theme="light"] .supportband .hinweisband { color: var(--white); }
:root[data-theme="light"] .supportband .btn-secondary { color: var(--white); border-color: var(--white); }

/* Fokusring: Das Grün des Knopfs erreicht auf dem Grund der Seite nur 2,9:1, --green-dark 4,5:1. Im blauen Band
   bleibt er dunkel (5,4:1). */
:root[data-theme="light"] :focus-visible { outline-color: var(--green-dark); }
:root[data-theme="light"] .supportband :focus-visible { outline-color: var(--white); }

/* Grüne Schrift auf hellem Grund: --green-on-light des Kits (8,4:1). */
:root[data-theme="light"] .tabelle a:hover,
:root[data-theme="light"] .hilfetext a:hover,
:root[data-theme="light"] .positionsliste .namensknopf:hover,
:root[data-theme="light"] .kundentreffer [role="option"]:hover,
:root[data-theme="light"] .kundentreffer button:hover,
:root[data-theme="light"] .kundentreffer [aria-selected="true"],
:root[data-theme="light"] .versand-uebergeben { color: var(--green-on-light); }

/* Der Punkt der Wortmarke pulsiert im Kit mit einem grünen Schein (feste Farben in @keyframes dotPulse). Auf
   hellem Grund wäre der Schein ein grüner Fleck; der Punkt bleibt grün und steht still. */
:root[data-theme="light"] .dot-glow { animation: none; }

/* Logos sind für weißes Papier gemacht: Die Bildfläche bleibt weiß wie im Dunklen. */
:root[data-theme="light"] .kopflogo,
:root[data-theme="light"] .logovorschau { background: #FFFFFF; }

/* Die Markierung der aktuellen Seite: 2px --green-dark. Im Kontrastmodus gelten die Systemfarben aus app.css,
   deshalb nur ohne ihn. */
@media (forced-colors: none) {
  :root[data-theme="light"] .navigation a[aria-current="page"],
  :root[data-theme="light"] .unternavigation a[aria-current="page"] { border-bottom-color: var(--green-dark); }
  :root[data-theme="light"] .unternavigation .untergruppe a[aria-current="page"] { border-left-color: var(--green-dark); }
  :root[data-theme="light"] .kopfzeile[data-bereich="mandant"] .navigation a[aria-current="page"] { border-top-color: var(--green-dark); }
  /* Die Unterleiste unter „Belege“: --green hätte auf hellem Grund etwa 2,9:1, unter 3:1 (Befund G186 vom 14.11.2026). */
  :root[data-theme="light"] .belegleiste a[aria-current="page"] { border-bottom-color: var(--green-dark); }
}