diff --git a/webviews/src/agent-session/acpmux/composerStates.css b/webviews/src/agent-session/acpmux/composerStates.css
index 07ba2a5d17b0..9e4eb0dee212 100644
--- a/webviews/src/agent-session/acpmux/composerStates.css
+++ b/webviews/src/agent-session/acpmux/composerStates.css
@@ -25,7 +25,7 @@
      lighter than the page (near white, as Aside's and ChatGPT's are); in a dark theme one small step
      toward the text, as the theme's elevated surface. Solid, so it sits as chrome over a wallpaper. */
   --acpmux-composer-surface: light-dark(
-    color-mix(in srgb, var(--cmux-surface-solid, var(--acpmux-base)) 35%, white),
+    color-mix(in srgb, var(--cmux-surface-solid, var(--acpmux-base)) 35%, var(--cmux-tone-light)),
     color-mix(in srgb, var(--agent-text) 7%, var(--cmux-surface-solid, var(--acpmux-base)))
   );
   /* The composer's shadow (cg-design-judge, 10-14): the shared --elevation-1 in a light theme;
diff --git a/webviews/src/pages/shared/desktop.css b/webviews/src/pages/shared/desktop.css
index cb06944d3203..31de6a884eab 100644
--- a/webviews/src/pages/shared/desktop.css
+++ b/webviews/src/pages/shared/desktop.css
@@ -31,6 +31,9 @@
      page zoom; the media query below is the value before it runs. */
   --cmux-hairline: 1px;
   --cmux-hairline-ring: 1px;
+  /* The light end of the tonal scale: what a light theme's raised surfaces lift toward, as the
+     native opaque fill does (`ThemeTokens.opaqueOverlayFill` mixes a light page toward white). */
+  --cmux-tone-light: #fff; /* theme-fixed: the tonal scale's light end, as native ThemeTokens */
   /* The highlighted row of a menu, list or palette (keyboard or pointer): a tint one step past
      hover (the text at about 6%), never a ring and never the accent's selection tint. The left
      bar in the theme accent is an option, 0 (off) by default. */