/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  color-scheme: dark light;

  /* ── Dark (default) ── */
  --bg:           #08080f;
  --bg-surface:   #0f0f1a;
  --bg-elevated:  #161625;
  --bg-card:      #13131f;
  --border:       rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.13);

  --text:         #eef0ff;
  --text-muted:   #94a3b8;
  --text-faint:   #4a5568;

  --accent:       #6366f1;
  --accent-light: #818cf8;
  --accent-glow:  rgba(99,102,241,.18);
  --accent-subtle:rgba(99,102,241,.08);

  --green:        #22c55e;
  --green-glow:   rgba(34,197,94,.15);

  /* ── Typography ── */
  --font-head: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ── Fluid type scale (360 → 1440px) ── */
  --step--1: clamp(.83rem, .80rem + .15vw, .94rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.12rem + .4vw, 1.5rem);
  --step-2:  clamp(1.44rem, 1.28rem + .8vw, 2rem);
  --step-3:  clamp(1.73rem, 1.45rem + 1.4vw, 2.75rem);
  --step-4:  clamp(2.2rem, 1.6rem + 3vw, 4.5rem);

  /* ── Fluid space ── */
  --space-xs:  clamp(.25rem, .23rem + .1vw, .31rem);
  --space-sm:  clamp(.5rem, .46rem + .2vw, .63rem);
  --space-md:  clamp(1rem, .93rem + .35vw, 1.25rem);
  --space-lg:  clamp(1.5rem, 1.39rem + .55vw, 1.88rem);
  --space-xl:  clamp(2rem, 1.85rem + .75vw, 2.5rem);
  --space-2xl: clamp(3rem, 2.78rem + 1.1vw, 3.75rem);
  --space-section: clamp(4rem, 3rem + 5vw, 7rem);

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:     0 1px 3px rgba(0,0,0,.4);
  --shadow-md:     0 4px 20px rgba(0,0,0,.5);
  --shadow-lg:     0 10px 40px rgba(0,0,0,.6);
  --shadow-accent: 0 0 40px rgba(99,102,241,.15);

  /* ── Motion ── */
  --ease:          cubic-bezier(.22,1,.36,1);
  --duration:      280ms;
  --duration-fast: 150ms;
  --duration-slow: 600ms;

  /* ── Layout ── */
  --max-width:  1200px;
  --nav-height: 64px;
  --gutter:     clamp(1rem, 4vw, 2rem);
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:           #f5f6ff;
  --bg-surface:   #ffffff;
  --bg-elevated:  #eceeff;
  --bg-card:      #ffffff;
  --border:       rgba(0,0,0,.07);
  --border-strong:rgba(0,0,0,.12);

  --text:         #0d0d1a;
  --text-muted:   #52525b;
  --text-faint:   #a1a1aa;

  --accent:       #4f46e5;
  --accent-light: #6366f1;
  --accent-glow:  rgba(79,70,229,.12);
  --accent-subtle:rgba(79,70,229,.06);

  --green:        #16a34a;
  --green-glow:   rgba(22,163,74,.10);

  --shadow-sm:     0 1px 3px rgba(0,0,0,.08);
  --shadow-md:     0 4px 20px rgba(0,0,0,.10);
  --shadow-lg:     0 10px 40px rgba(0,0,0,.14);
  --shadow-accent: 0 0 40px rgba(79,70,229,.10);
}