/**
 * ══════════════════════════════════════════════════════════════
 * HALYARD VARIABLE DESIGN SYSTEM — Base Styles
 * ══════════════════════════════════════════════════════════════
 * 
 * Application du système Halyard aux éléments HTML de base.
 * 
 * UTILISATION DES 3 VARIATIONS OPTIQUES :
 * ───────────────────────────────────────
 * • Display → H1, H2, Hero (grandes tailles, impact visuel)
 * • Text    → Body, H3-H6 (lecture optimale, UI)
 * • Micro   → Labels, captions, UI dense
 * 
 * Importer APRÈS typography-tokens.css
 * 
 * ══════════════════════════════════════════════════════════════
 */

/* ========================================
   RESET & BASE
   ======================================== */

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular); /* 🎯 470 */
  font-variation-settings: var(--vf-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-text-body);
}


/* ========================================
   HEADINGS — Contraste Display vs Text
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
}

/* H1, H2 : DISPLAY font (impact visuel maximal) */
h1 {
  font-family: var(--style-h1);
  font-size: var(--style-h1-size);
  font-weight: var(--style-h1-weight); /* 850 */
  font-variation-settings: var(--vf-extrabold);
  line-height: var(--style-h1-leading);  /* 1.05 */
  letter-spacing: var(--style-h1-tracking); /* -0.03em */
  margin-bottom: var(--space-text-lg);
  color: var(--color-text-primary);
}

h2 {
  font-family: var(--style-h2);
  font-size: var(--style-h2-size);
  font-weight: var(--style-h2-weight); /* 850 */
  font-variation-settings: var(--vf-extrabold);
  line-height: var(--style-h2-leading);  /* 1.05 */
  letter-spacing: var(--style-h2-tracking); /* -0.03em */
  margin-bottom: var(--space-text-md);
  color: var(--color-text-primary);
}

/* H3-H6 : TEXT font (lecture, UI) */
h3 {
  font-family: var(--style-h3);
  font-size: var(--style-h3-size);
  font-weight: var(--style-h3-weight); /* 750 */
  font-variation-settings: var(--vf-bold);
  line-height: var(--style-h3-leading);  /* 1.15 */
  letter-spacing: var(--style-h3-tracking); /* -0.015em */
  margin-bottom: var(--space-text-md);
  color: var(--color-text-secondary);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--text-fluid-2xl);
  font-weight: var(--weight-bold); /* 750 */
  font-variation-settings: var(--vf-bold);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-text-sm);
  color: var(--color-text-secondary);
}

h5 {
  font-family: var(--font-body);
  font-size: var(--text-fluid-xl);
  font-weight: var(--weight-semibold); /* 650 */
  font-variation-settings: var(--vf-semibold);
  line-height: var(--leading-title);
  margin-bottom: var(--space-text-sm);
  color: var(--color-text-secondary);
}

h6 {
  font-family: var(--font-body);
  font-size: var(--text-fluid-lg);
  font-weight: var(--weight-semibold); /* 650 */
  font-variation-settings: var(--vf-semibold);
  line-height: var(--leading-title);
  margin-bottom: var(--space-text-sm);
  color: var(--color-text-secondary);
}


/* ========================================
   BODY TEXT — TEXT font optimisé
   ======================================== */

p {
  font-family: var(--style-body);
  font-size: var(--style-body-size);
  font-weight: var(--style-body-weight); /* 🎯 470 */
  font-variation-settings: var(--vf-regular);
  line-height: var(--style-body-leading); /* 1.5 */
  letter-spacing: var(--style-body-tracking);
  margin-bottom: var(--space-text-md);
  color: var(--color-text-body);
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-body-relaxed); /* 1.6 */
  font-weight: var(--weight-medium); /* 550 */
  font-variation-settings: var(--vf-medium);
}

small, .text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-body-snug);
}


/* ========================================
   TEXT UTILITIES — Classes réutilisables
   ======================================== */

