/* Tokens
   Toda a paleta, a escala tipográfica e as medidas do site.
   Nenhum valor de cor ou de tamanho deve aparecer solto nos outros
   arquivos: se precisar de um novo, ele nasce aqui. */
:root {
  /* neutros */
  --paper: #f7f5f1;
  --paper-2: #f1eee8;
  --paper-3: #e8e4dc;

  /* Os nomes guardam a escala original; os alfas foram corrigidos para
     passar no contraste mínimo da WCAG sobre o papel (4.5:1 para texto).
     Antes, --ink-45 dava 2.82:1 e --ink-30 dava 1.91:1 — reprovavam, e
     era o que deixava rótulos e legendas ilegíveis. */
  --ink: #1c1b18;              /* 15.8:1 */
  --ink-80: rgba(28, 27, 24, 0.92);  /* 12.5:1 */
  --ink-60: rgba(28, 27, 24, 0.82);  /*  8.9:1 */
  --ink-45: rgba(28, 27, 24, 0.66);  /*  5.3:1 */
  --ink-30: rgba(28, 27, 24, 0.52);  /*  3.4:1 — só ornamento e placeholder */

  --line: rgba(28, 27, 24, 0.22);
  --line-soft: rgba(28, 27, 24, 0.13);

  /* acento — único ponto de cor do site */
  --verde: #023620;
  --verde-60: rgba(2, 54, 32, 0.6);
  --verde-30: rgba(2, 54, 32, 0.3);
  --verde-10: rgba(2, 54, 32, 0.1);
  /* O mesmo acento, clareado para sobreviver a fundo escuro: o #023620
     desaparece sobre o overlay preto do hero. Usar só sobre foto ou
     tinta — sobre o papel ele reprova no contraste. */
  --verde-claro: #a9c9b6;

  /* tipografia */
  --display: "General Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --corpo: "Red Hat Mono", "Courier New", monospace;

  --fs-hero: clamp(1.85rem, 4.4vw, 4.6rem);
  --fs-display: clamp(2.1rem, 4.8vw, 4.8rem);
  --fs-title: clamp(1.65rem, 3vw, 2.9rem);
  --fs-sub: clamp(1.15rem, 1.7vw, 1.6rem);
  --fs-body: clamp(1rem, 1.1vw, 1.15rem);
  --fs-small: 0.9375rem;
  --fs-micro: 0.6875rem;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  /* Respiro de cima e de baixo de cada dobra. Como as dobras se
     encostam, o vão entre duas é o dobro disto — por isso ele é menor do
     que parece: 4rem aqui viram 8rem de intervalo. */
  --section-y: clamp(2rem, 3.8vw, 4rem);
  --max-w: 1560px;
  --nav-h: 76px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* No celular o `clamp` do --section-y trava no mínimo (3.8vw de 390px dá
   15px, bem abaixo dos 2rem), então a tela pequena herdava o respiro
   pensado para a grande: 32px de cada lado, 64px de vão entre duas
   dobras. Numa tela de 844px de altura isso é quase 8% do que se vê por
   vez. O mínimo do celular é menor, e o vão cai para 44px. */
@media (max-width: 720px) {
  :root { --section-y: 1.4rem; }
}