/* ──────────────────────────────────────────────────────────────────────────
 * 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 — CI ratifiziert ADR_BRAND_007 (01.06.2026) */
  --petrol:        #15515A;  /* Basis / Stabilitätsanker (vorher #1B6E7A) */
  --petrol-dk:     #103D44;  /* Dunkle Petrol-Fläche: Footer (abgeleitet aus #15515A; vorher #133f47) */
  --petrol-dark:   #0B2A30;  /* Dunkelste Petrol-Fläche: Nav-BG, Reframe-Section (hebt hardcoded #0e2d33; ADR_BRAND_007) */
  --tuerkis:       #3ABFBF;  /* System/Flow — unverändert (ADR_BRAND_007) */

  /* CTA / Akzent — Orange = Erkenntnis-Trigger, sparsam (ADR_BRAND_007) */
  --orange:        #D96A21;  /* Primary CTA (vorher #E87A2D) */
  --orange-hover:  #C25E1C;  /* Button-Hover (vorher #D66B1E) */

  /* Sekundärfarben — OFF-PALETTE ggü. ADR_BRAND_007, bewusst unverändert (siehe REPORT.md / FLAG) */
  --salbei:        #7A9E7E;  /* Step-Cards, Consent-Block — FLAG: nicht in ADR_BRAND_007-Palette */
  --erdbrown:      #8B6347;  /* Lead-Texte, italic Subtext — FLAG: nicht in ADR_BRAND_007-Palette, Vorschlag --mid */

  /* Backgrounds — ADR_BRAND_007 Papier-Layer (bereits konform) */
  --offwhite:      #F5F2EE;  /* Body */
  --papier:        #FBFAF7;  /* Card-Background (Papier-Card Pattern) */
  --weiss:         #FFFFFF;  /* Form-Inputs, Text auf dunkel — FLAG: ADR_BRAND_007 verbietet „reines Weiß" als Fläche (siehe REPORT.md) */

  /* Text */
  --dark:          #23272B;  /* Body-Text, Headlines auf hell — kontraststark (vorher #2C2C2C; ADR_BRAND_007) */
  --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, ADR_LP_007).
   * 3-Font-System (ADR_BRAND_007): Fraunces (Headline) · DM Sans (Body) · JetBrains Mono (Labels/System-Stimme). */
  --font-serif:    'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:     'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

  /* ═══ 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(217, 106, 33, 0.22);     /* Orange-CTA (neu: #D96A21) */
  --shadow-cta-h:    0 4px 16px rgba(217, 106, 33, 0.32);     /* Orange-CTA Hover */
  --shadow-petrol:   0 12px 36px rgba(21, 81, 90, 0.14);      /* Hero-Image Frame (neu: #15515A) */
  --shadow-diagnose: 0 2px 12px rgba(21, 81, 90, 0.18);       /* Petrol-Card */

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

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

  /* ═══ SPACING ══════════════════════════════════════════════════════════ */

  --space-footer-gap:  clamp(6rem, 11vw, 11rem);   /* Abstand letzter Inhalt → Footer (ADR_LP_003) */

  /* ═══ 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.
 * ──────────────────────────────────────────────────────────────────────── */