diff --git a/apps/public-docsite-v9/src/Concepts/Theming.mdx b/apps/public-docsite-v9/src/Concepts/Theming.mdx
index 0b116fa1418cc..446b7c2644a76 100644
--- a/apps/public-docsite-v9/src/Concepts/Theming.mdx
+++ b/apps/public-docsite-v9/src/Concepts/Theming.mdx
@@ -112,6 +112,10 @@ export const customDarkTheme = createDarkTheme(customBrandRamp);
 
 A theme is a flat object containing `{ [token name]: CSS value }` pairs. You can copy the object and overwrite any tokens you wish.
 
+Theme names and values are developer-authored CSS. If theme customization is based on dynamic data, validate it against
+an application-specific schema before constructing the theme. Fluent UI contains generated declarations structurally,
+but does not determine whether a valid CSS value or URL is appropriate for your application.
+
 ```tsx
 import { webLightTheme, Theme } from '@fluentui/react-components';
 
diff --git a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDescription.md b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDescription.md
index 2d6e57860012b..dc977f1871e2f 100644
--- a/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDescription.md
+++ b/apps/public-docsite-v9/src/Utilities/Theme/createCSSRuleFromTheme/createCSSRuleFromThemeDescription.md
@@ -1 +1,5 @@
 This API allows you to create CSS from a theme and apply this CSS, for example, to `<body>`.
+
+The selector and theme are developer-authored CSS. Validate dynamic data against an application-specific schema before
+using it to construct a theme. The generated declarations are structurally contained, but the API does not determine
+whether a valid CSS value or URL is appropriate for your application.
diff --git a/change/@fluentui-react-provider-8f64011f-66bb-4fae-bf5e-e52d91e39408.json b/change/@fluentui-react-provider-8f64011f-66bb-4fae-bf5e-e52d91e39408.json
new file mode 100644
index 0000000000000..ed3af4a6b461b
--- /dev/null
+++ b/change/@fluentui-react-provider-8f64011f-66bb-4fae-bf5e-e52d91e39408.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: structurally validate serialized theme tokens",
+  "packageName": "@fluentui/react-provider",
+  "email": "paulmardling@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/docs/react-v9/contributing/patterns/extending-tokens.md b/docs/react-v9/contributing/patterns/extending-tokens.md
index f26008de479f0..1fc1e94679843 100644
--- a/docs/react-v9/contributing/patterns/extending-tokens.md
+++ b/docs/react-v9/contributing/patterns/extending-tokens.md
@@ -4,6 +4,9 @@ It's often useful for an app to extend the base set of tokens from Fluent UI.
 
 ⚠ Warning that adding more tokens adds more CSS variables which can effect run time performance as each DOM Node carries all the tokens.
 
+Theme names and values are developer-authored CSS. Validate dynamic data against an application-specific schema before
+using it to construct or extend a theme.
+
 ```tsx
 import { makeStyles, themeToTokensObject, webLightTheme, FluentProvider, Theme } from '@fluentui/react-components';
 
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx
index 3bca12bf969f9..31496aace8e63 100644
--- a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx
+++ b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider-node.test.tsx
@@ -76,4 +76,28 @@ describe('FluentProvider (node)', () => {
       </div>"
     `);
   });
+
+  it('contains theme entries in the server style element', () => {
+    const theme = {
+      customToken: 'url(resource/*);token/**/)',
+      validToken: 'green',
+    } as unknown as PartialTheme;
+
+    const html = renderToStaticMarkup(<FluentProvider theme={theme} />);
+
+    expect(parseHTMLString(html)).toMatchInlineSnapshot(`
+      "<div
+        dir="ltr"
+        class="fui-FluentProvider fui-FluentProvider1"
+      >
+        <style id="fui-FluentProvider1">
+          .fui-FluentProvider1 {
+            --customToken: url(resource)\\3B token);
+            --validToken: green;
+          }
+        </style>
+      </div>"
+    `);
+    expect(html.match(/<style/g)).toHaveLength(1);
+  });
 });
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider.types.ts b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider.types.ts
index 4820905d6c014..67409af484178 100644
--- a/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider.types.ts
+++ b/packages/react-components/react-provider/library/src/components/FluentProvider/FluentProvider.types.ts
@@ -40,7 +40,12 @@ export type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir
   /** Provides the document, can be undefined during SSR render. */
   targetDocument?: Document;
 
-  /** Sets the theme used in a scope. */
+  /**
+   * Sets the theme used in a scope.
+   *
+   * Theme names and values are developer-authored CSS. Validate dynamic data against an application-specific schema
+   * before using it to construct a theme.
+   */
   theme?: PartialTheme;
 
   // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.test.ts b/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.test.ts
index 4ef3dce5e1dbb..6c41c364e89d2 100644
--- a/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.test.ts
+++ b/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.test.ts
@@ -1,7 +1,26 @@
+import {
+  teamsDarkTheme,
+  teamsHighContrastTheme,
+  teamsLightTheme,
+  themeToTokensObject,
+  webDarkTheme,
+  webLightTheme,
+} from '@fluentui/react-theme';
 import type { PartialTheme } from '@fluentui/react-theme';
 import { createCSSRuleFromTheme } from './createCSSRuleFromTheme';
 
 describe('createCSSRuleFromTheme', () => {
+  const noop = () => undefined;
+  let logWarnSpy: jest.Spied<typeof console.warn>;
+
+  beforeEach(() => {
+    logWarnSpy = jest.spyOn(console, 'warn').mockImplementation(noop);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   it('handles undefined theme', () => {
     expect(createCSSRuleFromTheme('.selector', undefined)).toMatchInlineSnapshot(`".selector {}"`);
   });
@@ -37,4 +56,197 @@ describe('createCSSRuleFromTheme', () => {
     expect(result).not.toContain('>');
     expect(result).toContain('\\3C /style\\3E \\3C script\\3E alert("xss")\\3C /script\\3E ');
   });
+
+  it.each([
+    { value: String.raw`<`, expected: String.raw`\3C ` },
+    { value: String.raw`\<`, expected: String.raw`\3C ` },
+    { value: String.raw`\\<`, expected: String.raw`\\\3C ` },
+    { value: String.raw`\\\<`, expected: String.raw`\\\3C ` },
+  ])('preserves backslash parity when escaping angle brackets in %j', ({ value, expected }) => {
+    expect(createCSSRuleFromTheme(value, undefined)).toBe(`${expected} {}`);
+  });
+
+  it.each([5_000, 10_000, 20_000, 100_000])(
+    'serializes matching and nonmatching backslash runs of length %i',
+    runLength => {
+      const backslashes = '\\'.repeat(runLength);
+      const theme = {
+        fontFamilyBase: `"${backslashes}x"`,
+        fontFamilyMonospace: `"${backslashes}<"`,
+      } as PartialTheme;
+
+      expect(createCSSRuleFromTheme(`.selector${backslashes}<`, theme)).toBe(
+        `.selector${backslashes}\\3C  { --fontFamilyBase: "${backslashes}x"; --fontFamilyMonospace: "${backslashes}\\3C ";  }`,
+      );
+    },
+  );
+
+  it.each([
+    { description: 'font family fallbacks', value: '"Segoe UI", system-ui, sans-serif' },
+    { description: 'system and functional colors', value: 'color-mix(in srgb, CanvasText 40%, transparent)' },
+    { description: 'nested functions and fallbacks', value: 'clamp(1rem, calc(var(--scale, 1) * 2vw), 3rem)' },
+    { description: 'multiple shadows', value: '0 1px 2px rgb(0 0 0 / 20%), 0 4px 8px rgba(0, 0, 0, 0.1)' },
+    { description: 'CSS-wide values', value: 'revert-layer' },
+    {
+      description: 'data URLs with nested delimiters',
+      value: 'url(data:image/svg+xml;charset=utf-8,%3Csvg%3E;%3C/svg%3E)',
+    },
+    { description: 'quoted delimiters', value: '"value; with { delimiters }"' },
+    { description: 'balanced blocks', value: 'custom({ value; [other] })' },
+    { description: 'comments', value: 'calc(1px /* ; } */ + 2px)' },
+    { description: 'escaped delimiters', value: String.raw`red\;blue` },
+    { description: 'escaped quotes', value: String.raw`"escaped \"quote\""` },
+    { description: 'escaped unquoted URL characters', value: String.raw`url(image\20 name.png)` },
+    { description: 'uppercase hexadecimal escaped URL name', value: String.raw`\55rl(resource/*)` },
+    { description: 'mixed hexadecimal escaped URL name', value: String.raw`u\52l(resource/*)` },
+    { description: 'uppercase hexadecimal escaped URL suffix', value: String.raw`ur\4c(resource/*)` },
+    { description: 'lowercase hexadecimal escaped URL name', value: String.raw`\75rl(resource/*)` },
+    { description: 'mixed simple and hexadecimal escaped URL name', value: String.raw`\U\72L(resource/*)` },
+    { description: 'hexadecimal escaped URL name with a space terminator', value: String.raw`\55 rl(resource/*)` },
+    {
+      description: 'hexadecimal escaped URL name with a CRLF terminator',
+      value: String.raw`u\52${'\r\n'}l(resource/*)`,
+    },
+    { description: 'zero-padded hexadecimal escaped URL name', value: String.raw`\000055rl(resource/*)` },
+    { description: 'escaped generic function names', value: String.raw`f\6f o((x); y)` },
+    { description: 'quoted URL functions with nested blocks', value: String.raw`url("image" (x); fallback)` },
+    { description: 'backslash and line feed', value: 'first\\\nsecond' },
+    { description: 'backslash and carriage return', value: 'first\\\rsecond' },
+    { description: 'backslash and form feed', value: 'first\\\fsecond' },
+    { description: 'multiline whitespace', value: 'calc(\n  1px + 2px\n)' },
+  ])('preserves $description', ({ value }) => {
+    const result = createCSSRuleFromTheme('.selector', { customToken: value } as unknown as PartialTheme);
+
+    expect(result).toBe(`.selector { --customToken: ${value};  }`);
+    expect(logWarnSpy).not.toHaveBeenCalled();
+  });
+
+  it('preserves supported custom token names and finite numeric values', () => {
+    const theme = {
+      'custom-token_1': 0,
+      customÜnicode: 'red',
+      'custom\\ token': 'blue',
+      'custom\\3A token': 'green',
+      'custom\\<token': 'purple',
+    } as unknown as PartialTheme;
+
+    expect(createCSSRuleFromTheme('.selector', theme)).toBe(
+      '.selector { --custom-token_1: 0; --customÜnicode: red; --custom\\ token: blue; --custom\\3A token: green; --custom\\3C token: purple;  }',
+    );
+    expect(logWarnSpy).not.toHaveBeenCalled();
+  });
+
+  it('serializes escaped custom token names consistently with themeToTokensObject', () => {
+    const escapedColonTheme = { ...webLightTheme, 'custom\\3A token': 'red' };
+    const escapedAngleTheme = { ...webLightTheme, 'custom\\<token': 'red' };
+
+    expect(createCSSRuleFromTheme('.selector', escapedColonTheme)).toContain('--custom\\3A token: red;');
+    expect(createCSSRuleFromTheme('.selector', escapedAngleTheme)).toContain('--custom\\3C token: red;');
+    expect(themeToTokensObject(escapedColonTheme)['custom\\3A token']).toBe('var(--custom\\3A token)');
+    expect(themeToTokensObject(escapedAngleTheme)['custom\\<token']).toBe('var(--custom\\<token)');
+  });
+
+  it.each(['', 'token name', 'token:name', 'token;name', 'token\\', 'token\\\nname'])(
+    'omits unsupported custom token name %j',
+    tokenName => {
+      const result = createCSSRuleFromTheme('.selector', { [tokenName]: 'red' } as PartialTheme);
+
+      expect(result).toBe('.selector {  }');
+      expect(logWarnSpy).toHaveBeenCalledWith(expect.stringContaining(JSON.stringify(tokenName)));
+    },
+  );
+
+  it.each([
+    { description: 'top-level semicolon', value: 'red;blue', containedValue: 'red\\3B blue' },
+    { description: 'unmatched closing block delimiter', value: 'red}', containedValue: 'red\\7D ' },
+    {
+      description: 'unquoted URL tokenization',
+      value: 'url(resource/*);token/**/)',
+      containedValue: 'url(resource/*)\\3B token/**/)',
+    },
+    {
+      description: 'escaped unquoted URL tokenization',
+      value: '\\000075\r\n\\000072\r\n\\00006c\r\n(resource/*);token/**/)',
+      containedValue: '\\000075\r\n\\000072\r\n\\00006c\r\n(resource/*)\\3B token/**/)',
+    },
+  ])('contains a value with $description without affecting later tokens', ({ value, containedValue }) => {
+    const theme = {
+      customToken: value,
+      colorBrandBackground: 'blue',
+    } as unknown as PartialTheme;
+
+    expect(createCSSRuleFromTheme('.selector', theme)).toBe(
+      `.selector { --customToken: ${containedValue}; --colorBrandBackground: blue;  }`,
+    );
+    expect(logWarnSpy).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    { description: 'mismatched delimiters', value: 'calc([1px)]' },
+    { description: 'unterminated function', value: 'calc(1px' },
+    { description: 'unterminated string', value: '"red' },
+    { description: 'unescaped string newline', value: '"red\n; color: red' },
+    { description: 'unterminated comment', value: 'red /* comment' },
+    { description: 'unterminated escape', value: 'red\\' },
+    { description: 'escaped whitespace in a generic function name', value: String.raw`ur\ l(resource{)` },
+    { description: 'non-URL escaped function name', value: String.raw`\54rl(resource/*)` },
+  ])('repairs a value with $description without affecting later tokens', ({ value }) => {
+    const ruleText = createCSSRuleFromTheme('.selector', {
+      customToken: value,
+      colorBrandBackground: 'blue',
+    } as unknown as PartialTheme);
+    const styleElement = document.createElement('style');
+    styleElement.textContent = ruleText;
+    document.head.appendChild(styleElement);
+
+    const rule = styleElement.sheet?.cssRules[0] as CSSStyleRule;
+    expect(rule.style.getPropertyValue('--colorBrandBackground')).toBe('blue');
+    expect(logWarnSpy).not.toHaveBeenCalled();
+
+    styleElement.remove();
+  });
+
+  it.each([
+    String.raw`\55rl(resource.png)`,
+    String.raw`u\52l(resource.png)`,
+    String.raw`ur\4c(resource.png)`,
+    String.raw`\55 rl(resource.png)`,
+  ])('preserves escaped unquoted URL syntax through CSSOM for %j', value => {
+    const styleElement = document.createElement('style');
+    styleElement.textContent = createCSSRuleFromTheme('.selector', {
+      customToken: value,
+    } as unknown as PartialTheme);
+    document.head.appendChild(styleElement);
+
+    const rule = styleElement.sheet?.cssRules[0] as CSSStyleRule;
+    expect(rule.style.getPropertyValue('--customToken')).toBe(value);
+
+    styleElement.remove();
+  });
+
+  it.each([
+    { description: 'non-finite number', value: Number.POSITIVE_INFINITY },
+    { description: 'non-primitive value', value: { color: 'red' } },
+  ])('omits a value with $description without affecting later tokens', ({ value }) => {
+    const theme = {
+      invalidToken: value,
+      colorBrandBackground: 'blue',
+    } as unknown as PartialTheme;
+
+    expect(createCSSRuleFromTheme('.selector', theme)).toBe('.selector { --colorBrandBackground: blue;  }');
+    expect(logWarnSpy).toHaveBeenCalledWith(expect.stringContaining('"invalidToken"'));
+    expect(logWarnSpy.mock.calls[0][0]).not.toContain(String(value));
+  });
+
+  it('serializes all values from exported themes', () => {
+    for (const theme of [webLightTheme, webDarkTheme, teamsLightTheme, teamsDarkTheme, teamsHighContrastTheme]) {
+      const result = createCSSRuleFromTheme('.selector', theme);
+
+      for (const [tokenName, tokenValue] of Object.entries(theme)) {
+        expect(result).toContain(`--${tokenName}: ${tokenValue};`);
+      }
+    }
+
+    expect(logWarnSpy).not.toHaveBeenCalled();
+  });
 });
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts b/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts
index 10a9fd214cf3e..1efbb973558f3 100644
--- a/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts
+++ b/packages/react-components/react-provider/library/src/components/FluentProvider/createCSSRuleFromTheme.ts
@@ -3,7 +3,17 @@ import type { PartialTheme } from '@fluentui/react-theme';
 const CSS_ESCAPE_MAP = {
   '<': '\\3C ',
   '>': '\\3E ',
+  ';': '\\3B ',
+  '{': '\\7B ',
+  '}': '\\7D ',
 };
