/**
 * Fluid Typography
 * Font sizes that scale smoothly between breakpoints using CSS clamp()
 * Requirements: 3.8
 */

/* ============================================
   FLUID TYPOGRAPHY SYSTEM
   Uses CSS clamp() for smooth scaling
   Format: clamp(min, preferred, max)
   ============================================ */

:root {
    /* Fluid font sizes - scale between mobile and desktop */
    --font-size-fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);      /* 12px -> 14px */
    --font-size-fluid-sm: clamp(0.8125rem, 0.75rem + 0.3125vw, 0.9375rem); /* 13px -> 15px */
    --font-size-fluid-base: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);       /* 14px -> 16px */
    --font-size-fluid-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);           /* 16px -> 18px */
    --font-size-fluid-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);        /* 18px -> 20px */
    --font-size-fluid-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);        /* 20px -> 24px */
    --font-size-fluid-3xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);          /* 24px -> 30px */
    --font-size-fluid-4xl: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);            /* 32px -> 40px */
    --font-size-fluid-5xl: clamp(2.5rem, 2.1rem + 2vw, 3.125rem);          /* 40px -> 50px */
    --font-size-fluid-6xl: clamp(3rem, 2.5rem + 2.5vw, 3.75rem);           /* 48px -> 60px */
}

/* ============================================
   FLUID TYPOGRAPHY UTILITY CLASSES
   ============================================ */

.text-fluid-xs { font-size: var(--font-size-fluid-xs) !important; }
.text-fluid-sm { font-size: var(--font-size-fluid-sm) !important; }
.text-fluid-base { font-size: var(--font-size-fluid-base) !important; }
.text-fluid-lg { font-size: var(--font-size-fluid-lg) !important; }
.text-fluid-xl { font-size: var(--font-size-fluid-xl) !important; }
.text-fluid-2xl { font-size: var(--font-size-fluid-2xl) !important; }
.text-fluid-3xl { font-size: var(--font-size-fluid-3xl) !important; }
.text-fluid-4xl { font-size: var(--font-size-fluid-4xl) !important; }
.text-fluid-5xl { font-size: var(--font-size-fluid-5xl) !important; }
.text-fluid-6xl { font-size: var(--font-size-fluid-6xl) !important; }

/* ============================================
   FLUID SPACING
   Spacing that scales with viewport
   ============================================ */

:root {
    --space-fluid-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);   /* 4px -> 6px */
    --space-fluid-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);      /* 8px -> 12px */
    --space-fluid-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);           /* 16px -> 24px */
    --space-fluid-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);      /* 24px -> 36px */
    --space-fluid-xl: clamp(2rem, 1.6rem + 2vw, 3rem);             /* 32px -> 48px */
    --space-fluid-2xl: clamp(3rem, 2.4rem + 3vw, 4.5rem);          /* 48px -> 72px */
}

/* ============================================
   SEMANTIC TYPOGRAPHY CLASSES
   Apply fluid typography to common elements
   ============================================ */

/* Headings with fluid sizing */
.heading-1,
h1.fluid {
    font-size: var(--font-size-fluid-4xl);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-tight, 1.2);
    letter-spacing: var(--letter-spacing-tight, -0.01em);
}

.heading-2,
h2.fluid {
    font-size: var(--font-size-fluid-3xl);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-tight, 1.2);
}

.heading-3,
h3.fluid {
    font-size: var(--font-size-fluid-2xl);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-normal, 1.5);
}

.heading-4,
h4.fluid {
    font-size: var(--font-size-fluid-xl);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-normal, 1.5);
}

.heading-5,
h5.fluid {
    font-size: var(--font-size-fluid-lg);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-normal, 1.5);
}

.heading-6,
h6.fluid {
    font-size: var(--font-size-fluid-base);
    font-weight: var(--font-weight-medium, 500);
    line-height: var(--line-height-normal, 1.5);
}

/* Body text with fluid sizing */
.body-large {
    font-size: var(--font-size-fluid-lg);
    line-height: var(--line-height-relaxed, 1.75);
}

.body-base {
    font-size: var(--font-size-fluid-base);
    line-height: var(--line-height-normal, 1.5);
}

.body-small {
    font-size: var(--font-size-fluid-sm);
    line-height: var(--line-height-normal, 1.5);
}

/* Display text (hero sections) */
.display-large {
    font-size: var(--font-size-fluid-6xl);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-tight, 1.2);
    letter-spacing: var(--letter-spacing-tight, -0.01em);
}

.display-medium {
    font-size: var(--font-size-fluid-5xl);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-tight, 1.2);
    letter-spacing: var(--letter-spacing-tight, -0.01em);
}

.display-small {
    font-size: var(--font-size-fluid-4xl);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-tight, 1.2);
}

/* ============================================
   RESPONSIVE LINE HEIGHT
   ============================================ */

.leading-none { line-height: 1 !important; }
.leading-tight { line-height: var(--line-height-tight, 1.2) !important; }
.leading-normal { line-height: var(--line-height-normal, 1.5) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed, 1.75) !important; }
.leading-loose { line-height: var(--line-height-loose, 2) !important; }

/* ============================================
   ACCESSIBILITY - TEXT RESIZE SUPPORT
   Ensures text can scale up to 200% without breaking layout
   ============================================ */

@media (min-width: 1024px) {
    /* Allow text to scale on larger screens */
    html {
        font-size: 100%; /* 16px base */
    }
}

/* Support for user text size preferences */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}