:root {
  --bg-deep: #0d0221;
  --bg-base: #1a0a2e;
  --bg-surface: #2a0d4a;
  --bg-glass: rgba(26, 10, 46, 0.72);

  --magenta: #d946ef;
  --magenta-bright: #ec4899;
  --cyan: #22d3ee;
  --cyan-deep: #3b82f6;
  --lumen: #00ff88;

  --text: #f4f0ff;
  --text-muted: rgba(244, 240, 255, 0.72);
  --text-dim: rgba(244, 240, 255, 0.5);

  --border: rgba(217, 70, 239, 0.35);
  --glow-magenta: rgba(217, 70, 239, 0.65);
  --glow-cyan: rgba(34, 211, 238, 0.55);

  --grid-line: rgba(217, 70, 239, 0.22);
  --grid-line-bright: rgba(34, 211, 238, 0.35);
  --scanline: rgba(236, 72, 153, 0.06);

  --font-display: "Audiowide", system-ui, sans-serif;
  --font-body: "Exo 2", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --header-h: 64px;
  --content-max: 1120px;
  --section-gap: clamp(3rem, 6vw, 5rem);

  /* Appendix A — district accent layers (optional) */
  --district-lumen: #22d3ee;
  --district-pulse: #f59e0b;
  --district-flux: #94a3b8;
  --district-ion: #eab308;
  --district-nova: #ec4899;
  --district-eclipse: #7c3aed;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-ok: 0;
  }
}