/* tokens.css -- jetons visuels de MotionUp : couleurs, typographie, espacement,
   rayons, ombres, et les deux themes (clair / sombre).

   SOURCE : Docs/ui-kit.html, lignes 11-163, copiees VERBATIM. Le kit reste la
   reference qu'on ouvre pour juger ; ce fichier est sa copie servie aux pages.
   Toute evolution se fait DANS le kit, puis se recopie ici -- jamais l'inverse,
   sans quoi les quatre produits web et la planche divergent en silence.

   Le theme suit `data-theme` sur <html> ("light" / "dark"), et a defaut la
   preference systeme. mu-ui.js restaure le choix memorise au chargement.
*/

/* ═══════════════════════════════════════════════════════════════════
   JETONS — issus de motion-up.com, complétés pour l'applicatif
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* --- Marque (motion-up.com, inchangés) --- */
  --white:        #ffffff;
  --off-white:    #f7f9f6;
  --gray-50:      #f3f5f2;
  --gray-100:     #e6ebe4;
  --gray-200:     #cdd6ca;
  --gray-400:     #8a9e88;
  --gray-600:     #4a5e48;
  --gray-900:     #151e2d;
  --accent:       #78b84a;
  --accent-dark:  #5f9836;
  --accent-light: #96cc6a;
  --accent-soft:  rgba(120,184,74,.09);
  --accent-mid:   rgba(120,184,74,.18);
  --dark-bg:      #151e2d;   /* fond de page en thème sombre */
  --dark-bg2:     #303847;   /* surfaces : cartes, popups, tableaux, barres */
  --dark-panel:   #282f3c;   /* panneau des graphiques — volontairement en retrait
                                des surfaces, comme le gris ggplot l'est du blanc */
  --dark-border:  rgba(255,255,255,.08);
  --dark-text:    #e0ecd8;
  --dark-muted:   #6a8060;

  /* --- Typographie --- */
  --font: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px;
  --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px;

  /* --- Rayons (motion-up.com) --- */
  --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
  --r-btn: 10px; --r-field: 10px;

  /* --- Espacement --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* --- Ombres (motion-up.com) --- */
  --shadow-sm: 0 1px 4px rgba(21,30,45,.06);
  --shadow:    0 4px 18px rgba(21,30,45,.09);
  --shadow-lg: 0 16px 48px rgba(21,30,45,.13);
  --shadow-xl: 0 32px 80px rgba(21,30,45,.16);

  --dur: 140ms;
  --ease: cubic-bezier(.4,0,.2,1);

  /* --- Squelette en vue 3D (d'après OptiTrack Motive, cf. Docs/refs/) --- */
  --skel-bone:       #eef2ec;   /* os : blanc très légèrement teinté vert */
  --skel-bone-shade: #b9c3b6;   /* facette en ombre — le pli central */
  --skel-joint:      #ffffff;
  --skel-ring:       #0d1420;   /* anneau sombre : sépare de l'os ET du fond */
  --skel-occluded:   .26;       /* opacité des segments masqués par le maillage */
  --vp-grid:         rgba(255,255,255,.07);
  --vp-grid-major:   rgba(255,255,255,.15);

  /* Sélection : le fond est peint sur une boîte en retrait, pas sur toute
     la hauteur de ligne — deux lignes consécutives restent séparées.
     Technique : bordures verticales transparentes + background-clip. */
  --sel-inset: 3px;
  --sel-radius: 8px;
}

/* ── THÈME CLAIR ─────────────────────────────────────────────────── */
:root, :root[data-theme="light"] {
  --bg-page:      var(--off-white);
  --bg-surface:   var(--white);
  --bg-sunken:    var(--gray-50);
  --bg-raised:    var(--white);
  --bg-hover:     rgba(21,30,45,.04);
  --bg-active:    rgba(21,30,45,.07);
  --border:       var(--gray-200);
  --border-soft:  var(--gray-100);
  --ink:          var(--gray-900);
  --ink-2:        var(--gray-600);
  --ink-muted:    var(--gray-400);
  --ink-invert:   #ffffff;

  --primary:      var(--accent);
  --primary-hi:   var(--accent-dark);
  --primary-soft: var(--accent-soft);
  --info:         #2b7fc4;
  --info-hi:      #22679f;
  --info-soft:    rgba(43,127,196,.10);
  --danger:       #cf3b34;
  --danger-hi:    #ad2f29;
  --danger-soft:  rgba(207,59,52,.10);
  --warn:         #cf8b0c;
  --side-left:    #e85f5a;
  --side-right:   #2b7fc4;
  --warn-hi:      #a86f08;
  --warn-soft:    rgba(207,139,12,.12);

  --chart-panel:  #e9ede7;
  --chart-grid:   #ffffff;
  --chart-axis:   var(--gray-400);
  --chart-stroke: rgba(21,30,45,.55);
  --scroll-thumb: rgba(21,30,45,.22);
  --viewport-bg:  #dfe5dd;
  --shadow-lg-t:  var(--shadow-lg);

  /* Palette catégorielle — validée (bande L, chroma, séparation DVC,
     plancher vision normale) contre le fond #e9ede7. Ordre FIXE. */
  --c1:#c86f00; --c2:#006bb9; --c3:#28a43a; --c4:#9e3699;
  --c5:#009ca3; --c6:#ba2b2e; --c7:#8a70ec;
}

/* ── THÈME SOMBRE ────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg-page:      var(--dark-bg);
  --bg-surface:   var(--dark-bg2);
  --bg-sunken:    #1b2230;
  --bg-raised:    #3b4455;
  --bg-hover:     rgba(255,255,255,.05);
  --bg-active:    rgba(255,255,255,.09);
  --border:       var(--dark-border);
  --border-soft:  rgba(255,255,255,.05);
  --ink:          var(--dark-text);
  --ink-2:        #a9bda0;
  --ink-muted:    var(--dark-muted);
  --ink-invert:   #0f1622;

  --primary:      var(--accent-light);
  --primary-hi:   var(--accent);
  --primary-soft: rgba(150,204,106,.14);
  --info:         #56a7e8;
  --info-hi:      #7dbcf0;
  --info-soft:    rgba(86,167,232,.14);
  --danger:       #e8615a;
  --danger-hi:    #f0837d;
  --danger-soft:  rgba(232,97,90,.14);
  --warn:         #e2a52e;
  --warn-hi:      #edb84f;
  --warn-soft:    rgba(226,165,46,.14);

  --chart-panel:  var(--dark-panel);
  --chart-grid:   rgba(255,255,255,.07);
  --chart-axis:   var(--dark-muted);
  --chart-stroke: rgba(255,255,255,.35);
  --scroll-thumb: rgba(255,255,255,.20);
  --viewport-bg:  #0e1522;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.35);
  --shadow:       0 4px 18px rgba(0,0,0,.45);
  --shadow-lg-t:  0 16px 48px rgba(0,0,0,.55);

  /* Palette catégorielle sombre — pas un miroir du clair : recalculée
     et validée contre le fond #1c2840. Mêmes teintes, autres paliers. */
  --c1:#d17400; --c2:#0074c8; --c3:#31aa40; --c4:#a840a2;
  --c5:#00a3aa; --c6:#c53637; --c7:#9076f3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; }
}