diff --git a/docs/branch-review-ledger.md b/docs/branch-review-ledger.md
index c75b8f57a..cb639b3c7 100644
--- a/docs/branch-review-ledger.md
+++ b/docs/branch-review-ledger.md
@@ -961,5 +961,9 @@ This file is append-only. Never rewrite or delete an existing review record; app
 | 2026-07-25 | execute-audit-code-remediation (PR #1162) | b9b56c140eb14cbba5a2c2230e3fa28d3a791add | CI unblock after bot sync | Tip 96188eca had PR required SUCCESS (Static/Safety/Unit/Build/Migration/Production UI). Hosted pr-branch-sync then merged main (a420b86b/b9b56c14), leaving CI action_required for bot-authored runs. Pushing agent commit to re-trigger non-bot CI. | Prior tip 96188eca hosted CI green; local services referral Playwright PASS; no provider-backed checks. |
 | 2026-07-25 | PR supersede #1186 / `cursor/pr1186-audit-remediation-c94c` | `a38e83860510a4229d5658960657cd7448aff278` | Clean main-based port of intentional #1186 audit fixes | SUPERSEDE #1186 (do not merge old PR). Ported intentional 16-file delta onto current main; dropped conflicted checkpoint tree and placeholder skills. Fixed eval single results binding; async run-heavy so lock heartbeat fires; branch:cleanup dry-run default + argv-safe deletes; skill-create interface YAML. Close #1186. | Focused Vitest tooling+lock 6/6; check:skills 33; prettier on touched files; no provider/live eval runs. |
 | 2026-07-25 | `cursor/ledger-066-067-519b` | f04392a408eceee14215c15169cbd6b70ac2041c | Close stale ledger #066/#067 (+ drop resolved #030/#075 from queue) | READY. #066 proven on main via #1174; #067 already fixed in #1191 in-process preflight. Docs-only ledger sync; no code change. | Local proof: `git show`/`log` for #1174/#1191; preflight test already in-process on main; ledger integrity asserts. No providers. |
+| 2026-07-25 | PR #1190 / `remediate-dark-mode-audit` | `00eca49b9b0d7e5fbfa5703a15e9e930963984a6` | Cursor review+Bugbot+prlanded+debug (fresh pass, same HEAD) | DO NOT MERGE; NOT LANDED (OPEN, mergeable=CONFLICTING/DIRTY, 468 behind / 2 ahead). Reconfirmed P0: conflict resolution deleted `trustGatedAnswerForClinicalNotes` (0 hits on head; main L584/632/659/1075) — Clinical Notes consumes ungated answer. P1: `src/app/api/answer/route.ts:6` imports nonexistent `@/lib/rag` (tsc TS2307; stream correctly uses `@/lib/rag/rag`). P1: merge-tree conflicts on answer/upload/evidence-panels + 10 paths; literal `<<<<<<<` in docs audit plan; migration timestamp collision risk vs main. Intentional dark-mode delta is only commit `363672602` (~10 files). Salvage: `cursor/pr1190-dark-mode-salvage-f453` cherry-picks that commit onto current main, restores unused-manifest-import cleanup, keeps clinical gate. Close #1190 after salvage lands. | Bugbot; `git grep` gate/import/markers; merge-tree; `tsc` TS2307 proof; gh pr view/checks (PR policy fail). Salvage: tsc clean; visual-evidence+overlay tests 13/13; eslint on changed files. No provider/UI matrix. |
 | 2026-07-25 | execute-audit-remediation-plan (PR #1188) | 8b8639113925601e1687bfe4f1f29c44a4308b61 | Bugbot/diff-review: maintainability remediation tip | BLOCK: tip tree carries unresolved conflict markers (answer/upload APIs, clinical-dashboard, services, tests); invalid `async export function sha256Hex` in indexing-v3 utils; ClinicalDashboard still calls removed `renderSystemNotice`; merge-tree vs main conflicts in check-github-action-pins.mjs + ui-primitives.tsx. Intended notices extraction/dynamic imports look mostly sound; search-scope/migration not in three-dot product delta. | `git grep` conflict markers on tip (none on origin/main); `git show` for ClinicalDashboard:3824 + utils.ts:191; `git merge-tree --write-tree origin/main 8b8639113`; no provider-backed checks. |
 | 2026-07-25 | PR #1209 / `cursor/pr1186-audit-remediation-c94c` | `4cb22e45dfe46b1975fa15ddd028c7e14ceb5fab` | Close #1186 + babysit #1209 CI | DONE. Closed #1186 as superseded. Synced origin/main (MERGEABLE/CLEAN). Fixed PR-policy RAG impact line. Hosted PR required SUCCESS (Static/Safety/Unit/Build/Production UI/Advisory UI/containers) on pre-ledger tip; docs-only follow-up pushed. Ready to merge; auto-merge not enabled. | gh pr checks; local policy ok; no provider/eval runs. |
+| 2026-07-25 | cursor/pr1190-dark-mode-salvage-f453 (PR #1214) | pending-ci-retrigger | CI unblock after bot sync | Hosted pr-branch-sync merged main onto tip (`68d0ceaab`), leaving CI `action_required` for bot-authored runs. Pushing agent commit to re-trigger non-bot CI before squash-merge; then close #1190. | Local pwa-manifest 8/8; trust gate present; prior unit failure fixed. No provider-backed checks. |
+
+| 2026-07-25 | cursor/pr1190-dark-mode-salvage-f453 (PR #1214) | pending-ci-retrigger-2 | CI unblock + skip-branch-sync | Repeated pr-branch-sync bot merges left CI `action_required`. Applied `skip-branch-sync` label and agent retrigger so required checks can finish for squash-merge; then close #1190. | Hosted CI pending on tip; no provider-backed checks. |
diff --git a/eslint-rules/no-hardcoded-hex.mjs b/eslint-rules/no-hardcoded-hex.mjs
new file mode 100644
index 000000000..2c7a5309f
--- /dev/null
+++ b/eslint-rules/no-hardcoded-hex.mjs
@@ -0,0 +1,41 @@
+/**
+ * Local ESLint rule: forbid hardcoded hex Tailwind colour utilities such as
+ * `bg-[#…]`, `text-[#…]`, and `border-[#…]` so themes must use semantic CSS
+ * variables (e.g. `var(--surface)`).
+ */
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Prevent hardcoded hex color utilities in Tailwind classNames",
+    },
+    schema: [],
+  },
+  create(context) {
+    const hexPattern = /\b(bg|text|border)-\[#[0-9a-fA-F]{3,8}\]/;
+
+    return {
+      Literal(node) {
+        if (typeof node.value === "string" && hexPattern.test(node.value)) {
+          context.report({
+            node,
+            message:
+              "Hardcoded hex color utilities (bg-[#...], text-[#...], border-[#...]) are forbidden. Use semantic CSS variables (e.g. var(--surface)) to support theming.",
+          });
+        }
+      },
+      TemplateElement(node) {
+        if (node.value && node.value.raw && hexPattern.test(node.value.raw)) {
+          context.report({
+            node,
+            message:
+              "Hardcoded hex color utilities (bg-[#...], text-[#...], border-[#...]) are forbidden. Use semantic CSS variables (e.g. var(--surface)) to support theming.",
+          });
+        }
+      },
+    };
+  },
+};
+
+export default rule;
diff --git a/eslint.config.mjs b/eslint.config.mjs
index b85dedc10..beb2d633d 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -5,6 +5,7 @@ import nextTs from "eslint-config-next/typescript";
 import requireLucideIconAria from "./eslint-rules/require-lucide-icon-aria.mjs";
 import requireButtonWiring from "./eslint-rules/require-button-wiring.mjs";
 import restrictSuppressHydrationWarning from "./eslint-rules/restrict-suppress-hydration-warning.mjs";
+import noHardcodedHex from "./eslint-rules/no-hardcoded-hex.mjs";
 
 // Shared `local` plugin object. ESLint flat config requires every config block
 // that references a plugin namespace to point at the *same* object, so the two
@@ -14,6 +15,7 @@ const localRulesPlugin = {
     "require-lucide-icon-aria": requireLucideIconAria,
     "require-button-wiring": requireButtonWiring,
     "restrict-suppress-hydration-warning": restrictSuppressHydrationWarning,
+    "no-hardcoded-hex": noHardcodedHex,
   },
 };
 
@@ -66,6 +68,7 @@ const eslintConfig = defineConfig([
     plugins: { local: localRulesPlugin },
     rules: {
       "local/require-button-wiring": "error",
+      "local/no-hardcoded-hex": "error",
     },
   },
   {
diff --git a/playwright.config.ts b/playwright.config.ts
index 897d06694..0228bef59 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -1,6 +1,9 @@
 import { defineConfig, devices } from "playwright/test";
+import { stableProjectPort } from "./src/lib/local-server-utils.mjs";
 import { getPlaywrightBaseUrl } from "./scripts/playwright-base-url";
 
+process.env.PORT = process.env.PORT || String(stableProjectPort(process.cwd()));
+
 const baseURL = getPlaywrightBaseUrl({ allowEnsure: false });
 
 // Sandboxed CI/cloud containers often ship a preinstalled Chromium and block
diff --git a/src/app/globals.css b/src/app/globals.css
index da1e65847..4ed855414 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2690,3 +2690,33 @@ html[data-motion="reduced"] .source-capsule-hit[aria-expanded="true"]:hover .sou
     transition: none;
   }
 }
+
+/* Theme switch micro-interaction (Improvement 2.2) */
+html.theme-transitioning,
+html.theme-transitioning *,
+html.theme-transitioning *:before,
+html.theme-transitioning *:after {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
+  transition-duration: 200ms !important;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html.theme-transitioning,
+  html.theme-transitioning *,
+  html.theme-transitioning *:before,
+  html.theme-transitioning *:after {
+    transition: none !important;
+  }
+}
+
+/* Windows High Contrast / Forced Colors Compatibility (Improvement 2.3) */
+@media (forced-colors: active) {
+  :root,
+  .dark {
+    --border: CanvasText;
+    --border-lux: CanvasText;
+    --border-strong: CanvasText;
+    --focus: Highlight;
+  }
+}
diff --git a/src/app/manifest.ts b/src/app/manifest.ts
index 2c8b94b61..a0f096697 100644
--- a/src/app/manifest.ts
+++ b/src/app/manifest.ts
@@ -1,10 +1,10 @@
 import type { MetadataRoute } from "next";
-import { APP_THEME_COLORS, DEFAULT_THEME } from "@/lib/theme";
 
 // PWA manifest — makes the app installable with a proper icon. Icons derive from
 // the single brand-mark source: the SVG for modern browsers, plus generated PNG
-// "any" and "maskable" sets from app/icons/[variant]. Colours match the light
-// default of viewport.themeColor in app/layout.tsx.
+// "any" and "maskable" sets from app/icons/[variant]. Theme colours stay on
+// viewport.themeColor / meta theme-color (see app/layout.tsx and use-theme.ts)
+// so light/dark can update without a static PWA manifest colour lock.
 export default function manifest(): MetadataRoute.Manifest {
   return {
     name: "Clinical KB",
@@ -22,8 +22,6 @@ export default function manifest(): MetadataRoute.Manifest {
     // Focus the already-open app window on launch instead of spawning a second
     // instance; "auto" lets platforms without the capability use their default.
     launch_handler: { client_mode: ["navigate-existing", "auto"] },
-    background_color: APP_THEME_COLORS[DEFAULT_THEME],
-    theme_color: APP_THEME_COLORS[DEFAULT_THEME],
     categories: ["medical", "productivity", "utilities"],
     prefer_related_applications: false,
     icons: [
diff --git a/src/components/clinical-dashboard/ClinicalSidebar.tsx b/src/components/clinical-dashboard/ClinicalSidebar.tsx
index b8b162c0f..b95f8065e 100644
--- a/src/components/clinical-dashboard/ClinicalSidebar.tsx
+++ b/src/components/clinical-dashboard/ClinicalSidebar.tsx
@@ -311,7 +311,7 @@ export function ClinicalSidebarContent({
           className="mt-2 flex w-full items-center gap-3 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-2 text-left shadow-[var(--shadow-inset)] transition hover:border-[color:var(--clinical-accent-border)] hover:bg-[color:var(--clinical-accent-soft)]/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]"
           aria-label={accountLabel}
         >
-          <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[color:var(--clinical-accent-soft)] text-xs font-bold text-[color:var(--clinical-accent)]">
+          <span className="grid size-tap shrink-0 place-items-center rounded-full bg-[color:var(--clinical-accent-soft)] text-xs font-bold text-[color:var(--clinical-accent)]">
             {identity.initials}
           </span>
           <span className="min-w-0 flex-1">
diff --git a/src/components/clinical-dashboard/provider-brand-icons.tsx b/src/components/clinical-dashboard/provider-brand-icons.tsx
index aa1c64512..8670a81c3 100644
--- a/src/components/clinical-dashboard/provider-brand-icons.tsx
+++ b/src/components/clinical-dashboard/provider-brand-icons.tsx
@@ -103,10 +103,10 @@ export function ProviderBrandMark({ provider }: { provider: SsoProvider }) {
         className="grid h-7 w-7 shrink-0 grid-cols-2 gap-0.5 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] p-1 shadow-[var(--shadow-inset)]"
         aria-hidden="true"
       >
-        <span className="bg-[#f25022]" />
-        <span className="bg-[#7fba00]" />
-        <span className="bg-[#00a4ef]" />
-        <span className="bg-[#ffb900]" />
+        <span style={{ backgroundColor: "#f25022" }} />
+        <span style={{ backgroundColor: "#7fba00" }} />
+        <span style={{ backgroundColor: "#00a4ef" }} />
+        <span style={{ backgroundColor: "#ffb900" }} />
       </span>
     );
   }
@@ -116,8 +116,9 @@ export function ProviderBrandMark({ provider }: { provider: SsoProvider }) {
       aria-hidden="true"
       className={cn(
         "grid h-7 w-7 shrink-0 place-items-center rounded-lg border border-[color:var(--border)] bg-[color:var(--surface)] text-base font-bold leading-none shadow-[var(--shadow-inset)]",
-        provider === "Apple" ? "text-[color:var(--text-heading)]" : "text-[#4285f4]",
+        provider === "Apple" ? "text-[color:var(--text-heading)]" : "",
       )}
+      style={provider === "Google" ? { color: "#4285f4" } : undefined}
     >
       {provider === "Apple" ? "A" : "G"}
     </span>
diff --git a/src/components/clinical-dashboard/settings-dialog.tsx b/src/components/clinical-dashboard/settings-dialog.tsx
index 55b006f08..020600b44 100644
--- a/src/components/clinical-dashboard/settings-dialog.tsx
+++ b/src/components/clinical-dashboard/settings-dialog.tsx
@@ -283,7 +283,7 @@ export function SettingsDialog({
       type="button"
       onClick={onClose}
       aria-label="Close settings"
-      className="grid h-9 w-9 shrink-0 place-items-center rounded-full border border-[color:var(--border)] bg-[color:var(--surface)]/70 text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] transition hover:bg-[color:var(--surface)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] lg:h-10 lg:w-10 lg:border-transparent lg:bg-transparent lg:shadow-none"
+      className="grid size-tap shrink-0 place-items-center rounded-full border border-[color:var(--border)] bg-[color:var(--surface)]/70 text-[color:var(--text-muted)] shadow-[var(--shadow-inset)] transition hover:bg-[color:var(--surface)] hover:text-[color:var(--text-heading)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)] lg:h-10 lg:w-10 lg:border-transparent lg:bg-transparent lg:shadow-none"
     >
       <X aria-hidden="true" className="size-icon-lg" />
     </button>
@@ -848,7 +848,7 @@ function SettingsGroup({ children }: { children: ReactNode }) {
 
 function IconBadge({ icon: Icon }: { icon: LucideIcon }) {
   return (
-    <span className="grid h-8 w-8 shrink-0 place-items-center rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-lux)] text-[color:var(--text-muted)] shadow-[var(--shadow-inset)]">
+    <span className="grid size-tap shrink-0 place-items-center rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-lux)] text-[color:var(--text-muted)] shadow-[var(--shadow-inset)]">
       <Icon aria-hidden="true" className="h-4 w-4" />
     </span>
   );
@@ -971,7 +971,7 @@ function SegmentedControl<T extends string>({
             aria-checked={checked}
             onClick={() => onChange(option.value)}
             className={cn(
-              "flex min-h-8 flex-auto items-center justify-center gap-1.5 whitespace-nowrap rounded-full px-3 text-xs font-semibold leading-none transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[color:var(--focus)]",
+              "flex min-h-tap flex-auto items-center justify-center gap-1.5 whitespace-nowrap rounded-full px-3 text-xs font-semibold leading-none transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[color:var(--focus)]",
               checked
                 ? "bg-[color:var(--clinical-accent)] text-[color:var(--clinical-accent-contrast)] shadow-[var(--shadow-tight)] forced-colors:outline forced-colors:outline-2 forced-colors:[outline-color:Highlight]"
                 : "text-[color:var(--text-muted)] hover:text-[color:var(--text-heading)]",
@@ -1208,7 +1208,7 @@ function SettingsProviderRow({
 
 function SettingsClinicalContextStrip({ jurisdictionShort }: { jurisdictionShort: string }) {
   return (
-    <div className="mt-2.5 flex min-h-8 items-center gap-2 rounded-full border border-[color:var(--clinical-accent)]/14 bg-[color:var(--clinical-accent-soft)]/60 px-3 text-xs font-semibold leading-none text-[color:var(--clinical-accent)] lg:hidden">
+    <div className="mt-2.5 flex min-h-tap items-center gap-2 rounded-full border border-[color:var(--clinical-accent)]/14 bg-[color:var(--clinical-accent-soft)]/60 px-3 text-xs font-semibold leading-none text-[color:var(--clinical-accent)] lg:hidden">
       <ShieldCheck aria-hidden="true" className="h-3.5 w-3.5 shrink-0" />
       <span className="min-w-0 truncate">
         Private<span className="hidden min-[360px]:inline"> workspace</span>{" "}
diff --git a/src/components/clinical-dashboard/use-theme.ts b/src/components/clinical-dashboard/use-theme.ts
index fac2929f8..b5d5562d8 100644
--- a/src/components/clinical-dashboard/use-theme.ts
+++ b/src/components/clinical-dashboard/use-theme.ts
@@ -82,8 +82,19 @@ function syncThemeColorMetadata(theme: ResolvedTheme) {
 }
 
 function applyResolvedTheme(theme: ResolvedTheme) {
-  document.documentElement.classList.toggle("dark", theme === "dark");
-  syncThemeColorMetadata(theme);
+  const isCurrentlyDark = document.documentElement.classList.contains("dark");
+  const willBeDark = theme === "dark";
+
+  if (isCurrentlyDark !== willBeDark) {
+    document.documentElement.classList.add("theme-transitioning");
+    document.documentElement.classList.toggle("dark", willBeDark);
+    syncThemeColorMetadata(theme);
+    window.setTimeout(() => {
+      document.documentElement.classList.remove("theme-transitioning");
+    }, 200);
+  } else {
+    syncThemeColorMetadata(theme);
+  }
 }
 
 function subscribeTheme(onStoreChange: () => void) {
diff --git a/src/components/favourites-page-mockups/favourites-library-redesign-page.tsx b/src/components/favourites-page-mockups/favourites-library-redesign-page.tsx
index 393e9a2d0..b56c61f25 100644
--- a/src/components/favourites-page-mockups/favourites-library-redesign-page.tsx
+++ b/src/components/favourites-page-mockups/favourites-library-redesign-page.tsx
@@ -184,8 +184,9 @@ const variants: Record<
     description: "A scalable library console with the action-first confidence of the command desk.",
     selectedId: "acamprosate-renal-screen",
     accent: "#007c89",
-    pageClassName: "bg-[#edf5f6] text-[#102033]",
-    commandClassName: "bg-[#007c89] text-white shadow-[0_14px_34px_rgba(0,124,137,0.24)] hover:bg-[#006c78]",
+    pageClassName: "bg-[color:var(--surface-lux)] text-[color:var(--text-heading)]",
+    commandClassName:
+      "bg-[color:var(--clinical-accent)] text-white shadow-[0_14px_34px_rgba(0,124,137,0.24)] hover:bg-[color:var(--clinical-accent-hover)]",
     resumeTitle: "Resume Acamprosate renal screen",
     resumeBody: "Open the ward-round renal caution page with source count, set context, and next action visible.",
     primaryFilter: "Recent",
@@ -197,8 +198,9 @@ const variants: Record<
     description: "A governance-heavy version for source state, review due work, and selected-item inspection.",
     selectedId: "lithium-monitoring-guideline",
     accent: "#1d4ed8",
-    pageClassName: "bg-[#f3f6fb] text-[#0f172a]",
-    commandClassName: "bg-[#1d4ed8] text-white shadow-[0_14px_34px_rgba(29,78,216,0.22)] hover:bg-[#1e40af]",
+    pageClassName: "bg-[color:var(--surface-raised)] text-[color:var(--text-heading)]",
+    commandClassName:
+      "bg-[color:var(--primary)] text-white shadow-[0_14px_34px_rgba(29,78,216,0.22)] hover:bg-[color:var(--primary-hover)]",
     resumeTitle: "Review lithium monitoring guideline",
     resumeBody: "Check pages 4-9, mark the PDF as reviewed, then ask against the document if needed.",
     primaryFilter: "Review due",
@@ -210,8 +212,9 @@ const variants: Record<
     description: "A library-first page that makes workflow sets the fastest way into saved material.",
     selectedId: "renal-dose-search",
     accent: "#047857",
-    pageClassName: "bg-[#eef6f1] text-[#10231d]",
-    commandClassName: "bg-[#047857] text-white shadow-[0_14px_34px_rgba(4,120,87,0.24)] hover:bg-[#03694c]",
+    pageClassName: "bg-[color:var(--surface-lux)] text-[color:var(--text-heading)]",
+    commandClassName:
+      "bg-[color:var(--success)] text-white shadow-[0_14px_34px_rgba(4,120,87,0.24)] hover:bg-[color:var(--success-hover)]",
     resumeTitle: "Run renal dose saved search",
     resumeBody: "Restart the ward-round saved query across medicines and documents before opening individual items.",
     primaryFilter: "Ward round",
@@ -225,16 +228,21 @@ const variantRoutes: Array<{ id: FavouritesLibraryRedesignVariant; href: string
 ];
 
 function statusClassName(state: ReviewState) {
-  if (state === "review-due") return "border-[#f5c56f] bg-[#fff7e8] text-[#9a5a00]";
-  if (state === "recent") return "border-[#b8c7ff] bg-[#eef3ff] text-[#244bc1]";
-  return "border-[#9fd8ce] bg-[#ecfbf7] text-[#006b57]";
+  if (state === "review-due")
+    return "border-[color:var(--warning-border)] bg-[color:var(--warning-soft)] text-[color:var(--warning)]";
+  if (state === "recent")
+    return "border-[color:var(--type-document-border)] bg-[color:var(--type-document-soft)] text-[color:var(--type-document)]";
+  return "border-[color:var(--success-border)] bg-[color:var(--success-soft)] text-[color:var(--success)]";
 }
 
 function kindClassName(kind: FavouriteKind) {
-  if (kind === "Medication") return "border-[#9fd8ce] bg-[#ecfbf7] text-[#006b57]";
-  if (kind === "Document") return "border-[#b8c7ff] bg-[#eef3ff] text-[#244bc1]";
-  if (kind === "Source") return "border-[#dec2ff] bg-[#f6efff] text-[#6d28a8]";
-  return "border-[#c9d3df] bg-[#f6f8fb] text-[#46586d]";
+  if (kind === "Medication")
+    return "border-[color:var(--success-border)] bg-[color:var(--success-soft)] text-[color:var(--success)]";
+  if (kind === "Document")
+    return "border-[color:var(--type-document-border)] bg-[color:var(--type-document-soft)] text-[color:var(--type-document)]";
+  if (kind === "Source")
+    return "border-[color:var(--type-source-border)] bg-[color:var(--type-source-soft)] text-[color:var(--type-source)]";
+  return "border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]";
 }
 
 function ShellPill({
@@ -250,7 +258,9 @@ function ShellPill({
     <span
       className={cn(
         "inline-flex min-h-9 items-center gap-2 rounded-lg border px-3 text-xs font-bold shadow-[inset_0_1px_0_rgba(255,255,255,0.75)]",
-        active ? "border-[#8fcdd2] bg-white text-[#005f6b]" : "border-[#d8e1e8] bg-white/72 text-[#536577]",
+        active
+          ? "border-[color:var(--border)] bg-white text-[color:var(--text-muted)]"
+          : "border-[color:var(--border)] bg-[color:var(--surface-highlight)] text-[color:var(--text-muted)]",
       )}
     >
       {Icon ? <Icon className="h-3.5 w-3.5" aria-hidden /> : null}
@@ -264,7 +274,9 @@ function IconTile({ icon: Icon, active = false }: { icon: LucideIcon; active?: b
     <span
       className={cn(
         "grid h-10 w-10 shrink-0 place-items-center rounded-lg border",
-        active ? "border-[#8fcdd2] bg-[#e6f7f8] text-[#007c89]" : "border-[#d8e1e8] bg-white text-[#536577]",
+        active
+          ? "border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]"
+          : "border-[color:var(--border)] bg-white text-[color:var(--text-muted)]",
       )}
     >
       <Icon className="h-4.5 w-4.5" aria-hidden />
@@ -303,8 +315,8 @@ function VariantSwitch({ active }: { active: FavouritesLibraryRedesignVariant })
               "inline-flex min-h-9 items-center rounded-lg border px-3 text-xs font-extrabold transition",
               focusRing,
               isActive
-                ? "border-[#8fcdd2] bg-white text-[#005f6b] shadow-[0_10px_26px_rgba(15,31,44,0.08)]"
-                : "border-[#d6e0e7] bg-white/68 text-[#536577] hover:bg-white",
+                ? "border-[color:var(--border)] bg-white text-[color:var(--text-muted)] shadow-[0_10px_26px_rgba(15,31,44,0.08)]"
+                : "border-[color:var(--border)] bg-[color:var(--surface-highlight)] text-[color:var(--text-muted)] hover:bg-white",
             )}
           >
             {config.eyebrow}: {config.label}
@@ -323,28 +335,32 @@ function PageHeader({ variant, selected }: { variant: FavouritesLibraryRedesignV
         <VariantSwitch active={variant} />
         <div className="mt-4 flex min-w-0 items-start gap-3">
           <span
-            className="grid h-12 w-12 shrink-0 place-items-center rounded-xl border border-[#b7dce0] bg-[#e7f6f7] text-[#007c89]"
+            className="grid h-12 w-12 shrink-0 place-items-center rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]"
             style={{ color: config.accent }}
           >
             <Heart className="h-6 w-6" aria-hidden />
           </span>
           <div className="min-w-0">
-            <p className="text-xs font-extrabold uppercase tracking-[0.12em] text-[#64748b]">{config.eyebrow}</p>
-            <h1 className="mt-1 text-balance text-3xl font-black leading-tight tracking-normal text-[#0f1f33] sm:text-4xl">
+            <p className="text-xs font-extrabold uppercase tracking-[0.12em] text-[color:var(--text-muted)]">
+              {config.eyebrow}
+            </p>
+            <h1 className="mt-1 text-balance text-3xl font-black leading-tight tracking-normal text-[color:var(--text-muted)] sm:text-4xl">
               {config.title}
             </h1>
-            <p className="mt-2 max-w-3xl text-sm font-semibold leading-6 text-[#526579]">{config.description}</p>
+            <p className="mt-2 max-w-3xl text-sm font-semibold leading-6 text-[color:var(--text-muted)]">
+              {config.description}
+            </p>
           </div>
         </div>
       </div>
 
       <div className="grid gap-3 lg:min-w-[34rem]">
-        <form className="grid min-h-12 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-xl border border-[#cfdbe5] bg-white px-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.85),0_14px_30px_rgba(15,31,44,0.06)]">
-          <Search className="h-5 w-5 text-[#64748b]" aria-hidden />
-          <span className="truncate text-sm font-bold text-[#526579]">
+        <form className="grid min-h-12 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-xl border border-[color:var(--border)] bg-white px-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.85),0_14px_30px_rgba(15,31,44,0.06)]">
+          <Search className="h-5 w-5 text-[color:var(--text-muted)]" aria-hidden />
+          <span className="truncate text-sm font-bold text-[color:var(--text-muted)]">
             Search favourites, sets, source notes or saved searches...
           </span>
-          <kbd className="rounded-md border border-[#d6e0e7] bg-[#f6f8fb] px-2 py-1 text-xs font-bold text-[#64748b]">
+          <kbd className="rounded-md border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-2 py-1 text-xs font-bold text-[color:var(--text-muted)]">
             Ctrl K
           </kbd>
         </form>
@@ -355,7 +371,7 @@ function PageHeader({ variant, selected }: { variant: FavouritesLibraryRedesignV
           <button
             type="button"
             className={cn(
-              "inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border border-[#d4dee8] bg-white px-3 text-sm font-extrabold text-[#0f1f33] shadow-[0_10px_24px_rgba(15,31,44,0.06)] transition hover:bg-[#f8fafc]",
+              "inline-flex min-h-10 items-center justify-center gap-2 rounded-lg border border-[color:var(--border)] bg-white px-3 text-sm font-extrabold text-[color:var(--text-muted)] shadow-[0_10px_24px_rgba(15,31,44,0.06)] transition hover:bg-[color:var(--surface-subtle)]",
               focusRing,
             )}
           >
@@ -379,7 +395,7 @@ function ResumeBand({ variant, selected }: { variant: FavouritesLibraryRedesignV
 
   return (
     <section className="grid gap-4 lg:grid-cols-[minmax(0,1.2fr)_minmax(18rem,0.8fr)]">
-      <div className="overflow-hidden rounded-xl border border-[#bfd7df] bg-white shadow-[0_18px_50px_rgba(16,32,51,0.08)]">
+      <div className="overflow-hidden rounded-xl border border-[color:var(--border)] bg-white shadow-[0_18px_50px_rgba(16,32,51,0.08)]">
         <div className="grid gap-4 p-4 sm:grid-cols-[auto_minmax(0,1fr)_auto] sm:items-center">
           <IconTile icon={selected.icon} active />
           <div className="min-w-0">
@@ -396,9 +412,13 @@ function ResumeBand({ variant, selected }: { variant: FavouritesLibraryRedesignV
                 {selected.reviewLabel}
               </span>
             </div>
-            <h2 className="mt-3 text-2xl font-black tracking-normal text-[#0f1f33]">{config.resumeTitle}</h2>
-            <p className="mt-1 max-w-3xl text-sm font-semibold leading-6 text-[#526579]">{config.resumeBody}</p>
-            <p className="mt-3 text-xs font-bold text-[#64748b]">
+            <h2 className="mt-3 text-2xl font-black tracking-normal text-[color:var(--text-muted)]">
+              {config.resumeTitle}
+            </h2>
+            <p className="mt-1 max-w-3xl text-sm font-semibold leading-6 text-[color:var(--text-muted)]">
+              {config.resumeBody}
+            </p>
+            <p className="mt-3 text-xs font-bold text-[color:var(--text-muted)]">
               {selected.set} / {selected.provenance} / {selected.lastUsed}
             </p>
           </div>
@@ -406,20 +426,24 @@ function ResumeBand({ variant, selected }: { variant: FavouritesLibraryRedesignV
             {selected.action}
           </CommandButton>
         </div>
-        <div className="grid border-t border-[#dbe5ec] bg-[#f8fbfc] sm:grid-cols-4">
+        <div className="grid border-t border-[color:var(--border)] bg-[color:var(--surface-subtle)] sm:grid-cols-4">
           {stats.map((stat) => {
             const Icon = stat.icon;
             return (
               <div
                 key={stat.label}
-                className="grid min-h-20 grid-cols-[auto_minmax(0,1fr)] items-center gap-3 border-t border-[#dbe5ec] px-4 first:border-t-0 sm:border-l sm:border-t-0 sm:first:border-l-0"
+                className="grid min-h-20 grid-cols-[auto_minmax(0,1fr)] items-center gap-3 border-t border-[color:var(--border)] px-4 first:border-t-0 sm:border-l sm:border-t-0 sm:first:border-l-0"
               >
-                <span className="grid h-9 w-9 place-items-center rounded-lg bg-white text-[#007c89] shadow-[inset_0_0_0_1px_var(--border)]">
+                <span className="grid h-9 w-9 place-items-center rounded-lg bg-white text-[color:var(--text-muted)] shadow-[inset_0_0_0_1px_var(--border)]">
                   <Icon className="h-4 w-4" aria-hidden />
                 </span>
                 <span className="min-w-0">
-                  <span className="block text-xl font-black leading-none text-[#0f1f33]">{stat.value}</span>
-                  <span className="mt-1 block truncate text-xs font-bold text-[#64748b]">{stat.label}</span>
+                  <span className="block text-xl font-black leading-none text-[color:var(--text-muted)]">
+                    {stat.value}
+                  </span>
+                  <span className="mt-1 block truncate text-xs font-bold text-[color:var(--text-muted)]">
+                    {stat.label}
+                  </span>
                 </span>
               </div>
             );
@@ -435,32 +459,34 @@ function ResumeBand({ variant, selected }: { variant: FavouritesLibraryRedesignV
 function ReviewQueue({ variant }: { variant: FavouritesLibraryRedesignVariant }) {
   const dueItem = favouriteRecords.find((item) => item.reviewState === "review-due") ?? favouriteRecords[1];
   return (
-    <aside className="rounded-xl border border-[#f2ce87] bg-[#fffaf0] p-4 shadow-[0_18px_50px_rgba(119,72,0,0.08)]">
+    <aside className="rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-4 shadow-[0_18px_50px_rgba(119,72,0,0.08)]">
       <div className="flex items-start justify-between gap-3">
         <div>
-          <p className="text-xs font-extrabold uppercase tracking-[0.12em] text-[#9a5a00]">Review queue</p>
-          <h2 className="mt-1 text-xl font-black text-[#301c00]">1 item needs confirmation</h2>
+          <p className="text-xs font-extrabold uppercase tracking-[0.12em] text-[color:var(--text-muted)]">
+            Review queue
+          </p>
+          <h2 className="mt-1 text-xl font-black text-[color:var(--text-muted)]">1 item needs confirmation</h2>
         </div>
-        <span className="grid h-10 w-10 place-items-center rounded-lg border border-[#f4c972] bg-white text-[#b66c00]">
+        <span className="grid h-10 w-10 place-items-center rounded-lg border border-[color:var(--border)] bg-white text-[color:var(--text-muted)]">
           <Clock3 className="h-4.5 w-4.5" aria-hidden />
         </span>
       </div>
-      <div className="mt-4 rounded-lg border border-[#f4c972] bg-white p-3">
+      <div className="mt-4 rounded-lg border border-[color:var(--border)] bg-white p-3">
         <div className="flex items-start gap-3">
           <IconTile icon={dueItem.icon} active={variant === "review-console"} />
           <div className="min-w-0">
-            <p className="truncate text-sm font-black text-[#0f1f33]">{dueItem.title}</p>
-            <p className="mt-1 text-xs font-bold text-[#6b7280]">
+            <p className="truncate text-sm font-black text-[color:var(--text-muted)]">{dueItem.title}</p>
+            <p className="mt-1 text-xs font-bold text-[color:var(--text-muted)]">
               {dueItem.set} / {dueItem.provenance}
             </p>
-            <p className="mt-2 text-xs font-extrabold text-[#b66c00]">Clinical review due in 7 days</p>
+            <p className="mt-2 text-xs font-extrabold text-[color:var(--text-muted)]">Clinical review due in 7 days</p>
           </div>
         </div>
       </div>
       <button
         type="button"
         className={cn(
-          "mt-3 inline-flex min-h-10 w-full items-center justify-center gap-2 rounded-lg border border-[#f4c972] bg-white px-3 text-sm font-extrabold text-[#7c4700] transition hover:bg-[#fff4dc]",
+          "mt-3 inline-flex min-h-10 w-full items-center justify-center gap-2 rounded-lg border border-[color:var(--border)] bg-white px-3 text-sm font-extrabold text-[color:var(--text-muted)] transition hover:bg-[color:var(--surface-subtle)]",
           focusRing,
         )}
       >
@@ -482,10 +508,10 @@ function FilterRail({ variant }: { variant: FavouritesLibraryRedesignVariant })
   ];
 
   return (
-    <aside className="min-w-0 rounded-xl border border-[#d6e0e7] bg-white/84 p-3 shadow-[0_16px_40px_rgba(15,31,44,0.06)]">
+    <aside className="min-w-0 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface-glass)] p-3 shadow-[0_16px_40px_rgba(15,31,44,0.06)]">
       <div className="flex items-center justify-between gap-2 px-1 py-2">
-        <h2 className="text-base font-black text-[#0f1f33]">Filters</h2>
-        <button type="button" className={cn("text-xs font-extrabold text-[#0b7285]", focusRing)}>
+        <h2 className="text-base font-black text-[color:var(--text-muted)]">Filters</h2>
+        <button type="button" className={cn("text-xs font-extrabold text-[color:var(--text-muted)]", focusRing)}>
           Reset
         </button>
       </div>
@@ -501,7 +527,9 @@ function FilterRail({ variant }: { variant: FavouritesLibraryRedesignVariant })
               className={cn(
                 "grid min-h-11 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-lg px-2.5 text-left text-sm font-extrabold transition",
                 focusRing,
-                active ? "bg-[#eaf6f8] text-[#005f6b]" : "text-[#536577] hover:bg-[#f6f8fb] hover:text-[#0f1f33]",
+                active
+                  ? "bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]"
+                  : "text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)] hover:text-[color:var(--text-muted)]",
               )}
             >
               <Icon className="h-4 w-4" aria-hidden />
@@ -511,10 +539,10 @@ function FilterRail({ variant }: { variant: FavouritesLibraryRedesignVariant })
           );
         })}
       </div>
-      <div className="my-4 border-t border-[#dbe5ec]" />
+      <div className="my-4 border-t border-[color:var(--border)]" />
       <div className="flex items-center justify-between gap-2 px-1">
-        <h3 className="text-sm font-black text-[#0f1f33]">Saved sets</h3>
-        <button type="button" className={cn("text-xs font-extrabold text-[#0b7285]", focusRing)}>
+        <h3 className="text-sm font-black text-[color:var(--text-muted)]">Saved sets</h3>
+        <button type="button" className={cn("text-xs font-extrabold text-[color:var(--text-muted)]", focusRing)}>
           New set
         </button>
       </div>
@@ -531,8 +559,8 @@ function FilterRail({ variant }: { variant: FavouritesLibraryRedesignVariant })
                 "grid min-h-14 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-lg border px-2.5 text-left transition",
                 focusRing,
                 active
-                  ? "border-[#8fcdd2] bg-[#eaf6f8] text-[#005f6b]"
-                  : "border-[#dbe5ec] bg-white text-[#536577] hover:bg-[#f8fafc]",
+                  ? "border-[color:var(--border)] bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]"
+                  : "border-[color:var(--border)] bg-white text-[color:var(--text-muted)] hover:bg-[color:var(--surface-subtle)]",
               )}
             >
               <Icon className="h-4 w-4" aria-hidden />
@@ -562,27 +590,38 @@ function SetNavigatorStrip({ variant }: { variant: FavouritesLibraryRedesignVari
             key={set.title}
             className={cn(
               "rounded-xl border bg-white p-4 shadow-[0_16px_40px_rgba(15,31,44,0.06)]",
-              active ? "border-[#7fc9b1] ring-2 ring-[color:var(--clinical-accent-border)]" : "border-[#d6e0e7]",
+              active
+                ? "border-[color:var(--border)] ring-2 ring-[color:var(--clinical-accent-border)]"
+                : "border-[color:var(--border)]",
             )}
           >
             <div className="flex items-start justify-between gap-3">
               <span
                 className={cn(
                   "grid h-11 w-11 place-items-center rounded-xl",
-                  active ? "bg-[#dff5eb] text-[#047857]" : "bg-[#f2f6f8] text-[#536577]",
+                  active
+                    ? "bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]"
+                    : "bg-[color:var(--surface-subtle)] text-[color:var(--text-muted)]",
                 )}
               >
                 <Icon className="h-5 w-5" aria-hidden />
               </span>
-              <span className="rounded-lg border border-[#d6e0e7] bg-[#f8fafc] px-2 py-1 text-xs font-black text-[#536577]">
+              <span className="rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-2 py-1 text-xs font-black text-[color:var(--text-muted)]">
                 {set.count} items
               </span>
             </div>
-            <h2 className="mt-4 text-lg font-black text-[#0f1f33]">{set.title}</h2>
-            <p className="mt-1 min-h-10 text-sm font-semibold leading-5 text-[#526579]">{set.summary}</p>
-            <div className="mt-4 grid grid-cols-2 gap-2 text-xs font-bold text-[#536577]">
+            <h2 className="mt-4 text-lg font-black text-[color:var(--text-muted)]">{set.title}</h2>
+            <p className="mt-1 min-h-10 text-sm font-semibold leading-5 text-[color:var(--text-muted)]">
+              {set.summary}
+            </p>
+            <div className="mt-4 grid grid-cols-2 gap-2 text-xs font-bold text-[color:var(--text-muted)]">
               <span>Last used {set.lastUsed}</span>
-              <span className={cn("text-right", set.reviewDue ? "text-[#b66c00]" : "text-[#047857]")}>
+              <span
+                className={cn(
+                  "text-right",
+                  set.reviewDue ? "text-[color:var(--text-muted)]" : "text-[color:var(--text-muted)]",
+                )}
+              >
                 {set.reviewDue ? `${set.reviewDue} review due` : "No review due"}
               </span>
             </div>
@@ -597,14 +636,16 @@ function LibraryTable({ variant, selected }: { variant: FavouritesLibraryRedesig
   const config = variants[variant];
 
   return (
-    <section className="min-w-0 overflow-hidden rounded-xl border border-[#d6e0e7] bg-white shadow-[0_18px_50px_rgba(15,31,44,0.08)]">
-      <div className="grid gap-3 border-b border-[#dbe5ec] bg-white p-4 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
+    <section className="min-w-0 overflow-hidden rounded-xl border border-[color:var(--border)] bg-white shadow-[0_18px_50px_rgba(15,31,44,0.08)]">
+      <div className="grid gap-3 border-b border-[color:var(--border)] bg-white p-4 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
         <div>
           <div className="flex flex-wrap items-center gap-2">
-            <h2 className="text-xl font-black text-[#0f1f33]">All favourites</h2>
-            <span className="rounded-md bg-[#eef3f6] px-2 py-1 text-xs font-black text-[#536577]">5 items</span>
+            <h2 className="text-xl font-black text-[color:var(--text-muted)]">All favourites</h2>
+            <span className="rounded-md bg-[color:var(--surface-subtle)] px-2 py-1 text-xs font-black text-[color:var(--text-muted)]">
+              5 items
+            </span>
           </div>
-          <p className="mt-1 text-sm font-semibold text-[#526579]">
+          <p className="mt-1 text-sm font-semibold text-[color:var(--text-muted)]">
             Primary action, source state, set context, and review state stay visible.
           </p>
         </div>
@@ -619,7 +660,7 @@ function LibraryTable({ variant, selected }: { variant: FavouritesLibraryRedesig
 
       <div className="overflow-x-auto">
         <div className="min-w-[38rem]">
-          <div className="grid min-h-12 grid-cols-[4.25rem_minmax(8.5rem,1.2fr)_5rem_5.5rem_5.75rem_5rem] items-center gap-2 border-b border-[#dbe5ec] bg-[#f7fafc] px-3 text-xs font-black uppercase tracking-[0.08em] text-[#64748b]">
+          <div className="grid min-h-12 grid-cols-[4.25rem_minmax(8.5rem,1.2fr)_5rem_5.5rem_5.75rem_5rem] items-center gap-2 border-b border-[color:var(--border)] bg-[color:var(--surface-subtle)] px-3 text-xs font-black uppercase tracking-[0.08em] text-[color:var(--text-muted)]">
             <span aria-hidden />
             <span>Name</span>
             <span>Type</span>
@@ -635,16 +676,20 @@ function LibraryTable({ variant, selected }: { variant: FavouritesLibraryRedesig
                 key={record.id}
                 href={record.href}
                 className={cn(
-                  "grid min-h-[5.5rem] grid-cols-[4.25rem_minmax(8.5rem,1.2fr)_5rem_5.5rem_5.75rem_5rem] items-center gap-2 border-b border-[#e4ebf1] px-3 py-3 last:border-b-0 transition",
+                  "grid min-h-[5.5rem] grid-cols-[4.25rem_minmax(8.5rem,1.2fr)_5rem_5.5rem_5.75rem_5rem] items-center gap-2 border-b border-[color:var(--border)] px-3 py-3 last:border-b-0 transition",
                   focusRing,
-                  isSelected ? "bg-[#edf7fb] shadow-[inset_3px_0_0_var(--clinical-accent)]" : "hover:bg-[#f8fafc]",
+                  isSelected
+                    ? "bg-[color:var(--surface-subtle)] shadow-[inset_3px_0_0_var(--clinical-accent)]"
+                    : "hover:bg-[color:var(--surface-subtle)]",
                 )}
               >
                 <span className="flex items-center gap-2">
                   <span
                     className={cn(
                       "grid h-5 w-5 place-items-center rounded border",
-                      isSelected ? "border-[#0b7285] bg-[#0b7285]" : "border-[#cbd8e3] bg-white",
+                      isSelected
+                        ? "border-[color:var(--border)] bg-[color:var(--surface-subtle)]"
+                        : "border-[color:var(--border)] bg-white",
                     )}
                   >
                     {isSelected ? <CheckCircle2 className="h-3.5 w-3.5 text-white" aria-hidden /> : null}
@@ -652,8 +697,12 @@ function LibraryTable({ variant, selected }: { variant: FavouritesLibraryRedesig
                   <IconTile icon={Icon} active={isSelected} />
                 </span>
                 <span className="min-w-0">
-                  <span className="block truncate text-sm font-black text-[#0f1f33]">{record.title}</span>
-                  <span className="mt-1 block truncate text-xs font-bold text-[#526579]">{record.summary}</span>
+                  <span className="block truncate text-sm font-black text-[color:var(--text-muted)]">
+                    {record.title}
+                  </span>
+                  <span className="mt-1 block truncate text-xs font-bold text-[color:var(--text-muted)]">
+                    {record.summary}
+                  </span>
                   <span className="mt-2 flex flex-wrap gap-1.5">
                     <span
                       className={cn(
@@ -663,7 +712,7 @@ function LibraryTable({ variant, selected }: { variant: FavouritesLibraryRedesig
                     >
                       {record.reviewLabel}
                     </span>
-                    <span className="inline-flex min-h-6 items-center rounded-md border border-[#d6e0e7] bg-white px-2 text-2xs font-black text-[#536577]">
+                    <span className="inline-flex min-h-6 items-center rounded-md border border-[color:var(--border)] bg-white px-2 text-2xs font-black text-[color:var(--text-muted)]">
                       {record.lastUsed}
                     </span>
                   </span>
@@ -673,18 +722,18 @@ function LibraryTable({ variant, selected }: { variant: FavouritesLibraryRedesig
                 >
                   {record.kind}
                 </span>
-                <span className="truncate text-xs font-bold text-[#334155]">{record.set}</span>
-                <span className="truncate text-xs font-bold text-[#047857]">{record.provenance}</span>
+                <span className="truncate text-xs font-bold text-[color:var(--text-muted)]">{record.set}</span>
+                <span className="truncate text-xs font-bold text-[color:var(--text-muted)]">{record.provenance}</span>
                 <span className="flex justify-end gap-1.5">
                   <span
                     className={cn(
-                      "inline-flex min-h-9 items-center justify-center rounded-lg border border-[#cfdbe5] bg-white px-2 text-xs font-black text-[#0f1f33]",
-                      isSelected && "border-[#8fcdd2] text-[#005f6b]",
+                      "inline-flex min-h-9 items-center justify-center rounded-lg border border-[color:var(--border)] bg-white px-2 text-xs font-black text-[color:var(--text-muted)]",
+                      isSelected && "border-[color:var(--border)] text-[color:var(--text-muted)]",
                     )}
                   >
                     {record.action}
                   </span>
-                  <span className="grid h-9 w-9 place-items-center rounded-lg border border-[#cfdbe5] bg-white text-[#64748b]">
+                  <span className="grid h-9 w-9 place-items-center rounded-lg border border-[color:var(--border)] bg-white text-[color:var(--text-muted)]">
                     <MoreHorizontal className="h-4 w-4" aria-hidden />
                   </span>
                 </span>
@@ -702,16 +751,16 @@ function Inspector({ selected, variant }: { selected: FavouriteRecord; variant:
   const related = favouriteRecords.filter((item) => item.id !== selected.id).slice(0, 3);
 
   return (
-    <aside className="min-w-0 rounded-xl border border-[#d6e0e7] bg-white shadow-[0_18px_50px_rgba(15,31,44,0.08)]">
-      <div className="flex min-h-12 items-center justify-between gap-3 border-b border-[#dbe5ec] px-4">
-        <h2 className="text-sm font-black text-[#0f1f33]">Selected item</h2>
-        <ChevronDown className="h-4 w-4 text-[#64748b]" aria-hidden />
+    <aside className="min-w-0 rounded-xl border border-[color:var(--border)] bg-white shadow-[0_18px_50px_rgba(15,31,44,0.08)]">
+      <div className="flex min-h-12 items-center justify-between gap-3 border-b border-[color:var(--border)] px-4">
+        <h2 className="text-sm font-black text-[color:var(--text-muted)]">Selected item</h2>
+        <ChevronDown className="h-4 w-4 text-[color:var(--text-muted)]" aria-hidden />
       </div>
       <div className="p-4">
         <div className="flex items-start gap-3">
           <IconTile icon={selected.icon} active />
           <div className="min-w-0">
-            <h3 className="text-xl font-black leading-tight text-[#0f1f33]">{selected.title}</h3>
+            <h3 className="text-xl font-black leading-tight text-[color:var(--text-muted)]">{selected.title}</h3>
             <div className="mt-2 flex flex-wrap gap-1.5">
               <span
                 className={cn(
@@ -733,8 +782,8 @@ function Inspector({ selected, variant }: { selected: FavouriteRecord; variant:
           </div>
         </div>
 
-        <div className="mt-4 rounded-lg border border-[#d6e0e7] bg-[#f8fafc] p-3">
-          <p className="text-xs font-black uppercase tracking-[0.1em] text-[#64748b]">Source details</p>
+        <div className="mt-4 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-3">
+          <p className="text-xs font-black uppercase tracking-[0.1em] text-[color:var(--text-muted)]">Source details</p>
           <dl className="mt-3 grid gap-2 text-sm">
             {[
               ["Set", selected.set],
@@ -743,21 +792,21 @@ function Inspector({ selected, variant }: { selected: FavouriteRecord; variant:
               ["Next action", selected.action],
             ].map(([label, value]) => (
               <div key={label} className="grid grid-cols-[6rem_minmax(0,1fr)] gap-3">
-                <dt className="font-bold text-[#64748b]">{label}</dt>
-                <dd className="min-w-0 truncate font-extrabold text-[#0f1f33]">{value}</dd>
+                <dt className="font-bold text-[color:var(--text-muted)]">{label}</dt>
+                <dd className="min-w-0 truncate font-extrabold text-[color:var(--text-muted)]">{value}</dd>
               </div>
             ))}
           </dl>
         </div>
 
-        <div className="mt-4 rounded-lg border border-[#f4c972] bg-[#fffaf0] p-3">
+        <div className="mt-4 rounded-lg border border-[color:var(--border)] bg-[color:var(--surface-subtle)] p-3">
           <div className="flex items-start gap-2">
-            <Clock3 className="mt-0.5 h-4 w-4 shrink-0 text-[#b66c00]" aria-hidden />
+            <Clock3 className="mt-0.5 h-4 w-4 shrink-0 text-[color:var(--text-muted)]" aria-hidden />
             <div>
-              <p className="text-sm font-black text-[#7c4700]">
+              <p className="text-sm font-black text-[color:var(--text-muted)]">
                 {selected.reviewState === "review-due" ? "Clinical review due" : "Governance note"}
               </p>
-              <p className="mt-1 text-xs font-semibold leading-5 text-[#7c5a20]">
+              <p className="mt-1 text-xs font-semibold leading-5 text-[color:var(--text-muted)]">
                 Keep source state visible before opening, asking, copying, or running saved material.
               </p>
             </div>
@@ -780,35 +829,35 @@ function Inspector({ selected, variant }: { selected: FavouriteRecord; variant:
                 key={action.label}
                 type="button"
                 className={cn(
-                  "inline-flex min-h-10 items-center justify-start gap-2 rounded-lg border border-[#d6e0e7] bg-white px-3 text-sm font-extrabold text-[#0f1f33] transition hover:bg-[#f8fafc]",
+                  "inline-flex min-h-10 items-center justify-start gap-2 rounded-lg border border-[color:var(--border)] bg-white px-3 text-sm font-extrabold text-[color:var(--text-muted)] transition hover:bg-[color:var(--surface-subtle)]",
                   focusRing,
                 )}
               >
-                <Icon className="h-4 w-4 text-[#64748b]" aria-hidden />
+                <Icon className="h-4 w-4 text-[color:var(--text-muted)]" aria-hidden />
                 {action.label}
               </button>
             );
           })}
         </div>
 
-        <div className="mt-5 border-t border-[#dbe5ec] pt-4">
-          <p className="text-xs font-black uppercase tracking-[0.1em] text-[#64748b]">Related items</p>
+        <div className="mt-5 border-t border-[color:var(--border)] pt-4">
+          <p className="text-xs font-black uppercase tracking-[0.1em] text-[color:var(--text-muted)]">Related items</p>
           <div className="mt-3 grid gap-2">
             {related.map((item) => (
               <Link
                 key={item.id}
                 href={item.href}
                 className={cn(
-                  "grid min-h-12 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-lg border border-[#d6e0e7] bg-white px-2.5 transition hover:bg-[#f8fafc]",
+                  "grid min-h-12 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-2 rounded-lg border border-[color:var(--border)] bg-white px-2.5 transition hover:bg-[color:var(--surface-subtle)]",
                   focusRing,
                 )}
               >
                 <IconTile icon={item.icon} />
                 <span className="min-w-0">
-                  <span className="block truncate text-xs font-black text-[#0f1f33]">{item.title}</span>
-                  <span className="block truncate text-2xs font-bold text-[#64748b]">{item.set}</span>
+                  <span className="block truncate text-xs font-black text-[color:var(--text-muted)]">{item.title}</span>
+                  <span className="block truncate text-2xs font-bold text-[color:var(--text-muted)]">{item.set}</span>
                 </span>
-                <ArrowRight className="h-3.5 w-3.5 text-[#64748b]" aria-hidden />
+                <ArrowRight className="h-3.5 w-3.5 text-[color:var(--text-muted)]" aria-hidden />
               </Link>
             ))}
           </div>
diff --git a/tests/pwa-manifest.test.ts b/tests/pwa-manifest.test.ts
index e6e07600a..7dfef9afd 100644
--- a/tests/pwa-manifest.test.ts
+++ b/tests/pwa-manifest.test.ts
@@ -3,7 +3,6 @@ import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { describe, expect, it } from "vitest";
 import manifest from "../src/app/manifest";
-import { APP_THEME_COLORS, DEFAULT_THEME } from "../src/lib/theme";
 
 describe("PWA manifest and public bootstrap resources", () => {
   const appManifest = manifest();
@@ -16,10 +15,12 @@ describe("PWA manifest and public bootstrap resources", () => {
       display: "standalone",
       lang: "en-AU",
       dir: "ltr",
-      background_color: APP_THEME_COLORS[DEFAULT_THEME],
-      theme_color: APP_THEME_COLORS[DEFAULT_THEME],
       prefer_related_applications: false,
     });
+    // Theme colours stay on viewport.themeColor / meta theme-color so light/dark
+    // can update at runtime; a static PWA manifest colour would lock install chrome.
+    expect(appManifest).not.toHaveProperty("background_color");
+    expect(appManifest).not.toHaveProperty("theme_color");
     expect(appManifest.name).toBeTruthy();
     expect(appManifest.short_name).toBeTruthy();
     expect(appManifest.description).toBeTruthy();