/* ---------- Design tokens ---------- */
:root {
  /* Brand — aurora from screenshot */
  --aurora-1: #6B5BFF;
  --aurora-2: #B14DDB;
  --aurora-3: #E2479C;
  --aurora-4: #FF7A59;
  --aurora-5: #2B3DFF;

  /* Type scale (fluid) */
  --fs-micro: clamp(11px, 0.72vw, 12px);
  --fs-xs:    clamp(13px, 0.85vw, 14px);
  --fs-sm:    clamp(14px, 0.95vw, 15px);
  --fs-base:  clamp(15px, 1.05vw, 17px);
  --fs-lg:    clamp(18px, 1.3vw, 21px);
  --fs-xl:    clamp(22px, 1.7vw, 28px);
  --fs-2xl:   clamp(28px, 2.4vw, 40px);
  --fs-3xl:   clamp(36px, 3.4vw, 58px);
  --fs-4xl:   clamp(48px, 5.4vw, 92px);
  --fs-5xl:   clamp(64px, 7.8vw, 132px);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Motion */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Container */
  --container: 1240px;
  --container-narrow: 980px;
}

/* ---------- Dark (default) ---------- */
:root, [data-theme="dark"] {
  color-scheme: dark;

  --bg-0: #07070A;
  --bg-1: #0C0C12;
  --bg-2: #14141C;
  --bg-3: #1B1B26;
  --bg-elev: #1F1F2B;

  --surface: rgba(255,255,255,0.04);
  --surface-strong: rgba(255,255,255,0.07);
  --surface-glass: rgba(20,20,28,0.55);

  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --border-bright: rgba(255,255,255,0.22);

  --fg: #F4F4F7;
  --fg-1: rgba(244,244,247,0.92);
  --fg-2: rgba(244,244,247,0.66);
  --fg-3: rgba(244,244,247,0.44);
  --fg-4: rgba(244,244,247,0.28);

  --accent: #B6A8FF;
  --accent-strong: #8A78FF;
  --accent-ink: #0A0A12;

  --grid-line: rgba(255,255,255,0.04);
  --grid-line-strong: rgba(255,255,255,0.08);

  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.06) inset, 0 20px 60px rgba(0,0,0,0.55);
  --shadow-3: 0 2px 0 rgba(255,255,255,0.08) inset, 0 40px 100px rgba(0,0,0,0.7);

  --glow: 0 0 0 1px rgba(182,168,255,0.25), 0 0 40px rgba(138,120,255,0.35);
}

/* ---------- Light ---------- */
[data-theme="light"] {
  color-scheme: light;

  --bg-0: #F7F6F2;
  --bg-1: #FBFAF6;
  --bg-2: #FFFFFF;
  --bg-3: #F1EFE8;
  --bg-elev: #FFFFFF;

  --surface: rgba(10,10,18,0.03);
  --surface-strong: rgba(10,10,18,0.06);
  --surface-glass: rgba(255,255,255,0.65);

  --border: rgba(10,10,18,0.08);
  --border-strong: rgba(10,10,18,0.14);
  --border-bright: rgba(10,10,18,0.22);

  --fg: #0B0B12;
  --fg-1: rgba(11,11,18,0.92);
  --fg-2: rgba(11,11,18,0.62);
  --fg-3: rgba(11,11,18,0.42);
  --fg-4: rgba(11,11,18,0.24);

  --accent: #5A48E0;
  --accent-strong: #4030C8;
  --accent-ink: #FFFFFF;

  --grid-line: rgba(10,10,18,0.05);
  --grid-line-strong: rgba(10,10,18,0.09);

  --shadow-1: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 2px rgba(10,10,18,0.06), 0 8px 24px rgba(10,10,18,0.06);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.8) inset, 0 20px 60px rgba(10,10,18,0.10);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.9) inset, 0 40px 100px rgba(10,10,18,0.16);

  --glow: 0 0 0 1px rgba(90,72,224,0.25), 0 0 40px rgba(90,72,224,0.20);
}