Define css variables in variables.scss

What does this MR do?

Copy css vars over from dark mode to main variables.

Currently we have fallback values everywhere we use css vars, like this:

var(--gl-gray-500, $gl-gray-500);

this is gross. We should ideally not need the fallback

var(--gl-gray-500);

So the colors need to be defined for light theme as well.

There are potential import-order effects, since CSS vars should be imported after, whereas the SCSS variables are overridding !defaults in variables.scss. However, since the _dark.scss ones are defined in body.gl-dark they are specific enough to take precedence so this is probably fine.

Does this MR meet the acceptance criteria?