/* ============================================================================
   Websly 5.1 — Typography Categories (v2 — 12 categories)
   ============================================================================
   12 user-facing category classes consuming `--ws-typo-cat-<slug>-*` vars
   emitted by inc/customizer/panel-typography.php on wp_head priority 6.

   The 12 categories are:
     section-title, section-subtitle, section-badge,
     card-title, card-subtitle, card-body,
     quote, button, alt-button,
     footer, nav-item, other

   Hero typography is NOT in this list. Heroes are controlled per-block via
   their inspector backend (block JS) and freeze the category vars locally
   via `.ws-typo-exempt`.

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

:root {
    /* Hardcoded fallback values. emit_css overwrites these on wp_head. */

    /* Section header */
    --ws-typo-cat-section-title-family:    inherit;
    --ws-typo-cat-section-title-size:      clamp(2.25rem, 1.25rem + 4.4444vw, 4.5rem);
    --ws-typo-cat-section-title-weight:    700;
    --ws-typo-cat-section-title-tracking:  -0.02em;
    --ws-typo-cat-section-title-lh:        1.1;
    --ws-typo-cat-section-title-style:     normal;

    --ws-typo-cat-section-subtitle-family:    inherit;
    --ws-typo-cat-section-subtitle-size:      clamp(1.0625rem, 0.9931rem + 0.3086vw, 1.25rem);
    --ws-typo-cat-section-subtitle-weight:    400;
    --ws-typo-cat-section-subtitle-tracking:  0;
    --ws-typo-cat-section-subtitle-lh:        1.55;
    --ws-typo-cat-section-subtitle-style:     normal;

    --ws-typo-cat-section-badge-family:    inherit;
    --ws-typo-cat-section-badge-size:      clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem);
    --ws-typo-cat-section-badge-weight:    500;
    --ws-typo-cat-section-badge-tracking:  0.05em;
    --ws-typo-cat-section-badge-lh:        1.4;
    --ws-typo-cat-section-badge-style:     normal;

    /* Card */
    --ws-typo-cat-card-title-family:    inherit;
    --ws-typo-cat-card-title-size:      clamp(1.25rem, 1.1667rem + 0.3704vw, 1.5rem);
    --ws-typo-cat-card-title-weight:    600;
    --ws-typo-cat-card-title-tracking:  -0.01em;
    --ws-typo-cat-card-title-lh:        1.2;
    --ws-typo-cat-card-title-style:     normal;

    --ws-typo-cat-card-subtitle-family:    inherit;
    --ws-typo-cat-card-subtitle-size:      clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
    --ws-typo-cat-card-subtitle-weight:    500;
    --ws-typo-cat-card-subtitle-tracking:  0;
    --ws-typo-cat-card-subtitle-lh:        1.25;
    --ws-typo-cat-card-subtitle-style:     normal;

    --ws-typo-cat-card-body-family:    inherit;
    --ws-typo-cat-card-body-size:      clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem);
    --ws-typo-cat-card-body-weight:    400;
    --ws-typo-cat-card-body-tracking:  0;
    --ws-typo-cat-card-body-lh:        1.6;
    --ws-typo-cat-card-body-style:     normal;

    /* Quote / testimonial */
    --ws-typo-cat-quote-family:    inherit;
    --ws-typo-cat-quote-size:      clamp(1.125rem, 1.0417rem + 0.3704vw, 1.375rem);
    --ws-typo-cat-quote-weight:    400;
    --ws-typo-cat-quote-tracking:  -0.005em;
    --ws-typo-cat-quote-lh:        1.5;
    --ws-typo-cat-quote-style:     italic;

    /* Buttons */
    --ws-typo-cat-button-family:    inherit;
    --ws-typo-cat-button-size:      clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
    --ws-typo-cat-button-weight:    500;
    --ws-typo-cat-button-tracking:  0;
    --ws-typo-cat-button-lh:        1.4;
    --ws-typo-cat-button-style:     normal;

    --ws-typo-cat-alt-button-family:    inherit;
    --ws-typo-cat-alt-button-size:      clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem);
    --ws-typo-cat-alt-button-weight:    500;
    --ws-typo-cat-alt-button-tracking:  0;
    --ws-typo-cat-alt-button-lh:        1.4;
    --ws-typo-cat-alt-button-style:     normal;

    /* Footer (single category — used by footer links, copyright, etc.) */
    --ws-typo-cat-footer-family:    inherit;
    --ws-typo-cat-footer-size:      0.875rem;
    --ws-typo-cat-footer-weight:    400;
    --ws-typo-cat-footer-tracking:  0;
    --ws-typo-cat-footer-lh:        1.55;
    --ws-typo-cat-footer-style:     normal;

    /* Navbar */
    --ws-typo-cat-nav-item-family:    inherit;
    --ws-typo-cat-nav-item-size:      clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
    --ws-typo-cat-nav-item-weight:    500;
    --ws-typo-cat-nav-item-tracking:  0;
    --ws-typo-cat-nav-item-lh:        1.4;
    --ws-typo-cat-nav-item-style:     normal;

    /* Other (catch-all for stat labels, form labels, code, sub-nav, etc.) */
    --ws-typo-cat-other-family:    inherit;
    --ws-typo-cat-other-size:      clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem);
    --ws-typo-cat-other-weight:    400;
    --ws-typo-cat-other-tracking:  0;
    --ws-typo-cat-other-lh:        1.5;
    --ws-typo-cat-other-style:     normal;
}

