diff --git a/packages/config/css/theme.css b/packages/config/css/theme.css
index 081452ba09f..71b0255cd58 100644
--- a/packages/config/css/theme.css
+++ b/packages/config/css/theme.css
@@ -37,7 +37,7 @@
   --color-foreground-light: var(--muted-foreground);
   --color-foreground-lighter: var(--tertiary-foreground);
   --color-foreground-muted: var(--foreground-muted);
-  --color-foreground-contrast: var(--primary-foreground);
+  --color-foreground-contrast: var(--foreground-contrast);
   --color-background-200: var(--background-200);
   --color-background-alternative-200: var(--background-alternative-200);
   --color-background-alternative: var(--background-alternative-default);
@@ -346,7 +346,7 @@
   --text-color-light: var(--muted-foreground);
   --text-color-lighter: var(--tertiary-foreground);
   --text-color-muted: var(--foreground-muted);
-  --text-color-contrast: var(--primary-foreground);
+  --text-color-contrast: var(--foreground-contrast);
 
   /* misc theme tokens — typography, breakpoints, sizing, transform-origin */
   --font-sans: var(
diff --git a/packages/ui/build/css/source/compat.css b/packages/ui/build/css/source/compat.css
index f2806ed468b..23ea0b3b44d 100644
--- a/packages/ui/build/css/source/compat.css
+++ b/packages/ui/build/css/source/compat.css
@@ -16,7 +16,7 @@
   --foreground-light: var(--muted-foreground);
   --foreground-lighter: var(--tertiary-foreground);
   --foreground-muted: var(--tertiary-foreground);
-  --foreground-contrast: var(--primary-foreground);
+  /* --foreground-contrast lives in semantic.css — do not remap to --primary-foreground */
 
   /* Legacy background aliases */
   --background-default: var(--background);
diff --git a/packages/ui/build/css/source/semantic.css b/packages/ui/build/css/source/semantic.css
index 4734b7144f6..2e205a4c7cc 100644
--- a/packages/ui/build/css/source/semantic.css
+++ b/packages/ui/build/css/source/semantic.css
@@ -143,6 +143,10 @@
     calc(var(--surface) + var(--tone-span) * var(--contrast-text)) calc(var(--chroma) * 0.55)
       var(--surface-hue)
   );
+  /* Inverse of --foreground: canvas-coloured text for use on inverted fills
+     (bg-foreground, bg-black / dark:bg-white, etc). Not the same as
+     --primary-foreground, which stays dark for the vivid primary fill. */
+  --foreground-contrast: oklch(var(--surface) calc(var(--chroma) * 0.55) var(--surface-hue));
 
   --card: oklch(from var(--background) calc(l + var(--elevation-step) * var(--elevation-1)) c h);
   --card-foreground: var(--foreground);