/**
 * Legacy ftm-typography-* utility classes (ftm-page-sections compat).
 *
 * The retired ftm-page-sections typography picker wrote ftm-typography-{token}
 * classes into saved content and shipped the matching CSS itself. ftm-blocks
 * replaces the picker (it writes ftm-type-{role} instead, and strips the old
 * class on next edit) but ships NO styles for the legacy classes — so unedited
 * content would silently lose its type overrides. This sheet keeps that
 * content rendering until it has all been re-saved under ftm-blocks; then it
 * can be deleted.
 *
 * Each class references the per-role sub-variables defined in primitives.css
 * (--body-large-size, --body-large-line-height, …). Those are updated inside
 * @media blocks within :root, so every var() here resolves to the correct
 * value at each breakpoint — no @media blocks are needed in this file.
 *
 * @package AnnaleeDolls
 */

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

/*
 * 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);
}