/* ============================================================================
   TIER 2 · SEMANTIC FARBEN + THEMES & DARK MODE
   ----------------------------------------------------------------------------
   Komponenten binden NUR an Semantic-Tokens, nie an Primitives/Theme-Rampen.
   Zwei data-Attribute: data-theme (terracotta|clinical), data-mode (light|dark).
============================================================================ */

:root {

  --color-bg:var(--sand-50);--color-surface:var(--sand-0);--color-surface-sunken:var(--sand-100);
  --color-surface-raised:var(--sand-0);   /* Menüs/Popover ÜBER Karten (im Dark Mode heller) */
  --color-text:var(--sand-900);--color-text-muted:var(--sand-600);--color-text-subtle:var(--sand-600);--color-text-inverse:var(--sand-50);
  /* text-subtle: auf sand-600 angehoben (AA-Kontrast an 10–12px-Labels). Rolle
     bleibt eigenständig von text-muted — Re-Differenzierung noch offen. */
  --color-border:var(--sand-200);--color-border-strong:var(--sand-300);--color-border-subtle:var(--sand-100);

  /* ---- Primary (Terracotta) — NUR Haupt-Aktionen ----
     `-text` ist die Schriftfarbe AUF `-subtle` (wie bei cool/success/warning/
     danger/info) — eigene Rolle, weil `--color-primary` als Text zu schwach
     bzw. im Dunkeln unlesbar ist. ---- */
  --color-primary:var(--terracotta-600);--color-primary-hover:var(--terracotta-700);--color-primary-active:var(--terracotta-800);--color-primary-subtle:var(--terracotta-50);--color-on-primary:var(--sand-50);--color-primary-text:var(--terracotta-700);

  --color-accent:var(--olive-600);--color-accent-hover:var(--olive-700);--color-accent-active:var(--olive-800);--color-accent-subtle:var(--olive-50);--color-on-accent:var(--sand-50);

  --color-cool:var(--teal-600);--color-cool-hover:var(--teal-700);--color-cool-active:var(--teal-800);--color-cool-subtle:var(--teal-50);--color-on-cool:var(--sand-50);--color-cool-text:var(--teal-700);

  /* ---- Status — NUR Zustandsbedeutung (Meldungen, Validierung), NICHT für Charts ---- */
  /* Die vier Vollton-Rollen sind nach HELLIGKEIT gestaffelt, damit sie auch
     ohne Farbton unterscheidbar bleiben: danger 28,9 · info 43,1 · success
     56,1 · warning 73,6 L*. Wer heller wird, dreht die Schrift um — success
     trägt deshalb wie warning DUNKLEN Text. */
  --color-success:var(--green-400);--color-success-hover:var(--green-500);--color-success-active:var(--green-600);--color-success-subtle:var(--green-50);--color-on-success:var(--sand-900);--color-success-text:var(--green-700);
  --color-warning:var(--amber-400);--color-warning-hover:var(--amber-500);--color-warning-active:var(--amber-600);--color-warning-subtle:var(--amber-50);--color-on-warning:var(--sand-900);--color-warning-text:var(--amber-800); /* warning trägt DUNKLEN Text */
  --color-danger:var(--red-700);--color-danger-hover:var(--red-800);--color-danger-active:var(--red-900);--color-danger-subtle:var(--red-50);--color-on-danger:var(--sand-50);--color-danger-text:var(--red-700);
  --color-info:var(--blue-500);--color-info-hover:var(--blue-600);--color-info-active:var(--blue-700);--color-info-subtle:var(--blue-50);--color-on-info:var(--sand-50);--color-info-text:var(--blue-700);

  /* ---- Trend — Richtung „hoch/runter" (≠ Status!): ein fallender Wert ist KEIN Fehler ---- */
  --color-positive:var(--green-500);--color-positive-subtle:var(--green-50);--color-positive-text:var(--green-700);
  --color-negative:var(--red-500);--color-negative-subtle:var(--red-50);--color-negative-text:var(--red-700);

  /* ---- Bewertung (gut/schlecht) — ENTKOPPELT von Richtung: ein fallender Wert
     ist nicht automatisch schlecht. Farbe allein reicht als Bewertung; Symbole
     kommen nur punktuell dazu, wo es passt. ---- */
  --color-favorable:var(--green-500);--color-favorable-subtle:var(--green-50);--color-favorable-text:var(--green-700);
  --color-unfavorable:var(--red-500);--color-unfavorable-subtle:var(--red-50);--color-unfavorable-text:var(--red-700);

  /* Die Badge-Flächen sind nach verdienter Aufmerksamkeit gestaffelt: erledigt
     tritt zurück (94,9 L*), überfällig steht vorn (72,1). Ohne Staffelung
     lagen drei der vier Flächen innerhalb von 2,2 L* — die Fläche leistete
     dann keine Unterscheidung mehr, nur der Farbton. */
  --color-status-open:var(--blue-500);--color-status-open-subtle:var(--blue-100);
  --color-status-progress:var(--amber-400);--color-status-progress-subtle:var(--amber-300);
  --color-status-blocked:var(--red-500);--color-status-blocked-subtle:var(--red-50);
  --color-status-done:var(--green-500);--color-status-done-subtle:var(--green-50);
  --color-status-overdue:var(--red-700);--color-status-overdue-subtle:var(--red-200);

  --color-scrim:rgba(33,29,23,0.55);          /* abdunkelnder Modal-Hintergrund */
  --color-disabled-bg:var(--sand-200);--color-disabled-text:var(--sand-400);
  /* ---- Zustands-Leiter, je Flächenstufe drei Sprossen: Ruhe → überfahren →
     gedrückt. Gedrückt ist immer die KRÄFTIGERE Stufe (im Hellen dunkler, im
     Dunkeln heller) — sonst trägt der Klick keine eigene Antwort.
     `-sunken` ist die Leiter der abgesenkten Fläche; ohne sie färbte sich eine
     Teilfläche beim Überfahren in ihre eigene Ruhefarbe.
     `--color-hover-surface` ist nur der ältere Name derselben Sprosse. */
  --color-hover:var(--sand-150);
  --color-hover-surface:var(--color-hover);
  --color-active:var(--sand-200);
  --color-hover-sunken:var(--sand-200);
  --color-active-sunken:var(--sand-300);
  --color-selected:var(--terracotta-50);--color-selected-text:var(--terracotta-700);
  --color-link:var(--terracotta-700);--color-link-hover:var(--terracotta-800);

  --color-tooltip-bg:var(--blue-100);--color-tooltip-text:var(--blue-700);

  /* ---- Daten-Farben · KATEGORIAL (eine Farbe pro Datenreihe) ---- */
  --chart-1:var(--terracotta-500);--chart-2:var(--olive-500);--chart-3:var(--blue-500);--chart-4:var(--amber-500);--chart-5:var(--plum-500);--chart-6:var(--teal-500);
  /* GERÜST (neutral — Gitter, Achse, Beschriftung) */
  --chart-grid:var(--sand-200);--chart-axis:var(--sand-400);--chart-label:var(--sand-600);
  /* BENCHMARK / REFERENZ — Vergleichslinie, keine Datenreihe */
  --chart-benchmark:var(--sand-700);
  /* SEQUENZIELL (eine Metrik, hell→dunkel — Heatmap) */
  --chart-seq-1:var(--blue-100);--chart-seq-2:var(--blue-300);--chart-seq-3:var(--blue-500);--chart-seq-4:var(--blue-700);--chart-seq-5:var(--blue-900);
  /* DIVERGIEREND (unter ↔ Ziel ↔ über) */
  --chart-div-neg:var(--red-500);--chart-div-neg-soft:var(--red-200);--chart-div-mid:var(--sand-200);--chart-div-pos-soft:var(--green-200);--chart-div-pos:var(--green-500);

  /* ---- Fokus ----
     Ein Ring allein reicht nicht: auf farbigen Flächen (Primär-/Gefahr-Button)
     misst Ring-gegen-Fläche oft < 1,5:1. Deshalb zwei Ringe: innen
     --color-focus-contrast (Grundfläche des Schemas), außen --color-focus —
     mindestens eine Kante erreicht damit 3:1 (WCAG 1.4.11). Zusammengesetzt
     in `tokens/bauteile.css` (--focus-ring / --focus-halo). */
  --color-focus:var(--terracotta-500);--color-focus-contrast:var(--sand-0);
}


