/* base.css: o que a home e a /links compartilham (design-system.md §2–§4). Só tokens de build/tokens.css; nenhuma cor
   ou família literal. Breakpoints (§3.1): sm 480, md 768, lg 1024, xl 1280. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background-color: var(--cor-pagina);
  /* §3.4: papel com a grade pontilhada da DA, fixa (sem paralaxe) */
  background-image: radial-gradient(circle, var(--cor-grade) 1px, transparent 1.5px);
  background-size: var(--grade-passo) var(--grade-passo);
  background-attachment: fixed;
  scroll-padding-top: calc(var(--header) + var(--esp-4));
}
body {
  min-height: 100vh;
  color: var(--cor-texto);
  font-family: var(--da-fonte-corpo);
  font-weight: var(--fw-corpo);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

/* ── tipografia (§2.2) ─────────────────────────────────────────────────────────────────────────────────────────── */
h1, .display {
  font-family: var(--da-fonte-titulo); font-weight: var(--fw-display); text-transform: var(--tt-display);
  font-size: var(--fs-display); line-height: var(--lh-display);
}
h2 {
  font-family: var(--da-fonte-titulo); font-weight: var(--fw-h2); text-transform: var(--tt-h2);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
}
h3, .h3 {
  font-family: var(--da-fonte-subtitulo); font-weight: var(--fw-h3); text-transform: var(--tt-h3);
  font-size: var(--fs-h3); line-height: var(--lh-h3);
}
.h3-destaque {
  font-family: var(--da-fonte-subtitulo); font-weight: var(--fw-h3-destaque); text-transform: var(--tt-h3-destaque);
  font-size: var(--fs-h3-destaque); line-height: var(--lh-h3-destaque);
}
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.nota { font-size: var(--fs-nota); line-height: var(--lh-nota); color: var(--cor-texto-suave); }
.sobretitulo {
  font-family: var(--da-fonte-dados); font-weight: var(--fw-sobretitulo); font-size: var(--fs-sobretitulo);
  line-height: var(--lh-sobretitulo); text-transform: uppercase; letter-spacing: .04em;
}

/* ── grifos (§2.5): retângulo amarelo de cantos retos; se estende da esquerda para a direita (§5.10) ─────────────── */
.grifo {
  background-image: linear-gradient(var(--cor-destaque), var(--cor-destaque));
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.grifo--texto { background-size: 100% 55%; background-position: 0 88%; padding-inline: .1em; margin-inline: -.1em; }
.grifo--titulo { background-size: 100% .18em; background-position: 0 100%; padding-bottom: .06em; }
.js .grifo[data-grifo] { transition: background-size var(--dur-media) var(--curva-entrada); }
.js .grifo--texto[data-grifo]:not(.visto) { background-size: 0 55%; }
.js .grifo--titulo[data-grifo]:not(.visto) { background-size: 0 .18em; }

/* ── utilitários ───────────────────────────────────────────────────────────────────────────────────────────────── */
.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.container {
  width: 100%; max-width: calc(var(--container) + 2 * var(--margem));
  margin-inline: auto; padding-inline: var(--margem);
}
:focus-visible { outline: var(--borda-forte) solid var(--cor-foco); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ── ícones (§2.3) ─────────────────────────────────────────────────────────────────────────────────────────────── */
.icone { width: 1.25rem; height: 1.25rem; flex: none; }
.icone--vazio { display: inline-block; }

/* ── botões (§4.2) ─────────────────────────────────────────────────────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
  min-height: 3rem; padding: 0 1.25rem;
  border: var(--borda) solid var(--cor-borda); border-radius: var(--raio);
  font-family: var(--da-fonte-dados); font-weight: var(--fw-botao); font-size: var(--fs-botao); line-height: var(--lh-botao);
  color: var(--cor-texto); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color var(--dur-micro) var(--curva-suave), transform var(--dur-micro) var(--curva-suave);
}
.botao > span { text-decoration: underline transparent 1px; text-underline-offset: 3px; transition: text-decoration-color var(--dur-micro) var(--curva-suave); }
.botao .icone--arrow-up-right { transition: transform var(--dur-micro) var(--curva-suave); }
.botao--primario { background-color: var(--cor-destaque); color: var(--cor-sobre-destaque); }
.botao--secundario { background-color: var(--cor-pagina); }
.botao--lg { min-height: 3.5rem; padding: 0 var(--esp-5); font-size: 1.0625rem; }
.botao--lg .icone { width: 1.5rem; height: 1.5rem; }
.botao:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .botao:hover > span { text-decoration-color: currentColor; }
  .botao:hover .icone--arrow-up-right { transform: translate(2px, -2px); }
  .botao--secundario:hover { background-color: var(--cor-superficie); }
}
.botao[aria-busy="true"], .botao[aria-disabled="true"] { cursor: not-allowed; }
.botao[aria-disabled="true"] { background-color: var(--cor-superficie); border-color: var(--cor-divisor); color: var(--cor-texto-suave); }

/* ── link de texto (§4.1): sublinhado de 1 px que vira grifo no hover ───────────────────────────────────────────── */
.link {
  display: inline-flex; align-items: center; gap: var(--esp-1);
  font-family: var(--da-fonte-dados); font-weight: var(--fw-nav); font-size: var(--fs-nota);
  text-decoration: none;
  background-image: linear-gradient(var(--cor-texto), var(--cor-texto));
  background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%;
  transition: background-size var(--dur-curta) var(--curva-entrada);
}
.link .icone { width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { background-image: linear-gradient(var(--cor-destaque), var(--cor-destaque)); background-size: 100% .18em; }
}

/* ── botão de ícone (§4.2): 44 × 44 ────────────────────────────────────────────────────────────────────────────── */
.botao-icone {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: var(--raio); background: none; color: var(--cor-texto); cursor: pointer;
  transition: background-color var(--dur-micro) var(--curva-suave);
}
.botao-icone .icone { width: 1.5rem; height: 1.5rem; }
@media (hover: hover) and (pointer: fine) { .botao-icone:hover { background-color: var(--cor-superficie); } }

/* ── cores das ilustrações e da marca (SVG inline: classe → token; nada de cor literal) ─────────────────────────── */
.f-fundo { fill: var(--da-cor-fundo); }          .s-fundo { stroke: var(--da-cor-fundo); }
.f-superficie { fill: var(--da-cor-superficie); } .s-superficie { stroke: var(--da-cor-superficie); }
.f-texto { fill: var(--da-cor-texto); }          .s-texto { stroke: var(--da-cor-texto); }
.f-texto-suave { fill: var(--da-cor-texto-suave); } .s-texto-suave { stroke: var(--da-cor-texto-suave); }
.f-secundaria { fill: var(--da-cor-secundaria); } .s-secundaria { stroke: var(--da-cor-secundaria); }
.f-primaria { fill: var(--da-cor-primaria); }    .s-primaria { stroke: var(--da-cor-primaria); }
.ilustracao { width: 100%; height: auto; }

/* ── modos (§5.10, §5.11) ──────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .js .grifo--texto[data-grifo]:not(.visto) { background-size: 100% 55%; }
  .js .grifo--titulo[data-grifo]:not(.visto) { background-size: 100% .18em; }
}
@media (forced-colors: active) {
  .grifo, .link { background-image: none; text-decoration: underline; text-underline-offset: 3px; }
  .botao, .botao-icone { border: var(--borda) solid ButtonText; }
  .f-primaria, .f-secundaria, .f-superficie { fill: Canvas; }
}