/* ═══════════════════════════════════════════════════
   0. DESIGN TOKENS
   ═══════════════════════════════════════════════════ */
:root {
  --bg0:#050810; --bg1:#0a0f1e; --bg2:#111829;
  --surface: rgba(255,255,255,.04);
  --glass: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.10);
  --text:#eaf0ff; --muted:#8899c2;
  --accentA:#7C5CFF; --accentB:#00D4FF; --accentC:#FF3DCE;
  --body-bg:var(--bg0);
  --radius:20px;
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg0:#f7f4ed;
  --bg1:#fffdf8;
  --bg2:#eaf2ff;
  --surface:rgba(255,255,255,.6);
  --glass:rgba(255,255,255,.68);
  --stroke:rgba(98,122,171,.16);
  --text:#162541;
  --muted:#64738f;
  --accentA:#4b6cff;
  --accentB:#08bce7;
  --accentC:#ff8a65;
  --body-bg:
    radial-gradient(circle at 8% 10%,rgba(109,91,255,.18),transparent 24%),
    radial-gradient(circle at 92% 86%,rgba(8,188,231,.14),transparent 26%),
    linear-gradient(180deg,#fffdf8 0%,#f8f3ea 44%,#eef4ff 100%);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--text);
  background:var(--body-bg,var(--bg0));
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .45s ease,color .45s ease;
}