/* ---- Theme: Clinical Blue (Light) — überschreibt nur Theme-abhängige Tokens ---- */
[data-theme="clinical"]{
  --color-bg:var(--slate-50);--color-surface:var(--slate-0);--color-surface-sunken:var(--slate-100);--color-surface-raised:var(--slate-0);
  --color-text:var(--slate-900);--color-text-muted:var(--slate-600);--color-text-subtle:var(--slate-600);--color-text-inverse:var(--slate-50); /* subtle: AA-Fix, s. :root */
  --color-border:var(--slate-200);--color-border-strong:var(--slate-300);--color-border-subtle:var(--slate-100);
  /* Primär IST die Markenfarbe — dieselbe, die das Zeichen trägt. Die
     vorherige Stufe (steel-600) hatte ein Drittel weniger Chroma und wirkte
     grau. Hover und Aktiv bleiben die dunkleren steel-Stufen; `-text` bleibt
     dunkler, weil Text auf hellem Grund mehr Kontrast braucht als eine Fläche. */
  --color-primary:var(--marke-blau);--color-primary-hover:var(--steel-500);--color-primary-active:var(--steel-600);--color-primary-subtle:var(--steel-50);--color-on-primary:var(--slate-0);--color-primary-text:var(--steel-700);
  --color-accent:var(--petrol-600);--color-accent-hover:var(--petrol-700);--color-accent-active:var(--petrol-800);--color-accent-subtle:var(--petrol-50);--color-on-accent:var(--slate-50);
  --color-on-cool:var(--slate-50);--color-on-success:var(--slate-900);--color-on-warning:var(--slate-900);--color-on-danger:var(--slate-50);--color-on-info:var(--slate-50);
  --color-disabled-bg:var(--slate-200);--color-disabled-text:var(--slate-400);
  --color-hover:var(--slate-150);--color-hover-surface:var(--color-hover);--color-active:var(--slate-200);--color-hover-sunken:var(--slate-200);--color-active-sunken:var(--slate-300);
  --color-selected:var(--steel-50);--color-selected-text:var(--steel-700);--color-link:var(--steel-700);--color-link-hover:var(--steel-800);
  --color-scrim:rgba(26,31,37,0.55);--color-focus:var(--steel-500);--color-focus-contrast:var(--slate-0);
  --chart-1:var(--steel-500);--chart-2:var(--petrol-500);--chart-grid:var(--slate-200);--chart-axis:var(--slate-400);--chart-label:var(--slate-600);--chart-benchmark:var(--slate-700);--chart-div-mid:var(--slate-200);
}

