:root {
  /* ── Backgrounds ── */
  --bg-void:     #04040e;
  --bg-base:     #07071a;
  --bg-surface:  #0e0e28;
  --bg-elevated: #16163a;
  --bg-overlay:  #1e1e48;

  /* ── Neon palette ── */
  --clr-cyan:        #00e5ff;
  --clr-cyan-dim:    rgba(0, 229, 255, 0.12);
  --clr-cyan-glow:   rgba(0, 229, 255, 0.45);
  --clr-cyan-border: rgba(0, 229, 255, 0.28);
  --clr-purple:      #a78bfa;
  --clr-purple-dim:  rgba(167, 139, 250, 0.12);
  --clr-pink:        #f0006e;
  --clr-pink-dim:    rgba(240, 0, 110, 0.12);
  --clr-green:       #39ff14;

  /* ── Text ── */
  --text-primary:   #ffffff;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;

  /* ── Typography ── */
  /* Loaded via Google Fonts (variable Inter); fallback: system-ui */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font scale */
  --fs-xs:      0.6875rem;
  --fs-sm:      0.8125rem;
  --fs-base:    1rem;
  --fs-lg:      1.125rem;
  --fs-xl:      1.25rem;
  --fs-2xl:     1.5rem;
  --fs-3xl:     1.875rem;
  --fs-4xl:     2.25rem;
  --fs-5xl:     3rem;
  --fs-hero:    clamp(2.75rem, 6vw, 5.5rem);
  --fs-display: clamp(4rem, 9vw, 8.5rem);

  /* Spacing */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --container-max:  1280px;
  --nav-height:     72px;
  --grid-gap:       1.5rem;

  /* Borders */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;
  --border-subtle: 1px solid rgba(255, 255, 255, 0.07);
  --border-neon:   1px solid var(--clr-cyan-border);

  /* Glows / Shadows */
  --glow-cyan:    0 0 32px rgba(0, 229, 255, 0.22);
  --glow-cyan-lg: 0 0 80px rgba(0, 229, 255, 0.15);
  --glow-purple:  0 0 32px rgba(167, 139, 250, 0.22);
  --glow-pink:    0 0 32px rgba(240, 0, 110, 0.22);
  --shadow-card:  0 4px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255,255,255,0.05);

  /* Transitions */
  --ease-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-base:   260ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow:   420ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}