diff --git a/frontend/src/utils/chartTheme.ts b/frontend/src/utils/chartTheme.ts
index 51d7666..0fd7cec 100644
--- a/frontend/src/utils/chartTheme.ts
+++ b/frontend/src/utils/chartTheme.ts
@@ -30,7 +30,12 @@ import { tokens } from "@fluentui/react-components";
 export function resolveFluentToken(tokenValue: string): string {
   const match = /var\((--[^,)]+)/.exec(tokenValue);
   if (match == null || match[1] == null) return tokenValue;
-  const resolved = getComputedStyle(document.documentElement)
+
+  // FluentProvider injects CSS custom properties on its own wrapper <div>,
+  // not on :root. Query that element so we resolve actual colour values.
+  const el =
+    document.querySelector(".fui-FluentProvider") ?? document.documentElement;
+  const resolved = getComputedStyle(el)
     .getPropertyValue(match[1])
     .trim();
   return resolved !== "" ? resolved : tokenValue;