/* ---- Dark Mode — Terracotta ----
   Karten sind DUNKLER als der Hintergrund (bricht mit der Konvention
   erhöht=heller). Reine Umsortierung derselben Rampenstufen:
     bg 900→800 · surface 800→850 · sunken 850→700 · raised 700→900
   Der Hell-Modus bleibt bei erhöht=heller. */
[data-mode="dark"]{
  --color-bg:var(--sand-800);--color-surface:var(--sand-850);--color-surface-sunken:var(--sand-700);--color-surface-raised:var(--sand-900);
  --color-text:var(--sand-50);--color-text-muted:var(--sand-300);--color-text-subtle:var(--sand-400);--color-text-inverse:var(--sand-900);
  /* border-subtle und hover müssen ZWISCHEN Karte (850) und Grund (800) liegen,
     sonst verschwindet die Haarlinie auf der Karte — dafür die neue Stufe 750. */
  --color-border:var(--sand-700);--color-border-strong:var(--sand-600);--color-border-subtle:var(--sand-750);
  /* primary-subtle eine Stufe heller (900 → 850): Auf der jetzt dunkleren Karte
     war die Auswahl-Einfärbung nicht mehr vom Untergrund zu unterscheiden. */
  --color-primary:var(--terracotta-500);--color-primary-hover:var(--terracotta-400);--color-primary-active:var(--terracotta-300);--color-primary-subtle:var(--terracotta-850);--color-on-primary:var(--sand-50);--color-primary-text:var(--terracotta-200);
  --color-accent:var(--olive-500);--color-accent-hover:var(--olive-400);--color-accent-active:var(--olive-300);--color-accent-subtle:var(--olive-900);--color-on-accent:var(--sand-50);
  --color-cool:var(--teal-500);--color-cool-hover:var(--teal-400);--color-cool-active:var(--teal-300);--color-cool-subtle:var(--teal-900);--color-on-cool:var(--sand-50);--color-cool-text:var(--teal-300);
  /* on-success ist auch hier dunkel: Die Erfolgsfläche ist in BEIDEN Modi
     green-400 — helle Schrift darauf misst 3,36:1, dunkle 4,64:1. Zwei
     verschiedene Schriftfarben auf derselben Fläche wären ein Widerspruch. */
  --color-success:var(--green-400);--color-success-hover:var(--green-300);--color-success-active:var(--green-200);--color-success-subtle:var(--green-900);--color-on-success:var(--sand-900);--color-success-text:var(--green-300);
  --color-warning:var(--amber-400);--color-warning-hover:var(--amber-300);--color-warning-active:var(--amber-200);--color-warning-subtle:var(--amber-900);--color-on-warning:var(--sand-900);--color-warning-text:var(--amber-300);
  --color-danger:var(--red-400);--color-danger-hover:var(--red-300);--color-danger-active:var(--red-200);--color-danger-subtle:var(--red-900);--color-on-danger:var(--sand-50);--color-danger-text:var(--red-200); /* danger-text dark: red-300→red-200 (gemessen 4,41:1 < AA) */
  --color-info:var(--blue-400);--color-info-hover:var(--blue-300);--color-info-active:var(--blue-200);--color-info-subtle:var(--blue-900);--color-on-info:var(--sand-50);--color-info-text:var(--blue-300);
  --color-positive:var(--green-400);--color-positive-subtle:var(--green-900);--color-positive-text:var(--green-300);
  --color-negative:var(--red-400);--color-negative-subtle:var(--red-900);--color-negative-text:var(--red-200); /* red-300 maß auf surface nur 4,20:1 — gleiche Korrektur wie bei danger-text */
  --color-favorable:var(--green-400);--color-favorable-subtle:var(--green-900);--color-favorable-text:var(--green-300);
  --color-unfavorable:var(--red-400);--color-unfavorable-subtle:var(--red-900);--color-unfavorable-text:var(--red-200); /* wie negative-text: 4,20:1 (terracotta) bzw. 4,41:1 (clinical) < AA */
  --color-status-open:var(--blue-400);--color-status-open-subtle:var(--blue-900);
  --color-status-progress:var(--amber-400);--color-status-progress-subtle:var(--amber-900);
  --color-status-blocked:var(--red-400);--color-status-blocked-subtle:var(--red-900);
  --color-status-done:var(--green-400);--color-status-done-subtle:var(--green-900);
  --color-status-overdue:var(--red-300);--color-status-overdue-subtle:var(--red-900);
  /* Die Leiter kehrt sich im Dunkeln um: überfahren und gedrückt werden HELLER
     als die Ruhefläche. Die Sprossen bleiben dieselben drei. */
  --color-scrim:rgba(0,0,0,0.66);--color-disabled-bg:var(--sand-700);--color-disabled-text:var(--sand-500);
  --color-hover:var(--sand-750);--color-hover-surface:var(--color-hover);--color-active:var(--sand-700);--color-hover-sunken:var(--sand-600);--color-active-sunken:var(--sand-500);
  --color-selected:var(--terracotta-850);--color-selected-text:var(--terracotta-200);--color-link:var(--terracotta-300);--color-link-hover:var(--terracotta-200);
  /* focus dark: terracotta-400 maß gegen surface-raised/hover-surface (sand-700)
     nur 2,71:1 (< 3:1) — eine Stufe heller ergibt 3,71:1. */
  --color-tooltip-bg:var(--blue-800);--color-tooltip-text:var(--blue-100);--color-focus:var(--terracotta-300);--color-focus-contrast:var(--sand-900);
  --chart-1:var(--terracotta-400);--chart-2:var(--olive-400);--chart-3:var(--blue-400);--chart-4:var(--amber-400);--chart-5:var(--plum-400);--chart-6:var(--teal-400);
  --chart-grid:var(--sand-700);--chart-axis:var(--sand-600);--chart-label:var(--sand-400);--chart-benchmark:var(--sand-300);--chart-div-mid:var(--sand-700);
}

