/* ============================================================
   tokens.css — Design tokens · AHITCHE Recensement v2
   Direction : « Clair & minimal » — UNE couleur d'accent (vert)
   + une échelle de gris neutres. Aucune couleur décorative.
   ============================================================ */

:root {
  /* ---- Fonds & surfaces ----------------------------------- */
  --bg:         #fafaf9;   /* fond de l'application */
  --surface:    #ffffff;   /* cartes */
  --surface-2:  #f5f5f3;   /* surfaces secondaires (pistes, champs inactifs) */
  --surface-3:  #ededea;   /* surfaces creusées (rails de progression) */

  /* ---- Texte ---------------------------------------------- */
  --ink:        #18201b;   /* texte principal */
  --ink-soft:   #5b625b;   /* texte secondaire */
  --ink-mute:   #989c93;   /* texte tertiaire / légendes */

  /* ---- Lignes --------------------------------------------- */
  --line:        #e8e8e3;
  --line-strong: #d9d9d2;

  /* ---- Accent unique : vert ------------------------------- */
  --green:      #1c6b43;
  --green-700:  #14502f;   /* survol / pression */
  --green-tint: #eaf3ed;   /* aplat très clair (icônes, états actifs) */
  --green-ring: rgba(28, 107, 67, .22);

  /* ---- Sémantique — discrète, réservée aux badges --------- */
  --pos:   #1c6b43;  --pos-bg:   #eaf3ed;
  --warn:  #8a6712;  --warn-bg:  #f2ecdb;
  --neg:   #a23b2b;  --neg-bg:   #f4e5e2;
  --cool:  #355f7a;  --cool-bg:  #e7eef2;
  --mute:  #6b6f69;  --mute-bg:  #ededea;

  /* ---- Typographie — une seule famille ------------------- */
  --font: "Spline Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, sans-serif;

  --fs-xs:   0.74rem;
  --fs-sm:   0.825rem;
  --fs-base: 0.9rem;
  --fs-md:   1rem;
  --fs-lg:   1.2rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.6rem;

  /* ---- Espacements --------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;

  /* ---- Rayons -------------------------------------------- */
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-pill: 999px;

  /* ---- Ombres — neutres, discrètes ----------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 24, 20, .05);
  --shadow-sm: 0 2px 6px -1px rgba(20, 24, 20, .08);
  --shadow-md: 0 8px 20px -8px rgba(20, 24, 20, .16);
  --shadow-lg: 0 20px 44px -16px rgba(20, 24, 20, .26);

  /* ---- Divers -------------------------------------------- */
  --maxw: 1140px;
  --ring: 0 0 0 3px var(--green-ring);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --tr:   .18s var(--ease);
}