/* ============================================
   TYPOGRAPHIE COHÉRENTE
   Hiérarchie et styles de texte standardisés
   ============================================ */

/* ============================================
   BASE TYPOGRAPHIQUE
   ============================================ */

body {
    font-family: var(--font-sans);
    font-size: var(--text-base); /* 16px minimum pour WCAG AA */
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Assurer un contraste suffisant (WCAG AA) */
body, p, .body {
    color: var(--dark); /* #1A1A2E sur blanc = ratio 12.6:1 - excellent */
}

/* Textes secondaires avec contraste suffisant */
.text-muted, .text-muted-light {
    color: var(--gray-600); /* #757575 sur blanc = ratio 4.5:1 - WCAG AA */
}

/* ============================================
   HIÉRARCHIE DES TITRES
   ============================================ */

h1, .h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--dark);
    margin-bottom: var(--spacing-6);
    letter-spacing: var(--tracking-tight);
}

h2, .h2 {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--dark);
    margin-bottom: var(--spacing-5);
    letter-spacing: var(--tracking-tight);
}

h3, .h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--dark);
    margin-bottom: var(--spacing-4);
    letter-spacing: var(--tracking-normal);
}

h4, .h4 {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--dark);
    margin-bottom: var(--spacing-4);
    letter-spacing: var(--tracking-normal);
}

h5, .h5 {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: var(--dark);
    margin-bottom: var(--spacing-3);
    letter-spacing: var(--tracking-normal);
}

h6, .h6 {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: var(--dark);
    margin-bottom: var(--spacing-3);
    letter-spacing: var(--tracking-normal);
}

/* ============================================
   TEXTE CORPS
   ============================================ */

p, .body {
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: var(--dark);
    margin-bottom: var(--spacing-4);
}

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

/* ============================================
   TAILLES DE TEXTE
   ============================================ */

.text-xs {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

.text-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.text-base {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.text-lg {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.text-xl {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
}

.text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
}

.text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
}

.text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
}

.text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--leading-tight);
}

/* ============================================
   POIDS DE POLICE
   ============================================ */

.font-normal {
    font-weight: var(--font-normal);
}

.font-medium {
    font-weight: var(--font-medium);
}

.font-semibold {
    font-weight: var(--font-semibold);
}

.font-bold {
    font-weight: var(--font-bold);
}

/* ============================================
   STYLES DE TEXTE
   ============================================ */

/* Small text / Caption */
small, .small, .caption {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--gray-600);
}

/* Lead text (texte d'introduction) */
.lead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    font-weight: var(--font-normal);
    color: var(--gray-700);
}

/* Muted text */
.text-muted {
    color: var(--gray-600);
}

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

/* ============================================
   ALIGNEMENT
   ============================================ */

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

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

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

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

/* ============================================
   TRANSFORMATIONS
   ============================================ */

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

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* ============================================
   DÉCORATIONS
   ============================================ */

.underline {
    text-decoration: underline;
}

.line-through {
    text-decoration: line-through;
}

.no-underline {
    text-decoration: none;
}

/* ============================================
   COULEURS DE TEXTE
   ============================================ */

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

.text-primary-dark {
    color: var(--primary-dark);
}

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

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

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

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

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

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

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

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

@media (max-width: 768px) {
    h1, .h1 {
        font-size: var(--text-3xl);
    }
    
    h2, .h2 {
        font-size: var(--text-2xl);
    }
    
    h3, .h3 {
        font-size: var(--text-xl);
    }
    
    h4, .h4 {
        font-size: var(--text-lg);
    }
}