/* Fonte de verdade do visual. Somente variaveis: nenhuma regra de estilo aqui. */
:root {
  /* Cores da marca — extraidas do logotipo */
  --azul-royal:    #2B4EA2;
  --azul-royal-dk: #1E3A7D;
  --vermelho:      #E23B2E;
  --vermelho-dk:   #C42A1E;
  --amarelo:       #FFD84D;
  --azul-bebe:     #B9DFF5;
  --marrom-urso:   #D9A66C;
  --rosa-bochecha: #F4A0A0;
  --verde-sucesso: #2BA84A;

  /* Neutros */
  --branco:      #FFFFFF;
  --off-white:   #F7FAFD;
  --cinza-texto: #3A4250;
  --cinza-suave: #7A8698;
  --cinza-borda: #E3E8EF;

  /* Tipografia */
  --fonte-titulo: 'Baloo 2', system-ui, sans-serif;
  --fonte-texto:  'Nunito', system-ui, sans-serif;

  /* Escala de tipo — valores de mobile */
  --t-hero:  1.75rem;   /* 28px */
  --t-h2:    1.25rem;   /* 20px */
  --t-corpo: 0.9375rem; /* 15px */
  --t-mini:  0.8125rem; /* 13px */

  /* Espacamento — escala de 4px */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px;
  --e-4: 16px; --e-6: 24px; --e-8: 32px; --e-12: 48px;

  /* Formas — arredondado, coerente com o logo */
  --raio-card: 16px;
  --raio-btn:  999px;
  --raio-chip: 999px;

  /* Sombras — suaves, nunca duras */
  --sombra-card: 0 2px 8px rgba(43, 78, 162, 0.08);
  --sombra-cta:  0 4px 14px rgba(226, 59, 46, 0.32);

  /* Alturas fixas */
  --h-header: 56px;
  --h-cta:    64px;
}

@media (min-width: 768px) {
  :root {
    --t-hero:  2.5rem;
    --t-h2:    1.5rem;
    --t-corpo: 1rem;
  }
}