/* ============================================================
   Katrin Friedel Live – Design-Tokens
   Farben und Schriften aus dem Stil von katrinfriedel.com
   (neue Website, config/theme.json):
   Weiß als Grund, Nachtblau #1C2B4A für Text und Merkboxen,
   Rot #CD2A32 als Signal, #B02128 als Knopffläche.
   Schriften: IBM Plex Sans (Überschriften, Knöpfe, Kicker,
   Zahlen), Lora (alle anderen Texte).
   Anmutung: klar · ruhig · verbindlich.

   Rollen: Die Variablennamen --lime (Signal) und --pink
   (Handlung) stammen aus der Vorlage und bleiben, damit der
   Komponenten-Code unverändert läuft. Sie tragen jetzt Rot.

   Hell ist der Standard. [data-theme="dark"] hält die
   nachtblaue Bühne als Option bereit (z. B. für Webinare).
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Brand (CI – unveränderlich) ---- */
  --lime: #CD2A32;        /* Signal: Rot – als Text auf Weiß 5,3:1 */
  --lime-bright: #E0454D;
  --lime-dark: #B02128;
  --pink: #B02128;        /* Handlung: Knopffläche, weiße Schrift darauf 6,6:1 */
  --pink-bright: #CD2A32; /* Knopf beim Überfahren */
  --pink-dark: #B02128;
  --gold: #CD2A32;
  --black: #000000;
  --graphite: #1C2B4A;    /* Nachtblau */
  --nacht: #1C2B4A;
  --nacht-tief: #131F36;
  --white: #FFFFFF;
  --on-accent: #FFFFFF;   /* Text auf roten Flächen */

  /* ---- Hintergrund-Treppe: Weiß (Default) ---- */
  --bg-0: #FFFFFF;
  --bg-1: #FFFFFF;
  --bg-2: #FFFFFF;        /* Bühne */
  --bg-3: #F4F5F8;        /* Grund-2 */
  --bg-4: #E2E5EB;        /* Linie */

  /* ---- Text auf Hell (aus Nachtblau) ---- */
  --text-100: #1C2B4A;
  --text-200: rgba(28,43,74,.92);
  --text-300: #4A5468;
  --text-400: #5B6476;
  --text-500: rgba(28,43,74,.45);
  --text-600: rgba(28,43,74,.30);

  /* ---- Rahmen ---- */
  --border-subtle: rgba(28,43,74,.07);
  --border-soft: #E2E5EB;
  --border-strong: rgba(28,43,74,.22);
  --border-active: rgba(176,33,40,.45);
  --focus-ring:    rgba(176,33,40,.80);

  /* ---- Status (UI-Ampel, keine CI-Farben; auf Weiß lesbar) ---- */
  --status-green: #1B7F46;
  --status-yellow: #9A6A00;
  --status-red: #B42318;

  /* ---- Akzent-Text-Aliase ---- */
  --signal-text: var(--lime);
  --ok-text:     var(--status-green);
  --warn-text:   var(--status-yellow);
  --alert-text:  var(--status-red);

  /* ---- Verläufe (sparsam: nur für Schlüsselwörter) ---- */
  --grad-headline: linear-gradient(135deg, var(--lime) 0%, var(--pink) 100%);
  --grad-progress: linear-gradient(90deg, var(--pink) 0%, var(--lime) 100%);
  --grad-text: linear-gradient(135deg, var(--nacht) 0%, var(--lime) 50%, var(--nacht) 100%);

  /* ---- Spacing-Skala (4er-Basis) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* ---- Radius-Skala ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Schatten (weich, nachtblau getönt) ---- */
  --shadow-sm: 0 1px 2px rgba(28,43,74,.08);
  --shadow-md: 0 8px 24px rgba(28,43,74,.10), 0 2px 6px rgba(28,43,74,.06);
  --shadow-lg: 0 24px 60px -12px rgba(28,43,74,.18), 0 12px 28px -8px rgba(28,43,74,.10);

  /* ---- Glow aus – flach wie die Website ---- */
  --glow-lime: none;
  --glow-pink: none;

  /* ---- Typo ----
     --font: Lora für Texte. --font-display: IBM Plex Sans für Überschriften,
     Knöpfe und große Zahlen. --mono heißt aus der Vorlage so, trägt aber
     ebenfalls IBM Plex Sans: Kicker, Labels, Codes und Zahlen. */
  --font: 'Lora',Georgia,serif;
  --font-display: 'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono: 'IBM Plex Sans',system-ui,-apple-system,sans-serif;

  /* ---- Font-Size-Skala (diskret) ---- */
  --fs-xs: 12px;  --fs-sm: 14px;  --fs-md: 16px;  --fs-lg: 20px;
  --fs-xl: 24px;  --fs-2xl: 32px; --fs-3xl: 40px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: .15s;
  --t: .25s;
  --t-slow: .4s;

  /* ---- KI-Denk-Indikator (Warten sichtbar machen – 22-design-principles.md §8.8) ---- */
  --think-pulse:   1.15s;  /* Balken-Atmung (ein Loop) */
  --think-stagger: .16s;   /* Versatz je Balken */
  --think-cycle:   1.5s;   /* Wort-Wechsel-Takt */
  --think-word-in: .3s;    /* Einblendung des neuen Worts */

  /* ---- Layout ---- */
  --container: 1200px;
  --reading: 900px;
}

/* ============================================================
   Option: nachtblaue Bühne (<html data-theme="dark">)
   Rot auf Nacht als #FF6B72, weil #CD2A32 auf #1C2B4A als
   Schrift zu wenig Kontrast hat.
   ============================================================ */

[data-theme="dark"] {
  color-scheme: dark;
  --lime: #FF6B72;
  --lime-bright: #FF8A90;
  --lime-dark: #CD2A32;
  --pink: #CD2A32;
  --pink-bright: #E0454D;
  --on-accent: #131F36;
  --bg-0: #0E1729;
  --bg-1: #131F36;
  --bg-2: #1C2B4A;
  --bg-3: #22345A;
  --bg-4: #2B4069;
  --text-100: #FFFFFF;
  --text-200: rgba(255,255,255,.92);
  --text-300: rgba(255,255,255,.72);
  --text-400: rgba(255,255,255,.55);
  --text-500: rgba(255,255,255,.40);
  --text-600: rgba(255,255,255,.28);
  --border-subtle: rgba(255,255,255,.06);
  --border-soft: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);
  --border-active: rgba(255,107,114,.40);
  --focus-ring:    rgba(255,107,114,.70);
  --status-green: #4ADE80;
  --status-yellow: #FBBF24;
  --status-red: #F87171;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.65), 0 12px 28px -8px rgba(0,0,0,.45);
  --glow-lime: 0 0 24px rgba(255,107,114,.35);
  --glow-pink: 0 0 24px rgba(205,42,50,.35);
}