/* =========================================================
   TEMA DA LOJA: Novo Mundo Atacado

   Cores tiradas da logo (novo mundo remake/logo/logo.png, 01/10/2026):
     - verde-petróleo #237987, o das letras "NOVO MUNDO": títulos, botões
       e toda a estrutura escura (rodapé, faixa do topo);
     - azul do globo #2A8FA8 e verde dos continentes #7CC243: blocos e
       realces;
     - creme #F5EDDC, o fundo da logo: fundo do site.
   O verde-claro entra em bloco, selo e realce. Nunca em texto sobre o
   creme: ali ele some.

   Tipografia: título em Bricolage Grotesque, pesada e condensada, que
   lembra as letras largas da logo; corpo em Inter; preço e código em fonte
   monoespaçada.

   Este arquivo só troca variáveis. O desenho das páginas está em
   assets/css/estilo.css e é o mesmo para todas as lojas.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,800&family=IBM+Plex+Mono:wght@500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* as cores da logo, para usar abaixo e no config.js (var(--petroleo)) */
  --petroleo: #237987;
  --petroleo-escuro: #17545E;
  --azul: #2A8FA8;
  --verde: #7CC243;
  --verde-claro: #CFE8B4;
  --verde-fantasma: #EEF6E3;
  --creme: #F5EDDC;

  /* texto e estrutura */
  --preto: #142F34;
  --tinta: #142F34;
  --grafite: #24434A;
  --cinza: #4F6266;
  --cinza-medio: #7C8C8F;
  --cinza-claro: #B9C2C2;
  --linha: #E6DCC6;
  --linha-forte: #D6C8AC;

  /* fundos */
  --fundo: #FBF7EE;
  --fundo-alt: var(--creme);
  --branco: #FFFFFF;

  /* Acento de interface (foco, sublinhado, ícones pequenos). */
  --acento: var(--petroleo);
  --acento-escuro: var(--petroleo-escuro);

  /* Avisos suaves (conta, pagamento pendente, excursão escolhida). */
  --acento-suave: var(--verde-claro);
  --acento-fantasma: var(--verde-fantasma);

  /* Topo das páginas internas: bloco petróleo com letra creme, como a logo
     ao contrário. */
  --topo-fundo: var(--petroleo);
  --topo-texto: var(--creme);
  --topo-texto-suave: rgba(245, 237, 220, .82);
  --topo-rotulo: var(--verde-claro);

  /* Seções escuras, rodapé e loja pausada. */
  --escuro-fundo: var(--petroleo-escuro);
  --escuro-texto: var(--creme);
  --escuro-marca: var(--verde);

  /* Faixa que corre no topo. */
  --aviso-fundo: var(--petroleo-escuro);
  --aviso-texto: var(--creme);
  --aviso-marca: var(--verde);

  /* Botão petróleo enche de verde ao passar o mouse. */
  --botao-realce: var(--verde);

  --selecao-fundo: var(--verde-claro);
  --selecao-texto: var(--preto);

  /* tipografia */
  --fonte-titulo: 'Bricolage Grotesque', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --fonte-texto: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --fonte-numero: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --titulo-peso: 800;
  --titulo-caixa: none;
  --titulo-espaco: -0.02em;
  --titulo-altura: 1.02;

  /* nome da peça: como está cadastrado no painel */
  --nome-peca-caixa: none;
  --nome-peca-peso: 600;

  --raio: 10px;
}