/* ---- Clinical Blue + Dark (kombiniert; gewinnt per Spezifität) ----
   Dieselbe Umsortierung wie beim warmen Schema (s. Begründung dort):
   bg 900→800 · surface 800→850 · sunken 850→700 · raised 700→900. */
[data-theme="clinical"][data-mode="dark"]{
  --color-bg:var(--slate-800);--color-surface:var(--slate-850);--color-surface-sunken:var(--slate-700);--color-surface-raised:var(--slate-900);
  /* text-subtle: slate-400 maß auf surface 4,46:1 — knapp unter AA. Wie schon im
     Light-Modus (s. :root) fällt die Stufe mit text-muted zusammen; die Rolle
     bleibt eigenständig, Re-Differenzierung weiterhin offen. */
  --color-text:var(--slate-50);--color-text-muted:var(--slate-300);--color-text-subtle:var(--slate-300);--color-text-inverse:var(--slate-900);
  --color-border:var(--slate-700);--color-border-strong:var(--slate-600);--color-border-subtle:var(--slate-750);
  /* primary-subtle 900 → 800: dieselbe Korrektur wie im warmen Schema — auf der
     dunkleren Karte war die Auswahl-Einfärbung sonst unsichtbar. */
  --color-primary:var(--steel-500);--color-primary-hover:var(--steel-400);--color-primary-active:var(--steel-300);--color-primary-subtle:var(--steel-800);--color-on-primary:var(--slate-50);--color-primary-text:var(--steel-200);
  --color-accent:var(--petrol-500);--color-accent-hover:var(--petrol-400);--color-accent-active:var(--petrol-300);--color-accent-subtle:var(--petrol-900);--color-on-accent:var(--slate-50);
  --color-on-cool:var(--slate-50);--color-on-success:var(--slate-900);--color-on-warning:var(--slate-900);--color-on-danger:var(--slate-50);--color-on-info:var(--slate-50);
  --color-disabled-bg:var(--slate-700);--color-disabled-text:var(--slate-500);
  --color-hover:var(--slate-750);--color-hover-surface:var(--color-hover);--color-active:var(--slate-700);--color-hover-sunken:var(--slate-600);--color-active-sunken:var(--slate-500);
  --color-selected:var(--steel-800);--color-selected-text:var(--steel-200);--color-link:var(--steel-300);--color-link-hover:var(--steel-200);
  --color-focus:var(--steel-300);--color-focus-contrast:var(--slate-900); /* steel-400 maß gegen surface-raised nur 2,58:1 */
  --chart-1:var(--steel-400);--chart-2:var(--petrol-400);--chart-grid:var(--slate-700);--chart-axis:var(--slate-600);--chart-label:var(--slate-300);--chart-benchmark:var(--slate-300);--chart-div-mid:var(--slate-700); /* chart-label: slate-400 = 4,46:1 < AA */
}


