/* Halo · Design-Tokens — EINZIGE Quelle der Wahrheit für Farben & Schatten.
 *
 * Regeln:
 *  - Komponenten beziehen Farben ausschließlich über diese Tokens (var(--c-…)).
 *  - Keine hartkodierten Hex-/rgba-Werte in Stylesheets, Inline-Styles oder JS.
 *  - Ausnahmen (technisch bedingt, hier dokumentiert):
 *      · <meta name="theme-color"> kann keine CSS-Variablen lesen → #050E3A (= --c-navy-deep)
 *      · Standalone-SVG-Dateien (assets/halo-logo.svg, halo-favicon.svg)
 *      · E-Mail-HTML (api/signup.js) — E-Mail-Clients unterstützen keine CSS-Variablen;
 *        dort sind die Werte dieser Palette inline gespiegelt (Mapping im Kommentar dort).
 *
 * Geladen via @import in assets/halo.css; Seiten ohne halo.css (index.html,
 * companion-demo.html) binden diese Datei direkt per <link> ein.
 */

:root {
  /* ---- Typografie ----
   * EINE Familie für die gesamte Oberfläche (Headlines + Fließtext): Inter.
   * Vereinheitlicht 2026-06-12 (vorher Fraunces-Serif-Headlines — wirkte
   * uneinheitlich). Ausnahme: .doc-preview zeigt bewusst Serif, weil sie
   * das erzeugte PDF (Times) abbildet. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-doc:  Georgia, 'Times New Roman', serif;

  /* ---- Flächen ---- */
  --c-bg:           #F8F9FD;  /* Seitenhintergrund, kühles Off-White */
  --c-surface:      #FFFFFF;  /* Karten / Panels hell */
  --c-surface-soft: #EFF3FB;  /* abgesetzte helle Flächen (Chips, deaktivierte Buttons) */

  /* ---- Marke ---- */
  --c-navy:         #06176F;  /* Primär: dunkle Panels, dunkle Buttons, Logo */
  --c-navy-deep:    #050E3A;  /* Display-Headlines (Serif), Header/Footer, tiefstes Navy */

  /* ---- Akzent / Status ---- */
  --c-green:        #34C270;  /* Primär-CTA, Success, Fortschrittsbalken */
  --c-green-bright: #27D26C;  /* Heller Akzent: kursive Display-Wörter, Akzente auf Navy */
  --c-green-hover:  #2BAD64;  /* Hover-Zustand grüner CTAs */
  --c-amber:        #C29A1E;  /* Warnung / „Update empfohlen" (Flächen, Borders, Dots) */
  --c-red:          #B94A41;  /* Fehler / „fehlt" */

  /* Status-Tints (helle Hintergrundflächen) */
  --c-green-soft:   #E3F7EC;
  --c-amber-soft:   #F7EFD8;
  --c-red-soft:     #F8E6E4;

  /* Textsichere dunkle Status-Varianten (≥ 4.5:1 auch auf den Soft-Tints —
   * WCAG AA). Für TEXT auf hellen Flächen statt --c-green/--c-amber/--c-red. */
  --c-green-deep:   #1E7A47;
  --c-amber-deep:   #8A6C12;
  --c-red-deep:     #9A3A32;

  /* Helle Status-Varianten für Text/Zahlen auf Navy-Panels */
  --c-amber-bright: #E2BC4E;
  --c-red-bright:   #E58B80;

  /* ---- Struktur & Text ---- */
  --c-track:        #E8EFF9;  /* Fortschritts-Track, feine Linien / Borders */
  --c-text:         #13161D;  /* Fließtext, fast schwarz */
  --c-text-muted:   #5C6B82;  /* Eyebrow-Labels, Sekundärtext */

  /* ---- RGB-Kanäle für rgba()-Ableitungen (Alpha-Varianten) ----
   * Verwendung: rgba(var(--c-green-rgb), 0.18) */
  --c-navy-rgb:     6, 23, 111;
  --c-navy-deep-rgb: 5, 14, 58;
  --c-green-rgb:    52, 194, 112;
  --c-white-rgb:    255, 255, 255;
  --c-text-rgb:     19, 22, 29;

  /* ---- Schatten ---- */
  --shadow: 0 2px 8px rgba(var(--c-navy-rgb), 0.04), 0 12px 40px rgba(var(--c-navy-rgb), 0.08);
}