:root { --active-item: #1E40AF; --sidebar-bg: #0F172A; --sidebar-text: #94A3B8; --sidebar-text-active: #ffffff; --bg: #0F172A; --card-bg: #1E293B; --card-border: #334155; --text: #E2E8F0; --text-muted: #94A3B8; /* Semantic colors ported exactly from JavaScript.html's APP_COLORS (the legacy app's single source of truth for dynamically-assigned status colors) plus each color's class-based dark-mode swap from Styles.html (.u-success/.u-danger/.u-c-d97706 etc). Previously these three were flat, invented hex values (#22C55E/#F59E0B/#EF4444) that matched nothing in legacy and never swapped for dark mode. */ --success: #34D399; --warning: #FBBF24; --danger: #F87171; /* Styles.html .u-faint - the inverse pair of --text-muted (u-muted): faint is the *lighter* gray in light mode but the *darker* gray in dark mode, unlike every other swapping color in this file. */ --text-faint: #64748B; /* Styles.html .u-label-text */ --label-text: #CBD5E1; --bullet-track: #334155; /* Accent-on-text/fill/stroke color pair (Styles.html: .u-c-1e40af, .sparkline-dot, .market-tab-active, .mortgage-trend-line-30, etc.) - legacy swaps #1E40AF (light) for the lighter #60A5FA in dark mode specifically for contrast (the darker navy reads poorly as text/a thin line against a dark background, unlike as a solid button fill, which is why --active-item itself does NOT swap). Every one of these elements had been wired to --active-item directly, so it never got the swap and stayed the low-contrast light-mode navy in dark mode. */ --accent-text: #60A5FA; /* "Soft box" secondary card tint (Styles.html: .u-soft-box) - a distinct third tier from --bg (page) and --card-bg (primary card), used for nested cards like the market metric mini-cards and the Market Insight callout. Was wired to --bg directly, which made these blend flat into the page instead of reading as a separate card. */ --soft-bg: #243044; --soft-border: #334155; } @media (prefers-color-scheme: light) { :root { --bg: #F8FAFC; --card-bg: #ffffff; --card-border: #E5E7EB; --text: #0F172A; --text-muted: #64748B; --bullet-track: #E2E8F0; --accent-text: #1E40AF; --soft-bg: #F8FAFC; --soft-border: #E5E7EB; --success: #059669; --warning: #D97706; --danger: #DC2626; --text-faint: #94A3B8; --label-text: #475569; } } /* Manual dark-mode override (task #83) - wins over the OS-preference media queries above via attribute-selector specificity (0,2,0 vs 0,1,0), not source order, so it holds regardless of which one is declared first or what the OS actually prefers. Set on by applyTheme()/toggleDarkMode() in app.js once Kenny has an explicit dark_mode setting saved - absence of the attribute (no manual choice made yet) leaves the two @media blocks above as the only signal, i.e. OS preference is still the default. Values are the exact same pair already defined above, just made attribute- addressable instead of purely media-query-addressable. */ :root[data-theme="dark"] { --bg: #0F172A; --card-bg: #1E293B; --card-border: #334155; --text: #E2E8F0; --text-muted: #94A3B8; --success: #34D399; --warning: #FBBF24; --danger: #F87171; --text-faint: #64748B; --label-text: #CBD5E1; --bullet-track: #334155; --accent-text: #60A5FA; --soft-bg: #243044; --soft-border: #334155; } :root[data-theme="light"] { --bg: #F8FAFC; --card-bg: #ffffff; --card-border: #E5E7EB; --text: #0F172A; --text-muted: #64748B; --bullet-track: #E2E8F0; --accent-text: #1E40AF; --soft-bg: #F8FAFC; --soft-border: #E5E7EB; --success: #059669; --warning: #D97706; --danger: #DC2626; --text-faint: #94A3B8; --label-text: #475569; } /* Component-specific rules below use literal hex/rgba values instead of the CSS variables above (drag-shadow intensity, badge tints, toggle-pill fills) and each already has its own scattered @media(prefers-color- scheme:dark) block elsewhere in this file. Those media blocks only respond to the OS setting, not the manual data-theme attribute - mirrored here so every one of them also respects a manual override. Kept as one consolidated block (rather than editing each occurrence in place) so the full set added for the manual toggle is visible together. */ :root[data-theme="dark"] .drag-handle { background: rgba(255, 255, 255, 0.08); } :root[data-theme="light"] .drag-handle { background: rgba(15, 23, 42, 0.05); } :root[data-theme="dark"] .dashboard-widget.is-dragging { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } :root[data-theme="light"] .dashboard-widget.is-dragging { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } :root[data-theme="dark"] .settings-widget.is-dragging { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } :root[data-theme="light"] .settings-widget.is-dragging { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } :root[data-theme="dark"] .training-widget.is-dragging { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } :root[data-theme="light"] .training-widget.is-dragging { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } :root[data-theme="dark"] .toggle-onoff.toggle-onoff-accent.toggle-onoff-active { background: #3B82F6; } :root[data-theme="light"] .toggle-onoff.toggle-onoff-accent.toggle-onoff-active { background: #1E40AF; } :root[data-theme="dark"] .badge.live { background: #1e3a5f; color: #93C5FD; } :root[data-theme="light"] .badge.live { background: #E0E7FF; color: #4338CA; } :root[data-theme="dark"] .badge.escrow { background: #3b2a00; color: #FCD34D; } :root[data-theme="light"] .badge.escrow { background: #FEF3C7; color: #92400E; } :root[data-theme="dark"] .badge.month { background: #14290f; color: #86EFAC; } :root[data-theme="light"] .badge.month { background: #DCFCE7; color: #166534; } :root[data-theme="dark"] .u-bg-fef3c7 { background: #451A03; } :root[data-theme="light"] .u-bg-fef3c7 { background: #FEF3C7; } :root[data-theme="dark"] .u-c-92400e { color: #FCD34D; } :root[data-theme="light"] .u-c-92400e { color: #92400E; } :root[data-theme="dark"] .warning-banner { color: #FCD34D; background: #451A03; border-color: #92400E; } :root[data-theme="light"] .warning-banner { color: #B45309; background: #FFFBEB; border-color: #FDE68A; } :root[data-theme="dark"] .toggle-pill { background: #334155; color: #94A3B8; } :root[data-theme="light"] .toggle-pill { background: #E5E7EB; color: #6B7280; } :root[data-theme="dark"] .toggle-pill.active { background: #1E3A5F; color: #60A5FA; } :root[data-theme="light"] .toggle-pill.active { background: #DBEAFE; color: #1E40AF; } :root[data-theme="dark"] .contact-row-summary.is-expanded { background: #1e3a5f; } :root[data-theme="light"] .contact-row-summary.is-expanded { background: #EFF6FF; } /* No global box-sizing reset - Styles.html has none either (relies on the browser's content-box default everywhere, applying border-box only to specific elements that need it: .brand, a couple of overflow-fix containers, and its own mobile card overrides). Matching that exactly: border-box is added explicitly below on every element here that combines an explicit width with padding/border, instead of applying it universally. */ /* Base button - most buttons in this app are plain