/* 
 * Typography System - Optimized for Brand Identity & WooCommerce Compatibility
 */

:root {
    /* Scale Base: 16px */
    --text-base: var(--fs-body, 1rem);
    --text-small: var(--fs-small, 0.875rem);

    /* Brand Font Stack */
    --inchcape-font-stack: var(--font-brand, "ITC Avant Garde Gothic", "Avant Garde Gothic Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);

    /* Type Scale */
    --h1-size: var(--fs-page-title, 3rem);
    --h2-size: var(--fs-section-title, 2rem);
    --h3-size: var(--fs-subsection-title, 1.5rem);
    --h4-size: 1.25rem;
    --body-line-height: 1.4;
    --heading-line-height: var(--lh-page-title, 1.2);
    --h3-line-height: 1.8;
}

html, body {
    font-family: var(--inchcape-font-stack);
    font-size: 16px;
    line-height: var(--body-line-height);
    color: var(--color-text-primary, var(--color-dark-grey, #394650));
    background-color: var(--color-white, #fff);
    -webkit-font-smoothing: antialiased;
}

/* Global Text Elements */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, label, input, select, textarea, button, .button, li, td, th {
    font-family: var(--inchcape-font-stack);
}

/* Headers Specific Styling */
h1, .h1 { font-size: var(--h1-size); font-weight: 800; color: var(--color-dark-blue, #001a41); }
h2, .h2 { font-size: var(--h2-size); font-weight: 400; color: #000; }
h3, .h3 { font-size: var(--h3-size); font-weight: 400; color: var(--color-dark-blue, #001a41); line-height: var(--h3-line-height); }
h4, .h4 { font-size: var(--h4-size); font-weight: 400; color: #565656; }

p { margin-bottom: 1.5rem; }

/* Elements that need enforcement due to specific widget overrides */
.review-origin-badge, .brand-small, .review-title, .badge-destacada {
    font-family: var(--inchcape-font-stack) !important;
}

/* 
 * CRITICAL: Icon Protection
 * We must ensure that anything intended as an icon is NEVER forced to the brand font.
 */
.star-rating, 
.star-rating::before, 
.star-rating span, 
.star-rating span::before,
.dashicons,
.dashicons-before,
[class*="icon-"] {
    font-family: 'star' !important; /* Default for WC stars */
}

/* Restore Dashicons */
.dashicons, .dashicons-before {
    font-family: dashicons !important;
}

/* Accessibility */
@media screen and (max-width: 768px) {
    :root {
        --h1-size: 2.5rem;
        --h2-size: 1.75rem;
    }
}