diff --git a/clients/web/.storybook/preview.tsx b/clients/web/.storybook/preview.tsx
index 6b419a43..e1669ea0 100644
--- a/clients/web/.storybook/preview.tsx
+++ b/clients/web/.storybook/preview.tsx
@@ -1,14 +1,11 @@
 import type { Preview } from "@storybook/react-vite";
-import {
-  MantineProvider,
-  useMantineColorScheme,
-  type CSSVariablesResolver,
-} from "@mantine/core";
+import { MantineProvider, useMantineColorScheme } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
 import "../src/App.css";
 import { theme } from "../src/theme/theme";
+import { cssVariablesResolver } from "../src/theme/cssVariables";
 import { useEffect } from "react";
 
 // eslint-disable-next-line react-refresh/only-export-components
@@ -28,14 +25,6 @@ function ColorSchemeWrapper({
   return <>{children}</>;
 }
 
-const resolver: CSSVariablesResolver = () => ({
-  variables: {},
-  light: {},
-  dark: {
-    "--mantine-color-body": "var(--mantine-color-dark-9)",
-  },
-});
-
 const preview: Preview = {
   globalTypes: {
     colorScheme: {
@@ -61,7 +50,7 @@ const preview: Preview = {
         <MantineProvider
           theme={theme}
           defaultColorScheme="light"
-          cssVariablesResolver={resolver}
+          cssVariablesResolver={cssVariablesResolver}
         >
           <ColorSchemeWrapper
             colorScheme={context.globals.colorScheme ?? "light"}
diff --git a/clients/web/src/main.tsx b/clients/web/src/main.tsx
index 662352e8..fb8a3562 100644
--- a/clients/web/src/main.tsx
+++ b/clients/web/src/main.tsx
@@ -1,29 +1,20 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { MantineProvider, type CSSVariablesResolver } from "@mantine/core";
+import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import "@mantine/core/styles.css";
 import "@mantine/notifications/styles.css";
 import "./App.css";
 import { theme } from "./theme/theme";
+import { cssVariablesResolver } from "./theme/cssVariables";
 import App from "./App";
 
-const resolver: CSSVariablesResolver = () => ({
-  variables: {},
-  light: {},
-  dark: {
-    // Matches `.storybook/preview.tsx` so the dev app and the story preview
-    // share the same dark-mode page background.
-    "--mantine-color-body": "var(--mantine-color-dark-9)",
-  },
-});
-
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <MantineProvider
       theme={theme}
       defaultColorScheme="auto"
-      cssVariablesResolver={resolver}
+      cssVariablesResolver={cssVariablesResolver}
     >
       <Notifications position="bottom-right" />
       <App />
diff --git a/clients/web/src/test/renderWithMantine.tsx b/clients/web/src/test/renderWithMantine.tsx
index ea291c6b..677d9ca0 100644
--- a/clients/web/src/test/renderWithMantine.tsx
+++ b/clients/web/src/test/renderWithMantine.tsx
@@ -3,6 +3,7 @@ import { act, render, type RenderOptions } from "@testing-library/react";
 import { MantineProvider, type MantineColorScheme } from "@mantine/core";
 import { afterEach, expect, vi } from "vitest";
 import { theme } from "../theme/theme";
+import { cssVariablesResolver } from "../theme/cssVariables";
 
 // Options accepted by both render helpers: the standard RTL options (minus
 // `wrapper`, which we own) plus an optional forced `colorScheme`. The default
@@ -30,7 +31,12 @@ export type MantineTransitionsRenderOptions = MantineRenderOptions & {
 function makeWrapper(env: "test" | "default", colorScheme: MantineColorScheme) {
   return function Wrapper({ children }: { children: ReactNode }) {
     return (
-      <MantineProvider theme={theme} defaultColorScheme={colorScheme} env={env}>
+      <MantineProvider
+        theme={theme}
+        defaultColorScheme={colorScheme}
+        env={env}
+        cssVariablesResolver={cssVariablesResolver}
+      >
         {children}
       </MantineProvider>
     );
diff --git a/clients/web/src/theme/cssVariables.ts b/clients/web/src/theme/cssVariables.ts
new file mode 100644
index 00000000..11bad0f9
--- /dev/null
+++ b/clients/web/src/theme/cssVariables.ts
@@ -0,0 +1,34 @@
+import type { CSSVariablesResolver } from "@mantine/core";
+
+/**
+ * Overrides for the Mantine CSS variables that `MantineProvider` injects at
+ * runtime.
+ *
+ * These cannot be set from `App.css`: the provider appends its generated
+ * `<style>` block after the stylesheet imports, so a `:root` rule there loses
+ * to it on source order at equal specificity. `cssVariablesResolver` is the
+ * supported seam, which is why this lives in the theme layer beside the
+ * `Component.extend()` variants rather than with the `--inspector-*` tokens.
+ *
+ * Shared by all three `MantineProvider` sites — the app (`main.tsx`), the
+ * Storybook preview, and `renderWithMantine` — so the dev app, the story
+ * preview, and the tests cannot disagree about a token's value. It used to be
+ * duplicated in the first two and absent from the third.
+ */
+export const cssVariablesResolver: CSSVariablesResolver = () => ({
+  variables: {},
+  light: {
+    // Mantine defaults `--mantine-color-error` to `red-6`, which is 4.48:1 on
+    // white — under the 4.5:1 WCAG AA threshold that applies at the 12px size
+    // it renders input error text. `red-7` is 5.72:1.
+    "--mantine-color-error": "var(--mantine-color-red-7)",
+  },
+  dark: {
+    "--mantine-color-body": "var(--mantine-color-dark-9)",
+    // The dark default is `red-8`, which is 1.93:1 on this body color — far
+    // worse than the light-mode miss. `red-4` is 6.44:1, and is the same
+    // one-to-two-step lift `App.css` already applies to the semantic
+    // status/log reds for dark.
+    "--mantine-color-error": "var(--mantine-color-red-4)",
+  },
+});
diff --git a/clients/web/src/theme/index.ts b/clients/web/src/theme/index.ts
index 37ec7a43..313c2ac5 100644
--- a/clients/web/src/theme/index.ts
+++ b/clients/web/src/theme/index.ts
@@ -1,3 +1,4 @@
+export { cssVariablesResolver } from "./cssVariables";
 export { ThemeAccordion } from "./Accordion";
 export { ThemeActionIcon } from "./ActionIcon";
 export { ThemeAlert } from "./Alert";