:root {
  color-scheme: dark;
  --font-display: "Space Grotesk", "Microsoft YaHei", sans-serif;
  --font-body: "Inter", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  --bg: #06060E;
  --bg-soft: #0D0D1A;
  --surface: rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.07);
  --surface-solid: #101020;
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.16);
  --border-glow: rgba(34,211,238,.42);
  --text: #F5F5FA;
  --text-dim: #A8A8C8;
  --text-faint: #747493;

  --primary: #8B5CF6;
  --primary-rgb: 139,92,246;
  --violet: #8B5CF6;
  --accent: #22D3EE;
  --accent-rgb: 34,211,238;
  --cyan: #22D3EE;
  --cyan-rgb: 34,211,238;
  --cyan-soft: rgba(34,211,238,.12);
  --magenta: #EC4899;
  --magenta-rgb: 236,72,153;
  --magenta-soft: rgba(236,72,153,.12);
  --violet-rgb: 139,92,246;
  --violet-soft: rgba(139,92,246,.14);
  --warning: #FBBF55;
  --danger: #FB6F92;
  --grad-brand: linear-gradient(135deg,#6366F1,#8B5CF6 45%,#22D3EE);
  --glow-soft: 0 0 28px rgba(139,92,246,.28);
  --shadow-sm: 0 10px 30px rgba(0,0,0,.22);
  --shadow-md: 0 18px 46px rgba(0,0,0,.30);
  --shadow-lg: 0 28px 80px rgba(0,0,0,.38);

  --fs-xs: .78rem;
  --fs-sm: .9rem;
  --fs-body: 1rem;
  --fs-lead: clamp(1.08rem, .35vw + 1rem, 1.3rem);
  --fs-h4: 1.1rem;
  --fs-h3: clamp(1.35rem, .8vw + 1rem, 1.8rem);
  --fs-h2: clamp(1.75rem, 1.3vw + 1.1rem, 2.55rem);
  --fs-h1: clamp(2rem, 2.2vw + 1.25rem, 3.5rem);
  --fs-display: clamp(2.75rem, 5vw + 1rem, 5rem);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 20px;
  --sp-5: 28px;
  --sp-6: 40px;
  --sp-7: 64px;
  --sp-8: 88px;
  --sp-9: 112px;
  --sp-10: 128px;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 999px;

  --container: 1200px;
  --container-narrow: 760px;
  --tracking-wide: .08em;
  --tracking-tight: 0;
  --t-fast: 150ms ease;
  --t-base: 240ms ease;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --z-nav: 50;
  --z-overlay: 90;
  --z-top: 100;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #FAFAFE;
  --bg-soft: #F0F4FF;
  --surface: rgba(255,255,255,.76);
  --surface-2: rgba(255,255,255,.9);
  --surface-solid: #FFFFFF;
  --border: rgba(30,27,46,.11);
  --border-strong: rgba(30,27,46,.18);
  --border-glow: rgba(8,145,178,.35);
  --text: #1A1726;
  --text-dim: #57536E;
  --text-faint: #817C98;
  --primary: #7C3AED;
  --accent: #0891B2;
  --cyan: #0891B2;
  --cyan-rgb: 8,145,178;
  --cyan-soft: rgba(8,145,178,.10);
  --magenta: #DB2777;
  --magenta-rgb: 219,39,119;
  --magenta-soft: rgba(219,39,119,.10);
  --grad-brand: linear-gradient(135deg,#4F46E5,#7C3AED 48%,#0891B2);
  --glow-soft: 0 16px 44px rgba(124,58,237,.16);
  --shadow-sm: 0 10px 28px rgba(45,35,90,.10);
  --shadow-md: 0 18px 50px rgba(45,35,90,.14);
  --shadow-lg: 0 30px 90px rgba(45,35,90,.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; }
ul, ol { margin: 0; }
h1, h2, h3, h4, h5, p { margin: 0; }