:root {
  /* === Colors === */
  --surface-container: #1b1f2b;
  --surface-container-lowest: #090e19;
  --on-secondary-container: #004048;
  --surface-container-high: #252a36;
  --surface: #01030f;
  --tertiary-container: #00a658;
  --secondary-fixed-dim: #4bd8ec;
  --on-error-container: #ffdad6;
  --on-primary-fixed: #001a42;
  --secondary: #4bd8ec;
  --secondary-container: #00b4c7;
  --secondary-fixed: #99f0ff;
  --on-primary-container: #00285d;
  --on-secondary-fixed: #001f24;
  --on-primary-fixed-variant: #004395;
  --on-tertiary: #00391a;
  --inverse-on-surface: #2c303d;
  --on-surface-variant: #c2c6d6;
  --surface-variant: #303541;
  --surface-dim: #0e131f;
  --surface-bright: #343946;
  --on-surface: #ffffff;
  --on-tertiary-fixed-variant: #005229;
  --on-error: #690005;
  --inverse-surface: #ffffff;
  --error-container: #93000a;
  --surface-container-low: #171b27;
  --tertiary-fixed: #5fff9b;
  --inverse-primary: #005ac2;
  --surface-container-highest: #303541;
  --on-primary: #002e6a;
  --surface-tint: #aec6ff;
  --on-tertiary-container: #003116;
  --on-tertiary-fixed: #00210d;
  --on-background: #ffffff;
  --primary-fixed-dim: #aec6ff;
  --primary-fixed: #d8e2ff;
  --on-secondary: #00363d;
  --outline-variant: #424753;
  --outline: #8c909f;
  --primary-container: #4e8eff;
  --primary: #aec6ff;
  --error: #ffb4ab;
  --tertiary-fixed-dim: #33e280;
  --background: #01030f;
  --on-secondary-fixed-variant: #004f58;
  --tertiary: #33e280;
  --primary-fixed-dim: #aec6ff;
  --secondary-fixed: #99f0ff;
  --tertiary-fixed: #5fff9b;
  --secondary-fixed-dim: #4bd8ec;
  --tertiary-fixed-dim: #33e280;

  /* === Border Radius === */
  --radius-default: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  /* === Spacing === */
  --spacing-gutter-mobile: 1rem;
  --spacing-margin: 2rem;
  --space-xl: 1.75rem;
  --spacing-margin-mobile: 1rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --spacing-gutter: 1.5rem;
  --space-2xl: 2.5rem;
  --space-xs: 0.25rem;
  --space-3xl: 4rem;

  /* === Typography === */
  --font-headline-section-mobile: 'Inter', sans-serif;
  --font-mono-code: 'JetBrains Mono', monospace;
  --font-headline-card: 'Inter', sans-serif;
  --font-body-md: 'Inter', sans-serif;
  --font-headline-hero-mobile: 'Inter', sans-serif;
  --font-label-metric: 'Inter', sans-serif;
  --font-headline-section: 'Inter', sans-serif;
  --font-body-lg: 'Inter', sans-serif;
  --font-label-capsule: 'Inter', sans-serif;
  --font-headline-hero: 'Inter', sans-serif;
  --font-body-sm: 'Inter', sans-serif;

  /* === Font Sizes === */
  --text-headline-hero: 3.75rem;
  --text-headline-section: 2.5rem;
  --text-headline-card: 1.375rem;
  --text-headline-section-mobile: 1.75rem;
  --text-headline-hero-mobile: 2.375rem;
  --text-body-lg: 1.125rem;
  --text-body-md: 1rem;
  --text-body-sm: 0.875rem;
  --text-label-metric: 2rem;
  --text-label-capsule: 0.75rem;
  --text-mono-code: 0.8125rem;
}

@media (max-width: 768px) {
  :root {
    --text-headline-hero: 2.375rem;
    --text-headline-section: 1.75rem;
  }
}