/* ──────────────────────────────────────────────────────────────────────────
 * design-tokens.css
 *
 * Single Source of Truth für alle Design-Tokens auf birgitwirtz.com
 * Verbindlich gemäß ADR_LP_003 (30.04.2026).
 *
 * Regel: Token-Werte werden NUR hier geändert.
 *        Inline-Werte in HTML/CSS sind ein Anti-Pattern und müssen refaktoriert werden.
 *
 * Ladereihenfolge: Diese Datei IMMER vor layout.css und vor Page-spezifischem CSS einbinden.
 * ──────────────────────────────────────────────────────────────────────── */

:root {

  /* ═══ FARBEN ═══════════════════════════════════════════════════════════ */

  /* Primary Brand */
  --petrol:        #1B6E7A;  /* Primärfarbe, Section-Labels, Card-Borders */
  --petrol-dk:     #133f47;  /* Dunkle Sektionen (Reframe-Section, Nav-BG) */
  --tuerkis:       #3ABFBF;  /* Highlights, Pain-Cards, Hover-States */

  /* CTA / Akzent */
  --orange:        #E87A2D;  /* Primary CTA — Submit, Erstgespräch, Health-Check-Start */
  --orange-hover:  #D66B1E;  /* Button-Hover */

  /* Sekundärfarben */
  --salbei:        #7A9E7E;  /* Step-Cards, Consent-Block */
  --erdbrown:      #8B6347;  /* Lead-Texte, italic Subtext, Fragebogen-Sub */

  /* Backgrounds */
  --offwhite:      #F5F2EE;  /* Body */
  --papier:        #FBFAF7;  /* Card-Background (Papier-Card Pattern) */
  --weiss:         #FFFFFF;  /* Reine weiße Flächen, Form-Inputs */

  /* Text */
  --dark:          #2C2C2C;  /* Body-Text, Headlines auf hell */
  --mid:           #5a5a5a;  /* Sekundär-Text, Captions */
  --grau-light:    #E5E2DE;  /* Borders, Disabled States */

  /* Status */
  --error:         #C8432B;  /* Fehler-Borders, Validation-Messages */

  /* ═══ TYPOGRAFIE ═══════════════════════════════════════════════════════ */

  /* Fonts werden über @font-face in layout.css selbst-gehostet (DSGVO).
   * Variable Fonts: Fraunces (opsz, ital, wght 300/500/600/700), DM Sans (300/400/500). */
  --font-serif:    'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:     'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* ═══ SCHATTEN ═════════════════════════════════════════════════════════ */

  --shadow-card:     0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-card-h:   0 4px 18px rgba(0, 0, 0, 0.06);          /* Card Hover */
  --shadow-cta:      0 2px 10px rgba(232, 122, 45, 0.22);     /* Orange-CTA */
  --shadow-cta-h:    0 4px 16px rgba(232, 122, 45, 0.32);     /* Orange-CTA Hover */
  --shadow-petrol:   0 12px 36px rgba(27, 110, 122, 0.14);    /* Hero-Image Frame */
  --shadow-diagnose: 0 2px 12px rgba(27, 110, 122, 0.18);     /* Petrol-Card */

  /* ═══ RADIUS ═══════════════════════════════════════════════════════════ */

  --radius-sm:     4px;   /* Buttons, Inputs */
  --radius-md:     6px;   /* Cards */

  /* ═══ LAYOUT-CONTAINER ════════════════════════════════════════════════ */

  --container-narrow:  720px;   /* Health-Check, Lese-Inhalte */
  --container-wide:   1080px;   /* LP-Sektionen */

  /* ═══ TRANSITIONS ══════════════════════════════════════════════════════ */

  --transition-fast:   0.15s ease;
  --transition-med:    0.25s ease;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Hinweis zu Forced-Colors / High-Contrast:
 * Browser kann Farben überschreiben (Win High-Contrast Mode). Wir respektieren das.
 * Falls Anpassungen nötig werden, hier ein @media (forced-colors: active) Block.
 * ──────────────────────────────────────────────────────────────────────── */