:root {
  --color-on-tertiary-fixed-variant: #005048;
  --color-outline: #76777d;
  --color-on-background: #111c2d;
  --color-surface-container-highest: #d8e3fb;
  --color-on-primary: #ffffff;
  --color-on-secondary-fixed: #00174b;
  --color-on-primary-fixed: #131b2e;
  --color-inverse-surface: #263143;
  --color-secondary-fixed: #dbe1ff;
  --color-secondary-fixed-dim: #b4c5ff;
  --color-on-error: #ffffff;
  --color-tertiary: #000000;
  --color-surface-variant: #d8e3fb;
  --color-surface-bright: #f9f9ff;
  --color-on-secondary-fixed-variant: #003ea8;
  --color-error: #ba1a1a;
  --color-on-error-container: #93000a;
  --color-on-surface-variant: #45464d;
  --color-surface-container-low: #f0f3ff;
  --color-outline-variant: #c6c6cd;
  --color-on-primary-fixed-variant: #3f465c;
  --color-surface-container: #e7eeff;
  --color-on-tertiary: #ffffff;
  --color-glass-fill: rgba(255, 255, 255, 0.7);
  --color-on-tertiary-fixed: #00201c;
  --color-primary: #000000;
  --color-on-primary-container: #7c839b;
  --color-secondary: #3f465c;
  --color-tertiary-container: #00201c;
  --color-secondary-container: #316bf3;
  --color-border-subtle: #E2E8F0;
  --color-on-tertiary-container: #009485;
  --color-tertiary-fixed: #71f8e4;
  --color-surface-container-lowest: #ffffff;
  --color-tertiary-fixed-dim: #4fdbc8;
  --color-background-surface: #FFFFFF;
  --color-surface-container-high: #dee8ff;
  --color-primary-fixed: #dae2fd;
  --color-surface-tint: #565e74;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #fefcff;
  --color-inverse-on-surface: #ecf1ff;
  --color-error-container: #ffdad6;
  --color-inverse-primary: #bec6e0;
  --color-slate-muted: #64748B;
  --color-surface: #f9f9ff;
  --color-background: #f9f9ff;
  --color-primary-fixed-dim: #bec6e0;
  --color-primary-container: #131b2e;
  --color-on-surface: #111c2d;
  --color-surface-dim: #cfdaf2;

  --radius: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --spacing-gutter: 16px;
  --spacing-section-padding: 120px;
  --spacing-unit: 8px;
  --spacing-container-max: 1280px;
  --spacing-margin-mobile: 20px;

  --font-display-lg-mobile: 'Libre Caslon Text', serif;
  --font-body-md: 'Hanken Grotesk', sans-serif;
  --font-label-caps: 'JetBrains Mono', monospace;
  --font-display-lg: 'Libre Caslon Text', serif;
  --font-body-lg: 'Hanken Grotesk', sans-serif;
  --font-headline-md: 'Hanken Grotesk', sans-serif;

  --text-display-lg-mobile-size: 32px;
  --text-display-lg-mobile-height: 40px;
  --text-display-lg-mobile-spacing: -0.01em;
  --text-display-lg-mobile-weight: 400;

  --text-body-md-size: 16px;
  --text-body-md-height: 28px;
  --text-body-md-weight: 400;

  --text-label-caps-size: 12px;
  --text-label-caps-height: 16px;
  --text-label-caps-spacing: 0.1em;
  --text-label-caps-weight: 500;

  --text-display-lg-size: 64px;
  --text-display-lg-height: 72px;
  --text-display-lg-spacing: -0.02em;
  --text-display-lg-weight: 400;

  --text-body-lg-size: 18px;
  --text-body-lg-height: 32px;
  --text-body-lg-weight: 400;

  --text-headline-md-size: 32px;
  --text-headline-md-height: 40px;
  --text-headline-md-spacing: -0.01em;
  --text-headline-md-weight: 600;
}

@media (min-width: 768px) {
  :root {
    --spacing-gutter: 32px;
  }
}