/* ============================================================ Inventaure — palettes + clair/sombre ------------------------------------------------------------ Sélecteurs attendus sur : data-theme = 'classic' | 'bourbon' | 'emerald' | 'marine' | 'amber' | 'graphite' data-color-mode = 'auto' | 'light' | 'dark' (préférence utilisateur) ------------------------------------------------------------ Convention : --bg / --bg-2 fond gradient --surface carte standard --surface-2 carte enfoncée --text texte principal --text-dim texte secondaire --border séparateurs --primary action principale --primary-dark hover / active --accent highlight --success vert succès --danger rouge erreur ============================================================ */ /* ---------- DARK : palette par défaut "classic" ---------- */ :root, :root[data-theme="classic"] { --bg: #0f0f1a; --bg-2: #1a1a2e; --surface: #232340; --surface-2: #2d2d52; --text: #f1f1f7; --text-dim: #9a9ab0; --border: rgba(255, 255, 255, 0.08); --primary: #ff6b6b; --primary-dark: #e85555; --accent: #ffd166; --success: #06d6a0; --danger: #ef476f; } :root[data-theme="bourbon"] { --bg: #1a110a; --bg-2: #2b1c10; --surface: #3a2818; --surface-2: #4a3320; --text: #f5ebdc; --text-dim: #b9a78a; --border: rgba(255, 220, 180, 0.08); --primary: #d97a3a; --primary-dark: #b3622a; --accent: #f0c46a; --success: #6fbf7a; --danger: #e0656f; } :root[data-theme="emerald"] { --bg: #0a1a13; --bg-2: #102b1e; --surface: #173a2a; --surface-2: #1f4a36; --text: #e6f3ec; --text-dim: #8eb8a0; --border: rgba(180, 255, 220, 0.08); --primary: #2fb37a; --primary-dark: #248c5f; --accent: #f0c46a; --success: #4fd089; --danger: #ea5a6f; } :root[data-theme="marine"] { --bg: #0a1422; --bg-2: #102036; --surface: #1b2f4d; --surface-2: #243d62; --text: #e7eff8; --text-dim: #93a6c1; --border: rgba(180, 220, 255, 0.08); --primary: #4a93e0; --primary-dark: #3578c2; --accent: #ffd166; --success: #4fd089; --danger: #ea5a6f; } :root[data-theme="amber"] { --bg: #1a1408; --bg-2: #2a2010; --surface: #3a2c16; --surface-2: #4a391d; --text: #f6ecd6; --text-dim: #c0a878; --border: rgba(255, 220, 150, 0.1); --primary: #f0a93f; --primary-dark: #cc8a25; --accent: #ffe18c; --success: #6fbf7a; --danger: #e0656f; } :root[data-theme="graphite"] { --bg: #0e1014; --bg-2: #181b22; --surface: #232730; --surface-2: #2e333f; --text: #ececf1; --text-dim: #9aa0ab; --border: rgba(255, 255, 255, 0.08); --primary: #8a8fff; --primary-dark: #6e72e0; --accent: #ffd166; --success: #4fd089; --danger: #ea5a6f; } /* ---------- LIGHT mode (surcharges par palette) ---------- */ :root[data-color-mode="light"][data-theme="classic"], :root[data-color-mode="light"]:not([data-theme]) { --bg: #f5f6fb; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #eef0f7; --text: #1a1a2e; --text-dim: #5b6079; --border: rgba(20, 20, 50, 0.08); --primary: #e85555; --primary-dark: #c84545; --accent: #d99a2b; --success: #1a9a72; --danger: #c4324f; } :root[data-color-mode="light"][data-theme="bourbon"] { --bg: #faf3e8; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f1e5d0; --text: #2b1c10; --text-dim: #6e5a3e; --border: rgba(80, 50, 20, 0.1); --primary: #b3622a; --primary-dark: #8e4d1f; --accent: #c2912e; --success: #3a8a4f; --danger: #b54052; } :root[data-color-mode="light"][data-theme="emerald"] { --bg: #eef7f1; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #dfeee6; --text: #0f2a1b; --text-dim: #4a6f5b; --border: rgba(20, 80, 50, 0.1); --primary: #1f8c5b; --primary-dark: #176a45; --accent: #c2912e; --success: #1f8c5b; --danger: #b54052; } :root[data-color-mode="light"][data-theme="marine"] { --bg: #eef3fa; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #dfe7f3; --text: #102036; --text-dim: #4a5e7c; --border: rgba(20, 50, 100, 0.1); --primary: #3578c2; --primary-dark: #285d99; --accent: #d99a2b; --success: #1f8c5b; --danger: #b54052; } :root[data-color-mode="light"][data-theme="amber"] { --bg: #fbf3e3; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f2e4c4; --text: #2a2010; --text-dim: #6e5a32; --border: rgba(100, 70, 20, 0.1); --primary: #cc8a25; --primary-dark: #a36c1a; --accent: #d99a2b; --success: #3a8a4f; --danger: #b54052; } :root[data-color-mode="light"][data-theme="graphite"] { --bg: #f3f4f8; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #e6e8ee; --text: #181b22; --text-dim: #5a6070; --border: rgba(20, 20, 40, 0.1); --primary: #6e72e0; --primary-dark: #5358b8; --accent: #d99a2b; --success: #1f8c5b; --danger: #b54052; } /* ---------- AUTO : suit prefers-color-scheme du système ---------- */ @media (prefers-color-scheme: light) { :root[data-color-mode="auto"][data-theme="classic"], :root[data-color-mode="auto"]:not([data-theme]) { --bg: #f5f6fb; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #eef0f7; --text: #1a1a2e; --text-dim: #5b6079; --border: rgba(20, 20, 50, 0.08); --primary: #e85555; --primary-dark: #c84545; --accent: #d99a2b; --success: #1a9a72; --danger: #c4324f; } :root[data-color-mode="auto"][data-theme="bourbon"] { --bg: #faf3e8; --bg-2: #fff; --surface: #fff; --surface-2: #f1e5d0; --text: #2b1c10; --text-dim: #6e5a3e; --border: rgba(80,50,20,0.1); --primary: #b3622a; --primary-dark: #8e4d1f; --accent: #c2912e; --success: #3a8a4f; --danger: #b54052; } :root[data-color-mode="auto"][data-theme="emerald"] { --bg: #eef7f1; --bg-2: #fff; --surface: #fff; --surface-2: #dfeee6; --text: #0f2a1b; --text-dim: #4a6f5b; --border: rgba(20,80,50,0.1); --primary: #1f8c5b; --primary-dark: #176a45; --accent: #c2912e; --success: #1f8c5b; --danger: #b54052; } :root[data-color-mode="auto"][data-theme="marine"] { --bg: #eef3fa; --bg-2: #fff; --surface: #fff; --surface-2: #dfe7f3; --text: #102036; --text-dim: #4a5e7c; --border: rgba(20,50,100,0.1); --primary: #3578c2; --primary-dark: #285d99; --accent: #d99a2b; --success: #1f8c5b; --danger: #b54052; } :root[data-color-mode="auto"][data-theme="amber"] { --bg: #fbf3e3; --bg-2: #fff; --surface: #fff; --surface-2: #f2e4c4; --text: #2a2010; --text-dim: #6e5a32; --border: rgba(100,70,20,0.1); --primary: #cc8a25; --primary-dark: #a36c1a; --accent: #d99a2b; --success: #3a8a4f; --danger: #b54052; } :root[data-color-mode="auto"][data-theme="graphite"] { --bg: #f3f4f8; --bg-2: #fff; --surface: #fff; --surface-2: #e6e8ee; --text: #181b22; --text-dim: #5a6070; --border: rgba(20,20,40,0.1); --primary: #6e72e0; --primary-dark: #5358b8; --accent: #d99a2b; --success: #1f8c5b; --danger: #b54052; } } /* ---------- Boutons toggle de mode (réutilisable) ---------- */ .mode-toggle { display: inline-flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px; } .mode-toggle button { padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; color: var(--text-dim); transition: background 0.15s, color 0.15s; } .mode-toggle button[aria-pressed="true"] { background: var(--primary); color: white; }