/* ==========================================================================
   TOKENS DO SITE · KNIPE
   Única fonte de verdade para cores, fontes e medidas. Alterar aqui propaga
   para todos os componentes.

   Paleta de alfaiataria: preto (cabeçalho e rodapé), marfim (fundo), verde
   inglês (botões e chamadas) e caramelo de couro (detalhes e títulos sobre o
   preto). Os nomes antigos das variáveis foram mantidos para não quebrar os
   componentes herdados.
   ========================================================================== */

:root {
  /* Cores da marca */
  --cor-marca: #121212;            /* preto: cabeçalho, rodapé, faixas escuras */
  --cor-marca-profunda: #0A0A0A;
  --cor-destaque: #1F3A30;         /* verde inglês: botões e chamadas */
  --cor-destaque-escura: #17302A;  /* verde em texto sobre fundo claro */
  --cor-destaque-clara: #2E5446;
  --cor-destaque-rgb: 31, 58, 48;
  --cor-texto-no-destaque: #F5F0E8; /* texto sobre o verde */
  --cor-mostarda: #C9A272;         /* caramelo claro para títulos e filetes sobre o preto */
  --cor-caramelo: #9C7448;         /* caramelo em texto sobre fundo claro (contraste AA) */
  --cor-papel: #F7F4EF;            /* fundo da página (marfim) */
  --cor-papel-escuro: #EDE7DD;
  --cor-tinta: #161616;            /* texto principal */
  --cor-tinta-profunda: #0A0A0A;
  --cor-branco: #FFFFFF;
  --cor-cinza-claro: #F1EEE8;
  --cor-cinza-borda: #DCD5CA;
  --cor-cinza-texto: #5E5A53;
  --cor-verde: #2B6B4A;            /* preço no Pix e estoque */

  /* Tipografia: Jost (texto e rótulos) e Bodoni Moda (títulos, como nas revistas de moda) */
  --fonte-ui: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-titulo: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --fonte-mono: 'Jost', system-ui, sans-serif;   /* rótulos técnicos: Jost em caixa alta espaçada */
  --largura-titulo: 100%;

  /* Risca de giz bem sutil nas faixas escuras, como o tecido de um terno */
  --camadas-escuro: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 11px);
  --camadas-claro: none;
  --camadas-tamanho: auto;

  /* Layout */
  --largura-max: 1280px;
  --gutter: 16px;
  --topbar-altura: 32px;
  --header-altura: 64px;
  --busca-altura: 44px;

  /* Banner: proporção (largura / altura) no computador */
  --banner-proporcao: 1280 / 520;

  /* Formas: cantos retos, de etiqueta e cartão de visita */
  --raio-pill: 0;
  --raio-md: 2px;
  --raio-sm: 0;

  /* Movimento */
  --transicao-rapida: 180ms ease;
  --transicao-slide: 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root {
    --gutter: 28px;
    --header-altura: 78px;
    --busca-altura: 44px;
  }
}