/* ==========================================================================
   StreamGuard · Design-Tokens (Richtung A „Regieraum“)
   Einzige Quelle für Farbe, Schrift, Abstand, Radien, Bewegung und Ebenen.
   Komponenten (ui.css) und Seiten (app.css, pages/*.css) verwenden nur diese
   Variablen – keine Hex-Werte in Seiten-CSS.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Flächen, von tief nach hoch ------------------------------------- */
  --void: #08090c;      /* Monitor-Schwarz: Eingabefelder, Wannen, Login-Grund */
  --rail: #0b0d11;      /* linke Modulleiste */
  --bg: #0e1014;        /* Grundfläche */
  --panel: #13161b;     /* Paneele */
  --raised: #181c22;    /* Kopfleisten, aktive Einträge */
  --key: #1d2229;       /* Tastenkappe */
  --key-hi: #252b34;    /* Tastenkappe, Hover */
  --key-lo: #15191e;    /* Unterkante der Tastenkappe */
  --line: #21262e;      /* Haarlinie */
  --line-2: #2d333d;    /* Haarlinie, betont (Paneelrand, Eingaben) */
  --line-3: #46505e;    /* Haarlinie, Hover */
  --hover: rgba(255, 255, 255, 0.018); /* Zeilen-Hover */
  --float: #0a0c10;     /* schwebende Ebenen: Toast, Tooltip */
  --led-off: #262b33;   /* unbeleuchtete LED */
  --avatar-bg: #2a3038;
  --xp-off: #1b1f26;    /* leeres Feld in der Plan-Matrix */
  --xp-off-line: #2a3039;

  /* --- Schrift ---------------------------------------------------------- */
  --ink: #e7e9ed;       /* Primärtext */
  --ink-2: #a4abb6;     /* Sekundärtext */
  --ink-3: #7c8492;     /* Beschriftung, Metadaten (AA auf allen Flächen) */
  --ink-4: #4a515c;     /* nur Deko und deaktivierte Rahmen – nie für lesbaren Text */

  /* --- Signale ---------------------------------------------------------- */
  --pgm: #5b8def;       /* Programm / live – sparsam */
  --pgm-hover: #6d9af1;
  --pgm-ink: #8fb1f5;   /* Programmfarbe als Text */
  --pgm-wash: #172239;  /* Programmfarbe als Fläche (Platzhalter-Chips) */
  --pgm-line: #2f4674;  /* Programmfarbe als Rahmen */
  --on-pgm: #07101f;    /* Text auf Programmfarbe */

  --sig: #41c07e;       /* OK */
  --amber: #e3a33c;     /* Achtung */
  --red: #e5544c;       /* Eingriff */
  --red-hover: #ec6a62;
  --on-red: #1a0605;

  /* Semantische Aliase – in Komponenten bevorzugt */
  --ok: var(--sig);
  --warn: var(--amber);
  --danger: var(--red);
  --ok-line: #1f4a33;
  --warn-line: #57431f;
  --danger-line: #5b2b28;
  --ok-wash: rgba(65, 192, 126, 0.08);
  --warn-wash: rgba(227, 163, 60, 0.08);
  --danger-wash: rgba(229, 84, 76, 0.08);
  --pgm-soft: rgba(91, 141, 239, 0.055);
  --warn-panel: #24211e;   /* --panel mit 8 % Amber, deckend */
  --danger-panel: #241b1f; /* --panel mit 8 % Rot, deckend */

  /* Twitch-Badges im Chat (Text auf 16 % getönter Fläche) */
  --bdg-b: #f08a83;   /* Streamer */
  --bdg-m: #6fd3a2;   /* Moderator */
  --bdg-v: #eb9cc4;   /* VIP */

  /* --- Planfarben (ordinal, eine Hue; validiert gegen --panel) ---------- */
  --p-free: #3a414c;
  --p-starter: #34507f;
  --p-pro: #5b8def;
  --p-agency: #a9c3f7;

  /* --- Diagramme --------------------------------------------------------- */
  --chart-bar: #34496d;       /* abgeschlossene Perioden */
  --chart-bar-hi: #4c6798;    /* Hover */
  --chart-now: var(--pgm);    /* laufende Periode */
  --chart-now-hi: #79a1f2;
  --chart-grid: var(--line);
  --chart-axis: var(--line-2);
  --chart-track: #1a1e25;     /* unbeleuchtetes LED-Segment */
  --chart-lit: #c7ccd4;       /* beleuchtetes LED-Segment, neutral */
  --chart-peak: #8b929d;      /* Spitzenwert-Markierung */

  /* --- Schriftfamilien --------------------------------------------------- */
  --f-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* --- Typo-Skala --------------------------------------------------------
     Display L   Condensed 600  32/1.02   (Login, Sperrkarte)
     Display M   Condensed 600  26/1.15   (KPI-Werte kleiner, Plan-Preise)
     Title       Condensed 600  19/1      (Brückenleiste)
     Heading     Sans 600       14/1.2    (Paneel-Köpfe)
     Body        Sans 400       13/1.45   (Dashboard)
     Small       Sans 400       12/1.4
     Label       Mono 500       11/1.3    versal, +0.08em
     Data        Mono 400       12–13     tabellarische Ziffern                 */
  --t-display-l: 600 32px/1.02 var(--f-cond);
  --t-display-m: 600 26px/1.15 var(--f-cond);
  --t-kpi: 600 30px/1 var(--f-cond);
  --t-title: 600 19px/1 var(--f-cond);
  --t-heading: 600 14px/1.2 var(--f-sans);
  --t-body: 400 13px/1.45 var(--f-sans);
  --t-body-l: 400 14px/1.55 var(--f-sans);
  --t-small: 400 12px/1.4 var(--f-sans);
  --t-label: 500 11px/1.3 var(--f-mono);
  --t-data: 400 12.5px/1.45 var(--f-mono);
  --t-code: 500 12.5px/1.45 var(--f-mono);
  --label-track: 0.08em;

  /* --- Abstand: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 ------------ */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* --- Radien: Kanten sind fast eckig ------------------------------------ */
  --r1: 2px;   /* Tasten, Eingaben, Tags */
  --r2: 4px;   /* Paneele, Dialoge */

  /* --- Maße --------------------------------------------------------------- */
  --rail-w: 232px;
  --bridge-h: 52px;
  --ctl-h: 32px;       /* Standardhöhe für Tasten und Eingaben */
  --ctl-h-sm: 28px;
  --ctl-h-lg: 44px;
  --content-max: 1440px;

  /* --- Bewegung ----------------------------------------------------------- */
  --dur-1: 120ms;      /* Hover, Farbwechsel */
  --dur-2: 180ms;      /* Ein-/Ausblenden */
  --dur-3: 280ms;      /* Schubladen, neue Zeilen */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Ebenen ------------------------------------------------------------- */
  --z-bridge: 20;
  --z-rail: 30;
  --z-scrim: 40;
  --z-drawer: 45;   /* ausgeklappte Modulleiste auf schmalen Bildschirmen, über dem Scrim */
  --z-menu: 50;
  --z-tip: 60;
  --z-toast: 70;
  --z-skip: 100;

  /* --- Fokus -------------------------------------------------------------- */
  --focus-ring: 2px solid var(--pgm-ink);
  --focus-offset: 2px;

  /* --- Schatten (nur für schwebende Ebenen) ------------------------------ */
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  --key-inset: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}