/* PedeBis: base tipográfica e utilitários do design system v1 (02 §3).
   Entra depois de tokens.css. Não posiciona nada: só fonte, peso, tamanho. */

body { font-family: var(--font-body); }

h1, h2, h3, .h-display, .h-tela, .h-secao {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
}

/* Display grande: nome da banda, "Onde tem música hoje?", "Tocaram a sua." */
.h-display { font-size: clamp(34px, 9vw, 44px); line-height: 0.95; letter-spacing: -0.03em; margin: 0; }
/* Título de tela */
.h-tela { font-size: clamp(28px, 7.5vw, 34px); line-height: 1; margin: 0; }
/* Título de seção */
.h-secao { font-size: 20px; line-height: 1.1; margin: 0; }

/* Rótulo pequeno em caixa alta (eyebrow): em --fg-muted, ou --accent quando
   antecede uma ação, ou --live quando é "tocando agora" / "ao vivo". */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--fg-muted);
}
.eyebrow.acao { color: var(--accent); }
.eyebrow.vivo { color: var(--vivo); }

/* Número grande (stat, valor) */
.num { font-family: var(--font-display); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Texto secundário */
.muted { color: var(--fg-muted); }

/* Valores monetários e horas alinhados em listas */
.tabular { font-variant-numeric: tabular-nums; }

/* Foco visível em tudo que é clicável (alvo mínimo 44 px fica nos componentes) */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Movimento: só quando a pessoa aceita */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}