:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0c10;
  --bg-elevated: #10141b;
  --surface: #141923;
  --surface-hover: #1a2030;
  --border: #232a38;
  --text: #e7eaf0;
  --text-muted: #98a2b3;
  --text-faint: #7c8699;
  --accent: #7297ff;
  --accent-strong: #9db4ff;
  --accent-soft: rgba(114, 151, 255, 0.1);
  --on-accent: #0b1220;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-soft: 0 20px 45px -18px rgba(0, 0, 0, 0.55);
  --shadow-accent: 0 16px 32px -14px rgba(114, 151, 255, 0.45);
  --grid-line: rgba(255, 255, 255, 0.035);
  --header-bg: rgba(10, 12, 16, 0.78);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-hover: #f0f3f6;
  --border: #dfe3ea;
  --text: #0f172a;
  --text-muted: #4b5565;
  --text-faint: #5f6b7c;
  --accent: #3b5bdb;
  --accent-strong: #2c3fa8;
  --accent-soft: rgba(59, 91, 219, 0.1);
  --on-accent: #ffffff;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 20px 45px -18px rgba(15, 23, 42, 0.18);
  --shadow-accent: 0 16px 32px -14px rgba(59, 91, 219, 0.3);
  --grid-line: rgba(15, 23, 42, 0.04);
  --header-bg: rgba(246, 247, 249, 0.82);
}

:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --container: 1120px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-height: 64px;
  --section-space: clamp(4rem, 10vw, 7rem);
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  --step-4: clamp(2.4rem, 1.6rem + 4vw, 4.5rem);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}