/* Base: normalização mínima, os seis níveis tipográficos e o foco visível.
 * Nenhum valor literal — só tokens de tokens.css (EF-07 §1.3 e §1.4). */

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

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

body {
  background: var(--cor-fundo-base);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: var(--tamanho-corpo);
  line-height: var(--entrelinha-corpo);
  font-weight: var(--peso-normal);
  /* Número de largura fixa em toda a aplicação: coluna de dinheiro que dança
   * na vertical é ilegível (EF-07 §1.3). */
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
p,
figure,
ul,
ol,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img,
svg {
  max-width: 100%;
}

/* ---- Os seis níveis tipográficos. Nenhum sétimo (EF-07 §1.3). ---- */

.titulo-tela {
  font-size: var(--tamanho-titulo-tela);
  line-height: var(--entrelinha-titulo-tela);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-forte);
}

.titulo-secao {
  font-size: var(--tamanho-titulo-secao);
  line-height: var(--entrelinha-titulo-secao);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-forte);
}

.corpo {
  font-size: var(--tamanho-corpo);
  line-height: var(--entrelinha-corpo);
  font-weight: var(--peso-normal);
}

.corpo-forte {
  font-size: var(--tamanho-corpo);
  line-height: var(--entrelinha-corpo);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-forte);
}

.legenda {
  font-size: var(--tamanho-legenda);
  line-height: var(--entrelinha-legenda);
  font-weight: var(--peso-normal);
  color: var(--cor-texto-fraco);
}

.numero-grande {
  font-size: var(--tamanho-numero-grande);
  line-height: var(--entrelinha-numero-grande);
  font-weight: var(--peso-forte);
  color: var(--cor-texto-forte);
}

/* Caixa alta só em etiqueta, com espaçamento de letra (EF-07 §1.3, valor do
 * desenho pela emenda 57 de 20/08/2026). Nada em itálico — não há classe. */
.rotulo-caixa-alta {
  font-size: var(--tamanho-rotulo-caixa-alta);
  line-height: var(--entrelinha-rotulo-caixa-alta);
  font-weight: var(--peso-forte);
  text-transform: uppercase;
  letter-spacing: var(--espacamento-caixa-alta);
  color: var(--cor-texto-fraco);
}

/* Largura máxima de coluna de texto corrido — nunca vale para tabela. */
.texto-corrido {
  max-width: var(--largura-texto-corrido);
}

/* ---- Utilitários de espaçamento — só valores da escala base 4 (§1.4).
       Existem para que nenhuma tela escreva `style="margin: 20px"`. ---- */

.espaco-abaixo-2 {
  margin-bottom: var(--e-2);
}

.espaco-abaixo-3 {
  margin-bottom: var(--e-3);
}

.espaco-abaixo-4 {
  margin-bottom: var(--e-4);
}

.espaco-abaixo-6 {
  margin-bottom: var(--e-6);
}

.espaco-acima-3 {
  margin-top: var(--e-3);
}

.espaco-acima-4 {
  margin-top: var(--e-4);
}

.pilha-2,
.pilha-3,
.pilha-4 {
  display: flex;
  flex-direction: column;
}

.pilha-2 {
  gap: var(--e-2);
}

.pilha-3 {
  gap: var(--e-3);
}

.pilha-4 {
  gap: var(--e-4);
}

/* ---- Foco visível em tudo que recebe foco ---- */

:focus-visible {
  outline: var(--traco-foco) solid var(--cor-acao);
  outline-offset: var(--e-1);
  border-radius: var(--raio-etiqueta);
}

/* Pular para o conteúdo: primeiro item de tabulação de toda tela. */
.pular-para-conteudo {
  position: absolute;
  left: var(--e-2);
  top: calc(var(--e-2) * -8);
  z-index: 3;
  background: var(--cor-superficie);
  color: var(--cor-acao);
  padding: var(--e-2) var(--e-3);
  border: var(--traco-foco) solid var(--cor-acao);
  border-radius: var(--raio);
  transition: top var(--transicao);
}

.pular-para-conteudo:focus {
  top: var(--e-2);
}

a {
  color: var(--cor-acao);
}

/* Só para leitor de tela: usado onde a semântica nativa não basta. */
.so-leitor-de-tela {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}