/* ===========================================================================
   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 PROVISÓRIA — Véio da Água.
     Direção: água parada ao amanhecer (petróleo), areia e madeira (fundo
     quente), sol baixo (destaque). Saí do azul/cinza genérico de propósito:
     pesca brasileira não é tech. O GPT-6 pode sobrescrever tudo isto —
     ver BRIEFING-VISUAL.md §8. Contraste conferido em AA.                  */
  --c-marca:        #0E5A62;   /* cor principal: ícones, destaques, seleção  */
  --c-marca-escura: #0A2E33;   /* barra de aviso e topo do menu lateral      */
  --c-destaque:     #C2520A;   /* selos de desconto e urgência               */
  --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-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: 800;
  --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);
}