/* ============================================================================
   Websly 5.1 — Typography Token Classes
   ============================================================================
   17 utility classes (.ws-typo-<token>) driven entirely by CSS variables so
   the Customizer can override any property at any cascade level.

   Cascade:
     1. :root             token defaults (this file)
     2. websly-typo-scale element (Customizer global scale)
     3. body / wrapper    Customizer per-token overrides (Phase 3)
     4. inline style      per-instance custom value from inspector

   Spec: WEBSLY-5.1-GUIDES/GUIDE-TYPOGRAPHY-ROLES-5.1.md
   Registry: inc/websly-typography-roles.php
   ============================================================================ */

:root {
    /* ── Tier-level family slots (Customizer Font Families panel fills these) ── */
    --ws-font-display: var(--ws-font-titles, var(--ws-font-body, inherit));
    --ws-font-heading: var(--ws-font-titles, var(--ws-font-body, inherit));
    --ws-font-title:   var(--ws-font-titles, var(--ws-font-body, inherit));
    --ws-font-body:    var(--ws-font-body, inherit);
    --ws-font-label:   var(--ws-font-body, inherit);
    --ws-font-numeric: var(--ws-font-titles, var(--ws-font-body, inherit));
    --ws-font-quote:   var(--ws-font-subtitles, var(--ws-font-body, inherit));
    --ws-font-code:    var(--ws-font-other, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

    /* ── Tier-level scale multipliers (Customizer 🎚️ Global Scale) ─────── */
    --ws-typo-scale-display: 1;
    --ws-typo-scale-heading: 1;
    --ws-typo-scale-title:   1;
    --ws-typo-scale-body:    1;
    --ws-typo-scale-label:   1;
    --ws-typo-scale-numeric: 1;
    --ws-typo-scale-quote:   1;
    --ws-typo-scale-code:    1;

    /* ── DISPLAY tier defaults ─────────────────────────────────────────── */
    --ws-typo-display-xl-size:     clamp(2.75rem, 5vw + 1rem, 5.5rem);
    --ws-typo-display-xl-weight:   700;
    --ws-typo-display-xl-lh:       1.05;
    --ws-typo-display-xl-tracking: -0.03em;

    --ws-typo-display-lg-size:     clamp(2.25rem, 4vw + 0.75rem, 4.5rem);
    --ws-typo-display-lg-weight:   700;
    --ws-typo-display-lg-lh:       1.05;
    --ws-typo-display-lg-tracking: -0.025em;

    --ws-typo-display-md-size:     clamp(2rem, 3vw + 0.5rem, 3.5rem);
    --ws-typo-display-md-weight:   700;
    --ws-typo-display-md-lh:       1.1;
    --ws-typo-display-md-tracking: -0.02em;

    /* ── HEADING tier defaults ─────────────────────────────────────────── */
    --ws-typo-heading-xl-size:     clamp(2rem, 2.5vw + 0.75rem, 3.25rem);
    --ws-typo-heading-xl-weight:   700;
    --ws-typo-heading-xl-lh:       1.1;
    --ws-typo-heading-xl-tracking: -0.02em;

    --ws-typo-heading-lg-size:     clamp(1.625rem, 1.5vw + 0.75rem, 2.5rem);
    --ws-typo-heading-lg-weight:   700;
    --ws-typo-heading-lg-lh:       1.15;
    --ws-typo-heading-lg-tracking: -0.015em;

    --ws-typo-heading-md-size:     clamp(1.375rem, 1vw + 0.75rem, 1.75rem);
    --ws-typo-heading-md-weight:   600;
    --ws-typo-heading-md-lh:       1.2;
    --ws-typo-heading-md-tracking: -0.01em;

    --ws-typo-heading-sm-size:     clamp(1.125rem, 0.5vw + 0.75rem, 1.375rem);
    --ws-typo-heading-sm-weight:   600;
    --ws-typo-heading-sm-lh:       1.25;
    --ws-typo-heading-sm-tracking: -0.005em;

    /* ── TITLE tier defaults ───────────────────────────────────────────── */
    --ws-typo-title-lg-size:       1.5rem;
    --ws-typo-title-lg-weight:     600;
    --ws-typo-title-lg-lh:         1.25;
    --ws-typo-title-lg-tracking:   -0.01em;

    --ws-typo-title-md-size:       1.25rem;
    --ws-typo-title-md-weight:     600;
    --ws-typo-title-md-lh:         1.3;
    --ws-typo-title-md-tracking:   -0.005em;

    --ws-typo-title-sm-size:       1.0625rem;
    --ws-typo-title-sm-weight:     600;
    --ws-typo-title-sm-lh:         1.35;
    --ws-typo-title-sm-tracking:   0;

    /* ── BODY tier defaults ────────────────────────────────────────────── */
    --ws-typo-body-lg-size:        clamp(1.0625rem, 0.5vw + 0.5rem, 1.25rem);
    --ws-typo-body-lg-weight:      400;
    --ws-typo-body-lg-lh:          1.55;
    --ws-typo-body-lg-tracking:    0;

    --ws-typo-body-md-size:        1rem;
    --ws-typo-body-md-weight:      400;
    --ws-typo-body-md-lh:          1.6;
    --ws-typo-body-md-tracking:    0;

    --ws-typo-body-sm-size:        0.875rem;
    --ws-typo-body-sm-weight:      400;
    --ws-typo-body-sm-lh:          1.55;
    --ws-typo-body-sm-tracking:    0;

    /* ── LABEL tier defaults ───────────────────────────────────────────── */
    --ws-typo-label-lg-size:       1rem;
    --ws-typo-label-lg-weight:     500;
    --ws-typo-label-lg-lh:         1.4;
    --ws-typo-label-lg-tracking:   0;

    --ws-typo-label-md-size:       0.9375rem;
    --ws-typo-label-md-weight:     500;
    --ws-typo-label-md-lh:         1.4;
    --ws-typo-label-md-tracking:   0;

    --ws-typo-label-sm-size:       0.8125rem;
    --ws-typo-label-sm-weight:     500;
    --ws-typo-label-sm-lh:         1.4;
    --ws-typo-label-sm-tracking:   0.005em;

    --ws-typo-label-xs-size:       0.75rem;
    --ws-typo-label-xs-weight:     500;
    --ws-typo-label-xs-lh:         1.4;
    --ws-typo-label-xs-tracking:   0.05em;

    /* ── NUMERIC tier defaults ─────────────────────────────────────────── */
    --ws-typo-numeric-xl-size:     clamp(2.5rem, 4vw + 0.5rem, 4.5rem);
    --ws-typo-numeric-xl-weight:   700;
    --ws-typo-numeric-xl-lh:       1;
    --ws-typo-numeric-xl-tracking: -0.03em;

    --ws-typo-numeric-lg-size:     clamp(2rem, 2.5vw + 0.75rem, 3rem);
    --ws-typo-numeric-lg-weight:   700;
    --ws-typo-numeric-lg-lh:       1.05;
    --ws-typo-numeric-lg-tracking: -0.025em;

    --ws-typo-numeric-md-size:     1.5rem;
    --ws-typo-numeric-md-weight:   600;
    --ws-typo-numeric-md-lh:       1.1;
    --ws-typo-numeric-md-tracking: -0.015em;

    /* ── QUOTE tier defaults ───────────────────────────────────────────── */
    --ws-typo-quote-lg-size:       clamp(1.25rem, 1vw + 0.75rem, 1.625rem);
    --ws-typo-quote-lg-weight:     400;
    --ws-typo-quote-lg-lh:         1.5;
    --ws-typo-quote-lg-tracking:   -0.005em;

    --ws-typo-quote-md-size:       1.125rem;
    --ws-typo-quote-md-weight:     400;
    --ws-typo-quote-md-lh:         1.55;
    --ws-typo-quote-md-tracking:   0;

    /* ── CODE tier defaults ────────────────────────────────────────────── */
    --ws-typo-code-md-size:        0.9375rem;
    --ws-typo-code-md-weight:      400;
    --ws-typo-code-md-lh:          1.5;
    --ws-typo-code-md-tracking:    0;

    --ws-typo-code-sm-size:        0.8125rem;
    --ws-typo-code-sm-weight:      500;
    --ws-typo-code-sm-lh:          1.5;
    --ws-typo-code-sm-tracking:    0;
}

/* ─── DISPLAY classes ──────────────────────────────────────────────────── */
.ws-typo-display-xl,
.ws-typo-display-lg,
.ws-typo-display-md {
    font-family: var(--ws-font-display);
    text-wrap: balance;
    margin: 0;
}
.ws-typo-display-xl {
    font-size: calc(var(--ws-typo-display-xl-size) * var(--ws-typo-scale-display));
    font-weight: var(--ws-typo-display-xl-weight);
    line-height: var(--ws-typo-display-xl-lh);
    letter-spacing: var(--ws-typo-display-xl-tracking);
}
.ws-typo-display-lg {
    font-size: calc(var(--ws-typo-display-lg-size) * var(--ws-typo-scale-display));
    font-weight: var(--ws-typo-display-lg-weight);
    line-height: var(--ws-typo-display-lg-lh);
    letter-spacing: var(--ws-typo-display-lg-tracking);
}
.ws-typo-display-md {
    font-size: calc(var(--ws-typo-display-md-size) * var(--ws-typo-scale-display));
    font-weight: var(--ws-typo-display-md-weight);
    line-height: var(--ws-typo-display-md-lh);
    letter-spacing: var(--ws-typo-display-md-tracking);
}

/* ─── HEADING classes ──────────────────────────────────────────────────── */
.ws-typo-heading-xl,
.ws-typo-heading-lg,
.ws-typo-heading-md,
.ws-typo-heading-sm {
    font-family: var(--ws-font-heading);
    text-wrap: balance;
    margin: 0;
}
.ws-typo-heading-xl {
    font-size: calc(var(--ws-typo-heading-xl-size) * var(--ws-typo-scale-heading));
    font-weight: var(--ws-typo-heading-xl-weight);
    line-height: var(--ws-typo-heading-xl-lh);
    letter-spacing: var(--ws-typo-heading-xl-tracking);
}
.ws-typo-heading-lg {
    font-size: calc(var(--ws-typo-heading-lg-size) * var(--ws-typo-scale-heading));
    font-weight: var(--ws-typo-heading-lg-weight);
    line-height: var(--ws-typo-heading-lg-lh);
    letter-spacing: var(--ws-typo-heading-lg-tracking);
}
.ws-typo-heading-md {
    font-size: calc(var(--ws-typo-heading-md-size) * var(--ws-typo-scale-heading));
    font-weight: var(--ws-typo-heading-md-weight);
    line-height: var(--ws-typo-heading-md-lh);
    letter-spacing: var(--ws-typo-heading-md-tracking);
}
.ws-typo-heading-sm {
    font-size: calc(var(--ws-typo-heading-sm-size) * var(--ws-typo-scale-heading));
    font-weight: var(--ws-typo-heading-sm-weight);
    line-height: var(--ws-typo-heading-sm-lh);
    letter-spacing: var(--ws-typo-heading-sm-tracking);
}

/* ─── TITLE classes (UI surfaces) ─────────────────────────────────────── */
.ws-typo-title-lg,
.ws-typo-title-md,
.ws-typo-title-sm {
    font-family: var(--ws-font-title);
    margin: 0;
}
.ws-typo-title-lg {
    font-size: calc(var(--ws-typo-title-lg-size) * var(--ws-typo-scale-title));
    font-weight: var(--ws-typo-title-lg-weight);
    line-height: var(--ws-typo-title-lg-lh);
    letter-spacing: var(--ws-typo-title-lg-tracking);
}
.ws-typo-title-md {
    font-size: calc(var(--ws-typo-title-md-size) * var(--ws-typo-scale-title));
    font-weight: var(--ws-typo-title-md-weight);
    line-height: var(--ws-typo-title-md-lh);
    letter-spacing: var(--ws-typo-title-md-tracking);
}
.ws-typo-title-sm {
    font-size: calc(var(--ws-typo-title-sm-size) * var(--ws-typo-scale-title));
    font-weight: var(--ws-typo-title-sm-weight);
    line-height: var(--ws-typo-title-sm-lh);
    letter-spacing: var(--ws-typo-title-sm-tracking);
}

/* ─── BODY classes ─────────────────────────────────────────────────────── */
.ws-typo-body-lg,
.ws-typo-body-md,
.ws-typo-body-sm {
    font-family: var(--ws-font-body);
}
.ws-typo-body-lg {
    font-size: calc(var(--ws-typo-body-lg-size) * var(--ws-typo-scale-body));
    font-weight: var(--ws-typo-body-lg-weight);
    line-height: var(--ws-typo-body-lg-lh);
    letter-spacing: var(--ws-typo-body-lg-tracking);
}
.ws-typo-body-md {
    font-size: calc(var(--ws-typo-body-md-size) * var(--ws-typo-scale-body));
    font-weight: var(--ws-typo-body-md-weight);
    line-height: var(--ws-typo-body-md-lh);
    letter-spacing: var(--ws-typo-body-md-tracking);
}
.ws-typo-body-sm {
    font-size: calc(var(--ws-typo-body-sm-size) * var(--ws-typo-scale-body));
    font-weight: var(--ws-typo-body-sm-weight);
    line-height: var(--ws-typo-body-sm-lh);
    letter-spacing: var(--ws-typo-body-sm-tracking);
}

/* ─── LABEL classes ────────────────────────────────────────────────────── */
.ws-typo-label-lg,
.ws-typo-label-md,
.ws-typo-label-sm,
.ws-typo-label-xs {
    font-family: var(--ws-font-label);
}
.ws-typo-label-lg {
    font-size: calc(var(--ws-typo-label-lg-size) * var(--ws-typo-scale-label));
    font-weight: var(--ws-typo-label-lg-weight);
    line-height: var(--ws-typo-label-lg-lh);
    letter-spacing: var(--ws-typo-label-lg-tracking);
}
.ws-typo-label-md {
    font-size: calc(var(--ws-typo-label-md-size) * var(--ws-typo-scale-label));
    font-weight: var(--ws-typo-label-md-weight);
    line-height: var(--ws-typo-label-md-lh);
    letter-spacing: var(--ws-typo-label-md-tracking);
}
.ws-typo-label-sm {
    font-size: calc(var(--ws-typo-label-sm-size) * var(--ws-typo-scale-label));
    font-weight: var(--ws-typo-label-sm-weight);
    line-height: var(--ws-typo-label-sm-lh);
    letter-spacing: var(--ws-typo-label-sm-tracking);
}
.ws-typo-label-xs {
    font-size: calc(var(--ws-typo-label-xs-size) * var(--ws-typo-scale-label));
    font-weight: var(--ws-typo-label-xs-weight);
    line-height: var(--ws-typo-label-xs-lh);
    letter-spacing: var(--ws-typo-label-xs-tracking);
    text-transform: uppercase;
}

/* ─── NUMERIC classes (tabular alignment baked in) ─────────────────────── */
.ws-typo-numeric-xl,
.ws-typo-numeric-lg,
.ws-typo-numeric-md {
    font-family: var(--ws-font-numeric);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    margin: 0;
}
.ws-typo-numeric-xl {
    font-size: calc(var(--ws-typo-numeric-xl-size) * var(--ws-typo-scale-numeric));
    font-weight: var(--ws-typo-numeric-xl-weight);
    line-height: var(--ws-typo-numeric-xl-lh);
    letter-spacing: var(--ws-typo-numeric-xl-tracking);
}
.ws-typo-numeric-lg {
    font-size: calc(var(--ws-typo-numeric-lg-size) * var(--ws-typo-scale-numeric));
    font-weight: var(--ws-typo-numeric-lg-weight);
    line-height: var(--ws-typo-numeric-lg-lh);
    letter-spacing: var(--ws-typo-numeric-lg-tracking);
}
.ws-typo-numeric-md {
    font-size: calc(var(--ws-typo-numeric-md-size) * var(--ws-typo-scale-numeric));
    font-weight: var(--ws-typo-numeric-md-weight);
    line-height: var(--ws-typo-numeric-md-lh);
    letter-spacing: var(--ws-typo-numeric-md-tracking);
}

/* ─── QUOTE classes (italic by default — overridable inline) ──────────── */
.ws-typo-quote-lg,
.ws-typo-quote-md {
    font-family: var(--ws-font-quote);
    font-style: italic;
    text-wrap: balance;
    margin: 0;
}
.ws-typo-quote-lg {
    font-size: calc(var(--ws-typo-quote-lg-size) * var(--ws-typo-scale-quote));
    font-weight: var(--ws-typo-quote-lg-weight);
    line-height: var(--ws-typo-quote-lg-lh);
    letter-spacing: var(--ws-typo-quote-lg-tracking);
}
.ws-typo-quote-md {
    font-size: calc(var(--ws-typo-quote-md-size) * var(--ws-typo-scale-quote));
    font-weight: var(--ws-typo-quote-md-weight);
    line-height: var(--ws-typo-quote-md-lh);
    letter-spacing: var(--ws-typo-quote-md-tracking);
}

/* ─── CODE classes ─────────────────────────────────────────────────────── */
.ws-typo-code-md,
.ws-typo-code-sm {
    font-family: var(--ws-font-code);
}
.ws-typo-code-md {
    font-size: calc(var(--ws-typo-code-md-size) * var(--ws-typo-scale-code));
    font-weight: var(--ws-typo-code-md-weight);
    line-height: var(--ws-typo-code-md-lh);
    letter-spacing: var(--ws-typo-code-md-tracking);
}
.ws-typo-code-sm {
    font-size: calc(var(--ws-typo-code-sm-size) * var(--ws-typo-scale-code));
    font-weight: var(--ws-typo-code-sm-weight);
    line-height: var(--ws-typo-code-sm-lh);
    letter-spacing: var(--ws-typo-code-sm-tracking);
}

/* ============================================================================
   TIER C — exempt blocks freeze all typography vars locally.
   ============================================================================
   Heroes, globe-feature, animated-hover-image and interactive-image-gallery
   carry `.ws-typo-exempt` on their wrapper (auto-injected by the render
   callback in inc/components.php).

   Strategy: override every per-tier scale multiplier to 1 inside the exempt
   subtree. This short-circuits the calc() in every typography class:
     - .ws-typo-display-xl: calc(size * --ws-typo-scale-display)  →  size * 1
     - .text-fluid-h1     : calc(size * --ws-typo-scale-display)  →  size * 1
   So when the user scales the Display tier to 120%, the hero h1 stays at
   the BASE token size unaffected. Template-level size classes (text-7xl
   md:text-8xl etc.) continue to win on specificity / source order as
   before — this CSS does NOT force `inherit`, which would shrink heroes
   to body size.

   We do NOT use Layer-2 `font-size: inherit !important` because heroes set
   their own size via utility classes (text-fluid-h1, text-7xl, etc.) and
   that pattern must keep working.
   ============================================================================ */
.ws-typo-exempt {
    /* Neutralise every tier-scale multiplier inside this subtree */
    --ws-typo-scale-display: 1 !important;
    --ws-typo-scale-heading: 1 !important;
    --ws-typo-scale-title:   1 !important;
    --ws-typo-scale-body:    1 !important;
    --ws-typo-scale-label:   1 !important;
    --ws-typo-scale-numeric: 1 !important;
    --ws-typo-scale-quote:   1 !important;
    --ws-typo-scale-code:    1 !important;
    /* Legacy scale vars — same purpose for `.text-fluid-*` alias classes */
    --ws-scale-title:    1 !important;
    --ws-scale-subtitle: 1 !important;
    --ws-scale-body:     1 !important;
}