/* ============================================================================
   ADSYRA DESIGN — tokens.css
   Source unique des couleurs, rayons, ombres, polices et espacements.
   Tiré du CSS du CRM Pepsi (refonte « Dr Mailer » du 14/09/2026), mode sombre
   complété pour tenir un contraste >= 4,5:1.

   Ordre de chargement dans un module (voir README.md) :
     tokens.css -> adsyra-ui.css -> components.css -> CSS propre du module -> override du module
   Toujours suffixer les <link> par ?v=<version> (cache Cloudflare 4 h).

   Thème : clair par défaut. Sombre si l'OS est en sombre et qu'aucun choix n'est
   posé (<html> sans data-theme), ou si <html data-theme="dark">. Le choix de
   l'utilisateur est mémorisé par shell.js dans localStorage « adsyra-theme ».

   Accent surchargeable par profil : poser <html data-accent="amber"> (identité
   Adsyra) ou redéfinir --accent / --accent-soft / --on-accent dans le fichier
   d'override du module. Jamais de couleur recopiée dans un gabarit.
   ============================================================================ */

:root{
  /* ---- constantes de marque (identiques dans les deux thèmes) ---- */
  --brand-amber:#E8A33D;
  --brand-ink:#0B1417;

  /* ---- palette CLAIRE (référence Pepsi) ---- */
  --bg:#F3F5F8;              /* fond de page */
  --surface:#FFFFFF;         /* cartes, panneaux, tableaux */
  --surface-2:#F7F9FC;       /* en-têtes de tableau, survols, zones secondaires */
  --line:#E6EAF0;            /* filets et bordures */
  --line-strong:#B9C4D1;     /* bordure au survol, liseré neutre du sélecteur de statut */
  --text:#1F2933;            /* texte principal */
  --muted:#6B7785;           /* texte secondaire */
  --th-color:#556270;        /* en-têtes de tableau */

  --accent:#2F6DF6;          /* bleu Pepsi : boutons, liens, menu actif */
  --accent-soft:rgba(47,109,246,.12);
  --on-accent:#FFFFFF;       /* texte posé sur l'accent */

  --ok:#1E7A45;        --ok-soft:#E7F6EC;
  --warn:#B26A00;      --warn-soft:#FFF4E5;
  --danger:#C0392B;    --danger-soft:#FDECEC;
  --info:#2F6DF6;      --info-soft:#EEF3FF;
  --neutral:#556270;   --neutral-soft:#F1F3F7;   /* pastilles « parked », états sans couleur */
  --on-strong:#FFFFFF;       /* texte posé sur ok / warn / danger pleins */
  --danger-ring:rgba(192,57,43,.25);             /* halo de l'alerte LEAD LIVE */

  /* ---- voiles et superpositions ---- */
  --veil:rgba(31,41,51,.45);        /* fenêtre de fiche, tiroir, dialogue */
  --veil-soft:rgba(0,0,0,.40);      /* tiroir du menu mobile */

  /* ---- ombres ---- */
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.06);   /* cartes, filtres, cadres de tableau */
  --shadow:0 10px 28px rgba(24,37,40,.10);                                  /* tiroirs, toasts, menus flottants */
  --shadow-lg:0 30px 80px rgba(0,0,0,.35);                                  /* fenêtre de fiche */

  /* ---- polices (chargées par <link> Google Fonts dans le gabarit) ---- */
  --font-ui:'Jost','Avenir Next','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* ---- rayons ---- */
  --radius:14px;             /* cartes, panneaux, cadres de tableau */
  --radius-sm:9px;           /* boutons, champs, entrées de menu */
  --radius-lg:16px;          /* fenêtre de fiche */
  --radius-pill:999px;       /* pastilles, puces */

  /* ---- espacements (compatibilité adsyra-ui) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* ---- gabarit : largeurs réglables ---- */
  --side-w:236px;            /* menu latéral déplié */
  --side-w-min:64px;         /* menu latéral replié (icônes) */
  --stick-l-w:84px;          /* largeur de la 1re colonne figée (ID) */
  --stick-r2-w:84px;         /* décalage de la 2e colonne figée à droite */

  /* ---- flèche des <select> stylés (couleur = --muted) ---- */
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7785' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");

  /* ---- alias hérités (anciens noms encore présents dans des gabarits) ---- */
  --panel:var(--surface); --panel2:var(--surface-2); --border:var(--line);
  --green:var(--ok); --red:var(--danger); --amber:var(--warn); --purple:var(--info);
  --accent2:var(--accent); --mono:var(--font-mono);

  color-scheme:light;
}

