/* Design-Tokens — spec/design.md §1 (+ Heatmap-Stufen aus §4.4).
   Kein Farbwert darf außerhalb dieser Datei hart stehen. */
:root {
  color-scheme: dark;

  /* Flächen — 5 Stufen, jede Stufe genau eine Rolle */
  --g0: #0E1218;  /* App-Hintergrund, hinter allem */
  --g1: #131820;  /* Sidebar, Kopfzeile, Panels am Rand */
  --g2: #181E27;  /* Karte, Tabelle, Drawer-Körper — DIE Inhaltsfläche */
  --g3: #1F2631;  /* Erhöht: Tabellenkopf, Eingabefelder, Zeilen-Hover, Sekundärbutton */
  --g4: #262E3A;  /* Überlagernd: Popover, Menü, Tooltip, Modal-Körper, aktive Zeile */

  /* Text — 3 Stufen */
  --t1: #E8ECF1;  /* Primär: Werte, Titel, Zellen */
  --t2: #A9B2BF;  /* Sekundär: Labels, Untertitel, Tabellenkopf */
  --t3: #8B95A4;  /* Gedämpft: Unterzeilen, Platzhalter, Meta, deaktiviert */
  --ink: #0B1118; /* Text AUF Akzent-/Signalflächen (Primärbutton, volle Heatmap-Zelle) */

  /* Linien */
  --line: #2A3340;         /* Kartenrand, Zellentrenner, Haarlinien */
  --line-strong: #3A4556;  /* Eingabefeld-Rand, Trenner auf --g3/--g4 */

  /* Akzent — Cyan (Aktion, Auswahl, aktiver Zustand) + ein Sekundär */
  --akzent: #4FD1E3;        /* Text, Icons, Links, Fokus, aktiver Nav-Balken, Heatmap-Ende */
  --akzent-stark: #22B8CC;  /* Primärbutton-Fläche (mit --ink als Text) */
  --akzent-hover: #66DAEA;  /* Primärbutton Hover */
  --akzent-14: rgba(79, 209, 227, 0.14);  /* Auswahl-Hintergrund, Akzent-Pille */
  --akzent-24: rgba(79, 209, 227, 0.24);  /* Auswahl-Hintergrund Hover */
  --sekundaer: #D9B36C;     /* Gold, gedämpft: Zielmonat-Markierung, "Neu"-Pille, Score-Ring. Nie für Aktionen. */
  --sekundaer-14: rgba(217, 179, 108, 0.14);

  /* Signale — Text-Farbe; Flächen immer als 14 %-Tint */
  --ok:   #4CC38A;  --ok-14:   rgba(76, 195, 138, 0.14);
  --warn: #E5A94A;  --warn-14: rgba(229, 169, 74, 0.14);
  --stop: #F07575;  --stop-14: rgba(240, 117, 117, 0.14);
  --info: #7FB2F5;  --info-14: rgba(127, 178, 245, 0.14);

  /* Gefährlich-bestätigt Hover (§4.6) und gefährlicher Rand (40 % Alpha) */
  --stop-hell: #F48A8A;
  --stop-40: rgba(240, 117, 117, 0.40);
  --scrim: rgba(14, 18, 24, 0.55);

  /* Abstände — 4er-Raster */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Schrift */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-0: 11px;  /* Mikro: Pillen-Text, Heatmap-Zellwert, Achsenbeschriftung */
  --fs-1: 12px;  /* Meta, Unterzeilen, Tabellen-Kopf, Gruppenlabel Sidebar */
  --fs-2: 13px;  /* Tabellenzellen, dichte Listen, Formularhilfe */
  --fs-3: 14px;  /* Fließtext, Nav-Einträge, Buttons, Eingaben */
  --fs-4: 16px;  /* Kartentitel, Drawer-Titel, Untertitel der Seite */
  --fs-5: 20px;  /* Seitentitel */
  --fs-6: 28px;  /* KPI-Wert */
  --lh-tight: 1.2; --lh-ui: 1.4; --lh-text: 1.55;
  --fw-4: 400; --fw-5: 500; --fw-6: 600;

  /* Radien */
  --r-1: 4px;    /* Checkbox, Heatmap-Zelle, Mini-Badge */
  --r-2: 6px;    /* Button, Eingabe, Pille-in-Tabelle, Tooltip */
  --r-3: 10px;   /* Karte, Drawer, Modal, Toast */
  --r-full: 999px; /* Pille, Toggle, Stepper-Kreis */

  /* Tiefe — sparsam. Schatten haben Offset UND Blur. */
  --shadow-1: 0 4px 12px rgba(0, 0, 0, 0.35);                   /* Popover, Menü, Tooltip */
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0,0,0,.3); /* Drawer, Modal, Toast */
  --glow-akzent: 0 0 0 3px var(--akzent-24);                    /* NUR: Primärbutton Hover + die eine Bewegung (Abschnitt 6) */

  /* Fokus */
  --focus: 0 0 0 2px var(--g0), 0 0 0 4px var(--akzent);        /* zweistufig, lesbar auf jeder Fläche */

  /* Layout */
  --sidebar-w: 232px; --sidebar-w-rail: 56px; --header-h: 56px;
  --content-max: 1560px; --content-pad: 24px;
  --row-h: 36px; --row-h-head: 32px;

  /* Bewegung */
  --dur-1: 120ms; --dur-2: 160ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Heatmap — 5 diskrete Stufen von --g2 bis --akzent (§4.4) */
  --heat-0: #181E27;
  --heat-1: #23424D;
  --heat-2: #2E6672;
  --heat-3: #3F9BAB;
  --heat-4: #4FD1E3;
  --heat-ink-0: var(--t1);
  --heat-ink-1: var(--t1);
  --heat-ink-2: var(--t1);
  --heat-ink-3: var(--ink);
  --heat-ink-4: var(--ink);
}