/**
 * Variáveis de tema (design tokens).
 *
 * Estes são apenas os valores PADRÃO do modelo-base. Em cada instância,
 * js/servicos/servico-config.js sobrescreve as variáveis correspondentes
 * em tempo de execução, a partir de config/tema.json — por isso nenhum
 * outro arquivo CSS deste projeto deve conter uma cor, fonte ou espaçamento
 * "solto": tudo referencia uma variável definida aqui.
 */

:root {
  /* Cores Principais (Paleta Boi Caprichoso) */
  --cor-primaria: #16308a;
  --cor-primaria-contraste: #ffffff;
  --cor-secundaria: #f2ead9;
  --cor-destaque: #0055ff;
  --cor-destaque-glow: rgba(0, 85, 255, 0.4);
  
  /* Cores de Fundo Dark/Glassmorphism */
  --cor-fundo: #090e1a;
  --cor-fundo-cartao: rgba(16, 31, 61, 0.75);
  --cor-cartao-borda: rgba(255, 255, 255, 0.12);
  --cor-cartao-hover: rgba(22, 48, 138, 0.85);
  
  /* Cores de Texto */
  --cor-texto: #f8fafc;
  --cor-texto-suave: #94a3b8;
  --cor-borda: rgba(255, 255, 255, 0.15);
  --cor-foco: #0055ff;
  --cor-erro: #ef4444;
  --cor-sucesso: #22c55e;

  /* Tipografia */
  --fonte-titulo: 'Anton', 'Outfit', sans-serif;
  --fonte-corpo: 'Inter', 'Segoe UI', sans-serif;
  --tamanho-base: 16px;

  /* Espaçamento */
  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 1rem;
  --espaco-4: 1.5rem;
  --espaco-5: 2.5rem;
  --espaco-6: 4rem;

  /* Layout */
  --largura-maxima-conteudo: 1200px;
  --raio-borda: 20px;
  --sombra-cartao: 0 20px 50px rgba(0, 0, 0, 0.5);
  --sombra-destaque: 0 10px 30px rgba(0, 85, 255, 0.4);
  --sombra-glow: 0 0 40px rgba(0, 85, 255, 0.35);

  /* Movimento */
  --duracao-transicao: 200ms;
  --curva-transicao: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-transicao: 0ms;
  }
}