/* =====================================================================
   Jetons visuels — repris du handoff de design (design_handoff_telepherique_
   bissorte, 2026-08-16) : IBM Plex, thème clair unique (le rail et certains
   en-têtes restent sombres en dur, ce n'est pas un thème à bascule).
   L'accent bascule avec `data-section` : bleu acier pour le téléphérique,
   vert sapin pour le chalet.
   ===================================================================== */

:root {
  color-scheme: light;

  /* Échelle neutre — du fond de page au texte principal */
  --gray-50:  #f4f6f8;   /* fond de l'application */
  --gray-75:  #ffffff;   /* cartes, panneaux, barres — surface */
  --gray-100: #f6f7f9;   /* surface creusée / pistes neutres */
  --gray-200: #e9ecf1;   /* pistes de jauge */
  --gray-300: #e4e7ec;   /* bordure */
  --gray-400: #cfd5dd;   /* bordure marquée */
  --gray-500: #9aa3af;   /* texte désactivé, icônes atténuées */
  --gray-600: #7b8492;   /* texte secondaire / labels */
  --gray-700: #5b6472;   /* texte tertiaire fort */
  --gray-800: #3d4653;   /* texte quasi principal */
  --gray-900: #10151b;   /* texte principal, rail/en-têtes sombres */

  /* Couleurs sémantiques — mêmes règles dans les deux sections */
  --pos:      #1f7a5c;
  --pos-bg:   #e8f5ef;
  --pos-line: #b7e2d0;
  --warn:       #c26a05;
  --warn-bg:    #fdf1e2;
  --warn-line:  #f0d5a8;
  --warn-fg:    #7a4304;   /* texte sur fond --warn-bg */
  --neg:      #d31510;
  --neg-bg:   #fdeceb;
  --neg-line: #f2b8b6;

  /* Sens de circulation — pas de teinte dédiée dans le design : la direction
     se lit au glyphe/libellé, pas à la couleur. */
  --montee:   var(--gray-900);
  --descente: var(--gray-700);

  /* Géométrie */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px;
  --r-1: 7px;   --r-2: 10px;  --r-3: 14px;
  --ctrl-h: 36px;
  --rail-w: 78px;
  --panel-w: 380px;
  --rail-bg: #10151b;

  --shadow-1: 0 1px 3px rgba(16, 21, 27, .14);
  --shadow-2: 0 6px 18px rgba(16, 21, 27, .1);

  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* ---- Accents de section : la seule chose qui change entre les deux ---- */
:root,
:root[data-section="telepherique"] {
  --accent:         #2680eb;
  --accent-hover:   #1473e6;
  --accent-down:    #0d66d0;
  --accent-soft:    #eaf2fe;
  --accent-line:    #c7deff;
  --accent-shadow:  rgba(38, 128, 235, .3);
  --accent-dark:    #0b2f5c;   /* en-têtes pleine teinte (billet, écran de connexion) */
  --on-accent:      #ffffff;
  --section-nom:    "Téléphérique";
}

:root[data-section="chalet"] {
  --accent:         #2d9d78;
  --accent-hover:   #23896a;
  --accent-down:    #1f7a5c;
  --accent-soft:    #e8f5ef;
  --accent-line:    #b7e2d0;
  --accent-shadow:  rgba(45, 157, 120, .3);
  --accent-dark:    #1f7a5c;
  --on-accent:      #ffffff;
  --section-nom:    "Chalet";
}
