/* H4H Dark Mode — Token-Overrides. Lädt NACH tokens/colors.css und tokens/status.css.
   Prinzip: Die Skalen (--brand-*, --gray-*, --danger-*) bleiben unverändert.
   Umgeschaltet werden nur die semantischen Aliasse und die Status-Tokens.
   Komponenten, die bereits auf Aliasse (--surface-*, --text-*, --border-*, --status-*) bauen,
   brauchen keine Änderung. Direkte Nutzung von --brand-500/600 für Text oder --gray-* für Flächen
   ist im Dark Mode ein Fehler — siehe DARK-MODE-GUIDE.md §3.

   Aktivierung: <html data-theme="dark">  |  <html data-theme="light">  |  ohne Attribut = System.
   Alle Werte gerechnet, WCAG 2.1: Text ≥ 4,5:1, Großtext/Grafik/UI-Kante ≥ 3:1. */

:root { color-scheme: light; }

[data-theme="dark"],
:root:not([data-theme="light"]) { --_h4h-dark: 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    /* Flächen — kühl, aus brand-900 abgeleitet, Elevation = eine Stufe heller, kein Schatten */
    --surface-page: #0b1620;
    --surface-card: #12212e;
    --surface-subtle: #182b3a;
    --surface-elevated: #1e3444;
    --surface-brand: var(--brand-400);        /* Primärbutton-Fläche, trägt DUNKLEN Text */
    --surface-brand-hover: var(--brand-300);
    --surface-brand-active: var(--brand-200);
    /* Text */
    --text-body: #e8eef3;                     /* 15,6:1 auf page, 14,0:1 auf card */
    --text-secondary: #b4c2ce;                /* 10,0:1 / 9,0:1 */
    --text-muted: #94a6b3;                    /* 6,8:1 / 6,2:1 — auf elevated 5,1:1 */
    --text-on-brand: #0b1620;                 /* auf brand-400: 6,1:1 (Light-Mode-Äquivalent: weiß auf 500 = 4,7:1) */
    --text-link: var(--brand-300);            /* 9,7:1 / 8,7:1 */
    --text-link-hover: var(--brand-200);
    --text-editorial: var(--brand-300);       /* Gelasio-Akzente */
    /* Kanten */
    --border-default: #2a4252;                /* dekorativ, Karten */
    --border-strong: #56748a;                 /* Inputs, Trennlinien mit Bedeutung: 3,3:1 auf card */
    --focus-ring: var(--brand-300);           /* 9,7:1 auf page */
    /* Semantik — helle Derivate auf dunklen Tint-Flächen */
    --danger-fg: #fca5a5;   --danger-bg: #3a1a1a;   --danger-solid: var(--danger-600); /* weiß auf danger-600: 4,8:1 */
    --success-fg: #6fd1bc;  --success-bg: #12332c;
    --warning-fg: #f0c98f;  --warning-bg: #33281a;
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --surface-page: #0b1620; --surface-card: #12212e; --surface-subtle: #182b3a; --surface-elevated: #1e3444;
  --surface-brand: var(--brand-400); --surface-brand-hover: var(--brand-300); --surface-brand-active: var(--brand-200);
  --text-body: #e8eef3; --text-secondary: #b4c2ce; --text-muted: #94a6b3; --text-on-brand: #0b1620;
  --text-link: var(--brand-300); --text-link-hover: var(--brand-200); --text-editorial: var(--brand-300);
  --border-default: #2a4252; --border-strong: #56748a; --focus-ring: var(--brand-300);
  --danger-fg: #fca5a5; --danger-bg: #3a1a1a; --danger-solid: var(--danger-600);
  --success-fg: #6fd1bc; --success-bg: #12332c; --warning-fg: #f0c98f; --warning-bg: #33281a;
}

