Based on this article, I’m trying to use css’s new light-dark(color1, color2) value in my site.

In the article, hex colors and color names are used, but my site currently uses hsl-values to allow me to add transparency to the same color values like this (inspired by tailwind css):

:root {
  --foreground: 0 0% 98%;
}

.div1 {
  color: hsl(var(--foreground));
}

.div2 {
  background: hsl(var(--foreground) / 0.25)
}

The new light-dark() syntax doesnt seem to support this unfortunately,

/* This doesn't work! */
:root {
  color-scheme: dark; /* or light, or light dark */
  --foreground: light-dark(222.2 47.4% 11.2%, 0 0% 98%);
}

.div1 {
  color: hsl(var(--foreground)); /* doesn't work */
}

.div2 {
  background: hsl(var(--foreground) / 0.25)  /* doesn't work either */
}

Does anyone know of a syntax that would work here? JSFiddle to experiment with