/**
 * Editor4 Typography Style System — Phase A (Foundation)
 *
 * Class definitions only. Values flow from CSS variables emitted at
 * runtime by js/editor4/so-text-styles.js, which in turn reads them
 * from window.E4_TEXT_PRESETS (loaded from text-presets.json by
 * editor4.php with optional per-tenant override).
 *
 * No hardcoded values in this file — by design. Phase 1 had values
 * here AND in a JS twin table; Phase A replaces both with the
 * runtime-emitted token vars at :root.
 *
 * SOURCE OF TRUTH for the values:
 *   assets/editor4/text-presets.json (global default)
 *   temp/{tenant}/text-presets.json  (per-tenant override, optional)
 *
 * RUNTIME WIRING
 *   editor4.php inlines window.E4_TEXT_PRESETS
 *      ↓
 *   js/editor4/so-text-styles.js reads it at boot
 *      ↓
 *   emits :root { --so-text-{varSlug}-{prop}: ...; }
 *      ↓
 *   the classes below pick up those vars via cascade
 *
 * VAR NAMING
 *   --so-text-{varSlug}-{propAbbr}
 *   varSlug abbreviations (slug → varSlug):
 *     heading-1 → h1, heading-2 → h2, heading-3 → h3,
 *     paragraph → paragraph, small-text → small,
 *     caption → caption, button-text → button, link-text → link
 *   propAbbr abbreviations (CSS prop → propAbbr):
 *     font-family → font, font-size → size, font-weight → weight,
 *     line-height → line, letter-spacing → spacing
 *
 * APPLY ON ELEMENT
 *   <h1 class="so-text-style--heading-1">…</h1>
 *
 * LOCAL OVERRIDES win via cascade specificity — when the user edits
 * a typography property in Style Manager, the component-level CSS
 * rule beats the class-level rule defined here.
 *
 * SEE
 *   .claude/docs/EDITOR4_TYPOGRAPHY_STYLE_SYSTEM.md
 */

.so-text-style--heading-1 {
  font-family:    var(--so-text-h1-font);
  font-size:      var(--so-text-h1-size);
  font-weight:    var(--so-text-h1-weight);
  line-height:    var(--so-text-h1-line);
  letter-spacing: var(--so-text-h1-spacing);
}

.so-text-style--heading-2 {
  font-family:    var(--so-text-h2-font);
  font-size:      var(--so-text-h2-size);
  font-weight:    var(--so-text-h2-weight);
  line-height:    var(--so-text-h2-line);
  letter-spacing: var(--so-text-h2-spacing);
}

.so-text-style--heading-3 {
  font-family:    var(--so-text-h3-font);
  font-size:      var(--so-text-h3-size);
  font-weight:    var(--so-text-h3-weight);
  line-height:    var(--so-text-h3-line);
  letter-spacing: var(--so-text-h3-spacing);
}

.so-text-style--paragraph {
  font-family:    var(--so-text-paragraph-font);
  font-size:      var(--so-text-paragraph-size);
  font-weight:    var(--so-text-paragraph-weight);
  line-height:    var(--so-text-paragraph-line);
  letter-spacing: var(--so-text-paragraph-spacing);
}

.so-text-style--small-text {
  font-family:    var(--so-text-small-font);
  font-size:      var(--so-text-small-size);
  font-weight:    var(--so-text-small-weight);
  line-height:    var(--so-text-small-line);
  letter-spacing: var(--so-text-small-spacing);
}

.so-text-style--caption {
  font-family:    var(--so-text-caption-font);
  font-size:      var(--so-text-caption-size);
  font-weight:    var(--so-text-caption-weight);
  line-height:    var(--so-text-caption-line);
  letter-spacing: var(--so-text-caption-spacing);
}

.so-text-style--button-text {
  font-family:    var(--so-text-button-font);
  font-size:      var(--so-text-button-size);
  font-weight:    var(--so-text-button-weight);
  line-height:    var(--so-text-button-line);
  letter-spacing: var(--so-text-button-spacing);
}

.so-text-style--link-text {
  font-family:    var(--so-text-link-font);
  font-size:      var(--so-text-link-size);
  font-weight:    var(--so-text-link-weight);
  line-height:    var(--so-text-link-line);
  letter-spacing: var(--so-text-link-spacing);
}