/*
 * Font utility classes — apply the design system's type scale to any element.
 *
 * Why this exists:
 *   - tokens.css defines the CSS variables (--font-display-*, --line-height-display-*)
 *   - theme.json + Gutenberg auto-generate .has-display-lg-font-size etc. for
 *     blocks, but those only cover font-size — no line-height / letter-spacing
 *     / weight bundled together.
 *   - Elementor's atomic widgets read the kit's "global-size-variable"
 *     definitions (see inc/elementor/variables/font-sizes.php) and apply them
 *     as inline font-size only.
 *
 * These utility classes bundle the full display preset (size + line-height +
 * letter-spacing + weight) so the same look can be applied in raw HTML, in
 * Gutenberg's "Additional CSS class" field, or via Elementor's
 * "CSS Classes" Advanced setting.
 *
 * Responsive: each .heading-* class inherits the responsive size from the
 * tokens.css media queries (mobile-first base, scaled up at 768/1025).
 */

/* Heading display sizes — size + line-height + weight + letter-spacing */
.heading-2xl,
.heading-xl,
.heading-lg,
.heading-md,
.heading-sm,
.heading-xs {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--letter-spacing-display);
}

.heading-2xl { font-size: var(--font-display-2xl); line-height: var(--line-height-display-2xl); }
.heading-xl  { font-size: var(--font-display-xl);  line-height: var(--line-height-display-xl); }
.heading-lg  { font-size: var(--font-display-lg);  line-height: var(--line-height-display-lg); }
.heading-md  { font-size: var(--font-display-md);  line-height: var(--line-height-display-md); }
.heading-sm  { font-size: var(--font-display-sm);  line-height: var(--line-height-display-sm); }
.heading-xs  { font-size: var(--font-display-xs);  line-height: var(--line-height-display-xs); }

/* Body text sizes — size + line-height */
.text-xl,
.text-lg,
.text-md,
.text-sm,
.text-xs {
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: normal;
}

.text-xl { font-size: var(--font-text-xl); line-height: var(--line-height-text); }
.text-lg { font-size: var(--font-text-lg); line-height: var(--line-height-text-lg); }
.text-md { font-size: var(--font-text-md); line-height: var(--line-height-text); }
.text-sm { font-size: var(--font-text-sm); line-height: var(--line-height-text); }
.text-xs { font-size: var(--font-text-xs); line-height: var(--line-height-text); }

/* Optional weight modifiers — combine with any of the above, e.g.
   <h2 class="heading-lg weight-semibold"> */
.weight-regular  { font-weight: 400; }
.weight-medium   { font-weight: 500; }
.weight-semibold { font-weight: 600; }
.weight-bold     { font-weight: 700; }