:root {
  color-scheme: light dark;
  --color-bg: #f9f8f8;
  --color-surface: #ffffff;
  --color-surface-2: #f1f4fa;
  --color-brand: #4d6bfe;
  --color-primary: #425fef;
  --color-primary-hover: #3a65c2;
  --color-secondary: #73a3d2;
  --color-accent: #152443;
  --color-ink: #152443;
  --color-on-ink: #ffffff;
  --color-ink-muted: #c6d2ea;
  --color-text: #1e232c;
  --color-text-muted: #5d6470;
  --color-border: #dce3ee;
  --color-focus: #234792;
  --color-on-primary: #ffffff;
  --color-transparent: transparent;

  --alpha-primary-03: rgb(77 107 254 / 3%);
  --alpha-primary-05: rgb(77 107 254 / 5%);
  --alpha-primary-08: rgb(77 107 254 / 8%);
  --alpha-primary-10: rgb(77 107 254 / 10%);
  --alpha-primary-12: rgb(77 107 254 / 12%);
  --alpha-primary-16: rgb(77 107 254 / 16%);
  --alpha-primary-24: rgb(77 107 254 / 24%);
  --alpha-surface-72: rgb(255 255 255 / 72%);
  --alpha-surface-86: rgb(255 255 255 / 86%);
  --alpha-accent-06: rgb(21 36 67 / 6%);
  --alpha-accent-10: rgb(21 36 67 / 10%);
  --alpha-ink-48: rgb(21 36 67 / 48%);
  --alpha-white-06: rgb(255 255 255 / 6%);
  --alpha-white-08: rgb(255 255 255 / 8%);
  --alpha-white-10: rgb(255 255 255 / 10%);
  --alpha-white-14: rgb(255 255 255 / 14%);
  --alpha-white-18: rgb(255 255 255 / 18%);
  --alpha-white-24: rgb(255 255 255 / 24%);
  --alpha-white-72: rgb(255 255 255 / 72%);
  --alpha-white-86: rgb(255 255 255 / 86%);
  --gradient-hero-wash: radial-gradient(72% 90% at 84% 14%, var(--alpha-primary-16), var(--color-transparent) 72%);
  --gradient-card-shine: linear-gradient(145deg, var(--alpha-surface-86), var(--alpha-surface-72));

  --font-display: "Host Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-h1: clamp(3rem, 4.7vw, 4.5rem);
  --fs-h2: clamp(2.25rem, 3.3vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.75rem);
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fw-display: 520;
  --fw-heading: 540;
  --fw-body: 430;
  --fw-bold: 620;
  --tracking-display: -0.045em;
  --tracking-heading: -0.03em;
  --tracking-body: -0.01em;
  --leading-display: 1.02;
  --leading-heading: 1.08;
  --leading-body: 1.55;

  --radius-sm: 8px;
  --radius-input: 10px;
  --radius-media: 12px;
  --radius-panel: 16px;
  --radius-card: 24px;
  --radius-pill: 100px;

  --shadow-sm: 0 2px 8px var(--alpha-accent-06);
  --shadow-md: 0 12px 28px var(--alpha-accent-10);
  --shadow-lg: 0 0 0 1px var(--alpha-primary-08), 0 18px 48px var(--alpha-accent-10), 0 2px 8px var(--alpha-accent-06);
  --shadow-xl: 0 30px 80px var(--alpha-ink-48);
  --shadow-hero: 0 0 0 1px var(--alpha-primary-08), 0 34px 90px var(--alpha-accent-10), 0 10px 30px var(--alpha-primary-08);
  --shadow-float: 0 18px 48px var(--alpha-accent-10), 0 2px 10px var(--alpha-primary-08);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 80px;
  --space-section: clamp(56px, 6vw, 88px);
  --container: 1200px;
  --header-height: 72px;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-overlay: 2000;
  --z-modal: 2100;
  --z-toast: 3000;
  --z-tooltip: 4000;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --ease-std: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-linear: linear;
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-slower: 640ms;
  --dur-ambient: 12s;
  --move-xs: 4px;
  --move-sm: 8px;
  --move-md: 16px;
  --move-lg: 24px;
  --move-xl: 40px;
  --scale-press: .97;
  --scale-hover: 1.02;
  --reveal-from-opacity: .001;
  --stagger-step: 60ms;
  --stagger-max: 360ms;
}

:root[data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-surface: #151515;
  --color-surface-2: #202020;
  --color-primary: #6799fe;
  --color-primary-hover: #85adff;
  --color-secondary: #73a3d2;
  --color-accent: #ffffff;
  --color-ink: #152443;
  --color-on-ink: #ffffff;
  --color-ink-muted: #c6d2ea;
  --color-text: #ffffff;
  --color-text-muted: #b8b8b8;
  --color-border: #333333;
  --color-focus: #85adff;
  --color-on-primary: #0a0a0a;
  --alpha-primary-03: rgb(103 153 254 / 3%);
  --alpha-primary-05: rgb(103 153 254 / 5%);
  --alpha-primary-08: rgb(103 153 254 / 8%);
  --alpha-primary-10: rgb(103 153 254 / 10%);
  --alpha-primary-12: rgb(103 153 254 / 12%);
  --alpha-primary-16: rgb(103 153 254 / 16%);
  --alpha-primary-24: rgb(103 153 254 / 24%);
  --alpha-surface-72: rgb(21 21 21 / 72%);
  --alpha-surface-86: rgb(21 21 21 / 86%);
  --alpha-accent-06: rgb(255 255 255 / 6%);
  --alpha-accent-10: rgb(255 255 255 / 10%);
}