@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-condensed-700-latin.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  --color-asphalt: #101413;
  --color-night: #151b1a;
  --color-surface-deep: #1a211f;
  --color-turf: #1f6f4b;
  --color-turf-deep: #174c36;
  --color-fence: #245066;
  --color-footer: #0d1110;
  --color-line: #dfe8da;
  --color-text: #f3f6ef;
  --color-muted: #aeb8ad;
  --color-accent: #f2b84b;
  --color-accent-strong: #d99428;
  --color-scrim: rgba(16, 20, 19, 0.78);
  --color-border: rgba(223, 232, 218, 0.18);
  --color-focus: #f2b84b;

  --font-display: "Barlow Condensed", "Aptos Display", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible", "Aptos", "Segoe UI", sans-serif;
  --font-utility: "Barlow Condensed", "Arial Narrow", sans-serif;

  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.375rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 5.5rem;
  --font-size-brand: 1.55rem;
  --font-size-heading: 4.5rem;
  --font-size-subheading: 2.6rem;
  --font-size-hero: 6rem;
  --font-size-hero-offer: 2.4rem;
  --font-size-stat: 2.9rem;
  --font-size-price: 7rem;
  --font-size-word: 18rem;
  --font-size-data: 2.5rem;
  --font-size-fact: 2rem;
  --font-size-faq-icon: 1.5rem;
  --font-size-not-found: 10rem;

  --line-tight: 0.92;
  --line-heading: 1.02;
  --line-body: 1.55;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;

  --shadow-field: 0 1.5rem 4rem rgba(3, 8, 7, 0.42);
  --shadow-lamp: 0 0.75rem 2.25rem rgba(242, 184, 75, 0.2);
  --shadow-table: 0 1rem 2.5rem rgba(3, 8, 7, 0.35);
  --shadow-sticky: 0 0.75rem 2rem rgba(3, 8, 7, 0.42);

  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  --motion-duration-fast: 160ms;
  --motion-duration-base: 280ms;
  --motion-duration-slow: 620ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 63.99rem) {
  :root {
    --font-size-heading: 3.25rem;
    --font-size-subheading: 2.25rem;
    --font-size-hero: 4rem;
    --font-size-word: 12rem;
    --font-size-data: 2.25rem;
  }
}

@media (max-width: 47.99rem) {
  :root {
    --font-size-brand: 1.4rem;
    --font-size-heading: 2.75rem;
    --font-size-subheading: 2rem;
    --font-size-hero: 3.25rem;
    --font-size-hero-offer: 1.5rem;
    --font-size-price: 5rem;
    --font-size-word: 8.5rem;
    --font-size-data: 2rem;
    --font-size-fact: 1.75rem;
    --font-size-not-found: 7rem;
  }
}

@media (max-width: 24.4rem) {
  :root {
    --font-size-hero: 3.125rem;
  }
}

::selection {
  background: var(--color-accent);
  color: var(--color-asphalt);
}