/* ============================================================
   type.css — semantic TEXT ROLES. The everyday interface for
   type. Pick a role; it carries font, size, weight, tracking,
   line-height, and a sensible default colour. You should almost
   never set font-size + font-family + weight by hand — reach for
   a role. The raw --fs-* steps in tokens.css are the reference
   layer underneath these.

   Colour adapts to the surface: wrap any dark area in .on-dark
   and every role inside re-colours itself for dark automatically.
   Link this AFTER tokens.css.
   ============================================================ */

:root {
  /* text-colour roles, remapped by .on-dark below */
  --t-strong: var(--text); /* headings, primary */
  --t-body: var(--text-body); /* running copy */
  --t-muted: var(--text-muted); /* labels, meta, secondary */
}
.on-dark {
  --t-strong: var(--text-on-dark);
  --t-body: var(--text-on-dark);
  --t-muted: var(--text-muted-on-dark);
}

/* ── DISPLAY  (≈ h1) — page / hero statements ──────────────
   For the very biggest lines, scale up with the modifiers. */
.t-display {
  font-family: "Nagel", sans-serif;
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--t-strong);
}
.t-display--lg {
  font-size: var(--fs-display-lg);
}
.t-display--hero {
  font-size: var(--fs-mega);
  letter-spacing: -0.035em;
  line-height: 0.9;
}

/* ── TITLE  (≈ h2) — section & case titles ── */
.t-title {
  font-family: "Nagel", sans-serif;
  font-weight: 500;
  font-size: var(--fs-heading-sm);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--t-strong);
}
.t-title--lg {
  font-size: var(--fs-heading);
}

/* ── SUBTITLE  (≈ h3) — smaller headings ── */
.t-subtitle {
  font-family: "Nagel", sans-serif;
  font-weight: 500;
  font-size: var(--fs-subhead);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--t-strong);
}

/* ── LEAD  (≈ h4 / standfirst) — slogans, intros ── */
.t-lead {
  font-family: "Nagel", sans-serif;
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.15;
  color: var(--t-strong);
}

/* ── BODY  (≈ p) — paragraphs ── */
.t-body {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--t-body);
}
.t-body--lg {
  font-size: var(--fs-body-lg);
}

/* ── CAPTION  (≈ small) — meta, fine print ── */
.t-caption {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--t-muted);
}

/* ── LABEL  (≈ overline / eyebrow) — eyebrows, nav, kickers ──
   The tracked uppercase micro-label. .t-kicker is the same, a
   touch heavier and wider, to anchor the top of a section. */
.t-label {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-muted);
}
.t-kicker {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 500;
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-muted);
}