/* ============================================================================ * light-theme.css — Editorial light mode for Quantum Trading Bot * --------------------------------------------------------------------------- * MUST load AFTER dashboard.css, side_nav.css, settings.css, premium.css. * Activated by set BEFORE first paint by the * tiny inline script in _INJECTED_HEAD_TAGS (dashboard_app.py). * * Design intent (per CLAUDE.md / open-codesign reference): * - warm off-white canvas (#f7f6f1) — never pure #fff * - near-black text (#0d1117) — never pure #000 * - DARKENED accent (#047857 / #065f46 press) — WCAG AA on light * - subtle 0,0,0 borders + soft warm shadows — no harsh boxes * - editorial restraint — keep dark-mode's bold rhythm * * Dark mode is UNTOUCHED. This file only emits CSS inside `.light-theme`. * ========================================================================= */ /* ===== 1. CORE VARIABLE REMAP (overrides every dark token set elsewhere) */ html.light-theme { color-scheme: light; /* dashboard.css tokens */ --bg: #f7f6f1; --card-bg: rgba(255, 255, 255, 0.78); --text: #0d1117; --accent: #047857; --accent-glow: rgba(4, 120, 87, 0.22); --danger: #b91c1c; --danger-glow: rgba(185, 28, 28, 0.20); --warn: #b45309; --dim: #6b7280; /* side_nav.css tokens */ --qt-sn-bg-start: #ffffff; --qt-sn-bg-end: #f3f1ea; --qt-sn-edge: rgba(4, 120, 87, 0.18); --qt-sn-inset: rgba(4, 120, 87, 0.04); --qt-sn-text: #2a2f3a; --qt-sn-muted: #6b7280; --qt-sn-accent: #047857; --qt-sn-accent-soft: rgba(4, 120, 87, 0.08); --qt-sn-accent-glow: rgba(4, 120, 87, 0.35); --qt-sn-hover: rgba(0, 0, 0, 0.035); /* premium.css tokens */ --bg-canvas: #f7f6f1; --bg-elevated: #ffffff; --bg-elevated-2: #fbfaf5; --bg-inset: #f0eee7; --bg-tinted: rgba(0, 0, 0, 0.025); --bg-glass: rgba(255, 255, 255, 0.82); --border-subtle: rgba(15, 17, 25, 0.06); --border-default: rgba(15, 17, 25, 0.10); --border-strong: rgba(15, 17, 25, 0.18); --border-accent: rgba(4, 120, 87, 0.40); --border-danger: rgba(185, 28, 28, 0.35); --text-primary: #0d1117; --text-secondary: #3d434f; --text-tertiary: #5d6470; --text-quaternary: #828995; --text-disabled: #b6bcc6; --accent-primary: #047857; --accent-press: #007a4a; --accent-soft: rgba(4, 120, 87, 0.10); --accent-haze: rgba(4, 120, 87, 0.03); --success: #047857; --success-soft: rgba(4, 120, 87, 0.10); --danger-fg: #b91c1c; --danger-soft: rgba(185, 28, 28, 0.08); --warning-fg: #b45309; --warning-soft: rgba(178, 92, 0, 0.10); --info-fg: #1f6feb; --info-soft: rgba(31, 111, 235, 0.08); --shadow-card: 0 1px 0 0 rgba(255, 255, 255, 0.7) inset, 0 12px 28px -18px rgba(15, 17, 25, 0.18), 0 2px 6px -3px rgba(15, 17, 25, 0.08); --shadow-hover: 0 1px 0 0 rgba(255, 255, 255, 0.8) inset, 0 24px 48px -22px rgba(15, 17, 25, 0.28), 0 4px 10px -4px rgba(15, 17, 25, 0.14); --glow-accent: 0 0 0 1px rgba(4, 120, 87, 0.20), 0 8px 24px -10px rgba(4, 120, 87, 0.30); /* settings.css scoped tokens — re-stated globally since #view-settings owns them */ --st-page-bg: #f7f6f1; --st-card-bg: #ffffff; --st-card-bg-2: #fbfaf5; --st-border: #e3e1d8; --st-border-strong: #c8c6bb; --st-text: #0d1117; --st-text-muted: #4b5159; --st-text-faint: #767c87; --st-danger: #b91c1c; --st-warn: #b45309; --st-ok: #047857; } html.light-theme #view-settings { --st-page-bg: #f7f6f1; --st-card-bg: #ffffff; --st-card-bg-2: #fbfaf5; --st-border: #e3e1d8; --st-border-strong: #c8c6bb; --st-text: #0d1117; --st-text-muted: #4b5159; --st-text-faint: #767c87; --st-danger: #b91c1c; --st-warn: #b45309; --st-ok: #047857; } /* ===== 2. BODY CANVAS (overrides the rgba(0,255,136,0.03) radial glow) ==== */ html.light-theme body { background-color: var(--bg); background-image: radial-gradient(circle at 15% 50%, rgba(4, 120, 87, 0.035) 0%, transparent 30%), radial-gradient(circle at 85% 30%, rgba(31, 111, 235, 0.025) 0%, transparent 30%); color: var(--text); } html.light-theme body[data-app="true"] { background-color: var(--bg-canvas); color: var(--text-primary); } /* Replace premium.css top ambient glow which was tuned for dark */ html.light-theme body[data-app="true"]::before { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(4, 120, 87, 0.06) 0%, transparent 70%); } /* ===== 3. CARDS — softer warm shadow, true 1px border, white surface ===== */ html.light-theme .card { background: var(--card-bg); border-color: rgba(15, 17, 25, 0.08); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.7) inset, 0 10px 28px -16px rgba(15, 17, 25, 0.18), 0 2px 4px -2px rgba(15, 17, 25, 0.06); } html.light-theme .inner-card { background: rgba(15, 17, 25, 0.04); } html.light-theme .kpi, html.light-theme .market-status-card { background: #ffffff; border-color: rgba(15, 17, 25, 0.08); } html.light-theme .kpi-lbl { color: var(--text-tertiary); } html.light-theme .agent-box { background: rgba(15, 17, 25, 0.025); border-color: rgba(15, 17, 25, 0.10); } html.light-theme .agent-box .status-dot { background: rgba(15, 17, 25, 0.18); } /* ===== 4. HEADER + NAV (legacy top-nav, kept for marketing pages) ======== */ html.light-theme .header-top { border-bottom-color: rgba(15, 17, 25, 0.08); } html.light-theme .brand-name { color: #0d1117; } html.light-theme .brand-sub { color: #6b7280; } html.light-theme .brand-logo { color: #fff; background: var(--accent); } html.light-theme .header-nav { border-bottom-color: rgba(15, 17, 25, 0.08); } html.light-theme .nav-tab { color: #6b7280; } html.light-theme .nav-tab:hover { color: #0d1117; background: rgba(15, 17, 25, 0.04); } html.light-theme .menu-toggle { border-color: rgba(15, 17, 25, 0.18); } html.light-theme .menu-toggle span { background: var(--accent); } html.light-theme .btn-logout { color: var(--danger); border-color: rgba(185, 28, 28, 0.35); } html.light-theme .btn-logout:hover { background: rgba(185, 28, 28, 0.06); } /* ===== 5. SIDEBAR (qt-sidenav) — light editorial surface =============== */ html.light-theme .qt-sidenav { background: linear-gradient(180deg, #ffffff 0%, #f5f3ec 100%); border-right: 1px solid rgba(15, 17, 25, 0.08); box-shadow: inset -1px 0 0 rgba(4, 120, 87, 0.04), 4px 0 24px -16px rgba(15, 17, 25, 0.12); color: var(--qt-sn-text); } html.light-theme .qt-sidenav-brand { border-bottom-color: rgba(15, 17, 25, 0.06); } html.light-theme .qt-sidenav-brand-logo { background: linear-gradient(135deg, #047857 0%, #007a4a 100%); color: #ffffff; box-shadow: 0 0 16px rgba(4, 120, 87, 0.22); } html.light-theme .qt-sidenav-brand-name { color: #0d1117; } html.light-theme .qt-sidenav-toggle { background: rgba(15, 17, 25, 0.04); border-color: rgba(15, 17, 25, 0.10); color: var(--qt-sn-muted); } html.light-theme .qt-sidenav-toggle:hover { background: var(--qt-sn-accent-soft); border-color: var(--qt-sn-edge); color: var(--qt-sn-accent); } html.light-theme .qt-sidenav-link { color: #1a1f2a; } html.light-theme .qt-sidenav-link:hover { background: rgba(15, 17, 25, 0.045); color: #0d1117; } html.light-theme .qt-sidenav-link.is-active { background: var(--qt-sn-accent-soft); color: #0d1117; } html.light-theme .qt-sidenav-link.is-active .qt-sidenav-label { text-shadow: none; /* glow halo is for dark — looks muddy on light */ } html.light-theme .qt-sidenav-icon { color: #6b7280; } html.light-theme .qt-sidenav-list::-webkit-scrollbar-thumb { background: rgba(15, 17, 25, 0.12); } html.light-theme .qt-sidenav.is-collapsed .qt-sidenav-link[data-label]:hover::after { background: #0d1117; color: #ffffff; border-color: rgba(15, 17, 25, 0.08); box-shadow: 0 8px 20px rgba(15, 17, 25, 0.18); } html.light-theme .qt-sidenav-footer { border-top-color: rgba(15, 17, 25, 0.06); } html.light-theme .qt-sidenav-user { background: rgba(15, 17, 25, 0.035); } html.light-theme .qt-sidenav-user-avatar { background: linear-gradient(135deg, #ffffff 0%, #f0eee7 100%); border-color: rgba(4, 120, 87, 0.30); } html.light-theme .qt-sidenav-user-email { color: #0d1117; } html.light-theme .qt-sidenav-logout { color: var(--danger); } html.light-theme .qt-sidenav-logout:hover { background: rgba(185, 28, 28, 0.06); } /* Scan-line shimmer on the right edge — kill on light, it reads as a stripe */ html.light-theme .qt-sidenav::after { opacity: 0; } /* Mobile hamburger + backdrop */ html.light-theme .qt-sidenav-hamburger { background: #ffffff; border-color: rgba(15, 17, 25, 0.12); color: #0d1117; box-shadow: 0 4px 14px -6px rgba(15, 17, 25, 0.18); } html.light-theme .qt-sidenav-backdrop { background: rgba(15, 17, 25, 0.32); } /* ===== 6. THEME TOGGLE PILL (sidebar bottom — light variant) =========== */ html.light-theme .qt-theme-toggle { background: rgba(15, 17, 25, 0.04); border-color: rgba(15, 17, 25, 0.10); } html.light-theme .qt-theme-toggle::after { background: #0d1117; box-shadow: 0 2px 6px rgba(15, 17, 25, 0.20); } html.light-theme .qt-theme-toggle:hover { border-color: var(--qt-sn-edge); background: rgba(4, 120, 87, 0.05); } /* ===== 7. SETTINGS PAGE (st-* tokens) =================================== */ html.light-theme .st-input, html.light-theme .st-select, html.light-theme .st-textarea { background: #ffffff; border-color: var(--st-border); color: var(--st-text); } html.light-theme .st-input:focus, html.light-theme .st-select:focus, html.light-theme .st-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.14); } html.light-theme .st-btn { background: #ffffff; border-color: var(--st-border); color: var(--st-text); } html.light-theme .st-btn:hover { background: #f5f3ec; border-color: var(--st-border-strong); } html.light-theme .st-btn-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; } html.light-theme .st-btn-primary:hover { background: #007a4a; border-color: #007a4a; } html.light-theme .st-btn-warn { background: var(--warn); border-color: var(--warn); color: #ffffff; } html.light-theme .st-btn-danger { background: var(--danger); border-color: var(--danger); color: #ffffff; } html.light-theme .st-toggle { background: #fbfaf5; border-color: var(--st-border); } html.light-theme .st-banner.is-info { background: rgba(31,111,235,0.08); color: #1248a1; border-color: rgba(31,111,235,0.30); } html.light-theme .st-banner.is-warn { background: rgba(178,92,0,0.08); color: #7a3e00; border-color: rgba(178,92,0,0.32); } html.light-theme .st-banner.is-danger { background: rgba(194,38,26,0.06); color: #8a1610; border-color: rgba(194,38,26,0.32); } html.light-theme .st-banner.is-success { background: rgba(0,149,90,0.08); color: #006039; border-color: rgba(0,149,90,0.32); } /* ===== 8. LOGS / CODE / TERMINAL SURFACES — keep readable on light ====== */ html.light-theme .logs-tail { background: #0d1117; color: #d7ffd7; border-color: rgba(15, 17, 25, 0.18); } html.light-theme .logs-toolbar button { background: var(--accent); color: #ffffff; } html.light-theme .logs-toolbar button.secondary { background: #ffffff; color: var(--text); border: 1px solid rgba(15, 17, 25, 0.16); } html.light-theme .logs-status, html.light-theme .logs-toolbar label { color: var(--text-tertiary); } /* ===== 9. MODALS / OVERLAYS ============================================ */ html.light-theme .demo-stats-modal { background: rgba(15, 17, 25, 0.55); } html.light-theme .demo-stats-content { background: #ffffff; color: var(--text); } /* ===== 10. PREMIUM.CSS specifics: ambient stripes, dividers, etc ======== */ html.light-theme #view-dashboard, html.light-theme #view-strategies, html.light-theme #view-analytics { color: var(--text-primary); } html.light-theme #view-dashboard *::-webkit-scrollbar-thumb, html.light-theme #view-strategies *::-webkit-scrollbar-thumb, html.light-theme #view-analytics *::-webkit-scrollbar-thumb { background: rgba(15, 17, 25, 0.16); } /* ===== 11. AUTH PAGES (login/signup) — they skip premium.css so leave dark feel UNLESS html.light-theme is present at load. ===== */ html.light-theme input, html.light-theme select, html.light-theme textarea { color-scheme: light; } /* ===== 12. UNIVERSAL TEXT FALLBACKS for inline-styled cards ============= */ /* The dashboard has many inline `style="color:#aaa; background:#111"` blocks that we don't tokenize here (would risk dark-mode regression). Instead, we raise the wrapper contrast so even white-on-near-white inline text remains legible. Override is scoped to body[data-app="true"] which is the SPA. */ html.light-theme body[data-app="true"] { /* Native form controls (button/input/select) get a sensible default so any un-themed legacy