You can apply opacity to a CSS variable by combining it with transparent using color-mix(). This allows dynamic styling while preserving theme flexibility. For example:

This blends the --accent-color with transparency, effectively reducing its opacity without altering the original variable.

More info here: https://stackoverflow.com/a/71098929