/* ============================================================
   DESIGN TOKENS — single source of truth for the entire site
   ============================================================ */

:root {
  /* ── Palette ─────────────────────────────────────────────── */
  --bg-primary:      #08080f;
  --bg-surface:      #0d0d1a;
  --bg-card:         #111120;
  --bg-card-hover:   #171728;

  --accent:          #ff4b2b;
  --accent-hover:    #ff6b4b;
  --accent-dim:      rgba(255, 75, 43, 0.12);
  --accent-border:   rgba(255, 75, 43, 0.30);
  --accent-glow:     0 0 48px rgba(255, 75, 43, 0.20);

  --text-primary:    #f0eff6;
  --text-secondary:  #8f8fa8;
  --text-muted:      #55556e;

  --border:          rgba(255, 255, 255, 0.07);
  --border-hover:    rgba(255, 255, 255, 0.13);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid type scale */
  --text-xs:   clamp(0.70rem, 0.68rem + 0.10vw, 0.75rem);
  --text-sm:   clamp(0.82rem, 0.80rem + 0.12vw, 0.875rem);
  --text-base: clamp(0.95rem, 0.90rem + 0.20vw, 1rem);
  --text-lg:   clamp(1.05rem, 1.00rem + 0.25vw, 1.125rem);
  --text-xl:   clamp(1.15rem, 1.10rem + 0.30vw, 1.25rem);
  --text-2xl:  clamp(1.30rem, 1.20rem + 0.50vw, 1.5rem);
  --text-3xl:  clamp(1.60rem, 1.40rem + 1.00vw, 1.875rem);
  --text-4xl:  clamp(1.90rem, 1.60rem + 1.50vw, 2.25rem);
  --text-5xl:  clamp(2.40rem, 1.90rem + 2.50vw, 3rem);
  --text-6xl:  clamp(2.90rem, 2.20rem + 3.50vw, 3.75rem);
  --text-7xl:  clamp(3.50rem, 2.50rem + 5.00vw, 4.5rem);
  --text-hero: clamp(3.50rem, 2.00rem + 7.50vw, 6.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;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.40);
  --shadow-md:     0 4px 24px rgba(0,0,0,0.50);
  --shadow-lg:     0 8px 48px rgba(0,0,0,0.60);
  --shadow-accent: 0 4px 32px rgba(255,75,43,0.18);
  --shadow-card:   0 1px 1px rgba(255,255,255,0.04) inset,
                   0 4px 24px rgba(0,0,0,0.45);

  /* ── Transitions ─────────────────────────────────────────── */
  --ease-fast:   150ms ease;
  --ease-base:   260ms ease;
  --ease-slow:   420ms ease;
  --ease-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --nav-h:         72px;
  --section-py:    clamp(4rem, 8vw, 7rem);
}