/*
 * Saflow — jetons du design system (CDC §11.1 et §11.2, référence visuelle : prototype V8.3).
 *
 * Seule source des couleurs, rayons, hauteurs et typographie. Les composants (composants.css)
 * n'utilisent que ces variables : les palettes de M14 (Lot 4) n'auront qu'à surcharger ce bloc.
 * Règle PR-07 : aucune couleur ne porte seule une information ; les statuts ont aussi un libellé
 * et une forme (cercle, carré, triangle).
 */
:root {
    /* Couleurs de marque */
    --accent: #5a68cf;          /* indigo */
    --accent-2: #2d7f85;        /* turquoise */
    --accent-encre: #ffffff;
    --accent-doux: color-mix(in srgb, var(--accent) 10%, var(--surface));

    /* Surfaces et texte */
    --fond: #f5f7fb;
    --surface: #ffffff;
    --barre: #ffffff;
    --encre: #1c2a40;
    --encre-secondaire: #5f6985;  /* texte secondaire (§11.2) */
    --attenue: #6b7a90;
    --trait: #e9edf5;             /* bordures (§11.2) */
    --trait-champ: #e1e5f1;
    --neutre-fond: #eef1f6;
    --neutre-encre: #44526b;

    /* Couleurs de sens (toujours accompagnées d'un libellé et d'une forme) */
    --succes: #23795a;
    --succes-fond: #e8f5ef;
    --attention: #946012;
    --attention-fond: #fdf3df;
    --danger: #b3384c;
    --danger-fond: #fbecef;

    /* Teintes pastel des groupes de navigation (4) et liserés des cartes de statistiques */
    --pastel-1: #8e9be8;
    --pastel-2: #f2a58a;
    --pastel-3: #6cc3b5;
    --pastel-4: #b7a6e8;

    /* Formes */
    --rayon-carte: 18px;
    --rayon-controle: 13px;
    --rayon-petit: 10px;
    --ombre: 0 1px 2px rgba(23, 37, 60, .03), 0 14px 30px -22px rgba(23, 37, 60, .12);
    --ombre-flottante: 0 18px 40px -16px rgba(23, 37, 60, .28);

    /* Hauteurs de contrôle uniformes (§11.2) */
    --controle: 40px;
    --controle-petit: 32px;
    --onglet: 46px;

    /* Espacements (§11.2) */
    --marge-page: 42px;
    --espace-section: 28px;
    --grille: 20px;

    /* Typographie : police système, graisses 400 / 500 / 600 (jamais > 650) */
    --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --taille-corps: 13.5px;
    --interligne: 1.6;
    --graisse-corps: 400;
    --graisse-libelle: 500;
    --graisse-titre: 600;
    --graisse-h1: 620;
}

@media (max-width: 1380px) {
    :root { --marge-page: 28px; }
}

@media (max-width: 900px) {
    :root { --marge-page: 16px; }
}