/*
 * Headings, from `heading_tag`. The variant picks the element and the step
 * together (large → h1, default → h2, small → h3, tiny → h4); the three big
 * steps are the serif, `tiny` is a UI label in the sans.
 */
@layer components {
  .heading {
    color: var(--color-ink);
    font-family: var(--font-prose);
    font-weight: var(--weight-semibold);
    text-wrap: balance;
  }

  .heading--large {
    margin-block-end: var(--space-md);
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-tight);
  }

  .heading--default {
    margin-block-end: var(--space-sm);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    letter-spacing: -0.01em;
  }

  .heading--small {
    margin-block-end: var(--space-xs);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
  }

  .heading--tiny {
    margin-block-end: var(--space-xs);
    font-family: var(--font-ui);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
  }
}