/* ============================================================================
   POOD — TOKENS DA DIREÇÃO A
   Fonte única de cor, tipografia, forma e layout para o site inteiro.

   Origem: projeto "Pood Fitness — Design System" em claude.ai/design —
   cards Direção → Cor, Tipografia e Layout, e o :root de direcao/tela.css.

   REGRA: nenhum outro arquivo do tema declara hex, tamanho da escala
   tipográfica ou raio literal. Tudo sai daqui por var(). Trocar a paleta do
   site passa a ser editar este arquivo e mais nada.

   Prefixo --pood-* de propósito: o Magento e o Porto declaram variáveis
   próprias, e nomes genéricos como --fundo ou --tinta colidiriam sem aviso.
   ========================================================================= */

:root {

  /* --- cor ---------------------------------------------------------------
     Neutro frio com um acento pontual. O acento é pontuação, não superfície:
     vale em selo, pílula de economia e realce — nunca em área grande.
     --pood-tinta-3 NÃO é textual (2,16:1 sobre o fundo): serve a borda,
     marca d'água e ícone. */
  --pood-fundo:     #F2F2F4;
  --pood-bloco:     #DCDCDE;
  --pood-bloco-2:   #D3D3D6;   /* foto do card em hover */
  --pood-papel:     #FFFFFF;
  --pood-tinta:     #17171A;
  --pood-tinta-2:   #6E6E76;
  --pood-tinta-3:   #A6A6AD;
  --pood-linha:     #D8D8DC;
  --pood-linha-2:   #E6E6EA;
  --pood-acento:    #F65F44;
  --pood-acento-h:  #E4522F;   /* hover do acento */
  --pood-ok:        #2F7D5A;

  /* faixas escuras — cabeçalho, menu e rodapé */
  --pood-escuro:      #17171A;
  --pood-escuro-2:    #26262B;   /* faixa do menu */
  --pood-escuro-3:    #24242B;   /* selo de pagamento no rodapé */
  --pood-sobre-esc:   #8D8D95;   /* texto de apoio sobre escuro */
  --pood-sobre-esc-2: #C9C9CF;   /* texto forte sobre escuro */
  --pood-borda-esc:   #2A2A30;
  --pood-borda-esc-2: #4A4A52;

  /* --- tipografia --------------------------------------------------------
     Uma família, sete papéis, três pesos. A Open Sans SAI: na loja ela existe
     hoje só nos botões, e é a única quebra de família do site. */
  --pood-fonte: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --pood-p-normal: 400;
  --pood-p-medio:  500;
  --pood-p-forte:  600;    /* 700 só na logo */

  --pood-t-display: 38px;    --pood-lh-display: 1.08;   --pood-ls-display: -.025em;
  --pood-t-produto: 29px;    --pood-lh-produto: 1.15;   --pood-ls-produto: -.02em;
  --pood-t-secao:   22px;    --pood-lh-secao:   1.2;
  --pood-t-item:    15px;                                /* item e preço, tabular */
  --pood-t-corpo:   14px;    --pood-lh-corpo:   1.6;
  --pood-t-apoio:   12.5px;
  --pood-t-rotulo:  9.5px;   --pood-ls-rotulo:  .14em;   /* o único em caixa alta */
  --pood-lh-nome:   1.35;                                /* nome de produto no card */

  /* --- forma -------------------------------------------------------------
     Sem sombra em lugar nenhum. O relevo vem de borda e de fundo. */
  --pood-r:        999px;   /* pílula: botão, selo, chip */
  --pood-r-cartao: 14px;
  --pood-r-campo:  10px;
  --pood-r-caixa:  8px;     /* foto do card, swatch, item de lista */
  --pood-h:        40px;    /* altura de controle */
  --pood-h-add:    38px;    /* botão do card */

  /* --- layout ------------------------------------------------------------ */
  --pood-container:   1200px;
  --pood-lado:        236px;    /* conteúdo da barra lateral */
  --pood-gap-colunas: 40px;
  --pood-gap-cartoes: 12px;
  --pood-pad-cartao:  30px 32px 32px;   /* valor do design system, medido em tela.css */

  /* Respiro entre SEÇÕES empilhadas de uma página — a faixa branca, a
     descrição, as avaliações. Existe porque os quatro valores viviam soltos
     em quatro regras diferentes e o resultado medido na PDP era irregular:
     44px antes da faixa branca, 108px antes da descrição e 44px antes das
     avaliações.

     Os 108 não eram escolha de ninguém: a margem de baixo de uma seção
     somava com a de cima da seguinte. Em fluxo normal elas colapsariam para
     a maior, mas o `.column.main` da PDP é GRADE, e margem de item de grade
     NÃO COLAPSA. Por isso a regra que acompanha este token é: cada seção
     declara só a margem de CIMA, nunca a de baixo. */
  --pood-gap-secao:   56px;
}

/* Em tela estreita o respiro encolhe junto — e encolhe NUM LUGAR SÓ. Antes
   cada seção trazia o seu valor de celular na própria regra (26px na faixa
   branca, 30 no bloco técnico, 30 nas avaliações, e a descrição nem tinha,
   ficando com os 56 do desktop). */
@media (max-width: 991px) {
  :root { --pood-gap-secao: 34px; }
}