:root {
  color-scheme: dark;

  --font-sans: "Inter", "Segoe UI", Arial, sans-serif;

  --color-bg: #0a0a0b;
  --color-bg-soft: #161718;
  --color-panel: #1b1d1f;
  --color-text: #e5e7eb;
  --color-text-muted: rgba(255, 255, 255, 0.75);
  --color-text-subtle: rgba(255, 255, 255, 0.62);
  --color-line: rgba(255, 255, 255, 0.08);
  --color-border: rgba(255, 255, 255, 0.06);
  --color-accent: #f6d307;
  --color-accent-hover: #e5c306;
  --color-accent-secondary: #2e6b8a;
  --color-white: #ffffff;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --nav-cta-radius: 16px;
  --card-radius: 16px;
  --panel-radius: 16px;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: clamp(4.5rem, 3rem + 4vw, 7rem);
  --section-padding-y: var(--space-section);
  --container-padding-x: clamp(1.25rem, 0.5rem + 3vw, 2rem);

  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --fs-sm: clamp(0.8125rem, 0.77rem + 0.2vw, 0.9375rem);
  --fs-base: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --fs-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-3xl: clamp(2rem, 1.15rem + 3vw, 3.4rem);
  --fs-4xl: clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem);
  --fs-hero: clamp(3rem, 1.6rem + 4vw, 5.5rem);
  --hero-title-size: clamp(2rem, 1.15rem + 3vw, 3.4rem);
  --hero-body-size: var(--fs-lg);
  --eyebrow-size: 0.78rem;

  --container-content: 1200px;
  --container-wide: 1320px;
  --max-w-wide: 1400px;

  --nav-link-gap: 0.25rem;
  --nav-link-padding-x: 1rem;
  --nav-link-padding-y: 0.5rem;
  --nav-cta-padding-x: 1.5rem;
  --nav-cta-padding-y: 0.55rem;
  --nav-height-offset: 88px;
  --hero-padding-top: calc(5rem + var(--nav-height-offset));
  --hero-padding-bottom: 2rem;
  --footer-padding-y: 2rem;

  --transition-fast: 150ms ease;
  --transition: 300ms ease;
  --transition-slow: 500ms ease;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-hero: 0 24px 60px rgba(0, 0, 0, 0.35);
  --shadow: var(--shadow-hero);

  /* Compatibility aliases for existing page-level styles */
  --font: var(--font-sans);
  --bg: var(--color-bg);
  --bg-soft: var(--color-bg-soft);
  --panel: var(--color-panel);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --text-secondary: var(--color-text-subtle);
  --text-light: rgba(255, 255, 255, 0.45);
  --line: var(--color-line);
  --border: var(--color-border);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-2: var(--color-accent-secondary);
  --primary-dark: var(--color-bg);
  --primary: #121314;
  --primary-light: var(--color-accent-secondary);
  --surface: #0e0f10;
  --surface-alt: var(--color-bg-soft);
  --white: var(--color-white);
  --max-w: var(--container-content);
  --px: var(--container-padding-x);
  --radius: var(--radius-lg);
  --radius-xl: var(--radius-lg);
}