Make more use of CSS custom properties in shadow generator

[planktonic]

tools/shadow.generate(), tools/shadow.to-box-shadow(), and tools/shadow.to-drop-shadow() could make use of design tokens passed in, and use them instead of hard-coding sizes and colors. For examples the default configuration produces shadow design tokens like:

--bs-shadow-brand-1-drop:
  drop-shadow(rgba(31,0,230,0.075) 0 calc(0.25rem/4) calc(0.625rem/4))
  drop-shadow(rgba(31,0,230,0.075) 0 calc(0.25rem/3) calc(0.625rem/3))
  drop-shadow(rgba(31,0,230,0.075) 0 calc(0.25rem/2) calc(0.625rem/2))
  drop-shadow(rgba(31,0,230,0.075) 0 calc(0.25rem/1) calc(0.625rem/1));

--bs-shadow-brand-1-box:
  0 calc(0.25rem/4) calc(0.625rem/4) rgba(31,0,230,0.075),
  0 calc(0.25rem/3) calc(0.625rem/3) rgba(31,0,230,0.075),
  0 calc(0.25rem/2) calc(0.625rem/2) rgba(31,0,230,0.075),
  0 calc(0.25rem/1) calc(0.625rem/1) rgba(31,0,230,0.075);

The 0.25rem and 0.625rem would ideally be a var(--bs-size-s2) (or whatever the size is), and the color would also be a custom property. Handling sizes like this is probably easier than colors — how do we handle the opacity? We could output a new custom property with each shadow definition?