/* * SIOP V2 — Design tokens (source de vérité visuelle) * Importé tel quel par apps/web ; les maquettes HD l'utilisent aussi. * Règle : AUCUNE valeur visuelle codée en dur hors de ce fichier. * Thèmes : clair par défaut, sombre via @media + surcharge [data-theme]. */ :root { /* ——— Marque ——— */ --primaire: #1f4fb8; /* bleu-treuil : actions, liens, focus */ --primaire-actif: #1a439c; --primaire-doux: #eaf0fb; /* fonds de sélection/hover primaires */ --safran: #dd8a0b; /* accent de marque — parcimonieux */ --safran-doux: #fdf3e3; /* ——— Neutres (acier, biais froid) ——— */ --fond: #f5f7fa; --surface: #ffffff; --surface-2: #eef2f7; /* en-têtes de table, zones repliées */ --bordure: #dce3ec; --bordure-forte: #b9c4d4; --encre: #1b2534; /* texte principal */ --encre-2: #55647a; /* texte secondaire */ --encre-3: #8494ab; /* placeholder, désactivé */ /* ——— Statuts OT (réservés) ——— */ --st-ouvert: #3d6fe0; --st-ouvert-fond: #e9effc; --st-encours: #6d5bd8; --st-encours-fond: #efecfa; --st-attente: #b96f07; --st-attente-fond: #fbf1df; --st-termine: #178a50; --st-termine-fond: #e6f5ec; --st-annule: #68788f; --st-annule-fond: #edf0f4; /* ——— Priorités (réservées) ——— */ --prio-bloque: #d92626; --prio-bloque-fond: #fdeaea; /* personne bloquée */ --prio-haute: #d92626; --prio-moyenne: #b96f07; --prio-basse: #178a50; --prio-aucune: #8494ab; /* ——— Sémantique générale ——— */ --succes: #178a50; --alerte: #b96f07; --danger: #d92626; --info: #3d6fe0; /* ——— Palette graphique (analytics, ordre FIXE, validée CVD) ——— */ --graf-1: #3b69d6; --graf-2: #dd8a0b; --graf-3: #1f9e8e; --graf-4: #8a63d2; --graf-grille: #e6ebf2; /* ——— Navigation (sidebar toujours sombre — identité) ——— */ --nav-fond: #16233b; --nav-encre: #c6d2e4; --nav-encre-vif: #ffffff; --nav-bordure: #24344f; /* ——— Typographie ——— */ --police-ui: "Manrope", "Avenir Next", "Segoe UI Variable", system-ui, sans-serif; --police-mono: "SF Mono", ui-monospace, "Cascadia Mono", monospace; --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-24: 24px; --t-32: 32px; /* ——— Forme & espace (grille 4 px) ——— */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --rayon: 10px; /* cartes */ --rayon-controle: 8px; /* inputs, boutons */ --rayon-pastille: 999px; --ombre-menu: 0 8px 24px rgb(16 30 54 / 0.14); --rail: 3px; /* motif signature : rail actif safran */ /* ——— Mouvement ——— */ --transition: 140ms ease-out; } /* ——— Thème sombre (« machinerie de nuit », pas une inversion) ——— */ @media (prefers-color-scheme: dark) { :root { --nav-fond: #0c1524; --nav-encre: #a7b4c8; --nav-encre-vif: #f2f6fc; --nav-bordure: #1e2c44; --primaire: #6e92e8; --primaire-actif: #8facf0; --primaire-doux: #1d2c4c; --safran: #e89a1f; --safran-doux: #33270f; --fond: #0f1622; --surface: #182234; --surface-2: #1e2a40; --bordure: #2b3850; --bordure-forte: #3d4d6b; --encre: #e8edf5; --encre-2: #a7b4c8; --encre-3: #6d7d96; --st-ouvert: #7da2ee; --st-ouvert-fond: #1c2a47; --st-encours: #a394ec; --st-encours-fond: #262040; --st-attente: #e0a33c; --st-attente-fond: #322510; --st-termine: #4bc084; --st-termine-fond: #12301f; --st-annule: #93a3ba; --st-annule-fond: #222d3f; --prio-bloque: #f26d6d; --prio-bloque-fond: #3a1414; --prio-haute: #f26d6d; --prio-moyenne: #e0a33c; --prio-basse: #4bc084; --prio-aucune: #6d7d96; --succes: #4bc084; --alerte: #e0a33c; --danger: #f26d6d; --info: #7da2ee; --graf-1: #5580e4; --graf-2: #c7820a; --graf-3: #26a896; --graf-4: #9673de; --graf-grille: #24304a; --ombre-menu: 0 8px 24px rgb(0 0 0 / 0.45); } } /* Le sélecteur de thème de l'app doit GAGNER dans les deux sens. */ :root[data-theme="light"] { --nav-fond: #16233b; --nav-encre: #c6d2e4; --nav-encre-vif: #ffffff; --nav-bordure: #24344f; --primaire: #1f4fb8; --primaire-actif: #1a439c; --primaire-doux: #eaf0fb; --safran: #dd8a0b; --safran-doux: #fdf3e3; --fond: #f5f7fa; --surface: #ffffff; --surface-2: #eef2f7; --bordure: #dce3ec; --bordure-forte: #b9c4d4; --encre: #1b2534; --encre-2: #55647a; --encre-3: #8494ab; --st-ouvert: #3d6fe0; --st-ouvert-fond: #e9effc; --st-encours: #6d5bd8; --st-encours-fond: #efecfa; --st-attente: #b96f07; --st-attente-fond: #fbf1df; --st-termine: #178a50; --st-termine-fond: #e6f5ec; --st-annule: #68788f; --st-annule-fond: #edf0f4; --prio-bloque: #d92626; --prio-bloque-fond: #fdeaea; --prio-haute: #d92626; --prio-moyenne: #b96f07; --prio-basse: #178a50; --prio-aucune: #8494ab; --succes: #178a50; --alerte: #b96f07; --danger: #d92626; --info: #3d6fe0; --graf-1: #3b69d6; --graf-2: #dd8a0b; --graf-3: #1f9e8e; --graf-4: #8a63d2; --graf-grille: #e6ebf2; --ombre-menu: 0 8px 24px rgb(16 30 54 / 0.14); } :root[data-theme="dark"] { --nav-fond: #0c1524; --nav-encre: #a7b4c8; --nav-encre-vif: #f2f6fc; --nav-bordure: #1e2c44; --primaire: #6e92e8; --primaire-actif: #8facf0; --primaire-doux: #1d2c4c; --safran: #e89a1f; --safran-doux: #33270f; --fond: #0f1622; --surface: #182234; --surface-2: #1e2a40; --bordure: #2b3850; --bordure-forte: #3d4d6b; --encre: #e8edf5; --encre-2: #a7b4c8; --encre-3: #6d7d96; --st-ouvert: #7da2ee; --st-ouvert-fond: #1c2a47; --st-encours: #a394ec; --st-encours-fond: #262040; --st-attente: #e0a33c; --st-attente-fond: #322510; --st-termine: #4bc084; --st-termine-fond: #12301f; --st-annule: #93a3ba; --st-annule-fond: #222d3f; --prio-bloque: #f26d6d; --prio-bloque-fond: #3a1414; --prio-haute: #f26d6d; --prio-moyenne: #e0a33c; --prio-basse: #4bc084; --prio-aucune: #6d7d96; --succes: #4bc084; --alerte: #e0a33c; --danger: #f26d6d; --info: #7da2ee; --graf-1: #5580e4; --graf-2: #c7820a; --graf-3: #26a896; --graf-4: #9673de; --graf-grille: #24304a; --ombre-menu: 0 8px 24px rgb(0 0 0 / 0.45); } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } }