/* =============================================================================
 * tokens-site.css — camada de SITE sobre o tokens.css do app (sem cor nova).
 * Escala display fluida, ritmo de seção, largura de leitura e a Inter itálica.
 * Cor: nenhuma aqui. Tudo que pinta vem de tokens.css (tema claro).
 * ============================================================================= */

/* Inter itálica variável (Google Fonts css2, subset latin), servida do próprio domínio.
 * O tokens.css só tem a Inter reta; o navegador sintetizaria um oblíquo feio. */
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fontes/inter-italic-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 {
  /* display fluido: reta entre 390 px e 1440 px de viewport, com teto e piso.
   * heroi: 64 px em 390 -> 180 px em 1440 (o pedido da spec §3). */
  --d-heroi: clamp(3.5rem, 1.306rem + 11.05vw, 11.25rem);
  /* nome no herói do /sobre-thiago/: 6 letras por linha ("Thiago" / "Lucas"), cabe maior que o
   * herói da home no celular: 88 px em 390 -> 180 px em 1440 */
  --d-sobre: clamp(5.5rem, 3.3rem + 9vw, 11.25rem);
  --d-cta: clamp(3.5rem, 1.306rem + 11.05vw, 11.25rem);
  /* titulo de case: 52 px em 390 -> 136 px em 1440 */
  --d-case: clamp(3rem, 1.2rem + 8vw, 8.5rem);
  /* titulo de secao: 40 px em 390 -> 96 px em 1440 */
  --d-secao: clamp(2.5rem, 1.2rem + 5.33vw, 6rem);
  /* numero gigante (10 anos / 350+) */
  --d-numero: clamp(5rem, 2.2rem + 11.5vw, 12.5rem);
  /* titulo de card de case */
  --d-card: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);

  --altura-display: 0.92;
  --trilha-display: -0.045em;

  /* corpo de leitura do case: 18 px -> 22 px */
  --t-leitura: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --t-chamada: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --leitura: 68ch;

  /* ritmo vertical de seção: 96 px no celular -> 160 px no desktop
   * (fora da escala de 4 do app, de propósito: é medida de página, não de componente) */
  --ritmo: clamp(96px, 72px + 6.15vw, 160px);
  --ritmo-meio: clamp(48px, 36px + 3vw, 80px);

  /* margem lateral da página e largura máxima */
  --margem: clamp(20px, 12px + 2.5vw, 48px);
  --pagina-max: 90rem;      /* 1440 */
  --galeria-max: 87.5rem;   /* 1400: largura nativa das peças */

  --cabecalho: 60px;
  --respiro-peca: 6px;      /* metade do respiro de 12 px entre peças do mosaico */

  --tempo-revela: 0.9s;
  --curva-revela: cubic-bezier(0.16, 1, 0.3, 1);
  --desloca-revela: 24px;
}

@media (max-width: 699px) {
  :root {
    --cabecalho: 56px;
    --respiro-peca: 3px;
  }
}