/* Padrões de elemento. Fino de propósito — o estilo mora nos componentes. */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: var(--tipo-corpo);
  color: var(--texto-corpo);
  background: var(--fundo-tela);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--texto-forte);
  font-family: var(--font-display);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tracking-medio);
  text-wrap: pretty;
}
h1 { font: var(--tipo-h1); letter-spacing: var(--tracking-titulo); }
h2 { font: var(--tipo-h2); letter-spacing: var(--tracking-medio); }
h3 { font: var(--tipo-h3); letter-spacing: var(--tracking-curto); }
h4 { font: var(--tipo-h4); letter-spacing: var(--tracking-curto); }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
/* Ênfase é peso 700 no meio da frase — nunca itálico, nunca caixa alta. */
strong, b { font-weight: var(--peso-forte); color: var(--texto-forte); }

a { color: var(--texto-link); text-decoration: none; transition: var(--transicao-controle); }
a:hover { color: var(--texto-link-hover); }
a:focus-visible { outline: none; box-shadow: var(--anel-foco); border-radius: var(--raio-chip); }

hr { border: 0; border-top: 1px solid var(--linha-fina); margin: 24px 0; }

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

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

:focus-visible { outline: none; box-shadow: var(--anel-foco); }

::selection { background: var(--lavender); color: var(--slate); }

/* Dinheiro e contador: numeral tabular sempre, para as colunas alinharem. */
.ct-num { font-variant-numeric: tabular-nums; }

/* Etiqueta de seção — 700, caixa alta, tracking largo, Royal.
   Nos canvases vem acompanhada de um traço de 22×2px em Cornflower. */
.ct-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: var(--tipo-etiqueta);
  letter-spacing: var(--tracking-etiqueta);
  text-transform: uppercase;
  color: var(--texto-marca);
}
.ct-etiqueta::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--cornflower);
  flex: 0 0 auto;
}
/* Sobre faixa escura a etiqueta e o traço viram Light Sky Blue. */
.ct-tinta .ct-etiqueta { color: var(--sky); }
.ct-tinta .ct-etiqueta::before { background: var(--sky); }

/* Rótulo de campo — 400, caixa alta, 10,5px. */
.ct-campo-rotulo {
  font: var(--tipo-campo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  color: var(--texto-corpo);
}

.ct-tinta { background: var(--veu-tinta); color: var(--texto-inverso); }
.ct-tinta h1, .ct-tinta h2, .ct-tinta h3, .ct-tinta h4 { color: var(--texto-inverso); }
.ct-tinta p { color: var(--lavender); }

.ct-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}