/* Design tokens for the page, menus and HUD. Canvas colours live in js/config.js (palette). */
:root {
  --bg: #020108;
  --bg-glow: #1a0b3d;
  --neon-cyan: #3cf2ff;
  --neon-magenta: #ff3df0;
  --neon-lime: #b6ff3c;
  --neon-red: #ff4d6d;
  --text: #d9d4ff;
  --text-dim: rgba(217, 212, 255, 0.55);
  --text-faint: rgba(217, 212, 255, 0.3);
  --line: rgba(160, 140, 255, 0.18);

  --font-display: "Orbitron", ui-monospace, Menlo, monospace;
  --font-ui: "Chakra Petch", ui-sans-serif, system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius: 10px;
  --gutter: clamp(12px, 3vw, 40px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 180ms;

  --glow-cyan: 0 0 8px rgba(60, 242, 255, 0.8), 0 0 24px rgba(60, 242, 255, 0.45);
  --glow-magenta: 0 0 8px rgba(255, 61, 240, 0.8), 0 0 28px rgba(255, 61, 240, 0.45);
}