/* 2. variables.css — os únicos valores "mágicos" do projeto */

:root {
  /* Cores de marca */
  --cor-primaria: #1B4332;
  --cor-primaria-clara: #2D6A4F;
  --cor-primaria-escura: #123526;
  --cor-destaque: #FF6B35;
  --cor-destaque-hover: #E5551F;

  /* Neutros */
  --cor-texto: #1A1A1A;
  --cor-texto-secundario: #6B6B6B;
  --cor-fundo: #FFFFFF;
  --cor-fundo-alt: #F7F7F5;
  --cor-borda: #E7E5E0;

  /* Semânticas */
  --cor-sucesso: #2D6A4F;
  --cor-preco-antigo: #9A9A9A;
  --cor-estrela: #F5A524;

  /* Tipografia */
  --fonte-titulo: 'Poppins', sans-serif;
  --fonte-corpo: 'Inter', sans-serif;

  /* Raio e sombra */
  --raio: 10px;
  --raio-pequeno: 6px;
  --sombra: 0 2px 10px rgba(20, 20, 20, 0.07);
  --sombra-hover: 0 12px 28px rgba(20, 20, 20, 0.14);

  /* Larguras de contêiner (hierarquia de largura) */
  --largura-larga: 1140px;
  --largura-leitura: 900px;
  --largura-form: 560px;

  /* Ritmo vertical */
  --espaco-secao: 96px;
  --espaco-secao-media: 72px;
  --espaco-secao-pequena: 64px;

  /* Movimento */
  --transicao: 0.25s ease;
  --transicao-rapida: 0.15s ease;

  /* Altura real do cabeçalho (topbar + navbar + categorias), medida via JS
     em main.js — muda conforme a largura da tela, então nunca deve ser
     um número fixo "no olho". O valor abaixo é só um fallback antes do
     JS rodar. */
  --altura-navbar: 96px;
}