/* ============================================================ IRIBHM Microscopy Platform — Theme Definitions ============================================================ Dark (default) and Light themes using CSS custom properties. Theme is toggled by adding [data-theme="light"] to . ============================================================ */ /* ── Dark Theme (Default) ────────────────────────────────── */ :root, [data-theme="dark"] { --bg-body: #0D0D1A; --bg-surface: #1A1A2E; --bg-surface-2: #16213E; --bg-surface-3: #1E2A4A; --bg-elevated: #222244; --bg-hover: rgba(255, 255, 255, 0.04); --bg-active: rgba(255, 255, 255, 0.08); --bg-input: rgba(255, 255, 255, 0.05); --text-primary: #E8E8F0; --text-secondary: #9999BB; --text-muted: #666688; --text-inverse: #1A1A2E; --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --scrollbar-track: rgba(255, 255, 255, 0.03); --scrollbar-thumb: rgba(255, 255, 255, 0.12); --scrollbar-hover: rgba(255, 255, 255, 0.20); --overlay: rgba(0, 0, 0, 0.6); --badge-fixed-bg: rgba(0, 210, 255, 0.15); --badge-fixed-text: #00D2FF; --badge-live-bg: rgba(255, 167, 38, 0.15); --badge-live-text: #FFA726; --badge-track-bg: rgba(0, 166, 84, 0.15); --badge-track-text: #00A654; } /* ── Light Theme ─────────────────────────────────────────── */ [data-theme="light"] { --bg-body: #F5F5FA; --bg-surface: #FFFFFF; --bg-surface-2: #F0F0F8; --bg-surface-3: #E8E8F4; --bg-elevated: #FFFFFF; --bg-hover: rgba(0, 0, 0, 0.03); --bg-active: rgba(0, 0, 0, 0.06); --bg-input: rgba(0, 0, 0, 0.04); --text-primary: #1A1A2E; --text-secondary: #555577; --text-muted: #9999AA; --text-inverse: #FFFFFF; --border-subtle: rgba(0, 0, 0, 0.05); --border-default: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.18); --scrollbar-track: rgba(0, 0, 0, 0.03); --scrollbar-thumb: rgba(0, 0, 0, 0.15); --scrollbar-hover: rgba(0, 0, 0, 0.25); --overlay: rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.05); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.08); --glass-bg: rgba(255, 255, 255, 0.8); --glass-border: rgba(0, 0, 0, 0.06); --badge-fixed-bg: rgba(0, 180, 224, 0.10); --badge-fixed-text: #0090B8; --badge-live-bg: rgba(230, 140, 20, 0.10); --badge-live-text: #D48500; --badge-track-bg: rgba(0, 140, 70, 0.10); --badge-track-text: #008A45; }