/* ============================================================= SG Créations — tokens.css (fichier de marque PARTAGÉ) Palette claire + sombre pour toutes les applis de la suite. Chaque appli peut redéfinir SES accents (--rose, --rose-dk…) après l'import, tout en gardant la même ossature. À charger AVANT le style.css de l'appli. ============================================================= */ :root { /* --- Thème CLAIR (défaut) --- */ --bg: #FBF7F4; --panel: #FFFFFF; --ink: #2C1810; --ink-soft: #6B5249; --ink-mute: #8A7264; /* assombri pour la lisibilité (ex-#9C8478) */ --line: #ECE2DB; --line-soft: #F3EAE4; /* Accents (l'agenda est rosé ; une autre appli peut les surcharger) */ --rose: #C4736A; --rose-dk: #B5635A; --rose-lt: #E8BEB4; --brown: #8A6450; --sidebar: #2C1810; /* Surfaces dérivées (utilisées à la place des couleurs en dur) */ --input-bg: #FCFAF8; --hover-bg: #FCF8F5; --cell-dim: #FAF6F2; /* États */ --danger: #B5483F; --danger-bg: rgba(181, 72, 63, .06); --accent-soft: rgba(196, 115, 106, .08); --accent-line: rgba(196, 115, 106, .25); --focus-ring: rgba(196, 115, 106, .14); /* Membres / catégories */ --c1:#C4736A; --c2:#5B8A72; --c3:#6A7FB5; --c4:#C9A24B; --c5:#A66BB0; --c6:#4FA3A8; --c7:#D98A5B; --c8:#7E8B96; } /* --- Thème SOMBRE (activé par theme.js via ) --- */ [data-theme="dark"] { --bg: #17100B; --panel: #221711; --ink: #F5EDE7; --ink-soft: #CDB9AD; --ink-mute: #A38D7F; --line: #3B2C21; --line-soft: #2C2016; --rose: #D3847B; --rose-dk: #C9756B; --rose-lt: #E8BEB4; --brown: #A97F66; --sidebar: #100A06; --input-bg: #2A1D14; --hover-bg: #2A1E15; --cell-dim: #1D140E; --danger: #E06B60; --danger-bg: rgba(224, 107, 96, .12); --accent-soft: rgba(211, 132, 123, .12); --accent-line: rgba(211, 132, 123, .32); --focus-ring: rgba(211, 132, 123, .22); } /* Le navigateur adapte ses composants natifs (scrollbars, calendriers…) */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* ============================================================= ACCENT SPÉCIFIQUE APPLI — NE PAS ÉCRASER LORS DES SYNC Suivi des compétences garde le violet comme couleur de marque. Même socle que la suite (fonds, textes, bordures ci-dessus), seul l'accent change — décliné en light ET dark, contrastes AA. ============================================================= */ :root { --rose: #7c3aed; --rose-dk: #5b21b6; --rose-lt: #C4A6F7; --brown: #5729A6; --sidebar: #190C2F; --accent-soft: rgba(124,58,237,.08); --accent-line: rgba(124,58,237,.25); --focus-ring: rgba(124,58,237,.12); /* Niveaux de maîtrise — tokens dédiés (distincts de --danger) */ --level-acquis: #065f46; --level-acquis-bg: #d1fae5; --level-encours: #92400e; --level-encours-bg: #fef3c7; --level-nonacquis: #991b1b; --level-nonacquis-bg: #fee2e2; } [data-theme="dark"] { --rose: #9b6dff; --rose-dk: #c4b5fd; --rose-lt: #C4A6F7; --brown: #6931C9; --sidebar: #0A0513; --accent-soft: rgba(155,109,255,.12); --accent-line: rgba(155,109,255,.32); --focus-ring: rgba(155,109,255,.2); --level-acquis: #34d399; --level-acquis-bg: rgba(52,211,153,.16); --level-encours: #fbbf24; --level-encours-bg: rgba(251,191,36,.16); --level-nonacquis: #f87171; --level-nonacquis-bg: rgba(248,113,113,.16); }