/* Typography Best Practices - Professional Typographic Scale */

/* Base font settings for accessibility */
:root {
    /* Minimum readable font size (16px = 1rem) */
    font-size: 16px;
    
    /* Typographic Scale - Major Third (1.25 ratio) for better hierarchy */
    --scale-ratio: 1.25;
    
    /* Base sizes */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    
    /* Heading sizes using modular scale */
    --font-size-h6: 1rem;          /* 16px - base */
    --font-size-h5: 1.25rem;       /* 20px - h6 * 1.25 */
    --font-size-h4: 1.563rem;      /* 25px - h5 * 1.25 */
    --font-size-h3: 1.953rem;      /* 31px - h4 * 1.25 */
    --font-size-h2: 2.441rem;      /* 39px - h3 * 1.25 */
    --font-size-h1: 3.052rem;      /* 49px - h2 * 1.25 */
    
    /* Hero/Display sizes */
    --font-size-hero-sm: 2.5rem;   /* 40px */
    --font-size-hero-md: 3.5rem;   /* 56px */
    --font-size-hero-lg: 4.5rem;   /* 72px */
    
    /* Line heights - optimized for readability */
    --line-height-tight: 1.1;      /* For large display text */
    --line-height-heading: 1.25;   /* For headings */
    --line-height-base: 1.6;        /* For body text */
    --line-height-relaxed: 1.75;   /* For long-form content */
    
    /* Letter spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    
    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* Responsive font sizing */
@media (max-width: 768px) {
    :root {
        font-size: 15px; /* Slightly smaller on mobile */
        
        /* Adjust heading sizes for mobile */
        --font-size-h1: 2.25rem;    /* 36px */
        --font-size-h2: 1.875rem;   /* 30px */
        --font-size-h3: 1.5rem;     /* 24px */
        --font-size-h4: 1.25rem;    /* 20px */
        --font-size-h5: 1.125rem;   /* 18px */
        
        --font-size-hero-sm: 2rem;  /* 32px */
        --font-size-hero-md: 2.75rem; /* 44px */
        --font-size-hero-lg: 3.5rem;  /* 56px */
    }
}

@media (min-width: 1200px) {
    :root {
        font-size: 17px; /* Slightly larger on desktop */
    }
}

/* Ensure all text meets WCAG contrast requirements */
body {
    /* Minimum contrast ratio 4.5:1 for normal text */
    color: var(--text-light); /* #e0e0e0 on #0a0e27 = ~12:1 contrast */
}

/* Headings hierarchy - Best Practices */
h1, .h1 {
    font-size: clamp(var(--font-size-h3), 4vw + 1rem, var(--font-size-h1));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 0.75em;
}

h2, .h2 {
    font-size: clamp(var(--font-size-h4), 3vw + 1rem, var(--font-size-h2));
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 0.75em;
}

h3, .h3 {
    font-size: clamp(var(--font-size-h5), 2.5vw + 1rem, var(--font-size-h3));
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: 0.625em;
}

h4, .h4 {
    font-size: clamp(var(--font-size-base), 2vw + 1rem, var(--font-size-h4));
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: 0.5em;
}

h5, .h5 {
    font-size: clamp(var(--font-size-sm), 1.5vw + 1rem, var(--font-size-h5));
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: 0.5em;
}

h6, .h6 {
    font-size: clamp(var(--font-size-sm), 1vw + 1rem, var(--font-size-h6));
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

/* Paragraph and body text */
p {
    font-size: 1rem;
    line-height: var(--line-height-base);
    margin-bottom: 1em;
}

/* Small text (for disclaimers, captions) */
small, .text-small {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5;
}

/* Large text (for emphasis) */
.text-large {
    font-size: 1.125rem; /* 18px */
    line-height: var(--line-height-base);
}

/* Links */
a {
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover, a:focus {
    text-decoration: underline;
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Prevent text from being too narrow or too wide (optimal reading width) */
article, .content-area {
    max-width: 65ch; /* Optimal reading width */
}

/* Font loading optimization */
@font-face {
    font-display: swap; /* Show fallback immediately, swap when loaded */
}