/* ============================================================
   FIT4PROJECTS Live – Design-Tokens
   Abgeleitet vom FIT4PROJECTS-Design-System, Variante Gold (B2B,
   Sie-Form): dunkle Flächen, ein Akzent (Gold), Systemschriften.
   Die Variablennamen stammen aus der Vorlage und bleiben,
   damit live.css, regie.css und praesentation.css unverändert
   funktionieren:
   --lime-*  = Signalfarbe  -> Gold
   --pink-*  = Aktionsfarbe -> Kupfer (zweiter Ton für Knöpfe,
               Hürden-Fragen und den wahren Wert bei Schätzfragen;
               die Leinwand braucht zwei unterscheidbare Töne)
   Farben ändern: nur hier und die rgba-Werte in live.css und
   praesentation.css (Gold 201,149,42 · Kupfer 185,80,47).
   ============================================================ */

:root {
  color-scheme: dark;   /* native Widgets (Scrollbars, Date-Picker) dunkel – Learning F8 */

  /* ---- Brand (CI – unveränderlich) ---- */
  --lime: #C9952A;
  --lime-bright: #DBA934;
  --lime-dark: #B07E1E;
  --pink: #B9502F;
  --pink-bright: #D96A45;
  --pink-dark: #8E3A20;   /* farbiger Text auf Hell 6,8:1 – auf Dunkel nie als Text */
  --gold: #C9952A;
  --black: #000000;
  --graphite: #15151D;
  --white: #FFFFFF;
  --on-accent: #0A0A0F;   /* Text auf Lime-Flächen (12,4:1), mode-unabhängig – nie var(--bg-0) dafür */
  --lime-rgb: 201,149,42;  /* rgba(var(--lime-rgb), .x) in live.css and praesentation.css */
  --pink-rgb: 185,80,47;
  --lime-ink: #8A6414;     /* accent as text on white */
  --action-bg: #B9502F;    /* buttons and the call to action */
  --action-fg: #FFFFFF;

  /* ---- Hintergrund-Treppe: Dark-Werte (Default) ---- */
  --bg-0: #0A0A0F;
  --bg-1: #0E0E14;
  --bg-2: #12121A;
  --bg-3: #1A1A24;
  --bg-4: #23232F;

  /* ---- Text auf Dunkel ---- */
  --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);

  /* ---- Rahmen ---- */
  --border-subtle: rgba(255,255,255,.06);
  --border-soft: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.18);
  --border-active: rgba(201,149,42,.40);
  --focus-ring:    rgba(201,149,42,.60);   /* Fokus-Outline (:focus-visible) – 4,4:1 auch auf --bg-4; --border-active fällt dort mit 1,6:1 durch */

  /* ---- Status (UI-Ampel, keine CI-Farben; Dark-kalibriert –
     auf Hell nie als Text, siehe Akzent-Text-Aliase) ---- */
  --status-green: #4ADE80;
  --status-yellow: #FBBF24;
  --status-red: #F87171;

  /* ---- Akzent-Text-Aliase (22 §12 mechanisch) ----
     Akzent-/statusfarbener TEXT nutzt diese Aliase, nie die Rohtöne –
     sie kippen im Light-Mode mit (Gold/Ampel sind auf Hell kein Text). */
  --signal-text: var(--lime);
  --ok-text:     var(--status-green);
  --warn-text:   var(--status-yellow);
  --alert-text:  var(--status-red);

  /* ---- Verläufe ----
     Gold-Verlauf NUR als --grad-headline für Schlüsselwörter in H1
     (background-clip: text; sparsam, typisch 1–2 Wörter).
     Sonst nirgends – nie Hintergrund, Flächen, Buttons, Borders,
     und nie in der { }-Wortmarke (pro Wort eine Hervorhebung, 22 §2.3). */
  --grad-headline: linear-gradient(135deg, var(--lime-bright) 0%, var(--lime) 55%, var(--lime-dark) 100%);
  --grad-progress: linear-gradient(90deg, var(--lime-dark) 0%, var(--lime-bright) 100%);
  --grad-text: linear-gradient(135deg, #FFFFFF 0%, var(--lime) 50%, #FFFFFF 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 ---- */
  --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 (Dark-Mode-Stilmittel) ---- */
  --glow-lime: 0 0 24px rgba(201,149,42,.40);
  --glow-pink: 0 0 24px rgba(185,80,47,.35);

  /* ---- Typo ---- */
  --font: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono: 'Roboto Mono','Consolas',ui-monospace,monospace;

  /* ---- 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;
}

/* ============================================================
   Designs je Session (wie im Foliengenerator, renderer/themes.json):
   <html data-design="b2c|f4p">. Ohne Attribut gilt Gold (B2B) oben.
   Dunkel ist je Design fast schwarz und getönt; --pink ist der
   Kontrastton für Hürden, falsche Antworten und Gruppenmarken (Indigo: Lime).
   ============================================================ */

[data-design="b2c"] {
  --lime: #6C72FF; --lime-bright: #8F94FF; --lime-dark: #4F46E5; --lime-rgb: 108,114,255;
  --lime-ink: #4F46E5;
  --pink: #B8F02A; --pink-bright: #D2FF5C; --pink-dark: #4D7C0F; --pink-rgb: 184,240,42;
  --on-pink: #0B0B24;   /* Lime trägt dunkle Schrift */
  --gold: #6C72FF;
  --on-accent: #FFFFFF;
  --action-bg: #4F46E5; --action-fg: #FFFFFF;
  --bg-0: #07071C; --bg-1: #0B0B24; --bg-2: #0F102C; --bg-3: #15163F; --bg-4: #1D1F52;
}

[data-design="f4p"] {
  --lime: #34C6F4; --lime-bright: #6FD7F8; --lime-dark: #0A9BD0; --lime-rgb: 52,198,244;
  --lime-ink: #0A6F96;
  --pink: #F0703C; --pink-bright: #FF8C5E; --pink-dark: #B4481F; --pink-rgb: 240,112,60;
  --gold: #34C6F4;
  --on-accent: #04213F;
  --action-bg: #34C6F4; --action-fg: #04213F;
  --bg-0: #00021E; --bg-1: #010527; --bg-2: #030A30; --bg-3: #08103A; --bg-4: #101A4A;
}

/* Indigo auf Hell: Lime als Text und Balken eine Stufe dunkler, sonst unlesbar auf Weiß */
[data-design="b2c"][data-theme="light"] {
  --pink: #5E8F06; --pink-bright: #76AD0B; --pink-rgb: 94,143,6;
  --on-pink: #FFFFFF;
}

/* ============================================================
   Light-Mode (CI-freigegeben 2026-07-15)
   Überschreibt dieselben Variablennamen – Komponenten-Code
   bleibt unverändert. Dark bleibt Marken-Default; Light per
   Toggle: <html data-theme="light">.
   Akzente auf Hell: farbiger Text nur --pink-dark / --graphite,
   Lime nie als Text (DESIGN-PRINCIPLES §12).
   ============================================================ */

[data-theme="light"] {
  color-scheme: light;   /* native Widgets hell */

  /* ---- Hintergrund-Treppe: Light-Werte ---- */
  --bg-0: #FFFFFF;
  --bg-1: #F8F9F9;
  --bg-2: #FFFFFF;
  --bg-3: #F0F0F0;
  --bg-4: #E8E8E8;

  /* ---- Text auf Hell (aus Graphite) ---- */
  --text-100: #191919;
  --text-200: rgba(25,25,25,.92);
  --text-300: rgba(25,25,25,.75);
  --text-400: rgba(25,25,25,.62);
  --text-500: rgba(25,25,25,.42);
  --text-600: rgba(25,25,25,.30);

  /* ---- Rahmen auf Hell ---- */
  --border-subtle: rgba(0,0,0,.07);
  --border-soft: rgba(0,0,0,.12);
  --border-strong: rgba(0,0,0,.22);
  --border-active: rgba(142,58,32,.45); /* Kupfer dunkel – aktive Rahmen; als Outline zu schwach (2,4:1) */
  --focus-ring:    rgba(142,58,32,.80); /* Fokus-Outline – 4,9:1 auf Weiß, 4,2:1 auf --bg-4 */

  /* ---- Schatten auf Hell (weicher) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.16), 0 12px 28px -8px rgba(0,0,0,.10);

  /* ---- Glow aus – Schatten übernehmen die Tiefe ---- */
  --glow-lime: none;
  --glow-pink: none;

  /* ---- Akzent-Text auf Hell: die Schriftfarbe des Designs (--lime-ink); die Ampel-Töne
     fallen als Text durch (Grün 1,74:1, Gelb 1,67:1, Rot 2,6:1) →
     ok/warn/alert neutral, Bedeutung tragen Icon/Text (22 §13). ---- */
  --signal-text: var(--lime-ink);
  --ok-text:     var(--text-200);
  --warn-text:   var(--text-200);
  --alert-text:  var(--text-200);
}

/* Optional: System-Präferenz respektieren, solange kein
   expliziter Toggle gesetzt ist. Aktivierung pro Produkt
   bewusst entscheiden (Dark bleibt Marken-Default):

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { ... Light-Werte wie oben ... }
}
*/