/* 10-vars-base.css — Variáveis, reset, body, keyframes */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --azul: #1565C0; --azul-escuro: #0D47A1; --azul-claro: #E3F2FD;
  --verde: #2E7D32; --verde-claro: #E8F5E9;
  --amarelo: #F57F17; --amarelo-claro: #FFF8E1;
  --teal: #00796B; --teal-claro: #E0F2F1;
  --vermelho: #C62828; --vermelho-claro: #FFEBEE;
  --roxo: #5E35B1; --roxo-claro: #EDE7F6;
  --laranja: #E65100; --laranja-claro: #FFF3E0;
  --cinza-900: #212121; --cinza-700: #616161; --cinza-500: #9E9E9E;
  --cinza-300: #E0E0E0; --cinza-100: #F5F5F5; --cinza-50: #FAFAFA;
  --radius: 10px; --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body { font-family: var(--font); color: var(--cinza-900); background: var(--cinza-100); line-height: 1.5; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:.4} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }

[hidden] { display: none !important; }