/* Único arquivo que declara cor. Template e CSS de página usam só var(--...). */
:root {
  /* Marca */
  --accent: #213c51;
  --accent-hover: #3c5366;
  --accent-soft: #1c3244;

  /* Fundo e superfície (azul da marca misturado com preto) */
  --bg: #0F1B24;
  --bg-elev: #172A39;
  --border: #495F70;

  /* 2ª cor: prata é a ação (botão, link, foco) */
  --prata: #CBD0D6;
  --prata-hover: #E5E8EA;

  /* Fundo claro dos logos de parceiros: logo de qualquer cor fica legível sobre o tema dark */
  --chip: #E9ECEF;

  /* Texto. --text-dim só sobre --bg ou --bg-elev, nunca sobre --accent */
  --text: #F2F4F6;
  --text-dim: #98A4AE;

  /* Tipografia */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Sora", "Inter", sans-serif;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3rem);

  /* Escala de espaço: a vault vai até --sp-6; --sp-7 e --sp-8 são decisão do projeto (site de marketing) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  /* Forma */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --transicao: 160ms ease;

  /* Medidas de layout */
  --topbar-h: 88px;
  --logo-h: 64px;
  --container: 1120px;
  --alvo-toque: 44px;
}

@media (max-width: 720px) {
  :root {
    --topbar-h: 72px;
    --logo-h: 50px;
  }
}