/* ============================================================================
   CATEGORY UTILITY CLASSES — .ws-typo-<category>
   ============================================================================
   Each class applies every property from its category vars in one shot.
   Old 5.1 token classes (.ws-typo-heading-xl, .ws-typo-body-md, etc.) are
   aliased to the matching category by sharing the selector group — so any
   template that uses a token class still picks up the category's Customizer
   settings. ============================================================================ */

.ws-typo-section-title,
.ws-typo-heading-xl, .ws-typo-display-xl, .ws-typo-display-lg, .ws-typo-display-md {
    font-family:    var(--ws-typo-cat-section-title-family);
    font-size:      var(--ws-typo-cat-section-title-size);
    font-weight:    var(--ws-typo-cat-section-title-weight);
    letter-spacing: var(--ws-typo-cat-section-title-tracking);
    line-height:    var(--ws-typo-cat-section-title-lh);
    font-style:     var(--ws-typo-cat-section-title-style);
    text-wrap: balance;
    margin: 0;
}

.ws-typo-section-subtitle,
.ws-typo-body-lg {
    font-family:    var(--ws-typo-cat-section-subtitle-family);
    font-size:      var(--ws-typo-cat-section-subtitle-size);
    font-weight:    var(--ws-typo-cat-section-subtitle-weight);
    letter-spacing: var(--ws-typo-cat-section-subtitle-tracking);
    line-height:    var(--ws-typo-cat-section-subtitle-lh);
    font-style:     var(--ws-typo-cat-section-subtitle-style);
}

.ws-typo-section-badge,
.ws-typo-label-xs {
    font-family:    var(--ws-typo-cat-section-badge-family);
    font-size:      var(--ws-typo-cat-section-badge-size);
    font-weight:    var(--ws-typo-cat-section-badge-weight);
    letter-spacing: var(--ws-typo-cat-section-badge-tracking);
    line-height:    var(--ws-typo-cat-section-badge-lh);
    font-style:     var(--ws-typo-cat-section-badge-style);
    text-transform: uppercase;
}

.ws-typo-card-title,
.ws-typo-heading-lg, .ws-typo-heading-md, .ws-typo-title-lg {
    font-family:    var(--ws-typo-cat-card-title-family);
    font-size:      var(--ws-typo-cat-card-title-size);
    font-weight:    var(--ws-typo-cat-card-title-weight);
    letter-spacing: var(--ws-typo-cat-card-title-tracking);
    line-height:    var(--ws-typo-cat-card-title-lh);
    font-style:     var(--ws-typo-cat-card-title-style);
    text-wrap: balance;
    margin: 0;
}

.ws-typo-card-subtitle,
.ws-typo-heading-sm, .ws-typo-title-md, .ws-typo-title-sm {
    font-family:    var(--ws-typo-cat-card-subtitle-family);
    font-size:      var(--ws-typo-cat-card-subtitle-size);
    font-weight:    var(--ws-typo-cat-card-subtitle-weight);
    letter-spacing: var(--ws-typo-cat-card-subtitle-tracking);
    line-height:    var(--ws-typo-cat-card-subtitle-lh);
    font-style:     var(--ws-typo-cat-card-subtitle-style);
    margin: 0;
}

