/* ==========================================================================
   TOKENS — Lara Monteiro Arquiteta
   Fonte da verdade: DNA da marca (Paleta 03) + Especificações Técnicas.
   Nenhuma cor, tamanho de fonte ou curva de animação deve existir fora
   deste arquivo. Se precisar de uma variação, ela nasce aqui, comentada.
   ========================================================================== */

:root {
  /* -- COR — Paleta 03 (seis cores, HEX conferidos no arquivo original) -- */

  /* Fundo padrão. É nele que a identidade respira — 60% de uso da marca. */
  --creme: #F9EFE1;

  /* Derivado do creme: cards e superfícies elevadas, um degrau acima do fundo. */
  --off-white: #FFFBF5;

  /* Âncora escura. Rodapés, losango do símbolo, texto forte sobre claro.
     Contraste 11,65:1 sobre --creme — a combinação mais segura da marca. */
  --marrom: #532100;

  /* Profundidade e autoridade. Faixas de seção, títulos sobre fundo claro.
     Contraste 9,79:1 sobre --creme — livre para texto corrido em qualquer tamanho. */
  --vinho: #7C0026;

  /* Cor primária da marca. CTAs, links, estados ativos, símbolo.
     Reservado: se tudo é destaque, nada é destaque.
     Contraste 5,28:1 sobre --creme — aprovado a partir de 16px. */
  --magenta: #B62E50;

  /* Superfícies secundárias e hovers.
     Contraste 3,17:1 sobre --creme — LIMITADO: só texto ≥24px peso médio. */
  --rosa-antigo: #D16573;

  /* Derivado: detalhes e estados sutis, uso mínimo. */
  --rosa-tinte: #FFBEBE;

  /* Materialidade — ponte com a madeira dos renders.
     Contraste 3,18:1 sobre --creme — LIMITADO: só texto ≥24px peso médio. */
  --terracota: #B47863;

  /* -- Overlays construídos a partir das cores da marca (nunca preto/branco puro) -- */
  --overlay-marrom-forte: rgba(83, 33, 0, 0.86);   /* véu do hero e de fotos com texto por cima */
  --overlay-marrom-suave: rgba(83, 33, 0, 0.55);   /* overlay de hover nos cards de projeto */
  --overlay-simbolo: rgba(83, 33, 0, 0.06);        /* padrão gráfico de fundo, opacidade 4–8% */
  --sombra-card: rgba(83, 33, 0, 0.16);             /* sombra suave, nunca preto puro */

  /* -- TIPOGRAFIA -- */
  --fonte-display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --fonte-corpo: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* Tracking largo em caixa alta é assinatura da marca — nunca reduzir. */
  --tracking-titulo-curto: 0.22em;   /* olho / kicker */
  --tracking-titulo-secao: 0.18em;   /* títulos de seção */
  --tracking-titulo-capa: 0.14em;    /* título de capa / hero, letras já grandes */
  --tracking-corpo: 0;

  --lh-corpo: 1.65;
  --lh-titulo: 1.05;

  /* Escala fluida — clamp(mínimo, preferencial, máximo) */
  --fs-hero: clamp(2.75rem, 6vw + 1rem, 7rem);
  /* O título de seção cresceu: com a sigla ao lado (e não mais acima), ele
     ganhou uma coluna inteira e precisa ocupá-la. */
  --fs-titulo-secao: clamp(1.65rem, 2.4vw + 0.9rem, 2.9rem);
  --fs-kicker: clamp(0.85rem, 0.5vw + 0.75rem, 1rem);
  --fs-corpo-grande: clamp(1.0625rem, 0.4vw + 1rem, 1.3125rem);
  --fs-corpo: 1rem;
  --fs-legenda: clamp(0.875rem, 0.2vw + 0.8rem, 0.9375rem);

  /* -- ESPAÇAMENTO -- */
  --espaco-2xs: 0.5rem;
  --espaco-xs: 1rem;
  --espaco-sm: 1.5rem;

  /* Os quatro degraus grandes são FLUIDOS. Em rem fixo eles são respiro no
     desktop e desperdício no celular: --espaco-xl (96px) usado como gap de
     uma coluna única em 375px come um quarto da tela em ar, e era ele que
     fazia o rodapé ocupar uma tela inteira sozinho (medido: 814px de 812).

     O teto de cada um é o valor fixo antigo, alcançado por volta de 1000px —
     que é onde o layout de desktop já está montado. Acima disso nada muda em
     relação à versão anterior; abaixo, a margem acompanha a largura da tela
     em vez de furá-la. Mesma lógica que já valia pra --pad-secao.

     Medido em 375px: 40→28, 64→36, 96→48, 144→72. */
  --espaco-md: clamp(1.75rem, 4vw, 2.5rem);
  --espaco-lg: clamp(2.25rem, 6.4vw, 4rem);
  --espaco-xl: clamp(3rem, 9.6vw, 6rem);
  --espaco-2xl: clamp(4.5rem, 14.4vw, 9rem);
  --container-max: 1440px;
  --margem-viewport: clamp(1.25rem, 5vw, 4rem);

  /* Respiro vertical das seções. Antes cada seção usava --espaco-2xl fixo
     (9rem em cima e embaixo, 18rem entre duas seções vizinhas): num monitor
     de 1080px isso é um sexto da tela em ar. Fluido, a margem acompanha a
     altura útil em vez de furar a tela em telas médias. */
  /* O piso caiu de 4rem para 2,75rem: em 375px eram 64px em cima e 64 embaixo
     de CADA uma das cinco seções — 640px só de borda de seção, quase uma tela
     inteira. Acima de ~630px a conta em vw assume e nada muda. */
  --pad-secao: clamp(2.75rem, 7vw, 7.5rem);

  /* -- ANIMAÇÃO — vocabulário de movimento -- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* entradas */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* transições de estado */
  --dur-fast: 240ms;
  --dur-base: 640ms;
  --dur-slow: 1100ms;

  /* -- BORDAS --
     O símbolo da marca tem cantos arredondados (stroke-linejoin: round) e os
     projetos usam arcos embutidos. O site herda essa suavidade: nada de
     retângulo seco. Escala de raio, não um valor único. */
  --raio-sm: 8px;    /* botões, badges */
  --raio-md: 18px;   /* cards de serviço, blocos de texto */
  --raio-lg: 28px;   /* cards de projeto, imagens */
  --raio-arco: 999px; /* arco pleno: topo do retrato, pílulas */
}

/* Reduz TUDO. Não é opcional — é regra invioláve do sistema de animação. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
}