/* Base resets + a small set of typography helper classes.
   Components reference tokens directly; these classes are convenience for
   specimen cards, UI kits, and prose. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  color: var(--body);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Type helpers ──────────────────────────────────────────── */
.t-display-xl { font-family: var(--font-display); font-size: var(--display-xl-size); font-weight: var(--display-xl-weight); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); color: var(--ink); }
.t-display-lg { font-family: var(--font-display); font-size: var(--display-lg-size); font-weight: var(--display-lg-weight); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); color: var(--ink); }
.t-display-md { font-family: var(--font-display); font-size: var(--display-md-size); font-weight: var(--display-md-weight); line-height: var(--display-md-lh); letter-spacing: var(--display-md-ls); color: var(--ink); }
.t-title-lg  { font-family: var(--font-display); font-size: var(--title-lg-size); font-weight: var(--title-lg-weight); line-height: var(--title-lg-lh); letter-spacing: var(--title-lg-ls); color: var(--ink); }
.t-title-md  { font-family: var(--font-text); font-size: var(--title-md-size); font-weight: var(--title-md-weight); line-height: var(--title-md-lh); color: var(--ink); }
.t-title-sm  { font-family: var(--font-text); font-size: var(--title-sm-size); font-weight: var(--title-sm-weight); line-height: var(--title-sm-lh); color: var(--ink); }
.t-label     { font-family: var(--font-text); font-size: var(--label-md-size); font-weight: var(--label-md-weight); line-height: var(--label-md-lh); color: var(--ink); }
.t-body      { font-family: var(--font-text); font-size: var(--body-md-size); font-weight: var(--body-md-weight); line-height: var(--body-md-lh); color: var(--body); }
.t-body-strong { font-family: var(--font-text); font-size: var(--body-strong-size); font-weight: var(--body-strong-weight); line-height: var(--body-strong-lh); color: var(--ink); }
.t-caption   { font-family: var(--font-text); font-size: var(--caption-size); font-weight: var(--caption-weight); line-height: var(--caption-lh); letter-spacing: var(--caption-ls); color: var(--muted); }
.t-overline  { font-family: var(--font-text); font-size: var(--overline-size); font-weight: var(--overline-weight); line-height: var(--overline-lh); letter-spacing: var(--overline-ls); text-transform: uppercase; color: var(--muted); }
.t-mono      { font-family: var(--font-mono); }

a { color: var(--link); text-decoration: none; }
a:active { color: var(--link-active); }