/* ============================================================
   type.css — type-role ramp (single source of truth)
   Hierarchy comes from SIZE; weight is mostly Book — one open cut
   carries body, ledes, and headings, matching slb.com. Card titles
   step up to Medium for emphasis. Bold is an accent only
   (.serif-em, <strong>, prices, stats, CTAs) and eyebrows.
   Loaded LAST so role styles win over component font props.
   ============================================================ */

/* DISPLAY — 64 / book */
.t-display,
.hero h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-4xl);
  font-weight: var(--font-book);
  letter-spacing: var(--tracking-tight);
}

/* HEADING — 48 / book */
.t-heading,
.section-head h2,
.h-3xl,
.aip-gen-h {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  font-weight: var(--font-book);
  letter-spacing: var(--tracking-tight);
}

/* SUBHEADING — 32 / book */
.t-subheading,
.co-success__title {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--font-book);
  letter-spacing: var(--tracking-tight);
}

/* TITLE — 24 / medium (the sole survivor of medium; card titles).
   .acad-t breaks out of this group to use --text-xl, see home-sections.css. */
.t-title,
.course-card__title,
.modal__title {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  font-weight: var(--font-medium);
}

/* BODY — 16 / book */
.t-body {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  font-weight: var(--font-book);
}

/* LABEL — 14 / book */
.t-label {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-book);
}

/* EYEBROW — 12 / bold / uppercase */
.t-eyebrow,
.eyebrow,
.cat-journey-eyebrow,
.acad-eyebrow,
.aip-journey-eb {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Eyebrow color in the default surface; AI variant overrides. */
.eyebrow { color: var(--blue-600); }
.eyebrow.ai { color: var(--ai-text); }

/* CAPTION — 12 / book */
.t-caption {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  font-weight: var(--font-book);
}

/* LEDE — slightly larger body copy that introduces a section. */
.lede {
  font-size: var(--text-md);
  line-height: var(--leading-base);
  color: var(--text-secondary);
  max-width: 64ch;
  text-wrap: pretty;
  font-weight: var(--font-book);
}

/* Plain body */
.body { font-size: var(--text-base); line-height: var(--leading-base); color: var(--text-secondary); }

/* Italic emphasis flourish used in section heads. */
.serif-em {
  font-style: italic;
  font-weight: var(--font-book);
}

/* Tabular numerals — for prices, counters, stats, dates. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* RESPONSIVE — pull display + heading sizes in below 768.
   Lives here (last-loaded sheet) so it wins against any
   component-level desktop ramp. */
@media (max-width: 767px) {
  .t-display,
  .hero h1 {
    font-size: var(--text-3xl);
    line-height: var(--leading-3xl);
  }
  .t-heading,
  .section-head h2,
  .h-3xl,
  .aip-gen-h {
    font-size: var(--text-xl);
    line-height: var(--leading-xl);
  }
}