/* typography.css — THE single source of truth for page-chrome headings (H1/H2) across every
   customerui page. Reads the canonical scale from nav.css's :root (the --h1- and --h2- token
   pairs, plus --text-heading) — nav.css is loaded first everywhere this is loaded, and its own
   header comment restricts IT to tokens+nav rules only, so heading RULES live here instead).
   NOTE: a CSS comment ends the instant an asterisk is directly followed by a forward slash,
   wherever it appears in the text, with no escape sequence available — writing a token-name
   shorthand like "h1-star, slash, h2-star" using the literal characters instead of words closes
   the comment early, and everything after it silently becomes garbage CSS until the parser
   resyncs at the next rule. This exact mistake once ate the .page-title rule below entirely —
   caught by a live parse check, not by reading the file, since curl/diff on the raw bytes shows
   nothing wrong. Spell out token names in comments here instead of gesturing at them with glob
   syntax.

   Two classes, on purpose: .page-title is the one page-chrome H1 every page uses; .section-title is
   the one in-page H2. Content-level headings (a docs article's own title, a markdown heading inside
   rendered content) are NOT page chrome and deliberately keep their own smaller treatment — see
   .docs-doc-title/.md-h2 in support.css, unchanged by this file.

   One more deliberate exception: .score-hero-title (customer.css) stays its own larger size — it
   carries Score Pairs' "prove it on your data" pitch, not a plain page label. It still pulls
   --sans/--text-heading from here so it can never drift on FONT or COLOR, only size. */

.page-title {
  font-family: var(--sans);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  color: var(--text-heading);
  margin: 0 0 4px;
}

.section-title {
  font-family: var(--sans);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  color: var(--text-heading);
  margin: 0 0 10px;
}