/**
 * Système de typographie unifié pour Afarka Market
 * Utilise une échelle modulaire pour des tailles cohérentes
 */

:root {
  /* Échelle de tailles de police */
  --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 */
  --font-size-5xl: 3rem;        /* 48px */
  
  /* Hauteurs de ligne */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Poids de police */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Famille de police */
  --font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Classes utilitaires pour les tailles de texte */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }

/* Classes utilitaires pour les hauteurs de ligne */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }

/* Classes utilitaires pour les poids de police */
.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* Styles de base pour le body */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  font-weight: var(--font-weight-normal);
}

/* Titres (h1-h6) avec tailles cohérentes */
h1, .h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: 1rem;
}

h2, .h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-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-normal);
  margin-bottom: 0.625rem;
}

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

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

/* Paragraphes */
p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  margin-bottom: 1rem;
}

/* Petits textes */
small, .small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* Texte très petit (notes, légendes) */
.text-caption {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: #6c757d;
}

/* Boutons - tailles cohérentes */
.btn {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

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

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

/* Formulaires - tailles cohérentes */
.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: 0.5rem;
}

.form-control,
.form-select {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.form-control-sm,
.form-select-sm {
  font-size: var(--font-size-sm);
}

.form-control-lg,
.form-select-lg {
  font-size: var(--font-size-lg);
}

.form-text {
  font-size: var(--font-size-sm);
  color: #6c757d;
}

/* Badges */
.badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

/* Alertes */
.alert {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

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

/* Cards */
.card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.75rem;
}

.card-subtitle {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: #6c757d;
  margin-bottom: 0.5rem;
}

.card-text {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

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

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

/* Breadcrumb */
.breadcrumb {
  font-size: var(--font-size-sm);
}

/* Pagination */
.page-link {
  font-size: var(--font-size-base);
}

/* Tables */
.table {
  font-size: var(--font-size-base);
}

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

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

/* Modals */
.modal-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

.modal-body {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
}

/* Tooltips et Popovers */
.tooltip {
  font-size: var(--font-size-sm);
}

.popover-header {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

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

/* Prix - styles spécifiques */
.price {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.price-sm {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.price-lg {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

/* Descriptions de produits */
.product-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.product-category {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: #6c757d;
}

.product-description {
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: #495057;
}

/* Responsive - ajustements pour mobile */
@media (max-width: 768px) {
  :root {
    --font-size-4xl: 2rem;      /* 32px au lieu de 36px */
    --font-size-3xl: 1.75rem;   /* 28px au lieu de 30px */
    --font-size-2xl: 1.375rem;  /* 22px au lieu de 24px */
  }
  
  h1, .h1 {
    font-size: var(--font-size-3xl);
  }
  
  h2, .h2 {
    font-size: var(--font-size-2xl);
  }
  
  .price {
    font-size: var(--font-size-xl);
  }
}

/* Utilitaires pour le contraste (accessibilité) */
.text-high-contrast {
  color: #000 !important;
}

.text-medium-contrast {
  color: #495057 !important;
}

.text-low-contrast {
  color: #6c757d !important;
}