/* Shared color tokens for every portal page (landing, login/signup/join, dashboard, teams). Dark is the default/original look (no data-theme attribute needed); [data-theme="light"] overrides it. theme.js sets data-theme on from localStorage before first paint to avoid a flash of the wrong theme. The meeting room itself (meeting-ui, a separate React app) has its own equivalent light/dark variables in meeting-ui/src/index.css -- it's a different build entirely (Vite/React vs these plain HTML pages), so sharing one file across both wasn't practical, but the same data-theme attribute + localStorage key convention is used in both so a user's choice reads consistently everywhere. */ :root { --bg: #0b1220; --bg2: #101c38; --bg3: #0e1830; --fg: #eef1f8; --fg-muted: #9aa7bd; --fg-dim: #6f7d9a; --border: #1c2b4a; --border-strong: #2a3a5c; --accent-teal: #2FD8A8; --accent-blue: #2F8FE0; --gold: #D4AF37; --danger: #d9534f; --danger-bg: rgba(217, 83, 79, 0.15); --danger-fg: #f5b7b6; --shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } [data-theme="light"] { --bg: #f4f6fb; --bg2: #ffffff; --bg3: #eef1f7; --fg: #16213a; --fg-muted: #5b6b8c; --fg-dim: #8291ab; --border: #d7deeb; --border-strong: #c3cee0; --accent-teal: #1fae86; --accent-blue: #2470b3; --gold: #a9791f; --danger: #c0392b; --danger-bg: rgba(192, 57, 43, 0.08); --danger-fg: #8a2e22; --shadow: 0 20px 60px rgba(20, 30, 60, 0.12); } /* Shared toggle button styling -- used in every page's nav (theme.js wires up the click handler + icon by matching [data-theme-toggle], not this class, so this is purely visual). */ .theme-toggle-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--fg); border-radius: 8px; width: 34px; height: 34px; font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .theme-toggle-btn:hover { background: var(--bg3); }