/* ── Light Theme Override ───────────────────────────────────────────────── */ /* Applied when is set */ html[data-theme="light"] { /* Core palette — warm off-white background, dark navy text */ --background: 220 20% 97%; --foreground: 220 25% 12%; --card: 220 20% 94%; --card-foreground: 220 25% 12%; --popover: 0 0% 100%; --popover-foreground: 220 25% 12%; --primary: 142 55% 32%; --primary-foreground: 0 0% 100%; --secondary: 220 15% 88%; --secondary-foreground: 220 25% 20%; --muted: 220 15% 90%; --muted-foreground: 220 10% 45%; --accent: 142 55% 32%; --accent-foreground: 0 0% 100%; --destructive: 0 72% 45%; --destructive-foreground: 0 0% 100%; --border: 220 15% 82%; --input: 220 15% 82%; --ring: 142 55% 32%; /* Terminal-specific tokens */ --term-green: 142 55% 28%; --term-red: 0 65% 45%; --term-amber: 38 80% 38%; --term-cyan: 196 65% 38%; --term-dim: 220 10% 50%; --term-bg: 220 20% 97%; --term-surface: 220 20% 92%; --term-border: 220 15% 80%; /* Shadcn sidebar tokens */ --sidebar: 220 20% 94%; --sidebar-foreground: 220 25% 12%; --sidebar-border: 220 15% 82%; --sidebar-ring: 142 55% 32%; } /* Override hard-coded dark background colors used inline in components */ html[data-theme="light"] .bg-\[hsl\(220\,20\%\,3\%\)\], html[data-theme="light"] .bg-\[hsl\(220\,20\%\,4\%\)\] { background-color: hsl(220 20% 97%) !important; } /* Main container background */ html[data-theme="light"] .h-screen.flex.flex-col { background-color: hsl(220 20% 97%) !important; } /* Tab bar top border area */ html[data-theme="light"] .flex.border-b { background-color: hsl(220 20% 94%); } /* Scanline — much subtler in light mode */ html[data-theme="light"] .scanline:after { background: linear-gradient( to right, transparent, hsl(142 55% 28% / 0.04), transparent ) !important; } /* Glow effects — tone them down in light mode */ html[data-theme="light"] .glow-green { text-shadow: 0 0 6px hsl(142 55% 28% / 0.25) !important; } html[data-theme="light"] .glow-red { text-shadow: 0 0 6px hsl(0 65% 45% / 0.25) !important; } html[data-theme="light"] .glow-amber { text-shadow: 0 0 6px hsl(38 80% 38% / 0.25) !important; } /* ── Timeframe Range Toggle Buttons ────────────────────────────────────────── */ .tf-range-group { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: 8px; } .tf-btn { background: transparent; border: 1px solid hsl(var(--term-border)); color: hsl(var(--term-dim)); font-family: inherit; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; white-space: nowrap; line-height: 1.6; } .tf-btn:hover { color: hsl(var(--term-green)); border-color: hsl(var(--term-green) / 0.4); } .tf-btn--active { color: hsl(var(--term-green)) !important; border-color: hsl(var(--term-green) / 0.6) !important; background: hsl(var(--term-green) / 0.08) !important; } /* Light mode overrides for range buttons */ html[data-theme="light"] .tf-btn:hover { color: hsl(var(--term-green)); border-color: hsl(var(--term-green) / 0.5); background: hsl(var(--term-green) / 0.07); } html[data-theme="light"] .tf-btn--active { color: hsl(var(--term-green)) !important; border-color: hsl(var(--term-green) / 0.6) !important; background: hsl(var(--term-green) / 0.1) !important; } /* ── Theme Toggle Button ─────────────────────────────────────────────────── */ #theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: transparent; border: 1px solid hsl(var(--term-border)); color: hsl(var(--term-dim)); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; font-family: inherit; white-space: nowrap; flex-shrink: 0; } #theme-toggle:hover { color: hsl(var(--term-green)); border-color: hsl(var(--term-green) / 0.5); background: hsl(var(--term-green) / 0.06); } #theme-toggle svg { width: 11px; height: 11px; flex-shrink: 0; }