/* * Tokens de design — Light & Dark mode * * Le thème est piloté par l'attribut [data-theme] sur , posé par le JS * (et résolu avant le premier paint dans le script inline de index.php). * Valeurs possibles : 'light' | 'dark'. * * Toutes les couleurs et les variables sémantiques sont définies ici. * Les autres CSS doivent toujours référencer ces variables, jamais de hexa hardcodé. */ /* ============================================================ LIGHT (par défaut) ============================================================ */ :root, [data-theme='light'] { /* Surfaces */ --bg: #FAF8FC; --surface: #FFFFFF; --surface-alt: #F3EEF9; --border: #E8DFF2; --border-strong: #D4C5E8; /* Texte */ --text: #1F1530; --text-muted: #6B5B82; --text-faint: #9B8DAF; /* Accent violet */ --accent: #7C3AED; --accent-hover: #6D28D9; --accent-soft: #EDE4FE; --accent-text: #5B21B6; /* Sémantiques */ --success: #16A34A; --success-soft: #DCFCE7; --warning: #D97706; --warning-soft: #FEF3C7; --danger: #DC2626; --danger-soft: #FEE2E2; /* Overlay (modales, voile) */ --overlay: rgba(31, 21, 48, 0.45); /* Shadows */ --shadow: 0 1px 2px rgba(31, 21, 48, 0.04), 0 2px 6px rgba(31, 21, 48, 0.05); --shadow-hover: 0 2px 4px rgba(31, 21, 48, 0.06), 0 4px 12px rgba(31, 21, 48, 0.08); --shadow-pop: 0 4px 8px rgba(31, 21, 48, 0.08), 0 8px 24px rgba(31, 21, 48, 0.12); } /* ============================================================ DARK ============================================================ */ [data-theme='dark'] { /* Surfaces */ --bg: #16121E; --surface: #1F1A2B; --surface-alt: #2A2238; --border: #332A45; --border-strong: #4A3D63; /* Texte */ --text: #F5F0FA; --text-muted: #B5A8C9; --text-faint: #7E6F94; /* Accent violet (plus clair en dark pour lisibilité) */ --accent: #A78BFA; --accent-hover: #C4B5FD; --accent-soft: #332A52; --accent-text: #DDD0FE; /* Sémantiques */ --success: #4ADE80; --success-soft: #14331F; --warning: #FBBF24; --warning-soft: #3B2A0E; --danger: #F87171; --danger-soft: #3B1818; /* Overlay */ --overlay: rgba(0, 0, 0, 0.65); /* Shadows — discrètes, simulent un léger relief en dark */ --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15); --shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2); --shadow-pop: 0 4px 8px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25); } /* ============================================================ Tokens indépendants du thème ============================================================ */ :root { /* Famille de typo */ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Espacement (multiples de 4px) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* Border radius */ --radius-sm: 6px; /* petits boutons de filtre */ --radius-md: 8px; /* boutons, inputs, badges, pastilles icônes */ --radius-lg: 10px; /* cards */ --radius-xl: 12px; /* modales, bottom sheets */ --radius-pill: 9999px; /* Bordures */ --border-width: 1px; --border-width-strong: 1.5px; /* Transitions */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; /* Z-index par couches */ --z-base: 1; --z-sticky: 10; --z-bottom-nav: 50; --z-popover: 100; --z-modal: 200; --z-toast: 300; /* Breakpoints (utilisés en JS via matchMedia) */ --bp-tablet: 768px; --bp-desktop: 1024px; }