@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-900-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02ba, U+02bd-02c5, U+02c7-02cc, U+02ce-02d7, U+02dd-02ff, U+0304, U+0308, U+0329, U+1d00-1dbf, U+1e00-1e9f, U+1ef2-1eff, U+2020, U+20a0-20ab, U+20ad-20c0, U+2113, U+2c60-2c7f, U+a720-a7ff;
}

@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../assets/fonts/barlow-condensed-900-latin.woff2") format("woff2");
  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/onest-variable-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02ba, U+02bd-02c5, U+02c7-02cc, U+02ce-02d7, U+02dd-02ff, U+0304, U+0308, U+0329, U+1d00-1dbf, U+1e00-1e9f, U+1ef2-1eff, U+2020, U+20a0-20ab, U+20ad-20c0, U+2113, U+2c60-2c7f, U+a720-a7ff;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/onest-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

:root {
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: "Onest", "Segoe UI", sans-serif;

  --color-paper: hsl(39 100% 97%);
  --color-paper-deep: hsl(37 54% 91%);
  --color-paper-muted: hsl(35 35% 95%);
  --color-ink: hsl(17 32% 11%);
  --color-ink-soft: hsl(20 21% 29%);
  --color-orange: hsl(24 92% 39%);
  --color-orange-deep: hsl(24 94% 32%);
  --color-yellow: hsl(41 100% 65%);
  --color-sage: hsl(98 33% 86%);
  --color-sage-deep: hsl(99 22% 34%);
  --color-blue: hsl(202 72% 84%);
  --color-whatsapp: hsl(148 68% 29%);
  --color-white: hsl(0 0% 100%);
  --color-error: hsl(3 72% 39%);

  --shadow-paper: 0 1.2rem 2.8rem hsl(18 40% 12% / 0.16);
  --shadow-raised: 0 0.7rem 1.8rem hsl(18 40% 12% / 0.13);
  --shadow-header: 0 0.35rem 1.2rem hsl(18 40% 12% / 0.08);

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1rem;

  --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;
  --space-10: 8rem;

  --shell: 76rem;
  --header-height: 4.5rem;
  --focus-ring: 0 0 0 0.22rem var(--color-yellow), 0 0 0 0.38rem var(--color-ink);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}