/* ============================================================================
   SCHATTENFARBE & KANTENLICHT — Theme-Achse der Elevation (Rollen in elevation.css)
   ----------------------------------------------------------------------------
   `--sh` ist ein RGB-Tripel ohne Klammern für rgba(var(--sh), var(--sh-aN));
   `--card-inset` ist die 1px-Kantenlinie im Dunkelmodus (im Hellen wirkungslos).
============================================================================ */
:root{
  --sh:53,40,28; /* terracotta/hell */
  --sh-a1:.05;--sh-a2:.07;--sh-a3:.10;--sh-a4:.14;
  --card-inset:inset 0 0 0 0 rgba(0,0,0,0); /* hell: wirkungslos */
}
[data-theme="clinical"]{
  --sh:22,28,38; /* clinical/hell */
  --sh-a1:.05;--sh-a2:.07;--sh-a3:.10;--sh-a4:.14;
  --card-inset:inset 0 0 0 0 rgba(0,0,0,0);
}
[data-mode="dark"]{
  /* Im Dunkeln trägt KEIN Theme eine Tönung: ein getönter Schatten auf dunklem
     Grund liest sich als Schmutz, nicht als Tiefe. */
  --sh:0,0,0;
  --sh-a1:.26;--sh-a2:.32;--sh-a3:.40;--sh-a4:.48; /* terracotta/dunkel */
  --card-inset:inset 0 1px 0 rgba(255,255,255,.045);
}
[data-theme="clinical"][data-mode="dark"]{
  --sh:0,0,0;
  --sh-a1:.24;--sh-a2:.30;--sh-a3:.38;--sh-a4:.46;
  --card-inset:inset 0 1px 0 rgba(255,255,255,.055);
}

