/* ===========================================
   DESIGN TOKENS — Single source of truth
   Evolved Synthwave / Retrowave palette
   =========================================== */

:root {
  /* Dark foundations */
  --bg: #06060c;
  --bg-elevated: #0e0e18;
  --surface: #16162a;
  --surface-hover: #1e1e34;

  /* Text hierarchy */
  --text: #f5f5f7;
  --text-secondary: #9898a4;
  --text-muted: #5c5c68;

  /* Primary accent: Cyan */
  --accent: #00e5ff;
  --accent-hover: #33ecff;
  --accent-glow: rgba(0, 229, 255, 0.2);
  --accent-muted: #0891b2;

  /* Secondary accent: Hot Pink */
  --accent-secondary: #ff2d95;
  --accent-secondary-hover: #ff5cae;
  --accent-secondary-glow: rgba(255, 45, 149, 0.2);

  /* Tertiary: Orange */
  --accent-tertiary: #ff8a00;
  --accent-tertiary-hover: #ffa333;
  --accent-tertiary-glow: rgba(255, 138, 0, 0.2);

  /* Purple (new) */
  --accent-purple: #b347ea;
  --accent-purple-glow: rgba(179, 71, 234, 0.2);

  /* Semantic */
  --success: #34d399;

  /* Borders */
  --border: #e8e8ec;
  --border-subtle: #2a2a44;
  --border-width: 2px;
  --shadow-offset: 5px;

  /* Spacing — 8pt grid */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Typography */
  --font-display: 'Satoshi', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Timing */
  --duration-fast: 0.12s;
  --duration-normal: 0.25s;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 28px;
}