/* Design-Tokens — eine Quelle für Farbe, Schrift, Raster.
   Eingebunden vor layout.css. Tailwind-Farben referenzieren dieselben var(--…). */

:root {
  /* Flächen */
  --bg: #111118;
  --panel: #16161f;
  --card: #1c1c28;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Text — vier Stufen */
  --fg: #f1f5f9;
  --fg-2: #cbd5e1;
  --fg-3: #94a3b8;
  --fg-4: #64748b; /* nie Wörter — nur Achsen/Platzhalter/Trenner */

  /* Akzent — nur interaktiv & aktiv */
  --accent: #8b7cf6;
  --accent-bg: rgba(139, 124, 246, 0.14);
  --accent-light: #c4b5fd;

  /* Bedeutung */
  --pos: #34d399;
  --neg: #f87171;
  --neutral: #94a3b8;
  --l1-finance: #3987e5;
  --l1-ai: #d95926;
  --l1-tech: #199e70;

  /* Schrift */
  --fs-brief: 17px;
  --lh-brief: 1.65;
  --fs-titel: 16px;
  --lh-titel: 1.35;
  --fw-titel: 600;
  --fs-text: 14px;
  --lh-text: 1.55;
  --fs-meta: 12.5px;
  --lh-meta: 1.4;
  --fs-label: 11px;
  --ls-label: 0.06em;

  /* Raster */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --radius: 8px;
  --radius-sm: 6px;
  --lese-max: 66ch;
  --hit-min: 32px;
  --hit-min-touch: 44px;
}