/* ===================================================================
   Design tokens — identidade visual "Copa do Mundo 2026"
   Verde-campo + dourado-troféu, com energia esportiva e visual premium.
   =================================================================== */
:root {
  /* Cores principais */
  --cor-primaria: #0E6B3A;        /* verde-campo */
  --cor-primaria-escura: #0A4D2A;
  --cor-primaria-clara: #E6F4EC;
  --cor-destaque: #FFC72C;        /* dourado — troféu, oferta, CTAs */
  --cor-destaque-escura: #E0A800;
  --cor-acento: #1B3A6B;          /* azul profundo — apoio, links secundários */
  --cor-erro: #D9362B;
  --cor-sucesso: #1E8E5A;

  /* Neutros */
  --cor-texto: #1A2420;
  --cor-texto-suave: #5B6B63;
  --cor-fundo: #FFFFFF;
  --cor-fundo-suave: #F4F8F5;
  --cor-borda: #DCE5DF;
  --cor-branco: #FFFFFF;

  /* Tipografia */
  --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-titulo: var(--fonte-base);
  --tamanho-base: 16px;

  /* Espaçamento (escala 4px) */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --espaco-7: 3rem;
  --espaco-8: 4rem;

  /* Bordas e sombras */
  --raio: 12px;
  --raio-pequeno: 8px;
  --raio-grande: 20px;
  --sombra: 0 4px 16px rgba(10, 36, 24, 0.08);
  --sombra-forte: 0 12px 32px rgba(10, 36, 24, 0.16);

  /* Layout */
  --largura-maxima: 1200px;
  --area-toque-minima: 44px;

  /* Transições */
  --transicao-rapida: 150ms ease;
  --transicao: 250ms ease;
}