/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:           #09090f;
  --color-bg-alt:       #0e0e18;
  --color-surface:      #13131e;
  --color-surface-2:    #1a1a28;
  --color-accent:       #c93aff;
  --color-accent-dim:   rgba(201, 58, 255, 0.15);
  --color-accent-alt:   #3af0ff;
  --color-accent-alt-dim: rgba(58, 240, 255, 0.12);
  --color-text:         #e8e8f0;
  --color-text-muted:   #7a7a9a;
  --color-text-faint:   #44445a;
  --color-border:       #1e1e30;
  --color-border-bright:#2e2e48;

  /* Fonts */
  --font-display: 'Orbitron', sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* Spacing scale (8px base) */
  --sp-1:  0.5rem;   /*  8px */
  --sp-2:  1rem;     /* 16px */
  --sp-3:  1.5rem;   /* 24px */
  --sp-4:  2rem;     /* 32px */
  --sp-5:  2.5rem;   /* 40px */
  --sp-6:  3rem;     /* 48px */
  --sp-8:  4rem;     /* 64px */
  --sp-10: 5rem;     /* 80px */
  --sp-12: 6rem;     /* 96px */
  --sp-16: 8rem;     /* 128px */

  /* Borders */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.2s var(--ease);
  --transition-slow: 0.4s var(--ease);

  /* Shadows / Glows */
  --glow-accent:     0 0 24px rgba(201, 58, 255, 0.35);
  --glow-accent-sm:  0 0 12px rgba(201, 58, 255, 0.25);
  --glow-alt:        0 0 24px rgba(58, 240, 255, 0.3);
  --shadow-card:     0 4px 32px rgba(0, 0, 0, 0.5);

  /* Layout */
  --container-max: 1200px;
  --nav-height:    72px;
}