/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Core palette */
  --void: #05050c;
  --deep: #0b0818;
  --deep-2: #100c22;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hi: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.09);
  --border-hi: rgba(255, 255, 255, 0.18);

  --violet: #8b5cf6;
  --violet-2: #a78bfa;
  --cyan: #22d3ee;
  --pink: #ec4899;
  --blue: #4f7cff;

  --ink: #f2f0ff;
  --ink-dim: #b8b4d6;
  --ink-faint: #726e94;

  --grad-primary: linear-gradient(120deg, var(--violet) 0%, var(--blue) 50%, var(--cyan) 100%);
  --grad-warm: linear-gradient(120deg, var(--pink) 0%, var(--violet) 100%);
  --grad-text: linear-gradient(120deg, #c8b8ff 0%, #8ce8ff 50%, #ffb8e6 100%);

  /* Type */
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Spacing scale */
  --sp-1: 0.4rem;
  --sp-2: 0.8rem;
  --sp-3: 1.2rem;
  --sp-4: 2rem;
  --sp-5: 3.2rem;
  --sp-6: 5rem;
  --sp-7: 8rem;

  /* Radii */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  --nav-h: 76px;
  --container: 1240px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}