CSS variables in Firefox's userChrome.css do not take effect

Question

I'm using Firefox 72 on FreeBSD and configure some style in userChrome.css. This works fine. As an example, I can make the label of the "File" menu in the menu bar red with

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
#file-menu {
   color: red !important;
}

Now I heard of the new-fangled (not so much anymore, it would seem) CSS variable, aka CSS property --*, and tried to use them. Alas, I must be missing something because this:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
:root {
   --foo: red;
}
#file-menu {
   color: var(--foo) !important;
}

leaves "File" at the default color, black. Should this work? Am I missing something? After some searching I found that in about:config the value for toolkit.legacyUserProfileCustomizations.stylesheets should be true, which it is. Now I'm out of ideas.

Answer 1

The problem was the @namespace line. After deleting it, the CSS variables work.