/* ==========================================================================
   tokens.css — Design tokens de specs/design.md
   Fonte de verdade: specs/design.md. Não hardcode valores fora daqui.
   ========================================================================== */

:root {
  /* Paleta — principal (oficial da marca) */
  --creme: #f9f6ea;
  --terracota: #a04623;
  --marrom: #3d1d0f;
  /* Grafite no lugar do quase-preto #171715 da identidade (rodada de outubro,
     08/10/2026). O nome do token ficou, para não renomear o site inteiro. */
  --preto: #262624;

  /* Paleta — secundária (derivadas) */
  /* Era #c96a3c, que no grafite cai para 4.05:1 e reprova no AA. #d4804f dá 5.05:1. */
  --terracota-clara: #d4804f;
  --terracota-escura: #83381a;
  --marrom-medio: #6f513f;
  --creme-fundo: #f2eee0;
  --linha-clara: rgba(61, 29, 15, 0.14);
  --linha-escura: rgba(249, 246, 234, 0.16);
  --whatsapp: #25d366;

  /* Texto secundário sobre escuro (design.md §2, "Cores por função") */
  --creme-secundario: rgba(249, 246, 234, 0.72);

  /* Tipografia — famílias */
  --fonte-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fonte-sans: 'Jost', Poppins, 'Segoe UI', system-ui, sans-serif;

  /* Tipografia — escala fluida (design.md §4) */
  --fs-display: clamp(2.75rem, 6.2vw, 5.5rem);
  --fs-h2: clamp(2.25rem, 4vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --fs-h4: 1.125rem;
  /* Corpo e apoio maiores desde a rodada de outubro ("letra maior, mais respiro"). */
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.375rem);
  --fs-body: clamp(1rem, 1.2vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.75rem;
  --fs-button: 0.8125rem;
  --fs-caption: 0.8125rem;

  /* Espaçamentos — grade de 8px (design.md §5) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 140px;
  --sp-11: 180px;

  /* Padding vertical de seção — fluido entre sp-9 (96px, mobile) e sp-11 (180px,
     desktop). Era 64→140px até a rodada de outubro. */
  --sp-secao: clamp(6rem, 12.5vw, 11.25rem);

  /* Container */
  --container-max: 1240px;
  --gutter: 20px;

  /* Raio — 0 em tudo, exceção só no botão flutuante */
  --raio: 0;
  --raio-flutuante: 50%;

  /* Filete metálico (design.md §2, atualizado 10/09/2026) */
  --filete-gradiente: linear-gradient(
    90deg,
    transparent,
    var(--terracota) 15%,
    #e8935f 50%,
    var(--terracota) 85%,
    transparent
  );

  /* Sombras — proibidas em repouso; só hover/focus de clicáveis e os 2 casos fixos */
  --sombra-flutuante: 0 6px 24px rgba(23, 23, 21, 0.28);
  --sombra-header-rolado: 0 1px 0 var(--linha-escura);
  --sombra-hover-claro: 0 8px 20px rgba(23, 23, 21, 0.18);
  --sombra-hover-escuro: 0 8px 20px rgba(0, 0, 0, 0.35);

  /* Movimento */
  --ease-padrao: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-rapida: 200ms;
  --dur-padrao: 240ms;
  /* Exceção pontual à faixa de 200–300ms de design.md §9: a troca de fundo
     do header cobre a largura da tela inteira, e nessa área uma transição
     curta lê como corte seco em vez de transição (14/09/2026). */
  --dur-lenta: 400ms;
  --dur-hover-img: 600ms;

  /* Header */
  --altura-header: 64px;
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --altura-header: 80px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --gutter: 24px;
  }
}