/* Fonte única de verdade do design system. Nunca escreva cor ou medida crua
   fora daqui. */

:root {
  /* Paleta. Os tons -light/-dark servem ao degradê radial do hero. */
  --sage: #727A64;        /* verde sálvia — cor institucional, fundo do hero */
  --sage-light: #838C74;
  --sage-dark: #6A7259;
  /* contraste 2,24 de propósito: relevo do fundo, não texto corrido */
  --sage-pale: #AFBC9E;
  --terra: #C47E4E;       /* laranja terra — ações e destaques */
  /* títulos de escala média; em escala grande use --sage-pale */
  --terra-claro: #E9CEB7;
  --areia: #D8CCBC;       /* bege areia — fundos secundários */
  /* Areia lavada com branco, para faixa de seção inteira: o --areia cheio
     numa banda full-bleed pesa demais entre duas seções claras. Ele continua
     sendo o tom das formas DENTRO da faixa, que assim aparecem contra ela. */
  --areia-veu: color-mix(in srgb, var(--areia) 42%, var(--branco));
  --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 */
  --cinza-fundo: #F5F5F1;  /* cinza morno — ficha do tutor nas avaliações */
  /* EM TESTE — promover à paleta oficial se aprovado */
  --pinho: #24514D;
  --ink: #2E3227;         /* verde quase preto — texto sobre claro */
  --zap: #1FAB36;         /* verde do WhatsApp — só no convite do grupo */
  --estrela: #FF9A0A;     /* âmbar das estrelas de avaliação */
  /* cartão de kit selecionado; o selo dentro dele usa --verde-veu, mais escuro */
  --verde-fundo: #F1FBF3;

  /* único ponto fora da paleta terrosa, de propósito. Valor da referência. */
  --verde-vivo: #008900;
  --verde-veu: #E4F7E6;
  --linha: #E2DED7;       /* fio de contorno de cartão sobre fundo claro */
  /* único azul do site: o "Útil" marcado das avaliações. 5,7:1 sobre branco. */
  --azul-util: #1F63C8;

  /* Diagramação. --gutter é a moldura interna de toda seção: nenhum elemento
     a ultrapassa. Alinhamento se mede pelo centro óptico, não pela caixa. */
  --margem: clamp(14px, 2.6vw, 44px);   /* respiro externo do cartão */
  /* ancora o painel do menu abaixo do header; reescrito por nav-menu.js */
  --header-h: clamp(92px, 25vw, 116px);
  --gutter: clamp(20px, 3.4vw, 56px);   /* moldura interna do cartão */
  /* Carrossel de produtos no celular: um cartão por tela, sem espiada do
     vizinho. O vão separa os cartões na fila de scroll-snap. */
  /* Lilás do fundo da foto do banner (banner-teste-4.jpg, amostrado no topo):
     preenche o que a foto não cobre quando a banda é mais alta que ela. */
  --lilas-banner: #C0B4D8;
  --cinza-texto: #656565;  /* rótulo neutro de botão claro (Saiba mais dos produtos) */
  --produtos-cartao: 100%;
  --produtos-vao: var(--gutter);
  /* largura máxima do conteúdo de seção. Ainda escrita como 1180px em
     compra, origem e vet — migrar para o token ao tocar nesses arquivos. */
  --conteudo-max: 1180px;

  /* respiro padrão de seção; use em vez de escrever um clamp próprio */
  --secao-y: clamp(56px, 7vw, 100px);
  /* metade do respiro, para bloco de serviço entre duas seções: com o --secao-y
     cheio ele ganhava o mesmo peso vertical de uma dobra de venda */
  --secao-y-curta: calc(var(--secao-y) * 0.5);
  /* Respiro de bloco solto (garantia, especialista, WhatsApp): 1,5 x --secao-y.
     Somado ao respiro da vizinha dá ~2,5 x, na escala do vão mídia → produtos,
     que é o que define o ritmo arejado da home (2026-09-21). */
  --secao-y-bloco: calc(var(--secao-y) * 1.5);

  /* a curva percorre até 75% desta altura (AMP em js/ondas.js) */
  --onda-h: clamp(130px, 15vw, 250px);

  /* Soma ao --secao-y no topo de quem recebe onda. ~84% de --onda-h. */
  --onda-folga: clamp(110px, 13vw, 210px);

  /* onda curta para seção baixa; a folga acompanha a mesma fração */
  --onda-curta: 0.6;
  --onda-h-curta: calc(var(--onda-h) * var(--onda-curta));
  --onda-folga-curta: calc(var(--onda-folga) * var(--onda-curta));

  /* Creme das faixas de luz de título — a da garantia e a da oferta. Não é
     --terra-claro puro:
     sobre o --sage ele dá 2,73:1, abaixo do mínimo de 3:1 para texto grande.
     Lavado com branco sobe para 3,76:1 e ainda lê como quente. */

  /* Sombra padrão de cartão sobre fundo claro. São duas camadas de propósito:
     a curta é o contato com a superfície, a larga é o halo ambiente. Uma só
     precisa escurecer muito para aparecer, e aí o cartão fica sujo embaixo. */
  --sombra-cartao: 0 2px 6px rgba(46, 50, 39, 0.05),
                   0 18px 40px rgba(46, 50, 39, 0.10);

  /* valores de repouso; js/hero-shrink.js reescreve na rolagem */
  --hero-recuo: var(--margem);
  --hero-raio: 42px;
}