/* ==============================================
   DESIGN TOKENS
   Variables globales : couleurs, typographie,
   courbes d'animation, espacements.
=============================================== */

:root {
    /* Couleurs — Light (défaut) */
    --primary-blue:  #0066FF;
    --light-blue:    #4D94FF;
    --text-dark:     #111111;
    --text-muted:    #666666;
    --bg-color:      #FAFAFA;
    --border:        rgba(0, 0, 0, 0.08);

    /* Animations */
    --anim-speed:    0.24s;
    --ease-snap:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce:   cubic-bezier(0.18, 1.1, 0.2, 1.32);

    /* Composant tree-menu */
    --tree-connector-x:    15px;
    --tree-connector-drop: 10px;

    /* Transition douce lors du changement de mode */
    --color-transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Dark mode : préférence système ──────── */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-blue:  #4D94FF;
        --light-blue:    #80B3FF;
        --text-dark:     #F0F0F0;
        --text-muted:    #888888;
        --bg-color:      #0E0E0E;
        --border:        rgba(255, 255, 255, 0.08);
    }
}