diff --git a/packages/ui/build/css/source/semantic.css b/packages/ui/build/css/source/semantic.css
index 2e205a4c7cc..68e4e1c263e 100644
--- a/packages/ui/build/css/source/semantic.css
+++ b/packages/ui/build/css/source/semantic.css
@@ -81,7 +81,11 @@
    * beneath (lightens in dark, darkens in light). Steps: muted (e1) → accent
    * (e2) → tertiary (e3).
    */
-  --surface-overlay-unit: calc(var(--elevation-step) / abs(var(--tone-span)));
+  /* max(span, -span) is equivalent to abs(span), but works across the browser
+     versions supported by Tailwind v4. */
+  --surface-overlay-unit: calc(
+    var(--elevation-step) / max(var(--tone-span), calc(var(--tone-span) * -1))
+  );
   --muted-alpha: calc(var(--surface-overlay-unit) * var(--elevation-1));
   --accent-alpha: calc(var(--surface-overlay-unit) * var(--elevation-2));
   --tertiary-alpha: calc(var(--surface-overlay-unit) * var(--elevation-3));
@@ -139,8 +143,9 @@
 
   /* shadcn semantic pairs */
   --background: oklch(var(--surface) calc(var(--chroma) * 0.5) var(--surface-hue));
+  --foreground-chroma: calc(var(--chroma) * 0.55);
   --foreground: oklch(
-    calc(var(--surface) + var(--tone-span) * var(--contrast-text)) calc(var(--chroma) * 0.55)
+    calc(var(--surface) + var(--tone-span) * var(--contrast-text)) var(--foreground-chroma)
       var(--surface-hue)
   );
   /* Inverse of --foreground: canvas-coloured text for use on inverted fills
@@ -174,8 +179,8 @@
       var(--tertiary-foreground-level) * 0.5 * var(--contrast-down)
   );
   --tertiary-foreground: oklch(
-    from var(--foreground) calc(var(--surface) + var(--tone-span) * var(--tertiary-foreground-mix))
-      c h
+    calc(var(--surface) + var(--tone-span) * var(--tertiary-foreground-mix))
+      var(--foreground-chroma) var(--surface-hue)
   );
   --muted: oklch(from var(--foreground) l c h / var(--muted-alpha));
   --muted-foreground-mix: calc(
@@ -183,7 +188,8 @@
       var(--muted-foreground-level) * 0.5 * var(--contrast-down)
   );
   --muted-foreground: oklch(
-    from var(--foreground) calc(var(--surface) + var(--tone-span) * var(--muted-foreground-mix)) c h
+    calc(var(--surface) + var(--tone-span) * var(--muted-foreground-mix)) var(--foreground-chroma)
+      var(--surface-hue)
   );
   --accent: oklch(from var(--foreground) l c h / var(--accent-alpha));
   --accent-foreground: var(--foreground);
diff --git a/packages/ui/build/css/themes/light.css b/packages/ui/build/css/themes/light.css
index 8cbccc0ffbf..8f8a7e42e71 100644
--- a/packages/ui/build/css/themes/light.css
+++ b/packages/ui/build/css/themes/light.css
@@ -38,7 +38,7 @@
   --secondary-default: 247.8deg 100% 70%;
   --secondary-400: 248.3deg 54.5% 25.9%;
   --secondary-200: 248deg 53.6% 11%;
-  --brand-link: 153.4deg 86.5% 28.3%;
+  --brand-link: 153.4deg 86.5% 27.8%;
   --brand-default: 152.9deg 60% 52.9%;
   --brand-600: 156.5deg 86.5% 26.1%;
   --brand-500: 155.3deg 78.4% 40%;