Is there anyway to use the theme() syntax for declaring a css variable with tailwind and using an opacity modifier after?

/*globals.css*/
@layer base {
  :root {
    /*these work fine*/

    --almost-black: 12 12 12;
    --body-color: var(--almost-black);
    --sub-text-color: 107 114 128;

    /*these break when used with opacity modifier syntax*/

    --background-color: theme("colors.gray.50");
    --color-primary: theme("colors.purple.600");
    --color-secondary: theme("colors.purple.300");
  }
}

// my tailwind config
const config: Config = {
 ...
  theme: {
    extend: {
      colors: {
        'body': 'rgb(var(--body-color))',
        'sub-text': 'rgb(var(--sub-text-color))',
        'background': 'rgb(var(--background-color))', // tried this just to sanity test but ofcourse it doesnt work because the output of `theme(colors)` is a hex value 
        'primary': 'var(--color-primary)',
        'secondary': 'var(--color-secondary)',
      }
    },
  },
};

Lets say I added this class to an element bg-background/50
Tailwind would know what I want and output some css like this

:is(.dark .dark:bg-background/50) {
    background-color: rgb(var(--background-color) / 0.5);
}

But if I wanted to use this, there does not seem to be a way. You’ll notice that that page mentions opacity syntax, however it does not speak about using it with a variable, only a hard coded value.