/* ============================================================
   HRmaps Design System — COLORS
   ------------------------------------------------------------
   THEMING MODEL
   The brand/primary color is a SINGLE token: --primary.
   Each client overrides only --primary (and optionally --excel
   stays fixed). Every primary tint/shade/state is DERIVED from
   it with color-mix(), so re-theming = changing one variable.

   To re-theme for a client, override one line:
     :root { --primary: #2D6FE0; }    (example: blue tenant)

   NB: in the portal, --primary is driven at runtime by the "Couleur
   principale" of the global settings (all entities, or per entity) — see the
   BRAND KNOB block in ds-bridge.overrides.css, which loads after this file and
   after any client stylesheet. The value below is the fallback used when no
   colour is configured for the current user.

   Greens (--excel) and status colors are FIXED and never re-theme,
   so semantic meaning stays stable across all tenants.
   ============================================================ */

:root {
  /* drives native form-control + scrollbar rendering to match the theme */
  color-scheme: light;

  /* ---- BRAND / PRIMARY (themeable — default = HRmaps red) ---- */
  --primary: #ED4337;                                            /* the only knob a client turns */

  --primary-50:  color-mix(in srgb, var(--primary)  6%, #ffffff);
  --primary-100: color-mix(in srgb, var(--primary) 12%, #ffffff);
  --primary-200: color-mix(in srgb, var(--primary) 24%, #ffffff);
  --primary-300: color-mix(in srgb, var(--primary) 42%, #ffffff);
  --primary-400: color-mix(in srgb, var(--primary) 68%, #ffffff);
  --primary-500: var(--primary);
  --primary-600: color-mix(in srgb, var(--primary) 86%, #000000);
  --primary-700: color-mix(in srgb, var(--primary) 72%, #000000);
  --primary-800: color-mix(in srgb, var(--primary) 58%, #000000);
  --primary-900: color-mix(in srgb, var(--primary) 46%, #000000);

  /* primary interaction + tinted surfaces (derived → re-theme safe) */
  --primary-hover:      color-mix(in srgb, var(--primary) 88%, #000000);
  --primary-active:     color-mix(in srgb, var(--primary) 78%, #000000);
  --primary-soft:       color-mix(in srgb, var(--primary) 10%, #ffffff);
  --primary-soft-hover: color-mix(in srgb, var(--primary) 16%, #ffffff);
  --primary-border:     color-mix(in srgb, var(--primary) 32%, #ffffff);
  --on-primary:         #ffffff;
  --focus-ring:         color-mix(in srgb, var(--primary) 40%, transparent);

  /* ---- NEUTRALS (cool gray scale — replaces every ad-hoc gray) ---- */
  --gray-0:   #ffffff;
  --gray-25:  #FAFBFC;
  --gray-50:  #F4F5F8;
  --gray-100: #ECEEF2;
  --gray-200: #E1E4EA;
  --gray-300: #CDD2DC;
  --gray-400: #A7AEBD;
  --gray-500: #7A8294;
  --gray-600: #5A6273;
  --gray-700: #3F4654;
  --gray-800: #2A2F3A;
  --gray-900: #171A21;

  /* ---- EXCEL / EXPORT (FIXED green — never re-themes) ---- */
  --excel:        #1E7E45;
  --excel-hover:  #1A6E3C;
  --excel-active: #155C32;
  --excel-soft:   #E7F3EC;
  --on-excel:     #ffffff;

  /* ---- STATUS / SEMANTIC (FIXED — stable meaning across tenants) ---- */
  /* UN SEUL VERT dans le design system : la reussite et le statut « valide » (--status-done)
     partagent cette valeur, dans la nuance du vert historique du portail (#8bc34a). Avant, un
     vert franc (#16A34A) cotoyait le vert des statuts, et l oeil y lisait deux sens. */
  --success:      #7CB342;
  --success-fg:   #3E6A12;
  --success-soft: #EEF6E3;

  /* UN SEUL ORANGE dans le design system, reference : l orange « en cours » des demandes
     d embauche (--status-progress). Avant, un ambre (#E0A100) cotoyait cet orange : tout ce qui
     passait par l ancien orange legacy (pont `--orange-*`) ou `b-warning` sortait en ambre. */
  --warning:      #F57C00;
  --warning-fg:   #A04A00;
  --warning-soft: #FFEAD5;

  --danger:       #DC2626;
  --danger-fg:    #B42121;
  --danger-soft:  #FBEAEA;
  /* Bordure d un ETAT de champ (valide, erreur) : la teinte du statut ADOUCIE, sans descendre sous
     3:1 sur la surface — le minimum pour qu une bordure de controle se voie. La teinte pleine donnait
     un formulaire tout vert ou tout rouge ; a 45-50 % (2,1:1) on ne voyait plus la bordure. Le vert
     part de --success-fg : --success lui-meme ne fait que 2,5:1 sur blanc. Mesure : rouge 3,21:1,
     vert 3,30:1 (28/09/2026). */
  --success-border: color-mix(in srgb, var(--success-fg) 70%, #ffffff);
  --danger-border:  color-mix(in srgb, var(--danger) 70%, #ffffff);

  --info:         #2563EB;
  --info-fg:      #1D4FD8;
  --info-soft:    #E8F0FE;

  /* a calm purple + slate for extra status families (e.g. "Sortis") */
  /* Graphiques d etat (au niveau / a travailler) : pas les `--success` / `--warning` des badges,
     dont la paire tombe a ΔE 4,5 en deuteranopie (validate_palette.js, skill dataviz). Paire
     validee : clair ΔE 11,8 (orange < 3:1 sur blanc : legende chiffree et vue tableau requises). */
  --chart-good: #1B7F5A;
  --chart-warn: #F57C00;
  --accent-violet:      #7C5CFC;
  --accent-violet-fg:   color-mix(in srgb, var(--accent-violet) 70%, #000);
  --accent-violet-soft: #EEEAFE;

  /* ---- DOSSIER (FIXED) : la couleur d un dossier de documents, celle d une chemise cartonnee.
     Ce n est PAS un avertissement : il ne suit donc pas --warning (devenu l orange des statuts).
     Valeur = l ancien ambre que les dossiers portaient via --warning. */
  --folder:       #E0A100;
  /* ---- FAVORI (FIXED) : l etoile doree d une entree favorite, meme ambre que le dossier. */
  --favorite:     #E0A100;
  /* ---- AVATAR (FIXED) : la couleur d identite des initiales d une personne, tiree de ses initiales
     par hmAvatar (`is-tone-1` a `is-tone-6`). Valeurs reprises des anciennes classes purple, blush,
     mediumseagreen, darksalmon, gold et navy ; `--avatar-deleted` est l ancien gris silver. */
  --avatar-1:       #AA62E3;
  --avatar-2:       #FB5951;
  --avatar-3:       #5CB85C;
  --avatar-4:       #FF916E;
  --avatar-5:       #DCC807;
  --avatar-6:       #303F9F;
  --avatar-deleted: #929292;

  /* ---- STATUT DE PROCESS (FIXED — la couleur dit OU EN EST le process) ----
     Une categorie par nature d etat, la meme sur tous les ecrans (conges,
     demandes, entretiens, recrutement, formation…). Inventaire et decisions :
     design-system/INVENTAIRE-STATUTS.md. Trois valeurs par categorie, comme les
     jetons semantiques : la teinte (point, barre), le texte lisible sur le fond
     doux (`-fg`, contraste AA), le fond doux (`-soft`).
     Les teintes restent dans la nuance des couleurs historiques : jaune du
     brouillon, orange #ff9800 de l en cours, vert #8bc34a du valide. Rouge, orange
     et jaune sont a EGALE DISTANCE sur le cercle : rouge (refuse) ~0°, orange
     (en cours) ~30°, jaune (brouillon) ~52°. A #F2C200 / #FF9800, le jaune et
     l orange donnaient le meme creme ; pousse vers le rouge, l orange se
     confondait avec le refus. « Bloque » ne se glisse pas entre deux teintes
     voisines : il se distingue par la VALEUR (sombre, desature). */
  --status-draft:        #EBCB00;   /* brouillon, retourne : jaune CITRON, loin de l orange */
  --status-draft-fg:     #6B5A00;
  --status-draft-soft:   #FBF6C4;

  --status-planned:      var(--info);   /* a venir, planifie        */
  --status-planned-fg:   var(--info-fg);
  --status-planned-soft: var(--info-soft);
  /* NUANCES DU BLEU « ENGAGE », RESERVEES AUX SESSIONS : leur legende porte trois etapes
     engagees a la suite — inscriptions (light) -> en cours (base) -> en paiement /
     remboursement (dark). Nulle part ailleurs : une famille garde UNE couleur, le libelle
     distingue ses statuts. */
  --status-planned-light:      #38BDF8;
  --status-planned-light-fg:   #0369A1;
  --status-planned-light-soft: #E0F2FE;
  --status-planned-dark:       #1E3A8A;
  --status-planned-dark-fg:    #1E3A8A;
  --status-planned-dark-soft:  #D6DEF0;

  --status-progress:      var(--warning);  /* en cours : orange PUR (~30°), a egale distance du jaune et du rouge : LE orange du DS */
  --status-progress-fg:   var(--warning-fg);
  --status-progress-soft: var(--warning-soft);

  --status-blocked:      #8C4A12;   /* en cours mais bloque (validateur manquant) : orange ETEINT, brun — sombre et desature, ni orange vif ni rouge */
  --status-blocked-fg:   #6A3308;
  --status-blocked-soft: #F1DDC9;

  --status-done:         var(--success);   /* valide, termine, actif : LE vert du DS */
  --status-done-fg:      var(--success-fg);
  --status-done-soft:    var(--success-soft);

  --status-refused:      var(--danger);   /* refuse, rejete, non realise */
  --status-refused-fg:   var(--danger-fg);
  --status-refused-soft: var(--danger-soft);

  --status-cancelled:      var(--gray-400);   /* annule, inactif    */
  --status-cancelled-fg:   var(--gray-600);
  --status-cancelled-soft: var(--gray-100);

  --status-archived:      var(--accent-violet);   /* archive, clos, obsolete */
  --status-archived-fg:   color-mix(in srgb, var(--accent-violet) 70%, #000);
  --status-archived-soft: var(--accent-violet-soft);

  /* ============================================================
     SEMANTIC ALIASES — use THESE in components, not raw scales
     ============================================================ */
  --bg-app:          var(--gray-50);    /* page background */
  --bg-canvas:       var(--gray-25);
  --surface:         var(--gray-0);     /* cards, modals, menus */
  --surface-sunken:  var(--gray-50);    /* inset areas, table zebra */
  --surface-hover:   var(--gray-100);

  --border:          var(--gray-200);   /* default hairline */
  --border-strong:   var(--gray-300);
  --border-subtle:   var(--gray-100);

  --text-primary:    var(--gray-900);   /* headings, key values */
  /* Meme valeur que --text-primary, mais SANS jamais etre redefinie sur un
     element. Sert quand une recette locale a masque --text-primary et qu il
     faut retrouver la couleur de texte normale : la substitution d une
     variable se resout la ou elle est UTILISEE, pas la ou elle est declaree,
     donc `var(--text-primary)` y renverrait la valeur masquee. Cas reel : le
     champ a liste, desactive a la saisie mais qui doit se lire normalement. */
  --text-strong:     var(--gray-900);
  --text-secondary:  var(--gray-600);   /* body / labels */
  --text-muted:      var(--gray-500);   /* hints, placeholders, meta */
  --text-disabled:   var(--gray-400);
  --text-on-primary: var(--on-primary);
  --text-link:       var(--primary);
  --text-link-hover: var(--primary-hover);

  /* control surfaces */
  --field-bg:        var(--gray-0);
  /* Jumeau de --field-bg, jamais redefini sur un element : meme raison que
     --text-strong ci-dessus. */
  --field-bg-strong: var(--gray-0);
  --field-border:    var(--gray-300);
  --field-border-hover: var(--gray-400);
  --field-placeholder:  var(--gray-400);
}

/* ============================================================
   DARK THEME
   Activate by setting data-theme="dark" (or class .dark) on <html>
   or any container. Only SEMANTIC ALIASES + soft tints flip — the
   primary stays themeable (a client's --primary still works in dark)
   and Excel/status hues keep their meaning (foregrounds lightened
   for contrast, soft fills mixed into the dark surface).

   The `dark-sidebar` theme is a THIRD state: the page stays light and
   only the menu is dark. That container is therefore listed here too,
   exactly as the app's own token block does (predefinedClass.scss), so
   a component inside the dark menu resolves the dark surfaces/text —
   without it, anything reading DS tokens in there painted itself light
   on a dark menu.
   ============================================================ */
:root[data-theme="dark"],
[data-theme="dark"],
[data-theme="dark-sidebar"] .nav-v2-container,
.dark {
  /* native inputs, date pickers, scrollbars follow dark rendering */
  color-scheme: dark;

  /* surfaces & text */
  --bg-app:          #14161B;
  --bg-canvas:       #101217;
  --surface:         #1C1F26;
  --surface-sunken:  #15171D;
  --surface-hover:   #262A33;

  --border:          #2E333D;
  --border-strong:   #3C424E;
  --border-subtle:   #23272F;

  --text-primary:    #F0F2F5;
  --text-strong:     #F0F2F5;
  --text-secondary:  #B6BDC9;
  --text-muted:      #868E9C;
  --text-disabled:   #5A6273;
  --text-link:       color-mix(in srgb, var(--primary) 45%, #ffffff);
  --text-link-hover: color-mix(in srgb, var(--primary) 30%, #ffffff);

  /* form controls */
  --field-bg:        #15171D;
  --field-bg-strong: #15171D;
  --field-border:    #353B45;
  --field-border-hover: #4A515E;
  --field-placeholder:  #6B7280;

  /* primary foreground-on-soft + tinted surfaces re-mixed into dark surface */
  --primary-700:      color-mix(in srgb, var(--primary) 52%, #ffffff);
  --primary-soft:       color-mix(in srgb, var(--primary) 22%, #1C1F26);
  --primary-soft-hover: color-mix(in srgb, var(--primary) 30%, #1C1F26);
  --primary-border:     color-mix(in srgb, var(--primary) 46%, #1C1F26);
  --focus-ring:         color-mix(in srgb, var(--primary) 55%, transparent);

  /* Excel — keep green meaning, lighten for dark */
  --excel:        #34B36B;
  --excel-hover:  #2CA35F;
  --excel-soft:   color-mix(in srgb, #1E7E45 26%, #1C1F26);

  /* status — lighter foregrounds, soft fills mixed into dark surface */
  --success-fg:   #A8D876;
  --success-soft: color-mix(in srgb, var(--success) 22%, #1C1F26);
  --status-done-fg:   var(--success-fg);     /* redeclares ici : une variable derivee se calcule la ou elle est declaree */
  --status-done-soft: var(--success-soft);
  --status-planned-fg:   var(--info-fg);
  --status-planned-soft: var(--info-soft);
  --status-refused-fg:   var(--danger-fg);
  --status-refused-soft: var(--danger-soft);
  --warning-fg:   #FFAB4D;
  --warning-soft: color-mix(in srgb, var(--warning) 26%, #1C1F26);
  /* Graphiques d etat, valides sur #1C1F26 : bande de clarte, ΔE CVD 7,7 (zone 6-8 : second codage
     obligatoire — position du point, legende chiffree, ecart de 2px entre segments). */
  --chart-good: #2F8A63;
  --chart-warn: #D8711A;
  --danger-fg:    #F08A82;
  --danger-soft:  color-mix(in srgb, var(--danger) 24%, #1C1F26);
  /* En sombre : vert 3,25:1, rouge 3,29:1 sur la surface #1C1F26. */
  --success-border: color-mix(in srgb, var(--success) 60%, #1C1F26);
  --danger-border:  color-mix(in srgb, var(--danger-fg) 60%, #1C1F26);
  --info-fg:      #7AA7FF;
  --info-soft:    color-mix(in srgb, var(--info) 24%, #1C1F26);
  /* Texte violet eclairci, comme `--info-fg` : le melange au noir du theme clair donnait un
     violet sombre sur fond violet sombre, illisible (badge « Poste cle » des fiches de poste). */
  --accent-violet-fg:   color-mix(in srgb, var(--accent-violet) 45%, #ffffff);
  --accent-violet-soft: color-mix(in srgb, var(--accent-violet) 28%, #1C1F26);

  /* statut de process — memes regles : texte eclairci, fond melange au panneau */
  --status-draft-fg:        #EFE06A;
  --status-draft-soft:      color-mix(in srgb, #EBCB00 22%, #1C1F26);
  --status-progress-fg:     var(--warning-fg);   /* redeclares : variables derivees */
  --status-progress-soft:   var(--warning-soft);
  --status-planned-light-fg:     #7DD3FC;
  --status-planned-light-soft:   color-mix(in srgb, #38BDF8 22%, #1C1F26);
  --status-planned-dark:         #6B8BD6;
  --status-planned-dark-fg:      #A9BDEB;
  --status-planned-dark-soft:    color-mix(in srgb, #1E3A8A 50%, #1C1F26);
  --status-blocked-fg:      #D9A77A;
  --status-blocked-soft:    color-mix(in srgb, #8C4A12 45%, #1C1F26);
  --status-cancelled:       #6B7280;
  --status-cancelled-fg:    var(--text-secondary);
  --status-cancelled-soft:  var(--surface-hover);
  --status-archived-fg:     color-mix(in srgb, var(--accent-violet) 45%, #ffffff);

  /* elevation reads as deeper shadows on dark */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.36);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.46), 0 8px 18px rgba(0,0,0,0.42);
  --shadow-lg: 0 10px 24px rgba(0,0,0,0.52), 0 24px 48px rgba(0,0,0,0.50);
}