/**
 * Typography Styles
 * Text styling and typography rules
 */

body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    color: var(--color-text-body);
    font-weight: 400;
    line-height: 1.6;
}

/* Typography hierarchy */
h1, h2, h3, h4, h5, h6 {
    margin: 0.5em 0;
    color: var(--color-text-title);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    font-family: var(--font-family-heading);
}

h1 {
    font-size: clamp(2em, 5vw, 2.5em);
    line-height: 1.2;
    letter-spacing: 0.02em;
}

h2 {
    font-size: clamp(1.75em, 4vw, 2em);
    line-height: 1.25;
    letter-spacing: 0.015em;
}

h3 {
    font-size: clamp(1.25em, 3vw, 1.5em);
    line-height: 1.3;
    letter-spacing: 0.01em;
}

h4 {
    font-size: clamp(1.1em, 2.5vw, 1.25em);
    line-height: 1.3;
}

h5 {
    font-size: clamp(1em, 2vw, 1.1em);
    line-height: 1.4;
}

h6 {
    font-size: clamp(0.9em, 1.8vw, 1em);
    line-height: 1.4;
}

p {
    line-height: 1.6;
    margin: 1em 0;
}

/* Responsive Typography - Mobile optimizations */
@media (max-width: 768px) {
    body {
        font-size: clamp(14px, 4vw, 16px);
        line-height: 1.65;
    }
    
    h1 {
        line-height: 1.15;
        margin: 0.75em 0 0.5em 0;
    }
    
    h2 {
        line-height: 1.2;
        margin: 0.75em 0 0.5em 0;
    }
    
    h3 {
        line-height: 1.25;
        margin: 0.75em 0 0.5em 0;
    }
    
    p {
        line-height: 1.7;
        margin: 1.25em 0;
    }
}

@media (max-width: 480px) {
    body {
        line-height: 1.7;
    }
    
    p {
        line-height: 1.75;
    }
}