/* =====================================================================
   IHA Spaces — Type style utilities
   Use as utility classes. Components reference these, not raw tokens.
   ===================================================================== */

/* ---------- Display (editorial, EB Garamond) ---------- */

.text-display-xl {
  font-family: var(--font-serif);
  font-size: var(--text-display-xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-display-l {
  font-family: var(--font-serif);
  font-size: var(--text-display-l);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-display-m {
  font-family: var(--font-serif);
  font-size: var(--text-display-m);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

/* ---------- Heading (editorial, EB Garamond) ---------- */

.text-heading-l {
  font-family: var(--font-serif);
  font-size: var(--text-heading-l);
  font-weight: 400;
  line-height: var(--leading-snug);
}

.text-heading-m {
  font-family: var(--font-serif);
  font-size: var(--text-heading-m);
  font-weight: 400;
  line-height: 1.25;
}

.text-heading-s {
  font-family: var(--font-serif);
  font-size: var(--text-heading-s);
  font-weight: 400;
  line-height: 1.3;
}

.text-subhead-italic {
  font-family: var(--font-serif);
  font-size: var(--text-heading-m);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--text-secondary);
}

/* ---------- Body (editorial, EB Garamond) ---------- */

.text-body-l {
  font-family: var(--font-serif);
  font-size: var(--text-body-l);
  font-weight: 400;
  line-height: var(--leading-relaxed);
}

.text-body-m {
  font-family: var(--font-serif);
  font-size: var(--text-body-m);
  font-weight: 400;
  line-height: var(--leading-relaxed);
}

.text-body-s {
  font-family: var(--font-serif);
  font-size: var(--text-body-s);
  font-weight: 400;
  line-height: var(--leading-relaxed);
}

/* ---------- Caption ---------- */

.text-caption-italic {
  font-family: var(--font-serif);
  font-size: var(--text-caption);
  font-weight: 400;
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.text-caption-sans {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

/* ---------- Labels (functional, sans, all caps, tracked) ---------- */

.text-label-l {
  font-family: var(--font-sans);
  font-size: var(--text-label-l);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.text-label-m {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ---------- Eyebrow (commonly paired above headings) ---------- */

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-label-m);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
  display: block;
}

.eyebrow--brand {
  color: var(--text-brand);
}

.eyebrow--inverse {
  color: var(--text-inverse-soft);
}

/* ---------- Measure helpers ---------- */

.measure       { max-width: 65ch; }
.measure-narrow { max-width: 48ch; }
.measure-wide  { max-width: 82ch; }

/* ---------- Visually hidden (accessible) ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Text alignment helpers ---------- */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ---------- Tone helpers ---------- */

.text-secondary  { color: var(--text-secondary); }
.text-inverse    { color: var(--text-inverse); }
.text-on-brand   { color: var(--text-on-brand); }