/* ============================================
   Utility Classes for Font Standardization
   ============================================
   
   Use these classes instead of inline styles
   to maintain consistency across the theme.
   ============================================ */

/* Font Size Utility Classes */
.text-xs {
    font-size: var(--font-size-xs) !important;
}

.text-sm {
    font-size: var(--font-size-sm) !important;
}

.text-base {
    font-size: var(--font-size-base) !important;
}

.text-md {
    font-size: var(--font-size-md) !important;
}

.text-lg {
    font-size: var(--font-size-lg) !important;
}

/* Font Weight Utility Classes */
.font-normal {
    font-weight: var(--font-normal) !important;
}

.font-medium {
    font-weight: var(--font-medium) !important;
}

.font-semibold {
    font-weight: var(--font-semibold) !important;
}

.font-bold {
    font-weight: var(--font-bold) !important;
}

/* Font Family Utility Classes */
.font-heading {
    font-family: var(--font-family-heading) !important;
}

.font-body {
    font-family: var(--font-family-body) !important;
}

/* Combined Utility Classes for Common Patterns */
.hero-subtitle {
    font-family: var(--font-family-body);
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: 1.625;
}

.section-description {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.625;
}

.card-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h4);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

.card-description {
    font-family: var(--font-family-body);
    font-size: var(--font-size-md);
    color: var(--text-secondary);
    line-height: 1.625;
}

.cta-description {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.625;
}

/* Responsive Font Size Utilities */
@media (max-width: 768px) {
    .text-lg-responsive {
        font-size: var(--font-size-base);
    }

    .hero-subtitle {
        font-size: var(--font-size-base);
    }
}

/* Usage Examples:
   
   Instead of:
   <p style="font-size: 1.125rem;">Text</p>
   
   Use:
   <p class="text-lg">Text</p>
   
   Instead of:
   <p style="font-size: 1.125rem; color: var(--text-secondary); line-height: 1.625;">
   
   Use:
   <p class="hero-subtitle">Text</p>
*/