/* ============================================================
   SignalReef — Design System Tokens
   Alle Werte aus dem Handoff (design/README.md §Design Tokens).
   Dark = Default (:root). Light = :root[data-theme="light"].
   Komponenten referenzieren NUR diese Variablen, nie Hex direkt.
   ============================================================ */

:root {
  /* — Surfaces (Dark, default) — */
  --bg: #16151a;
  --sidebar: #131217;
  --card: #1f1e24;
  --card-hover: #232229;
  --inset: #201f26;

  /* — Accents (theme-unabhängig) — */
  --amber: #e0a83c;
  --cyan: #3cc4d9;
  --amber-on: #2b2107;   /* Text auf Amber-Fill (light) */
  --amber-ink: #b07a18;  /* Amber-Text auf hellem Grund */

  /* — Status / Deltas — */
  --pos: #7fcf95;
  --neg: #d9633c;
  --live: #5bbf7a;

  /* — Category Accents — */
  --cat-science: #3cc4d9;
  --cat-crypto: #e0a83c;
  --cat-news: #d9633c;
  --cat-tech: #7a9fe0;
  --cat-art: #c77dce;
  --cat-politics: #8a857c;
  --cat-sports: #5bbf7a;
  --cat-music: #e07da8;

  /* — Text (Dark) — */
  --text: #f4efe6;
  --text-2: #ece8e1;
  --text-sec: #b8b2a8;
  --text-sec2: #a8a299;
  --text-muted: #7a746b;
  --text-faint: #5c574f;

  /* — Borders (Dark) — */
  --border-1: rgba(255, 255, 255, .06);
  --border-2: rgba(255, 255, 255, .10);
  --border-3: rgba(255, 255, 255, .16);

  /* — Noise-Overlay — */
  --noise-opacity: .05;
  --noise-blend: overlay;

  /* — Focus Ring — */
  --focus: #e0a83c;

  /* — Spacing (8px-Basis) — */
  --sp-2: 2px;
  --sp-3: 3px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-26: 26px;
  --sp-32: 32px;
  --gutter: 32px;     /* desktop page gutter */
  --gutter-m: 18px;   /* mobile page gutter */

  /* — Radius — */
  --r-pill: 20px;
  --r-btn: 9px;
  --r-card: 8px;
  --r-card-m: 12px;
  --r-seg: 7px;
  --r-swatch: 2px;
  --r-avatar: 12px;
  --r-frame: 40px;

  /* — Type — */
  --f-head: 'Space Grotesk', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;
  --f-body: 'Inter', sans-serif;
  --fs-h1: 34px;
  --fs-card-h: 20px;
  --fs-card-h-m: 17px;
  --fs-hero: 58px;
  --fs-kpi: 30px;
  --fs-body: 14px;
  --fs-mono-label: 11px;
  --ls-label: .12em;

  /* — Shadows (warm-getönt, sparsam) — */
  --shadow-frame: 0 24px 60px -20px rgba(0, 0, 0, .55);
  --shadow-card-light: 0 1px 2px rgba(40, 30, 15, .04);
  --shadow-modal: 0 40px 100px rgba(0, 0, 0, .6);

  /* — Layout — */
  --sidebar-w: 236px;

  /* — Motion — */
  --t-fast: 140ms;
}

:root[data-theme="light"] {
  /* — Surfaces — */
  --bg: #f6f3ee;
  --sidebar: #efeae1;
  --card: #ffffff;
  --card-hover: #ffffff;
  --inset: #f1ece3;

  /* — Status / Deltas — */
  --pos: #2f9e57;
  --neg: #c2502a;
  --live: #3a9d5c;

  /* — Text — */
  --text: #1a1814;
  --text-2: #211f1b;
  --text-sec: #4a463f;
  --text-sec2: #6b655c;
  --text-muted: #8a847b;
  --text-faint: #a39b8e;

  /* — Borders — */
  --border-1: rgba(20, 18, 16, .06);
  --border-2: rgba(20, 18, 16, .10);
  --border-3: rgba(20, 18, 16, .16);

  /* — Noise-Overlay — */
  --noise-opacity: .04;
  --noise-blend: multiply;

  /* — Focus Ring — */
  --focus: #b07a18;

  /* — Shadows — */
  --shadow-frame: 0 24px 60px -20px rgba(40, 30, 15, .25);
}