@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk[wght].ttf") format("truetype-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-Italic[wght].ttf") format("truetype-variations");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --color-neutral-500: #9c9b9b;
  --color-primary: #004759;
  --color-accent-soft: #f6f9be;
  --color-white: #ffffff;
  --color-accent: #f28800;
  --color-ink: #1c1b1f;
  --color-warning-soft: #ffc785;
  --color-sky-soft: #def8ff;
  --color-page-background: #eff5f6;
  --color-neutral-600: #868589;
  --color-surface-muted: #dfeaed;
  --color-surface-soft: #eff5f6;
  --font-sans: "Hanken Grotesk", sans-serif;
  --hero-title-size-desktop: 71px;
  --hero-title-leading-desktop: 79px;
}