/* === VESTFIN GLOBAL TYPOGRAPHY SCALE =====================================
 * Single source of truth for type sizing AND line-height across the theme.
 *
 * Canonical hierarchy — USE THE SEMANTIC CLASSES, NOT raw pixels:
 *   .text-display  — marketing hero h1   (64/1.15 desktop, 36/1.15 mobile)
 *   .text-h1       — standard page h1    (48/1.2  desktop, 28/1.2  mobile)
 *   .text-h2       — section heading h2  (40/1.25 desktop, 24/1.25 mobile)
 *   .text-h3       — sub-heading h3      (22/1.35 desktop, 20/1.3  mobile)
 *   .text-h4       — minor heading h4    (18/1.4  desktop, 17/1.35 mobile)
 *   .text-eyebrow  — uppercase eyebrow   (13/1.4  desktop, 12/1.4  mobile)
 *   .text-body-lg / .text-body / .text-small / .text-xsmall / .text-button
 *
 * Token decisions are anchored to live's effective values, sampled across
 * homepage / about-us / contact-us / careers / buffer-strategy at desktop
 * (1440) and mobile (375) viewports. Two heading "h1" tokens are exposed —
 * `.text-display` for marketing heroes and `.text-h1` for standard pages —
 * because live deliberately uses two different scales.
 *
 * ⚠ RULES OF ENGAGEMENT — RE-READ BEFORE EDITING ANY HEADING:
 *   1. NEVER inline `line-height` on a heading element. That includes
 *      Tailwind utilities (`leading-[80px]`, `leading-tight`) and inline
 *      `<style>` blocks. Bug history: the synthetic-borrow hero used to
 *      pin `leading-[80px]` on its h1 *and* on inner <b>/<span> tags,
 *      which then cascaded to inline children and broke wrapping spacing
 *      on mobile while every other page rendered with `.text-display`'s
 *      canonical LH.
 *   2. NEVER set `font-size` directly on a heading unless you're also
 *      adding a comment explaining why the canonical token does not fit.
 *      The current known divergences are flagged in
 *      overrides.css ("H1 TYPOGRAPHY ENFORCEMENT") and in the
 *      page-specific strategy-header.php inline style block.
 *   3. The canonical H1 enforcement block in overrides.css supplies
 *      font-size AND line-height for every h1 on Page-typed posts; it
 *      runs at (0,5,3) specificity to beat Tailwind-CDN-injected
 *      utility classes. Adding a heading? Use `.text-display` or
 *      `.text-h1` and you'll inherit the right LH automatically.
 *   4. Brand weights are 400 + 700 only — no 500 / 600 / 900 on
 *      headings (per the Vestfin brand guide, May 2026).
 *
 * Override sparingly — prefer adding a new semantic class to this file
 * over inlining a one-off `text-[Npx]` in a partial.
 * ========================================================================= */

:root {
  /* Desktop scale (>= 768px) */
  --text-display-size: 64px;
  --text-display-lh:   1.15;
  --text-display-fw:   700;

  --text-h1-size: 48px;
  --text-h1-lh:   1.2;
  --text-h1-fw:   700;

  --text-h2-size: 40px;
  --text-h2-lh:   1.25;
  --text-h2-fw:   700;

  --text-h3-size: 22px;
  --text-h3-lh:   1.35;
  --text-h3-fw:   700;

  --text-h4-size: 18px;
  --text-h4-lh:   1.4;
  --text-h4-fw:   700;

  --text-eyebrow-size: 13px;
  --text-eyebrow-lh:   1.4;
  --text-eyebrow-fw:   700;
  --text-eyebrow-ls:   0.08em;

  --text-body-lg-size: 18px;
  --text-body-lg-lh:   1.55;
  --text-body-lg-fw:   400;

  --text-body-size: 16px;
  --text-body-lh:   1.55;
  --text-body-fw:   400;

  --text-small-size: 14px;
  --text-small-lh:   1.5;
  --text-small-fw:   400;

  --text-xsmall-size: 12px;
  --text-xsmall-lh:   1.45;
  --text-xsmall-fw:   400;

  --text-button-size: 16px;
  --text-button-lh:   1.4;
  --text-button-fw:   700;
}

