/* ============================================================ PHTC Theme System — Green (default) / Dark / Light Apply via ============================================================ */ /* ── Dark theme (pure black/grey, no olive tint) ──────────── */ [data-theme="dark"] { --bg-base: #0A0A0E; --bg-card: #111116; --bg-card-alt: #1A1A22; --bg-surface: #13131A; --bg-panel: #0E0E14; --bg-elevated: #1A1A22; --bg-input: #111118; --olive-deep: #1A1A22; --olive: #2A2A38; --olive-mid: #3A3A4C; --olive-glow: #6A6A80; --olive-light: #8888A0; --cream: #C8C8D4; --cream-light: #E0E0EA; --cream-dim: #8888A0; --text-primary: #E8E8F0; --text-secondary: #8888A0; --text-muted: #555566; --text-dim: #333340; --text-inverse: #0A0A0E; --positive: #4ADE80; --negative: #F87171; --warning: #FBBF24; --info: #60A5FA; --accent: #C8C8D4; --green: #4ADE80; --red: #F87171; --border: rgba(136,136,160,0.15); --border-subtle: rgba(136,136,160,0.10); --border-strong: rgba(136,136,160,0.30); --border-cream: rgba(200,200,212,0.15); --border-focus: #3A3A4C; --bg-hover: rgba(136,136,160,0.06); /* Short-name overrides (used by gex-dashboard, cme-dashboard, etc.) */ --bg: #0A0A0E; --panel: #111116; --gold: #C8C8D4; --olive: #2A2A38; --text: #E8E8F0; --muted: #555566; --dim: #333340; } /* ── Light theme ──────────────────────────────────────────── */ [data-theme="light"] { --bg-base: #F4F3EE; --bg-card: #FFFFFF; --bg-card-alt: #EBE9E1; --bg-surface: #F9F8F4; --bg-panel: #EFEDE6; --bg-elevated: #FFFFFF; --bg-input: #FFFFFF; --olive-deep: #E8E6DD; --olive: #8A9A78; --olive-mid: #6B7D5A; --olive-glow: #4E6840; --olive-light: #3D5233; --cream: #2C3E28; --cream-light: #1A2818; --cream-dim: #5A6854; --text-primary: #1A1E18; --text-secondary: #5A6854; --text-muted: #8A9A78; --text-dim: #C0BFAE; --text-inverse: #F4F3EE; --positive: #2E7D32; --negative: #C62828; --warning: #F57F17; --info: #1565C0; --accent: #2C3E28; --green: #2E7D32; --red: #C62828; --border: rgba(0,0,0,0.10); --border-subtle: rgba(0,0,0,0.06); --border-strong: rgba(0,0,0,0.18); --border-cream: rgba(44,62,40,0.12); --border-focus: #6B7D5A; --bg-hover: rgba(0,0,0,0.04); /* Short-name overrides (used by gex-dashboard, cme-dashboard, etc.) */ --bg: #F4F3EE; --panel: #EFEDE6; --gold: #2C3E28; --olive: #3D5233; --text: #1A1E18; --muted: #8A9A78; --dim: #C0BFAE; } /* Light theme: noise overlay is too harsh on white */ [data-theme="light"] body::before { opacity: 0.15; } /* Light theme: scrollbar */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-base); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #C0BFAE; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #8A9A78; } /* ── Theme picker ─────────────────────────────────────────── */ .theme-picker { display: flex; align-items: center; gap: 6px; padding: 0 14px; border-left: 1px solid var(--border-subtle); height: 100%; } .theme-picker__btn { width: 16px; height: 16px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, border-color 0.15s; padding: 0; position: relative; } .theme-picker__btn:hover { transform: scale(1.2); } .theme-picker__btn[data-pick="green"] { background: #3D5233; } .theme-picker__btn[data-pick="dark"] { background: #1A1A22; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); } .theme-picker__btn[data-pick="light"] { background: #F4F3EE; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); } .theme-picker__btn.active { border-color: var(--cream); }