.ws-typo-card-body,
.ws-typo-body-sm, .ws-typo-body-md {
    font-family:    var(--ws-typo-cat-card-body-family);
    font-size:      var(--ws-typo-cat-card-body-size);
    font-weight:    var(--ws-typo-cat-card-body-weight);
    letter-spacing: var(--ws-typo-cat-card-body-tracking);
    line-height:    var(--ws-typo-cat-card-body-lh);
    font-style:     var(--ws-typo-cat-card-body-style);
}

.ws-typo-quote,
.ws-typo-quote-lg, .ws-typo-quote-md {
    font-family:    var(--ws-typo-cat-quote-family);
    font-size:      var(--ws-typo-cat-quote-size);
    font-weight:    var(--ws-typo-cat-quote-weight);
    letter-spacing: var(--ws-typo-cat-quote-tracking);
    line-height:    var(--ws-typo-cat-quote-lh);
    font-style:     var(--ws-typo-cat-quote-style);
    text-wrap: balance;
    margin: 0;
}

.ws-typo-button,
.ws-typo-label-md, .ws-typo-label-lg {
    font-family:    var(--ws-typo-cat-button-family);
    font-size:      var(--ws-typo-cat-button-size);
    font-weight:    var(--ws-typo-cat-button-weight);
    letter-spacing: var(--ws-typo-cat-button-tracking);
    line-height:    var(--ws-typo-cat-button-lh);
    font-style:     var(--ws-typo-cat-button-style);
}

.ws-typo-alt-button {
    font-family:    var(--ws-typo-cat-alt-button-family);
    font-size:      var(--ws-typo-cat-alt-button-size);
    font-weight:    var(--ws-typo-cat-alt-button-weight);
    letter-spacing: var(--ws-typo-cat-alt-button-tracking);
    line-height:    var(--ws-typo-cat-alt-button-lh);
    font-style:     var(--ws-typo-cat-alt-button-style);
}

.ws-typo-footer {
    font-family:    var(--ws-typo-cat-footer-family);
    font-size:      var(--ws-typo-cat-footer-size);
    font-weight:    var(--ws-typo-cat-footer-weight);
    letter-spacing: var(--ws-typo-cat-footer-tracking);
    line-height:    var(--ws-typo-cat-footer-lh);
    font-style:     var(--ws-typo-cat-footer-style);
}

.ws-typo-nav-item {
    font-family:    var(--ws-typo-cat-nav-item-family);
    font-size:      var(--ws-typo-cat-nav-item-size);
    font-weight:    var(--ws-typo-cat-nav-item-weight);
    letter-spacing: var(--ws-typo-cat-nav-item-tracking);
    line-height:    var(--ws-typo-cat-nav-item-lh);
    font-style:     var(--ws-typo-cat-nav-item-style);
}

.ws-typo-other,
.ws-typo-label-sm, .ws-typo-numeric-xl, .ws-typo-numeric-lg, .ws-typo-numeric-md,
.ws-typo-code-md, .ws-typo-code-sm {
    font-family:    var(--ws-typo-cat-other-family);
    font-size:      var(--ws-typo-cat-other-size);
    font-weight:    var(--ws-typo-cat-other-weight);
    letter-spacing: var(--ws-typo-cat-other-tracking);
    line-height:    var(--ws-typo-cat-other-lh);
    font-style:     var(--ws-typo-cat-other-style);
}

/* ============================================================================
   TIER C — Exempt blocks (heroes, globe, animated-hover-image, etc.) ignore
   the entire system.

   `unset` cancels inheritance of every category size var inside the subtree,
   so any descendant token class with `var(--ws-typo-cat-...-size)` falls back
   to its property's default (browser default), letting the block's own
   size class win on specificity / source order.
   ============================================================================ */
.ws-typo-exempt {
    --ws-typo-cat-section-title-size:     unset;
    --ws-typo-cat-section-subtitle-size:  unset;
    --ws-typo-cat-section-badge-size:     unset;
    --ws-typo-cat-card-title-size:        unset;
    --ws-typo-cat-card-subtitle-size:     unset;
    --ws-typo-cat-card-body-size:         unset;
    --ws-typo-cat-quote-size:             unset;
    --ws-typo-cat-button-size:            unset;
    --ws-typo-cat-alt-button-size:        unset;
    --ws-typo-cat-footer-size:            unset;
    --ws-typo-cat-nav-item-size:          unset;
    --ws-typo-cat-other-size:             unset;
}