/* Gabarita · base.css — reset, tipografia, foco, ícone, grifo. Origem: referencia-visual/componentes.css (BASE). */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--topo-altura) + var(--esp-4));
    hanging-punctuation: first last;
  }

  body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-ui);
    font-size: var(--texto-md);
    line-height: var(--altura-ui);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }

  h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--fonte-display);
    font-weight: var(--peso-negrito);
    line-height: var(--altura-titulo);
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  h1 { font-size: var(--texto-3xl); font-weight: var(--peso-extra); letter-spacing: -0.03em; }
  h2 { font-size: var(--texto-2xl); }
  h3 { font-size: var(--texto-xl); }
  h4 { font-size: var(--texto-lg); }

  p { margin: 0; text-wrap: pretty; }
  a { color: var(--link); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }

  ::selection { background: var(--selecao); color: var(--tinta-900); }

  /* Foco: anel de tinta com folga — visível em qualquer fundo claro */
  :focus-visible {
    outline: 3px solid var(--foco-anel);
    outline-offset: 3px;
  }
  :focus:not(:focus-visible) { outline: none; }

  .sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .pular-para-conteudo {
    position: absolute; left: var(--esp-4); top: var(--esp-2); z-index: var(--z-tooltip);
    padding: var(--esp-2) var(--esp-4); border-radius: var(--raio-sm);
    background: var(--marca-500); color: var(--tinta-900); font-weight: 700;
    translate: 0 -200%;
  }
  .pular-para-conteudo:focus { translate: 0 0; }

  /* Ícone do sprite: o traço vem daqui, não do símbolo */
  .icone {
    width: 1.5rem; height: 1.5rem; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    overflow: visible;
  }
  .icone--xs { width: 1rem; height: 1rem; stroke-width: 2.4; }
  .icone--sm { width: 1.125rem; height: 1.125rem; stroke-width: 2.2; }
  .icone--lg { width: 2rem; height: 2rem; }
  .icone--xl { width: 3rem; height: 3rem; stroke-width: 1.75; }

  /* Números que mudam não podem fazer o texto dançar */
  .numeros { font-variant-numeric: tabular-nums; }

  /* Grifo de marca-texto atrás de uma palavra de título (assinatura visual) */
  .grifo {
    padding-inline: 0.12em;
    margin-inline: -0.12em;
    background-image: linear-gradient(102deg,
      transparent 0.2em, var(--grifo-cor, var(--marca-300)) 0.3em,
      var(--grifo-cor, var(--marca-300)) calc(100% - 0.35em), transparent calc(100% - 0.2em));
    background-repeat: no-repeat;
    background-position: 0 88%;
    background-size: 100% 0.52em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /* Fundo de caderno pontilhado — só em telas de navegação, nunca atrás de enunciado */
  .fundo-pontilhado {
    background-color: var(--fundo);
    background-image: radial-gradient(var(--pontilhado) 1.3px, transparent 1.6px);
    background-size: 22px 22px;
    background-position: -11px -11px;
  }
}