/* Reset, tipografia e body. Sem hex: tudo vem de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }

/* Sem isto, campo de formulario cai para Arial (Windows) ou -apple-system (Mac). */
button, input, select, textarea { font-family: inherit; }

/* hidden vence o display das classes (.vz, .grid): o JS esconde e mostra so pelo atributo. */
[hidden] { display: none !important; }

body {
  font-family: var(--font-corpo);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sora so onde a hierarquia precisa aparecer. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-titulo);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--texto);
}

.topbar .titulo-pagina {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -.02em;
}

.sidebar-marca .marca-nome {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: -.02em;
}

a { color: var(--cor-primaria-texto); }

/* Texto so para leitor de tela. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}