/* Tailles */
.text-2xs { font-size: var(--text-2xs); font-family: var(--font-micro); }
.text-xs { font-size: var(--text-xs); font-family: var(--font-micro); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-md { font-size: var(--text-md); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }
.text-6xl { font-size: var(--text-6xl); }
.text-7xl { font-size: var(--text-7xl); font-family: var(--font-display); }

/* Tailles fluides (préférées pour responsive) */
.text-fluid-2xs { font-size: var(--text-fluid-2xs); font-family: var(--font-micro); }
.text-fluid-xs { font-size: var(--text-fluid-xs); font-family: var(--font-micro); }
.text-fluid-sm { font-size: var(--text-fluid-sm); }
.text-fluid-base { font-size: var(--text-fluid-base); }
.text-fluid-md { font-size: var(--text-fluid-md); }
.text-fluid-lg { font-size: var(--text-fluid-lg); }
.text-fluid-xl { font-size: var(--text-fluid-xl); }
.text-fluid-2xl { font-size: var(--text-fluid-2xl); }
.text-fluid-3xl { font-size: var(--text-fluid-3xl); }
.text-fluid-4xl { font-size: var(--text-fluid-4xl); }
.text-fluid-5xl { font-size: var(--text-fluid-5xl); font-family: var(--font-display); }
.text-fluid-6xl { font-size: var(--text-fluid-6xl); font-family: var(--font-display); }
.text-fluid-7xl { font-size: var(--text-fluid-7xl); font-family: var(--font-display); }

/* Poids (Variable Font) */
.font-thin { 
  font-weight: var(--weight-thin); 
  font-variation-settings: var(--vf-thin); 
}
.font-light { 
  font-weight: var(--weight-light); 
  font-variation-settings: var(--vf-light); 
}
.font-regular { 
  font-weight: var(--weight-regular); /* 🎯 470 */
  font-variation-settings: var(--vf-regular); 
}
.font-medium { 
  font-weight: var(--weight-medium); 
  font-variation-settings: var(--vf-medium); 
}
.font-semibold { 
  font-weight: var(--weight-semibold); 
  font-variation-settings: var(--vf-semibold); 
}
.font-bold { 
  font-weight: var(--weight-bold); 
  font-variation-settings: var(--vf-bold); 
}
.font-extrabold { 
  font-weight: var(--weight-extrabold); 
  font-variation-settings: var(--vf-extrabold); 
}
.font-black { 
  font-weight: var(--weight-black); 
  font-variation-settings: var(--vf-black); 
}

/* Line-height */
.leading-display-tight { line-height: var(--leading-display-tight); }
.leading-display { line-height: var(--leading-display); }
.leading-title { line-height: var(--leading-title); }
.leading-body-snug { line-height: var(--leading-body-snug); }
.leading-body { line-height: var(--leading-body); }
.leading-body-relaxed { line-height: var(--leading-body-relaxed); }
.leading-micro { line-height: var(--leading-micro); }

/* Letter-spacing (Tracking) */
.tracking-display-tighter { letter-spacing: var(--tracking-display-tighter); }
.tracking-display-tight { letter-spacing: var(--tracking-display-tight); }
.tracking-title { letter-spacing: var(--tracking-title); }
.tracking-body { letter-spacing: var(--tracking-body); }
.tracking-micro { letter-spacing: var(--tracking-micro); }
.tracking-micro-wide { letter-spacing: var(--tracking-micro-wide); }

/* Aliases génériques */
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }

/* Familles */
.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }
.font-micro { font-family: var(--font-micro); }


/* ========================================
   COMPOSANTS ADMIN — Styles pré-définis
   ======================================== */

/* Remplace .menuh, .menuc, .menup (legacy) */
.admin-hero-title {
  font-family: var(--font-display);
  font-size: var(--admin-hero-title);
  font-weight: var(--weight-extrabold); /* 850 */
  font-variation-settings: var(--vf-extrabold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display-tight);
  color: var(--color-text-primary);
  margin: 0;
}

.admin-hero-subtitle {
  font-size: var(--admin-hero-subtitle);
  font-weight: var(--weight-semibold); /* 650 */
  font-variation-settings: var(--vf-semibold);
  line-height: var(--leading-title);
  color: var(--color-text-secondary);
  margin: 0 0 0.25rem;
}

.admin-hero-caption {
  font-size: var(--admin-hero-caption);
  font-weight: var(--weight-regular); /* 470 */
  font-variation-settings: var(--vf-regular);
  line-height: var(--leading-body);
  color: var(--color-text-muted);
  margin: 0;
}

.admin-section-title {
  font-family: var(--font-display);
  font-size: var(--admin-section-title);
  font-weight: var(--weight-extrabold); /* 850 */
  font-variation-settings: var(--vf-extrabold);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display-tight);
  color: var(--color-text-primary);
}

.admin-card-title {
  font-size: var(--admin-card-title);
  font-weight: var(--weight-bold); /* 750 */
  font-variation-settings: var(--vf-bold);
  line-height: var(--leading-title);
  color: var(--color-text-secondary);
}

.admin-card-body {
  font-size: var(--admin-card-body);
  font-weight: var(--weight-regular); /* 470 */
  font-variation-settings: var(--vf-regular);
  line-height: var(--leading-body-relaxed);
  color: var(--color-text-body);
}

.admin-stat-large {
  font-family: var(--font-display);
  font-size: var(--admin-stat-large);
  font-weight: var(--weight-black); /* 900 */
  font-variation-settings: var(--vf-black);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display-tight);
  color: var(--color-text-primary);
}

.admin-stat-medium {
  font-family: var(--font-display);
  font-size: var(--admin-stat-medium);
  font-weight: var(--weight-extrabold); /* 850 */
  font-variation-settings: var(--vf-extrabold);
  line-height: var(--leading-display);
  color: var(--color-text-primary);
}

.admin-stat-label {
  font-family: var(--font-micro);
  font-size: var(--admin-stat-label);
  font-weight: var(--weight-semibold); /* 650 */
  font-variation-settings: var(--vf-semibold);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
  color: var(--color-text-muted);
  text-transform: uppercase;
}


/* ========================================
   EMPHASIS & SEMANTIC
   ======================================== */

strong, b {
  font-weight: var(--weight-bold); /* 750 */
  font-variation-settings: var(--vf-bold);
}

em, i {
  font-style: italic;
}

mark {
  background-color: #FFF9E6;
  color: inherit;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: #f5f5f5;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  color: #0F393E;
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-body-relaxed);
  background: #f8f9fa;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}


/* ========================================
   ACCESSIBILITÉ
   ======================================== */

/* Texte réduit pour users avec préférence motion réduite */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Contraste renforcé si demandé par le système */
@media (prefers-contrast: more) {
  body {
    color: #000;
  }
  
  h1, h2, h3, h4, h5, h6,
  .admin-hero-title,
  .admin-section-title {
    color: #000;
  }
}