/**
 * Typography Styles
 * 
 * All text styling and hierarchy
 */

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    color: var(--color-sage-green);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-lg);
}

h1 {
    font-size: var(--font-size-h1);
    letter-spacing: 0.5px;
}

h2 {
    font-size: var(--font-size-h2);
    letter-spacing: 0.5px;
}

h3 {
    font-size: var(--font-size-h3);
    letter-spacing: 0.3px;
    font-weight: var(--font-weight-medium);
}

h4 {
    font-size: var(--font-size-h4);
    letter-spacing: 0.3px;
    font-weight: var(--font-weight-medium);
}

/* Paragraphs */
p {
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
    color: var(--color-warm-charcoal);
    margin-bottom: var(--space-lg);
}

p:last-child {
    margin-bottom: 0;
}

/* Large body text */
.large-text {
    font-size: var(--font-size-body-large);
}

/* Small text */
.small-text {
    font-size: var(--font-size-body-small);
    color: var(--color-warm-gray);
}

/* Caption text */
.caption {
    font-family: var(--font-secondary);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-light);
    color: var(--color-warm-gray);
    line-height: 1.5;
}

/* Emphasis */
strong {
    font-weight: var(--font-weight-bold);
}

em {
    font-style: italic;
}

/* Container */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--mobile-padding);
}

/* Narrow container for text-heavy sections */
.narrow {
    max-width: var(--reading-width);
    margin-left: auto;
    margin-right: auto;
}

/* Section content wrapper */
.section-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Section headline */
.section-headline {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    h1 {
        margin-bottom: var(--space-md);
    }
    
    h2 {
        margin-bottom: var(--space-lg);
    }
    
    .section-headline {
        margin-bottom: var(--space-2xl);
    }
}