/*
 * Total Jerk - Admin-controlled storefront typography sizing
 * Values are injected as CSS variables in includes/storefront-ui.php.
 */

body.tj-page {
    font-family: var(--tj-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-size: var(--tj-body-font-size, 16px);
}

.tj-brand strong {
    font-size: var(--tj-header-name-font-size, 20px);
}

.tj-brand small {
    font-size: var(--tj-header-slogan-font-size, 13px);
}

.tj-nav a,
.tj-account-trigger,
.tj-account-dropdown a {
    font-size: var(--tj-header-links-font-size, 16px);
}

.tj-header-search-input,
.tj-header-search-btn {
    font-size: var(--tj-header-search-font-size, 14px);
}

.tj-kicker {
    font-size: var(--tj-kicker-font-size, 12px);
}

.tj-hero h1 {
    font-size: clamp(2rem, 6vw, var(--tj-hero-headline-font-size, 92px));
}

.tj-hero p,
.tj-page-heading p,
.tj-product-detail .lead {
    font-size: var(--tj-hero-copy-font-size, 18px);
}

.tj-section h2,
.tj-page-heading h1,
.tj-product-detail h1 {
    font-size: clamp(1.8rem, 4vw, var(--tj-section-heading-font-size, 58px));
}

.tj-section-copy,
.tj-category-card p,
.tj-results-meta,
.tj-info-grid p,
.tj-detail-card p {
    font-size: var(--tj-section-copy-font-size, 16px);
}

.tj-product-content h3,
.tj-product-content h3 a {
    font-size: var(--tj-product-title-font-size, 20px);
}

.tj-product-content p,
.tj-product-bottom span,
.tj-variant-option span {
    font-size: var(--tj-product-copy-font-size, 15px);
}

.tj-btn,
.tj-cart-link,
.tj-form-button,
button,
input[type="submit"] {
    font-size: var(--tj-button-font-size, 16px);
}

.tj-footer h2 {
    font-size: clamp(1.6rem, 3vw, var(--tj-footer-heading-font-size, 42px));
}

.tj-footer p {
    font-size: var(--tj-footer-copy-font-size, 16px);
}

.tj-footer-links a {
    font-size: var(--tj-footer-links-font-size, 16px);
}