/* =====================================================================
   LE BON SOIGNANT — DESIGN TOKENS (unifié, white-label)
   Fichier : tokens.css  (cible : Agent Prospection IA — HTML/JS vanilla)
   ---------------------------------------------------------------------
   À charger AVANT le <style> de l'agent :
     <link rel="stylesheet" href="tokens.css">

   Deux familles de tokens, à ne PAS confondre :
     1) MARQUE (themable)  → surchargeable par client (primaire + secondaire)
     2) SYSTÈME (figé)     → JAMAIS modifiable par le client

   Le client ne surcharge QUE --brand-primary et --brand-secondary
   (+ leurs canaux R/G/B, voir note contraste plus bas).
   Tous les dérivés (hover / light / texte lisible) se recalculent seuls.
   ===================================================================== */

:root {

  /* ===================================================================
     1) ███  MARQUE (THEMABLE)  — surchargeable par client  ███
     =================================================================== */

  /* --- Couleurs de base (les 2 SEULES que le client peut changer) --- */
  --brand-primary:   #182D4D;   /* bleu marine */
  --brand-secondary: #D5AE4E;   /* or */

  /* Canaux R/G/B du primaire/secondaire — nécessaires au garde-fou de
     contraste (calcul de luminance). À fournir avec la couleur lors d'une
     surcharge client. Valeurs par défaut = #182D4D et #D5AE4E. */
  --brand-primary-r: 24;  --brand-primary-g: 45;  --brand-primary-b: 77;
  --brand-secondary-r: 213; --brand-secondary-g: 174; --brand-secondary-b: 78;

  /* --- Dérivés AUTOMATIQUES via color-mix() ---------------------------
     (chaque dérivé a un fallback statique AVANT la version color-mix :
      les vieux navigateurs gardent le hex, les modernes calculent) */

  /* PRIMAIRE */
  --brand-primary-hover: #122236;                                   /* fallback */
  --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 85%, #000);
  --brand-primary-light: #e8ebef;                                   /* fallback */
  --brand-primary-light: color-mix(in srgb, var(--brand-primary) 10%, #fff);

  /* SECONDAIRE */
  --brand-secondary-hover: #b9933b;                                 /* fallback */
  --brand-secondary-hover: color-mix(in srgb, var(--brand-secondary) 85%, #000);
  --brand-secondary-light: #faf3e2;                                 /* fallback */
  --brand-secondary-light: color-mix(in srgb, var(--brand-secondary) 12%, #fff);

  /* --- Texte lisible sur fond de marque (GARDE-FOU DE CONTRASTE) ------
     Luminance perçue ≈ (0.2126·R + 0.7152·G + 0.0722·B) / 255.
     Si le fond est sombre → texte blanc ; si clair → texte noir.
     Le multiplicateur élevé "claque" la lightness HSL à 0% ou 100%. */
  --_lum-primary:   calc((var(--brand-primary-r)   * 0.2126
                        + var(--brand-primary-g)   * 0.7152
                        + var(--brand-primary-b)   * 0.0722) / 255);
  --_lum-secondary: calc((var(--brand-secondary-r) * 0.2126
                        + var(--brand-secondary-g) * 0.7152
                        + var(--brand-secondary-b) * 0.0722) / 255);

  --brand-primary-contrast: #ffffff;                                /* fallback */
  --brand-primary-contrast:   hsl(0 0% calc((0.6 - var(--_lum-primary))   * 1000%));
  --brand-secondary-contrast: #182D4D;                              /* fallback */
  --brand-secondary-contrast: hsl(0 0% calc((0.6 - var(--_lum-secondary)) * 1000%));

  /* --- Alias de compatibilité (mêmes noms que le CRM existant) -------- */
  --brand:     var(--brand-primary);
  --accent:    var(--brand-secondary);
  --on-brand:  var(--brand-primary-contrast);
  --brand-rgb: var(--brand-primary-r), var(--brand-primary-g), var(--brand-primary-b);


  /* ===================================================================
     2) ███  SYSTÈME (FIGÉ)  — ne JAMAIS surcharger côté client  ███
     =================================================================== */

  /* --- Échelle d'espacement (base 8, + un pas de 4) ------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* --- Rayons de bordure --------------------------------------------- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 12px;

  /* --- Ombres -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, .10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .16);

  /* --- Couleurs de statut (figées) ----------------------------------- */
  --color-success: #82D64D;
  --color-warning: #FF8300;
  --color-error:   #A7394C;
  /* variantes claires de statut (fonds d'alerte) */
  --color-success-light: #eef9e4;
  --color-warning-light: #fff1e0;
  --color-error-light:   #f6e3e7;

  /* --- Typographie --------------------------------------------------- */
  --font-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-xs:  12px;
  --font-size-sm:  13px;
  --font-size-md:  14px;   /* base */
  --font-size-lg:  16px;
  --font-size-xl:  20px;
  --font-size-2xl: 26px;
  --font-weight-regular: 400;
  --font-weight-medium:  600;
  --font-weight-bold:    800;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
}