/* ============================================================
   SAIFY — socle de tokens de design V1.2 (2026-09-27)
   Noms communs à toutes les briques (JAISTY, Mail Pilote, TODO, MAITING,
   DAITA, pilotes). Chaque brique recopie ce fichier en tête de son
   design/tokens.css, garde ces noms tels quels, et ajoute les siens
   au-dessous. Une brique qui a déjà d'autres noms pose des alias
   (ex. MAITING : --encre: var(--color-text)) puis renomme à son rythme.

   Règle d'écosystème : interface en français, noms de tokens, classes et
   composants en anglais (BIBLE_GUI de JAISTY, étendue par l'ADR-0005 de
   TODO). Aucune couleur, taille, espacement, rayon ni ombre en dur dans un
   écran : tout passe par un token ; un besoin non couvert est une question
   au propriétaire, jamais une valeur inventée.

   V1.1 — arbitrage du propriétaire du 2026-09-25, sur maquette comparative
   (_Socle/_Travail/maquettes/comparatif-identites-halo-outlook.html) :
   · thème CLAIR = identité « Halo » (bleu #2447E2, encre #0D1524), reprise
     de Jaisty/design/tokens.css, déjà en production sur JAISTY et Raiky.
     Remplace la palette « Outlook-bleu » de la V1.0 (_old/tokens-V1.0.css) ;
   · thème SOMBRE = celui de MAITING (MAITING/design/tokens.css), en
     production depuis l'ADR-0036 de MAITING. Le socle porte désormais les
     VALEURS sombres, pas seulement la mécanique : une brique ne redéfinit
     plus rien, elle hérite. C'est ce qui rend cohérent un composant
     embarqué (TODO) chez un hôte sombre (MAITING, Mail Pilote).

   Contrastes WCAG 2.2 mesurés le 2026-09-25 (formule de luminance
   relative), chaque encre contre CHAQUE surface où elle apparaît
   (surface, bg, surface-sunken, primary-soft), pas contre le seul fond
   principal — méthode de TODO. Trois valeurs reprises n'y tenaient pas et
   ont été corrigées sur leur propre axe de teinte, sans teinte inventée :
   · clair  --color-text-faint   #8A94A8 → #5F6B83  (JAISTY le réservait aux
     placeholders à 3,05:1 ; le socle l'emploie pour des indications de
     champ, donc texte : 4,51:1 au pire, sur primary-soft) ;
   · sombre --color-text-faint   #7F8B98 → #8B97A3  (4,20:1 sur
     surface-sunken et 3,86:1 sur primary-soft en production → 4,51:1 au pire) ;
   · sombre --color-border-strong #455463 → #667381 (2,12:1 sur surface,
     sous le seuil composant de 3:1 → 3,01:1 au pire, sur surface-sunken).
   Les deux corrections sombres sont aussi des défauts de MAITING en
   production : à reprendre dans son design/tokens.css.

   V1.2 — arbitrage du propriétaire du 2026-09-27, variante C « Halo
   complet » (_Socle/_Travail/maquettes/arbitrage-sombre-teinte-halo.html) : le
   SOMBRE passe dans la teinte Halo (≈229°) — action, surfaces, encres et
   filets — à la luminosité du sombre de MAITING. L'écart de teinte
   d'action entre clair et sombre de la V1.1 (#7FB3E6 bleu-ciel) disparaît.
   Aucun nom ne change ; couleurs de statut inchangées. `border-strong`
   remonté à #686D83 (2,95:1 → 3,04:1 sur surface-sunken). Contrastes
   remesurés le 2026-09-27 contre bg, surface, surface-sunken et
   primary-soft : texte 4,69:1 au pire (text-faint sur primary-soft),
   statuts 6,30:1 au pire, bordure de champ 3,04:1. V1.1 : _old/tokens-V1.1.css.

   Mécanique des thèmes (inchangée, déjà éprouvée par MAITING et Mérovia) :
   · rien d'explicite       → prefers-color-scheme décide ;
   · [data-theme="dark"]    → sombre, même sur un système clair ;
   · [data-theme="light"]   → clair, même sur un système sombre.
   Un composant embarqué suit le thème de son hôte : voir la règle
   `theme="auto|clair|sombre"` du briefing écosystème (§ 7).

   Ce que le socle ne fixe pas : couleurs de domaine (types d'objets,
   origines, dossiers), rail sombre, largeurs de panneaux, tailles de texte
   au-delà de l'échelle de base. Elles restent à chaque brique — qui leur
   donne elle-même une valeur sombre, mesurée, si elle sert le sombre.
   ============================================================ */

