/* ========================================
   SYSTÈME TYPOGRAPHIQUE HARMONISÉ
   ======================================== */

/* Variables typographiques globales */
:root {
    /* Familles de polices */
    --font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Courier New', Courier, monospace;
    
    /* Échelle typographique cohérente */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    
    /* Poids de police harmonisés */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Hauteur de ligne optimisée */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Espacement des lettres */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
}

/* ========================================
   RÉINITIALISATION TYPOGRAPHIQUE
   ======================================== */

* {
    font-family: var(--font-family-primary);
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--dark-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

h1, .h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 1rem;
}

h2, .h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 0.875rem;
}

h3, .h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: 0.75rem;
}

h4, .h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: 0.625rem;
}

h5, .h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: 0.5rem;
}

h6, .h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    margin-bottom: 0.5rem;
}

/* ========================================
   TYPOGRAPHIE DES TEXTES
   ======================================== */

p {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    margin-bottom: 1rem;
}

small, .small {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

/* ========================================
   TYPOGRAPHIE SPÉCIALISÉE
   ======================================== */

/* Codes et références */
code, .code, .invoice-number, .tier-code, .tier-document, .reference {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background-color: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: var(--dark-color);
}

/* Montants et valeurs numériques */
.amount, .invoice-amount, .invoice-tva, .invoice-ht, .montant, .total {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-bold);
    color: var(--success-color);
}

/* Noms et titres */
.client-name, .tier-name, .user-name, .product-name {
    font-weight: var(--font-weight-semibold);
    color: var(--dark-color);
}

/* Informations secondaires */
.client-contact, .tier-contact, .user-email, .last-login, .date-info {
    font-size: var(--font-size-sm);
    color: #6c757d;
    font-weight: var(--font-weight-normal);
}

/* ========================================
   TYPOGRAPHIE DES COMPOSANTS
   ======================================== */

/* Badges */
.badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

/* Boutons */
.btn {
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
}

.btn-sm {
    font-size: var(--font-size-sm);
}

.btn-lg {
    font-size: var(--font-size-lg);
}

/* Tableaux */
.table thead th {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;
}

.table tbody td {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

/* Formulaires */
.form-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-wide);
}

.form-control {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

.form-select {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

/* Alertes */
.alert {
    font-weight: var(--font-weight-medium);
}

.alert-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
}

/* Cartes */
.card-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
}

.card-subtitle {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
    color: #6c757d;
}

/* Navigation */
.nav-link {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}

.navbar-brand {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
}

/* Sidebar */
.sidebar .nav-link {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}

.sidebar h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

/* ========================================
   TYPOGRAPHIE DES PAGES SPÉCIFIQUES
   ======================================== */

/* Page Title */
.page-title h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
}

/* Stats Cards */
.stats-card .text-xs {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wider);
}

.stats-card .h5 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

/* Dashboard Cards */
.dashboard-card .card-header h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

/* Monthly Stats */
.monthly-stat-card h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.monthly-stat-card h6 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Empty States */
.empty-state h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.empty-state p {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

/* ========================================
   TYPOGRAPHIE RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    :root {
        --font-size-4xl: 1.875rem;  /* 30px */
        --font-size-3xl: 1.5rem;    /* 24px */
        --font-size-2xl: 1.25rem;   /* 20px */
        --font-size-xl: 1.125rem;   /* 18px */
    }
    
    .page-title h1 {
        font-size: var(--font-size-2xl);
    }
    
    .stats-card .h5 {
        font-size: var(--font-size-xl);
    }
    
    .table thead th,
    .table tbody td {
        font-size: var(--font-size-sm);
    }
    
    .btn {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 576px) {
    :root {
        --font-size-4xl: 1.5rem;    /* 24px */
        --font-size-3xl: 1.25rem;   /* 20px */
        --font-size-2xl: 1.125rem;  /* 18px */
        --font-size-xl: 1rem;       /* 16px */
    }
    
    .page-title h1 {
        font-size: var(--font-size-xl);
    }
    
    .stats-card .h5 {
        font-size: var(--font-size-lg);
    }
}

/* ========================================
   OPTIMISATIONS D'ACCESSIBILITÉ
   ======================================== */

/* Préférence de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Amélioration de la lisibilité pour les écrans haute densité */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Contraste élevé */
@media (prefers-contrast: high) {
    :root {
        --dark-color: #000000;
        --light-color: #ffffff;
    }
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    :root {
        --dark-color: #ffffff;
        --light-color: #2c3e50;
    }
    
    body {
        background-color: #1a1a1a;
        color: #ffffff;
    }
    
    .card {
        background-color: #2c2c2c;
        color: #ffffff;
    }
    
    .table {
        background-color: #2c2c2c;
        color: #ffffff;
    }
    
    .form-control {
        background-color: #2c2c2c;
        color: #ffffff;
        border-color: #4a4a4a;
    }
}

/* ========================================
   UTILITAIRES TYPOGRAPHIQUES
   ======================================== */

.text-mono {
    font-family: var(--font-family-mono);
}

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

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

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

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

.text-light {
    font-weight: var(--font-weight-light);
}

.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-2xl {
    font-size: var(--font-size-2xl);
}

.text-3xl {
    font-size: var(--font-size-3xl);
}

.text-4xl {
    font-size: var(--font-size-4xl);
}

.leading-tight {
    line-height: var(--line-height-tight);
}

.leading-normal {
    line-height: var(--line-height-normal);
}

.leading-relaxed {
    line-height: var(--line-height-relaxed);
}

.tracking-tight {
    letter-spacing: var(--letter-spacing-tight);
}

.tracking-normal {
    letter-spacing: var(--letter-spacing-normal);
}

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

.tracking-wider {
    letter-spacing: var(--letter-spacing-wider);
}