/* Typography System - Fluid Font Sizes */

:root {
    /* Base font sizes using fluid typography (viewport-based scaling) */
    /* Formula: calc((multiplier) * 1.2vw + base_rem) */
    /* This scales smoothly between mobile and desktop */
    
    /* Display / Hero Text */
    --font-size-display: calc(1.5 * 1.2vw + 1.5rem);  /* ~2.5rem - 4rem */
    
    /* Heading Sizes */
    --font-size-h1: calc(1 * 1.2vw + 1rem);            /* ~2rem - 2.5rem (navbar title) */
    --font-size-h2: calc(0.75 * 1.2vw + 1rem);         /* ~1.75rem - 2rem */
    --font-size-h3: 1.5rem;                             /* 24px - event card titles */
    --font-size-h4: 1.25rem;                            /* 20px */
    --font-size-h5: 1.125rem;                           /* 18px */
    --font-size-h6: 1rem;                               /* 16px */
    
    /* Body Text */
    --font-size-base: 1rem;                             /* 16px - default body */
    --font-size-large: 1.25rem;                         /* 20px - intro text, large paragraphs */
    --font-size-small: 0.875rem;                        /* 14px - captions, labels */
    --font-size-xs: 0.75rem;                            /* 12px - fine print */
    
    /* Navigation */
    --font-size-nav: calc(0.1 * 1.2vw + 1rem);          /* ~1rem - 1.2rem (navbar links) */
    --font-size-nav-mobile: calc(0.75 * 1.2vw + 1rem); /* ~1.75rem - 2rem (mobile menu) */
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.75;
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    :root {
        /* On mobile, reduce the multiplier effect for better readability */
        --font-size-h3: 1.25rem;  /* Slightly smaller on mobile */
        --font-size-large: 1.125rem;
    }
}

/* Mobile-first minimum sizes to prevent text being too small */
@media (max-width: 480px) {
    :root {
        --font-size-base: 1rem;  /* Ensure minimum 16px on mobile */
    }
}