/* Dropiris - Fichier : tokens.css - Role : tokens du systeme visuel, sensoriel et responsive - Auteur : Gilles J Capelluto - GJC */
/* Source : section 3 du brief (palette, typo, espacement), annexe I (sensoriel), annexe M (7 points de rupture). */
/* Tout est variable : aucun composant ne code une couleur, une duree ou un seuil en dur. */

:root {
    /* Palette COVALE / Dropiris */
    --ink-900:     #122238;  /* texte fort, fonds sombres */
    --primary-500: #5B66F2;  /* action principale et IA */
    --primary-600: #4A54D9;  /* survol de l'action principale */
    --primary-050: #EEF0FE;  /* fond doux teinte primaire */
    --mint-500:    #20B8A6;  /* connexion et validation */
    --mint-050:    #E6F7F5;  /* fond doux teinte mint */
    --canvas:      #F3F6FA;  /* fond de page applicatif */
    --surface:     #FFFFFF;  /* cartes et panneaux */
    --border:      #DCE4EC;  /* filets et separations */
    --warning-500: #E38A19;  /* relecture ou decision requise */
    --danger-500:  #E54D42;  /* pertes possibles et secrets exposes uniquement */
    --success-500: #12A66A;  /* confirmation, jamais racoleur */
    --muted:       #5C6B7E;  /* texte secondaire sur fond clair, contraste AA */
    --muted-dark:  #9FB0C4;  /* texte secondaire sur fond sombre */

    /* Typographie : piles systeme, graisses 600 a 800 pour la hierarchie, 400 a 500 en lecture */
    --font-ui:   system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Espacement : base 4 px */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
    --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

    /* Rayons : compacts 6 a 9, champs et cartes 10 a 14, zones d'accueil 18 a 24 */
    --r-compact: 8px;
    --r-card:    12px;
    --r-hero:    20px;
    --r-pill:    999px;

    /* Elevations : trois niveaux, le plus fort reserve aux couches flottantes (preview, modales) */
    --shadow-1: 0 1px 2px rgba(18, 34, 56, 0.06);
    --shadow-2: 0 4px 12px rgba(18, 34, 56, 0.08);
    --shadow-3: 0 16px 40px rgba(18, 34, 56, 0.18);

    /* Tokens sensoriels (annexe I) : durees et courbes, jamais codees en dur ailleurs */
    --motion-fast:  140ms;  /* controles */
    --motion-panel: 200ms;  /* panneaux */
    --motion-modal: 220ms;  /* modales, maximum absolu */
    --ease-entree:  cubic-bezier(0.2, 0.8, 0.3, 1);   /* ressort d'entree doux */
    --ease-sortie:  cubic-bezier(0.4, 0.0, 0.6, 1);   /* sortie douce */

    /* Points de rupture (annexe M) : reference documentaire, les media queries reprennent ces valeurs */
    --bp-xs: 360px;   /* mobile compact */
    --bp-sm: 480px;   /* grande mobile et phablette */
    --bp-md: 768px;   /* tablette portrait */
    --bp-lg: 1024px;  /* tablette paysage et petit portable */
    --bp-xl: 1280px;  /* bureau */
    --bp-2xl: 1536px; /* grand bureau */
    --bp-3xl: 1920px; /* tres grand ecran */
}

/* Reduction de mouvement : les translations et echelles sont neutralisees, les etats restent lisibles. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast: 1ms;
        --motion-panel: 1ms;
        --motion-modal: 1ms;
    }
    *, *::before, *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
    }
}