/* ================================================================
   TOKENS.CSS — Design Tokens centralisés Zoïs
   ================================================================
   Ce fichier définit les variables CSS MANQUANTES dans le design
   system existant. Les couleurs (--primary, --danger, etc.) sont
   déjà définies dans dashboard_gestionnaire.css et style.css.

   Ce fichier ajoute :
   - Spacing (espacement standardisé)
   - Typography (tailles et poids)
   - Radius (border-radius)
   - Shadows (utilitaires)
   - Z-index (échelle centralisée)
   - Transitions (durées standardisées)

   Charger AVANT les CSS spécifiques à chaque page.
   ================================================================ */

:root {

    /* ── Spacing ────────────────────────────────────────────────
       Utiliser ces variables au lieu de valeurs en dur.
       Ex: gap: var(--space-md);  padding: var(--space-lg);
       ─────────────────────────────────────────────────────── */
    --space-2xs:  2px;
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   12px;
    --space-lg:   16px;
    --space-xl:   20px;
    --space-2xl:  24px;
    --space-3xl:  32px;
    --space-4xl:  40px;
    --space-5xl:  48px;
    --space-6xl:  64px;

    /* ── Typography ─────────────────────────────────────────────
       Font family déjà chargée (Plus Jakarta Sans).
       ─────────────────────────────────────────────────────── */
    --font-family:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --text-xs:    0.75rem;    /* 12px */
    --text-sm:    0.8125rem;  /* 13px */
    --text-base:  0.875rem;   /* 14px */
    --text-md:    1rem;       /* 16px */
    --text-lg:    1.125rem;   /* 18px */
    --text-xl:    1.25rem;    /* 20px */
    --text-2xl:   1.5rem;     /* 24px */
    --text-3xl:   1.875rem;   /* 30px */
    --text-4xl:   2.25rem;    /* 36px */

    --font-regular:    400;
    --font-medium:     500;
    --font-semibold:   600;
    --font-bold:       700;
    --font-extrabold:  800;

    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* ── Border Radius ──────────────────────────────────────────
       Les variables --radius-lg et --radius-full existent déjà.
       On complète l'échelle.
       ─────────────────────────────────────────────────────── */
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius-md:    8px;
    --radius:       10px;
    /* --radius-lg: 24px;    — déjà dans style.css */
    --radius-xl:    16px;
    --radius-2xl:   20px;
    --radius-pill:  50px;
    /* --radius-full: 9999px; — déjà dans style.css */

    /* ── Z-index ────────────────────────────────────────────────
       Échelle centralisée pour éviter les conflits.
       Ex: z-index: var(--z-dropdown);
       ─────────────────────────────────────────────────────── */
    --z-base:         1;
    --z-dropdown:     100;
    --z-sticky:       200;
    --z-fixed:        300;
    --z-drawer:       400;
    --z-modal-backdrop: 450;
    --z-modal:        500;
    --z-popover:      600;
    --z-tooltip:      700;
    --z-toast:        800;
    --z-navbar:       1000;

    /* ── Transitions ────────────────────────────────────────────
       Durées et courbes standardisées.
       Ex: transition: all var(--transition-fast);
       ─────────────────────────────────────────────────────── */
    --transition-fast:    0.15s ease;
    --transition-base:    0.2s ease;
    --transition-slow:    0.35s ease;
    --transition-spring:  0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* ── Breakpoints (référence, non utilisable dans media queries) ──
       Standard breakpoints:
         @media (max-width: 480px)  — mobile small
         @media (max-width: 768px)  — mobile/tablet
         @media (max-width: 1024px) — tablet/laptop
         @media (max-width: 1280px) — desktop
         @media (max-width: 1536px) — large desktop
       ─────────────────────────────────────────────────────── */

    /* ── Container ──────────────────────────────────────────────
       --container-width: 1280px; — déjà dans style.css
       ─────────────────────────────────────────────────────── */
    --content-max-width: 1400px;
    --sidebar-width:     280px;
}