/** * DealDesk · Signal · Saudi theme override * v0.1 · May 2026 * * NON-DESTRUCTIVE override. No existing CSS is modified. * Activates when has class="signal-theme". * * Install: * 1. Drop this file at the repo root: /signal-theme.css * 2. In index.html, immediately after the closing on line 1209, add: * * 3. Change line 2: * to: * 4. Optionally update theme-color meta on line 8 from #0f1117 to #FAFAF6 * * Toggle: remove the class on to revert instantly. */ /* ============================================================ 1. SIGNAL TOKENS · re-define on :root for the override scope ============================================================ */ html.signal-theme { --bg: #FAFAF6; --panel: #FFFFFF; --panel-2: #F4F4EE; --text: #1F2328; --text-dim: #5E6471; --text-muted: #9AA0A6; --border: #DDDCD3; --border-soft: #ECECE5; --primary: #6B8E7A; --primary-hover: #5A7C68; --primary-soft: #EBF2EE; --primary-deep: #3D5C4A; --success: #6B8E7A; --success-soft: #EBF2EE; --success-deep: #3D5C4A; --warning: #C0935D; --warning-soft: #F4ECDD; --warning-deep: #7A5A2D; --danger: #B66B62; --danger-soft: #F4E1DE; --danger-deep: #8C453E; --info: #6B7B95; --info-soft: #E9EFF4; --info-deep: #3F5871; --closing: #8B7494; --closing-soft: #F0EBF4; --closing-deep: #5A4671; --portfolio: #8B8470; --portfolio-soft: #F1F0EB; --portfolio-deep: #5E5A4A; --font-sans: "GT America", "Söhne", "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-arabic: "IBM Plex Sans Arabic", "Tajawal", "Noto Sans Arabic", system-ui, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", monospace; background: var(--bg); color: var(--text); font-family: var(--font-sans); } html.signal-theme body { background: var(--bg) !important; color: var(--text) !important; font-family: var(--font-sans) !important; font-feature-settings: "tnum", "ss01" !important; } /* ============================================================ 2. HEADER · kill the purple gradient, add monogram + period mark ============================================================ */ html.signal-theme #header { background: var(--panel) !important; background-image: none !important; border-bottom: 0.5px solid var(--border-soft) !important; padding: 14px 24px !important; } html.signal-theme #header .logo { background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; font-size: 1.05rem !important; font-weight: 500 !important; letter-spacing: -0.01em !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } html.signal-theme #header .logo::before { content: "D"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; background: var(--primary); color: #FFFFFF; font-size: 12px; font-weight: 500; } html.signal-theme #header .logo::after { content: "."; color: var(--primary); font-weight: 500; margin-left: 1px; } html.signal-theme #header .subtitle { font-size: 0.7rem !important; color: var(--text-muted) !important; margin-top: 2px; letter-spacing: 0.04em; } html.signal-theme #header .subtitle::after { content: " · مكتب الصفقات"; margin-left: 6px; color: var(--text-muted); } /* ============================================================ 3. STATUS PILLS / HEADER PILLS ============================================================ */ html.signal-theme .h-pill { background: var(--panel-2) !important; border: 0.5px solid var(--border-soft) !important; color: var(--text-dim) !important; font-size: 0.7rem !important; padding: 4px 10px !important; border-radius: 999px !important; } html.signal-theme .h-pill b { color: var(--text) !important; font-weight: 500 !important; } html.signal-theme #status-dot { background: var(--primary) !important; } html.signal-theme #currency-toggle { border-color: var(--border-soft) !important; color: var(--text-muted) !important; background: var(--panel) !important; border-radius: 999px !important; } html.signal-theme #currency-toggle span:last-child { color: var(--text) !important; } html.signal-theme #header-signin-btn { background: var(--text) !important; color: var(--bg) !important; border-color: var(--text) !important; border-radius: 8px !important; font-weight: 500 !important; } html.signal-theme #header-admin-btn { background: var(--warning-soft) !important; color: var(--warning-deep) !important; border-radius: 999px !important; font-weight: 500 !important; } html.signal-theme #avatar-btn { background: var(--panel-2) !important; border: 0.5px solid var(--border-soft) !important; color: var(--text) !important; border-radius: 999px !important; } html.signal-theme #avatar-circle { background: var(--primary-soft) !important; color: var(--primary-deep) !important; } /* ============================================================ 4. SIDEBAR ============================================================ */ html.signal-theme #sidebar { background: var(--panel-2) !important; border-right: 0.5px solid var(--border-soft) !important; } html.signal-theme #sidebar-header { border-bottom: 0.5px solid var(--border-soft) !important; } html.signal-theme #sidebar-header h3 { color: var(--text-muted) !important; font-weight: 500 !important; letter-spacing: 0.16em !important; } html.signal-theme #add-deal-btn { background: var(--text) !important; color: var(--bg) !important; font-weight: 500 !important; border-radius: 8px !important; padding: 5px 12px !important; } html.signal-theme #add-deal-btn:hover { background: var(--primary-deep) !important; } html.signal-theme .deal-item { background: transparent !important; border-color: transparent !important; border-radius: 10px !important; } html.signal-theme .deal-item:hover { background: var(--panel) !important; border-color: var(--border-soft) !important; } html.signal-theme .deal-item.active { background: var(--panel) !important; border-color: var(--border) !important; box-shadow: inset 3px 0 0 var(--primary) !important; } html.signal-theme .deal-name { color: var(--text) !important; font-weight: 500 !important; } html.signal-theme .deal-meta { color: var(--text-muted) !important; } html.signal-theme #deal-list-fade { background: linear-gradient(to top, var(--panel-2), transparent) !important; } /* ============================================================ 5. STAGE CHIPS ============================================================ */ html.signal-theme .deal-stage { font-weight: 500 !important; letter-spacing: 0 !important; border-radius: 999px !important; } html.signal-theme .stage-IOI { background: var(--warning-soft) !important; color: var(--warning-deep) !important; } html.signal-theme .stage-LOI { background: var(--primary-soft) !important; color: var(--primary-deep) !important; } html.signal-theme .stage-DD { background: var(--info-soft) !important; color: var(--info-deep) !important; } html.signal-theme .stage-Closing { background: var(--closing-soft) !important; color: var(--closing-deep) !important; } html.signal-theme .stage-Portfolio { background: var(--portfolio-soft) !important; color: var(--portfolio-deep) !important; } html.signal-theme .stage-Declined { background: var(--danger-soft) !important; color: var(--danger-deep) !important; } /* ============================================================ 6. NAV TABS ============================================================ */ html.signal-theme #nav-tabs { background: var(--bg) !important; border-bottom: 0.5px solid var(--border-soft) !important; } html.signal-theme .tab-btn { color: var(--text-dim) !important; font-weight: 400 !important; font-size: 0.83rem !important; } html.signal-theme .tab-btn:hover { color: var(--text) !important; } html.signal-theme .tab-btn.active { color: var(--text) !important; font-weight: 500 !important; border-bottom-color: var(--primary) !important; } html.signal-theme .sub-tab { color: var(--text-dim) !important; } html.signal-theme .sub-tab.active, html.signal-theme .sub-tab:hover { color: var(--primary-deep) !important; } /* ============================================================ 7. BUTTONS ============================================================ */ html.signal-theme .action-btn, html.signal-theme #send-btn, html.signal-theme button[id$="-send-btn"] { background: var(--primary) !important; color: #FFFFFF !important; font-weight: 500 !important; border-radius: 8px !important; border: none !important; } html.signal-theme .action-btn:hover, html.signal-theme #send-btn:hover { background: var(--primary-hover) !important; } html.signal-theme .action-btn:disabled, html.signal-theme #send-btn:disabled { background: var(--border) !important; color: var(--text-muted) !important; } html.signal-theme .action-btn.secondary { background: transparent !important; border: 0.5px solid var(--border) !important; color: var(--text) !important; } html.signal-theme .action-btn.secondary:hover { background: var(--panel-2) !important; color: var(--text) !important; } html.signal-theme .copy-btn { background: var(--panel-2) !important; border-color: var(--border) !important; color: var(--text-dim) !important; } html.signal-theme .copy-btn:hover { border-color: var(--primary) !important; color: var(--primary-deep) !important; } /* ============================================================ 8. FORMS ============================================================ */ html.signal-theme .form-input, html.signal-theme .form-select, html.signal-theme .form-textarea, html.signal-theme #chat-input, html.signal-theme .mode-select { background: var(--panel) !important; border: 0.5px solid var(--border) !important; color: var(--text) !important; border-radius: 8px !important; } html.signal-theme .form-input:focus, html.signal-theme .form-select:focus, html.signal-theme .form-textarea:focus, html.signal-theme #chat-input:focus, html.signal-theme .mode-select:focus, html.signal-theme .mode-select:hover { border-color: var(--primary) !important; } html.signal-theme .form-label { color: var(--text-dim) !important; font-weight: 500 !important; letter-spacing: 0.04em !important; } /* ============================================================ 9. PANELS / RESULT BOXES / DASH BLOCKS ============================================================ */ html.signal-theme .result-box, html.signal-theme .dash-block { background: var(--panel) !important; border: 0.5px solid var(--border-soft) !important; border-radius: 12px !important; color: var(--text) !important; } html.signal-theme .result-box h2, html.signal-theme .result-box h3, html.signal-theme .msg.assistant h2, html.signal-theme .msg.assistant h3 { color: var(--primary-deep) !important; } html.signal-theme .panel-title { color: var(--text) !important; font-weight: 500 !important; } html.signal-theme .panel-subtitle { color: var(--text-dim) !important; } /* ============================================================ 10. CHAT MESSAGES ============================================================ */ html.signal-theme .msg.user { background: var(--primary-soft) !important; color: var(--primary-deep) !important; } html.signal-theme .msg.assistant { background: var(--panel) !important; border-color: var(--border-soft) !important; color: var(--text) !important; } html.signal-theme .msg.system { background: var(--panel-2) !important; color: var(--text-dim) !important; border-color: var(--border-soft) !important; } html.signal-theme .thinking-indicator .ti-dot { background: var(--primary) !important; } html.signal-theme .msg-sources { border-top-color: var(--border-soft) !important; color: var(--text-muted) !important; } /* ============================================================ 11. UPLOAD ZONE ============================================================ */ html.signal-theme .upload-zone { border: 1.5px dashed var(--border) !important; background: var(--panel-2) !important; } html.signal-theme .upload-zone:hover, html.signal-theme .upload-zone.drag { border-color: var(--primary) !important; background: var(--primary-soft) !important; } html.signal-theme .upload-text { color: var(--text-dim) !important; } html.signal-theme .upload-text b { color: var(--primary-deep) !important; } /* ============================================================ 12. TAGS (multi-select chips) ============================================================ */ html.signal-theme .tag { background: var(--panel) !important; border: 0.5px solid var(--border) !important; color: var(--text-dim) !important; } html.signal-theme .tag:hover { border-color: var(--primary) !important; color: var(--primary-deep) !important; background: var(--panel) !important; } html.signal-theme .tag.selected { background: var(--primary-soft) !important; color: var(--primary-deep) !important; border-color: var(--primary) !important; } html.signal-theme .tag::before { border-color: var(--border) !important; } html.signal-theme .tag.selected::before { background: var(--primary) !important; border-color: var(--primary) !important; } /* ============================================================ 13. WORKFLOW CARDS (chat welcome) ============================================================ */ html.signal-theme .chat-welcome-shell { background: var(--panel-2) !important; border-color: var(--border-soft) !important; border-style: solid !important; } html.signal-theme .wf-card { background: var(--panel) !important; border: 0.5px solid var(--border-soft) !important; border-radius: 12px !important; } html.signal-theme .wf-card:hover { border-color: var(--primary) !important; background: var(--panel) !important; transform: none !important; box-shadow: 0 0 0 1px var(--primary) !important; } html.signal-theme .wf-card .wf-icon { color: var(--primary) !important; font-weight: 500 !important; } html.signal-theme .wf-card .wf-title { color: var(--text) !important; font-weight: 500 !important; } html.signal-theme .wf-card .wf-desc { color: var(--text-dim) !important; } /* ============================================================ 14. EMPTY STATES ============================================================ */ html.signal-theme .empty-state { background: var(--panel-2) !important; border-color: var(--border-soft) !important; border-style: solid !important; } html.signal-theme .empty-state .es-icon { color: var(--text-muted) !important; } html.signal-theme .empty-state .es-title { color: var(--text) !important; } html.signal-theme .empty-state .es-cta { background: var(--primary) !important; color: #FFFFFF !important; font-weight: 500 !important; } html.signal-theme .empty-state .es-cta.secondary { background: transparent !important; border-color: var(--border) !important; color: var(--text) !important; } /* ============================================================ 15. FIELD HELP (info dot) ============================================================ */ html.signal-theme .field-help { background: var(--panel-2) !important; border: 0.5px solid var(--border-soft) !important; color: var(--text-muted) !important; font-weight: 500 !important; } html.signal-theme .field-help:hover { background: var(--primary) !important; color: #FFFFFF !important; border-color: var(--primary) !important; } /* ============================================================ 16. TABLES (LBO, comps, etc.) ============================================================ */ html.signal-theme .lbo-table, html.signal-theme table { font-feature-settings: "tnum", "ss01" !important; font-variant-numeric: tabular-nums !important; } html.signal-theme .lbo-table th, html.signal-theme table th { color: var(--text-dim) !important; font-weight: 500 !important; border-bottom: 0.5px solid var(--border-soft) !important; } html.signal-theme .lbo-table td, html.signal-theme table td { color: var(--text) !important; border-bottom: 0.5px solid var(--border-soft) !important; } /* ============================================================ 17. MODALS ============================================================ */ html.signal-theme #auth-overlay, html.signal-theme #access-overlay, html.signal-theme [id$="-overlay"] { background: rgba(31, 35, 40, 0.45) !important; } html.signal-theme #auth-card, html.signal-theme [id$="-card"] { background: var(--panel) !important; border: 0.5px solid var(--border-soft) !important; border-radius: 14px !important; color: var(--text) !important; } /* ============================================================ 18. SCROLLBARS ============================================================ */ html.signal-theme ::-webkit-scrollbar-track { background: var(--panel-2) !important; } html.signal-theme ::-webkit-scrollbar-thumb { background: var(--border) !important; border-radius: 3px !important; } html.signal-theme ::-webkit-scrollbar-thumb:hover { background: var(--text-muted) !important; } /* ============================================================ 19. NUMERIC TABULAR LOCK · for any element rendering money/metrics ============================================================ */ html.signal-theme [class*="num"], html.signal-theme .numeric, html.signal-theme .stat-value, html.signal-theme .kpi-value, html.signal-theme [data-numeric], html.signal-theme .lbo-result, html.signal-theme .price, html.signal-theme .amount { font-feature-settings: "tnum", "ss01" !important; font-variant-numeric: tabular-nums !important; } /* ============================================================ 20. BILINGUAL NUMERIC SHIM · use data-numeric-ar="٢٫١B" attr ============================================================ */ html.signal-theme [data-numeric-ar]::after { content: " · " attr(data-numeric-ar); color: var(--text-muted); font-size: 0.78em; font-weight: 400; margin-left: 4px; letter-spacing: 0; } /* ============================================================ 21. COMPLIANCE FOOTER · new component, only renders if added ============================================================ */ html.signal-theme .signal-compliance-footer { display: flex; justify-content: space-between; align-items: center; padding: 8px 24px; border-top: 0.5px solid var(--border-soft); background: var(--panel-2); font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.04em; flex-shrink: 0; } html.signal-theme .signal-compliance-pills { display: inline-flex; gap: 6px; } html.signal-theme .signal-compliance-pills span { padding: 3px 9px; background: var(--panel); border: 0.5px solid var(--border); border-radius: 999px; color: var(--text-dim); font-size: 0.6rem; letter-spacing: 0.08em; } /* ============================================================ 22. REMOVE RESIDUAL BLUE-PURPLE GRADIENTS ============================================================ */ html.signal-theme #header, html.signal-theme #header *, html.signal-theme .logo { /* Targeted: only the header logo zone. Charts and visualizations elsewhere keep their inline styles. */ } /* Force header gradient off only — leave chart SVGs alone */ html.signal-theme #header[style*="gradient"], html.signal-theme #header div[style*="gradient"] { background-image: none !important; background: var(--panel) !important; } /* ============================================================ 23. NOSCRIPT & MISC ============================================================ */ html.signal-theme .noscript-msg { background: var(--warning-soft) !important; color: var(--warning-deep) !important; border-bottom: 0.5px solid var(--border-soft) !important; } /* ============================================================ Signal v0.2 additions — append to /signal-theme.css Active-deal hero card · capital structure strip ============================================================ */ /* Hero host — only shows when activeDealId is set */ html.signal-theme .signal-hero-host { margin-bottom: 18px; } /* Hero card */ html.signal-theme .signal-hero-card { background: var(--panel); border: 0.5px solid var(--border-soft); border-radius: 14px; padding: 24px 26px; } html.signal-theme .signal-hero-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; } /* Tag chip with stage indicator */ html.signal-theme .signal-hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px; background: var(--primary-soft); color: var(--primary-deep); font-size: 0.7rem; border-radius: 999px; margin-bottom: 14px; letter-spacing: 0.02em; font-weight: 500; } html.signal-theme .signal-hero-tag .dot { color: var(--primary); opacity: 0.55; font-weight: 400; } html.signal-theme .signal-hero-tag .signal-stage-chip { margin-left: 4px; font-size: 0.65rem; padding: 2px 8px; border-radius: 999px; background: var(--panel); color: var(--text-dim); border: 0.5px solid var(--border-soft); font-weight: 500; letter-spacing: 0.04em; } /* Stage-specific chip colors inside hero — overrides the soft pastels with tighter ones since the hero already sits on a primary-soft chip. */ html.signal-theme .signal-hero-tag .signal-stage-chip.stage-IOI { background: var(--warning-soft); color: var(--warning-deep); } html.signal-theme .signal-hero-tag .signal-stage-chip.stage-LOI { background: var(--primary-soft); color: var(--primary-deep); } html.signal-theme .signal-hero-tag .signal-stage-chip.stage-DD { background: var(--info-soft); color: var(--info-deep); } html.signal-theme .signal-hero-tag .signal-stage-chip.stage-Closing{ background: var(--closing-soft); color: var(--closing-deep); } html.signal-theme .signal-hero-tag .signal-stage-chip.stage-Portfolio{ background: var(--portfolio-soft); color: var(--portfolio-deep); } html.signal-theme .signal-hero-tag .signal-stage-chip.stage-Declined{ background: var(--danger-soft); color: var(--danger-deep); } /* Headline */ html.signal-theme .signal-hero-h1 { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.18; color: var(--text); margin: 0 0 4px; } /* Arabic transliteration line under headline */ html.signal-theme .signal-hero-ar { font-size: 0.85rem; color: var(--text-dim); margin: 0 0 12px; letter-spacing: 0.02em; font-family: var(--font-arabic), var(--font-sans); } /* Sub paragraph */ html.signal-theme .signal-hero-sub { font-size: 0.85rem; color: var(--text-dim); margin: 0 0 16px; max-width: 380px; line-height: 1.55; } /* CTAs */ html.signal-theme .signal-hero-cta { display: flex; gap: 8px; align-items: center; } html.signal-theme .signal-btn { font-size: 0.83rem; padding: 10px 16px; border-radius: 8px; border: 0.5px solid var(--primary); background: var(--primary); color: #FFFFFF; font-weight: 500; cursor: pointer; transition: background 0.12s; font-family: inherit; } html.signal-theme .signal-btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); } html.signal-theme .signal-btn.alt { background: transparent; color: var(--text); border-color: var(--border); } html.signal-theme .signal-btn.alt:hover { background: var(--panel-2); color: var(--text); } /* Right-side meta column */ html.signal-theme .signal-hero-meta { text-align: right; font-size: 0.72rem; color: var(--text-muted); line-height: 1.7; min-width: 120px; } html.signal-theme .signal-hero-meta-lab { font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; font-weight: 500; } html.signal-theme .signal-hero-meta-val { font-size: 1.5rem; font-weight: 500; color: var(--text); letter-spacing: -0.015em; line-height: 1.1; margin-bottom: 6px; font-feature-settings: "tnum", "ss01"; font-variant-numeric: tabular-nums; } html.signal-theme .signal-hero-meta-line { font-size: 0.72rem; color: var(--text-dim); } /* Capital structure strip */ html.signal-theme .signal-cap-strip { margin-top: 20px; padding-top: 18px; border-top: 0.5px solid var(--border-soft); } html.signal-theme .signal-cap-lab { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; color: var(--text-dim); margin-bottom: 10px; gap: 12px; flex-wrap: wrap; } html.signal-theme .signal-cap-lab .ar { color: var(--text-muted); font-size: 0.66rem; font-family: var(--font-arabic), var(--font-sans); } html.signal-theme .signal-cap-total { font-size: 0.66rem; color: var(--text-muted); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } html.signal-theme .signal-cap-stack { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #F2F1EB; } html.signal-theme .signal-cap-stack span { display: block; height: 100%; } html.signal-theme .signal-cap-leg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; margin-top: 12px; font-size: 0.72rem; color: var(--text-dim); } html.signal-theme .signal-cap-leg > span { display: inline-flex; align-items: center; flex-wrap: wrap; } html.signal-theme .signal-cap-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: middle; flex: none; } html.signal-theme .signal-cap-leg b { color: var(--text); font-weight: 500; margin-left: 4px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; } html.signal-theme .signal-cap-leg .sk .ar { color: var(--primary-deep); font-size: 0.7rem; margin-left: 4px; font-family: var(--font-arabic), var(--font-sans); } /* Mobile: collapse to single column */ @media (max-width: 720px) { html.signal-theme .signal-hero-row { grid-template-columns: 1fr; } html.signal-theme .signal-hero-meta { text-align: left; border-top: 0.5px solid var(--border-soft); padding-top: 14px; } html.signal-theme .signal-cap-leg { grid-template-columns: 1fr; } } /* ============================================================ SIGNAL THEME · dark variant v0.2.1 hotfix · May 2026 ============================================================ The existing toggleTheme() in app.js adds/removes data-theme="light" on . Pre-fix, both states rendered Signal Light because every Signal rule was scoped to html.signal-theme without distinguishing the data-theme value. This file re-defines every brand token under html.signal-theme:not([data-theme="light"]) so the existing toggle now flips between Signal Light (paper) and Signal Dark (warm graphite). Zero JS changes. Append to /signal-theme.css. Specificity is one level higher than the v0.1 selectors, so Light rules still win when data-theme="light" is set, and Dark rules win when it isn't. ============================================================ */ html.signal-theme:not([data-theme="light"]) { /* Surfaces — warm graphite, never cool blue-black */ --bg: #181613; --panel: #1F1D19; --panel-2: #252320; /* Text — warm cream family */ --text: #ECE4D2; --text-dim: #9A9285; --text-muted: #6E6457; /* Borders */ --border: #3A3631; --border-soft: #2A2724; /* Primary — sage shifted brighter for dark contrast */ --primary: #7FA48E; --primary-hover: #98B8A4; --primary-soft: #2A3530; --primary-deep: #B8D4C2; /* Semantic — same hue families as Light, adjusted for dark surface */ --success: #7FA48E; --success-soft: #2A3530; --success-deep: #B8D4C2; --warning: #D4A872; --warning-soft: #3A2D1A; --warning-deep: #E5C394; --danger: #C9847B; --danger-soft: #36251F; --danger-deep: #E0A39B; --info: #8A99B0; --info-soft: #1F2A36; --info-deep: #B0BBCB; --closing: #B49AC4; --closing-soft: #2D2436; --closing-deep: #CFBADD; --portfolio: #B5AE9D; --portfolio-soft: #2A2823; --portfolio-deep: #D2CDBE; } /* ------------------------------------------------------------ Hardcoded values in v0.1/v0.2 that don't auto-flip via vars. Each rule below pairs with a hardcoded hex from signal-theme.css that needs a warm-graphite counterpart in dark mode. ------------------------------------------------------------ */ /* Capital structure stack track (was hardcoded #F2F1EB paper-soft in v0.2) */ html.signal-theme:not([data-theme="light"]) .signal-cap-stack { background: var(--panel-2) !important; } /* Avatar menu / notification panel / global search dropdown surface */ html.signal-theme:not([data-theme="light"]) #avatar-menu, html.signal-theme:not([data-theme="light"]) #notif-panel, html.signal-theme:not([data-theme="light"]) #global-search-results { background: var(--panel) !important; border-color: var(--border-soft) !important; color: var(--text) !important; } /* Avatar menu items hover */ html.signal-theme:not([data-theme="light"]) .am-item:hover { background: var(--panel-2) !important; color: var(--text) !important; } /* Greeting / onboarding cards (chat-welcome-shell uses inline rgba) */ html.signal-theme:not([data-theme="light"]) .chat-welcome-shell, html.signal-theme:not([data-theme="light"]) #onboarding-card, html.signal-theme:not([data-theme="light"]) #dash-onboarding { background: var(--panel-2) !important; } /* Currency banner — keep semantic warning palette but in dark tones */ html.signal-theme:not([data-theme="light"]) #currency-banner, html.signal-theme:not([data-theme="light"]) [id$="-currency-banner"] { background: var(--warning-soft) !important; color: var(--warning-deep) !important; border-color: var(--warning) !important; } /* Modal/overlay backdrop — slightly more opaque on dark */ html.signal-theme:not([data-theme="light"]) #auth-overlay, html.signal-theme:not([data-theme="light"]) #access-overlay, html.signal-theme:not([data-theme="light"]) [id$="-overlay"] { background: rgba(0, 0, 0, 0.6) !important; } /* Code/keyboard pills (#global-search-kbd etc.) */ html.signal-theme:not([data-theme="light"]) #global-search-kbd { background: var(--panel-2) !important; color: var(--text-dim) !important; border-color: var(--border-soft) !important; } /* Panel-specific dark-mode hardcoded values that survive in app.js inline styles (chat-welcome-shell uses rgba(96,165,250,0.04)) */ html.signal-theme:not([data-theme="light"]) [style*="rgba(96,165,250"] { background-color: var(--primary-soft) !important; } /* Inline-styled white card backgrounds in original code */ html.signal-theme:not([data-theme="light"]) [style*="background:#fff"], html.signal-theme:not([data-theme="light"]) [style*="background: #fff"], html.signal-theme:not([data-theme="light"]) [style*="background:#FFFFFF"], html.signal-theme:not([data-theme="light"]) [style*="background: #FFFFFF"] { background-color: var(--panel) !important; } /* Score-pill colors stay semantic in dark mode (they're status colors) */ html.signal-theme:not([data-theme="light"]) .score-good { background: var(--success-soft) !important; color: var(--success-deep) !important; } html.signal-theme:not([data-theme="light"]) .score-mid { background: var(--warning-soft) !important; color: var(--warning-deep) !important; } html.signal-theme:not([data-theme="light"]) .score-bad { background: var(--danger-soft) !important; color: var(--danger-deep) !important; } /* Sticky deal header (top of any deal-specific panel) */ html.signal-theme:not([data-theme="light"]) #sticky-deal-header { background: var(--panel) !important; border-bottom: 0.5px solid var(--border-soft) !important; color: var(--text) !important; } /* Compliance footer, when added — pills against dark background */ html.signal-theme:not([data-theme="light"]) .signal-compliance-footer { background: var(--panel-2); border-top: 0.5px solid var(--border-soft); color: var(--text-muted); } html.signal-theme:not([data-theme="light"]) .signal-compliance-pills span { background: var(--panel); border: 0.5px solid var(--border); color: var(--text-dim); } /* Theme-color meta cannot be CSS-driven; the existing toggleTheme() in app.js handles updating the meta tag. With the override active and data-theme set, the meta will reflect whatever app.js chose. If app.js doesn't update it, the value stays #FAFAF6 (light) — minor cosmetic. To handle it client-side, add this to your toggleTheme() if you want browser chrome to follow: document.querySelector('meta[name="theme-color"]').content = document.documentElement.getAttribute('data-theme') === 'light' ? '#FAFAF6' : '#181613'; */