Custom primary color -- Help needed

[LudvigAlmvaang]

Custom Primary Colors for Pico CSS v.2.0.6 -- How do I do it?

main.scss

@use "@picocss/pico/scss/pico" with (
  $theme-color: "red",
  $enable-semantic-container: true,
);

I am using v.2.0.6 of Pico CSS, and I am trying to change the primary color to a custom color.
If I replace "red" with another color, like blue or yellow, the change will have expected results;
However, if I want a custom color, such as #990024, I have been unable to make it work.

The only documentation I have been able to find so far is deprecated for V1 of Pico CSS.
picocss.com/docs/v1/customization.

The following is an example used in the docs for Pico CSS v1 on how to change the primary color to a custom color.
So far I have been unable to apply it.

// Simplified example
:root {
  --primary: #d81b60;

}

If we read a bit further we will find more detailed examples, such as the following.

/* Red Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: #e53935;
  --primary-hover: #f44336;
  --primary-focus: rgba(229, 57, 53, 0.25);
  --primary-inverse: #FFF;
}

Unfortunately no matter how much I investigate these old docs and no matter what I try I seem to be unable to make this work.
Is there anyone who could perhaps explain to me how I best can use a custom color?

[dev-willis]

In version 2, the variable names were prefixed with "pico-" but :root{--pico-primary:#0f0 !important;} does not work either, even with the !important thrown in. If I target an ID in my markup it will work, however, the $theme-color variable seems to change a lot more than just --pico-primary and it looks like all of them will have to be manually set when using a custom color.

It would be nice if there was a way to pass a hex value or something to the $theme-color variable.