/* ========================================
   TYPOGRAPHIE - MOBILE-FIRST
   ========================================
   
   Styles de typographie optimisés pour mobile
   et responsive design
   ======================================== */

/* ========================================
   CLASSES DE TAILLE DE POLICE
   ======================================== */
.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-md { font-size: var(--font-size-md); }
.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); }
.text-5xl { font-size: var(--font-size-5xl); }

/* ========================================
   CLASSES DE POIDS DE POLICE
   ======================================== */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

/* ========================================
   CLASSES DE HAUTEUR DE LIGNE
   ======================================== */
.leading-tight { line-height: var(--line-height-tight); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* ========================================
   CLASSES DE COULEUR DE TEXTE
   ======================================== */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-inverse { color: var(--color-text-inverse); }

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

/* ========================================
   CLASSES D'ALIGNEMENT
   ======================================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* ========================================
   CLASSES DE TRANSFORMATION
   ======================================== */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* ========================================
   CLASSES DE DÉCORATION
   ======================================== */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
.line-through { text-decoration: line-through; }

/* ========================================
   CLASSES D'ESPACEMENT
   ======================================== */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }

/* ========================================
   STYLES SPÉCIFIQUES STHS
   ======================================== */
.STHSHeaderTitle {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-2) var(--spacing-3);
  margin: 0;
}

.STHSHeaderDate {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-2) var(--spacing-3);
  margin: 0;
}

.STHSIndividualLeadersTitle {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: var(--spacing-4) 0;
}

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

/* Tablette */
@media (min-width: 768px) {
  .text-xs { font-size: 0.75rem; }
  .text-sm { font-size: 0.875rem; }
  .text-base { font-size: 1.125rem; }
  .text-md { font-size: 1.25rem; }
  .text-lg { font-size: 1.5rem; }
  .text-xl { font-size: 1.875rem; }
  .text-2xl { font-size: 2.25rem; }
  .text-3xl { font-size: 3rem; }
  .text-4xl { font-size: 3.75rem; }
  .text-5xl { font-size: 4.5rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  .text-base { font-size: 1.25rem; }
  .text-lg { font-size: 1.75rem; }
  .text-xl { font-size: 2.25rem; }
  .text-2xl { font-size: 3rem; }
  .text-3xl { font-size: 3.75rem; }
  .text-4xl { font-size: 4.5rem; }
  .text-5xl { font-size: 6rem; }
}

/* ========================================
   UTILITAIRES DE TEXTE
   ======================================== */
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-break {
  word-break: break-word;
  word-wrap: break-word;
}

.text-nowrap {
  white-space: nowrap;
}

/* ========================================
   STYLES POUR MOBILE
   ======================================== */
@media (max-width: 768px) {
  /* Réduire la taille des titres sur mobile */
  .STHSHeaderTitle {
    font-size: var(--font-size-lg);
    padding: var(--spacing-2);
  }
  
  .STHSHeaderDate {
    font-size: var(--font-size-sm);
    padding: var(--spacing-2);
  }
  
  /* Améliorer la lisibilité sur mobile */
  p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }
  
  /* Optimiser les liens pour le touch */
  a {
    min-height: 44px; /* Taille minimale pour le touch */
    display: inline-flex;
    align-items: center;
  }
}