/* Mobile scale (<= 767px) — significantly tightened so headings do not
 * blow up phones. User reported "mobile is way too big". */
@media (max-width: 767px) {
  :root {
    /* QA pass (May 16 2026): unify mobile h1 to 48px / 56px LH */
    --text-display-size: 48px;
    --text-display-lh:   1.17;

    --text-h1-size: 48px;
    --text-h1-lh:   1.17;

    --text-h2-size: 24px;
    --text-h2-lh:   1.25;

    --text-h3-size: 20px;
    --text-h3-lh:   1.3;

    --text-h4-size: 17px;
    --text-h4-lh:   1.35;

    --text-eyebrow-size: 12px;
    --text-eyebrow-lh:   1.4;

    --text-body-lg-size: 17px;
    --text-body-lg-lh:   1.55;

    --text-body-size: 16px;
    --text-body-lh:   1.55;

    --text-small-size: 14px;
    --text-small-lh:   1.5;

    --text-xsmall-size: 12px;

    --text-button-size: 15px;
  }
}

/* === SEMANTIC TYPE UTILITY CLASSES ======================================
 * These intentionally have very low specificity (a single class) so they
 * compose cleanly with Tailwind color/weight modifiers like
 * `class="text-display font-bold text-white"` — though the scale already
 * sets a default font-weight per token, so the `font-bold` etc. is
 * usually redundant.
 *
 * !important is used because the existing partials sprinkle Tailwind
 * `text-[Npx]` / `text-3xl` etc. that would otherwise win specificity
 * battles unpredictably with the CDN-injected utility classes. We want
 * the semantic scale to be authoritative.
 * ========================================================================= */
.text-display {
  font-size: var(--text-display-size) !important;
  line-height: var(--text-display-lh) !important;
  font-weight: var(--text-display-fw);
}
.text-h1 {
  font-size: var(--text-h1-size) !important;
  line-height: var(--text-h1-lh) !important;
  font-weight: var(--text-h1-fw);
}
.text-h2 {
  font-size: var(--text-h2-size) !important;
  line-height: var(--text-h2-lh) !important;
  font-weight: var(--text-h2-fw);
}
.text-h3 {
  font-size: var(--text-h3-size) !important;
  line-height: var(--text-h3-lh) !important;
  font-weight: var(--text-h3-fw);
}
.text-h4 {
  font-size: var(--text-h4-size) !important;
  line-height: var(--text-h4-lh) !important;
  font-weight: var(--text-h4-fw);
}
.text-eyebrow {
  font-size: var(--text-eyebrow-size) !important;
  line-height: var(--text-eyebrow-lh) !important;
  font-weight: var(--text-eyebrow-fw);
  letter-spacing: var(--text-eyebrow-ls);
  text-transform: uppercase;
}
.text-body-lg {
  font-size: var(--text-body-lg-size) !important;
  line-height: var(--text-body-lg-lh) !important;
  font-weight: var(--text-body-lg-fw);
}
.text-body {
  font-size: var(--text-body-size) !important;
  line-height: var(--text-body-lh) !important;
  font-weight: var(--text-body-fw);
}
.text-small {
  font-size: var(--text-small-size) !important;
  line-height: var(--text-small-lh) !important;
  font-weight: var(--text-small-fw);
}
.text-xsmall {
  font-size: var(--text-xsmall-size) !important;
  line-height: var(--text-xsmall-lh) !important;
  font-weight: var(--text-xsmall-fw);
}
.text-button {
  font-size: var(--text-button-size) !important;
  line-height: var(--text-button-lh) !important;
  font-weight: var(--text-button-fw);
}