/* =========================================================================
   ODM — Design tokens (source unique de cohérence visuelle)
   -------------------------------------------------------------------------
   Échelles strictes : aucune valeur d'espacement / rayon / ombre / durée ne
   doit être posée « à la main » ailleurs — tout consomme ces variables.
   main.css remappe ses variables historiques (--citea, --ink…) sur ces tokens
   pour ne rien casser pendant la refonte progressive.
   ========================================================================= */
:root {
  /* --- Neutres (légèrement chauds, lisibles) --- */
  --n-0:   #ffffff;
  --n-25:  #fafbfc;
  --n-50:  #f4f6f9;
  --n-100: #eceff3;
  --n-150: #e2e6ea;
  --n-200: #d3dae1;
  --n-300: #b4bfca;
  --n-400: #8893a1;
  --n-500: #5a6573;
  --n-600: #434d59;
  --n-700: #2f3741;
  --n-800: #1d242c;
  --n-900: #10151b;

  /* --- Marque (Citea = temps réel) & réseaux --- */
  --brand:      #0055A4;
  --brand-600:  #00467f;
  --brand-700:  #003463;
  --brand-100:  #e7f0f9;   /* fond doux bleu (encarts info) */
  --brand-200:  #cfe0f1;

  --cars:       #0e9594;   /* Cars Drôme = horaires théoriques */
  --cars-600:   #0a7574;
  --cars-100:   #e2f4f3;

  /* --- Couleur de suivi (bus suivi) : magenta absent des lignes --- */
  --sel:        #e0007a;
  --sel-soft:   #ff3d9e;

  /* --- Sémantiques (état d'un passage / d'une alerte) --- */
  --ok:     #1a8a3a;   --ok-100:   #e3f4e8;
  --late:   #d4380d;   --late-100: #fbe7e1;
  --early:  #0a7ea4;   --early-100:#e1f1f6;
  --warn:   #E8730C;   --warn-100: #fdeede;   /* alertes trafic */

  /* --- Espacement (échelle 4) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* --- Rayons --- */
  --r-ctl:   10px;   /* contrôles, badges, chips */
  --r-card:  16px;   /* cartes, panneaux flottants */
  --r-sheet: 22px;   /* bottom sheets, overlays */
  --r-pill:  999px;

  /* --- Élévation (ombres multi-couches, douces) --- */
  --e1: 0 1px 2px rgba(16,21,27,.06), 0 1px 3px rgba(16,21,27,.10);
  --e2: 0 2px 6px rgba(16,21,27,.06), 0 8px 20px rgba(16,21,27,.12);
  --e3: 0 4px 10px rgba(16,21,27,.08), 0 18px 44px rgba(16,21,27,.20);
  --ring: 0 0 0 3px rgba(0,85,164,.28);          /* focus visible (clair) */
  --ring-sel: 0 0 0 3px rgba(224,0,122,.30);     /* focus suivi de bus */

  /* --- Typographie --- */
  --font: "Inter var", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fz-xs:   12px;
  --fz-sm:   13px;
  --fz-base: 15px;
  --fz-md:   17px;
  --fz-lg:   22px;
  --fz-xl:   28px;
  --lh-tight: 1.2;
  --lh-base:  1.45;

  /* --- Motion --- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 120ms;   /* micro (hover, press) */
  --dur-2: 200ms;   /* transitions de contrôle */
  --dur-3: 320ms;   /* entrée/sortie de surfaces */
}

/* Chiffres alignés verticalement partout où on affiche des heures / minutes :
   signal de qualité immédiat sur une app d'horaires. */
.tnum, .xp-eta-num, .dep-time, .ts-min,
.sched-time, .itin-opt-times, .itin-sum-dur { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}