:root {
  --color-navy: #0d2742;
  --color-navy-deep: #08192b;
  --color-navy-overlay: #08192b;
  --color-blue: #1e4e79;
  --color-red: #c52b32;
  --color-red-dark: #a52329;
  --color-charcoal: #171a1d;
  --color-gray: #f3f4f5;
  --color-gray-mid: #d7dce0;
  --color-white: #ffffff;
  --color-muted: #5c6770;
  --color-muted-on-dark: #c5ced6;

  --font-heading: "Inter Tight", Arial, Helvetica, sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  --text-xs: clamp(0.72rem, 0.65vw, 0.8rem);
  --text-sm: clamp(0.875rem, 0.85vw, 0.95rem);
  --text-base: clamp(1rem, 0.95vw, 1.125rem);
  --text-lg: clamp(1.2rem, 1.45vw, 1.55rem);
  --heading-sm: clamp(1.5rem, 2vw, 2rem);
  --heading-md: clamp(2rem, 3.2vw, 3.25rem);
  --heading-lg: clamp(2.5rem, 4.6vw, 4.25rem);
  --heading-xl: clamp(2.75rem, 5.5vw, 5.5rem);

  --container: 1320px;
  --container-wide: 1480px;
  --pad-inline: clamp(1.25rem, 4vw, 2.5rem);
  --section-space: clamp(4.5rem, 8vw, 8.5rem);
  --section-space-sm: clamp(3.5rem, 6vw, 6rem);

  --header-height: 84px;
  --radius: 2px;
  --radius-sm: 2px;

  --transition-fast: 220ms ease;
  --transition-medium: 320ms ease;
  --transition-reveal: 650ms cubic-bezier(0.22, 1, 0.36, 1);

  --focus-ring: 2px solid var(--color-red);
  --focus-offset: 3px;

  --shadow-header: 0 1px 0 rgba(8, 25, 43, 0.12);
}

@media (max-width: 767px) {
  :root {
    --header-height: 72px;
  }
}