/* ============================================================
   EXONETIC — DESIGN TOKENS  v1.0
   Fichier à injecter tel quel dans le monolithe (patch n°1).
   Aucune classe ici : uniquement des variables CSS.
   ============================================================ */

:root {

  /* ---------- TYPOGRAPHIE ----------
     1 seule famille : Manrope (Google Fonts) + fallback système.
     Précise, technique, excellents chiffres tabulaires.
     <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle typographique : 5 tailles texte + 2 tailles display */
  --text-xs: 12px;      /* overlines, légendes, badges        */
  --text-sm: 13px;      /* méta, sous-titres, tableaux denses */
  --text-md: 15px;      /* corps par défaut, boutons, inputs  */
  --text-lg: 18px;      /* titres de carte / de section       */
  --text-xl: 22px;      /* titres de page, titre de modale    */
  --display-sm: 28px;   /* valeurs KPI                        */
  --display-lg: 40px;   /* héros (objectif du mois)           */

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;   /* chiffres KPI, héros */
  --tracking-tight: -0.02em; /* grands chiffres, titres display */
  --tracking-wide: 0.08em;   /* overlines */

  --leading-tight: 1.15; /* chiffres, titres */
  --leading-body: 1.5;   /* paragraphes      */

  /* Chiffres alignés dans tableaux & KPI :
     font-variant-numeric: tabular-nums; (inclus dans .num) */

  /* ---------- MARQUE (navys profonds tirés du logo) ---------- */
  --navy-950: #030D1E;   /* fond le plus sombre            */
  --navy-900: #04142B;   /* barre de navigation, héros     */
  --navy-800: #0A2440;   /* hover du bouton primaire       */
  --navy-700: #123663;   /* éléments actifs sur fond navy  */

  --brand-500: #21A4C4;  /* turquoise Exonetic — accent    */
  --brand-600: #1B89A5;  /* hover turquoise                */
  --brand-400: #3BCBEE;  /* cyan vif — accents sur fond sombre */
  --brand-100: #D5F1F9;  /* fond teinté turquoise          */
  --brand-50:  #EDFAFE;  /* surlignage très léger          */

  /* Dégradé de marque (celui du logo) — usage parcimonieux :
     glyphe, barres de progression héros, pastille nav active */
  --grad-brand: linear-gradient(115deg, #3ADCF8 0%, #1E9FE2 48%, #1F63DE 100%);
  --glow-brand: 0 0 18px rgba(58, 210, 245, .35);

  /* ---------- ARGENT (à ne jamais inverser) ----------
     vert = réel / encaissable · bleu = potentiel / projeté */
  --money-real:      #149655;
  --money-real-bg:   #E4F5EC;
  --money-pot:       #2563EB;
  --money-pot-bg:    #E8EFFD;

  /* ---------- SÉMANTIQUE D'ÉTAT ---------- */
  --danger-600: #D92D20;   /* retard / danger   */
  --danger-bg:  #FCE9E7;
  --warn-600:   #C77414;   /* attention / sommeil */
  --warn-bg:    #FCF1DF;
  --ok-600:     #149655;   /* ok / fait (= vert argent, volontaire) */
  --ok-bg:      #E4F5EC;

  /* ---------- TEMPÉRATURE DES LEADS ---------- */
  --temp-hot:      #E0491F;  --temp-hot-bg:   #FDEAE3;
  --temp-warm:     #C77414;  --temp-warm-bg:  #FCF1DF;
  --temp-cold:     #64748B;  --temp-cold-bg:  #EEF2F6;

  /* ---------- COULEURS PAR COMMERCIAL (identité apprise) ---------- */
  --com-christine:    #21A4C4;
  --com-christine-bg: #D7F0F7;
  --com-guillaume:    #E13BF7;
  --com-guillaume-bg: #FAE4FD;
  --com-robin:        #3B82F6;
  --com-robin-bg:     #E3EDFE;

  /* ---------- NEUTRES (gris bleutés froids) ---------- */
  --bg:        #F2F5F9;  /* fond de page            */
  --surface:   #FFFFFF;  /* cartes, modales         */
  --grey-50:   #F0F3F8;  /* fonds de zones, hover   */
  --grey-100:  #E4E9F1;  /* bordures                */
  --grey-200:  #D2DAE4;  /* bordures appuyées       */
  --grey-400:  #93A1B0;  /* placeholders, désactivé */
  --grey-500:  #6B7A89;  /* texte tertiaire         */
  --grey-600:  #4C5B69;  /* texte secondaire        */
  --grey-900:  #17222C;  /* texte principal         */

  /* ---------- PASTELS KANBAN (6 colonnes) ---------- */
  --kan-1-bg: #E7EFFC; --kan-1-fg: #1D4ED8; --kan-1-dot: #3B82F6; /* À convertir          */
  --kan-2-bg: #FBF3D9; --kan-2-fg: #9A6A08; --kan-2-dot: #EAB308; /* En cours             */
  --kan-3-bg: #E2F4E9; --kan-3-fg: #15803D; --kan-3-dot: #22C55E; /* Formation groupée    */
  --kan-4-bg: #EEEAFB; --kan-4-fg: #6D28D9; --kan-4-dot: #8B5CF6; /* Formation distancielle*/
  --kan-5-bg: #DDF2F8; --kan-5-fg: #0E7490; --kan-5-dot: #21A4C4; /* À inscrire           */
  --kan-6-bg: #FCEBDC; --kan-6-fg: #C2410C; --kan-6-dot: #F97316; /* Inscrit / Closé      */

  /* ---------- ESPACEMENTS (base 4px) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* ---------- RAYONS ---------- */
  --r-sm: 8px;    /* badges rectangulaires, petits éléments */
  --r-md: 10px;   /* boutons, inputs                        */
  --r-lg: 14px;   /* cartes                                 */
  --r-xl: 18px;   /* modales, héros                         */
  --r-full: 999px;/* pills, pastilles                       */

  /* ---------- OMBRES (froides, discrètes) ---------- */
  --shadow-1: 0 1px 2px rgba(3,13,30,.04), 0 2px 8px rgba(3,13,30,.05);   /* cartes    */
  --shadow-2: 0 6px 20px rgba(3,13,30,.10);                               /* dropdowns, cartes kanban en drag */
  --shadow-3: 0 32px 80px rgba(3,13,30,.35);                              /* modales   */

  /* ---------- FOCUS ---------- */
  --focus-ring: 0 0 0 3px rgba(59,203,238,.32); /* cyan 32% */

  /* ---------- DIVERS ---------- */
  --transition: 140ms ease;      /* transitions discrètes uniquement */
  --row-h: 52px;                 /* hauteur de ligne de tableau      */
  --hit-min: 32px;               /* cible cliquable minimale         */
}