/**
 * ══════════════════════════════════════════════════════════════
 * HALYARD VARIABLE DESIGN SYSTEM — Typography Tokens
 * ══════════════════════════════════════════════════════════════
 * 
 * Système typographique moderne exploitant 3 variations optiques
 * de Halyard Variable (Adobe Fonts) pour un contraste maximal.
 * 
 * ARCHITECTURE :
 * ─────────────
 * • halyard-display-variable → Titres, Hero, Impact visuel
 * • halyard-text-variable    → Corps de texte, Lecture optimale
 * • halyard-micro-variable   → UI dense, Labels, < 12px
 * 
 * PHILOSOPHIE :
 * ────────────
 * On exploite l'axe `wght` (100-900) des variable fonts pour
 * des nuances fines plutôt que des graisses fixes.
 * 
 * Exemple : "wght" 470 (Regular+) pour le texte courant au lieu de 400,
 * offrant une présence subtile sans être trop grasse.
 * 
 * NE PAS MODIFIER directement les templates/CSS.
 * Toute modification typo doit partir d'ici.
 * 
 * ══════════════════════════════════════════════════════════════
 */

:root {
  /* ========================================
     🎨 FONT FAMILIES (3 Variations Optiques)
     ======================================== */
  
  /* Display : Titres, Hero, Landing pages — Optimisé pour grandes tailles (>24px) */
  --font-display: "halyard-display-variable", system-ui, -apple-system, sans-serif;
  
  /* Text : Corps de texte, UI principale — Optimisé lecture (14-20px) */
  --font-body: "halyard-text-variable", system-ui, -apple-system, sans-serif;
  
  /* Micro : Labels, captions, UI dense — Optimisé petites tailles (<12px) */
  --font-micro: "halyard-micro-variable", system-ui, -apple-system, sans-serif;

  /* Alias pour templates client utilisant var(--font-primary) */
  --font-primary: var(--font-body);

  /* Monospace (logs, code uniquement) */
  --font-mono: ui-monospace, 'SF Mono', Monaco, Consolas, monospace;


  /* ========================================
     ⚖️ VARIABLE FONT WEIGHTS (Axe wght)
     Fine-tuned pour Halyard Variable
     ======================================== */
  
  /* Nuances de graisses exploitant l'axe variable (100-900) */
  --weight-thin: 200;           /* Ultra-light, décoratif uniquement */
  --weight-light: 300;          /* Light — Textes aérés, élégants */
  --weight-regular: 380;        /* 🎯 Regular (demande utilisateur : 380 pour max finesse) */
  --weight-medium: 450;         /* Medium — Sous-titres, emphase très légère */
  --weight-semibold: 550;       /* Semi-bold — Labels, boutons */
  --weight-bold: 600;           /* Bold — Titres H3-H6 (demande utilisateur : 600) */
  --weight-extrabold: 600;      /* Extra-bold — Titres H1-H2 (demande utilisateur : 600 pour finesse max) */
  --weight-black: 700;          /* Black — Impact maximal */

  /* Aliases Variable Font (pour font-variation-settings) */
  --vf-thin: "wght" 200;
  --vf-light: "wght" 300;
  --vf-regular: "wght" 380;     /* 🎯 Finesse maximale */
  --vf-medium: "wght" 450;
  --vf-semibold: "wght" 550;
  --vf-bold: "wght" 600;        /* 🎯 Titres fins (demande utilisateur) */
  --vf-extrabold: "wght" 600;   /* 🎯 Même graisse pour H1-H2 */
  --vf-black: "wght" 700;


  /* ========================================
     📏 FONT SIZES — Perfect Fourth Scale (1.333)
     Base: 16px (1rem)
     ======================================== */
  
  /* Micro : UI dense, labels, captions */
  --text-2xs: 0.625rem;    /* 10px — Micro UI, très rare */
  --text-xs: 0.75rem;      /* 12px — Labels, captions, badges */
  
  /* Body : texte courant */
  --text-sm: 0.875rem;     /* 14px — Body small, UI secondaire */
  --text-base: 1rem;       /* 16px — 🎯 Body principal (avec wght 470) */
  --text-md: 1.125rem;     /* 18px — Body large, lead */
  --text-lg: 1.25rem;      /* 20px — Sous-titres */
  
  /* Display : titres et héros */
  --text-xl: 1.5rem;       /* 24px — H5 */
  --text-2xl: 1.75rem;     /* 28px — H4 */
  --text-3xl: 2rem;        /* 32px — H3 */
  --text-4xl: 2.5rem;      /* 40px — H2 */
  --text-5xl: 3rem;        /* 48px — H1 */
  --text-6xl: 3.75rem;     /* 60px — Hero titles */
  --text-7xl: 4.5rem;      /* 72px — Landing hero massif */
  
  /* Fluid Typography (Responsive Desktop → Mobile) */
  --text-fluid-2xs: clamp(0.6rem, 0.8vw, 0.625rem);
  --text-fluid-xs: clamp(0.7rem, 0.9vw, 0.75rem);
  --text-fluid-sm: clamp(0.8rem, 1.1vw, 0.875rem);
  --text-fluid-base: clamp(0.9rem, 1.3vw, 1rem);
  --text-fluid-md: clamp(1rem, 1.5vw, 1.125rem);
  --text-fluid-lg: clamp(1.1rem, 1.8vw, 1.25rem);
  --text-fluid-xl: clamp(1.3rem, 2.2vw, 1.5rem);
  --text-fluid-2xl: clamp(1.5rem, 2.8vw, 1.75rem);
  --text-fluid-3xl: clamp(1.75rem, 3.5vw, 2rem);
  --text-fluid-4xl: clamp(2rem, 4.5vw, 2.5rem);
  --text-fluid-5xl: clamp(2.25rem, 5.5vw, 3rem);
  --text-fluid-6xl: clamp(2.5rem, 6.5vw, 3.75rem);
  --text-fluid-7xl: clamp(3rem, 7.5vw, 4.5rem);


  /* ========================================
     📐 LINE HEIGHTS (Leading) — Contraste Scale
     ======================================== */
  
  /* Display : Titres — Serrés pour impact visuel */
  --leading-display-tight: 0.95;   /* Hero, ultra-serré */
  --leading-display: 1.05;         /* H1-H2 */
  --leading-title: 1.15;           /* H3-H6 */
  
  /* Body : Texte — Aéré pour lecture confortable */
  --leading-body-snug: 1.4;        /* Body compact (UI) */
  --leading-body: 1.5;             /* 🎯 Body principal (lecture optimale) */
  --leading-body-relaxed: 1.6;     /* Lead, textes longs */
  
  /* Micro : UI dense */
  --leading-micro: 1.3;            /* Labels, captions */


  /* ========================================
     📊 LETTER SPACING (Tracking) — Contraste Scale
     ======================================== */
  
  /* Display : Titres — Tight pour densité visuelle */
  --tracking-display-tighter: -0.04em;  /* Hero massif */
  --tracking-display-tight: -0.03em;    /* H1-H2 */
  --tracking-title: -0.015em;           /* H3-H6 */
  
  /* Body : Texte — Normal, pas de tracking */
  --tracking-body: 0;
  
  /* Micro : UI dense — Wide pour lisibilité */
  --tracking-micro: 0.02em;             /* Labels, captions */
  --tracking-micro-wide: 0.04em;        /* Petits textes < 10px */
  
  /* Aliases génériques */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;


  /* ========================================
     🎯 SCENARIOS — Mapping sémantique
     Combine font-family + weight + size + leading + tracking
     ======================================== */
  
  /* Hero Landing (Display + Black + Tight tracking) */
  --style-hero: var(--font-display);
  --style-hero-weight: var(--weight-black);
  --style-hero-size: var(--text-fluid-7xl);
  --style-hero-leading: var(--leading-display-tight);
  --style-hero-tracking: var(--tracking-display-tighter);
  
  /* H1 (Display + Extra-bold) */
  --style-h1: var(--font-display);
  --style-h1-weight: var(--weight-extrabold);
  --style-h1-size: var(--text-fluid-5xl);
  --style-h1-leading: var(--leading-display);
  --style-h1-tracking: var(--tracking-display-tight);
  
  /* H2 (Display + Extra-bold) */
  --style-h2: var(--font-display);
  --style-h2-weight: var(--weight-extrabold);
  --style-h2-size: var(--text-fluid-4xl);
  --style-h2-leading: var(--leading-display);
  --style-h2-tracking: var(--tracking-display-tight);
  
  /* H3-H6 (Text + Bold) */
  --style-h3: var(--font-body);
  --style-h3-weight: var(--weight-bold);
  --style-h3-size: var(--text-fluid-3xl);
  --style-h3-leading: var(--leading-title);
  --style-h3-tracking: var(--tracking-title);
  
  /* Body (Text + Regular 470) */
  --style-body: var(--font-body);
  --style-body-weight: var(--weight-regular);  /* 🎯 470 */
  --style-body-size: var(--text-base);
  --style-body-leading: var(--leading-body);   /* 1.5 */
  --style-body-tracking: var(--tracking-body);
  
  /* Labels/Captions (Micro + Semibold + Wide tracking) */
  --style-caption: var(--font-micro);
  --style-caption-weight: var(--weight-semibold);
  --style-caption-size: var(--text-xs);
  --style-caption-leading: var(--leading-micro);
  --style-caption-tracking: var(--tracking-micro);


  /* ========================================
     🎨 COMPOSANTS ADMIN (Mapping sémantique)
     ======================================== */
  
  /* Headers de page (image-text-container) */
  --admin-hero-title: var(--text-fluid-2xl);         /* menuh */
  --admin-hero-subtitle: var(--text-fluid-lg);       /* menuc */
  --admin-hero-caption: var(--text-fluid-sm);        /* menup */
  
  /* Cards & Sections */
  --admin-section-title: var(--text-fluid-xl);
  --admin-card-title: var(--text-fluid-md);
  --admin-card-body: var(--text-fluid-sm);
  
  /* Boutons & Actions */
  --admin-btn-text: var(--text-sm);
  --admin-btn-text-lg: var(--text-base);
  
  /* Stats & Metrics */
  --admin-stat-large: var(--text-fluid-4xl);
  --admin-stat-medium: var(--text-fluid-2xl);
  --admin-stat-label: var(--text-xs);


  /* ========================================
     🎨 COULEURS TYPOGRAPHIQUES (Hiérarchie)
     ======================================== */
  
  /* Palette typographique avec progression logique */
  --color-text-primary: #0F393E;   /* Titres H1, H2, Hero */
  --color-text-secondary: #2d464c; /* H3, H4, Sous-titres */
  --color-text-body: #4a5f65;      /* 🎯 Corps de texte principal (avec wght 470) */
  --color-text-muted: #6b7c81;     /* Labels, dates, meta */
  --color-text-subtle: #8a999d;    /* Placeholders, hints */

  /* Aliases sémantiques */
  --color-heading: var(--color-text-primary);
  --color-subheading: var(--color-text-secondary);
  --color-paragraph: var(--color-text-body);
  --color-meta: var(--color-text-muted);


  /* ========================================
     📏 SPACING VERTICAL (Rhythm)
     ======================================== */
  
  --space-text-2xs: 0.125rem;  /* 2px */
  --space-text-xs: 0.25rem;    /* 4px */
  --space-text-sm: 0.5rem;     /* 8px */
  --space-text-md: 1rem;       /* 16px */
  --space-text-lg: 1.5rem;     /* 24px */
  --space-text-xl: 2rem;       /* 32px */
  --space-text-2xl: 3rem;      /* 48px */
}