Richer, scale-based color palette for Improved theming and dark mode

User expectations have grown, particularly with the widespread adoption of dark mode, and our current palette is showing its limitations.

This proposal outlines a plan to evolve our color system from a set of static color variables to a more flexible, scale-based palette. The primary goals are:

- Create a more intentional and visually appealing dark mode, moving beyond simple color inversion.
- Provide developers (and designers) with a richer, more flexible set of color options for creating nuanced UI.
- Improve consistency for interactive states (hover, active, focus) and component variations.
- Future-proof our design system for potential new themes (e.g., high-contrast, which might be coming soon).

A few examples of custom layouts with extended colors.

Light mode:

Dark mode:

As seen on the screenshots (especially on the second example with the status icons), the colors are too dark and require corresponding lighter alternatives for dark mode.

Then, we could implement it like something this in Vanilla:
```
:root {
--vf-color-background-default: $gray-50;
--vf-color-background-alt: $gray-50;
}

@media (prefers-color-scheme: dark) {
:root {
--vf-color-background-default: $gray-900;
--vf-color-background-default: $gray-800;
}
}
```