/* TRUST Lab — minimal base + utility classes used by cards, kits and slides. */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  font-weight: var(--text-body-weight);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--tl-cyan-400); color: var(--tl-ink-950); }

/* Type utilities (mirror the token scale) */
.tl-display { font-size: var(--text-display-size); line-height: var(--text-display-lh); font-weight: var(--text-display-weight); letter-spacing: var(--text-display-tracking); }
.tl-h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-lh); font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-tracking); }
.tl-h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-lh); font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-tracking); }
.tl-h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-lh); font-weight: var(--text-h3-weight); }
.tl-h4 { font-size: var(--text-h4-size); line-height: var(--text-h4-lh); font-weight: var(--text-h4-weight); }
.tl-lede { font-size: var(--text-lede-size); line-height: var(--text-lede-lh); font-weight: var(--text-lede-weight); }
.tl-body { font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--text-body-weight); }
.tl-small { font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.tl-caption { font-size: var(--text-caption-size); line-height: var(--text-caption-lh); color: var(--text-secondary); }
.tl-eyebrow {
  font-size: var(--text-eyebrow-size); line-height: var(--text-eyebrow-lh);
  font-weight: var(--text-eyebrow-weight); letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase; color: var(--text-accent);
}
.tl-eyebrow--inverse { color: var(--text-accent-inverse); }
.tl-micro { font-size: var(--text-micro-size); line-height: var(--text-micro-lh); font-weight: var(--text-micro-weight); letter-spacing: var(--text-micro-tracking); text-transform: uppercase; }
.tl-stat { font-size: var(--text-stat-size); line-height: var(--text-stat-lh); font-weight: var(--text-stat-weight); letter-spacing: var(--text-stat-tracking); }
.tl-mono { font-family: var(--font-mono); font-size: var(--text-mono-size); line-height: var(--text-mono-lh); }

/* Pixel accents — squares drawn from the logo's pixel blocks */
.tl-pixel { display: inline-block; width: 10px; height: 10px; background: var(--tl-cyan-400); }
.tl-pixel--blue { background: var(--tl-blue-600); }
.tl-pixel--yellow { background: var(--tl-yellow-300); }