/* base · reset, tipografia e as classes de texto.
   Nenhum hex aqui, só token semântico. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-ui); font-size:var(--fs-body); line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,canvas{display:block; max-width:100%}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); text-wrap:balance}
p,ul,ol,figure{margin:0}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
code,kbd{font-family:var(--font-mono); font-size:.88em}
::selection{background:var(--accent-weak); color:var(--text)}
:focus-visible{outline:2px solid var(--border-focus); outline-offset:3px; border-radius:var(--r-xs)}
[hidden]{display:none !important}

.skip{position:fixed; left:12px; top:-70px; z-index:var(--z-toast);
  background:var(--surface-overlay); color:var(--text); padding:11px 18px;
  border:1px solid var(--border-strong); border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:var(--fw-med); transition:top var(--t-base)}
.skip:focus{top:12px}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0}

/* ---- escala editorial ---- */
.t-hero{font-weight:var(--fw-air); font-size:var(--fs-hero); line-height:var(--lh-tight);
  letter-spacing:var(--tr-hero)}
.t-h1{font-weight:var(--fw-air); font-size:var(--fs-h1); line-height:var(--lh-snug);
  letter-spacing:var(--tr-h1)}
.t-h2{font-weight:var(--fw-light); font-size:var(--fs-h2); line-height:var(--lh-snug);
  letter-spacing:var(--tr-h2)}
.t-h3{font-weight:var(--fw-med); font-size:var(--fs-h3); line-height:1.3;
  letter-spacing:var(--tr-h3)}
.t-h4{font-weight:var(--fw-semi); font-size:var(--fs-h4); letter-spacing:-.01em}
.t-lead{font-size:var(--fs-lead); line-height:var(--lh-relaxed); color:var(--text-2);
  max-width:var(--measure-lead); font-weight:var(--fw-light)}
.t-body{font-size:var(--fs-body); line-height:var(--lh-relaxed); color:var(--text-2);
  max-width:var(--measure)}
.t-sm{font-size:var(--fs-sm); line-height:var(--lh-normal); color:var(--text-2)}
.t-xs{font-size:var(--fs-xs); line-height:var(--lh-normal); color:var(--text-3)}

/* ---- rótulo técnico ---- */
.t-kicker{font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:var(--tr-kicker);
  text-transform:uppercase; color:var(--accent); display:block; font-weight:var(--fw-book)}
.t-label{font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:var(--tr-label);
  text-transform:uppercase; color:var(--text-3); display:block; font-weight:var(--fw-book)}
.t-num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:var(--fw-med);
  letter-spacing:-.01em}
.t-grad{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  color:transparent}

/* ---- utilitário de fluxo ---- */
.stack{display:flex; flex-direction:column}
.stack-2{gap:var(--s-2)}.stack-3{gap:var(--s-3)}.stack-4{gap:var(--s-4)}
.stack-5{gap:var(--s-5)}.stack-6{gap:var(--s-6)}.stack-7{gap:var(--s-7)}
.row{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap}
.grow{flex-grow:1}
.muted{color:var(--text-3)}