/* ============================================================================ theme-dark.css · Optional dark mode for Mity for CPF Restaurants. Loaded LAST. Activated by . Light mode is the default and is untouched by this file. Dark mode re-maps the semantic design tokens (surface/soft/line/text/tints/shadow) — because every scene surface uses var(--surface) etc., the whole app flips from one token block. A short list of deliberate exceptions (white indicators on coloured chrome, severity chip text) is re-asserted below for contrast. ========================================================================== */ [data-theme="dark"] { /* green-tinted near-black, echoing the Amity mint + the existing dark rail */ --softer: #0d1411; /* app background */ --soft: #16211c; /* recessed tracks / hovers */ --surface:#18241f; /* cards, bubbles, panels */ --line: #27342d; --line-soft: #202b25; --ink: #05100b; /* darkest chrome (guide button, table head base) */ --ink-2: #0c1712; --text-1: #eaf3ee; --text-2: #bcc8c1; --text-dim: #9baaa2; --text-soft: #7e8d85; /* accent stays the brand mint; lift the "ink" accent used for small text on dark */ --mint-ink: #3ad9a9; --mint-700: #29cc9c; --mint-600: #17c493; --mint-tint: #102a22; --mint-tint-2: #0d211b; /* status tints darkened so chips read as tinted fills, not glowing blocks */ --danger-soft: #3a1d1d; --warn-soft: #382c11; --ok-soft: #123024; --info-soft: #12293a; --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 14px 38px rgba(0,0,0,.55); --shadow-mint: 0 4px 16px rgba(4,190,140,.28), 0 20px 50px rgba(0,0,0,.5); color-scheme: dark; } /* ---- deliberate exceptions: white indicators on coloured chrome ---- */ [data-theme="dark"] .mt-guide .live-dot, [data-theme="dark"] .mv-speak.is-speaking::after, [data-theme="dark"] .mv-wave i { background: #fff; } /* ---- severity chip / callout TEXT: hardcoded dark reds/ambers → light on dark ---- */ [data-theme="dark"] .bic-sev.crit, [data-theme="dark"] .bic-port__sev.crit, [data-theme="dark"] .rg-card__sev.crit, [data-theme="dark"] .bic-finding.crit .bic-finding__action, [data-theme="dark"] .bic-plan__problem, [data-theme="dark"] .rg-card__issue, [data-theme="dark"] .bic-insight { color: #fca5a5; } [data-theme="dark"] .bic-sev.warn, [data-theme="dark"] .bic-port__sev.warn, [data-theme="dark"] .rg-card__sev.warn, [data-theme="dark"] .bic-finding.warn .bic-finding__action { color: #fcd34d; } /* insight/crit callout borders were tuned for light pink tints — soften on dark */ [data-theme="dark"] .bic-insight { border-color: #5a2b2b; } [data-theme="dark"] .rg-card.crit { box-shadow: 0 0 0 1px #6a3030, var(--shadow-sm); } /* the active language chip uses --ink (dark) which now blends into the bar — make it mint */ [data-theme="dark"] .lang-pill button.is-active { background: var(--mint); color: #06231a; } /* code / preformatted blocks inside streamed markdown */ [data-theme="dark"] .copilot__answer pre, [data-theme="dark"] .copilot__answer code { background: #0c1712; border-color: var(--line); } /* NBA "gaps" column pink tint → muted red on dark */ [data-theme="dark"] .cvm-col--gap { background: #2a1616; border-color: #4a2626; } /* hardcoded dark-red text → light red on dark (crit severity, issues) */ [data-theme="dark"] .sim-d.down, [data-theme="dark"] .exec-drill__issue, [data-theme="dark"] .comp-counter__vs, [data-theme="dark"] .comp-counter__err, [data-theme="dark"] .comp-local__badge.hi, [data-theme="dark"] .shift-sev.crit, [data-theme="dark"] .exec-sev.crit, [data-theme="dark"] .nba-sev.crit, [data-theme="dark"] .nba-card.crit .nba-card__rank, [data-theme="dark"] .exec-tile.crit .exec-tile__h { color: #fca5a5; } /* hardcoded dark-amber text → light amber on dark (warn severity) */ [data-theme="dark"] .exec-sev.warn, [data-theme="dark"] .exec-tile.warn .exec-tile__h, [data-theme="dark"] .comp-local__badge.md, [data-theme="dark"] .nba-sev.warn, [data-theme="dark"] .nba-card.warn .nba-card__rank, [data-theme="dark"] .shift-sev.warn { color: #fcd34d; } /* info-blue text/border that stays legible on the dark info tint */ [data-theme="dark"] .shift-sev.info { color: #7dc4f0; } [data-theme="dark"] .fc-fac.is-on { color: #7dc4f0; border-color: #3a6d94; } [data-theme="dark"] .exec-drill__scrim { background: rgba(0,0,0,.65); } /* Leaflet map popups default to a white surface — match the app card in dark mode */ [data-theme="dark"] .leaflet-popup-content-wrapper, [data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--text-1); } [data-theme="dark"] .leaflet-popup-close-button { color: var(--text-soft); } [data-theme="dark"] .opmap-pop__issue { color: #fca5a5; }