/* ============================================================================ services-theme.css — Services Workspace Dark / Light Theme Engine ---------------------------------------------------------------------------- @file services-theme.css @module MUMS / Services @loads LAST (after services.css → services-premium.css → services-report.css) @contract window.ServicesTheme (services-theme.js) toggles document.documentElement[data-svc-theme="light|dark"]. WHY THIS FILE EXISTS -------------------- The Services Workspace ships a single authored (dark) design system with a concentrated neutral palette. The three source stylesheets were tokenised in place — every *neutral* surface / border / text value was replaced with a `var(--sc-*)` primitive that resolves to the SAME value in dark mode (value-preserving: dark renders pixel-identical to before). This file: 1. Defines the `--sc-*` primitive ramp at its dark baseline (:root). 2. Re-points the ramp + the few un-tokenised page-background tokens to a cool-slate LIGHT palette under `:root[data-svc-theme="light"]`. 3. Adds a small set of targeted light overrides where a raw brand/gold colour would be illegible on a light surface. INTENTIONALLY NOT THEMED (stay constant across modes, by design): • Brand gold (#E8C46A / #C9A84C family) as fills/borders/ink-on-gold. • Semantic status (red / amber / green) and data-viz category colours. • User Conditional Formatting — it is applied as INLINE `style.setProperty(..., 'important')` by services-conditional-format.js, so it overrides every stylesheet rule in BOTH modes and is untouched. Guardrail note (AGENTS.md / CODE_UNTOUCHABLES.md): this is an ADDITIVE layer. No existing rule's meaning changes in dark mode. Cleared by MACE. Blueprint: see SERVICES_BLUEPRINT.md → "Dark / Light Theme Engine". ============================================================================ */ /* ------------------------------------------------------------------ * * 1 · PRIMITIVE RAMP — DARK BASELINE (value-preserving) * * These MUST equal the original hard-coded values so dark mode is * * unchanged. Do not "improve" them here — tune LIGHT below. * * ------------------------------------------------------------------ */ :root { color-scheme: dark; /* Surface ramp — exposed as rgb triplet (for rgba(var(--x), α)) + solid */ --sc-bg-rgb: 13,14,17; --sc-bg: rgb(var(--sc-bg-rgb)); /* page base #0d0e11 */ --sc-bg2-rgb: 17,18,20; --sc-bg2: rgb(var(--sc-bg2-rgb)); /* base-2 #111214 */ --sc-panel-rgb: 19,20,22; --sc-panel: rgb(var(--sc-panel-rgb)); /* panel/card #131416 */ --sc-panel2-rgb: 26,28,31; --sc-panel2: rgb(var(--sc-panel2-rgb)); /* hover/nested #1a1c1f */ --sc-panel3-rgb: 27,29,32; --sc-panel3: rgb(var(--sc-panel3-rgb)); /* nested-2 #1b1d20 */ --sc-tertiary-rgb:22,24,27; --sc-tertiary:rgb(var(--sc-tertiary-rgb));/* tertiary #16181b */ --sc-elev-rgb: 44,46,50; --sc-elev: rgb(var(--sc-elev-rgb)); /* elevated #2c2e32 */ --sc-elev2-rgb: 76,78,84; --sc-elev2: rgb(var(--sc-elev2-rgb)); /* elevated-2 #4c4e54 */ --sc-border2-rgb: 38,40,44; --sc-border2: rgb(var(--sc-border2-rgb)); /* border #26282c */ --sc-deep-rgb: 8,12,24; --sc-deep: rgb(var(--sc-deep-rgb)); /* deep well #080c18 */ --sc-bg-top-rgb: 20,21,23; --sc-bg-top: rgb(var(--sc-bg-top-rgb)); /* gradient top #141517 */ /* Neutral (borders / dims) — used as rgba(var(--sc-neutral-rgb), α) */ --sc-neutral-rgb: 155,157,162; /* Text ramp — solid */ --sc-text: #e5e7eb; /* primary */ --sc-text-bright: #d2d4d8; /* brightest labels */ --sc-text-strong: #e2e8f0; /* strong headings */ --sc-text-strong2: #f1f5f9; /* near-white values */ --sc-text-dim: #9a9ca1; /* dim */ --sc-text-dimmer: #6b6d73; /* dimmer */ --sc-text-faint: #4c4e54; /* faint separators */ /* Brand / semantic used AS TEXT ("ink"). Dark = original shade (so the grid/report look identical); light = a readable variant. Set ONLY on the `color:` property in source — gold/green fills, dots and borders keep their bright value in both modes. */ --sc-ink-gA: #E8C46A; /* accent gold */ --sc-ink-gB: #C9A84C; /* deep gold */ --sc-ink-gC: #F0D58A; /* light gold */ --sc-ink-gD: #f3df9e; /* pale gold */ --sc-ink-gE: #ecd089; /* pale gold-2 */ --sc-ink-gF: #d8b45a; /* amber gold */ --sc-ink-accent: var(--svc-accent); --sc-ink-gn1: #34d399; /* mint */ --sc-ink-gn2: #10b981; /* green */ --sc-ink-gn3: #6ee7b7; /* light mint */ /* Derived semantic helpers used only by this theme layer + toggle chrome */ --sc-gold-ink: var(--svc-accent); /* gold used AS TEXT */ --sc-shadow-color: 0,0,0; /* elevation shadow rgb */ --sc-toggle-track: var(--sc-panel2); --sc-toggle-knob: #E8C46A; } /* ------------------------------------------------------------------ * * 2 · LIGHT MODE — cool-slate enterprise palette * * Re-points the ramp + un-tokenised page-bg tokens. Everything * * built on --sc-* / --svc-* / --bgp-* flips automatically. * * ------------------------------------------------------------------ */ :root[data-svc-theme="light"] { color-scheme: light; /* Surfaces — depth inverts: recessed = greyer, raised = whiter */ --sc-bg-rgb: 236,238,243; /* page canvas #ECEEF3 */ --sc-bg2-rgb: 227,231,238; /* deeper canvas #E3E7EE */ --sc-panel-rgb: 255,255,255; /* cards/panels #FFFFFF */ --sc-panel2-rgb: 242,245,249; /* hover/nested #F2F5F9 */ --sc-panel3-rgb: 237,240,246; /* nested-2 #EDF0F6 */ --sc-tertiary-rgb:246,248,251; /* tertiary #F6F8FB */ --sc-elev-rgb: 224,228,235; /* chips/dividers#E0E4EB */ --sc-elev2-rgb: 194,201,213; /* strong border #C2C9D5 */ --sc-border2-rgb: 216,221,230; /* borders #D8DDE6 */ --sc-deep-rgb: 231,235,242; /* header well #E7EBF2 */ --sc-bg-top-rgb: 247,249,252; /* gradient top #F7F9FC */ /* Neutral borders / dim ink → slate (readable on light) */ --sc-neutral-rgb: 92,101,118; /* #5C6576 */ /* Text → dark-on-light, hierarchy preserved */ --sc-text: #1b2432; --sc-text-bright: #0e1524; --sc-text-strong: #14202f; --sc-text-strong2: #0f1826; --sc-text-dim: #566073; --sc-text-dimmer: #7d8698; --sc-text-faint: #a2abba; /* Un-tokenised page-background tokens (kept #0d0e11 in dark; flip here) */ --svc-bg: #eceef3; --bgp-primary: #eceef3; /* Softer elevation on light */ --sc-shadow-color: 40,52,74; --svc-shadow: 0 8px 26px rgba(40,52,74,.12); --svc-accent-glow: rgba(201,168,76, 0.28); /* Gold used as TEXT is illegible on white → darker gold-bronze ink */ --sc-gold-ink: #9a7a1f; /* Brand / semantic INK — readable on light surfaces (AA on white/near-white). Fills, dots and borders keep their bright value; only text is darkened. */ --sc-ink-gA: #9a7a1f; --sc-ink-gB: #806417; --sc-ink-gC: #997a1e; --sc-ink-gD: #8f7220; --sc-ink-gE: #8a6d1c; --sc-ink-gF: #866819; --sc-ink-accent: #9a7a1f; --sc-ink-gn1: #0a8a5c; --sc-ink-gn2: #097a52; --sc-ink-gn3: #0a8a5c; /* Toggle chrome */ --sc-toggle-track: #dfe4ec; --sc-toggle-knob: #3a4152; } /* ------------------------------------------------------------------ * * 3 · LIGHT OVERRIDES — brand gold used as INK on light surfaces * * (backgrounds/borders that are gold stay gold; only gold TEXT * * that would fail contrast is darkened via --sc-gold-ink.) * * ------------------------------------------------------------------ */ :root[data-svc-theme="light"] .svc-back:hover, :root[data-svc-theme="light"] .svc-btn:hover, :root[data-svc-theme="light"] .svc-icon-btn:hover, :root[data-svc-theme="light"] .svc-sheet-item.active, :root[data-svc-theme="light"] .svc-sheet-item .menu:hover, :root[data-svc-theme="light"] .svc-rpt-iconbtn:hover, :root[data-svc-theme="light"] .svc-rpt-tab.active, :root[data-svc-theme="light"] .svc-rpt-tab.active i, :root[data-svc-theme="light"] .svc-rpt-btn:hover, :root[data-svc-theme="light"] .svc-rpt-chip.active, :root[data-svc-theme="light"] .svc-rpt-chip.active b { color: var(--sc-gold-ink) !important; } /* Gold-tinted hover/active BACKGROUNDS read too pale on white → firm them up */ :root[data-svc-theme="light"] .svc-sheet-item.active { background: rgba(201,168,76,.14); border-left-color: var(--svc-accent); } :root[data-svc-theme="light"] .svc-rpt-tab.active { background: rgba(201,168,76,.15); border-color: rgba(201,168,76,.42); } /* Frozen row-number gutter is a hard-coded near-black (#060708 !important) in the grid CSS — turn it into a light gutter that still reads as a distinct frozen column. Higher specificity + !important to beat the source rule. */ :root[data-svc-theme="light"] .svc-grid thead th.row-num, :root[data-svc-theme="light"] .svc-grid tbody td.row-num, :root[data-svc-theme="light"] #svcGrid tbody td.row-num { background: var(--sc-elev) !important; color: var(--sc-text-dim) !important; } /* ── Service Report — status pills / notices (light re-skin) ─────────────── The report renders urgency chrome in colours authored as light-on-DARK (salmon #fca5a5, near-white #fecaca, pale amber #fcd34d/#fde68a). Those are correct in dark, but on a light surface they wash out to unreadable pastels (the "faded pink bar" on overdue rows). Here we INVERT them to dark-on-tint with an urgency hierarchy — solid red/amber chips for overdue/today, soft gold/green for soon/ok — so the column reads at a glance and looks premium. Light-only: dark mode is never touched (source rules stand). */ /* "N overdue" summary pill */ :root[data-svc-theme="light"] .svc-rpt-overduecount { color: #b42318; background: #fee4e2; border-color: rgba(180,35,24,.38); } /* Overdue row pill (red) — dark-red date + SOLID red badge */ :root[data-svc-theme="light"] .svc-rpt-duepill.overdue { border-color: rgba(180,35,24,.42); background: #fef3f2; } :root[data-svc-theme="light"] .svc-rpt-duepill.overdue .dd { color: #b42318; } :root[data-svc-theme="light"] .svc-rpt-duepill.overdue .badge { background: #b42318; color: #fff; } /* Due-today pill (amber) — dark-amber date + SOLID amber badge */ :root[data-svc-theme="light"] .svc-rpt-duepill.today { border-color: rgba(181,71,8,.42); background: #fffaeb; } :root[data-svc-theme="light"] .svc-rpt-duepill.today .dd { color: #b45309; } :root[data-svc-theme="light"] .svc-rpt-duepill.today .badge { background: #b54708; color: #fff; } /* Soon (gold) / OK (green) badges already use ink tokens — just firm the tint so the soft chips separate from a white pill. */ :root[data-svc-theme="light"] .svc-rpt-duepill.soon .badge { background: rgba(201,168,76,.24); } :root[data-svc-theme="light"] .svc-rpt-duepill.ok .badge { background: rgba(16,185,129,.18); } /* Warning + access-denied notices (amber tint → dark-amber ink) */ :root[data-svc-theme="light"] .svc-rpt-warn, :root[data-svc-theme="light"] .svc-rpt-denied-notice { color: #92500e; background: #fffaeb; border-color: rgba(181,71,8,.40); } :root[data-svc-theme="light"] .svc-rpt-warn i, :root[data-svc-theme="light"] .svc-rpt-denied-notice i { color: #b54708; } :root[data-svc-theme="light"] .svc-rpt-denied-notice b { color: #7a3d05; } :root[data-svc-theme="light"] .svc-rpt-denied-ic { color: #b45309; background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(184,146,58,.16)); border-color: rgba(181,71,8,.32); } /* QB assignee name (slate) + "missing" (amber) */ :root[data-svc-theme="light"] .svc-rpt-qbname { color: #5a6473; } :root[data-svc-theme="light"] .svc-rpt-qbname.missing { color: #b45309; } /* Chip glyph slate + destructive hovers — vivid on light */ :root[data-svc-theme="light"] .svc-rpt-chip i { color: #6b7686; } :root[data-svc-theme="light"] .svc-rpt-chip-x:hover, :root[data-svc-theme="light"] .svc-rpt-pop-head .x:hover { color: #d92d20; } /* Native form controls / scrollbars follow the scheme */ :root[data-svc-theme="light"] * { scrollbar-color: var(--sc-elev2) var(--sc-panel2); } /* ------------------------------------------------------------------ * * 4 · THEME TOGGLE CONTROL (topbar chrome) * * ------------------------------------------------------------------ */ .svc-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 34px; height: 30px; padding: 0; border-radius: 9px; border: 1px solid var(--svc-border, rgba(155,157,162,.14)); background: var(--sc-panel2); color: var(--sc-text-dim); cursor: pointer; position: relative; overflow: hidden; transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; } .svc-theme-toggle:hover { color: var(--svc-accent); border-color: rgba(201,168,76,.45); background: rgba(201,168,76,.10); } .svc-theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(201,168,76,.55); } .svc-theme-toggle .svc-theme-ico { width: 15px; height: 15px; display: block; position: absolute; transition: transform .4s cubic-bezier(.2,.9,.25,1.2), opacity .28s ease; } /* Sun/Moon crossfade — moon shown in dark, sun shown in light */ .svc-theme-toggle .svc-theme-ico-moon { opacity: 1; transform: rotate(0) scale(1); } .svc-theme-toggle .svc-theme-ico-sun { opacity: 0; transform: rotate(-90deg) scale(.4); } :root[data-svc-theme="light"] .svc-theme-toggle .svc-theme-ico-moon { opacity: 0; transform: rotate(90deg) scale(.4); } :root[data-svc-theme="light"] .svc-theme-toggle .svc-theme-ico-sun { opacity: 1; transform: rotate(0) scale(1); } /* ------------------------------------------------------------------ * * 5 · CROSS-FADE ON SWITCH * * Progressive enhancement via the View Transitions API (handled * * in services-theme.js). This is the reduced-motion + fallback * * micro-transition; guarded so it never fires on first paint * * (JS adds [data-svc-theme-anim] after the initial frame). * * ------------------------------------------------------------------ */ [data-svc-theme-anim] .svc-topbar, [data-svc-theme-anim] .svc-left, [data-svc-theme-anim] .svc-right, [data-svc-theme-anim] .svc-center, [data-svc-theme-anim] .svc-main { transition: background-color .28s ease, color .28s ease, border-color .28s ease; } @media (prefers-reduced-motion: reduce) { .svc-theme-toggle .svc-theme-ico { transition: opacity .1s linear; } } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .34s; animation-timing-function: cubic-bezier(.4,0,.2,1); }