/* ════════════════════════════════════════════════════════════════ THEME SYSTEM — Dental 3D ──────────────────────────────────────────────────────────────── Variables CSS pour les thèmes clair/sombre. Le thème actif est défini par data-theme sur : - → thème sombre (par défaut) - → thème clair (style Apple) Le choix est appliqué par widget/js/theme.js avant le rendu pour éviter le flash de couleur (FOUC). ⚠️ Les couleurs SÉMANTIQUES (succès, erreur, warning) ne changent pas selon le thème — un vert succès reste vert dans les deux modes. ════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── THÈME SOMBRE (slate, comme l'existant) ────────────────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; /* Fonds */ --bg-app: #0f172a; /* fond principal (body) */ --bg-surface: #1e293b; /* cartes, top-bar */ --bg-surface-2: #1e3a5f; /* hover, surface secondaire */ --bg-overlay: rgba(30, 41, 59, 0.85); --bg-input: #1e293b; --bg-elevated: #0f172a; /* iframes, contenu app */ /* Textes */ --text-primary: #f8fafc; /* titres, texte fort */ --text-secondary: #e2e8f0; /* texte courant */ --text-tertiary: #cbd5e1; /* labels */ --text-muted: #94a3b8; /* texte discret */ --text-disabled: #64748b; /* texte désactivé */ --text-on-accent: #ffffff; /* texte sur bouton accent */ /* Bordures & séparateurs */ --border: rgba(100, 116, 139, 0.2); --border-strong: rgba(100, 116, 139, 0.4); --divider: rgba(255, 255, 255, 0.06); /* Accents (marque) */ --accent: #38bdf8; /* sky-400 */ --accent-strong: #0ea5e9; /* sky-500 */ --accent-hover: #0284c7; /* sky-600 */ --accent-soft: rgba(56, 189, 248, 0.15); --accent-teal: #0b98b8; /* Effets */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4); --backdrop-blur: blur(10px); --modal-backdrop: rgba(0, 0, 0, 0.6); /* Surfaces de card translucides (au-dessus du fond app) */ --bg-card: rgba(30, 41, 59, 0.6); --bg-card-strong: rgba(30, 41, 59, 0.95); --bg-prothesis: rgba(255, 255, 255, 0.95); } /* ────────────────────────────────────────────────────────────── THÈME CLAIR (style Apple — fond crème, accents bleus) ────────────────────────────────────────────────────────────── */ :root[data-theme="light"] { color-scheme: light; /* Fonds */ --bg-app: #f5f5f7; /* fond Apple (gris très clair) */ --bg-surface: #ffffff; /* cartes, top-bar */ --bg-surface-2: #f0f0f3; /* hover, surface secondaire */ --bg-overlay: rgba(255, 255, 255, 0.85); --bg-input: #ffffff; --bg-elevated: #ffffff; /* Textes */ --text-primary: #1d1d1f; /* noir Apple */ --text-secondary: #2c2c2e; --text-tertiary: #424245; --text-muted: #6e6e73; /* gris secondaire Apple */ --text-disabled: #aeaeb2; --text-on-accent: #ffffff; /* Bordures & séparateurs */ --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.15); --divider: rgba(0, 0, 0, 0.06); /* Accents (marque — légèrement plus saturés en light pour contraste) */ --accent: #0071e3; /* bleu Apple */ --accent-strong: #0077ed; --accent-hover: #0058a8; --accent-soft: rgba(0, 113, 227, 0.10); --accent-teal: #0b98b8; /* Effets */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12); --backdrop-blur: blur(20px); --modal-backdrop: rgba(0, 0, 0, 0.35); --bg-card: rgba(255, 255, 255, 0.85); --bg-card-strong: rgba(255, 255, 255, 0.98); --bg-prothesis: rgba(0, 0, 0, 0.04); } /* ────────────────────────────────────────────────────────────── COULEURS SÉMANTIQUES (identiques dans les deux thèmes) ────────────────────────────────────────────────────────────── */ :root { --success: #22c55e; --success-strong: #16a34a; --success-soft: #86efac; --success-bg: rgba(34, 197, 94, 0.10); --danger: #ef4444; --danger-soft: #fca5a5; --danger-bg: rgba(239, 68, 68, 0.10); --warning: #f59e0b; --warning-soft: #fcd34d; --warning-strong: #fbbf24; --warning-bg: rgba(245, 158, 11, 0.10); --info: #38bdf8; --info-bg: rgba(56, 189, 248, 0.10); --purple: #a78bfa; --purple-soft: #c4b5fd; } /* ────────────────────────────────────────────────────────────── STYLES GLOBAUX & TRANSITIONS ────────────────────────────────────────────────────────────── */ html, body { background: var(--bg-app); color: var(--text-secondary); transition: background-color 0.3s ease, color 0.3s ease; } /* Les surfaces transitionnent doucement lors du changement de thème */ * { transition-property: background-color, border-color, color; transition-duration: 0.2s; transition-timing-function: ease; } /* ────────────────────────────────────────────────────────────── BOUTON TOGGLE DE THÈME ────────────────────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); background: var(--bg-surface-2); border-radius: 50%; cursor: pointer; color: var(--text-secondary); font-size: 16px; line-height: 1; transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; -webkit-appearance: none; appearance: none; } .theme-toggle:hover { transform: scale(1.05); background: var(--accent-soft); border-color: var(--accent); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } :root[data-theme="light"] .theme-toggle .icon-sun { display: inline; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; }