+const THEME_TOKEN_NAME_PATTERN =
+  /^(?:[-_a-z0-9\u0080-\uFFFF]|\\(?:[0-9a-f]{1,6}(?:\r\n|[ \t\n\r\f])?|[^0-9a-f\n\r\f]))+$/i;
+const NAME_CHARACTER_PATTERN = /^[-_a-z0-9\u0080-\uFFFF]$/i;
+const ESCAPE_AT_START_PATTERN = /^\\(?:[0-9a-f]{1,6}(?:\r\n|[ \t\n\r\f])?|[^\n\r\f])/i;
+const URL_FUNCTION_PATTERN =
+  /^(?:u|\\(?:u|0{0,4}[57]5(?:\r\n|[ \t\n\r\f])?))(?:r|\\(?:r|0{0,4}[57]2(?:\r\n|[ \t\n\r\f])?))(?:l|\\(?:l|0{0,4}[46]c(?:\r\n|[ \t\n\r\f])?))$/i;
+
 /**
  * Escapes characters that could break out of a <style> tag during SSR.
  *
@@ -11,22 +21,169 @@ const CSS_ESCAPE_MAP = {
  * We only need to ensure the generated text cannot terminate the style tag and inject HTML.
  */
 function escapeForStyleTag(value: string): string {
-  // Escape as CSS code points so the resulting CSS still represents the same characters.
-  // Using CSS escapes prevents the HTML parser from seeing a literal '<' / '>' and closing <style>.
-  return value.replace(/[<>]/g, match => CSS_ESCAPE_MAP[match as keyof typeof CSS_ESCAPE_MAP]);
+  // Consume each backslash run once so matching does not retry overlapping suffixes.
+  return value.replace(/\\+[<>]?|[<>]/g, match => {
+    const bracket = match[match.length - 1] as '<' | '>' | '\\';
+    const runLength = bracket === '\\' ? match.length : match.length - 1;
+
+    return bracket === '\\' ? match : match.slice(runLength % 2, runLength) + CSS_ESCAPE_MAP[bracket];
+  });
+}
+
+function containThemeTokenValue(value: string): string {
+  const result = value.split('');
+  const blocks: string[] = [];
+  let identifier = '';
+  let quote = '';
+  let comment = false;
+  let urlState = 0;
+
+  for (let i = 0; i < value.length; i++) {
+    const character = value[i];
+    const nextCharacter = value[i + 1];
+
+    if (comment) {
+      if (character === '*' && nextCharacter === '/') {
+        comment = false;
+        i++;
+      }
+      continue;
+    }
+
+    if (quote) {
+      if (character === '\\') {
+        const escape = value.slice(i).match(ESCAPE_AT_START_PATTERN)?.[0];
+        if (escape) {
+          i += escape.length - 1;
+        } else if (nextCharacter === undefined) {
+          result[i] = '\\\n';
+        } else {
+          i += nextCharacter === '\r' && value[i + 2] === '\n' ? 2 : 1;
+        }
+      } else if (character === quote) {
+        quote = '';
+      } else if (/[\n\r\f]/.test(character)) {
+        result[i] = quote + character;
+        quote = '';
+      }
+      continue;
+    }
+
+    if (urlState) {
+      if (urlState === 1 && /[ \t\n\r\f]/.test(character)) {
+        continue;
+      }
+      if (urlState === 1 && (character === '"' || character === "'")) {
+        urlState = 0;
+        quote = character;
+        continue;
+      }
+      if (character === ')') {
+        blocks.pop();
+        urlState = 0;
+      } else if (character === '\\') {
+        const escape = value.slice(i).match(ESCAPE_AT_START_PATTERN)?.[0];
+        if (escape) {
+          i += escape.length - 1;
+        } else if (nextCharacter === undefined) {
+          result[i] = '\\\n';
+        }
+      } else {
+        urlState = 2;
+      }
+      continue;
+    }
+
+    if (NAME_CHARACTER_PATTERN.test(character)) {
+      identifier += character;
+      continue;
+    }
+
+    if (character === '\\') {
+      const escape = value.slice(i).match(ESCAPE_AT_START_PATTERN)?.[0];
+      if (escape) {
+        identifier += escape;
+        i += escape.length - 1;
+      } else {
+        identifier = '';
+        if (nextCharacter === undefined) {
+          result[i] = '\\\n';
+        }
+      }
+      continue;
+    }
+
+    const functionNameIsUrl = URL_FUNCTION_PATTERN.test(identifier);
+    identifier = '';
+
+    if (character === '/' && nextCharacter === '*') {
+      comment = true;
+      i++;
+    } else if (character === '"' || character === "'") {
+      quote = character;
+    } else if (character === '(' || character === '[' || character === '{') {
+      blocks.push(character === '(' ? ')' : character === '[' ? ']' : '}');
+      if (character === '(' && functionNameIsUrl) {
+        urlState = 1;
+      }
+    } else if (character === ')' || character === ']' || character === '}') {
+      const blockIndex = blocks.lastIndexOf(character);
+      if (blockIndex >= 0) {
+        result[i] =
+          blocks
+            .splice(blockIndex + 1)
+            .reverse()
+            .join('') + character;
+        blocks.pop();
+      } else if (character === '}') {
+        result[i] = CSS_ESCAPE_MAP[character];
+      }
+    } else if (character === ';' && blocks.length === 0) {
+      result[i] = CSS_ESCAPE_MAP[character];
+    }
+  }
+
+  return result.join('') + quote + (comment ? '*/' : '') + blocks.reverse().join('');
+}
+
+function warnInvalidThemeToken(tokenName: string, reason: 'name' | 'value'): void {
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `@fluentui/react-provider: Ignoring theme token ${JSON.stringify(
+        tokenName,
+      )} because its ${reason} is not valid for CSS custom property serialization.`,
+    );
+  }
 }
 
 /**
  * Creates a CSS rule from a theme object.
  *
  * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
+ * Theme names, values, and the selector are developer-authored CSS and must not be populated directly from untrusted
+ * data. This function structurally contains theme declarations, but does not validate whether CSS values are
+ * appropriate for a particular application.
  */
 export function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {
   const escapedSelector = escapeForStyleTag(selector);
 
   if (theme) {
     const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {
-      return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;
+      const tokenName = String(cssVar);
+      const tokenValue: unknown = theme[cssVar];
+
+      if (!THEME_TOKEN_NAME_PATTERN.test(tokenName)) {
+        warnInvalidThemeToken(tokenName, 'name');
+        return cssVarRule;
+      }
+
+      if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {
+        warnInvalidThemeToken(tokenName, 'value');
+        return cssVarRule;
+      }
+
+      return `${cssVarRule}--${tokenName}: ${containThemeTokenValue(String(tokenValue))}; `;
     }, '');
 
     return `${escapedSelector} { ${escapeForStyleTag(cssVarsAsString)} }`;
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx b/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
index e1be11e078268..7e0925465d141 100644
--- a/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
+++ b/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProviderThemeStyleTag.test.tsx
@@ -71,6 +71,27 @@ describe('useFluentProviderThemeStyleTag', () => {
     expect(rule.cssText).toMatchInlineSnapshot(`".fui-FluentProvider1 {--css-variable-1: 1; --css-variable-2: 2;}"`);
   });
 
+  it('should contain theme entries without affecting later CSS variables', () => {
+    const theme = {
+      customToken: 'red; color: red',
+      validToken: 'green',
+    } as unknown as Theme;
+
+    const { result } = renderHook(() =>
+      useFluentProviderThemeStyleTag({ theme, targetDocument: document, rendererAttributes: {} }),
+    );
+
+    const tag = document.getElementById(result.current.styleTagId) as HTMLStyleElement;
+    const sheet = tag.sheet as CSSStyleSheet;
+    const rule = sheet.cssRules[0] as CSSStyleRule;
+
+    expect(rule.style.getPropertyValue('--customToken')).toBe('red\\3B  color: red');
+    expect(rule.style.getPropertyValue('--validToken')).toBe('green');
+    expect(rule.cssText).toMatchInlineSnapshot(
+      `".fui-FluentProvider1 {--customToken: red\\\\3B  color: red; --validToken: green;}"`,
+    );
+  });
+
   it('should update style tag on theme change', () => {
     // Arrange
     let theme = defaultTheme;
