/* ==========================================================================
   Laura & Cris — TOKENS
   Fonte unica dos valores do sistema. Antes de 20/09/2026 esta lista
   existia copiada em cinco arquivos, que podiam divergir sem ninguem
   notar. Agora quem precisa de cor ou escala carrega este arquivo.
   Consumidores: css/site.css, as 14 paginas, os 2 infograficos e os 2
   PDFs do Metodo.
   ========================================================================== */

:root{
  /* --- COR: 8 valores medidos do ensaio, mais uma divisória de rodapé ------
     Nenhum destes valores é preferência: saíram da medição de luminância das
     fotos da Laura. Não invente um nono. Se precisar de um tom novo, o
     problema provavelmente é de hierarquia, não de cor. */
  --preto:       #0F0F0F;  /* p5 do ensaio (o couro) — texto, botões */
  --grafite:     #333333;  /* texto corrido */
  --cinza:       #666666;  /* MEDIANA do ensaio — a cor da marca */
  --cinza-medio: #8D8D8D;  /* fundo do estúdio — só título grande, nunca texto */
  --cinza-claro: #C7C7C7;  /* flores e cetim — bordas, rótulos no fundo preto */
  --linha:       #E4E4E2;  /* divisórias sobre branco */
  --linha-escura:#262626;  /* divisórias dentro do rodapé preto */
  --offwhite:    #F3F3F1;  /* branco real das fotos — fundo de seção */
  --branco:      #FFFFFF;

  /* --- TIPOGRAFIA ---------------------------------------------------------
     Futura Light é a fonte da marca. Não é web font, então cai para Jost, que
     é a releitura livre da Futura. Diferença mínima. */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Futura', 'Futura Light', 'Jost', Helvetica, Arial, sans-serif;

  /* Escala de 7 degraus mais 3 títulos. O piso é 12px e é regra, não gosto:
     abaixo disso o texto deixa de ser confortável em tela pequena. Antes desta
     escala existiam 21 tamanhos soltos, seis deles diferindo em meio pixel. */
  --t-1: 12px;   /* rótulo em caixa alta, base do rodapé — PISO */
  --t-2: 13px;   /* nota, legenda, referência, fonte de depoimento */
  --t-3: 15px;   /* texto de apoio, links do rodapé */
  --t-4: 17px;   /* corpo (16px no celular, redefinido lá embaixo) */
  --t-5: 19px;   /* lead, depoimento, nome de pessoa */
  --t-6: 22px;   /* h3, citação, valor de preço */
  --t-7: 26px;   /* h2 de página legal */
  --t-h2:       clamp(28px, 3.2vw, 40px);
  --t-h1:       clamp(40px, 5.4vw, 68px);
  --t-h1-legal: clamp(32px, 4vw,   48px);  /* páginas legais e 404 */
  --t-h1-foto:  clamp(34px, 10vw,  48px);  /* título sobre a foto, no celular */

  /* Espaçamento entre letras — 4 degraus. Cresce com a importância do rótulo:
     a marca no topo abre mais que um rótulo de tabela. */
  --ls-1: .14em;  /* rótulos de apoio */
  --ls-2: .22em;  /* botões, links de navegação */
  --ls-3: .26em;  /* kicker, títulos de coluna */
  --ls-4: .34em;  /* a marca */

  /* --- ESPAÇAMENTO: múltiplos de 4, 9 degraus -----------------------------
     Qualquer margem ou padding novo sai daqui. Se nenhum degrau serve, o
     problema é o layout, não a escala. */
  --e-1:  4px;
  --e-2:  8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;
  --e-8: 64px;
  --e-9: 96px;

  /* --- TRAÇO, RAIO, MOVIMENTO, TOQUE --- */
  --borda: 1px;
  --raio: 18px;        /* só o painel que sobe por cima da foto no celular */
  --transicao: .18s;
  --toque: 44px;       /* alvo mínimo de dedo */

  /* --- MEDIDAS DE LAYOUT --- */
  --media-w: 42%;          /* largura do painel de imagem no desktop */
  --gutter: clamp(20px, 4vw, 64px);
  --leitura: 68ch;         /* largura máxima de texto corrido */
  --nav-h: 64px;
}

/* --------------------------------------------------------------------------
   Celular: dois degraus encolhem. O corpo cai de 17 para 16px e leva junto
   tudo que depende de --t-4, que e o motivo de ele ser token e nao literal.
   -------------------------------------------------------------------------- */
@media (max-width:750px){
  :root{
    --nav-h: 56px;
    --t-4: 16px;
  }
}