/* Fontes hospedadas no próprio site (Fontsource, licença OFL), só o subconjunto latino. */
@font-face {
  font-family: 'Gabarito';
  src: url('../assets/fontes/gabarito-latin-wght.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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: 'Figtree';
  src: url('../assets/fontes/figtree-latin-wght.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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 {
  /* Cores "Cobre" (docs/02). O cobre só aparece no botão principal e na seta do logo. */
  --aco: #243140;
  --cobre: #D9692B;
  --cobre-claro: #E27C40;   /* passar o mouse: tinta sobre ele dá uns 5,8:1 */
  --pedra: #D9DEE4;
  --nevoa: #F5F6F8;
  --tinta: #121A23;
  --texto-2: #5A6776;
  --borda: #DDE1E6;
  --branco: #FFFFFF;

  --fonte-titulo: 'Gabarito', 'Figtree', system-ui, sans-serif;
  --fonte-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Escala de tipo */
  --t-pequeno: 0.875rem;
  --t-corpo: 1.0625rem;
  --t-lead: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-h2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --t-h1: clamp(2.5rem, 1.6rem + 4.4vw, 4.75rem);

  /* Espaços */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: 4.5rem;
  --secao: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --largura: 72rem;
  --texto-max: 38rem;

  /* Formas: três cantos arredondados e um reto */
  --raio-botao: 18px 18px 18px 4px;
  --raio-recebida: 16px 16px 16px 4px;
  --raio-enviada: 16px 16px 4px 16px;
  --raio-pilula: 999px;

  --altura-topo: 4rem;

  color-scheme: light;
}