:root {
  --color-navy: #042A4C;
  --color-offwhite: #EAEAEA;
  --color-graphite: #222324;
  --color-gold: #BA7D20;
  --color-gold-btn: #D19233;
  --color-gold-btn-hover: #DAA03F;
  --color-white: #FFFFFF;

  --color-bg: var(--color-offwhite);
  --color-text: var(--color-navy);
  --color-text-secondary: var(--color-graphite);
  --color-accent: var(--color-gold);
  --color-surface-dark: var(--color-navy);
  --color-text-on-dark: var(--color-offwhite);

  --font-serif: 'Baskervville', Georgia, 'Times New Roman', serif;
  --font-sans: 'Merriweather Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;

  --fs-hero-headline: 2rem;
  --fs-section-title: 1.5rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-display-number: 2.75rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 2.5rem;
  --space-6: 3rem;
  --space-8: 4rem;

  --gutter: 1.25rem;

  --radius-btn: 6px;
  --touch-target-min: 44px;

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 500ms;
  --dur-slow: 900ms;
}

@media (min-width: 760px) {
  :root {
    --fs-hero-headline: 3.25rem;
    --fs-section-title: 2rem;
    --fs-body-lg: 1.25rem;
    --fs-display-number: 3.5rem;
    --gutter: 2.5rem;
  }
}