/**
 * Heading scale and typographic utilities (TS-5131, epic TS-5127).
 *
 * Until now the theme had exactly one global heading rule (margin and
 * line-height). Every actual size was set per context, which is how the
 * estate ended up with h1 anywhere between 30px and 60px and the same
 * .title class rendering at 14px on one page and 36px on another. Headings
 * with no contextual rule fell back to browser defaults against a 14px
 * body, so an h3 landed at 16.4px: barely distinguishable from body text.
 *
 * This file gives the scale a home. Sizes come from the design tokens, so
 * the scale has one definition shared with the style guide.
 *
 * Deliberately element selectors only. They carry the lowest possible
 * specificity, so all ~49 existing contextual heading rules continue to
 * win and the pages they cover do not move. What changes is only headings
 * that had no rule at all, which is exactly the drift this fixes. Those
 * pages are then migrated onto the scale surface by surface.
 *
 * Two things this deliberately does NOT set:
 *
 * - Colour. Headings sit on white cards, tinted panels and dark surfaces
 *   throughout the estate; forcing ink here would turn white-on-dark
 *   headings unreadable. Colour is applied per surface during its repaint.
 * - line-height. The existing global rule already sets 1.1 and restating
 *   it would reflow pages for no benefit in this ticket.
 */

h1 {
  font-size: var(--ts-text-h1);
  font-weight: 700;
}

h2 {
  font-size: var(--ts-text-h2);
  font-weight: 700;
}

h3 {
  font-size: var(--ts-text-h3);
  font-weight: 700;
}

/* The scale stops at h3 for headline sizes; h4 down are structural labels
   rather than headlines, so they step through body, small and caption. */
h4 {
  font-size: var(--ts-text-body);
  font-weight: 700;
}

h5 {
  font-size: var(--ts-text-small);
  font-weight: 700;
}

h6 {
  font-size: var(--ts-text-caption);
  font-weight: 700;
}

/**
 * Display: the largest step, for a page's opening headline where a page
 * deliberately leads with one. Opt-in rather than automatic, because most
 * dashboard pages want h1 rather than a hero.
 */
.ts-display {
  font-size: var(--ts-text-display);
  font-weight: var(--ts-font-display-weight);
  line-height: 1.1;
}

/**
 * Eyebrow: the small uppercase label above a headline. A house pattern that
 * every page currently redefines, each with its own size, tracking and
 * colour, two of which failed contrast until TS-5128.
 */
.ts-eyebrow {
  font-size: var(--ts-text-eyebrow);
  font-weight: var(--ts-eyebrow-weight);
  letter-spacing: var(--ts-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ts-color-eyebrow);
}

/**
 * Muted helper and italic hint text, the third and fourth parts of the
 * house header pattern (eyebrow, headline, sub, hint).
 */
.ts-sub {
  color: var(--ts-color-muted);
  font-size: var(--ts-text-small);
}

.ts-hint {
  color: var(--ts-color-muted);
  font-size: var(--ts-text-small);
  font-style: italic;
}

/**
 * Section rhythm. Modelled on the portal's .section-spacing, which is the
 * only shared spacing primitive anywhere in the estate today; the app side
 * hand-picks mb-3 or mb-4 per page instead. Opt-in so it can be adopted
 * during each surface's repaint without disturbing current layouts.
 */
.ts-section {
  padding-block: var(--ts-space-5);
}

.ts-section + .ts-section {
  border-top: 1px solid var(--ts-border-quiet);
}

/* Vertical stack: one consistent gap between children, instead of relying
   on each child's own margins, which is where the default-margin lottery
   comes from. */
.ts-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ts-space-3);
}

.ts-stack--tight {
  gap: var(--ts-space-2);
}

.ts-stack--loose {
  gap: var(--ts-space-5);
}

/**
 * Pill and chip rows must centre their items. A flex row defaults to
 * align-items: stretch, which inflates a small chip to the height of the
 * tallest pill beside it. That is a real bug we hit rather than a
 * theoretical one, so the row is a named utility.
 */
.ts-pill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ts-space-2);
}