Similar to https://gohugo.io/functions/css/sass/#vars

But for plain CSS variables.

So, you would do:

@import "hugo:vars";
@import "someother.css";

body {
   background-color: var(--primary-color);
}

And in the template:

{{ with resources.Get "sass/main.css" }}
  {{ $opts := dict
    "vars" (dict "primary-color" "blue"))
  }}
  {{ with . | css.Build $opts }}
      <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{ end }}
{{ end }}

• I think these variables would always need to end up in the global scope.
• As to variable names, I suggest we do it simple:
  - Prefix with "--" if not already (also, look at how we do it for Sass)
  - I need to do some testing/investigation as to data types printing, but I suspect we can get away with a sub set of how we do it for Sass. See CreateVarsStyleSheet.