🐛 Bug: Enable box shadow color change

[k-utsumi]

Description

As stated in the title.

The documentation mentions shadowColor but it doesn't work as expected.
ref: https://panda-css.com/docs/utilities/effects#box-shadow

It's convenient to be able to change it like Tailwind CSS.
ref: https://tailwindcss.com/docs/box-shadow-color

NOTE: Tailwind CSS has 3 shadows

1. Ring offset shadow
2. Ring shadow
3. Shadow

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-zjktub?file=src%2FApp.tsx&terminal=dev

Panda CSS Version

0.40.0

Additional Information

I tried applying the CSS variables using the preset with reference to the code below,
but it didn't work.

https://github.com/chakra-ui/panda/blob/%40pandacss/core%400.40.0/packages/preset-panda/src/shadows.ts#L1-L9

I wrote a code like this:

      shadows: {
        xs: { value: '0 1px 2px var(--shadow-color, rgb(0 0 0 / 0.05))' },
        ...

This appears to occur because the shadow CSS variables (have sizes) are generated in the root,
but refer to shadow color CSS variables that do not exist in the root.

:root {
  ...
  --shadows-lg: ... var(--shadow-color, [defaultShadowColor]); // → defaultShadowColor
}
.shadow_lg {
  box-shadow: var(--shadows-lg);
}
.shadow-color_red {
  --shadow-color: red;
}

I think this can be resolved by making shadowSize a variable.

.shadow_lg {
  --shadow-color: #0001;
  box-shadow: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);
}
.shadow-color_red {
  --shadow-color: red;
}

archived

This does not support multiple shadows.

:root {
  --shadows-xs: 0 1px 2px;
  ...
}
.shadow_lg {
  box-shadow: var(--shadows-lg) var(--shadow-color, #0001);
}
.shadow-color_red {
  --shadow-color: red;
}