/* themes.css — port from FounderOS-DEMO (design tokens + Monolith aesthetic). Design tokens live as CSS vars on :root[data-theme='...']; flipping the attribute re-themes every consumer instantly. Use with: (or dark / light / midnight / ember) Values are read as var(--jv-*) so they don't collide with dashboard.css. */ :root { --jv-ease: cubic-bezier(0.32, 0.72, 0, 1); } /* Mono (Monolith) — default. Flat black, white/grey structure, traffic-light color reserved for status. */ :root, :root[data-theme='mono'] { color-scheme: dark; --jv-bg: #0a0a0a; --jv-bg-2: #0a0a0a; --jv-surface: #0a0a0a; --jv-surface-2: #141414; --jv-surface-3: #1c1c1c; --jv-border: #242424; --jv-border-strong: #3a3a3a; --jv-text: #f2f2f2; --jv-text-2: #9c9c9c; --jv-text-3: #6a6a6a; --jv-accent: #f2f2f2; --jv-accent-2: #d0d0d0; --jv-accent-ink: #0a0a0a; --jv-accent-soft: rgba(242, 242, 242, 0.06); --jv-accent-line: rgba(242, 242, 242, 0.18); --jv-ok: #3df08c; --jv-warn: #ffc53d; --jv-err: #ff6259; --jv-glow: none; } /* Dark — phosphor green terminal (original FounderOS "dark"). */ :root[data-theme='dark'] { color-scheme: dark; --jv-bg: #050807; --jv-bg-2: #070b09; --jv-surface: #0a0f0c; --jv-surface-2: #0f1511; --jv-surface-3: #141c17; --jv-border: #18211b; --jv-border-strong: #243029; --jv-text: #e4efe6; --jv-text-2: #8fa295; --jv-text-3: #54665b; --jv-accent: #3df08c; --jv-accent-2: #35d97e; --jv-accent-ink: #03140a; --jv-accent-soft: rgba(61, 240, 140, 0.08); --jv-accent-line: rgba(61, 240, 140, 0.25); --jv-ok: #3df08c; --jv-warn: #ffc53d; --jv-err: #ff6259; --jv-glow: 0 0 24px rgba(61, 240, 140, 0.18); } /* Light — warm paper + clay-orange accent. */ :root[data-theme='light'] { color-scheme: light; --jv-bg: #ece3d2; --jv-bg-2: #f1ead9; --jv-surface: #f6f0e4; --jv-surface-2: #efe7d6; --jv-surface-3: #e7decb; --jv-border: #ddd3bf; --jv-border-strong: #c9bda4; --jv-text: #2b2722; --jv-text-2: #6f675a; --jv-text-3: #9a9082; --jv-accent: #c96442; --jv-accent-2: #a84e30; --jv-accent-ink: #fdf7ee; --jv-accent-soft: rgba(201, 100, 66, 0.12); --jv-accent-line: rgba(201, 100, 66, 0.32); --jv-ok: #0b8a52; --jv-warn: #b7791f; --jv-err: #c0392b; --jv-glow: 0 1px 3px rgba(43, 39, 34, 0.14); } /* Midnight — deep navy + signal blue. */ :root[data-theme='midnight'] { color-scheme: dark; --jv-bg: #070d1f; --jv-bg-2: #091126; --jv-surface: #0c142e; --jv-surface-2: #111a3a; --jv-surface-3: #172246; --jv-border: #1a2547; --jv-border-strong: #283765; --jv-text: #e8ecf9; --jv-text-2: #93a3cf; --jv-text-3: #5b6d9e; --jv-accent: #5ec9f8; --jv-accent-2: #48b4e6; --jv-accent-ink: #041019; --jv-accent-soft: rgba(94, 201, 248, 0.09); --jv-accent-line: rgba(94, 201, 248, 0.28); --jv-ok: #4ade96; --jv-warn: #fbbf24; --jv-err: #f87171; --jv-glow: 0 0 24px rgba(94, 201, 248, 0.16); } /* Ember — coal + reddish orange. */ :root[data-theme='ember'] { color-scheme: dark; --jv-bg: #0c0806; --jv-bg-2: #100a08; --jv-surface: #140d0a; --jv-surface-2: #1a120d; --jv-surface-3: #221711; --jv-border: #241812; --jv-border-strong: #38251b; --jv-text: #f2e9e2; --jv-text-2: #b39a8c; --jv-text-3: #755f52; --jv-accent: #e35c35; --jv-accent-2: #c94e2c; --jv-accent-ink: #180a05; --jv-accent-soft: rgba(227, 92, 53, 0.1); --jv-accent-line: rgba(227, 92, 53, 0.3); --jv-ok: #4ade96; --jv-warn: #fbbf24; --jv-err: #ff6259; --jv-glow: 0 0 24px rgba(227, 92, 53, 0.2); } /* ── Command Palette (Cmd/Ctrl+K) ──────────────────────────────────────── Isolated under #jv-palette-root so it never leaks into dashboard styles. Colors read var(--jv-*), so the palette re-themes with the rest. */ #jv-palette-root { position: fixed; inset: 0; z-index: 100000; display: none; align-items: flex-start; justify-content: center; padding-top: 14vh; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace; } #jv-palette-root.jv-open { display: flex; } #jv-palette-box { width: 560px; max-width: calc(100vw - 48px); overflow: hidden; border-radius: 10px; border: 1px solid var(--jv-border-strong, #3a3a3a); background: var(--jv-surface, #0a0a0a); box-shadow: 0 24px 80px -16px rgba(0, 0, 0, 0.5); } #jv-palette-input { width: 100%; border: 0; border-bottom: 1px solid var(--jv-border, #242424); background: transparent; padding: 16px 18px; font: inherit; font-size: 14px; color: var(--jv-text, #f2f2f2); outline: none; } #jv-palette-input::placeholder { color: var(--jv-text-3, #6a6a6a); } #jv-palette-list { list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow-y: auto; } #jv-palette-list li { margin: 0; } .jv-palette-item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-radius: 4px; background: transparent; color: var(--jv-text-2, #9c9c9c); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background 120ms var(--jv-ease); } .jv-palette-item.jv-active { background: var(--jv-accent-soft, rgba(242, 242, 242, 0.06)); color: var(--jv-text, #f2f2f2); } .jv-palette-caret { width: 12px; flex-shrink: 0; opacity: 0.6; } .jv-palette-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jv-palette-hint { flex-shrink: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--jv-text-3, #6a6a6a); } .jv-palette-empty { padding: 24px 16px; text-align: center; font-size: 12px; color: var(--jv-text-3, #6a6a6a); } /* ── Toast stack (jvToast) ─────────────────────────────────────────────── Fixed bottom-right, newest on top. Colors read var(--jv-*) so tone flips with the theme. Kept isolated under #jv-toast-stack. */ #jv-toast-stack { position: fixed; right: 16px; bottom: 16px; left: auto; top: auto; z-index: 100001; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; max-width: min(360px, calc(100vw - 32px)); pointer-events: none; font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Consolas', monospace; } .jv-toast { pointer-events: auto; position: relative; overflow: hidden; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--jv-border-strong, #3a3a3a); background: var(--jv-surface-2, #141414); color: var(--jv-text, #f2f2f2); box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.55); cursor: pointer; transform: translateY(0); opacity: 1; transition: opacity 200ms var(--jv-ease), transform 200ms var(--jv-ease); } .jv-toast-out { opacity: 0; transform: translateY(8px); } .jv-toast-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .jv-toast-title { font-size: 13px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } .jv-toast-hint { font-size: 11px; color: var(--jv-text-3, #6a6a6a); text-transform: uppercase; letter-spacing: 0.08em; } .jv-toast-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--jv-accent, #f2f2f2); transform-origin: left center; animation: jv-toast-shrink linear forwards; opacity: 0.55; } @keyframes jv-toast-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* Kind tinting — only left rule + bar */ .jv-toast-ok { border-left: 3px solid var(--jv-ok, #3df08c); } .jv-toast-ok .jv-toast-bar { background: var(--jv-ok, #3df08c); } .jv-toast-warn { border-left: 3px solid var(--jv-warn, #ffc53d); } .jv-toast-warn .jv-toast-bar { background: var(--jv-warn, #ffc53d); } .jv-toast-err { border-left: 3px solid var(--jv-err, #ff6259); } .jv-toast-err .jv-toast-bar { background: var(--jv-err, #ff6259); } .jv-toast-info { border-left: 3px solid var(--jv-accent-line, rgba(242,242,242,0.18)); } /* ── Kbd chip + palette-discover hint ──────────────────────────────────── .jv-kbd renders a subtle keyboard-key chip. #jv-palette-hint is a small bottom-left pill that reveals ⌘K / Ctrl+K until the user opens the palette for the first time. Hidden after dismiss (persisted in localStorage). */ .jv-kbd { display: inline-flex; align-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--jv-border-strong, #3a3a3a); background: var(--jv-surface-3, #1c1c1c); color: var(--jv-text-2, #9c9c9c); font: 500 11px/1 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; letter-spacing: 0.02em; vertical-align: 1px; } #jv-palette-hint { position: fixed; left: 16px; bottom: 16px; z-index: 100000; display: none; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border-radius: 999px; border: 1px solid var(--jv-border, #242424); background: var(--jv-surface-2, #141414); color: var(--jv-text-3, #6a6a6a); font: 11px/1 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity 240ms var(--jv-ease), transform 240ms var(--jv-ease); } #jv-palette-hint.jv-visible { display: inline-flex; opacity: 0.9; transform: translateY(0); } #jv-palette-hint:hover { opacity: 1; } #jv-palette-hint .jv-hint-close { color: var(--jv-text-3, #6a6a6a); padding-left: 4px; font-size: 14px; line-height: 1; }