/* ==========================================================================
   TOKENS — a fonte única de verdade do design system

   Os valores abaixo são exatamente os do desenho aprovado. Ao criar seções
   novas, referencie estes tokens em vez de escrever cor ou medida crua:
   trocar a identidade visual do site deve ser trocar este arquivo.

   Não altere um valor sem revalidar contra o backup em tmp/hero-bone-broth/.
   ========================================================================== */

:root {
  /* --- Paleta da marca ---------------------------------------------------
     Os tons -light/-dark existem para o degradê radial do hero. */
  --sage: #727A64;        /* verde sálvia — cor institucional, fundo do hero */
  --sage-light: #838C74;
  --sage-dark: #6A7259;
  /* Sálvia bem claro para tipografia de grande escala sobre o próprio sálvia.
     Contraste baixo de propósito (2,24): a headline vira relevo do fundo em vez
     de texto que compete com o sujeito da imagem. Não usar em texto corrido. */
  --sage-pale: #AFBC9E;
  --terra: #C47E4E;       /* laranja terra — ações e destaques */
  /* Versão clara do terracota (~30% terra + 70% off-white). Reservada para
     títulos de seção de escala média, onde acrescenta calor sem competir com
     a imagem. Grande demais (como a headline do hero) ela avança e disputa
     atenção com o sujeito — ali use --sage-pale. */
  --terra-claro: #E9CEB7;
  --areia: #D8CCBC;       /* bege areia — fundos secundários */
  --offwhite: #F5F1EC;    /* off-white — fundo do site e texto sobre escuro */
  --branco: #FFFFFF;      /* superfície alternada — separa seções vizinhas sem linha */
  --cinza-cartao: #F2F3F4; /* cinza neutro dos cartões de produto */
  --cinza-selo: #E7E7E9;   /* um degrau acima do cartão — destaca o selo sem cor */
  /* EM TESTE — verde-petróleo da referência, hoje só nos cartões de produto.
     Promover a token oficial da paleta se for aprovado. */
  --pinho: #24514D;
  --ink: #2E3227;         /* verde quase preto — texto sobre claro */

  /* --- Diagramação -------------------------------------------------------
     REGRA DO SISTEMA: --gutter é a moldura interna de toda seção. Nenhum
     elemento a ultrapassa, nem a headline. O alinhamento se mede pelo CENTRO
     ÓPTICO do elemento até a borda — dois elementos de alturas diferentes com
     a mesma borda ficam visualmente desalinhados.

     Ambos usam clamp() para acompanhar a viewport sem saltos no breakpoint. */
  --margem: clamp(14px, 2.6vw, 44px);   /* respiro externo do cartão */
  /* altura do header no mobile — usada para ancorar o painel do menu logo
     abaixo dele, mantendo a marca visível quando o menu abre */
  --header-h: clamp(92px, 25vw, 116px);
  --gutter: clamp(20px, 3.4vw, 56px);   /* moldura interna do cartão */

  /* Respiro vertical padrão de seção de conteúdo. Ao criar seções novas, use
     este token em vez de escrever um clamp próprio — é o que mantém o ritmo
     entre elas. Seções com papel estrutural diferente (banda de imagem, rodapé)
     têm o seu. */
  --secao-y: clamp(56px, 7vw, 100px);

  /* Recuo e raio do cartão do hero. Reescritos em runtime por js/hero-shrink.js
     conforme a rolagem — aqui ficam os valores de repouso. */
  --hero-recuo: var(--margem);
  --hero-raio: 42px;
}