/* Three theme palettes, switched by `data-theme` on or . * `data-theme="dark"` — original Anthropic-ish dark (default) * `data-theme="blupulse"` — jonathan-pap.github.io look: deep navy + blue/purple * `data-theme="light"` — light counterpart of dark */ :root, :root[data-theme="dark"] { --bg: #0f1419; --bg-soft: #0f1419; --card: #1a2028; --card-hi: rgba(255,255,255,0.04); --border: #2a3441; --text: #e6e9ef; --muted: #8a93a3; --accent: #d97757; --accent-2: #d97757; --green: #4ade80; --blue: #60a5fa; --purple: #a78bfa; --amber: #fbbf24; --pink: #f472b6; --red: #ef4444; --shadow: 0 4px 12px rgba(0,0,0,0.25); --grid-line: #2a3441; --bg-overlay: rgba(26,32,40,0.92); --pill-cli-bg: rgba(96,165,250,0.18); --pill-cli-fg: #60a5fa; --pill-cowork-bg: rgba(244,114,182,0.18); --pill-cowork-fg: #f472b6; } :root[data-theme="blupulse"] { --bg: #070A1A; --bg-soft: #0B1030; --card: rgba(255,255,255,0.04); --card-hi: rgba(255,255,255,0.06); --border: rgba(255,255,255,0.12); --text: rgba(255,255,255,0.92); --muted: rgba(255,255,255,0.60); --accent: #8B5CF6; /* purple accent like the wordmark */ --accent-2: #3B82F6; /* blue secondary */ --green: #34d399; --blue: #3B82F6; --purple: #8B5CF6; --amber: #fbbf24; --pink: #f472b6; --red: #ef4444; --shadow: 0 12px 34px rgba(0,0,0,0.35); --grid-line: rgba(255,255,255,0.08); --bg-overlay: rgba(11,16,48,0.85); --pill-cli-bg: rgba(59,130,246,0.18); --pill-cli-fg: #93c5fd; --pill-cowork-bg: rgba(139,92,246,0.18); --pill-cowork-fg: #c4b5fd; } :root[data-theme="blupulse"] body { background: radial-gradient(1200px 700px at 12% -10%, rgba(59,130,246,0.22), transparent 60%), radial-gradient(1000px 600px at 92% -10%, rgba(139,92,246,0.20), transparent 60%), radial-gradient(1200px 700px at 50% 110%, rgba(59,130,246,0.10), transparent 60%), var(--bg); background-attachment: fixed; } :root[data-theme="blupulse"] body { color: var(--text); } :root[data-theme="blupulse"] .card, :root[data-theme="blupulse"] .df-bar { background: var(--card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } :root[data-theme="blupulse"] h1 { background: linear-gradient(135deg, #3B82F6, #8B5CF6); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme="light"] { --bg: #f6f7fa; --bg-soft: #ffffff; --card: #ffffff; --card-hi: #f1f3f7; --border: #d8dde6; --text: #1a1f2b; --muted: #5c6573; --accent: #b35a3a; --accent-2: #b35a3a; --green: #16a34a; --blue: #2563eb; --purple: #7c3aed; --amber: #b45309; --pink: #be185d; --red: #dc2626; --shadow: 0 2px 6px rgba(15,20,25,0.08); --grid-line: #e2e6ee; --bg-overlay: rgba(255,255,255,0.92); --pill-cli-bg: rgba(37,99,235,0.12); --pill-cli-fg: #2563eb; --pill-cowork-bg: rgba(190,24,93,0.12); --pill-cowork-fg: #be185d; } /* Shared bits that benefit from theme tokens */ .theme-toggle, .currency-toggle, .settings-btn { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; font-family: inherit; font-size: 12px; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .theme-toggle:hover, .currency-toggle:hover, .settings-btn:hover { color: var(--text); border-color: var(--accent); } .currency-rate-input { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; width: 90px; font-family: inherit; font-size: 12px; } /* Three-icon theme picker (used inside settings modal) */ .theme-picker { display: inline-flex; gap: 6px; } .theme-pill { background: var(--bg-soft); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s; } .theme-pill:hover { color: var(--text); border-color: var(--accent); transform: translateY(-1px); } .theme-pill.active { color: var(--accent); border-color: var(--accent); background: rgba(217, 119, 87, 0.08); } :root[data-theme="blupulse"] .theme-pill.active { background: rgba(139, 92, 246, 0.12); } :root[data-theme="light"] .theme-pill.active { background: rgba(179, 90, 58, 0.10); } /* Settings modal */ .settings-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .settings-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 16px; } .settings-overlay.open { display: flex; } .settings-panel { /* Solid surface — translucent --card lets too much background through */ background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 24px; min-width: 320px; max-width: 480px; width: 100%; box-shadow: var(--shadow); color: var(--text); } :root[data-theme="blupulse"] .settings-panel { /* BluPulse needs an explicit opaque navy or text bleeds through */ background: #0e1430; } :root[data-theme="dark"] .settings-panel { background: #1a2028; } :root[data-theme="light"] .settings-panel { background: #ffffff; } .settings-panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .settings-panel header h3 { font-size: 16px; margin: 0; } .settings-panel .close { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; } .settings-panel .close:hover { color: var(--text); } .settings-row { margin-bottom: 18px; } .settings-row:last-child { margin-bottom: 0; } .settings-row .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .settings-row .row-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }