/* ── Shared theme variables ──────────────────────────── */ /* Usage: add class="theme-light/sepia/ocean" to */ /* dark (default) — no class needed */ body { --bg: #0f0f14; --bg2: #1a1a24; --bg3: #222236; --border: #2a2a3a; --border2: #3a3a5a; --text: #e0e0e0; --text2: #d0d0d0; --text3: #888; --text4: #555; --accent: #4a6cf7; --topbar-bg: #14141c; --topbar-border: #222230; } body.theme-light { --bg: #f5f5f0; --bg2: #fff; --bg3: #fafafa; --border: #e0e0e0; --border2: #ccc; --text: #333; --text2: #333; --text3: #999; --text4: #bbb; --accent: #4a6cf7; --topbar-bg: #f0ede6; --topbar-border: #ddd; } body.theme-sepia { --bg: #f4ecd8; --bg2: #fdf6e3; --bg3: #fff; --border: #d5c4a1; --border2: #c4b38a; --text: #5b4636; --text2: #5b4636; --text3: #8b7355; --text4: #b8a88a; --accent: #4a6cf7; --topbar-bg: #eee8d5; --topbar-border: #d5c4a1; } body.theme-ocean { --bg: #0a1628; --bg2: #112240; --bg3: #1a3468; --border: #1d3461; --border2: #2d4a8e; --text: #ccd6f6; --text2: #ccd6f6; --text3: #8892b0; --text4: #495670; --accent: #4a6cf7; --topbar-bg: #0d1f3c; --topbar-border: #1d3461; } /* ── Common card/topbar styles using variables ── */ .wb-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; } .wb-card:hover { background: var(--bg3); border-color: var(--border2); }