/**
 * Le Tour de Moi - Typography
 * Gestion de la police Manrope et de la hiérarchie textuelle.
 */

/* Import Manrope depuis Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

/* --- Hiérarchie des Titres --- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    color: var(--clr-text-main);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

h1 {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-lg);
}

h2 {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-md);
}

h3 {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-md);
}

h4 {
    font-size: var(--fs-lg);
    margin-bottom: var(--space-sm);
}

h5 {
    font-size: var(--fs-md);
    margin-bottom: var(--space-xs);
}

h6 {
    font-size: var(--fs-base);
    margin-bottom: var(--space-xs);
}

/* --- Corps de texte --- */

p {
    margin-bottom: var(--space-md);
    font-size: var(--fs-base);
}

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

.small,
small {
    font-size: var(--fs-sm);
}

.caption {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--fw-semibold);
    color: var(--clr-text-secondary);
}

/* --- Utilitaires de graisse --- */

.fw-light { font-weight: var(--fw-light); }
.fw-normal { font-weight: var(--fw-normal); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.fw-extrabold { font-weight: var(--fw-extrabold); }

/* --- Responsive Typography --- */

@media (min-width: 768px) {
    h1 { font-size: var(--fs-4xl); }
    h2 { font-size: var(--fs-3xl); }
    h3 { font-size: var(--fs-2xl); }
}