/* =========================================
   SITE-WIDE TYPE SCALE
   Loaded last on every page so all titles and
   paragraphs share the same sizes.
========================================= */

:root {
    --fs-hero: clamp(40px, 5vw, 68px);
    --fs-section: clamp(30px, 3.2vw, 44px);
    --fs-card: clamp(19px, 1.6vw, 24px);
    --fs-sub: 18px;
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-tag: 12px;
}

/* Main page / banner titles */
body h1 {
    font-size: var(--fs-hero) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.5px !important;
}

/* Section titles */
body h2 {
    font-size: var(--fs-section) !important;
    line-height: 1.2 !important;
}

/* Card titles */
body h3 {
    font-size: var(--fs-card) !important;
    line-height: 1.3 !important;
}

body h4 {
    font-size: var(--fs-sub) !important;
    line-height: 1.35 !important;
}

/* Paragraphs */
body p {
    font-size: var(--fs-body) !important;
    line-height: 1.7 !important;
}

/* Eyebrow tags above titles */
body :is(.sub-tag, .side-tag, .about-eyebrow, .page-eyebrow, .banner-eyebrow, .section-eyebrow, .radiance-tag, .beauty-tag) {
    font-size: var(--fs-tag) !important;
    letter-spacing: 1.5px !important;
}

/* Compact text that should stay small */
body .footer-section p,
body .footer-bottom p,
body .post-meta,
body :is(.organic-text, .about-image-label, .banner-floating-card, .revitalize-card-info, .revitalize-beauty-card, .revitalize-side-card, .radiance-card, .radiance-product-footer, .review-card, .post-card) p {
    font-size: var(--fs-small) !important;
    line-height: 1.6 !important;
}

body .footer-section h4 {
    font-size: 15px !important;
}

/* Banner titles that use h3 but read as section titles */
body .inner-beauty-banner .banner-right-content h3 {
    font-size: var(--fs-section) !important;
    line-height: 1.15 !important;
}

body .featured-post-body h2 {
    font-size: clamp(24px, 2.3vw, 32px) !important;
}

/* Small decorative card labels */
body .revitalize-side-card h4 {
    font-size: 16px !important;
    line-height: 1.25 !important;
}

body .revitalize-card-info h4 {
    font-size: 14px !important;
}

@media (max-width: 640px) {
    :root {
        --fs-hero: clamp(34px, 9vw, 44px);
        --fs-section: clamp(26px, 7vw, 32px);
        --fs-card: 19px;
        --fs-sub: 17px;
        --fs-body: 14.5px;
    }
}