/**
 * ================================================================
 * SYSTÈME TYPOGRAPHIQUE GLOBAL - BERLINER PHILHARMONIKER
 * Professional • Elegant • Concert Program Typography
 * ================================================================
 */

/* ===== FONTS IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Crimson+Text:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ===== TYPOGRAPHY VARIABLES ===== */
:root {
    /* Fonts */
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-body: 'Crimson Text', 'Georgia', serif;
    
    /* Sizes Desktop */
    --text-h1: clamp(40px, 6vw, 52px);
    --text-h2: clamp(28px, 4vw, 34px);
    --text-h3: clamp(22px, 3vw, 26px);
    --text-body: clamp(17px, 2vw, 19px);
    --text-nav: 15px;
    --text-footer: 14px;
    
    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-normal: 1.4;
    --line-height-body: 1.8;
    
    /* Letter Spacing */
    --letter-tight: -0.01em;
    --letter-normal: 0;
    --letter-wide: 0.03em;
    --letter-wider: 0.06em;
    
    /* Typography Colors */
    --color-text-primary: #2C2C2C;
    --color-text-light: #F5F5F0;
    --color-text-muted: rgba(44, 44, 44, 0.7);
    --color-text-accent: #D4A574;
}

/* ===== TYPOGRAPHY RESET ===== */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: inherit;
}

p {
    margin: 0;
    padding: 0;
}

/* ===== HEADINGS SYSTEM ===== */
.heading-1,
h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: 500;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-tight);
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

.heading-2,
h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 500;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-normal);
    color: var(--color-text-primary);
    margin-bottom: 1.25rem;
}

.heading-3,
h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: 400;
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-normal);
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

/* ===== BODY TEXT SYSTEM ===== */
.body-text,
p {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-normal);
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

.body-large {
    font-family: var(--font-body);
    font-size: calc(var(--text-body) + 2px);
    font-weight: 400;
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-wide);
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

.body-small {
    font-family: var(--font-body);
    font-size: calc(var(--text-body) - 2px);
    font-weight: 400;
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-normal);
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

/* ===== NAVIGATION TYPOGRAPHY ===== */
.nav-text {
    font-family: var(--font-body);
    font-size: var(--text-nav);
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ===== FOOTER TYPOGRAPHY ===== */
.footer-text {
    font-family: var(--font-body);
    font-size: var(--text-footer);
    font-weight: 400;
    letter-spacing: 0.3px;
}

/* ===== SPECIAL TYPOGRAPHY ===== */
.text-accent {
    color: var(--color-text-accent);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-light {
    color: var(--color-text-light);
}

.text-center {
    text-align: center;
}

.text-italic {
    font-style: italic;
}

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--letter-wider);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    :root {
        --text-h1: clamp(32px, 8vw, 40px);
        --text-h2: clamp(24px, 6vw, 28px);
        --text-h3: clamp(20px, 4vw, 22px);
        --text-body: clamp(16px, 3vw, 17px);
        --text-nav: 14px;
        --text-footer: 13px;
    }
    
    .heading-1, h1 {
        margin-bottom: 1.25rem;
    }
    
    .heading-2, h2 {
        margin-bottom: 1rem;
    }
    
    .heading-3, h3 {
        margin-bottom: 0.75rem;
    }
    
    .body-text, p {
        margin-bottom: 1.25rem;
    }
}

@media (max-width: 480px) {
    :root {
        --line-height-body: 1.7;
    }
    
    .heading-1, h1 {
        margin-bottom: 1rem;
    }
    
    .heading-2, h2 {
        margin-bottom: 0.875rem;
    }
    
    .heading-3, h3 {
        margin-bottom: 0.75rem;
    }
    
    .body-text, p {
        margin-bottom: 1rem;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none;
        animation: none;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .heading-1, h1,
    .heading-2, h2,
    .heading-3, h3 {
        page-break-after: avoid;
    }
    
    .body-text, p {
        orphans: 3;
        widows: 3;
    }
}