/*
 * typography.css
 * Heading scale (element + class pairs), and the Link term.
 *
 * Code, <pre> and <kbd> are in code.css, with the syntax highlighting
 * theme — everything about a code block in one file.
 */

/* ── Heading scale ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  /*
   * Fallback at the use site, not an alias declared on :root — a
   * `--font-display: var(--font-primary)` token would substitute once
   * against :root and then inherit past a scoped --font-primary override.
   * Unset, this is --font-primary and an app with one face sees nothing.
   */
  font-family: var(--font-display, var(--font-primary));
  color:       var(--ink);
  margin:      0;
  line-height: var(--leading-heading);
  /*
   * Tracking is NOT set here. Three of the six levels declare their own below
   * and would override a shared declaration — the token has to be the
   * fallback in each of those instead, or setting it moves h3–h5 and silently
   * leaves h1, h2 and h6 where they were.
   */
  /*
   * Even the lines rather than filling each one, so a two-line heading does
   * not leave a single orphaned word under a full line. The browser caps
   * this at a handful of lines, which is why it is on headings and not on
   * body copy. The package styles no `p` — it is not classless — so the
   * `pretty` half of this belongs to the two places prose does live here:
   * alert-content and empty-text.
   */
  text-wrap:   balance;
}

/*
 * The rungs are --text-* in tokens.css, shared with the `.text-*` utilities,
 * which is why h4 and .text-xl are one number. Retune the token, not this.
 */
/*
 * --heading-letter-spacing is the theme's handle on all six at once. It is
 * written as the FALLBACK arm of each level's own value, so unset every level
 * keeps the optical tracking it has always had — tight on the display sizes,
 * open on the small-caps h6 — and set, one declaration moves the whole scale.
 * Same shape as --font-display: named, unset, read at the use site.
 *
 * --heading-font-weight is the same shape again, and the pair is why: the
 * SIZE ladder was themable through --text-* and the treatment was not, so a
 * theme could restate the whole scale and still not say whether its headings
 * are heavy. Unset, h1/h2 stay 700 and the rest 600.
 */
h1, .h1 { font-size: var(--text-4xl); font-weight: var(--heading-font-weight, 700); letter-spacing: var(--heading-letter-spacing, -0.02em);  line-height: var(--leading-display); }
h2, .h2 { font-size: var(--text-3xl); font-weight: var(--heading-font-weight, 700); letter-spacing: var(--heading-letter-spacing, -0.015em); line-height: var(--leading-heading); }
h3, .h3 { font-size: var(--text-2xl); font-weight: var(--heading-font-weight, 600); letter-spacing: var(--heading-letter-spacing, normal); }
h4, .h4 { font-size: var(--text-xl);  font-weight: var(--heading-font-weight, 600); letter-spacing: var(--heading-letter-spacing, normal); }
h5, .h5 { font-size: var(--text-lg);  font-weight: var(--heading-font-weight, 600); letter-spacing: var(--heading-letter-spacing, normal); }
h6, .h6 {
  font-size:      var(--text-md);
  font-weight:    var(--heading-font-weight, 600);
  text-transform: uppercase;
  letter-spacing: var(--heading-letter-spacing, 0.05em);
}

/*
 * ── Link ──────────────────────────────────────────────────────
 * The Inline-tier "Link" term. It was referenced by the anatomy examples
 * in lists.css but never actually defined; .btn.link is a button that
 * looks like a link, which is a different thing.
 *
 * Reads --bg-mix, so `class="link danger"` works like any other tone.
 */
.link {
  color:           var(--bg-mix, var(--color-primary));
  text-decoration: none;
  cursor:          pointer;
}
.link:hover { text-decoration: underline; }
/* Ring in focus.css; the small radius here is just the shape it traces
   around what is otherwise a square run of inline text. */
.link:focus-visible {
  border-radius: 2px;
}

/*
 * ── The .text-* utilities moved out in v0.10.1 ────────────────────
 *
 * Both the size scale and the color utilities now live in utilities.css,
 * in the `utilities` layer. In this file they shared the `components` layer
 * with .btn, which sets its own font-size — so every size modifier tied on
 * specificity and lost on source order. See utilities.css for the detail.
 */