:root {
  /* ---------- Couleurs · fondations (ratios : pire cas mesuré) ---------- */
  --color-bg:              #F3F5FA; /* « Givre », fond de travail */
  --color-surface:         #FFFFFF; /* panneaux, cartes, lignes */
  --color-surface-sunken:  #EAEDF3; /* en-têtes de liste, zones repliées */
  --color-text:            #0D1524; /* « Encre » (18,26:1 sur surface ; 15,35:1 pire cas) */
  --color-text-muted:      #54617A; /* texte secondaire, libellés (6,24:1 ; 5,24:1 pire cas) */
  --color-text-faint:      #5F6B83; /* indications de champ (5,36:1 ; 4,51:1 pire cas) */
  --color-border:          #DCE0E8; /* filets, séparateurs */
  --color-border-strong:   #7E889D; /* bordures de champs (3,56:1 ; 3,27:1 sur bg, composant) */

  /* ---------- Couleur d'action ---------- */
  --color-primary:         #2447E2; /* bleu SAIFY (6,83:1 ; 5,82:1 sur sunken) */
  --color-primary-hover:   #1C38B8; /* blanc dessus 9,10:1 */
  --color-primary-active:  #162C91; /* blanc dessus 11,65:1 */
  --color-primary-soft:    #E6EBFC; /* ligne sélectionnée, onglet actif */
  --color-focus-ring:      #2447E2; /* outline 2px + offset 2px, partout */
  --color-on-action:       #FFFFFF; /* encre sur surface d'action pleine (6,83:1) */

  /* ---------- Sémantiques : statuts, jamais seuls (pastille + libellé) ----------
     encre sur son fond · encre sur surface */
  --color-success:         #177141;   --color-success-bg:  #E3F1E7;   --color-success-border: #A9D8B4; /* 5,18 · 6,04 */
  --color-warning:         #8F5A00;   --color-warning-bg:  #F7EDD8;   --color-warning-border: #EFD27F; /* 4,97 · 5,78 */
  --color-danger:          #B3261E;   --color-danger-bg:   #F9E7E5;   --color-danger-border:  #F0B3B9; /* 5,48 · 6,54 */
  --color-neutral:         #556068;   --color-neutral-bg:  #E9EBEF;                                    /* 5,40 · 6,44 */

  /* ---------- Produit par une machine, pas encore validé par un humain ---------- */
  --color-proposed:        #5B3FB8;   --color-proposed-bg: #F4F1FC;   --color-proposed-border: #DAD1F3; /* 6,61 · 7,37 */

  /* ---------- Typographie ---------- */
  --font-display: "Instrument Sans", "Segoe UI", system-ui, sans-serif; /* titres de page */
  --font-body:    "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", "Cascadia Mono", monospace; /* codes, identifiants */
  --text-xs:   0.6875rem; /* 11px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md:   1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.375rem;  /* 22px */
  --text-2xl:  1.6875rem; /* 27px */
  --leading-reading: 1.6;

  /* ---------- Espacement (base 4 px) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* ---------- Rayons (2 valeurs max) et ombres (2 niveaux max) ---------- */
  --radius-sm: 4px; /* champs, boutons, badges */
  --radius-md: 8px; /* cartes, panneaux, dialogues */
  --shadow-1: 0 1px 2px rgba(13,21,36,.05), 0 1px 3px rgba(13,21,36,.07);
  --shadow-2: 0 8px 24px rgba(13,21,36,.16);

  /* ---------- Densité (écrans de travail) ---------- */
  --row-height:      36px; /* ligne de tableau */
  --control-height:  32px; /* champs et boutons */
  --topbar-height:   48px;

  color-scheme: light;
}

/* ---------- Thème sombre : système sombre, sauf choix explicite du clair ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:              #0F121E;
    --color-surface:         #171A29;
    --color-surface-sunken:  #1F2335;
    --color-text:            #E6E8F0; /* 14,11:1 ; 12,28:1 pire cas */
    --color-text-muted:      #AEB2C4; /* 8,19:1 ; 7,13:1 pire cas */
    --color-text-faint:      #8B8FA3; /* 5,39:1 ; 4,69:1 pire cas */
    --color-border:          #2C3146;
    --color-border-strong:   #686D83; /* 3,37:1 ; 3,04:1 pire cas */
    --color-primary:         #96A8F8; /* 7,61:1 ; 6,62:1 pire cas */
    --color-primary-hover:   #B2BFFA;
    --color-primary-active:  #CFD7FC;
    --color-primary-soft:    #1C2449;
    --color-focus-ring:      #96A8F8;
    --color-on-action:       #0F121E; /* 8,22:1 sur primary */
    --color-success:         #6CCB8F;   --color-success-bg:  #1B3326;   --color-success-border: #2E5A3C; /* 6,83 · 8,30 */
    --color-warning:         #E3B65B;   --color-warning-bg:  #3A2E14;   --color-warning-border: #6B5424; /* 7,03 · 8,71 */
    --color-danger:          #F28B84;   --color-danger-bg:   #3A1C1A;   --color-danger-border:  #6B302C; /* 6,47 · 6,90 */
    --color-neutral:         #AEB2C4;   --color-neutral-bg:  #1F2335;                                    /* 7,25 · 8,20 */
    --color-proposed:        #B4A6EC;   --color-proposed-bg: #2B2545;   --color-proposed-border: #4A4076; /* 6,61 · 7,53 */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

/* ---------- Thème sombre : choix explicite, même sur un système clair ---------- */
:root[data-theme="dark"] {
  --color-bg:              #0F121E;
  --color-surface:         #171A29;
  --color-surface-sunken:  #1F2335;
  --color-text:            #E6E8F0;
  --color-text-muted:      #AEB2C4;
  --color-text-faint:      #8B8FA3;
  --color-border:          #2C3146;
  --color-border-strong:   #686D83;
  --color-primary:         #96A8F8;
  --color-primary-hover:   #B2BFFA;
  --color-primary-active:  #CFD7FC;
  --color-primary-soft:    #1C2449;
  --color-focus-ring:      #96A8F8;
  --color-on-action:       #0F121E;
  --color-success:         #6CCB8F;   --color-success-bg:  #1B3326;   --color-success-border: #2E5A3C;
  --color-warning:         #E3B65B;   --color-warning-bg:  #3A2E14;   --color-warning-border: #6B5424;
  --color-danger:          #F28B84;   --color-danger-bg:   #3A1C1A;   --color-danger-border:  #6B302C;
  --color-neutral:         #AEB2C4;   --color-neutral-bg:  #1F2335;
  --color-proposed:        #B4A6EC;   --color-proposed-bg: #2B2545;   --color-proposed-border: #4A4076;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}