/* Import the Exo font family */
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;500;600;700&display=swap');

:root {
    /* Base Font Family */
    --font-family-base: 'Exo', sans-serif;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-display: 1.05;
    --line-height-h1: 1.1;
    --line-height-h2: 1.15;
    --line-height-sub1: 1.2;
    --line-height-button: 1.25;
    --line-height-sub2: 1.3;
    --line-height-body: 1.6;

    /* Letter Spacings (Percentage converted to em) */
    --letter-spacing-tight: -0.005em; /* -0.5% */
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.005em;  /* 0.5% */
}

/* =========================================
   SEMANTIC TYPOGRAPHY CLASSES
========================================= */

/* --- Headings --- */
.text-display {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-tight);
    font-size: 2.75rem; /* Mobile (44px) */
}
@media (min-width: 768px) { .text-display { font-size: 3.75rem; } } /* Tablet (60px) */
@media (min-width: 1024px) { .text-display { font-size: 4.75rem; } } /* Desktop (96px) */

.text-header-1 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-tight);
    font-size: 2.25rem; /* Mobile (36px) */
}
@media (min-width: 768px) { .text-header-1 { font-size: 3rem; } } /* Tablet (48px) */
@media (min-width: 1024px) { .text-header-1 { font-size: 3.81rem; } } /* Desktop (61px) */

.text-header-2 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-tight);
    font-size: 1.875rem; /* Mobile (30px) */
}
@media (min-width: 768px) { .text-header-2 { font-size: 2.5rem; } } /* Tablet (40px) */
@media (min-width: 1024px) { .text-header-2 { font-size: 3.03rem; } } /* Desktop (49px) */

/* --- Sub Headings --- */
.text-sub-heading-1 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-sub1);
    letter-spacing: var(--letter-spacing-normal);
    font-size: 1.25rem; /* Mobile (20px) */
}
@media (min-width: 768px) { .text-sub-heading-1 { font-size: 1.25rem; } } /* Tablet (20px) */
@media (min-width: 1100px) { .text-sub-heading-1 { font-size: 1.5rem; } } /* Laptop (24px) */
@media (min-width: 1440px) { .text-sub-heading-1 { font-size: 2rem; } } /* Desktop (32px) */

.text-sub-heading-2 {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-sub2);
    letter-spacing: var(--letter-spacing-normal);
    font-size: 1.25rem; /* Mobile (20px) */
}
@media (min-width: 768px) { .text-sub-heading-2 { font-size: 1.375rem; } } /* Tablet (22px) */
@media (min-width: 1024px) { .text-sub-heading-2 { font-size: 1.563rem; } } /* Desktop (25px) */

/* --- Body Text --- */
.text-body-large {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-normal);
    font-size: 1.125rem; /* Mobile adjustment (18px) */
}
@media (min-width: 768px) { .text-body-large { font-size: 1.25rem; } } /* Tablet/Desktop (20px) */

.text-body {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-normal);
    font-size: 1rem; /* Universal (16px) */
}

.text-body-small {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-normal);
    font-size: 0.875rem; /* Universal (14px) */
}

/* --- Buttons --- */
.text-button-large {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-button);
    letter-spacing: var(--letter-spacing-wide);
    font-size: 1rem; /* Universal (16px) */
}

.text-button {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-button);
    letter-spacing: var(--letter-spacing-wide);
    font-size: 0.875rem; /* Universal (14px) */
}

.text-button-small {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-button);
    letter-spacing: var(--letter-spacing-wide);
    font-size: 0.75rem; /* Corrected to 12px */
}

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

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

/* =========================================
   NEW TYPOGRAPHY UTILITIES
========================================= */
.font-italic { 
    font-style: italic; 
}

.text-decoration-none { 
    text-decoration: none !important; 
}

.lh-relaxed { 
    line-height: 1.375; 
}

/* =========================================
   FORM LABEL / VALIDATION TEXT
========================================= */
.text-form-label {
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    font-size: 0.75rem; /* 12px across all breakpoints */
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-normal);
}