/* ===================================================================== DESIGN TOKENS — light & dark Le thème actif est piloté par data-theme="light|dark" sur . ===================================================================== */ :root, [data-theme="light"] { --color-bg: #f5f7fb; --color-surface: #ffffff; --color-surface-2: #f0f3f8; --color-border: #e3e8f0; --color-border-soft: #eef1f6; --color-text: #0f172a; --color-text-muted: #64748b; --color-text-soft: #94a3b8; --color-primary: #6366f1; --color-primary-hover:#4f46e5; --color-primary-soft: rgba(99, 102, 241, 0.12); --color-success: #10b981; --color-success-soft: rgba(16, 185, 129, 0.14); --color-danger: #ef4444; --color-danger-soft: rgba(239, 68, 68, 0.14); --color-warning: #f59e0b; --color-warning-soft: rgba(245, 158, 11, 0.16); --color-info: #0ea5e9; --color-info-soft: rgba(14, 165, 233, 0.14); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10); --sidebar-bg: #0f172a; --sidebar-text: #cbd5e1; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(99, 102, 241, 0.18); --sidebar-hover-bg: rgba(255, 255, 255, 0.06); --sidebar-border: rgba(255, 255, 255, 0.08); --topbar-bg: var(--color-surface); --topbar-border: var(--color-border-soft); } [data-theme="dark"] { --color-bg: #0b1220; --color-surface: #111a2e; --color-surface-2: #182238; --color-border: #243049; --color-border-soft: #1c2840; --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-text-soft: #64748b; --color-primary: #818cf8; --color-primary-hover:#a5b4fc; --color-primary-soft: rgba(129, 140, 248, 0.18); --color-success: #34d399; --color-success-soft: rgba(52, 211, 153, 0.16); --color-danger: #f87171; --color-danger-soft: rgba(248, 113, 113, 0.18); --color-warning: #fbbf24; --color-warning-soft: rgba(251, 191, 36, 0.18); --color-info: #38bdf8; --color-info-soft: rgba(56, 189, 248, 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --sidebar-bg: #060b18; --sidebar-text: #94a3b8; --sidebar-text-active: #ffffff; --sidebar-active-bg: rgba(129, 140, 248, 0.20); --sidebar-hover-bg: rgba(255, 255, 255, 0.04); --sidebar-border: rgba(255, 255, 255, 0.06); --topbar-bg: var(--color-surface); --topbar-border: var(--color-border); } /* Espacements, rayons, typo fluide ------------------------------------ */ :root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; --sidebar-width: 248px; --sidebar-width-collapsed: 72px; --topbar-height: 60px; --fs-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.78rem); --fs-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem); --fs-base: clamp(0.9rem, 0.85rem + 0.3vw, 1rem); --fs-lg: clamp(1rem, 0.95rem + 0.35vw, 1.125rem); --fs-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.6rem); --fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); --font-body: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; --transition: 160ms cubic-bezier(.4, 0, .2, 1); }