/* base.css — reset, fontes, tipografia, links, foco, seleção e utilidades mínimas (C §2.2, §3.2, §3.7; M02).
   Só tokens: nenhuma cor literal (V07); espaçamentos e raios por var(--sp-*) / var(--r-*) (V06). */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; }
  body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
  ol[role="list"], ul[role="list"], ol[class], ul[class] { list-style: none; padding: 0; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  img, video { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  button:disabled { cursor: not-allowed; }
  textarea { resize: vertical; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
  dialog { padding: 0; border: 0; color: inherit; }
  summary { cursor: pointer; }
  :target { scroll-margin-block: calc(var(--topbar) + var(--sp-4)); }
}

@layer base {
  /* Fontes próprias (latin cobre todo o pt-BR; OFL). As de reserva medidas vêm do tokens.css. */
  @font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('/assets/estaveis/fontes/v1/plus-jakarta-sans-var-latin.woff2') format('woff2'); }
  @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('/assets/estaveis/fontes/v1/literata-var-latin.woff2') format('woff2'); }
  @font-face { font-family: 'Literata'; font-style: italic; font-weight: 400 700; font-display: swap;
    src: url('/assets/estaveis/fontes/v1/literata-italic-var-latin.woff2') format('woff2'); }
  @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('/assets/estaveis/fontes/v1/jetbrains-mono-var-latin.woff2') format('woff2'); }
  @font-face { font-family: 'Atkinson Hyperlegible Next'; font-style: normal; font-weight: 200 800; font-display: swap;
    src: url('/assets/estaveis/fontes/v1/atkinson-hyperlegible-next-var-latin.woff2') format('woff2'); }

  html {
    font-family: var(--font-ui);
    font-size: 100%;
    line-height: var(--lh-ui);
    color: var(--text);
    background: var(--bg);
    scroll-padding-top: calc(var(--topbar) + var(--sp-4));
    scroll-padding-bottom: calc(var(--bottomnav) + var(--sp-4));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    hanging-punctuation: first last;
  }
  @media (min-width: 768px) { html { scroll-padding-bottom: var(--sp-4); } }
  @media (min-width: 2560px) { html:not([data-modo="tv"]) { font-size: 112.5%; } }
  @media (min-width: 3200px) { html:not([data-modo="tv"]) { font-size: 125%; } }

  :root[data-leitura="1"] { --fs-read: 1rem; }
  :root[data-leitura="2"] { --fs-read: 1.0625rem; }
  :root[data-leitura="4"] { --fs-read: 1.25rem; }
  :root[data-leitura="5"] { --fs-read: 1.375rem; }
  :root[data-fonte="legivel"] { --font-ui: var(--font-legivel); --font-read: var(--font-legivel); }

  /* Espaço entre palavras (RD 23/09): o espaço da Plus Jakarta Sans tem só 0,17 em e as palavras quase encostam.
     A propriedade guarda o valor em em sem resolver, então cada elemento calcula com o próprio tamanho de fonte
     (word-spacing herdado direto viraria px do html). Atkinson (0,28 em) e as monoespaçadas ficam sem acréscimo. */
  :root { --espaco-palavras: .06em; --espaco-palavras-titulo: .08em; --espaco-palavras-leitura: .03em; }
  :root[data-fonte="legivel"] { --espaco-palavras: 0em; --espaco-palavras-titulo: .02em; --espaco-palavras-leitura: 0em; }
  *, *::before, *::after { word-spacing: var(--espaco-palavras); }
  h1, h2, h3, h4, .marca__nome, .cartao__titulo, .cartao-acao__titulo, .cartao-capa__titulo { word-spacing: var(--espaco-palavras-titulo); }
  .leitura, .leitura * { word-spacing: var(--espaco-palavras-leitura); }
  code, kbd, pre, samp, pre * { word-spacing: normal; }
  /* Safari e todos os navegadores do iPhone (WebKit; detectado por hanging-punctuation, que só o WebKit implementa):
     a largura intrínseca (max-content) ignora o word-spacing, então botões, chips, títulos em linha e itens flex ficavam
     estreitos demais e o texto quebrava ou vazava ("Ver planos", "Começar diagnóstico", "Esqueci minha senha" — Roger,
     24/09). No WebKit o acréscimo fica só na leitura longa, que ocupa a largura do bloco. */
  @supports (hanging-punctuation: first) {
    *, *::before, *::after, h1, h2, h3, h4, .marca__nome, .cartao__titulo, .cartao-acao__titulo, .cartao-capa__titulo { word-spacing: normal; }
    .leitura, .leitura * { word-spacing: var(--espaco-palavras-leitura); }
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    font-size: var(--fs-base);
    background: var(--bg);
    color: var(--text);
    overflow-x: clip;
  }

  h1, h2, h3, h4 { font-weight: 800; line-height: var(--lh-tight); letter-spacing: -0.02em; text-wrap: balance; color: var(--text); }
  h1 { font-size: var(--fs-xl); }
  h2 { font-size: var(--fs-lg); letter-spacing: -0.005em; }
  h3 { font-size: var(--fs-md); font-weight: 700; letter-spacing: 0; }
  h4 { font-size: var(--fs-base); font-weight: 700; letter-spacing: 0; }
  p { text-wrap: pretty; }
  small { font-size: var(--fs-sm); }
  strong, b { font-weight: 700; }

  a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out); }
  a:hover { text-decoration-color: currentColor; }

  :focus { outline: none; }
  :focus-visible { outline: var(--foco-largura) solid var(--ring); outline-offset: var(--foco-distancia); border-radius: var(--r-sm); }

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

  kbd {
    font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; line-height: 1;
    display: inline-flex; align-items: center; min-width: 1.6em; justify-content: center;
    padding: var(--sp-1) var(--sp-1); border-radius: var(--r-xs);
    background: var(--surface-2); color: var(--text-2);
    box-shadow: inset 0 -1px 0 var(--border-strong), 0 0 0 1px var(--border);
  }
  code, samp { font-family: var(--font-mono); font-size: .92em; }
  hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
  abbr[title] { text-decoration: underline dotted; cursor: help; }

  /* Leitura (enunciado, alternativas, comentários, lei) — C §3.2. */
  /* Textos de estudo usam a largura toda e justificados (pedido do Roger 24/09: o limite de 68ch deixava metade do cartão vazia). */
  .leitura { font-family: var(--font-read); font-size: var(--fs-read); line-height: var(--lh-read); text-align: justify; hyphens: auto; text-wrap: pretty; }
  /* celular (M26, 23/09): hifenização automática em coluna estreita quebrava palavras demais ("compare-ceu", "Itapo-ranga") */
  @media (max-width: 559.98px) { .leitura, .alt .txt { hyphens: manual; } }
  .leitura strong, .leitura b { font-weight: 600; }
  .leitura p + p { margin-top: var(--sp-3); }

  /* Ícone do sprite (C §3.9). */
  .i { width: var(--i-tam); height: var(--i-tam); flex: none; display: inline-block; vertical-align: -0.25em; color: inherit; }
  .i-sm { width: 1em; height: 1em; }
  .i-lg { width: 1.5em; height: 1.5em; }
  .i-xl { width: 2em; height: 2em; }

  /* Algarismos tabulares só onde a spec pede (tabelas, cronômetro, cartão-resposta, eixos, contadores). */
  .num-tab, table td.num, table th.num { font-variant-numeric: tabular-nums; }
}

@layer utilities {
  .sr, .sr-only {
    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;
  }
  .pular {
    position: absolute; left: var(--sp-4); top: var(--sp-2); z-index: var(--z-tooltip);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
    background: var(--text); color: var(--bg); font-weight: 700; text-decoration: none;
    transform: translateY(-200%); transition: transform var(--dur-2) var(--ease-out);
  }
  .pular:focus-visible { transform: translateY(0); }
  .sobrelinha { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
  .texto-2 { color: var(--text-2); }
  .texto-3 { color: var(--text-3); }
  .truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .pilha > * + * { margin-top: var(--sp-4); }
  .pilha-sm > * + * { margin-top: var(--sp-2); }
  .pilha-lg > * + * { margin-top: var(--sp-8); }
  .linha { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
  .linha-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
  .cresce { flex: 1 1 auto; min-width: 0; }
}