/* ============================================================================
   HIGH-CONTRAST — reagiert auf prefers-contrast: more, verstärkt Rahmen und
   gedämpften Text je Theme/Modus. Komponenten tun dafür nichts extra.
============================================================================ */
@media (prefers-contrast: more){
  :root{--color-border:var(--sand-400);--color-border-strong:var(--sand-500);--color-text-muted:var(--sand-700);--color-text-subtle:var(--sand-600);--color-focus:var(--terracotta-700);}
  [data-theme="clinical"]{--color-border:var(--slate-400);--color-border-strong:var(--slate-500);--color-text-muted:var(--slate-700);--color-text-subtle:var(--slate-600);--color-focus:var(--steel-700);}
  [data-mode="dark"]{--color-border:var(--sand-500);--color-border-strong:var(--sand-400);--color-text-muted:var(--sand-200);}
  [data-theme="clinical"][data-mode="dark"]{--color-border:var(--slate-500);--color-border-strong:var(--slate-400);--color-text-muted:var(--slate-200);}
}

/* ============================================================================
   HERKUNFTS-/QUELLEN-TOKENS — Vorlage-Legende: manual (Anwender-Eingabe) ·
   inherited (Vorvereinbarung/Stammdaten) · derived (vorgelagerte Kalkulation) ·
   reserve (noch ohne Anwendungsfall). Je Rolle: Vollton/-subtle/-text.
============================================================================ */
:root{
  --color-source-manual:var(--blue-500);--color-source-manual-subtle:var(--blue-50);--color-source-manual-text:var(--blue-700);
  --color-source-inherited:var(--green-500);--color-source-inherited-subtle:var(--green-50);--color-source-inherited-text:var(--green-700);
  --color-source-derived:var(--amber-400);--color-source-derived-subtle:var(--amber-50);--color-source-derived-text:var(--amber-700);
  --color-source-reserve:var(--plum-500);--color-source-reserve-subtle:var(--plum-50);--color-source-reserve-text:var(--plum-700);
}
[data-mode="dark"]{
  --color-source-manual:var(--blue-400);--color-source-manual-subtle:var(--blue-900);--color-source-manual-text:var(--blue-300);
  --color-source-inherited:var(--green-400);--color-source-inherited-subtle:var(--green-900);--color-source-inherited-text:var(--green-300);
  --color-source-derived:var(--amber-400);--color-source-derived-subtle:var(--amber-900);--color-source-derived-text:var(--amber-300);
  --color-source-reserve:var(--plum-400);--color-source-reserve-subtle:var(--plum-900);--color-source-reserve-text:var(--plum-300);
}

