@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=IBM+Plex+Sans:wght@400;500&display=swap");

:root {
  --color-bg: #F6F4EF;
  --color-surface: #FFFFFF;
  --color-text: #14181F;
  --color-muted: #5B6270;
  --color-border: #DAD6CC;
  --color-primary: #16233B;
  --color-on-primary: #FFFFFF;
  --color-accent: #C8431A;

  --font-heading: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-label: 0.8125rem;
  --text-lead: 1.25rem;
  --text-h1: 2.375rem;
  --text-h2: 1.75rem;
  --text-h3: 1.375rem;
  --text-figure: 2rem;

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

  --radius: 4px;
  --content-width: 1200px;
  --text-width: 680px;
}

@media (min-width: 900px) {
  :root {
    --text-h1: 4rem;
    --text-h2: 2.5rem;
    --text-h3: 1.5rem;
    --text-figure: 3rem;
    --space-section: 7rem;
  }
}