Changing the colour of a button using values

I want to change the colour of the radio button. I can do this within inspect by changing --text-dark: var(---color-text-dark); to --text-dark: red;.

However when I make this change within theme.dev.css - it stays the same colour as it was.

this is the code in the theme.dev.css file:

.palette--light,
:root {
 --bg: var(---color-bg);
 --bg-accent: var(---color-bg-accent);
 --text-dark: var(---color-text-dark);
 --text: var(---color-text);
 --text-light: var(---color-text-light);
 --hover: var(---color-a95);
 --muted: var(---color-a35);
 --border: var(---color-a20);
 --hairline: var(---color-a5);
 --hairline-hover: var(---color-a10);
 --contrast: #000;
 --primary: var(---color-primary);
 --primary-fade: var(---color-primary-fade);
 --secondary: var(---color-secondary);
 --secondary-fade: var(---color-secondary-fade);
} 

I think the variables are being defined here:

.palette--dark,
.palette--light,
.main-content {
 color: var(--text);
 background-color: var(--bg);
}

.default--accent {
 --bg: var(---color-bg-accent);
}

.default--accent--inverse {
 --bg: var(---inverse-bg-accent);
}

.text--neutral {
 --text-dark: var(---color-text-dark);
 --text: var(---color-text);
 --text-light: var(---color-text-light);
}

.text--black {
 --text: #000;
 --text-light: #000;
 --text-dark: #000;
}

.text--primary {
 --text: var(---color-primary);
 --text-light: var(---color-primary);
 --text-dark: var(---color-primary);
}

.text--secondary {
 --text: var(---color-secondary);
 --text-light: var(---color-secondary);
 --text-dark: var(---color-secondary);
}

.text--white {
 --text: #FFF;
 --text-light: #FFF;
 --text-dark: #F7F7F7;
}

.text--invert--primary {
 --text: var(---inverse-primary);
 --text-light: var(---inverse-primary);
 --text-dark: var(---inverse-primary);
}

.text--invert--secondary {
 --text: var(---inverse-secondary);
 --text-light: var(---inverse-secondary);
 --text-dark: var(---inverse-secondary);
}

.text--invert {
 --text: var(---inverse-a90);
 --text-light: var(---inverse-a80);
 --text-dark: var(---inverse-text);
}

.bg--neutral {
 --bg: var(---color-bg);
}

.bg--accent {
 --bg: var(---color-bg-accent);
}

.bg--invert {
 --bg: var(---inverse-bg);
}

.bg--invert--accent {
 --bg: var(---inverse-bg-accent);
}

.bg--white {
 --bg: #FFF;
}

.bg--black {
 --bg: #000;
}

.bg--primary {
 --bg: var(---color-primary);
}

.bg--secondary {
 --bg: var(---color-secondary);
}

.bg--invert--primary {
 --bg: var(---inverse-primary);
}

.bg--invert--secondary {
 --bg: var(---inverse-secondary);
}

Whenever I make a change to the code. It doesn't affect the actual look of the buttons. What am I supposed to be changing/ targeting?