/* ===== DESIGN TOKENS ===== */
:root {
  /* Primary accent - RGB channels for rgba() composition */
  --accent: 80 240 194;
  --accent-hex: #50f0c2;
  --accent-60: rgb(var(--accent) / 0.6);
  --accent-50: rgb(var(--accent) / 0.5);
  --accent-40: rgb(var(--accent) / 0.4);
  --accent-35: rgb(var(--accent) / 0.35);
  --accent-30: rgb(var(--accent) / 0.3);
  --accent-25: rgb(var(--accent) / 0.25);
  --accent-20: rgb(var(--accent) / 0.2);
  --accent-10: rgb(var(--accent) / 0.1);
  --accent-04: rgb(var(--accent) / 0.04);
  --accent-018: rgb(var(--accent) / 0.018);

  /* Surface colors */
  --bg-deep: #0c0e16;
  --bg-deep-rgb: 12 14 22;
  --bg-base: #11131b;
  --bg-elevated: #191b24;

  /* Panel */
  --panel-bg: rgb(var(--bg-deep-rgb) / 0.85);
  --shadow-dark: rgba(0, 0, 0, 0.6);

  /* Vignette / overlay */
  --vignette-center: rgb(var(--bg-deep-rgb) / 0.35);
  --vignette-mid: rgb(var(--bg-deep-rgb) / 0.7);
  --vignette-edge: rgb(var(--bg-deep-rgb) / 0.92);

  /* Scanline CRT */
  --crt-dark: rgba(18, 16, 16, 0);
  --crt-dark-half: rgba(0, 0, 0, 0.08);
  --crt-r: rgba(255, 0, 0, 0.015);
  --crt-g: rgba(0, 255, 0, 0.008);
  --crt-b: rgba(0, 0, 255, 0.015);

  /* Typography */
  --font-headline: 'Space Grotesk', sans-serif;
  --font-body: 'Geist', sans-serif;
  --font-serif: 'Libre Caslon Text', serif;

  /* Text colors */
  --text-primary: #e2e1ee;
  --text-primary-rgb: 226 225 238;
  --text-white: #fff;
  --text-muted: rgba(186, 202, 194, 0.7);
  --on-surface-variant: #bacac2;
  --outline-color: #85948d;
  --outline-variant-color: #3c4a44;

  /* Layout */
  --hud-inset: 16px;
  --hud-text-offset: 64px;
  --panel-max-width: 480px;
  --panel-offset: 5%;

}