/* ===========================================================================
   TOKENS — identidade visual do template.
   Troque APENAS os valores deste arquivo para adaptar a loja a outra marca.
   Nada aqui depende de build, CDN ou servidor.
   ========================================================================= */
:root {
  /* --- cor ------------------------------------------------------------- */
  /* PALETA DA MARCA — extraída da logo, não escolhida de olho.
     Medi os pixels do arquivo: 85% dos pixels opacos são o verde profundo
     (#002011–#022312, matiz 149°) e 1,4% são o laranja (#FA4300, matiz 16°).
     O teal #0E5A62 que estava aqui antes ficava a 37° do verde da marca —
     perto o bastante para parecer engano, longe o bastante para destoar.

     Três valores, três papéis, três degraus de luminância bem separados:
       #022312 (16,8:1) estrutura escura — barras, topo do menu
       #063D22 (12,4:1) marca — ícones, destaques, seleção
       #15803D ( 5,0:1) compra — exclusivo do botão
     Essa distância de valor é o que impede os verdes de virarem um borrão. */
  --c-marca:        #063D22;   /* cor principal: ícones, destaques, seleção  */
  --c-marca-escura: #022312;   /* verde exato da logo: barras e menu lateral */

  /* O laranja da logo dá 3,58:1 no branco. Passa para borda e ícone (mínimo
     3:1), REPROVA para texto (mínimo 4,5:1). Por isso são dois tokens: use
     --c-destaque no traço e --c-destaque-forte onde houver letra. */
  --c-destaque:       #FA4300; /* laranja da logo: bordas e ícones           */
  --c-destaque-forte: #D73A00; /* 4,67:1 — fundo com texto branco e texto    */

  --c-compra:       #15803D;   /* EXCLUSIVA do botão de compra               */
  --c-compra-ativa: #126634;   /* botão de compra pressionado                */
  --c-texto:        #19201F;   /* texto principal                            */
  --c-apoio:        #5C6563;   /* texto secundário                           */
  --c-linha:        #E2DED6;   /* bordas e divisores                         */
  --c-fundo:        #F1F2EF;   /* fundo neutro de baixo contraste            */
  --c-cartao:       #FFFFFF;   /* fundo dos cartões                          */
  --c-superficie:   #E4E8E3;   /* fundo de imagem antes de carregar          */
  --c-estrela:      #F0A91B;   /* estrelas de avaliação                      */
  --c-ok:           #16A34A;   /* ✓ da tabela de comparação                  */
  --c-nao:          #DC2626;   /* ✗ da tabela de comparação                  */

  /* derivadas — normalmente não precisa mexer */
  --c-marca-fraca:  color-mix(in srgb, var(--c-marca) 8%, #fff);
  --c-marca-media:  color-mix(in srgb, var(--c-marca) 14%, #fff);
  --c-destaque-fraca: color-mix(in srgb, var(--c-destaque) 8%, #fff);

  /* --- tipografia ------------------------------------------------------ */
  /* Stack do sistema: zero download, zero CDN, renderiza igual offline.
     Para usar uma fonte própria, coloque o arquivo em fontes/ e declare
     uma @font-face aqui, nunca um <link> para serviço externo.          */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --peso-forte: 700;
  --peso-medio: 600;

  /* --- forma ------------------------------------------------------------ */
  --r-cta:    12px;
  --r-cartao: 16px;
  --r-caixa:  12px;
  --r-pilula: 999px;

  /* --- layout ----------------------------------------------------------- */
  --coluna: 480px;          /* largura máxima da coluna central            */
  --respiro: 16px;          /* padding lateral                             */
  --sombra-cartao: 0 1px 2px rgba(16,16,24,.06);
  --sombra-alta:   0 12px 28px rgba(16,16,24,.16);
}