/* ============================================================
   Design-Tokens · Farbwelt "Phosphor & Amber"
   Dark-only. Alle Farben, Schriften und Masse an einem Ort.
   ============================================================ */
:root {
  color-scheme: dark;

  /* Flächen */
  --bg:    #050607;
  --bg-2:  #0b0e10;
  --bg-3:  #11151a;
  --glass: rgba(255, 255, 255, .03);

  /* Text */
  --fg:      #e8ecef;
  --muted:   #8a949c;
  --muted-2: #5c666e;

  /* Akzente */
  --volt:      #39ff88;
  --volt-rgb:  57, 255, 136;
  --amber:     #ffb000;
  --amber-rgb: 255, 176, 0;

  /* Linien */
  --line:   rgba(232, 236, 239, .10);
  --line-2: rgba(232, 236, 239, .20);

  /* Typografie */
  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", system-ui, sans-serif;
  --font-body:    "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;

  /* Masse */
  --radius:    14px;
  --radius-lg: 22px;
  --pad-x:     clamp(18px, 4vw, 56px);
  --max-w:     1240px;
  --nav-h:     88px;

  /* Bewegung */
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Legacy-Aliase für die alten Sektionen (Phase 2 ersetzt sie) */
  --surface: var(--bg-2);
  --accent:  var(--volt);
  --violet:  var(--muted);
  --green:   var(--volt);
  --yellow:  var(--amber);
  --nav:     rgba(5, 6, 7, .78);
}