/** * OptiBFR — Design System v2 * 50 palettes (30 existantes + 20 nouvelles), chaque palette en clair + sombre * Usage : ou */ /* ===================================================== VARIABLES COMMUNES (ne dépendent pas du thème) ===================================================== */ :root { --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-numbers: 'Plus Jakarta Sans', system-ui, sans-serif; --topbar-h: 60px; --sidebar-w: 240px; --radius: 10px; --radius-lg: 16px; --radius-xl: 24px; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04); --shadow-lg: 0 4px 6px rgba(0,0,0,.05), 0 10px 40px rgba(0,0,0,.08); --shadow-xl: 0 20px 60px rgba(0,0,0,.12); /* Semantic colors (unchanged across themes) */ --success: #16a34a; --success-hover: #15803d; --warning: #d97706; --danger: #dc2626; --danger-hover: #b91c1c; --info: #0284c7; } /* ===================================================== MIXIN LIGHT (base commune thème clair) Tous les [data-theme] en héritent, chaque palette n'écrase que --primary, --primary-hover, etc. ===================================================== */ [data-theme] { color-scheme: light; /* Backgrounds */ --bg-page: #f6f7f9; --bg-card: #ffffff; --topbar-bg: #ffffff; --sidebar-bg: #ffffff; --surface-2: #f1f3f6; /* Text */ --text: #0f172a; --text-muted: #64748b; --text-2: #64748b; --text-3: #94a3b8; /* Borders */ --border: #e2e8f0; --border-2: #cbd5e1; /* Tables */ --tbl-line: #f1f5f9; --tbl-hover: #f8fafc; --tbl-text: #1e293b; --tbl-td: #334155; --tbl-grad2: #ffffff; /* Aliases compatibilité ancien code */ --rx-blue: var(--primary); --rx-blue-lite: var(--primary-light); --rx-very-lite: var(--primary-lighter); --rx-mauve: var(--accent); --rx-danger: var(--danger); --rx-late: var(--warning); --rx-track: var(--border); --rx-line: var(--border); --rx-neutral: var(--border); --rx-mauve-lite: var(--primary-light); --rx-late-lite: #fcd34d; --violet: var(--primary); --violet-dark: var(--primary-hover); --violet-light: var(--primary-light); --blue: var(--primary); --blue1: var(--primary-light); --veryLite: var(--primary-lighter); --ovd: var(--accent); --purple: var(--accent); --coral: var(--danger); --green: var(--success); --upc: var(--primary); --upc-lite: var(--primary-light); --ink: var(--text); --muted: var(--text-muted); --card: var(--bg-card); --line: var(--border); --sidebar-ico: var(--primary-light); --green-bg: #dcfce7; --orange-bg: #fef3c7; --red-bg: #fee2e2; --blue-bg: #dbeafe; } /* ===================================================== MIXIN DARK (base commune thème sombre) ===================================================== */ [data-theme$="-dark"] { color-scheme: dark; --bg-page: #0d1117; --bg-card: #161b22; --topbar-bg: #161b22; --sidebar-bg: #13181f; --surface-2: #1c2333; --text: #e2e8f0; --text-muted: #8b9ab0; --text-2: #8b9ab0; --text-3: #4f5f72; --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.14); --tbl-line: rgba(255,255,255,0.05); --tbl-hover: rgba(255,255,255,0.04); --tbl-text: #cbd5e1; --tbl-td: #94a3b8; --tbl-grad2: var(--bg-card); } /* ===================================================== LES 50 PALETTES Format : [data-theme="NAME"] = clair [data-theme="NAME-dark"] = sombre ===================================================== */ /* ── 01. Indigo (défaut) ── */ :root, [data-theme="indigo"] { --primary: #4f46e5; --primary-hover: #4338ca; --primary-light: #a5b4fc; --primary-lighter:#e0e7ff; --secondary: #6366f1; --accent: #818cf8; --accent-hover: #6366f1; --tbl-primary: #4f46e5; --tbl-grad1: #eef2ff; } [data-theme="indigo-dark"] { --primary: #818cf8; --primary-hover: #a5b4fc; --primary-light: #4338ca; --primary-lighter:rgba(79,70,229,0.15); --secondary: #6366f1; --accent: #a5b4fc; --accent-hover: #818cf8; --tbl-primary: #818cf8; --tbl-grad1: rgba(79,70,229,0.12); } /* ── 02. Ocean ── */ [data-theme="ocean"] { --primary: #0ea5e9; --primary-hover: #0284c7; --primary-light: #7dd3fc; --primary-lighter:#e0f2fe; --secondary: #06b6d4; --accent: #22d3ee; --accent-hover: #0ea5e9; --tbl-primary: #0ea5e9; --tbl-grad1: #e0f2fe; } [data-theme="ocean-dark"] { --primary: #38bdf8; --primary-hover: #7dd3fc; --primary-light: #0284c7; --primary-lighter:rgba(14,165,233,0.15); --secondary: #22d3ee; --accent: #7dd3fc; --accent-hover: #38bdf8; --tbl-primary: #38bdf8; --tbl-grad1: rgba(14,165,233,0.12); } /* ── 03. Emerald ── */ [data-theme="emerald"] { --primary: #10b981; --primary-hover: #059669; --primary-light: #6ee7b7; --primary-lighter:#d1fae5; --secondary: #14b8a6; --accent: #34d399; --accent-hover: #10b981; --tbl-primary: #10b981; --tbl-grad1: #d1fae5; } [data-theme="emerald-dark"] { --primary: #34d399; --primary-hover: #6ee7b7; --primary-light: #059669; --primary-lighter:rgba(16,185,129,0.15); --secondary: #2dd4bf; --accent: #6ee7b7; --accent-hover: #34d399; --tbl-primary: #34d399; --tbl-grad1: rgba(16,185,129,0.12); } /* ── 04. Rose ── */ [data-theme="rose"] { --primary: #e11d48; --primary-hover: #be123c; --primary-light: #fda4af; --primary-lighter:#ffe4e6; --secondary: #f43f5e; --accent: #fb7185; --accent-hover: #e11d48; --tbl-primary: #e11d48; --tbl-grad1: #ffe4e6; } [data-theme="rose-dark"] { --primary: #fb7185; --primary-hover: #fda4af; --primary-light: #be123c; --primary-lighter:rgba(225,29,72,0.15); --secondary: #f43f5e; --accent: #fda4af; --accent-hover: #fb7185; --tbl-primary: #fb7185; --tbl-grad1: rgba(225,29,72,0.12); } /* ── 05. Violet ── */ [data-theme="violet"] { --primary: #7c3aed; --primary-hover: #6d28d9; --primary-light: #c4b5fd; --primary-lighter:#ede9fe; --secondary: #8b5cf6; --accent: #a78bfa; --accent-hover: #7c3aed; --tbl-primary: #7c3aed; --tbl-grad1: #ede9fe; } [data-theme="violet-dark"] { --primary: #a78bfa; --primary-hover: #c4b5fd; --primary-light: #6d28d9; --primary-lighter:rgba(124,58,237,0.15); --secondary: #8b5cf6; --accent: #c4b5fd; --accent-hover: #a78bfa; --tbl-primary: #a78bfa; --tbl-grad1: rgba(124,58,237,0.12); } /* ── 06. Amber ── */ [data-theme="amber"] { --primary: #d97706; --primary-hover: #b45309; --primary-light: #fcd34d; --primary-lighter:#fef3c7; --secondary: #f59e0b; --accent: #fbbf24; --accent-hover: #d97706; --tbl-primary: #d97706; --tbl-grad1: #fef3c7; } [data-theme="amber-dark"] { --primary: #fbbf24; --primary-hover: #fcd34d; --primary-light: #b45309; --primary-lighter:rgba(217,119,6,0.15); --secondary: #f59e0b; --accent: #fcd34d; --accent-hover: #fbbf24; --tbl-primary: #fbbf24; --tbl-grad1: rgba(217,119,6,0.12); } /* ── 07. Cyan ── */ [data-theme="cyan"] { --primary: #0891b2; --primary-hover: #0e7490; --primary-light: #67e8f9; --primary-lighter:#cffafe; --secondary: #06b6d4; --accent: #22d3ee; --accent-hover: #0891b2; --tbl-primary: #0891b2; --tbl-grad1: #cffafe; } [data-theme="cyan-dark"] { --primary: #22d3ee; --primary-hover: #67e8f9; --primary-light: #0e7490; --primary-lighter:rgba(8,145,178,0.15); --secondary: #06b6d4; --accent: #67e8f9; --accent-hover: #22d3ee; --tbl-primary: #22d3ee; --tbl-grad1: rgba(8,145,178,0.12); } /* ── 08. Fuchsia ── */ [data-theme="fuchsia"] { --primary: #c026d3; --primary-hover: #a21caf; --primary-light: #f0abfc; --primary-lighter:#fae8ff; --secondary: #d946ef; --accent: #e879f9; --accent-hover: #c026d3; --tbl-primary: #c026d3; --tbl-grad1: #fae8ff; } [data-theme="fuchsia-dark"] { --primary: #e879f9; --primary-hover: #f0abfc; --primary-light: #a21caf; --primary-lighter:rgba(192,38,211,0.15); --secondary: #d946ef; --accent: #f0abfc; --accent-hover: #e879f9; --tbl-primary: #e879f9; --tbl-grad1: rgba(192,38,211,0.12); } /* ── 09. Lime ── */ [data-theme="lime"] { --primary: #65a30d; --primary-hover: #4d7c0f; --primary-light: #bef264; --primary-lighter:#ecfccb; --secondary: #84cc16; --accent: #a3e635; --accent-hover: #65a30d; --tbl-primary: #65a30d; --tbl-grad1: #ecfccb; } [data-theme="lime-dark"] { --primary: #a3e635; --primary-hover: #bef264; --primary-light: #4d7c0f; --primary-lighter:rgba(101,163,13,0.15); --secondary: #84cc16; --accent: #bef264; --accent-hover: #a3e635; --tbl-primary: #a3e635; --tbl-grad1: rgba(101,163,13,0.12); } /* ── 10. Sky ── */ [data-theme="sky"] { --primary: #0284c7; --primary-hover: #0369a1; --primary-light: #7dd3fc; --primary-lighter:#e0f2fe; --secondary: #0ea5e9; --accent: #38bdf8; --accent-hover: #0284c7; --tbl-primary: #0284c7; --tbl-grad1: #e0f2fe; } [data-theme="sky-dark"] { --primary: #38bdf8; --primary-hover: #7dd3fc; --primary-light: #0369a1; --primary-lighter:rgba(2,132,199,0.15); --secondary: #0ea5e9; --accent: #7dd3fc; --accent-hover: #38bdf8; --tbl-primary: #38bdf8; --tbl-grad1: rgba(2,132,199,0.12); } /* ── 11. Teal ── */ [data-theme="teal"] { --primary: #0d9488; --primary-hover: #0f766e; --primary-light: #5eead4; --primary-lighter:#ccfbf1; --secondary: #14b8a6; --accent: #2dd4bf; --accent-hover: #0d9488; --tbl-primary: #0d9488; --tbl-grad1: #ccfbf1; } [data-theme="teal-dark"] { --primary: #2dd4bf; --primary-hover: #5eead4; --primary-light: #0f766e; --primary-lighter:rgba(13,148,136,0.15); --secondary: #14b8a6; --accent: #5eead4; --accent-hover: #2dd4bf; --tbl-primary: #2dd4bf; --tbl-grad1: rgba(13,148,136,0.12); } /* ── 12. Orange ── */ [data-theme="orange"] { --primary: #ea580c; --primary-hover: #c2410c; --primary-light: #fdba74; --primary-lighter:#ffedd5; --secondary: #f97316; --accent: #fb923c; --accent-hover: #ea580c; --tbl-primary: #ea580c; --tbl-grad1: #ffedd5; } [data-theme="orange-dark"] { --primary: #fb923c; --primary-hover: #fdba74; --primary-light: #c2410c; --primary-lighter:rgba(234,88,12,0.15); --secondary: #f97316; --accent: #fdba74; --accent-hover: #fb923c; --tbl-primary: #fb923c; --tbl-grad1: rgba(234,88,12,0.12); } /* ── 13. Pink ── */ [data-theme="pink"] { --primary: #db2777; --primary-hover: #be185d; --primary-light: #f9a8d4; --primary-lighter:#fce7f3; --secondary: #ec4899; --accent: #f472b6; --accent-hover: #db2777; --tbl-primary: #db2777; --tbl-grad1: #fce7f3; } [data-theme="pink-dark"] { --primary: #f472b6; --primary-hover: #f9a8d4; --primary-light: #be185d; --primary-lighter:rgba(219,39,119,0.15); --secondary: #ec4899; --accent: #f9a8d4; --accent-hover: #f472b6; --tbl-primary: #f472b6; --tbl-grad1: rgba(219,39,119,0.12); } /* ── 14. Slate ── */ [data-theme="slate"] { --primary: #475569; --primary-hover: #334155; --primary-light: #94a3b8; --primary-lighter:#f1f5f9; --secondary: #64748b; --accent: #64748b; --accent-hover: #475569; --tbl-primary: #475569; --tbl-grad1: #f1f5f9; } [data-theme="slate-dark"] { --primary: #94a3b8; --primary-hover: #cbd5e1; --primary-light: #334155; --primary-lighter:rgba(71,85,105,0.2); --secondary: #64748b; --accent: #cbd5e1; --accent-hover: #94a3b8; --tbl-primary: #94a3b8; --tbl-grad1: rgba(71,85,105,0.15); } /* ── 15. Stone ── */ [data-theme="stone"] { --primary: #78716c; --primary-hover: #57534e; --primary-light: #a8a29e; --primary-lighter:#f5f5f4; --secondary: #a8a29e; --accent: #78716c; --accent-hover: #57534e; --tbl-primary: #78716c; --tbl-grad1: #f5f5f4; } [data-theme="stone-dark"] { --primary: #a8a29e; --primary-hover: #d6d3d1; --primary-light: #57534e; --primary-lighter:rgba(120,113,108,0.15); --secondary: #a8a29e; --accent: #d6d3d1; --accent-hover: #a8a29e; --tbl-primary: #a8a29e; --tbl-grad1: rgba(120,113,108,0.12); } /* ── 16. Navy ── */ [data-theme="navy"] { --primary: #1e3a8a; --primary-hover: #1e40af; --primary-light: #93c5fd; --primary-lighter:#dbeafe; --secondary: #2563eb; --accent: #3b82f6; --accent-hover: #1d4ed8; --tbl-primary: #1e3a8a; --tbl-grad1: #dbeafe; } [data-theme="navy-dark"] { --primary: #60a5fa; --primary-hover: #93c5fd; --primary-light: #1e40af; --primary-lighter:rgba(30,58,138,0.2); --secondary: #3b82f6; --accent: #93c5fd; --accent-hover: #60a5fa; --tbl-primary: #60a5fa; --tbl-grad1: rgba(30,58,138,0.15); } /* ── 17. Forest ── */ [data-theme="forest"] { --primary: #166534; --primary-hover: #15803d; --primary-light: #86efac; --primary-lighter:#dcfce7; --secondary: #22c55e; --accent: #4ade80; --accent-hover: #16a34a; --tbl-primary: #166534; --tbl-grad1: #dcfce7; } [data-theme="forest-dark"] { --primary: #4ade80; --primary-hover: #86efac; --primary-light: #15803d; --primary-lighter:rgba(22,101,52,0.15); --secondary: #22c55e; --accent: #86efac; --accent-hover: #4ade80; --tbl-primary: #4ade80; --tbl-grad1: rgba(22,101,52,0.12); } /* ── 18. Wine ── */ [data-theme="wine"] { --primary: #9f1239; --primary-hover: #881337; --primary-light: #fda4af; --primary-lighter:#ffe4e6; --secondary: #be123c; --accent: #e11d48; --accent-hover: #9f1239; --tbl-primary: #9f1239; --tbl-grad1: #ffe4e6; } [data-theme="wine-dark"] { --primary: #fb7185; --primary-hover: #fda4af; --primary-light: #881337; --primary-lighter:rgba(159,18,57,0.15); --secondary: #be123c; --accent: #fda4af; --accent-hover: #fb7185; --tbl-primary: #fb7185; --tbl-grad1: rgba(159,18,57,0.12); } /* ── 19. Midnight ── */ [data-theme="midnight"] { --primary: #312e81; --primary-hover: #3730a3; --primary-light: #a5b4fc; --primary-lighter:#e0e7ff; --secondary: #4f46e5; --accent: #6366f1; --accent-hover: #4338ca; --tbl-primary: #312e81; --tbl-grad1: #e0e7ff; } [data-theme="midnight-dark"] { --primary: #818cf8; --primary-hover: #a5b4fc; --primary-light: #3730a3; --primary-lighter:rgba(49,46,129,0.2); --secondary: #4f46e5; --accent: #a5b4fc; --accent-hover: #818cf8; --tbl-primary: #818cf8; --tbl-grad1: rgba(49,46,129,0.15); } /* ── 20. Coral ── */ [data-theme="coral"] { --primary: #e11d48; --primary-hover: #be123c; --primary-light: #fda4af; --primary-lighter:#ffe4e6; --secondary: #f43f5e; --accent: #fb7185; --accent-hover: #e11d48; --tbl-primary: #e11d48; --tbl-grad1: #ffe4e6; } [data-theme="coral-dark"] { --primary: #fb7185; --primary-hover: #fda4af; --primary-light: #be123c; --primary-lighter:rgba(225,29,72,0.15); --secondary: #f43f5e; --accent: #fda4af; --accent-hover: #fb7185; --tbl-primary: #fb7185; --tbl-grad1: rgba(225,29,72,0.12); } /* ── 21. Mint ── */ [data-theme="mint"] { --primary: #0d9488; --primary-hover: #0f766e; --primary-light: #99f6e4; --primary-lighter:#ccfbf1; --secondary: #2dd4bf; --accent: #5eead4; --accent-hover: #14b8a6; --tbl-primary: #0d9488; --tbl-grad1: #ccfbf1; } [data-theme="mint-dark"] { --primary: #5eead4; --primary-hover: #99f6e4; --primary-light: #0f766e; --primary-lighter:rgba(13,148,136,0.15); --secondary: #2dd4bf; --accent: #99f6e4; --accent-hover: #5eead4; --tbl-primary: #5eead4; --tbl-grad1: rgba(13,148,136,0.12); } /* ── 22. Sunset ── */ [data-theme="sunset"] { --primary: #c2410c; --primary-hover: #9a3412; --primary-light: #fdba74; --primary-lighter:#ffedd5; --secondary: #ea580c; --accent: #f97316; --accent-hover: #c2410c; --tbl-primary: #c2410c; --tbl-grad1: #ffedd5; } [data-theme="sunset-dark"] { --primary: #fb923c; --primary-hover: #fdba74; --primary-light: #9a3412; --primary-lighter:rgba(194,65,12,0.15); --secondary: #ea580c; --accent: #fdba74; --accent-hover: #fb923c; --tbl-primary: #fb923c; --tbl-grad1: rgba(194,65,12,0.12); } /* ── 23. Lavender ── */ [data-theme="lavender"] { --primary: #7c3aed; --primary-hover: #6d28d9; --primary-light: #ddd6fe; --primary-lighter:#ede9fe; --secondary: #8b5cf6; --accent: #a78bfa; --accent-hover: #7c3aed; --tbl-primary: #7c3aed; --tbl-grad1: #ede9fe; } [data-theme="lavender-dark"] { --primary: #c4b5fd; --primary-hover: #ddd6fe; --primary-light: #6d28d9; --primary-lighter:rgba(124,58,237,0.15); --secondary: #8b5cf6; --accent: #ddd6fe; --accent-hover: #c4b5fd; --tbl-primary: #c4b5fd; --tbl-grad1: rgba(124,58,237,0.12); } /* ── 24. Zinc ── */ [data-theme="zinc"] { --primary: #52525b; --primary-hover: #3f3f46; --primary-light: #a1a1aa; --primary-lighter:#f4f4f5; --secondary: #71717a; --accent: #71717a; --accent-hover: #52525b; --tbl-primary: #52525b; --tbl-grad1: #f4f4f5; } [data-theme="zinc-dark"] { --primary: #a1a1aa; --primary-hover: #d4d4d8; --primary-light: #3f3f46; --primary-lighter:rgba(82,82,91,0.2); --secondary: #71717a; --accent: #d4d4d8; --accent-hover: #a1a1aa; --tbl-primary: #a1a1aa; --tbl-grad1: rgba(82,82,91,0.15); } /* ── 25. Red ── */ [data-theme="red"] { --primary: #dc2626; --primary-hover: #b91c1c; --primary-light: #f87171; --primary-lighter:#fee2e2; --secondary: #ef4444; --accent: #f87171; --accent-hover: #dc2626; --tbl-primary: #dc2626; --tbl-grad1: #fee2e2; } [data-theme="red-dark"] { --primary: #f87171; --primary-hover: #fca5a5; --primary-light: #b91c1c; --primary-lighter:rgba(220,38,38,0.15); --secondary: #ef4444; --accent: #fca5a5; --accent-hover: #f87171; --tbl-primary: #f87171; --tbl-grad1: rgba(220,38,38,0.12); } /* ── 26. Blue ── */ [data-theme="blue"] { --primary: #2563eb; --primary-hover: #1d4ed8; --primary-light: #93c5fd; --primary-lighter:#dbeafe; --secondary: #3b82f6; --accent: #60a5fa; --accent-hover: #2563eb; --tbl-primary: #2563eb; --tbl-grad1: #dbeafe; } [data-theme="blue-dark"] { --primary: #60a5fa; --primary-hover: #93c5fd; --primary-light: #1d4ed8; --primary-lighter:rgba(37,99,235,0.15); --secondary: #3b82f6; --accent: #93c5fd; --accent-hover: #60a5fa; --tbl-primary: #60a5fa; --tbl-grad1: rgba(37,99,235,0.12); } /* ── 27. Green ── */ [data-theme="green"] { --primary: #16a34a; --primary-hover: #15803d; --primary-light: #4ade80; --primary-lighter:#dcfce7; --secondary: #22c55e; --accent: #4ade80; --accent-hover: #16a34a; --tbl-primary: #16a34a; --tbl-grad1: #dcfce7; } [data-theme="green-dark"] { --primary: #4ade80; --primary-hover: #86efac; --primary-light: #15803d; --primary-lighter:rgba(22,163,74,0.15); --secondary: #22c55e; --accent: #86efac; --accent-hover: #4ade80; --tbl-primary: #4ade80; --tbl-grad1: rgba(22,163,74,0.12); } /* ── 28. Yellow ── */ [data-theme="yellow"] { --primary: #ca8a04; --primary-hover: #a16207; --primary-light: #facc15; --primary-lighter:#fef9c3; --secondary: #eab308; --accent: #facc15; --accent-hover: #ca8a04; --tbl-primary: #ca8a04; --tbl-grad1: #fef9c3; } [data-theme="yellow-dark"] { --primary: #facc15; --primary-hover: #fde047; --primary-light: #a16207; --primary-lighter:rgba(202,138,4,0.15); --secondary: #eab308; --accent: #fde047; --accent-hover: #facc15; --tbl-primary: #facc15; --tbl-grad1: rgba(202,138,4,0.12); } /* ── 29. Sapphire ── */ [data-theme="sapphire"] { --primary: #0c4a6e; --primary-hover: #075985; --primary-light: #7dd3fc; --primary-lighter:#e0f2fe; --secondary: #0369a1; --accent: #0ea5e9; --accent-hover: #0c4a6e; --tbl-primary: #0c4a6e; --tbl-grad1: #e0f2fe; } [data-theme="sapphire-dark"] { --primary: #38bdf8; --primary-hover: #7dd3fc; --primary-light: #075985; --primary-lighter:rgba(12,74,110,0.2); --secondary: #0ea5e9; --accent: #7dd3fc; --accent-hover: #38bdf8; --tbl-primary: #38bdf8; --tbl-grad1: rgba(12,74,110,0.15); } /* ── 30. Plum ── */ [data-theme="plum"] { --primary: #581c87; --primary-hover: #6b21a8; --primary-light: #c084fc; --primary-lighter:#f3e8ff; --secondary: #7e22ce; --accent: #a855f7; --accent-hover: #581c87; --tbl-primary: #581c87; --tbl-grad1: #f3e8ff; } [data-theme="plum-dark"] { --primary: #c084fc; --primary-hover: #d8b4fe; --primary-light: #6b21a8; --primary-lighter:rgba(88,28,135,0.15); --secondary: #7e22ce; --accent: #d8b4fe; --accent-hover: #c084fc; --tbl-primary: #c084fc; --tbl-grad1: rgba(88,28,135,0.12); } /* ── 31. Bronze ── */ [data-theme="bronze"] { --primary: #b45309; --primary-hover: #92400e; --primary-light: #fcd34d; --primary-lighter:#fef3c7; --secondary: #d97706; --accent: #f59e0b; --accent-hover: #b45309; --tbl-primary: #b45309; --tbl-grad1: #fef3c7; } [data-theme="bronze-dark"] { --primary: #fbbf24; --primary-hover: #fcd34d; --primary-light: #92400e; --primary-lighter:rgba(180,83,9,0.15); --secondary: #d97706; --accent: #fcd34d; --accent-hover: #fbbf24; --tbl-primary: #fbbf24; --tbl-grad1: rgba(180,83,9,0.12); } /* ══════════════════════════════════════ NOUVELLES PALETTES (32–50) ══════════════════════════════════════ */ /* ── 32. Indigo Pro (bleu nuit + violet doux) ── */ [data-theme="indigo-pro"] { --primary: #3730a3; --primary-hover: #312e81; --primary-light: #a5b4fc; --primary-lighter:#eef2ff; --secondary: #4f46e5; --accent: #818cf8; --accent-hover: #3730a3; --tbl-primary: #3730a3; --tbl-grad1: #eef2ff; } [data-theme="indigo-pro-dark"] { --primary: #818cf8; --primary-hover: #a5b4fc; --primary-light: #312e81; --primary-lighter:rgba(55,48,163,0.2); --secondary: #6366f1; --accent: #a5b4fc; --accent-hover: #818cf8; --tbl-primary: #818cf8; --tbl-grad1: rgba(55,48,163,0.15); } /* ── 33. Ocean Depth (pétrole + cyan glacé) ── */ [data-theme="ocean-depth"] { --primary: #0f4c65; --primary-hover: #0b2d3d; --primary-light: #7fcfdf; --primary-lighter:#e6f6fa; --secondary: #1a8faa; --accent: #00c8e6; --accent-hover: #0f4c65; --tbl-primary: #0f4c65; --tbl-grad1: #e6f6fa; } [data-theme="ocean-depth-dark"] { --primary: #00c8e6; --primary-hover: #7fcfdf; --primary-light: #0b2d3d; --primary-lighter:rgba(15,76,101,0.2); --secondary: #1a8faa; --accent: #7fcfdf; --accent-hover: #00c8e6; --tbl-primary: #00c8e6; --tbl-grad1: rgba(15,76,101,0.15); } /* ── 34. Slate & Amber (gris ardoise + or chaud) ── */ [data-theme="slate-amber"] { --primary: #f0a500; --primary-hover: #d97706; --primary-light: #ffd166; --primary-lighter:#fff8e7; --secondary: #fbbf24; --accent: #ffd166; --accent-hover: #f0a500; --tbl-primary: #f0a500; --tbl-grad1: #fff8e7; --bg-page: #f4f5f7; --sidebar-bg: #1c2333; --text: #1c2333; } [data-theme="slate-amber-dark"] { --primary: #ffd166; --primary-hover: #ffe499; --primary-light: #d97706; --primary-lighter:rgba(240,165,0,0.15); --secondary: #fbbf24; --accent: #ffe499; --accent-hover: #ffd166; --tbl-primary: #ffd166; --tbl-grad1: rgba(240,165,0,0.12); } /* ── 35. Forest Finance (vert forêt + beige) ── */ [data-theme="forest-finance"] { --primary: #2d5a27; --primary-hover: #1a2e1a; --primary-light: #a8d5a2; --primary-lighter:#f1f8f1; --secondary: #4caf50; --accent: #81c784; --accent-hover: #2d5a27; --tbl-primary: #2d5a27; --tbl-grad1: #f1f8f1; } [data-theme="forest-finance-dark"] { --primary: #81c784; --primary-hover: #a8d5a2; --primary-light: #1a2e1a; --primary-lighter:rgba(45,90,39,0.15); --secondary: #4caf50; --accent: #a8d5a2; --accent-hover: #81c784; --tbl-primary: #81c784; --tbl-grad1: rgba(45,90,39,0.12); } /* ── 36. Nordic Frost (gris bleu + blanc arctique) ── */ [data-theme="nordic"] { --primary: #5c7a9a; --primary-hover: #2e4057; --primary-light: #b8d0e8; --primary-lighter:#f0f5fa; --secondary: #4a6fa5; --accent: #7fa8cc; --accent-hover: #5c7a9a; --tbl-primary: #5c7a9a; --tbl-grad1: #f0f5fa; } [data-theme="nordic-dark"] { --primary: #7fa8cc; --primary-hover: #b8d0e8; --primary-light: #2e4057; --primary-lighter:rgba(92,122,154,0.15); --secondary: #4a6fa5; --accent: #b8d0e8; --accent-hover: #7fa8cc; --tbl-primary: #7fa8cc; --tbl-grad1: rgba(92,122,154,0.12); } /* ── 37. Obsidian Gold (noir + or éclatant) ── */ [data-theme="obsidian"] { --primary: #c9a84c; --primary-hover: #b8972a; --primary-light: #f0d080; --primary-lighter:#fffdf0; --secondary: #d4aa5a; --accent: #f0d080; --accent-hover: #c9a84c; --tbl-primary: #c9a84c; --tbl-grad1: #fffdf0; --bg-page: #f7f5ef; } [data-theme="obsidian-dark"] { --primary: #f0d080; --primary-hover: #f8e8a0; --primary-light: #b8972a; --primary-lighter:rgba(201,168,76,0.15); --secondary: #d4aa5a; --accent: #f8e8a0; --accent-hover: #f0d080; --tbl-primary: #f0d080; --tbl-grad1: rgba(201,168,76,0.12); --bg-page: #0a0a0a; --bg-card: #1a1a1a; --topbar-bg: #111111; --sidebar-bg: #0f0f0f; } /* ── 38. Teal & Coral (sarcelle + saumon) ── */ [data-theme="teal-coral"] { --primary: #0f6b6b; --primary-hover: #0d3535; --primary-light: #66c2d0; --primary-lighter:#edfcfd; --secondary: #00b4b4; --accent: #ff6b6b; --accent-hover: #e05555; --tbl-primary: #0f6b6b; --tbl-grad1: #edfcfd; } [data-theme="teal-coral-dark"] { --primary: #66c2d0; --primary-hover: #99dde5; --primary-light: #0d3535; --primary-lighter:rgba(15,107,107,0.15); --secondary: #00b4b4; --accent: #ff8a8a; --accent-hover: #ff6b6b; --tbl-primary: #66c2d0; --tbl-grad1: rgba(15,107,107,0.12); } /* ── 39. Purple Fintech (violet électrique) ── */ [data-theme="purple-fintech"] { --primary: #7b2fbe; --primary-hover: #3d0e6e; --primary-light: #c49be8; --primary-lighter:#f5edff; --secondary: #9c47d4; --accent: #c49be8; --accent-hover: #7b2fbe; --tbl-primary: #7b2fbe; --tbl-grad1: #f5edff; } [data-theme="purple-fintech-dark"] { --primary: #c49be8; --primary-hover: #d8b4fe; --primary-light: #3d0e6e; --primary-lighter:rgba(123,47,190,0.15); --secondary: #9c47d4; --accent: #d8b4fe; --accent-hover: #c49be8; --tbl-primary: #c49be8; --tbl-grad1: rgba(123,47,190,0.12); } /* ── 40. Electric Cyan (noir mat + cyan néon) ── */ [data-theme="electric"] { --primary: #006eb5; --primary-hover: #0a1628; --primary-light: #00c8e6; --primary-lighter:#e0faff; --secondary: #0091d4; --accent: #00c8e6; --accent-hover: #006eb5; --tbl-primary: #006eb5; --tbl-grad1: #e0faff; } [data-theme="electric-dark"] { --primary: #00c8e6; --primary-hover: #7ee8f7; --primary-light: #0a1628; --primary-lighter:rgba(0,110,181,0.15); --secondary: #0091d4; --accent: #7ee8f7; --accent-hover: #00c8e6; --tbl-primary: #00c8e6; --tbl-grad1: rgba(0,110,181,0.12); --bg-page: #050a10; --bg-card: #0a1628; --topbar-bg: #080e1a; --sidebar-bg: #060c16; } /* ── 41. Rose Gold Pro (rose doré + gris perle) ── */ [data-theme="rose-gold"] { --primary: #c0607a; --primary-hover: #a04060; --primary-light: #f0a0b0; --primary-lighter:#fff0f3; --secondary: #d47090; --accent: #f0a0b0; --accent-hover: #c0607a; --tbl-primary: #c0607a; --tbl-grad1: #fff0f3; } [data-theme="rose-gold-dark"] { --primary: #f0a0b0; --primary-hover: #f8c0cc; --primary-light: #a04060; --primary-lighter:rgba(192,96,122,0.15); --secondary: #d47090; --accent: #f8c0cc; --accent-hover: #f0a0b0; --tbl-primary: #f0a0b0; --tbl-grad1: rgba(192,96,122,0.12); } /* ── 42. Emerald Trust (émeraude finance) ── */ [data-theme="emerald-trust"] { --primary: #00875a; --primary-hover: #024d29; --primary-light: #79d4a9; --primary-lighter:#edfdf6; --secondary: #00a870; --accent: #79d4a9; --accent-hover: #00875a; --tbl-primary: #00875a; --tbl-grad1: #edfdf6; } [data-theme="emerald-trust-dark"] { --primary: #79d4a9; --primary-hover: #a8e6c8; --primary-light: #024d29; --primary-lighter:rgba(0,135,90,0.15); --secondary: #00a870; --accent: #a8e6c8; --accent-hover: #79d4a9; --tbl-primary: #79d4a9; --tbl-grad1: rgba(0,135,90,0.12); } /* ── 43. Steel & Orange (acier + orange vif) ── */ [data-theme="steel-orange"] { --primary: #ff6d00; --primary-hover: #e05a00; --primary-light: #ffb380; --primary-lighter:#fff3e0; --secondary: #ff8c00; --accent: #ffb380; --accent-hover: #ff6d00; --tbl-primary: #ff6d00; --tbl-grad1: #fff3e0; --bg-page: #f5f6f8; --sidebar-bg: #252d3d; --text: #141820; } [data-theme="steel-orange-dark"] { --primary: #ffb380; --primary-hover: #ffcca6; --primary-light: #e05a00; --primary-lighter:rgba(255,109,0,0.15); --secondary: #ff8c00; --accent: #ffcca6; --accent-hover: #ffb380; --tbl-primary: #ffb380; --tbl-grad1: rgba(255,109,0,0.12); --bg-page: #141820; --bg-card: #1a2030; --sidebar-bg: #141820; } /* ── 44. Charcoal Mint (anthracite + menthe) ── */ [data-theme="charcoal-mint"] { --primary: #3d7a6e; --primary-hover: #1e2b28; --primary-light: #7ecfc4; --primary-lighter:#edfaf8; --secondary: #50a090; --accent: #7ecfc4; --accent-hover: #3d7a6e; --tbl-primary: #3d7a6e; --tbl-grad1: #edfaf8; } [data-theme="charcoal-mint-dark"] { --primary: #7ecfc4; --primary-hover: #a8e6de; --primary-light: #1e2b28; --primary-lighter:rgba(61,122,110,0.15); --secondary: #50a090; --accent: #a8e6de; --accent-hover: #7ecfc4; --tbl-primary: #7ecfc4; --tbl-grad1: rgba(61,122,110,0.12); } /* ── 45. Navy & Gold (marine + or prestige) ── */ [data-theme="navy-gold"] { --primary: #2e3d8f; --primary-hover: #1a2456; --primary-light: #8fa8d8; --primary-lighter:#eef2ff; --secondary: #1e3a8a; --accent: #d4a843; --accent-hover: #b8922a; --tbl-primary: #2e3d8f; --tbl-grad1: #eef2ff; } [data-theme="navy-gold-dark"] { --primary: #d4a843; --primary-hover: #f0c860; --primary-light: #1a2456; --primary-lighter:rgba(46,61,143,0.2); --secondary: #1e3a8a; --accent: #f0c860; --accent-hover: #d4a843; --tbl-primary: #d4a843; --tbl-grad1: rgba(46,61,143,0.15); --bg-page: #060a18; --bg-card: #0d1230; --sidebar-bg: #08102a; } /* ── 46. Stone & Teal (pierre + sarcelle) ── */ [data-theme="stone-teal"] { --primary: #3d7a8a; --primary-hover: #2a2a2a; --primary-light: #66c2d0; --primary-lighter:#f0fafc; --secondary: #4a8fa0; --accent: #66c2d0; --accent-hover: #3d7a8a; --tbl-primary: #3d7a8a; --tbl-grad1: #f0fafc; } [data-theme="stone-teal-dark"] { --primary: #66c2d0; --primary-hover: #99dde5; --primary-light: #2a2a2a; --primary-lighter:rgba(61,122,138,0.15); --secondary: #4a8fa0; --accent: #99dde5; --accent-hover: #66c2d0; --tbl-primary: #66c2d0; --tbl-grad1: rgba(61,122,138,0.12); } /* ── 47. Plum & Sand (prune + sable chaud) ── */ [data-theme="plum-sand"] { --primary: #7a4fa0; --primary-hover: #3d1f5a; --primary-light: #d4a8e0; --primary-lighter:#fdf5ff; --secondary: #9060b8; --accent: #d4a8e0; --accent-hover: #7a4fa0; --tbl-primary: #7a4fa0; --tbl-grad1: #fdf5ff; } [data-theme="plum-sand-dark"] { --primary: #d4a8e0; --primary-hover: #e8caf0; --primary-light: #3d1f5a; --primary-lighter:rgba(122,79,160,0.15); --secondary: #9060b8; --accent: #e8caf0; --accent-hover: #d4a8e0; --tbl-primary: #d4a8e0; --tbl-grad1: rgba(122,79,160,0.12); } /* ── 48. Crimson Trust (rouge foncé + ivoire) ── */ [data-theme="crimson"] { --primary: #8b1a1a; --primary-hover: #6b1010; --primary-light: #e88080; --primary-lighter:#fff5f5; --secondary: #b02020; --accent: #e88080; --accent-hover: #8b1a1a; --tbl-primary: #8b1a1a; --tbl-grad1: #fff5f5; } [data-theme="crimson-dark"] { --primary: #e88080; --primary-hover: #f0a0a0; --primary-light: #6b1010; --primary-lighter:rgba(139,26,26,0.15); --secondary: #b02020; --accent: #f0a0a0; --accent-hover: #e88080; --tbl-primary: #e88080; --tbl-grad1: rgba(139,26,26,0.12); } /* ── 49. Warm Neutral (beige + brun chocolat) ── */ [data-theme="warm"] { --primary: #a0714f; --primary-hover: #5c3d1e; --primary-light: #d4b896; --primary-lighter:#faf5ee; --secondary: #b5865e; --accent: #d4b896; --accent-hover: #a0714f; --tbl-primary: #a0714f; --tbl-grad1: #faf5ee; --bg-page: #f7f3ee; } [data-theme="warm-dark"] { --primary: #d4b896; --primary-hover: #e8d0b4; --primary-light: #5c3d1e; --primary-lighter:rgba(160,113,79,0.15); --secondary: #b5865e; --accent: #e8d0b4; --accent-hover: #d4b896; --tbl-primary: #d4b896; --tbl-grad1: rgba(160,113,79,0.12); --bg-page: #1c1209; --bg-card: #241810; --sidebar-bg: #1c1209; } /* ── 50. Midnight Steel (obsidian pur) ── */ [data-theme="midnight-steel"] { --primary: #4a6fa5; --primary-hover: #2a4a7a; --primary-light: #90b8e0; --primary-lighter:#e8f0fa; --secondary: #5a80b8; --accent: #90b8e0; --accent-hover: #4a6fa5; --tbl-primary: #4a6fa5; --tbl-grad1: #e8f0fa; } [data-theme="midnight-steel-dark"] { --primary: #90b8e0; --primary-hover: #b8d4f0; --primary-light: #2a4a7a; --primary-lighter:rgba(74,111,165,0.15); --secondary: #5a80b8; --accent: #b8d4f0; --accent-hover: #90b8e0; --tbl-primary: #90b8e0; --tbl-grad1: rgba(74,111,165,0.12); --bg-page: #060b18; --bg-card: #0d1625; --sidebar-bg: #080f1e; --topbar-bg: #080f1e; }