/* ========================================================= Dashboard — Dark layer Loaded LAST (after styles.css → v2-overlay.css → polish.css). The dashboard is token-driven via the v2-overlay namespace (--bg, --paper, --ink, --line, --primary…). Re-defining those tokens under [data-theme="dark"] (which lives on and wins on source order) flips ~all surfaces in one move; the blocks below it patch the components that hard-code literals. Palette: docs/DESIGN-SYSTEM.md (near-black canvas, single copper accent, emerald=good / red=bad). ========================================================= */ [data-theme="dark"] { color-scheme: dark; /* --- core surfaces / ink (was light) --- */ --bg: #0a0d12; --paper: #14181e; /* card/panel fill (was #fff) */ --bg-soft: #0e1217; --ink: #f3f5f7; --muted: #b7bec8; --muted-2: #8b929c; --line: rgba(255, 255, 255, 0.10); --line-strong: rgba(255, 255, 255, 0.18); /* --- accent: orange → copper --- */ --primary: #cc8066; --primary-700: #e7a184; /* on dark, hover should brighten */ --primary-100: rgba(204, 128, 102, 0.14); --accent: #e7a184; --accent-soft: rgba(231, 161, 132, 0.16); /* raised dark surfaces (already dark in light mode; nudge to palette) */ --surface: #14181e; --surface-2: #1b2027; --surface-line: rgba(255, 255, 255, 0.08); --on-surface: #e7e9ed; --on-surface-2: #9aa1ab; /* --- semantic signals re-tuned for dark --- */ --green: #5fd39a; --blue: #6aa0ff; --red: #ef7e72; --gold: #cc8066; --plum: #b794f6; /* --- depth tuned for near-black --- */ --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 44px -26px rgba(0, 0, 0, 0.7); --shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -30px rgba(0, 0, 0, 0.85); --shadow-cta: 0 14px 50px -16px rgba(204, 128, 102, 0.4); } /* Page canvas + brand mark inversion (mark art is near-black on transparent) */ [data-theme="dark"] html, [data-theme="dark"] body, [data-theme="dark"] .app-shell { background: var(--bg); color: var(--ink); } [data-theme="dark"] .brand-logo, [data-theme="dark"] .hero-brand-icon { filter: brightness(0) invert(1); } /* ========================================================= Component patches — surfaces that hard-code light literals (so the token remap above can't reach them). Kept here in the dark layer so the source CSS stays light-clean. ========================================================= */ /* Sticky glass bars → dark glass */ [data-theme="dark"] .topbar, [data-theme="dark"] .this-week-bar { background: rgba(10, 13, 18, 0.72); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-color: var(--line); } /* Readout tiles (60-second KPIs) → subtle elevated dark */ [data-theme="dark"] .readout-tile { background: rgba(255, 255, 255, 0.025); border-color: var(--line); } /* Signal rows (what's working / blocking) → dark elevated */ [data-theme="dark"] .signal-row { background: rgba(255, 255, 255, 0.04); border-color: var(--line); } [data-theme="dark"] .signal-row:hover { background: rgba(255, 255, 255, 0.07); } /* Numbered step badges → copper chips with legible text */ [data-theme="dark"] .clarity-num, [data-theme="dark"] .this-week-bar__n { background: rgba(204, 128, 102, 0.18); color: #e7a184; border: 1px solid rgba(204, 128, 102, 0.32); } /* Fix-queue status toggles: were light bg + white text (invisible) */ [data-theme="dark"] .fix-status__btn { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); } [data-theme="dark"] .fix-status__btn:hover { background: #232932; border-color: var(--line-strong); } [data-theme="dark"] .fix-status__btn.is-selected, [data-theme="dark"] .fix-status__btn[data-status="completed"].is-selected { background: rgba(95, 211, 154, 0.16); color: #8fe3ba; border-color: rgba(95, 211, 154, 0.4); } /* Pre-drafted approval messages (the "ready to send" asks) → dark paper */ [data-theme="dark"] .escalation-message, [data-theme="dark"] .escalations-panel { background: rgba(255, 255, 255, 0.03); color: var(--ink); border-color: var(--line); } /* Misc light pills / chips that used literals (some are !important) */ [data-theme="dark"] .chip { background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important; color: var(--ink); border-color: var(--line) !important; } [data-theme="dark"] .fix-card .fix-time { background: linear-gradient(180deg, var(--surface-2), var(--surface)); color: var(--muted); border-color: var(--line); } [data-theme="dark"] .snippet-cite-pill--missing { background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important; color: var(--muted); } [data-theme="dark"] .sidebar-note { background: rgba(255, 255, 255, 0.03); border-color: var(--line); } [data-theme="dark"] .live-pill { background: rgba(255, 255, 255, 0.05); border-color: var(--line); } /* Peer comparison "featured" tag was orange → copper */ [data-theme="dark"] .peer-row__tag { background: linear-gradient(180deg, var(--surface-2), var(--surface)) !important; color: var(--ink); } [data-theme="dark"] .peer-row__tag.is-featured { background: linear-gradient(180deg, #e7a184 0%, var(--primary) 70%, var(--primary-700) 100%) !important; color: #0a0d12 !important; } /* Sample disclosure banner → cohesive dark copper-tinted (sample build only) */ [data-theme="dark"] .sample-banner { background: linear-gradient(180deg, rgba(204, 128, 102, 0.16), rgba(204, 128, 102, 0.08)); color: #e7a184; border-bottom: 1px solid rgba(204, 128, 102, 0.28); } /* 60-second exec-summary card: was a white panel → dark elevated + copper wash */ [data-theme="dark"] .exec-summary { background: linear-gradient(135deg, rgba(204, 128, 102, 0.10), transparent 46%), linear-gradient(180deg, var(--surface), var(--bg-soft)); border-color: var(--line); } /* Progress fill → copper (track stays dark; complete state stays emerald) */ [data-theme="dark"] .fix-progress__fill { background: var(--primary); } /* "YOU" marker badge: white-on-ink became invisible → copper, dark label */ [data-theme="dark"] .clarity-you-tag { background: var(--primary); color: #0a0d12; } /* Mobile hamburger + footer */ [data-theme="dark"] .mobile-nav-toggle { background: rgba(255, 255, 255, 0.05); border-color: var(--line); } [data-theme="dark"] .sample-footer { background: var(--bg-soft); color: var(--muted); border-color: var(--line); } /* Cream-tinted list/tile literals (signal list, engine rows, review pools) */ [data-theme="dark"] .signal-list, [data-theme="dark"] .engine-row li, [data-theme="dark"] .review-pools > div { background: rgba(255, 255, 255, 0.04); border-color: var(--line); } /* signal-list "conflict" items hard-code a dark #343631 → light for AA contrast */ [data-theme="dark"] .signal-list li { color: var(--muted); } /* "Projected after fixes" badge was copper-on-copper-tint (failed AA) → brighten */ [data-theme="dark"] .snippet-state-badge--after { color: #e7a184; } /* Citation label was --muted-2 on the dark card (~4:1) → --muted for AA */ [data-theme="dark"] .snippet-cite-label { color: var(--muted); } /* Failure-card severity pills used dark light-mode reds/ambers → brighten for dark AA */ [data-theme="dark"] .severity-pill--high { color: #f0958b; border-color: rgba(239, 126, 114, 0.45); background: rgba(239, 126, 114, 0.12); } [data-theme="dark"] .severity-pill--med { color: #e7a184; border-color: rgba(231, 161, 132, 0.42); background: rgba(231, 161, 132, 0.10); } [data-theme="dark"] .severity-pill--low { color: #f4c25a; border-color: rgba(244, 194, 90, 0.42); background: rgba(244, 194, 90, 0.10); } /* Draft body text hard-coded #33342f → light for AA on the dark card */ [data-theme="dark"] .draft-copy { color: var(--on-surface); } /* Heatmap STRONG: white on #16a34a was ~3.4:1 → deepen the green for AA */ [data-theme="dark"] .heat-cell.strong { background: #0f7d3a; border-color: rgba(95, 211, 154, 0.5); } /* Escalation "copy" button: copper-bg + white (failed AA) → white pill, dark label */ [data-theme="dark"] .escalation-copy-btn { background: #ffffff; color: #0a0d12; border-color: transparent; } [data-theme="dark"] .escalation-copy-btn:hover { background: #e7a184; color: #0a0d12; border-color: transparent; } [data-theme="dark"] .escalation-copy-btn.is-copied { background: #5fd39a; color: #0a0d12; border-color: transparent; } /* Escalation message body: wrap instead of scroll (kills scrollable-region-focusable) */ [data-theme="dark"] .escalation-body pre, [data-theme="dark"] .escalation-message pre { white-space: pre-wrap; overflow: visible; max-height: none; } [data-theme="dark"] .skip-link { background: var(--surface-2); color: var(--ink); } /* ========================================================= Data-viz: visibility heatmap + peer tags (kill old orange, keep emerald/red semantics legible on dark) ========================================================= */ [data-theme="dark"] .heat-cell.some { background: rgba(204, 128, 102, 0.9); color: #0a0d12; border-color: rgba(204, 128, 102, 0.7); } [data-theme="dark"] .heat-cell.mixed { background: rgba(204, 128, 102, 0.18); color: #e7a184; border-color: rgba(204, 128, 102, 0.34); } /* dark-green text on a dark tint is illegible → brighten */ [data-theme="dark"] .heat-cell.review { color: #8fe3ba; } /* peer "featured" tag: was orange border → copper */ [data-theme="dark"] .peer-row__tag.is-featured { border-color: rgba(204, 128, 102, 0.55) !important; } /* rating stars → brand amber (softer than pure gold) */ [data-theme="dark"] .chip-stars { color: #f4c25a; } /* ========================================================= Mobile nav menu (.top-nav) — hidden on desktop, so its cream literals never showed there. Dark glass + dark links on mobile. ========================================================= */ [data-theme="dark"] .top-nav { background: rgba(10, 13, 18, 0.97); border-color: var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } [data-theme="dark"] .top-nav .nav-link { background: transparent; color: var(--ink); } [data-theme="dark"] .top-nav .nav-link:hover, [data-theme="dark"] .top-nav .nav-link.is-active { background: rgba(255, 255, 255, 0.05); }