/* ============================================================================
   Typography
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }

.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

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

.section-label {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-amber);
    margin-bottom: var(--space-sm);
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-md);
}

.section-subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
    .section-title {
        font-size: var(--text-3xl);
    }
    .section-subtitle {
        font-size: var(--text-base);
    }
}