/**
 * Typography utility classes for ftm-typography-* block support.
 *
 * Each class references the design-system sub-variables defined in the theme's
 * primitives.css (--body-large-size, --body-large-line-height, etc.).  Because
 * those sub-variables are updated inside @media blocks within :root in
 * primitives.css, every var() reference here automatically resolves to the
 * correct value at each breakpoint — no @media blocks are needed in this file.
 *
 * font-family uses the token's own family variable (resolves to the web-font
 * @font-face name) followed by a system-font fallback tail defined below.
 * Hardcoded fallback values inside var() ensure reasonable rendering even when
 * primitives.css is absent.
 *
 * Loaded on the front end via wp_enqueue_scripts and inlined into the block
 * editor iframe via the block_editor_settings_all PHP filter.
 *
 * @package ftm-page-sections
 */

/* ── System-font fallback tails ─────────────────────────────────────────── */

/*
 * These are the cascade after the web-font name.  The web-font name itself
 * comes from the token: var(--body-large-font, body).
 * "body"    @font-face → Public Sans (geometric sans-serif).
 * "display" @font-face → Hagrid (serifed display face).
 */

:root {
  --ftm-body-fallbacks:    system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, arial, sans-serif;
  --ftm-display-fallbacks: georgia, "Palatino Linotype", palatino, serif;
}

/* ── Body (Public Sans) ─────────────────────────────────────────────────── */

.ftm-typography-body-large {
  font-family: var(--body-large-font, body), var(--ftm-body-fallbacks);
  font-weight: var(--body-large-weight, 400);
  font-size:   var(--body-large-size, 1rem);
  line-height: var(--body-large-line-height, 1.5);
}

.ftm-typography-body-small {
  font-family: var(--body-small-font, body), var(--ftm-body-fallbacks);
  font-weight: var(--body-small-weight, 400);
  font-size:   var(--body-small-size, 0.938rem);
  line-height: var(--body-small-line-height, 1.066);
}

/* ── Display & Headings (Hagrid) ────────────────────────────────────────── */

.ftm-typography-display-large {
  font-family: var(--display-large-font, serif), var(--ftm-display-fallbacks);
  font-weight: var(--display-large-weight, 400);
  font-size:   var(--display-large-size, 1.75rem);
  line-height: var(--display-large-line-height, 1.143);
}

.ftm-typography-heading-large {
  font-family: var(--heading-large-font, serif), var(--ftm-display-fallbacks);
  font-weight: var(--heading-large-weight, 400);
  font-size:   var(--heading-large-size, 1.625rem);
  line-height: var(--heading-large-line-height, 1.231);
}

.ftm-typography-heading-medium {
  font-family: var(--heading-medium-font, serif), var(--ftm-display-fallbacks);
  font-weight: var(--heading-medium-weight, 400);
  font-size:   var(--heading-medium-size, 1.5rem);
  line-height: var(--heading-medium-line-height, 1);
}

.ftm-typography-heading-small {
  font-family: var(--heading-small-font, serif), var(--ftm-display-fallbacks);
  font-weight: var(--heading-small-weight, 400);
  font-size:   var(--heading-small-size, 1.313rem);
  line-height: var(--heading-small-line-height, 1.333);
}

.ftm-typography-title-large {
  font-family: var(--title-large-font, serif), var(--ftm-display-fallbacks);
  font-weight: var(--title-large-weight, 400);
  font-size:   var(--title-large-size, 1.125rem);
  line-height: var(--title-large-line-height, 1.333);
}

.ftm-typography-title-small {
  font-family: var(--title-small-font, serif), var(--ftm-display-fallbacks);
  font-weight: var(--title-small-weight, 400);
  font-size:   var(--title-small-size, 1rem);
  line-height: var(--title-small-line-height, 1.5);
}

/* ── Labels (Public Sans) ───────────────────────────────────────────────── */

.ftm-typography-label-x-large {
  font-family: var(--label-x-large-font, body), var(--ftm-body-fallbacks);
  font-weight: var(--label-x-large-weight, 700);
  font-size:   var(--label-x-large-size, 1rem);
  line-height: var(--label-x-large-line-height, 1.5);
}

.ftm-typography-label-large {
  font-family: var(--label-large-font, body), var(--ftm-body-fallbacks);
  font-weight: var(--label-large-weight, 400);
  font-size:   var(--label-large-size, 0.938rem);
  line-height: var(--label-large-line-height, 1.333);
}

.ftm-typography-label-medium {
  font-family: var(--label-medium-font, body), var(--ftm-body-fallbacks);
  font-weight: var(--label-medium-weight, 700);
  font-size:   var(--label-medium-size, 0.875rem);
  line-height: var(--label-medium-line-height, 2.143);
}

.ftm-typography-label-small {
  font-family: var(--label-small-font, body), var(--ftm-body-fallbacks);
  font-weight: var(--label-small-weight, 400);
  font-size:   var(--label-small-size, 0.75rem);
  line-height: var(--label-small-line-height, 1.333);
}