/* Base resets + typographic tier helper classes.
   Reference tokens only — never hardcoded hex. */

* { box-sizing: border-box; }

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

/* ---- Display tier ---- */
.t-display-xxl { font-weight: var(--weight-display); font-size: var(--display-xxl-size); line-height: var(--display-xxl-lh); letter-spacing: var(--display-xxl-ls); }
.t-display-xl  { font-weight: var(--weight-display); font-size: var(--display-xl-size);  line-height: var(--display-xl-lh);  letter-spacing: var(--display-xl-ls); }
.t-display-lg  { font-weight: var(--weight-display); font-size: var(--display-lg-size);  line-height: var(--display-lg-lh);  letter-spacing: var(--display-lg-ls); }
.t-display-md  { font-weight: var(--weight-display); font-size: var(--display-md-size);  line-height: var(--display-md-lh);  letter-spacing: var(--display-md-ls); }

/* ---- Headings ---- */
.t-heading-lg { font-weight: var(--weight-display); font-size: var(--heading-lg-size); line-height: var(--heading-lg-lh); }
.t-heading-md { font-weight: var(--weight-display); font-size: var(--heading-md-size); line-height: var(--heading-md-lh); }

/* ---- Body ---- */
.t-body-lg { font-weight: var(--weight-body); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.t-body-md { font-weight: var(--weight-body); font-size: var(--body-md-size); line-height: var(--body-md-lh); }

/* ---- UI / micro ---- */
.t-button   { font-weight: var(--weight-display); font-size: var(--button-md-size); line-height: var(--button-md-lh); }
.t-caption  { font-weight: var(--weight-body); font-size: var(--caption-size); line-height: var(--caption-lh); }
.t-micro    { font-weight: var(--weight-body); font-size: var(--micro-size); line-height: var(--micro-lh); }
.t-code     { font-variant-numeric: tabular-nums; font-weight: var(--weight-body); font-size: var(--code-size); line-height: var(--code-lh); }