/* ==========================================================================
   LES JETONS DU PRODUIT, POUR LA DÉMO (2026-09-18)

   La démo publique (/outils/<slug>/demo) vit sur sa propre page, sans app.css :
   elle ne voit ni base.css ni theme-clair.css. Jusqu'à ce jour elle portait donc
   son PROPRE vocabulaire — trente noms (`--muted`, `--paper`, `--card`, `--link`…),
   des valeurs voisines mais pas égales à celles du produit (`--text: #55617a`
   contre `--dark-text-dim: #6b7890`), et 173 couleurs en dur. Un second design
   system, que le prospect voyait sans jamais voir le premier.

   Décision de Ghislain, le 2026-09-18 : « dans outils, on peut tout normaliser sur
   les bases du thème ». Ce fichier redit les jetons de base.css et de
   theme-clair.css SOUS LEURS NOMS, aux valeurs du thème clair. shell.css et les
   deux demo.css les consomment ; leur ancien :root a disparu.

   ⚠ CES VALEURS SONT UNE COPIE. La source est base.css (les primitives) et
   theme-clair.css (le retournement clair). Le test
   `la_demo_lit_les_jetons_du_produit_aux_memes_valeurs` (assets.rs) compare les
   deux à chaque check : une valeur qui diverge fait tomber le build. Le jour où
   une route sert les jetons seuls, ce fichier devient un <link> et ce test disparaît.
   ========================================================================== */
:root {
  /* ── Primitives (base.css) ─────────────────────────────────────────────── */
  --page: #ffffff;
  --surface-soft: #f8fafc;
  --ink-strong: #020617;
  --ink-faint: #64748b;
  --line-soft: #f1f5f9;
  --dark: #0a0d14;                /* le bandeau et le rail de la démo restent sombres,
                                     comme le shell du produit : usage « shell », pas
                                     « bloc » — theme-clair.css ne s'applique pas ici */
  --blue-100: #eaf1ff;            /* fond de pastille : NON retourné (la démo le lit en fond) */
  --blue-200: var(--blue-700);      /* thème clair : les bleus pâles deviennent le bleu du texte */
  --blue-300: var(--blue-700);
  --blue-450: #5a94fc;
  --blue-500: #4d8bfb;
  --blue-600: #3f7cf3;
  --blue-700: #2563eb;
  --blue-800: #1d4ed8;
  --blue-900: #1e3a8a;
  --accent-solid: var(--blue-600);
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --rail-w: 44px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: Archivo, Arial, sans-serif;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --fs-16: 16px;
  --fs-24: 24px;

  /* ── Le thème clair (theme-clair.css), valeur pour valeur ─────────────── */
  --dark-2: #fff;
  --dark-3: #f6f8fc;
  --dark-panel: #fff;
  --dark-inset: #f6f8fc;
  --dark-text-strong: #19263d;
  --dark-text: #53647e;
  --dark-text-dim: #6b7890;
  --dark-text-faint: #72819a;
  --dark-border: #e2e8f1;
  --dark-border-2: #dce3ed;
  --line: #e2e8f1;
  --blue-400: var(--blue-700);
  --brand: var(--blue-700);
  --brand-hover: var(--blue-800);
  --ink: #19263d;
  --ink-dim: #58677e;
  --emerald: #047857;
  --emerald-soft: #047857;
  --amber: #b45309;
  --amber-soft: #b45309;
  --violet: #6d28d9;              /* le violet CLAIR, comme prospection-v3.css le retourne */
  --rose: #be123c;

  /* ── Propres à la démo, sans homologue dans le produit (documentés) ────── */
  --paper: #f2f4f8;               /* le fond de page des écrans de travail, que le produit
                                     écrit en dur dans body.rd-body — pas encore un jeton */
  --blue-tint: rgba(63, 124, 243, 0.14);   /* = color-mix(blue-600 14%) du produit */
  --blue-ring: rgba(63, 124, 243, 0.3);
  --green-bg: #e8f7f0;
  --amber-bg: #fff4df;
  --red: var(--rose);
  --red-bg: #fee2e2;
  --violet-bg: #f1ebff;
}
body.rail-open { --rail-w: 216px; }