/*
 * typography-tokens.css
 *
 * Bridges the admin-controlled type-scale sliders (Settings → UI
 * Customization → Typography) to the actual class selectors used by
 * the storefront. Loaded LAST in header.php so it wins the cascade
 * over the per-component font-size values defined in their own files.
 *
 * Each var() includes a fallback that matches the original clamp/px
 * value, so unsaved settings leave the design unchanged.
 */

/* ---------- H1 — page hero / banner headlines ---------- */
.hero-headline,
.banner-title,
.lb-hero-headline,
.product-info-name,
.page-header-title,
h1.page-header-title,
.cart-page .page-header-title,
.empty-state-headline,
.lb-closing-title,
.newsletter-headline,
.footer-news-headline {
    font-size: var(--text-h1, clamp(2.2rem, 5.5vw, 4rem));
}

/* ---------- H2 — section headlines ---------- */
.home-section-title,
.home-section-head--rich .home-section-title,
.lookbook-headline,
.tk-title,
.size-guide-content section h4,
.order-summary-heading {
    font-size: var(--text-h2, clamp(1.6rem, 2.6vw, 2.25rem));
}

/* ---------- H3 — card / tile / mini-headline titles ---------- */
.category-tile-name,
.lb-look-name,
.hero-pin-name,
.product-card-name,
.nav-mega-tile-name,
.cart-line-name,
.footer-logo-word {
    font-size: var(--text-h3, clamp(1rem, 1.25vw, 1.2rem));
}

/* ---------- Body — paragraph + supporting text ---------- */
body,
p,
.home-section-sub,
.banner-sub,
.lb-hero-sub,
.lookbook-sub,
.product-info-tax,
.newsletter-blurb,
.footer-tagline,
.cart-line-meta,
.size-guide-table tbody td {
    font-size: var(--text-body, 15px);
}

/* ---------- Label / eyebrow / chip text ---------- */
.label,
.home-section-eyebrow,
.hero-eyebrow,
.banner-eyebrow,
.lb-hero-issue,
.product-card-cat,
.product-card-price-off,
.product-options-row .label,
.nav-primary a,
.nav-mega-heading,
.utility-bar,
.utility-bar-link,
.size-guide-eyebrow,
.footer-col-heading,
.footer-news-eyebrow,
.footer-marquee-item,
.hero-marquee-item {
    font-size: var(--text-label, 11px);
}

/* ---------- Button text ---------- */
.btn,
.btn-add-cart-large,
.btn-buy-now-large,
.hero-cta,
.banner-cta,
.lookbook-cta,
.lb-look-cta,
.home-section-link--btn,
.shop-sort-pill,
.shop-filters-apply,
.cart-summary-rail .btn-checkout,
.cart-coupon-row .btn,
.footer-news-submit,
.nav-search-submit {
    font-size: var(--text-button, 11px);
}

/* ---------- Product card title + price (already wired via tokens) ---------- */
.product-card-name,
.product-info-name-sm {
    font-size: var(--card-title-size, 13.5px);
}

.product-card-price-current,
.product-card-price-sale,
.cart-line-price strong,
.order-summary-row.total .value {
    font-size: var(--card-price-size, 13.5px);
}

/* Mobile is taken care of by the @media block in header.php which
   re-declares --text-* with the mobile slider values when
   (max-width: 768px) matches. The selectors above use the same vars,
   so the mobile scale lights up automatically. */