/* base.css : reset + tipografia + body (Sistema_de_Estilos) */

*, *::before, *::after { box-sizing: border-box; }

/* O atributo `hidden` some por padrao (UA stylesheet), mas QUALQUER classe com
   display:flex/grid do proprio autor (ex.: .vz, .modal, cards flex) bate essa
   regra no cascade -- author sempre vence UA, mesmo com especificidade igual.
   Sem isso, `el.hidden = true` em elemento com essas classes fica visivel do
   mesmo jeito (achado ao vivo: .vz/.vz-inline do Padrao_Estado_Vazio
   renderizava a caixa "Nenhum..." por baixo de tabelas com dado real). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-3);
}

a { color: var(--accent-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

input, select, textarea, button { font: inherit; color: inherit; }

/* ----- Icones Phosphor: tamanho e cor via CSS, nunca inline ----- */
.icon { font-size: 1.1rem; line-height: 1; display: inline-flex; vertical-align: middle; }
.icon-sm { font-size: 0.9rem; }
.icon-md { font-size: 1.25rem; }
.icon-lg { font-size: 1.75rem; }
.icon-xl { font-size: 2.5rem; }

.icon-accent  { color: var(--accent); }
.icon-success { color: var(--success); }
.icon-danger  { color: var(--danger); }
.icon-muted   { color: var(--text-dim); }