/* public/assets/css/tokens.css
   ==========================================================================
   Corvus — SOURCE UNIQUE DES TOKENS DE DESIGN.
   --------------------------------------------------------------------------
   Anciennement `theme.css`. Renommé : le fichier ne contenait déjà que des
   tokens, son nom annonce maintenant son contenu. Deux <link> mis à jour
   (partials/head.php, public/manage.php) — aucune logique PHP touchée.

   Chargé en PREMIER : tokens -> components -> style|dash -> [page].

   CE QUI N'A PAS BOUGÉ : les 21 couleurs. La palette est l'ADN du projet,
   elle est reproduite au hex près. Deux valeurs seulement ont été AJOUTÉES,
   toutes deux dérivées de l'indigo existant, toutes deux pour corriger un
   échec de contraste mesuré (voir §1).
   ========================================================================== */

:root {

    /* =====================================================================
       1. COULEURS
       ===================================================================== */

    /* ---------- Fonds — inchangés ---------- */
    --bg: #0a0b0e;
    --bg-2: #0d0f13;
    --surface: #14161c;
    --surface-2: #1b1e26;
    --surface-3: #21242e;

    /* ---------- Traits — inchangés ---------- */
    --line: #242832;
    --line-soft: rgba(255, 255, 255, .06);

    /* ---------- Texte — inchangés ----------
       Contrastes mesurés sur --bg : text 17.88:1 (AAA), text-2 11.63:1 (AAA),
       muted 5.91:1 (AA). Rien à corriger. */
    --text: #f3f4f6;
    --text-2: #c3c7d1;
    --muted: #878d9a;

    /* ---------- Accent — inchangés ---------- */
    --accent: #5b5ef0;
    --accent-2: #8b8dff;
    --accent-3: #a5a7ff;
    --accent-ghost: rgba(91, 94, 240, .14);
    --accent-ghost-strong: rgba(91, 94, 240, .24);
    --accent-line: rgba(91, 94, 240, .38);
    --accent-line-weak: rgba(91, 94, 240, .3);

    /* ---------- AJOUT n°1 : --accent-hover ----------
       POURQUOI : `.btn.primary:hover` passait le fond en --accent-2 (#8b8dff).
       Texte blanc dessus = 2.86:1. Le bouton principal du site devenait
       ILLISIBLE au survol — l'échec d'accessibilité le plus grave du projet.

       --accent-2 est une couleur de TEXTE sur fond sombre (6.89:1), pas une
       couleur de fond. L'employer comme fond était une inversion de rôle.

       Le survol s'ASSOMBRIT donc au lieu de s'éclaircir. Même teinte (H 239),
       saturation et luminosité abaissées : #5457e4 -> blanc = 5.44:1 (AA).
       Le retour visuel reste net grâce au lift + à l'ombre indigo. */
    --accent-hover: #5457e4;

    /* ---------- AJOUT n°2 : --accent-press ----------
       Un cran plus bas encore, pour l'état :active. Blanc = 5.92:1. */
    --accent-press: #4e51dd;

    /* ---------- États — inchangés ---------- */
    --ok: #4fbf85;
    --ok-ghost: rgba(79, 191, 133, .14);
    --warn: #e0a44f;
    --warn-ghost: rgba(224, 164, 79, .14);
    --no: #e0565a;
    --no-ghost: rgba(224, 86, 90, .14);

    /* Rôles sémantiques — évitent d'écrire `#fff` en dur dans 6 composants. */
    --on-accent: #ffffff;
    --on-danger: #ffffff;

    /* =====================================================================
       2. TYPOGRAPHIE
       ===================================================================== */

    --f-display: 'Space Grotesk', system-ui, sans-serif;
    --f-body: 'Inter', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* ---------- Échelle de texte ----------
       POURQUOI le remplacement de --fs-1..--fs-10 : une échelle numérique
       n'a pas de sens à la lecture (« --fs-7 », c'est quoi ?), et elle avait
       produit 26 tailles littérales en dur, dont des demi-pixels (12.5px,
       13.5px, 11.5px, 9.5px). En rem : respecte le zoom navigateur et le
       réglage de taille système. */
    --fs-2xs: 0.75rem;      /* 12 — mentions légales, badges */
    --fs-xs: 0.8125rem;     /* 13 — méta, mono */
    --fs-sm: 0.875rem;      /* 14 — secondaire, nav, descriptions */
    --fs-base: 1rem;        /* 16 — corps de texte */
    --fs-md: 1.125rem;      /* 18 — corps appuyé */
    --fs-lg: 1.25rem;       /* 20 — accroche */

    /* ---------- Hiérarchie fluide — 3 NIVEAUX, pas un de plus ----------
       AVANT : 7 niveaux (wordmark 168 / cx-title 88 / h-xl 52 / h-lg 38 /
       h-md 25 / card-t 18 / h-sm 16). Entre h-md et card-t l'œil ne
       distinguait plus rien, et .h-sm faisait la taille du corps de texte.

       clamp() sans vw seul : `1.6rem + 3.25vw` garde le texte redimensionnable
       au zoom (un clamp en vw pur casse le zoom = échec WCAG 1.4.4). */
    --fs-h1: clamp(2.25rem, 1.6rem + 3.25vw, 3.5rem);       /* 36 -> 56 */
    --fs-h2: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);         /* 28 -> 40 */
    --fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);    /* 18 -> 20 */
    --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);     /* 17 -> 20 */

    /* Le seul rescapé de l'ancien haut de gamme : le wordmark de l'accueil.
       UNE occurrence, dans le héros. C'est la signature, elle est hors
       hiérarchie de lecture — d'où le nom `display` et pas `h0`. */
    --fs-display: clamp(3.5rem, 1.5rem + 10vw, 10.5rem);    /* 56 -> 168 */

    /* ---------- Interlignes ---------- */
    --lh-display: 0.94;
    --lh-heading: 1.15;
    --lh-snug: 1.45;
    --lh-body: 1.6;

    /* ---------- Approches ---------- */
    --tr-display: -0.03em;
    --tr-heading: -0.02em;
    --tr-wide: 0.12em;      /* .h-sm, en-têtes de tableau */
    --tr-eyebrow: 0.2em;    /* eyebrow */

    /* ---------- Longueur de ligne ----------
       Consigne : 60–75ch. `ch` suit la police ET la taille : une seule valeur
       reste juste à toutes les tailles d'écran. */
    --measure: 68ch;
    --measure-narrow: 60ch;

    /* =====================================================================
       3. ESPACEMENT — échelle 4/8px stricte
       =====================================================================
       POURQUOI la refonte de --s-1..--s-10 : l'ancienne échelle était bonne
       (toutes ses valeurs étaient sur la grille de 4) mais elle n'était pas
       APPLIQUÉE — --s-1 et --s-10 avaient 1 usage chacun, pendant que le CSS
       écrivait 28px, 44px, 26px, 22px, 30px, 36px, 18px, 14px en dur.

       Nouvelle échelle : 20 et 56 retirés (ils cassaient le rythme de 8),
       48/64 ajoutés (le trou 56 -> 96 forçait à improviser). */
    --space-1: 0.25rem;     /*  4 */
    --space-2: 0.5rem;      /*  8 */
    --space-3: 0.75rem;     /* 12 */
    --space-4: 1rem;        /* 16 */
    --space-5: 1.5rem;      /* 24 */
    --space-6: 2rem;        /* 32 */
    --space-7: 2.5rem;      /* 40 */
    --space-8: 3rem;        /* 48 */
    --space-9: 4rem;        /* 64 */
    --space-10: 6rem;       /* 96 */

    /* =====================================================================
       4. GABARIT
       ===================================================================== */

    /* 1080 -> 1140. POURQUOI : à 1080px, une grille de 4 cartes laissait
       ~198px de texte utile par carte, soit ~28 caractères par ligne. La
       grille passe à 3 colonnes (voir style.css) ; +60px de large amènent la
       mesure autour de 48ch. Toujours sous les 60ch visés, mais un titre de
       carte n'est pas un paragraphe : la consigne 60–75ch vaut pour le texte
       long, qui vit dans .wrap-narrow (--measure). */
    --maxw: 1140px;
    --maxw-narrow: 720px;
    --sidew: 290px;         /* sidebar dashboard — inchangé */

    /* Gouttière fluide : remplace le `padding:0 28px` figé (hors grille, et
       trop large à 360px où il mangeait 56px des 360 disponibles). */
    --gutter: clamp(1rem, 4vw, 1.5rem);         /* 16 -> 24 */

    /* Rythme vertical des sections. Remplace `padding:96px 0` + le
       `padding:68px 0` du media query 680px : une seule règle fluide au lieu
       de deux valeurs et d'un point de rupture. */
    --section-y: clamp(4rem, 9vw, 6rem);        /* 64 -> 96 */

    /* =====================================================================
       5. RAYONS
       ===================================================================== */
    /* AJOUT : --r-ctl. 19 valeurs littérales traînaient (8px x15, 9px x6,
       7px x6, 5px, 4px, 2px, 12px, 18px...) pour une seule et même intention :
       « le rayon d'un contrôle » (bouton, champ, chip, item de menu). Les
       quatre autres rayons sont ceux d'avant, au pixel près — dash.css les
       consomme, ils ne bougent pas. */
    --r-xs: 6px;
    --r-ctl: 8px;
    --r-sm: 11px;
    --r: 16px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* =====================================================================
       6. OMBRES / SÉPARATEURS — inchangés
       ===================================================================== */
    --divider: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
    --shadow-card: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 20px 40px -28px rgba(0, 0, 0, .55);
    --shadow-lift: 0 24px 48px -20px rgba(91, 94, 240, .28);
    --shadow-menu: 0 24px 48px -16px rgba(0, 0, 0, .7);
    --shadow-toast: 0 20px 40px -12px rgba(0, 0, 0, .7);
    --shadow-btn: 0 12px 28px -14px rgba(91, 94, 240, .65);
    --shadow-btn-danger: 0 12px 28px -14px rgba(224, 86, 90, .65);
    --ring: 0 0 0 3px var(--accent-ghost);

    /* =====================================================================
       7. MOUVEMENT
       =====================================================================
       L'ancien theme.css refusait explicitement de tokeniser les durées :
       « un token qu'aucune des deux feuilles ne peut adopter serait mort à la
       naissance ». L'arbitrage se défendait — il a mal vieilli : 40 durées
       distinctes cohabitent, dont .16s (x41), .18s (x27) et .2s (x30) qui
       font rigoureusement la même chose.

       Trois durées. La vitrine y converge intégralement. dash.css garde ses
       littérales (fichier figé) : l'écart est < 40ms, invisible, et il se
       résorbera quand le dashboard passera à son tour. */
    --t-fast: 150ms;        /* survol, couleur, teinte — retour immédiat */
    --t: 200ms;             /* défaut : la plupart des changements d'état */
    --t-slow: 250ms;        /* déplacement d'un élément : menu, modale, reveal */

    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* Cascade des listes révélées au scroll. 40ms x 4 cartes = 160ms de
       décalage cumulé : perceptible comme un enchaînement, jamais comme une
       attente. L'ancien 70ms x 4 = 280ms + 700ms de transition = ~1s avant
       que la dernière carte soit lisible. */
    --stagger: 40ms;

    /* =====================================================================
       8. EMPILEMENT — inchangé
       ===================================================================== */
    --z-sticky: 20;
    --z-menu: 30;
    --z-nav: 50;
    --z-scrim: 55;
    --z-drawer: 60;
    --z-tooltip: 80;
    --z-toast: 90;
    --z-modal: 100;
}

/* ==========================================================================
   PRÉFÉRENCE DE MOUVEMENT RÉDUITE — au niveau des tokens
   --------------------------------------------------------------------------
   POURQUOI ici : neutraliser les durées à la source couvre TOUTE transition
   qui consomme --t-*, y compris celles qui n'existent pas encore. Chaque
   feuille garde par ailleurs sa règle spécifique pour les `animation:` (une
   durée nulle ne suffit pas à annuler une keyframe en boucle).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --t-fast: 0ms;
        --t: 0ms;
        --t-slow: 0ms;
        --stagger: 0ms;
    }
}