/* ---- Status-Sprache im Dark Mode ----------------------------------------------
   Regel bleibt: EIN Blauverlauf, Zustand über Helligkeit + Füllung + Icon.
   Die Helligkeitsrichtung kehrt sich um: je weiter im Lebenszyklus, desto HELLER.
   Versiegelt bleibt der einzige voll gefüllte Zustand — jetzt die hellste Fläche
   mit dunklem Text. Erfasst bleibt gestrichelt und grau. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --status-erfasst-fg: #b4c2ce;      --status-erfasst-bg: #182b3a;      --status-erfasst-border: #94a6b3;     /* dashed; Kante 4,3:1 */
    --status-verankert-fg: var(--brand-300); --status-verankert-bg: #0f2a3d; --status-verankert-border: var(--brand-400); /* 7,9:1 */
    --status-angereichert-fg: var(--brand-200); --status-angereichert-bg: #10354f; --status-angereichert-border: var(--brand-300); /* 8,9:1 */
    --status-versiegelt-fg: #0b1620;   --status-versiegelt-bg: var(--brand-200); --status-versiegelt-border: var(--brand-200); /* 12,7:1, solid = final */
    --sync-lokal-fg: #b4c2ce; --sync-synchronisiert-fg: var(--brand-300); --sync-verankert-fg: var(--brand-200);
    --verify-ok-fg: var(--success-fg); --verify-ok-bg: var(--success-bg);
    --verify-abgelaufen-fg: var(--warning-fg); --verify-abgelaufen-bg: var(--warning-bg);
    --verify-widerrufen-fg: var(--danger-fg); --verify-widerrufen-bg: var(--danger-bg);
  }
}
[data-theme="dark"] {
  --status-erfasst-fg: #b4c2ce; --status-erfasst-bg: #182b3a; --status-erfasst-border: #94a6b3;
  --status-verankert-fg: var(--brand-300); --status-verankert-bg: #0f2a3d; --status-verankert-border: var(--brand-400);
  --status-angereichert-fg: var(--brand-200); --status-angereichert-bg: #10354f; --status-angereichert-border: var(--brand-300);
  --status-versiegelt-fg: #0b1620; --status-versiegelt-bg: var(--brand-200); --status-versiegelt-border: var(--brand-200);
  --sync-lokal-fg: #b4c2ce; --sync-synchronisiert-fg: var(--brand-300); --sync-verankert-fg: var(--brand-200);
  --verify-ok-fg: var(--success-fg); --verify-ok-bg: var(--success-bg);
  --verify-abgelaufen-fg: var(--warning-fg); --verify-abgelaufen-bg: var(--warning-bg);
  --verify-widerrufen-fg: var(--danger-fg); --verify-widerrufen-bg: var(--danger-bg);
}

/* ---- Light-Mode-Ergänzungen (neue Aliasse, damit Komponenten in beiden Modi dieselben Namen nutzen) */
:root {
  --surface-elevated: #ffffff;
  --surface-brand-hover: var(--brand-600);
  --surface-brand-active: var(--brand-700);
  --text-link-hover: var(--brand-700);
  --text-editorial: var(--brand-600);
  --danger-fg: var(--danger-700);  --danger-bg: var(--danger-50);  --danger-solid: var(--danger-600);
  --success-fg: var(--success-700); --success-bg: var(--success-50);
  --warning-fg: var(--warning-700); --warning-bg: var(--warning-50);
}

/* ---- Elevation: im Dark Mode ersetzt eine hellere Fläche + Kante den Schatten */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow-sm: 0 0 0 1px var(--border-default); --shadow-md: 0 0 0 1px var(--border-default); --shadow-lg: 0 0 0 1px var(--border-strong); }
}
[data-theme="dark"] { --shadow-sm: 0 0 0 1px var(--border-default); --shadow-md: 0 0 0 1px var(--border-default); --shadow-lg: 0 0 0 1px var(--border-strong); }

/* ---- Bild- und Druckinhalte bleiben hell (QR-Codes, Nachweis-Vorschau, Fotos werden nicht gedimmt) */
[data-keep-light] { color-scheme: light; background: #ffffff; color: var(--gray-900); }
@media print { :root, [data-theme="dark"] { color-scheme: light; } }