/* Espaço e tipo. 390px trava no mínimo, 1280px no máximo.
   Padding, margin, gap e font-size saem daqui: primitivos fixos no chrome
   do componente, papéis fluidos no layout. Sem clamp avulso.

   DM Sans, Sora e Oxygen Mono. Subconjunto latino, SIL Open Font License. */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/dm-sans-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: "Sora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/sora-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: "Oxygen Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/oxygen-mono-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 {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-22: 5.5rem;
  --space-24: 6rem;

  --space-2xs: clamp(0.5rem, 0.39rem + 0.449vw, 0.75rem);
  --space-xs: clamp(0.75rem, 0.64rem + 0.449vw, 1rem);
  --space-s: clamp(1rem, 0.781rem + 0.899vw, 1.5rem);
  --space-m: clamp(1.5rem, 1.062rem + 1.798vw, 2.5rem);
  --space-l: clamp(2rem, 1.343rem + 2.697vw, 3.5rem);
  /* 32px em 390, 80px em 1280. */
  --space-xl: clamp(2rem, 0.685rem + 5.393vw, 5rem);
  /* 40px em 390, 96px em 1280. */
  --space-2xl: clamp(2.5rem, 0.966rem + 6.292vw, 6rem);
  /* 20px até ~480, perto de 48px em 990, 64px em 1280. */
  --gutter: clamp(1.25rem, -0.4rem + 5.5vw, 4rem);
  /* Vão entre as abas. 20px em 1024, 32px em 1280. */
  --space-subnav: clamp(1.25rem, -1.75rem + 4.6875vw, 2rem);

  --text-xs: 0.75rem;
  /* Rótulo de botão. 12px em 390, 16px em 1280. */
  --text-btn: clamp(0.75rem, 0.64rem + 0.449vw, 1rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.225vw, 1rem);
  --text-md: clamp(1rem, 0.945rem + 0.225vw, 1.125rem);
  /* Descrição do herói e texto de apoio. 14px em 390, 18px em 1280. */
  --text-lead: clamp(0.875rem, 0.765rem + 0.449vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.07rem + 0.225vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.14rem + 0.449vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.281rem + 0.899vw, 2rem);
  /* Título de seção e créditos. 24px em 390, 36px em 1280. */
  --text-3xl: clamp(1.5rem, 1.171rem + 1.348vw, 2.25rem);
  /* Título de seção do infográfico e numeral de callout. 32px em 390, 48px em 1280. */
  --text-section: clamp(2rem, 1.562rem + 1.798vw, 3rem);
  /* Título de página, inclusive o herói da home. 28px em 390, 56px em 1280. */
  --text-4xl: clamp(1.75rem, 0.983rem + 3.146vw, 3.5rem);
  --text-hero: var(--text-4xl);
  /* Numeral de data. 40px em 390, 72px em 1280. */
  --text-5xl: clamp(2.5rem, 1.624rem + 3.596vw, 4.5rem);

  /* Infográfico. O frame de 990px é o meio; 1280px mantém o teto do desktop. */
  --inf-title: clamp(1.75rem, -0.3rem + 4.125vw, 3rem);
  --inf-num: clamp(1.25rem, -0.2rem + 2.75vw, 2rem);
  --inf-h3: clamp(1.125rem, 0.4rem + 1.375vw, 1.5rem);
  --inf-callout-num: clamp(1.75rem, 0.8rem + 2.75vw, 3rem);
  --inf-gap-head: clamp(1.5rem, -0.3rem + 4.125vw, 3rem);
  --inf-gap-card: clamp(3rem, 5.2rem - 2.75vw, 3.5rem);
  --inf-band: clamp(2rem, -1.625rem + 8.28vw, 5rem);
  --inf-col: clamp(12rem, 10.875rem + 8.28vw, 17.5rem);
  --inf-img: clamp(4.5rem, 0.84rem + 7.93vw, 7.1875rem);
  --inf-img-sm: clamp(3.5rem, 0.66rem + 6.2vw, 5.625rem);
  --inf-girl: clamp(4.5rem, -3.375rem + 15.15625vw, 8.75rem);
  --inf-copy-gap: clamp(1rem, -0.15rem + 2.07vw, 1.5rem);
}