/* ============================================================================
   ROLLEN-/KATEGORIE-TOKENS — wiederverwendbare Kategorie-Farben (z. B. Termin-Arten).
   Binden an Semantic-Tokens → adaptieren automatisch über Theme/Mode. Hier definiert,
   damit Kalender, Aufgaben & spätere Funktionen DASSELBE Farbset teilen.
============================================================================ */
/* TERMINARTEN-FARBACHSE: accent · info · warning. Interne Besprechung = accent ·
   Verhandlung = info · auslaufende Vereinbarung = warning. NICHT primary für
   Verhandlung: Der Termin-Chip trägt die Art-Farbe als Fläche und die Auswahl
   einen Primär-Innenring — mit primary als Art-Farbe wären „Verhandlung" und
   „ausgewählt" ununterscheidbar. Gilt app-weit, nicht nur im Kalender. */
:root{
  --color-cat-verhandlung:var(--color-info-text);--color-cat-verhandlung-subtle:var(--color-info-subtle);
  --color-cat-intern:var(--color-accent);--color-cat-intern-subtle:var(--color-accent-subtle);
}
/* Zwei Gründe für die Wiederholung hier (statt nur in :root):
   1) var(--color-primary-subtle) löst sonst am <html> auf und friert dort ein,
      sobald data-theme/data-mode TIEFER im Baum sitzen (App: [data-app]).
   2) Dark: mittlere primary/accent-Stufen sind als Text zu schwach.
   MUSS NACH dem :root-Block stehen — gleiche Spezifität, Reihenfolge entscheidet. */
[data-theme], [data-mode]{
  --color-cat-verhandlung:var(--color-info-text);--color-cat-verhandlung-subtle:var(--color-info-subtle);
  --color-cat-intern:var(--color-accent);--color-cat-intern-subtle:var(--color-accent-subtle);
}
/* Nur noch „intern" braucht die Dunkel-Nachbesserung: `--color-accent` ist eine
   FLÄCHEN-Rolle und misst als Text auf dunklem Grund nur ~2,7:1. `--color-info-text`
   ist bereits die Text-Rolle ihrer Familie und in beiden Modi geprüft. */
[data-mode="dark"]{
  --color-cat-intern:var(--olive-200);
}
[data-theme="clinical"][data-mode="dark"]{
  --color-cat-intern:var(--petrol-200);
}

/* ---------------------------------------------------------------------------
   SCHRITT-KACHEL (KAVA) — eigene Tokens statt --color-success (verschiedene
   Rollen; sonst liefe die Kachel bei Success-Korrekturen unbemerkt mit).
   Buchstabe ist DUNKEL auf heller Fläche — Polarität, nicht Flächenkontrast,
   unterscheidet „erledigt" von „läuft".
--------------------------------------------------------------------------- */
:root{
  --color-schritt-erledigt:var(--green-400);--color-on-schritt-erledigt:var(--sand-900);
}
[data-theme="clinical"]{
  --color-on-schritt-erledigt:var(--slate-900);
}

/* ============================================================================
   EINGABE — eigene Farbrolle für Felder und Auswahlen
   ----------------------------------------------------------------------------
   Eigene Rolle, weil der Stil „flach" (tokens/stil-flach.css) dem Eingabefeld
   den Grund nimmt und dafür den Rand betont. Im STANDARD zeigen beide auf das,
   was `field.tsx` bisher direkt gesetzt hat — dort ändert sich nichts.
   Selektor wie in elevation.css: Eine Custom Property löst ihre var()-Verweise
   am Deklarationsort auf; nur `:root` fröre die Farbe des hellen Schemas ein,
   und ein Modus-Wechsel am inneren [data-app] bliebe wirkungslos.
============================================================================ */
:root, [data-theme], [data-mode]{
  --color-eingabe-grund:var(--color-surface);
  --color-eingabe-rand:var(--color-border);
  /* Die Randzone einer rollenden Fläche (elevation.css): im Standard
     unsichtbar, der flache Stil färbt sie und macht sie zum Rahmen. */
  --color-flaeche-randzone:transparent;
}