/* ============================================================================
   LogiFlotte — design tokens (couleurs, typographie, espacements, rayons).
   Point d'entrée unique des variables ; aucune règle ne doit redéfinir
   directement un hex ou un rem — tout passe par --token.

   Les couleurs dérivent du logo (voir base/marque.css) :

     · magenta  = la couleur de marque. C'est elle qui signe une action —
       bouton principal, entrée de menu active, élément sélectionné. Elle est
       rare par construction : un accent partout ne signale plus rien.
     · indigo   = la couleur de structure. Barre latérale, titres, surfaces
       d'appui, informations neutres.

   Les couleurs sémantiques restent distinctes de la marque : « c'est
   LogiFlotte » et « attention » ne doivent jamais se confondre. Le danger a
   d'ailleurs été décalé vers le rouge franc, pour ne pas être pris pour le
   magenta de marque à côté d'un bouton principal.
   ============================================================================ */

:root {
    /* -- Marque : magenta du pictogramme -- */
    --color-primary:         #a5195b;
    --color-primary-dark:    #7d1244;
    --color-primary-hover:   #c41f6d;
    --color-primary-light:   #fdf2f7;

    /* -- Structure : indigo du logotype -- */
    --color-secondary:       #2e2482;
    --color-secondary-dark:  #1d1655;
    --color-secondary-light: #f3f2fb;

    /* -- Statut -- */
    --color-success:         #16a34a;
    --color-success-light:   #dcfce7;
    --color-danger:          #e02424;
    --color-danger-light:    #fde8e8;
    --color-warning:         #d97706;
    --color-warning-light:   #fef3c7;
    --color-info:            #0891b2;
    --color-info-light:      #e0f2fe;

    /* -- Neutres, légèrement tirés vers l'indigo --
       Un gris parfaitement neutre à côté de ces deux teintes paraît sale ;
       un gris qui partage leur température paraît choisi. */
    --color-bg:              #f4f4f8;
    --color-surface:         #ffffff;
    --color-surface-alt:     #f7f7fb;
    --color-border:          #e6e4ef;
    --color-border-subtle:   #f1f0f7;
    --color-border-strong:   #cfccdf;
    --color-text:            #171529;
    --color-text-muted:      #55516e;

    /* -- Barre latérale : l'indigo profond du logotype -- */
    --sidebar-bg:            #14103c;
    --sidebar-bg-hover:      #221b5c;
    --sidebar-border:        #241d5e;
    /* Trois niveaux de gris, tous teintes indigo : un gris ardoise pur sur
       un fond #14103c parait terne, alors qu un gris qui partage sa
       temperature parait choisi. */
    --sidebar-text-faible:   #6f68a0;
    --sidebar-text:          #a9a4cc;
    --sidebar-text-fort:     #d8d5ea;
    --sidebar-text-active:   #ffffff;
    --sidebar-active-bg:     var(--color-primary);
    --sidebar-width:         240px;

    /* -- Layout -- */
    --topbar-height:         56px;
    --content-max-width:     1400px;
    --space-1:               0.25rem;
    --space-2:               0.5rem;
    --space-3:               0.75rem;
    --space-4:               1rem;
    --space-5:               1.25rem;
    --space-6:               1.5rem;
    --space-8:               2rem;

    /* -- Typographie --
       Aucune police distante : la politique de contenu bloque les CDN de
       fontes, et une pile système s'affiche sans la moindre attente. */
    --font-sans:             'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-display:          'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono:             ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
    --font-size-sm:          0.82rem;
    --font-size-base:        0.9rem;
    --font-size-md:          1rem;
    --font-size-lg:          1.15rem;
    --font-size-xl:          1.4rem;
    --font-size-2xl:         1.75rem;

    /* -- Rayons, ombres, transitions --
       Ombres teintées d'indigo plutôt que noires : une ombre noire sur un
       fond coloré fait une tache grise. */
    --radius-sm:             6px;
    --radius:                8px;
    --radius-md:             10px;
    --radius-lg:             12px;
    --radius-full:           999px;
    --shadow:                0 1px 3px rgb(23 21 41 / .08), 0 1px 2px rgb(23 21 41 / .05);
    --shadow-md:             0 4px 12px rgb(23 21 41 / .08), 0 2px 4px rgb(23 21 41 / .04);
    --shadow-lg:             0 12px 32px rgb(23 21 41 / .12), 0 4px 8px rgb(23 21 41 / .06);
    --transition:            0.2s ease;

    /* -- Noms courts ---------------------------------------------------------
       Les feuilles écrites plus tard emploient une forme abrégée : `--border`
       plutôt que `--color-border`. Ces noms n'existaient nulle part, et une
       variable inexistante n'est pas ignorée — elle ANNULE la déclaration qui
       la contient, qui retombe alors sur sa valeur initiale.

       Les dégâts étaient invisibles à la relecture du code et bien réels à
       l'écran : `border-color: var(--border)` repassait à `currentColor`, donc
       des filets à la couleur du texte au lieu d'un gris discret ;
       `background: var(--surface)` devenait transparent ; `color:
       var(--text-muted)` cessait d'atténuer quoi que ce soit ; et
       `border-radius: var(--radius-md)` valait zéro — d'où des blocs à angles
       droits au milieu de cartes arrondies.

       On définit donc les alias plutôt que de réécrire cent trente usages :
       le correctif est immédiat et sans risque de faute de frappe. Les deux
       formes restent équivalentes, la longue reste la référence. */
    --bg:         var(--color-bg);
    --surface:    var(--color-surface);
    --border:     var(--color-border);
    --text:       var(--color-text);
    --text-muted: var(--color-text-muted);

    /* -- Focus ring accessible -- */
    --focus-ring:            0 0 0 3px rgb(165 25 91 / .28);

    /* -- Cible tactile minimale --
       44 px est le seuil en dessous duquel un bouton devient pénible au
       doigt. Utilisé par les règles adaptatives plutôt que répété partout. */
    --touch-min:             44px;
}