/* ---- thème clair posé explicitement (bouton THÈME de la Console) : on réaffirme
   la palette, car un ancien CSS de module peut encore définir :root[data-theme="light"] en beige ---- */
:root[data-theme="light"]{
  --bg:#F3F5F8; --surface:#FFFFFF; --surface-2:#F7F9FC; --line:#E6EAF0; --line-strong:#B9C4D1;
  --text:#1F2933; --muted:#6B7785; --th-color:#556270;
  --accent:#2F6DF6; --accent-soft:rgba(47,109,246,.12); --on-accent:#FFFFFF;
  --ok:#1E7A45; --ok-soft:#E7F6EC; --warn:#B26A00; --warn-soft:#FFF4E5;
  --danger:#C0392B; --danger-soft:#FDECEC; --info:#2F6DF6; --info-soft:#EEF3FF;
  --neutral:#556270; --neutral-soft:#F1F3F7; --on-strong:#FFFFFF; --danger-ring:rgba(192,57,43,.25);
  --veil:rgba(31,41,51,.45); --veil-soft:rgba(0,0,0,.40);
  --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 6px 18px rgba(16,24,40,.06);
  --shadow:0 10px 28px rgba(24,37,40,.10); --shadow-lg:0 30px 80px rgba(0,0,0,.35);
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7785' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  color-scheme:light;
}

/* ---- palette SOMBRE : suit l'OS tant qu'aucun choix n'est posé ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B1417; --surface:#111D21; --surface-2:#15242A; --line:#22363C; --line-strong:#35505A;
    --text:#E3E9EC; --muted:#8FA0AB; --th-color:#9FB0BA;
    --accent:#6E9BFF; --accent-soft:rgba(110,155,255,.16); --on-accent:#0B1417;
    --ok:#4FC27A; --ok-soft:rgba(79,194,122,.16); --warn:#E8B04B; --warn-soft:rgba(232,176,75,.16);
    --danger:#F07F72; --danger-soft:rgba(240,127,114,.16); --info:#6E9BFF; --info-soft:rgba(110,155,255,.16);
    --neutral:#9FB0BA; --neutral-soft:rgba(159,176,186,.14); --on-strong:#0B1417; --danger-ring:rgba(240,127,114,.30);
    --veil:rgba(0,0,0,.55); --veil-soft:rgba(0,0,0,.55);
    --shadow-sm:0 1px 2px rgba(0,0,0,.25),0 6px 18px rgba(0,0,0,.30);
    --shadow:0 12px 32px rgba(0,0,0,.45); --shadow-lg:0 30px 80px rgba(0,0,0,.65);
    --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238FA0AB' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
    color-scheme:dark;
  }
}
/* ---- thème sombre posé explicitement ---- */
:root[data-theme="dark"]{
  --bg:#0B1417; --surface:#111D21; --surface-2:#15242A; --line:#22363C; --line-strong:#35505A;
  --text:#E3E9EC; --muted:#8FA0AB; --th-color:#9FB0BA;
  --accent:#6E9BFF; --accent-soft:rgba(110,155,255,.16); --on-accent:#0B1417;
  --ok:#4FC27A; --ok-soft:rgba(79,194,122,.16); --warn:#E8B04B; --warn-soft:rgba(232,176,75,.16);
  --danger:#F07F72; --danger-soft:rgba(240,127,114,.16); --info:#6E9BFF; --info-soft:rgba(110,155,255,.16);
  --neutral:#9FB0BA; --neutral-soft:rgba(159,176,186,.14); --on-strong:#0B1417; --danger-ring:rgba(240,127,114,.30);
  --veil:rgba(0,0,0,.55); --veil-soft:rgba(0,0,0,.55);
  --shadow-sm:0 1px 2px rgba(0,0,0,.25),0 6px 18px rgba(0,0,0,.30);
  --shadow:0 12px 32px rgba(0,0,0,.45); --shadow-lg:0 30px 80px rgba(0,0,0,.65);
  --chevron:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238FA0AB' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  color-scheme:dark;
}

/* ---- profil d'accent « ambre » (identité Adsyra, décision DES-41 pour la Console) :
   <html data-accent="amber">. Les autres tokens ne bougent pas. ---- */
:root[data-accent="amber"]{ --accent:#B97B1F; --accent-soft:rgba(185,123,31,.12); --on-accent:#FFFFFF }
@media (prefers-color-scheme:dark){
  :root[data-accent="amber"]:not([data-theme="light"]){ --accent:#E8A33D; --accent-soft:rgba(232,163,61,.16); --on-accent:#0B1417 }
}
:root[data-accent="amber"][data-theme="dark"]{ --accent:#E8A33D; --accent-soft:rgba(232,163,61,.16); --on-accent:#0B1417 }