/* ============================================================
   AZ RESULTADOS — DESIGN TOKENS (variáveis CSS reutilizáveis)
   ============================================================
   "Tokens" são valores que você usa em vários lugares.
   Em vez de escrever "#175179" 30 vezes no código, escrevemos
   "var(--az-blue)". Quando muda um token aqui, muda em todo lugar.

   As cores vieram direto do seu MOODBOARD oficial.
   Os valores hex (#xxxxxx) representam cores.

   POR QUE FAZER ASSIM:
   - Manter consistência (mesma cor em todo lugar)
   - Permitir o painel de "Tweaks" mudar a cor por toda página
   - Facilitar atualizações futuras
   ============================================================ */

:root {
  /* ─── Cores da marca (do moodboard) ───────────────────────── */
  --az-blue:    #175179;   /* azul profundo — cor principal */
  --az-teal:    #96ccd4;   /* teal claro    — acento secundário */
  --az-mint:    #d1f5dc;   /* verde menta   — fundos suaves */
  --az-cream:   #f9f5ce;   /* creme         — destaques editoriais */
  --az-orange:  #eb8a5c;   /* laranja       — CTA / alerta positivo */
  --az-magenta: #a64a8b;   /* magenta       — acento eventual */

  /* ─── Cores de plataformas de terceiros (usadas só onde a marca deles aparece) ── */
  --az-wa:        #25d366;  /* verde WhatsApp oficial */
  --az-wa-dark:   #1da851;  /* verde WhatsApp escurecido — hover */
  --az-ml-yellow: #ffe600;  /* amarelo Mercado Livre oficial */
  --az-ml-blue:   #2d3277;  /* azul Mercado Livre — texto sobre o amarelo */

  /* ─── Neutros (apoio, não vêm do moodboard mas afinam com ele) ── */
  --az-ink:     #0c1d2c;   /* "tinta" — texto principal (preto azulado) */
  --az-ink-2:   #3a4a59;   /* texto secundário (cinza azulado) */
  --az-ink-3:   #6f7c89;   /* texto auxiliar / legendas */
  --az-paper:   #fbfaf6;   /* fundo off-white quente */
  --az-mist:    #f1efe8;   /* fundo de seções alternadas */
  --az-line:    #e6e1d4;   /* linhas / bordas sutis */

  /* ─── Tipografia ──────────────────────────────────────────── */
  /* Do moodboard oficial: Montserrat nos títulos, Roboto no texto. */
  --az-font-display: 'Montserrat', system-ui, sans-serif;
  --az-font-body:    'Roboto', system-ui, sans-serif;
  /* Nunito aproxima o wordmark do WhatsApp (geométrica de terminais arredondados) */
  --az-font-wa:      'Nunito', 'Montserrat', system-ui, sans-serif;

  /* ─── Escalas (espaçamentos consistentes) ─────────────────── */
  /* Múltiplos de 4. Isso é a "régua" do design.
     Se TUDO se alinha à grade de 4px, o site fica visualmente
     equilibrado mesmo sem você perceber o porquê. */
  --az-radius-sm: 6px;
  --az-radius:    12px;
  --az-radius-lg: 20px;
  --az-radius-xl: 28px;

  /* Sombras — sutis. Sombras pesadas envelhecem o site. */
  --az-shadow-sm: 0 1px 2px rgba(12, 29, 44, 0.04), 0 1px 1px rgba(12, 29, 44, 0.03);
  --az-shadow:    0 4px 16px rgba(12, 29, 44, 0.06), 0 1px 3px rgba(12, 29, 44, 0.04);
  --az-shadow-lg: 0 12px 40px rgba(12, 29, 44, 0.10), 0 4px 12px rgba(12, 29, 44, 0.05);
}

/* ============================================================
   RESET — zera os "defaults" feios do navegador
   Sem isso, cada navegador renderiza margens e fontes diferentes.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
.az-site { margin: 0; padding: 0; }
.az-site h1, .az-site h2, .az-site h3, .az-site h4, .az-site p { margin: 0; }
.az-site ul, .az-site ol { margin: 0; padding: 0; list-style: none; }
.az-site button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
.az-site a { color: inherit; text-decoration: none; }
.az-site img, .az-site svg { display: block; max-width: 100%; }
.az-site input, .az-site textarea, .az-site select { font: inherit; color: inherit; }