In CSS3, is it possible to put colours in a separate stylesheet?

See more:

CSS3

This works as expected:

:root { --stop1: #aaaaaa; --stop2: #666666; }

#new-website
{
	background-image: radial-gradient( ellipse at top right, var(--stop1), var(--stop2) );
}

However, what I would like to do it put the colour 'constants' in a separate 'colour.css' file. But this doesn't seem to work.

Can this be done? I thought the whole point of CSS variables was to allow things like colours to be placed in one central location. What am I doing wrong?

What I have tried:

I have tried changing the order of the stylesheet link references in the HTML file that uses this CSS.

I have also tried importing the 'colours.css' file into the stylesheet that defines the radial gradient, like this:

@import "colour.css";

#new-website
{
	background-image: radial-gradient( ellipse at top right, var(--stop1), var(--stop2) );
}

In both these cases, the HTML document acts as though the colours are not found.