/* ──────────────────────────────────────────────────────────────────────────
   speedp — les jetons de couleur, d'espacement, de forme et de mouvement.
   UN seul fichier pour le web (base.css l'importe) et pour l'application de
   terrain (mobile/index.html le charge) : les deux ne peuvent pas diverger.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Jetons semantiques ─────────────────────────────────────────────────
   speedp est clair partout (decision du 25/09/2026). Le violet est la marque
   et l'action ; vert, ambre et rouge restent des etats, jamais du decor. */
:root {
  color-scheme: light;

  --fond: var(--violet-2);              /* lavande tres pale : la page */
  --surface: #ffffff;                   /* cartes, tableaux, tiroirs */
  --surface-survol: var(--mauve-3);
  --surface-presse: var(--mauve-4);
  --trait: var(--mauve-6);
  --trait-fort: var(--mauve-7);
  --trait-focus: var(--violet-8);
  --texte: var(--mauve-12);
  --texte-2: var(--mauve-11);
  --texte-3: var(--mauve-9);

  /* La marque : l'action principale, l'element actif, le lien. */
  --marque: var(--violet-9);
  --marque-survol: var(--violet-10);
  --marque-texte: #ffffff;
  --marque-fond: var(--violet-3);
  --marque-fond-2: var(--violet-4);
  --marque-trait: var(--violet-6);
  --marque-fort: var(--violet-11);
  /* Le degrade, reserve aux moments de marque : logo, connexion, confirmation,
     affiche. Jamais dans un tableau. */
  --degrade: linear-gradient(135deg, var(--violet-9) 0%, var(--fuchsia-9) 100%);
  --degrade-doux: linear-gradient(135deg, var(--violet-3) 0%, var(--fuchsia-3) 100%);

  /* L'encre : infobulles et toasts, sombres pour se detacher de la page. */
  --encre: var(--mauve-12);
  --encre-survol: #37343f;
  --encre-texte: #ffffff;

  --selection: var(--violet-9);
  --selection-fond: var(--violet-3);
  --lien: var(--violet-11);

  --ok: var(--green-texte);        --ok-fond: var(--green-3);    --ok-trait: var(--green-6);
  --alerte: var(--amber-texte);    --alerte-fond: var(--amber-3); --alerte-trait: var(--amber-6);
  --grave: var(--red-11);       --grave-fond: var(--red-3);   --grave-trait: var(--red-6);
  --direct: var(--green-9);
  --plein-ok: var(--green-9);   --plein-alerte: var(--amber-9); --plein-grave: var(--red-9);

  /* Trame de 4 px : l'echelle, sans exception. */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px; --esp-5: 20px;
  --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; --esp-16: 64px;

  --rayon-1: 6px; --rayon-2: 8px; --rayon-3: 12px; --rayon-4: 16px; --rayon-rond: 999px;

  /* Ombres teintees de violet : plus douces qu'un gris froid. */
  --ombre-carte: 0 1px 2px rgb(46 16 101 / .04);
  --ombre-flottant: 0 1px 2px rgb(46 16 101 / .06), 0 8px 20px -6px rgb(46 16 101 / .16);
  --ombre-couche: 0 24px 64px -16px rgb(46 16 101 / .30), 0 2px 8px rgb(46 16 101 / .08);
  --ombre-marque: 0 6px 16px -6px rgb(124 58 237 / .55);

  --sortie: cubic-bezier(.2, .8, .2, 1);
  --d-1: 120ms; --d-2: 200ms; --d-3: 280ms;

  --ligne: 48px;                 /* densite confortable ; 40 en compacte */
  --police: "Inter", "Plex Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
}