pgo-uiux2 1.0.0

package/src/pgo-components/styles/utilities/palette.css

@@ -0,0 +1,515 @@
+/* Color palette utilities (token-driven with color-mix fallbacks)
+   - Uses per-shade tokens if provided (e.g. --vts-color-red-100)
+   - Falls back to deriving shades from a base hue var --vts-color-<hue> using color-mix
+   - Modern browsers required for color-mix(); tokens override where available
+*/
+
+/* Base hue fallbacks (only used if theme tokens are missing) */
+:root { /* defensive fallbacks */
+  --vts-color-red: #ef4444;
+  --vts-color-orange: #f97316;
+  --vts-color-amber: #f59e0b;
+  --vts-color-yellow: #eab308;
+  --vts-color-lime: #84cc16;
+  --vts-color-green: #22c55e;
+  --vts-color-sky: #0ea5e9;
+  --vts-color-indigo: #6366f1;
+  --vts-color-purple: #a855f7;
+  --vts-color-fuchsia: #d946ef;
+  --vts-color-pink: #ec4899;
+  --vts-color-slate: #64748b;
+  --vts-color-gray: #6b7280;
+  --vts-color-stone: #78716c;
+}
+
+/* Helper macro idea (conceptual): we hand-write classes for clarity and control */
+
+/* RED */
+.vts-bg-red-50 { background-color: var(--vts-color-red-50, color-mix(in srgb, var(--vts-color-red, #ef4444) 10%, white 90%)); }
+.vts-bg-red-100 { background-color: var(--vts-color-red-100, color-mix(in srgb, var(--vts-color-red, #ef4444) 20%, white 80%)); }
+.vts-bg-red-200 { background-color: var(--vts-color-red-200, color-mix(in srgb, var(--vts-color-red, #ef4444) 30%, white 70%)); }
+.vts-bg-red-300 { background-color: var(--vts-color-red-300, color-mix(in srgb, var(--vts-color-red, #ef4444) 45%, white 55%)); }
+.vts-bg-red-400 { background-color: var(--vts-color-red-400, color-mix(in srgb, var(--vts-color-red, #ef4444) 60%, white 40%)); }
+.vts-bg-red-500 { background-color: var(--vts-color-red-500, var(--vts-color-red, #ef4444)); }
+.vts-bg-red-600 { background-color: var(--vts-color-red-600, color-mix(in srgb, var(--vts-color-red, #ef4444) 90%, black 10%)); }
+.vts-bg-red-700 { background-color: var(--vts-color-red-700, color-mix(in srgb, var(--vts-color-red, #ef4444) 75%, black 25%)); }
+.vts-bg-red-800 { background-color: var(--vts-color-red-800, color-mix(in srgb, var(--vts-color-red, #ef4444) 60%, black 40%)); }
+.vts-bg-red-900 { background-color: var(--vts-color-red-900, color-mix(in srgb, var(--vts-color-red, #ef4444) 45%, black 55%)); }
+.vts-bg-red-950 { background-color: var(--vts-color-red-950, color-mix(in srgb, var(--vts-color-red, #ef4444) 30%, black 70%)); }
+.vts-text-red-50 { color: var(--vts-color-red-50, color-mix(in srgb, var(--vts-color-red, #ef4444) 10%, white 90%)); }
+.vts-text-red-100 { color: var(--vts-color-red-100, color-mix(in srgb, var(--vts-color-red, #ef4444) 20%, white 80%)); }
+.vts-text-red-200 { color: var(--vts-color-red-200, color-mix(in srgb, var(--vts-color-red, #ef4444) 30%, white 70%)); }
+.vts-text-red-300 { color: var(--vts-color-red-300, color-mix(in srgb, var(--vts-color-red, #ef4444) 45%, white 55%)); }
+.vts-text-red-400 { color: var(--vts-color-red-400, color-mix(in srgb, var(--vts-color-red, #ef4444) 60%, white 40%)); }
+.vts-text-red-500 { color: var(--vts-color-red-500, var(--vts-color-red, #ef4444)); }
+.vts-text-red-600 { color: var(--vts-color-red-600, color-mix(in srgb, var(--vts-color-red, #ef4444) 90%, black 10%)); }
+.vts-text-red-700 { color: var(--vts-color-red-700, color-mix(in srgb, var(--vts-color-red, #ef4444) 75%, black 25%)); }
+.vts-text-red-800 { color: var(--vts-color-red-800, color-mix(in srgb, var(--vts-color-red, #ef4444) 60%, black 40%)); }
+.vts-text-red-900 { color: var(--vts-color-red-900, color-mix(in srgb, var(--vts-color-red, #ef4444) 45%, black 55%)); }
+.vts-text-red-950 { color: var(--vts-color-red-950, color-mix(in srgb, var(--vts-color-red, #ef4444) 30%, black 70%)); }
+.vts-border-red-50 { border-color: var(--vts-color-red-50, color-mix(in srgb, var(--vts-color-red, #ef4444) 10%, white 90%)); }
+.vts-border-red-100 { border-color: var(--vts-color-red-100, color-mix(in srgb, var(--vts-color-red, #ef4444) 20%, white 80%)); }
+.vts-border-red-200 { border-color: var(--vts-color-red-200, color-mix(in srgb, var(--vts-color-red, #ef4444) 30%, white 70%)); }
+.vts-border-red-300 { border-color: var(--vts-color-red-300, color-mix(in srgb, var(--vts-color-red, #ef4444) 45%, white 55%)); }
+.vts-border-red-400 { border-color: var(--vts-color-red-400, color-mix(in srgb, var(--vts-color-red, #ef4444) 60%, white 40%)); }
+.vts-border-red-500 { border-color: var(--vts-color-red-500, var(--vts-color-red, #ef4444)); }
+.vts-border-red-600 { border-color: var(--vts-color-red-600, color-mix(in srgb, var(--vts-color-red, #ef4444) 90%, black 10%)); }
+.vts-border-red-700 { border-color: var(--vts-color-red-700, color-mix(in srgb, var(--vts-color-red, #ef4444) 75%, black 25%)); }
+.vts-border-red-800 { border-color: var(--vts-color-red-800, color-mix(in srgb, var(--vts-color-red, #ef4444) 60%, black 40%)); }
+.vts-border-red-900 { border-color: var(--vts-color-red-900, color-mix(in srgb, var(--vts-color-red, #ef4444) 45%, black 55%)); }
+.vts-border-red-950 { border-color: var(--vts-color-red-950, color-mix(in srgb, var(--vts-color-red, #ef4444) 30%, black 70%)); }
+
+/* ORANGE */
+.vts-bg-orange-50 { background-color: var(--vts-color-orange-50, color-mix(in srgb, var(--vts-color-orange, #f97316) 10%, white 90%)); }
+.vts-bg-orange-100 { background-color: var(--vts-color-orange-100, color-mix(in srgb, var(--vts-color-orange, #f97316) 20%, white 80%)); }
+.vts-bg-orange-200 { background-color: var(--vts-color-orange-200, color-mix(in srgb, var(--vts-color-orange, #f97316) 30%, white 70%)); }
+.vts-bg-orange-300 { background-color: var(--vts-color-orange-300, color-mix(in srgb, var(--vts-color-orange, #f97316) 45%, white 55%)); }
+.vts-bg-orange-400 { background-color: var(--vts-color-orange-400, color-mix(in srgb, var(--vts-color-orange, #f97316) 60%, white 40%)); }
+.vts-bg-orange-500 { background-color: var(--vts-color-orange-500, var(--vts-color-orange, #f97316)); }
+.vts-bg-orange-600 { background-color: var(--vts-color-orange-600, color-mix(in srgb, var(--vts-color-orange, #f97316) 90%, black 10%)); }
+.vts-bg-orange-700 { background-color: var(--vts-color-orange-700, color-mix(in srgb, var(--vts-color-orange, #f97316) 75%, black 25%)); }
+.vts-bg-orange-800 { background-color: var(--vts-color-orange-800, color-mix(in srgb, var(--vts-color-orange, #f97316) 60%, black 40%)); }
+.vts-bg-orange-900 { background-color: var(--vts-color-orange-900, color-mix(in srgb, var(--vts-color-orange, #f97316) 45%, black 55%)); }
+.vts-bg-orange-950 { background-color: var(--vts-color-orange-950, color-mix(in srgb, var(--vts-color-orange, #f97316) 30%, black 70%)); }
+.vts-text-orange-50 { color: var(--vts-color-orange-50, color-mix(in srgb, var(--vts-color-orange, #f97316) 10%, white 90%)); }
+.vts-text-orange-100 { color: var(--vts-color-orange-100, color-mix(in srgb, var(--vts-color-orange, #f97316) 20%, white 80%)); }
+.vts-text-orange-200 { color: var(--vts-color-orange-200, color-mix(in srgb, var(--vts-color-orange, #f97316) 30%, white 70%)); }
+.vts-text-orange-300 { color: var(--vts-color-orange-300, color-mix(in srgb, var(--vts-color-orange, #f97316) 45%, white 55%)); }
+.vts-text-orange-400 { color: var(--vts-color-orange-400, color-mix(in srgb, var(--vts-color-orange, #f97316) 60%, white 40%)); }
+.vts-text-orange-500 { color: var(--vts-color-orange-500, var(--vts-color-orange, #f97316)); }
+.vts-text-orange-600 { color: var(--vts-color-orange-600, color-mix(in srgb, var(--vts-color-orange, #f97316) 90%, black 10%)); }
+.vts-text-orange-700 { color: var(--vts-color-orange-700, color-mix(in srgb, var(--vts-color-orange, #f97316) 75%, black 25%)); }
+.vts-text-orange-800 { color: var(--vts-color-orange-800, color-mix(in srgb, var(--vts-color-orange, #f97316) 60%, black 40%)); }
+.vts-text-orange-900 { color: var(--vts-color-orange-900, color-mix(in srgb, var(--vts-color-orange, #f97316) 45%, black 55%)); }
+.vts-text-orange-950 { color: var(--vts-color-orange-950, color-mix(in srgb, var(--vts-color-orange, #f97316) 30%, black 70%)); }
+.vts-border-orange-50 { border-color: var(--vts-color-orange-50, color-mix(in srgb, var(--vts-color-orange, #f97316) 10%, white 90%)); }
+.vts-border-orange-100 { border-color: var(--vts-color-orange-100, color-mix(in srgb, var(--vts-color-orange, #f97316) 20%, white 80%)); }
+.vts-border-orange-200 { border-color: var(--vts-color-orange-200, color-mix(in srgb, var(--vts-color-orange, #f97316) 30%, white 70%)); }
+.vts-border-orange-300 { border-color: var(--vts-color-orange-300, color-mix(in srgb, var(--vts-color-orange, #f97316) 45%, white 55%)); }
+.vts-border-orange-400 { border-color: var(--vts-color-orange-400, color-mix(in srgb, var(--vts-color-orange, #f97316) 60%, white 40%)); }
+.vts-border-orange-500 { border-color: var(--vts-color-orange-500, var(--vts-color-orange, #f97316)); }
+.vts-border-orange-600 { border-color: var(--vts-color-orange-600, color-mix(in srgb, var(--vts-color-orange, #f97316) 90%, black 10%)); }
+.vts-border-orange-700 { border-color: var(--vts-color-orange-700, color-mix(in srgb, var(--vts-color-orange, #f97316) 75%, black 25%)); }
+.vts-border-orange-800 { border-color: var(--vts-color-orange-800, color-mix(in srgb, var(--vts-color-orange, #f97316) 60%, black 40%)); }
+.vts-border-orange-900 { border-color: var(--vts-color-orange-900, color-mix(in srgb, var(--vts-color-orange, #f97316) 45%, black 55%)); }
+.vts-border-orange-950 { border-color: var(--vts-color-orange-950, color-mix(in srgb, var(--vts-color-orange, #f97316) 30%, black 70%)); }
+
+/* AMBER */
+.vts-bg-amber-50 { background-color: var(--vts-color-amber-50, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 10%, white 90%)); }
+.vts-bg-amber-100 { background-color: var(--vts-color-amber-100, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 20%, white 80%)); }
+.vts-bg-amber-200 { background-color: var(--vts-color-amber-200, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 30%, white 70%)); }
+.vts-bg-amber-300 { background-color: var(--vts-color-amber-300, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 45%, white 55%)); }
+.vts-bg-amber-400 { background-color: var(--vts-color-amber-400, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 60%, white 40%)); }
+.vts-bg-amber-500 { background-color: var(--vts-color-amber-500, var(--vts-color-amber, #f59e0b)); }
+.vts-bg-amber-600 { background-color: var(--vts-color-amber-600, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 90%, black 10%)); }
+.vts-bg-amber-700 { background-color: var(--vts-color-amber-700, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 75%, black 25%)); }
+.vts-bg-amber-800 { background-color: var(--vts-color-amber-800, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 60%, black 40%)); }
+.vts-bg-amber-900 { background-color: var(--vts-color-amber-900, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 45%, black 55%)); }
+.vts-bg-amber-950 { background-color: var(--vts-color-amber-950, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 30%, black 70%)); }
+.vts-text-amber-50 { color: var(--vts-color-amber-50, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 10%, white 90%)); }
+.vts-text-amber-100 { color: var(--vts-color-amber-100, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 20%, white 80%)); }
+.vts-text-amber-200 { color: var(--vts-color-amber-200, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 30%, white 70%)); }
+.vts-text-amber-300 { color: var(--vts-color-amber-300, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 45%, white 55%)); }
+.vts-text-amber-400 { color: var(--vts-color-amber-400, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 60%, white 40%)); }
+.vts-text-amber-500 { color: var(--vts-color-amber-500, var(--vts-color-amber, #f59e0b)); }
+.vts-text-amber-600 { color: var(--vts-color-amber-600, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 90%, black 10%)); }
+.vts-text-amber-700 { color: var(--vts-color-amber-700, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 75%, black 25%)); }
+.vts-text-amber-800 { color: var(--vts-color-amber-800, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 60%, black 40%)); }
+.vts-text-amber-900 { color: var(--vts-color-amber-900, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 45%, black 55%)); }
+.vts-text-amber-950 { color: var(--vts-color-amber-950, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 30%, black 70%)); }
+.vts-border-amber-50 { border-color: var(--vts-color-amber-50, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 10%, white 90%)); }
+.vts-border-amber-100 { border-color: var(--vts-color-amber-100, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 20%, white 80%)); }
+.vts-border-amber-200 { border-color: var(--vts-color-amber-200, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 30%, white 70%)); }
+.vts-border-amber-300 { border-color: var(--vts-color-amber-300, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 45%, white 55%)); }
+.vts-border-amber-400 { border-color: var(--vts-color-amber-400, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 60%, white 40%)); }
+.vts-border-amber-500 { border-color: var(--vts-color-amber-500, var(--vts-color-amber, #f59e0b)); }
+.vts-border-amber-600 { border-color: var(--vts-color-amber-600, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 90%, black 10%)); }
+.vts-border-amber-700 { border-color: var(--vts-color-amber-700, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 75%, black 25%)); }
+.vts-border-amber-800 { border-color: var(--vts-color-amber-800, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 60%, black 40%)); }
+.vts-border-amber-900 { border-color: var(--vts-color-amber-900, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 45%, black 55%)); }
+.vts-border-amber-950 { border-color: var(--vts-color-amber-950, color-mix(in srgb, var(--vts-color-amber, #f59e0b) 30%, black 70%)); }
+
+/* YELLOW */
+.vts-bg-yellow-50 { background-color: var(--vts-color-yellow-50, color-mix(in srgb, var(--vts-color-yellow, #eab308) 10%, white 90%)); }
+.vts-bg-yellow-100 { background-color: var(--vts-color-yellow-100, color-mix(in srgb, var(--vts-color-yellow, #eab308) 20%, white 80%)); }
+.vts-bg-yellow-200 { background-color: var(--vts-color-yellow-200, color-mix(in srgb, var(--vts-color-yellow, #eab308) 30%, white 70%)); }
+.vts-bg-yellow-300 { background-color: var(--vts-color-yellow-300, color-mix(in srgb, var(--vts-color-yellow, #eab308) 45%, white 55%)); }
+.vts-bg-yellow-400 { background-color: var(--vts-color-yellow-400, color-mix(in srgb, var(--vts-color-yellow, #eab308) 60%, white 40%)); }
+.vts-bg-yellow-500 { background-color: var(--vts-color-yellow-500, var(--vts-color-yellow, #eab308)); }
+.vts-bg-yellow-600 { background-color: var(--vts-color-yellow-600, color-mix(in srgb, var(--vts-color-yellow, #eab308) 90%, black 10%)); }
+.vts-bg-yellow-700 { background-color: var(--vts-color-yellow-700, color-mix(in srgb, var(--vts-color-yellow, #eab308) 75%, black 25%)); }
+.vts-bg-yellow-800 { background-color: var(--vts-color-yellow-800, color-mix(in srgb, var(--vts-color-yellow, #eab308) 60%, black 40%)); }
+.vts-bg-yellow-900 { background-color: var(--vts-color-yellow-900, color-mix(in srgb, var(--vts-color-yellow, #eab308) 45%, black 55%)); }
+.vts-bg-yellow-950 { background-color: var(--vts-color-yellow-950, color-mix(in srgb, var(--vts-color-yellow, #eab308) 30%, black 70%)); }
+.vts-text-yellow-50 { color: var(--vts-color-yellow-50, color-mix(in srgb, var(--vts-color-yellow, #eab308) 10%, white 90%)); }
+.vts-text-yellow-100 { color: var(--vts-color-yellow-100, color-mix(in srgb, var(--vts-color-yellow, #eab308) 20%, white 80%)); }
+.vts-text-yellow-200 { color: var(--vts-color-yellow-200, color-mix(in srgb, var(--vts-color-yellow, #eab308) 30%, white 70%)); }
+.vts-text-yellow-300 { color: var(--vts-color-yellow-300, color-mix(in srgb, var(--vts-color-yellow, #eab308) 45%, white 55%)); }
+.vts-text-yellow-400 { color: var(--vts-color-yellow-400, color-mix(in srgb, var(--vts-color-yellow, #eab308) 60%, white 40%)); }
+.vts-text-yellow-500 { color: var(--vts-color-yellow-500, var(--vts-color-yellow, #eab308)); }
+.vts-text-yellow-600 { color: var(--vts-color-yellow-600, color-mix(in srgb, var(--vts-color-yellow, #eab308) 90%, black 10%)); }
+.vts-text-yellow-700 { color: var(--vts-color-yellow-700, color-mix(in srgb, var(--vts-color-yellow, #eab308) 75%, black 25%)); }
+.vts-text-yellow-800 { color: var(--vts-color-yellow-800, color-mix(in srgb, var(--vts-color-yellow, #eab308) 60%, black 40%)); }
+.vts-text-yellow-900 { color: var(--vts-color-yellow-900, color-mix(in srgb, var(--vts-color-yellow, #eab308) 45%, black 55%)); }
+.vts-text-yellow-950 { color: var(--vts-color-yellow-950, color-mix(in srgb, var(--vts-color-yellow, #eab308) 30%, black 70%)); }
+.vts-border-yellow-50 { border-color: var(--vts-color-yellow-50, color-mix(in srgb, var(--vts-color-yellow, #eab308) 10%, white 90%)); }
+.vts-border-yellow-100 { border-color: var(--vts-color-yellow-100, color-mix(in srgb, var(--vts-color-yellow, #eab308) 20%, white 80%)); }
+.vts-border-yellow-200 { border-color: var(--vts-color-yellow-200, color-mix(in srgb, var(--vts-color-yellow, #eab308) 30%, white 70%)); }
+.vts-border-yellow-300 { border-color: var(--vts-color-yellow-300, color-mix(in srgb, var(--vts-color-yellow, #eab308) 45%, white 55%)); }
+.vts-border-yellow-400 { border-color: var(--vts-color-yellow-400, color-mix(in srgb, var(--vts-color-yellow, #eab308) 60%, white 40%)); }
+.vts-border-yellow-500 { border-color: var(--vts-color-yellow-500, var(--vts-color-yellow, #eab308)); }
+.vts-border-yellow-600 { border-color: var(--vts-color-yellow-600, color-mix(in srgb, var(--vts-color-yellow, #eab308) 90%, black 10%)); }
+.vts-border-yellow-700 { border-color: var(--vts-color-yellow-700, color-mix(in srgb, var(--vts-color-yellow, #eab308) 75%, black 25%)); }
+.vts-border-yellow-800 { border-color: var(--vts-color-yellow-800, color-mix(in srgb, var(--vts-color-yellow, #eab308) 60%, black 40%)); }
+.vts-border-yellow-900 { border-color: var(--vts-color-yellow-900, color-mix(in srgb, var(--vts-color-yellow, #eab308) 45%, black 55%)); }
+.vts-border-yellow-950 { border-color: var(--vts-color-yellow-950, color-mix(in srgb, var(--vts-color-yellow, #eab308) 30%, black 70%)); }
+
+/* LIME */
+.vts-bg-lime-50 { background-color: var(--vts-color-lime-50, color-mix(in srgb, var(--vts-color-lime, #84cc16) 10%, white 90%)); }
+.vts-bg-lime-100 { background-color: var(--vts-color-lime-100, color-mix(in srgb, var(--vts-color-lime, #84cc16) 20%, white 80%)); }
+.vts-bg-lime-200 { background-color: var(--vts-color-lime-200, color-mix(in srgb, var(--vts-color-lime, #84cc16) 30%, white 70%)); }
+.vts-bg-lime-300 { background-color: var(--vts-color-lime-300, color-mix(in srgb, var(--vts-color-lime, #84cc16) 45%, white 55%)); }
+.vts-bg-lime-400 { background-color: var(--vts-color-lime-400, color-mix(in srgb, var(--vts-color-lime, #84cc16) 60%, white 40%)); }
+.vts-bg-lime-500 { background-color: var(--vts-color-lime-500, var(--vts-color-lime, #84cc16)); }
+.vts-bg-lime-600 { background-color: var(--vts-color-lime-600, color-mix(in srgb, var(--vts-color-lime, #84cc16) 90%, black 10%)); }
+.vts-bg-lime-700 { background-color: var(--vts-color-lime-700, color-mix(in srgb, var(--vts-color-lime, #84cc16) 75%, black 25%)); }
+.vts-bg-lime-800 { background-color: var(--vts-color-lime-800, color-mix(in srgb, var(--vts-color-lime, #84cc16) 60%, black 40%)); }
+.vts-bg-lime-900 { background-color: var(--vts-color-lime-900, color-mix(in srgb, var(--vts-color-lime, #84cc16) 45%, black 55%)); }
+.vts-bg-lime-950 { background-color: var(--vts-color-lime-950, color-mix(in srgb, var(--vts-color-lime, #84cc16) 30%, black 70%)); }
+.vts-text-lime-50 { color: var(--vts-color-lime-50, color-mix(in srgb, var(--vts-color-lime, #84cc16) 10%, white 90%)); }
+.vts-text-lime-100 { color: var(--vts-color-lime-100, color-mix(in srgb, var(--vts-color-lime, #84cc16) 20%, white 80%)); }
+.vts-text-lime-200 { color: var(--vts-color-lime-200, color-mix(in srgb, var(--vts-color-lime, #84cc16) 30%, white 70%)); }
+.vts-text-lime-300 { color: var(--vts-color-lime-300, color-mix(in srgb, var(--vts-color-lime, #84cc16) 45%, white 55%)); }
+.vts-text-lime-400 { color: var(--vts-color-lime-400, color-mix(in srgb, var(--vts-color-lime, #84cc16) 60%, white 40%)); }
+.vts-text-lime-500 { color: var(--vts-color-lime-500, var(--vts-color-lime, #84cc16)); }
+.vts-text-lime-600 { color: var(--vts-color-lime-600, color-mix(in srgb, var(--vts-color-lime, #84cc16) 90%, black 10%)); }
+.vts-text-lime-700 { color: var(--vts-color-lime-700, color-mix(in srgb, var(--vts-color-lime, #84cc16) 75%, black 25%)); }
+.vts-text-lime-800 { color: var(--vts-color-lime-800, color-mix(in srgb, var(--vts-color-lime, #84cc16) 60%, black 40%)); }
+.vts-text-lime-900 { color: var(--vts-color-lime-900, color-mix(in srgb, var(--vts-color-lime, #84cc16) 45%, black 55%)); }
+.vts-text-lime-950 { color: var(--vts-color-lime-950, color-mix(in srgb, var(--vts-color-lime, #84cc16) 30%, black 70%)); }
+.vts-border-lime-50 { border-color: var(--vts-color-lime-50, color-mix(in srgb, var(--vts-color-lime, #84cc16) 10%, white 90%)); }
+.vts-border-lime-100 { border-color: var(--vts-color-lime-100, color-mix(in srgb, var(--vts-color-lime, #84cc16) 20%, white 80%)); }
+.vts-border-lime-200 { border-color: var(--vts-color-lime-200, color-mix(in srgb, var(--vts-color-lime, #84cc16) 30%, white 70%)); }
+.vts-border-lime-300 { border-color: var(--vts-color-lime-300, color-mix(in srgb, var(--vts-color-lime, #84cc16) 45%, white 55%)); }
+.vts-border-lime-400 { border-color: var(--vts-color-lime-400, color-mix(in srgb, var(--vts-color-lime, #84cc16) 60%, white 40%)); }
+.vts-border-lime-500 { border-color: var(--vts-color-lime-500, var(--vts-color-lime, #84cc16)); }
+.vts-border-lime-600 { border-color: var(--vts-color-lime-600, color-mix(in srgb, var(--vts-color-lime, #84cc16) 90%, black 10%)); }
+.vts-border-lime-700 { border-color: var(--vts-color-lime-700, color-mix(in srgb, var(--vts-color-lime, #84cc16) 75%, black 25%)); }
+.vts-border-lime-800 { border-color: var(--vts-color-lime-800, color-mix(in srgb, var(--vts-color-lime, #84cc16) 60%, black 40%)); }
+.vts-border-lime-900 { border-color: var(--vts-color-lime-900, color-mix(in srgb, var(--vts-color-lime, #84cc16) 45%, black 55%)); }
+.vts-border-lime-950 { border-color: var(--vts-color-lime-950, color-mix(in srgb, var(--vts-color-lime, #84cc16) 30%, black 70%)); }
+
+/* GREEN */
+.vts-bg-green-50 { background-color: var(--vts-color-green-50, color-mix(in srgb, var(--vts-color-green, #22c55e) 10%, white 90%)); }
+.vts-bg-green-100 { background-color: var(--vts-color-green-100, color-mix(in srgb, var(--vts-color-green, #22c55e) 20%, white 80%)); }
+.vts-bg-green-200 { background-color: var(--vts-color-green-200, color-mix(in srgb, var(--vts-color-green, #22c55e) 30%, white 70%)); }
+.vts-bg-green-300 { background-color: var(--vts-color-green-300, color-mix(in srgb, var(--vts-color-green, #22c55e) 45%, white 55%)); }
+.vts-bg-green-400 { background-color: var(--vts-color-green-400, color-mix(in srgb, var(--vts-color-green, #22c55e) 60%, white 40%)); }
+.vts-bg-green-500 { background-color: var(--vts-color-green-500, var(--vts-color-green, #22c55e)); }
+.vts-bg-green-600 { background-color: var(--vts-color-green-600, color-mix(in srgb, var(--vts-color-green, #22c55e) 90%, black 10%)); }
+.vts-bg-green-700 { background-color: var(--vts-color-green-700, color-mix(in srgb, var(--vts-color-green, #22c55e) 75%, black 25%)); }
+.vts-bg-green-800 { background-color: var(--vts-color-green-800, color-mix(in srgb, var(--vts-color-green, #22c55e) 60%, black 40%)); }
+.vts-bg-green-900 { background-color: var(--vts-color-green-900, color-mix(in srgb, var(--vts-color-green, #22c55e) 45%, black 55%)); }
+.vts-bg-green-950 { background-color: var(--vts-color-green-950, color-mix(in srgb, var(--vts-color-green, #22c55e) 30%, black 70%)); }
+.vts-text-green-50 { color: var(--vts-color-green-50, color-mix(in srgb, var(--vts-color-green, #22c55e) 10%, white 90%)); }
+.vts-text-green-100 { color: var(--vts-color-green-100, color-mix(in srgb, var(--vts-color-green, #22c55e) 20%, white 80%)); }
+.vts-text-green-200 { color: var(--vts-color-green-200, color-mix(in srgb, var(--vts-color-green, #22c55e) 30%, white 70%)); }
+.vts-text-green-300 { color: var(--vts-color-green-300, color-mix(in srgb, var(--vts-color-green, #22c55e) 45%, white 55%)); }
+.vts-text-green-400 { color: var(--vts-color-green-400, color-mix(in srgb, var(--vts-color-green, #22c55e) 60%, white 40%)); }
+.vts-text-green-500 { color: var(--vts-color-green-500, var(--vts-color-green, #22c55e)); }
+.vts-text-green-600 { color: var(--vts-color-green-600, color-mix(in srgb, var(--vts-color-green, #22c55e) 90%, black 10%)); }
+.vts-text-green-700 { color: var(--vts-color-green-700, color-mix(in srgb, var(--vts-color-green, #22c55e) 75%, black 25%)); }
+.vts-text-green-800 { color: var(--vts-color-green-800, color-mix(in srgb, var(--vts-color-green, #22c55e) 60%, black 40%)); }
+.vts-text-green-900 { color: var(--vts-color-green-900, color-mix(in srgb, var(--vts-color-green, #22c55e) 45%, black 55%)); }
+.vts-text-green-950 { color: var(--vts-color-green-950, color-mix(in srgb, var(--vts-color-green, #22c55e) 30%, black 70%)); }
+.vts-border-green-50 { border-color: var(--vts-color-green-50, color-mix(in srgb, var(--vts-color-green, #22c55e) 10%, white 90%)); }
+.vts-border-green-100 { border-color: var(--vts-color-green-100, color-mix(in srgb, var(--vts-color-green, #22c55e) 20%, white 80%)); }
+.vts-border-green-200 { border-color: var(--vts-color-green-200, color-mix(in srgb, var(--vts-color-green, #22c55e) 30%, white 70%)); }
+.vts-border-green-300 { border-color: var(--vts-color-green-300, color-mix(in srgb, var(--vts-color-green, #22c55e) 45%, white 55%)); }
+.vts-border-green-400 { border-color: var(--vts-color-green-400, color-mix(in srgb, var(--vts-color-green, #22c55e) 60%, white 40%)); }
+.vts-border-green-500 { border-color: var(--vts-color-green-500, var(--vts-color-green, #22c55e)); }
+.vts-border-green-600 { border-color: var(--vts-color-green-600, color-mix(in srgb, var(--vts-color-green, #22c55e) 90%, black 10%)); }
+.vts-border-green-700 { border-color: var(--vts-color-green-700, color-mix(in srgb, var(--vts-color-green, #22c55e) 75%, black 25%)); }
+.vts-border-green-800 { border-color: var(--vts-color-green-800, color-mix(in srgb, var(--vts-color-green, #22c55e) 60%, black 40%)); }
+.vts-border-green-900 { border-color: var(--vts-color-green-900, color-mix(in srgb, var(--vts-color-green, #22c55e) 45%, black 55%)); }
+.vts-border-green-950 { border-color: var(--vts-color-green-950, color-mix(in srgb, var(--vts-color-green, #22c55e) 30%, black 70%)); }
+
+/* SKY */
+.vts-bg-sky-50 { background-color: var(--vts-color-sky-50, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 10%, white 90%)); }
+.vts-bg-sky-100 { background-color: var(--vts-color-sky-100, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 20%, white 80%)); }
+.vts-bg-sky-200 { background-color: var(--vts-color-sky-200, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 30%, white 70%)); }
+.vts-bg-sky-300 { background-color: var(--vts-color-sky-300, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 45%, white 55%)); }
+.vts-bg-sky-400 { background-color: var(--vts-color-sky-400, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 60%, white 40%)); }
+.vts-bg-sky-500 { background-color: var(--vts-color-sky-500, var(--vts-color-sky, #0ea5e9)); }
+.vts-bg-sky-600 { background-color: var(--vts-color-sky-600, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 90%, black 10%)); }
+.vts-bg-sky-700 { background-color: var(--vts-color-sky-700, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 75%, black 25%)); }
+.vts-bg-sky-800 { background-color: var(--vts-color-sky-800, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 60%, black 40%)); }
+.vts-bg-sky-900 { background-color: var(--vts-color-sky-900, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 45%, black 55%)); }
+.vts-bg-sky-950 { background-color: var(--vts-color-sky-950, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 30%, black 70%)); }
+.vts-text-sky-50 { color: var(--vts-color-sky-50, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 10%, white 90%)); }
+.vts-text-sky-100 { color: var(--vts-color-sky-100, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 20%, white 80%)); }
+.vts-text-sky-200 { color: var(--vts-color-sky-200, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 30%, white 70%)); }
+.vts-text-sky-300 { color: var(--vts-color-sky-300, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 45%, white 55%)); }
+.vts-text-sky-400 { color: var(--vts-color-sky-400, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 60%, white 40%)); }
+.vts-text-sky-500 { color: var(--vts-color-sky-500, var(--vts-color-sky, #0ea5e9)); }
+.vts-text-sky-600 { color: var(--vts-color-sky-600, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 90%, black 10%)); }
+.vts-text-sky-700 { color: var(--vts-color-sky-700, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 75%, black 25%)); }
+.vts-text-sky-800 { color: var(--vts-color-sky-800, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 60%, black 40%)); }
+.vts-text-sky-900 { color: var(--vts-color-sky-900, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 45%, black 55%)); }
+.vts-text-sky-950 { color: var(--vts-color-sky-950, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 30%, black 70%)); }
+.vts-border-sky-50 { border-color: var(--vts-color-sky-50, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 10%, white 90%)); }
+.vts-border-sky-100 { border-color: var(--vts-color-sky-100, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 20%, white 80%)); }
+.vts-border-sky-200 { border-color: var(--vts-color-sky-200, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 30%, white 70%)); }
+.vts-border-sky-300 { border-color: var(--vts-color-sky-300, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 45%, white 55%)); }
+.vts-border-sky-400 { border-color: var(--vts-color-sky-400, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 60%, white 40%)); }
+.vts-border-sky-500 { border-color: var(--vts-color-sky-500, var(--vts-color-sky, #0ea5e9)); }
+.vts-border-sky-600 { border-color: var(--vts-color-sky-600, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 90%, black 10%)); }
+.vts-border-sky-700 { border-color: var(--vts-color-sky-700, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 75%, black 25%)); }
+.vts-border-sky-800 { border-color: var(--vts-color-sky-800, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 60%, black 40%)); }
+.vts-border-sky-900 { border-color: var(--vts-color-sky-900, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 45%, black 55%)); }
+.vts-border-sky-950 { border-color: var(--vts-color-sky-950, color-mix(in srgb, var(--vts-color-sky, #0ea5e9) 30%, black 70%)); }
+
+/* INDIGO */
+.vts-bg-indigo-50 { background-color: var(--vts-color-indigo-50, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 10%, white 90%)); }
+.vts-bg-indigo-100 { background-color: var(--vts-color-indigo-100, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 20%, white 80%)); }
+.vts-bg-indigo-200 { background-color: var(--vts-color-indigo-200, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 30%, white 70%)); }
+.vts-bg-indigo-300 { background-color: var(--vts-color-indigo-300, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 45%, white 55%)); }
+.vts-bg-indigo-400 { background-color: var(--vts-color-indigo-400, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 60%, white 40%)); }
+.vts-bg-indigo-500 { background-color: var(--vts-color-indigo-500, var(--vts-color-indigo, #6366f1)); }
+.vts-bg-indigo-600 { background-color: var(--vts-color-indigo-600, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 90%, black 10%)); }
+.vts-bg-indigo-700 { background-color: var(--vts-color-indigo-700, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 75%, black 25%)); }
+.vts-bg-indigo-800 { background-color: var(--vts-color-indigo-800, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 60%, black 40%)); }
+.vts-bg-indigo-900 { background-color: var(--vts-color-indigo-900, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 45%, black 55%)); }
+.vts-bg-indigo-950 { background-color: var(--vts-color-indigo-950, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 30%, black 70%)); }
+.vts-text-indigo-50 { color: var(--vts-color-indigo-50, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 10%, white 90%)); }
+.vts-text-indigo-100 { color: var(--vts-color-indigo-100, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 20%, white 80%)); }
+.vts-text-indigo-200 { color: var(--vts-color-indigo-200, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 30%, white 70%)); }
+.vts-text-indigo-300 { color: var(--vts-color-indigo-300, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 45%, white 55%)); }
+.vts-text-indigo-400 { color: var(--vts-color-indigo-400, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 60%, white 40%)); }
+.vts-text-indigo-500 { color: var(--vts-color-indigo-500, var(--vts-color-indigo, #6366f1)); }
+.vts-text-indigo-600 { color: var(--vts-color-indigo-600, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 90%, black 10%)); }
+.vts-text-indigo-700 { color: var(--vts-color-indigo-700, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 75%, black 25%)); }
+.vts-text-indigo-800 { color: var(--vts-color-indigo-800, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 60%, black 40%)); }
+.vts-text-indigo-900 { color: var(--vts-color-indigo-900, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 45%, black 55%)); }
+.vts-text-indigo-950 { color: var(--vts-color-indigo-950, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 30%, black 70%)); }
+.vts-border-indigo-50 { border-color: var(--vts-color-indigo-50, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 10%, white 90%)); }
+.vts-border-indigo-100 { border-color: var(--vts-color-indigo-100, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 20%, white 80%)); }
+.vts-border-indigo-200 { border-color: var(--vts-color-indigo-200, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 30%, white 70%)); }
+.vts-border-indigo-300 { border-color: var(--vts-color-indigo-300, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 45%, white 55%)); }
+.vts-border-indigo-400 { border-color: var(--vts-color-indigo-400, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 60%, white 40%)); }
+.vts-border-indigo-500 { border-color: var(--vts-color-indigo-500, var(--vts-color-indigo, #6366f1)); }
+.vts-border-indigo-600 { border-color: var(--vts-color-indigo-600, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 90%, black 10%)); }
+.vts-border-indigo-700 { border-color: var(--vts-color-indigo-700, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 75%, black 25%)); }
+.vts-border-indigo-800 { border-color: var(--vts-color-indigo-800, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 60%, black 40%)); }
+.vts-border-indigo-900 { border-color: var(--vts-color-indigo-900, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 45%, black 55%)); }
+.vts-border-indigo-950 { border-color: var(--vts-color-indigo-950, color-mix(in srgb, var(--vts-color-indigo, #6366f1) 30%, black 70%)); }
+
+/* PURPLE */
+.vts-bg-purple-50 { background-color: var(--vts-color-purple-50, color-mix(in srgb, var(--vts-color-purple, #a855f7) 10%, white 90%)); }
+.vts-bg-purple-100 { background-color: var(--vts-color-purple-100, color-mix(in srgb, var(--vts-color-purple, #a855f7) 20%, white 80%)); }
+.vts-bg-purple-200 { background-color: var(--vts-color-purple-200, color-mix(in srgb, var(--vts-color-purple, #a855f7) 30%, white 70%)); }
+.vts-bg-purple-300 { background-color: var(--vts-color-purple-300, color-mix(in srgb, var(--vts-color-purple, #a855f7) 45%, white 55%)); }
+.vts-bg-purple-400 { background-color: var(--vts-color-purple-400, color-mix(in srgb, var(--vts-color-purple, #a855f7) 60%, white 40%)); }
+.vts-bg-purple-500 { background-color: var(--vts-color-purple-500, var(--vts-color-purple, #a855f7)); }
+.vts-bg-purple-600 { background-color: var(--vts-color-purple-600, color-mix(in srgb, var(--vts-color-purple, #a855f7) 90%, black 10%)); }
+.vts-bg-purple-700 { background-color: var(--vts-color-purple-700, color-mix(in srgb, var(--vts-color-purple, #a855f7) 75%, black 25%)); }
+.vts-bg-purple-800 { background-color: var(--vts-color-purple-800, color-mix(in srgb, var(--vts-color-purple, #a855f7) 60%, black 40%)); }
+.vts-bg-purple-900 { background-color: var(--vts-color-purple-900, color-mix(in srgb, var(--vts-color-purple, #a855f7) 45%, black 55%)); }
+.vts-bg-purple-950 { background-color: var(--vts-color-purple-950, color-mix(in srgb, var(--vts-color-purple, #a855f7) 30%, black 70%)); }
+.vts-text-purple-50 { color: var(--vts-color-purple-50, color-mix(in srgb, var(--vts-color-purple, #a855f7) 10%, white 90%)); }
+.vts-text-purple-100 { color: var(--vts-color-purple-100, color-mix(in srgb, var(--vts-color-purple, #a855f7) 20%, white 80%)); }
+.vts-text-purple-200 { color: var(--vts-color-purple-200, color-mix(in srgb, var(--vts-color-purple, #a855f7) 30%, white 70%)); }
+.vts-text-purple-300 { color: var(--vts-color-purple-300, color-mix(in srgb, var(--vts-color-purple, #a855f7) 45%, white 55%)); }
+.vts-text-purple-400 { color: var(--vts-color-purple-400, color-mix(in srgb, var(--vts-color-purple, #a855f7) 60%, white 40%)); }
+.vts-text-purple-500 { color: var(--vts-color-purple-500, var(--vts-color-purple, #a855f7)); }
+.vts-text-purple-600 { color: var(--vts-color-purple-600, color-mix(in srgb, var(--vts-color-purple, #a855f7) 90%, black 10%)); }
+.vts-text-purple-700 { color: var(--vts-color-purple-700, color-mix(in srgb, var(--vts-color-purple, #a855f7) 75%, black 25%)); }
+.vts-text-purple-800 { color: var(--vts-color-purple-800, color-mix(in srgb, var(--vts-color-purple, #a855f7) 60%, black 40%)); }
+.vts-text-purple-900 { color: var(--vts-color-purple-900, color-mix(in srgb, var(--vts-color-purple, #a855f7) 45%, black 55%)); }
+.vts-text-purple-950 { color: var(--vts-color-purple-950, color-mix(in srgb, var(--vts-color-purple, #a855f7) 30%, black 70%)); }
+.vts-border-purple-50 { border-color: var(--vts-color-purple-50, color-mix(in srgb, var(--vts-color-purple, #a855f7) 10%, white 90%)); }
+.vts-border-purple-100 { border-color: var(--vts-color-purple-100, color-mix(in srgb, var(--vts-color-purple, #a855f7) 20%, white 80%)); }
+.vts-border-purple-200 { border-color: var(--vts-color-purple-200, color-mix(in srgb, var(--vts-color-purple, #a855f7) 30%, white 70%)); }
+.vts-border-purple-300 { border-color: var(--vts-color-purple-300, color-mix(in srgb, var(--vts-color-purple, #a855f7) 45%, white 55%)); }
+.vts-border-purple-400 { border-color: var(--vts-color-purple-400, color-mix(in srgb, var(--vts-color-purple, #a855f7) 60%, white 40%)); }
+.vts-border-purple-500 { border-color: var(--vts-color-purple-500, var(--vts-color-purple, #a855f7)); }
+.vts-border-purple-600 { border-color: var(--vts-color-purple-600, color-mix(in srgb, var(--vts-color-purple, #a855f7) 90%, black 10%)); }
+.vts-border-purple-700 { border-color: var(--vts-color-purple-700, color-mix(in srgb, var(--vts-color-purple, #a855f7) 75%, black 25%)); }
+.vts-border-purple-800 { border-color: var(--vts-color-purple-800, color-mix(in srgb, var(--vts-color-purple, #a855f7) 60%, black 40%)); }
+.vts-border-purple-900 { border-color: var(--vts-color-purple-900, color-mix(in srgb, var(--vts-color-purple, #a855f7) 45%, black 55%)); }
+.vts-border-purple-950 { border-color: var(--vts-color-purple-950, color-mix(in srgb, var(--vts-color-purple, #a855f7) 30%, black 70%)); }
+
+/* FUCHSIA */
+.vts-bg-fuchsia-50 { background-color: var(--vts-color-fuchsia-50, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 10%, white 90%)); }
+.vts-bg-fuchsia-100 { background-color: var(--vts-color-fuchsia-100, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 20%, white 80%)); }
+.vts-bg-fuchsia-200 { background-color: var(--vts-color-fuchsia-200, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 30%, white 70%)); }
+.vts-bg-fuchsia-300 { background-color: var(--vts-color-fuchsia-300, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 45%, white 55%)); }
+.vts-bg-fuchsia-400 { background-color: var(--vts-color-fuchsia-400, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 60%, white 40%)); }
+.vts-bg-fuchsia-500 { background-color: var(--vts-color-fuchsia-500, var(--vts-color-fuchsia, #d946ef)); }
+.vts-bg-fuchsia-600 { background-color: var(--vts-color-fuchsia-600, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 90%, black 10%)); }
+.vts-bg-fuchsia-700 { background-color: var(--vts-color-fuchsia-700, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 75%, black 25%)); }
+.vts-bg-fuchsia-800 { background-color: var(--vts-color-fuchsia-800, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 60%, black 40%)); }
+.vts-bg-fuchsia-900 { background-color: var(--vts-color-fuchsia-900, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 45%, black 55%)); }
+.vts-bg-fuchsia-950 { background-color: var(--vts-color-fuchsia-950, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 30%, black 70%)); }
+.vts-text-fuchsia-50 { color: var(--vts-color-fuchsia-50, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 10%, white 90%)); }
+.vts-text-fuchsia-100 { color: var(--vts-color-fuchsia-100, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 20%, white 80%)); }
+.vts-text-fuchsia-200 { color: var(--vts-color-fuchsia-200, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 30%, white 70%)); }
+.vts-text-fuchsia-300 { color: var(--vts-color-fuchsia-300, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 45%, white 55%)); }
+.vts-text-fuchsia-400 { color: var(--vts-color-fuchsia-400, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 60%, white 40%)); }
+.vts-text-fuchsia-500 { color: var(--vts-color-fuchsia-500, var(--vts-color-fuchsia, #d946ef)); }
+.vts-text-fuchsia-600 { color: var(--vts-color-fuchsia-600, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 90%, black 10%)); }
+.vts-text-fuchsia-700 { color: var(--vts-color-fuchsia-700, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 75%, black 25%)); }
+.vts-text-fuchsia-800 { color: var(--vts-color-fuchsia-800, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 60%, black 40%)); }
+.vts-text-fuchsia-900 { color: var(--vts-color-fuchsia-900, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 45%, black 55%)); }
+.vts-text-fuchsia-950 { color: var(--vts-color-fuchsia-950, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 30%, black 70%)); }
+.vts-border-fuchsia-50 { border-color: var(--vts-color-fuchsia-50, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 10%, white 90%)); }
+.vts-border-fuchsia-100 { border-color: var(--vts-color-fuchsia-100, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 20%, white 80%)); }
+.vts-border-fuchsia-200 { border-color: var(--vts-color-fuchsia-200, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 30%, white 70%)); }
+.vts-border-fuchsia-300 { border-color: var(--vts-color-fuchsia-300, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 45%, white 55%)); }
+.vts-border-fuchsia-400 { border-color: var(--vts-color-fuchsia-400, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 60%, white 40%)); }
+.vts-border-fuchsia-500 { border-color: var(--vts-color-fuchsia-500, var(--vts-color-fuchsia, #d946ef)); }
+.vts-border-fuchsia-600 { border-color: var(--vts-color-fuchsia-600, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 90%, black 10%)); }
+.vts-border-fuchsia-700 { border-color: var(--vts-color-fuchsia-700, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 75%, black 25%)); }
+.vts-border-fuchsia-800 { border-color: var(--vts-color-fuchsia-800, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 60%, black 40%)); }
+.vts-border-fuchsia-900 { border-color: var(--vts-color-fuchsia-900, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 45%, black 55%)); }
+.vts-border-fuchsia-950 { border-color: var(--vts-color-fuchsia-950, color-mix(in srgb, var(--vts-color-fuchsia, #d946ef) 30%, black 70%)); }
+
+/* PINK */
+.vts-bg-pink-50 { background-color: var(--vts-color-pink-50, color-mix(in srgb, var(--vts-color-pink, #ec4899) 10%, white 90%)); }
+.vts-bg-pink-100 { background-color: var(--vts-color-pink-100, color-mix(in srgb, var(--vts-color-pink, #ec4899) 20%, white 80%)); }
+.vts-bg-pink-200 { background-color: var(--vts-color-pink-200, color-mix(in srgb, var(--vts-color-pink, #ec4899) 30%, white 70%)); }
+.vts-bg-pink-300 { background-color: var(--vts-color-pink-300, color-mix(in srgb, var(--vts-color-pink, #ec4899) 45%, white 55%)); }
+.vts-bg-pink-400 { background-color: var(--vts-color-pink-400, color-mix(in srgb, var(--vts-color-pink, #ec4899) 60%, white 40%)); }
+.vts-bg-pink-500 { background-color: var(--vts-color-pink-500, var(--vts-color-pink, #ec4899)); }
+.vts-bg-pink-600 { background-color: var(--vts-color-pink-600, color-mix(in srgb, var(--vts-color-pink, #ec4899) 90%, black 10%)); }
+.vts-bg-pink-700 { background-color: var(--vts-color-pink-700, color-mix(in srgb, var(--vts-color-pink, #ec4899) 75%, black 25%)); }
+.vts-bg-pink-800 { background-color: var(--vts-color-pink-800, color-mix(in srgb, var(--vts-color-pink, #ec4899) 60%, black 40%)); }
+.vts-bg-pink-900 { background-color: var(--vts-color-pink-900, color-mix(in srgb, var(--vts-color-pink, #ec4899) 45%, black 55%)); }
+.vts-bg-pink-950 { background-color: var(--vts-color-pink-950, color-mix(in srgb, var(--vts-color-pink, #ec4899) 30%, black 70%)); }
+.vts-text-pink-50 { color: var(--vts-color-pink-50, color-mix(in srgb, var(--vts-color-pink, #ec4899) 10%, white 90%)); }
+.vts-text-pink-100 { color: var(--vts-color-pink-100, color-mix(in srgb, var(--vts-color-pink, #ec4899) 20%, white 80%)); }
+.vts-text-pink-200 { color: var(--vts-color-pink-200, color-mix(in srgb, var(--vts-color-pink, #ec4899) 30%, white 70%)); }
+.vts-text-pink-300 { color: var(--vts-color-pink-300, color-mix(in srgb, var(--vts-color-pink, #ec4899) 45%, white 55%)); }
+.vts-text-pink-400 { color: var(--vts-color-pink-400, color-mix(in srgb, var(--vts-color-pink, #ec4899) 60%, white 40%)); }
+.vts-text-pink-500 { color: var(--vts-color-pink-500, var(--vts-color-pink, #ec4899)); }
+.vts-text-pink-600 { color: var(--vts-color-pink-600, color-mix(in srgb, var(--vts-color-pink, #ec4899) 90%, black 10%)); }
+.vts-text-pink-700 { color: var(--vts-color-pink-700, color-mix(in srgb, var(--vts-color-pink, #ec4899) 75%, black 25%)); }
+.vts-text-pink-800 { color: var(--vts-color-pink-800, color-mix(in srgb, var(--vts-color-pink, #ec4899) 60%, black 40%)); }
+.vts-text-pink-900 { color: var(--vts-color-pink-900, color-mix(in srgb, var(--vts-color-pink, #ec4899) 45%, black 55%)); }
+.vts-text-pink-950 { color: var(--vts-color-pink-950, color-mix(in srgb, var(--vts-color-pink, #ec4899) 30%, black 70%)); }
+.vts-border-pink-50 { border-color: var(--vts-color-pink-50, color-mix(in srgb, var(--vts-color-pink, #ec4899) 10%, white 90%)); }
+.vts-border-pink-100 { border-color: var(--vts-color-pink-100, color-mix(in srgb, var(--vts-color-pink, #ec4899) 20%, white 80%)); }
+.vts-border-pink-200 { border-color: var(--vts-color-pink-200, color-mix(in srgb, var(--vts-color-pink, #ec4899) 30%, white 70%)); }
+.vts-border-pink-300 { border-color: var(--vts-color-pink-300, color-mix(in srgb, var(--vts-color-pink, #ec4899) 45%, white 55%)); }
+.vts-border-pink-400 { border-color: var(--vts-color-pink-400, color-mix(in srgb, var(--vts-color-pink, #ec4899) 60%, white 40%)); }
+.vts-border-pink-500 { border-color: var(--vts-color-pink-500, var(--vts-color-pink, #ec4899)); }
+.vts-border-pink-600 { border-color: var(--vts-color-pink-600, color-mix(in srgb, var(--vts-color-pink, #ec4899) 90%, black 10%)); }
+.vts-border-pink-700 { border-color: var(--vts-color-pink-700, color-mix(in srgb, var(--vts-color-pink, #ec4899) 75%, black 25%)); }
+.vts-border-pink-800 { border-color: var(--vts-color-pink-800, color-mix(in srgb, var(--vts-color-pink, #ec4899) 60%, black 40%)); }
+.vts-border-pink-900 { border-color: var(--vts-color-pink-900, color-mix(in srgb, var(--vts-color-pink, #ec4899) 45%, black 55%)); }
+.vts-border-pink-950 { border-color: var(--vts-color-pink-950, color-mix(in srgb, var(--vts-color-pink, #ec4899) 30%, black 70%)); }
+
+/* SLATE */
+.vts-bg-slate-50 { background-color: var(--vts-color-slate-50, color-mix(in srgb, var(--vts-color-slate, #64748b) 10%, white 90%)); }
+.vts-bg-slate-100 { background-color: var(--vts-color-slate-100, color-mix(in srgb, var(--vts-color-slate, #64748b) 20%, white 80%)); }
+.vts-bg-slate-200 { background-color: var(--vts-color-slate-200, color-mix(in srgb, var(--vts-color-slate, #64748b) 30%, white 70%)); }
+.vts-bg-slate-300 { background-color: var(--vts-color-slate-300, color-mix(in srgb, var(--vts-color-slate, #64748b) 45%, white 55%)); }
+.vts-bg-slate-400 { background-color: var(--vts-color-slate-400, color-mix(in srgb, var(--vts-color-slate, #64748b) 60%, white 40%)); }
+.vts-bg-slate-500 { background-color: var(--vts-color-slate-500, var(--vts-color-slate, #64748b)); }
+.vts-bg-slate-600 { background-color: var(--vts-color-slate-600, color-mix(in srgb, var(--vts-color-slate, #64748b) 90%, black 10%)); }
+.vts-bg-slate-700 { background-color: var(--vts-color-slate-700, color-mix(in srgb, var(--vts-color-slate, #64748b) 75%, black 25%)); }
+.vts-bg-slate-800 { background-color: var(--vts-color-slate-800, color-mix(in srgb, var(--vts-color-slate, #64748b) 60%, black 40%)); }
+.vts-bg-slate-900 { background-color: var(--vts-color-slate-900, color-mix(in srgb, var(--vts-color-slate, #64748b) 45%, black 55%)); }
+.vts-bg-slate-950 { background-color: var(--vts-color-slate-950, color-mix(in srgb, var(--vts-color-slate, #64748b) 30%, black 70%)); }
+.vts-text-slate-50 { color: var(--vts-color-slate-50, color-mix(in srgb, var(--vts-color-slate, #64748b) 10%, white 90%)); }
+.vts-text-slate-100 { color: var(--vts-color-slate-100, color-mix(in srgb, var(--vts-color-slate, #64748b) 20%, white 80%)); }
+.vts-text-slate-200 { color: var(--vts-color-slate-200, color-mix(in srgb, var(--vts-color-slate, #64748b) 30%, white 70%)); }
+.vts-text-slate-300 { color: var(--vts-color-slate-300, color-mix(in srgb, var(--vts-color-slate, #64748b) 45%, white 55%)); }
+.vts-text-slate-400 { color: var(--vts-color-slate-400, color-mix(in srgb, var(--vts-color-slate, #64748b) 60%, white 40%)); }
+.vts-text-slate-500 { color: var(--vts-color-slate-500, var(--vts-color-slate, #64748b)); }
+.vts-text-slate-600 { color: var(--vts-color-slate-600, color-mix(in srgb, var(--vts-color-slate, #64748b) 90%, black 10%)); }
+.vts-text-slate-700 { color: var(--vts-color-slate-700, color-mix(in srgb, var(--vts-color-slate, #64748b) 75%, black 25%)); }
+.vts-text-slate-800 { color: var(--vts-color-slate-800, color-mix(in srgb, var(--vts-color-slate, #64748b) 60%, black 40%)); }
+.vts-text-slate-900 { color: var(--vts-color-slate-900, color-mix(in srgb, var(--vts-color-slate, #64748b) 45%, black 55%)); }
+.vts-text-slate-950 { color: var(--vts-color-slate-950, color-mix(in srgb, var(--vts-color-slate, #64748b) 30%, black 70%)); }
+.vts-border-slate-50 { border-color: var(--vts-color-slate-50, color-mix(in srgb, var(--vts-color-slate, #64748b) 10%, white 90%)); }
+.vts-border-slate-100 { border-color: var(--vts-color-slate-100, color-mix(in srgb, var(--vts-color-slate, #64748b) 20%, white 80%)); }
+.vts-border-slate-200 { border-color: var(--vts-color-slate-200, color-mix(in srgb, var(--vts-color-slate, #64748b) 30%, white 70%)); }
+.vts-border-slate-300 { border-color: var(--vts-color-slate-300, color-mix(in srgb, var(--vts-color-slate, #64748b) 45%, white 55%)); }
+.vts-border-slate-400 { border-color: var(--vts-color-slate-400, color-mix(in srgb, var(--vts-color-slate, #64748b) 60%, white 40%)); }
+.vts-border-slate-500 { border-color: var(--vts-color-slate-500, var(--vts-color-slate, #64748b)); }
+.vts-border-slate-600 { border-color: var(--vts-color-slate-600, color-mix(in srgb, var(--vts-color-slate, #64748b) 90%, black 10%)); }
+.vts-border-slate-700 { border-color: var(--vts-color-slate-700, color-mix(in srgb, var(--vts-color-slate, #64748b) 75%, black 25%)); }
+.vts-border-slate-800 { border-color: var(--vts-color-slate-800, color-mix(in srgb, var(--vts-color-slate, #64748b) 60%, black 40%)); }
+.vts-border-slate-900 { border-color: var(--vts-color-slate-900, color-mix(in srgb, var(--vts-color-slate, #64748b) 45%, black 55%)); }
+.vts-border-slate-950 { border-color: var(--vts-color-slate-950, color-mix(in srgb, var(--vts-color-slate, #64748b) 30%, black 70%)); }
+
+/* GRAY */
+.vts-bg-gray-50 { background-color: var(--vts-color-gray-50, color-mix(in srgb, var(--vts-color-gray, #6b7280) 10%, white 90%)); }
+.vts-bg-gray-100 { background-color: var(--vts-color-gray-100, color-mix(in srgb, var(--vts-color-gray, #6b7280) 20%, white 80%)); }
+.vts-bg-gray-200 { background-color: var(--vts-color-gray-200, color-mix(in srgb, var(--vts-color-gray, #6b7280) 30%, white 70%)); }
+.vts-bg-gray-300 { background-color: var(--vts-color-gray-300, color-mix(in srgb, var(--vts-color-gray, #6b7280) 45%, white 55%)); }
+.vts-bg-gray-400 { background-color: var(--vts-color-gray-400, color-mix(in srgb, var(--vts-color-gray, #6b7280) 60%, white 40%)); }
+.vts-bg-gray-500 { background-color: var(--vts-color-gray-500, var(--vts-color-gray, #6b7280)); }
+.vts-bg-gray-600 { background-color: var(--vts-color-gray-600, color-mix(in srgb, var(--vts-color-gray, #6b7280) 90%, black 10%)); }
+.vts-bg-gray-700 { background-color: var(--vts-color-gray-700, color-mix(in srgb, var(--vts-color-gray, #6b7280) 75%, black 25%)); }
+.vts-bg-gray-800 { background-color: var(--vts-color-gray-800, color-mix(in srgb, var(--vts-color-gray, #6b7280) 60%, black 40%)); }
+.vts-bg-gray-900 { background-color: var(--vts-color-gray-900, color-mix(in srgb, var(--vts-color-gray, #6b7280) 45%, black 55%)); }
+.vts-bg-gray-950 { background-color: var(--vts-color-gray-950, color-mix(in srgb, var(--vts-color-gray, #6b7280) 30%, black 70%)); }
+.vts-text-gray-50 { color: var(--vts-color-gray-50, color-mix(in srgb, var(--vts-color-gray, #6b7280) 10%, white 90%)); }
+.vts-text-gray-100 { color: var(--vts-color-gray-100, color-mix(in srgb, var(--vts-color-gray, #6b7280) 20%, white 80%)); }
+.vts-text-gray-200 { color: var(--vts-color-gray-200, color-mix(in srgb, var(--vts-color-gray, #6b7280) 30%, white 70%)); }
+.vts-text-gray-300 { color: var(--vts-color-gray-300, color-mix(in srgb, var(--vts-color-gray, #6b7280) 45%, white 55%)); }
+.vts-text-gray-400 { color: var(--vts-color-gray-400, color-mix(in srgb, var(--vts-color-gray, #6b7280) 60%, white 40%)); }
+.vts-text-gray-500 { color: var(--vts-color-gray-500, var(--vts-color-gray, #6b7280)); }
+.vts-text-gray-600 { color: var(--vts-color-gray-600, color-mix(in srgb, var(--vts-color-gray, #6b7280) 90%, black 10%)); }
+.vts-text-gray-700 { color: var(--vts-color-gray-700, color-mix(in srgb, var(--vts-color-gray, #6b7280) 75%, black 25%)); }
+.vts-text-gray-800 { color: var(--vts-color-gray-800, color-mix(in srgb, var(--vts-color-gray, #6b7280) 60%, black 40%)); }
+.vts-text-gray-900 { color: var(--vts-color-gray-900, color-mix(in srgb, var(--vts-color-gray, #6b7280) 45%, black 55%)); }
+.vts-text-gray-950 { color: var(--vts-color-gray-950, color-mix(in srgb, var(--vts-color-gray, #6b7280) 30%, black 70%)); }
+.vts-border-gray-50 { border-color: var(--vts-color-gray-50, color-mix(in srgb, var(--vts-color-gray, #6b7280) 10%, white 90%)); }
+.vts-border-gray-100 { border-color: var(--vts-color-gray-100, color-mix(in srgb, var(--vts-color-gray, #6b7280) 20%, white 80%)); }
+.vts-border-gray-200 { border-color: var(--vts-color-gray-200, color-mix(in srgb, var(--vts-color-gray, #6b7280) 30%, white 70%)); }
+.vts-border-gray-300 { border-color: var(--vts-color-gray-300, color-mix(in srgb, var(--vts-color-gray, #6b7280) 45%, white 55%)); }
+.vts-border-gray-400 { border-color: var(--vts-color-gray-400, color-mix(in srgb, var(--vts-color-gray, #6b7280) 60%, white 40%)); }
+.vts-border-gray-500 { border-color: var(--vts-color-gray-500, var(--vts-color-gray, #6b7280)); }
+.vts-border-gray-600 { border-color: var(--vts-color-gray-600, color-mix(in srgb, var(--vts-color-gray, #6b7280) 90%, black 10%)); }
+.vts-border-gray-700 { border-color: var(--vts-color-gray-700, color-mix(in srgb, var(--vts-color-gray, #6b7280) 75%, black 25%)); }
+.vts-border-gray-800 { border-color: var(--vts-color-gray-800, color-mix(in srgb, var(--vts-color-gray, #6b7280) 60%, black 40%)); }
+.vts-border-gray-900 { border-color: var(--vts-color-gray-900, color-mix(in srgb, var(--vts-color-gray, #6b7280) 45%, black 55%)); }
+.vts-border-gray-950 { border-color: var(--vts-color-gray-950, color-mix(in srgb, var(--vts-color-gray, #6b7280) 30%, black 70%)); }
+
+/* STONE */
+.vts-bg-stone-50 { background-color: var(--vts-color-stone-50, color-mix(in srgb, var(--vts-color-stone, #78716c) 10%, white 90%)); }
+.vts-bg-stone-100 { background-color: var(--vts-color-stone-100, color-mix(in srgb, var(--vts-color-stone, #78716c) 20%, white 80%)); }
+.vts-bg-stone-200 { background-color: var(--vts-color-stone-200, color-mix(in srgb, var(--vts-color-stone, #78716c) 30%, white 70%)); }
+.vts-bg-stone-300 { background-color: var(--vts-color-stone-300, color-mix(in srgb, var(--vts-color-stone, #78716c) 45%, white 55%)); }
+.vts-bg-stone-400 { background-color: var(--vts-color-stone-400, color-mix(in srgb, var(--vts-color-stone, #78716c) 60%, white 40%)); }
+.vts-bg-stone-500 { background-color: var(--vts-color-stone-500, var(--vts-color-stone, #78716c)); }
+.vts-bg-stone-600 { background-color: var(--vts-color-stone-600, color-mix(in srgb, var(--vts-color-stone, #78716c) 90%, black 10%)); }
+.vts-bg-stone-700 { background-color: var(--vts-color-stone-700, color-mix(in srgb, var(--vts-color-stone, #78716c) 75%, black 25%)); }
+.vts-bg-stone-800 { background-color: var(--vts-color-stone-800, color-mix(in srgb, var(--vts-color-stone, #78716c) 60%, black 40%)); }
+.vts-bg-stone-900 { background-color: var(--vts-color-stone-900, color-mix(in srgb, var(--vts-color-stone, #78716c) 45%, black 55%)); }
+.vts-bg-stone-950 { background-color: var(--vts-color-stone-950, color-mix(in srgb, var(--vts-color-stone, #78716c) 30%, black 70%)); }
+.vts-text-stone-50 { color: var(--vts-color-stone-50, color-mix(in srgb, var(--vts-color-stone, #78716c) 10%, white 90%)); }
+.vts-text-stone-100 { color: var(--vts-color-stone-100, color-mix(in srgb, var(--vts-color-stone, #78716c) 20%, white 80%)); }
+.vts-text-stone-200 { color: var(--vts-color-stone-200, color-mix(in srgb, var(--vts-color-stone, #78716c) 30%, white 70%)); }
+.vts-text-stone-300 { color: var(--vts-color-stone-300, color-mix(in srgb, var(--vts-color-stone, #78716c) 45%, white 55%)); }
+.vts-text-stone-400 { color: var(--vts-color-stone-400, color-mix(in srgb, var(--vts-color-stone, #78716c) 60%, white 40%)); }
+.vts-text-stone-500 { color: var(--vts-color-stone-500, var(--vts-color-stone, #78716c)); }
+.vts-text-stone-600 { color: var(--vts-color-stone-600, color-mix(in srgb, var(--vts-color-stone, #78716c) 90%, black 10%)); }
+.vts-text-stone-700 { color: var(--vts-color-stone-700, color-mix(in srgb, var(--vts-color-stone, #78716c) 75%, black 25%)); }
+.vts-text-stone-800 { color: var(--vts-color-stone-800, color-mix(in srgb, var(--vts-color-stone, #78716c) 60%, black 40%)); }
+.vts-text-stone-900 { color: var(--vts-color-stone-900, color-mix(in srgb, var(--vts-color-stone, #78716c) 45%, black 55%)); }
+.vts-text-stone-950 { color: var(--vts-color-stone-950, color-mix(in srgb, var(--vts-color-stone, #78716c) 30%, black 70%)); }
+.vts-border-stone-50 { border-color: var(--vts-color-stone-50, color-mix(in srgb, var(--vts-color-stone, #78716c) 10%, white 90%)); }
+.vts-border-stone-100 { border-color: var(--vts-color-stone-100, color-mix(in srgb, var(--vts-color-stone, #78716c) 20%, white 80%)); }
+.vts-border-stone-200 { border-color: var(--vts-color-stone-200, color-mix(in srgb, var(--vts-color-stone, #78716c) 30%, white 70%)); }
+.vts-border-stone-300 { border-color: var(--vts-color-stone-300, color-mix(in srgb, var(--vts-color-stone, #78716c) 45%, white 55%)); }
+.vts-border-stone-400 { border-color: var(--vts-color-stone-400, color-mix(in srgb, var(--vts-color-stone, #78716c) 60%, white 40%)); }
+.vts-border-stone-500 { border-color: var(--vts-color-stone-500, var(--vts-color-stone, #78716c)); }
+.vts-border-stone-600 { border-color: var(--vts-color-stone-600, color-mix(in srgb, var(--vts-color-stone, #78716c) 90%, black 10%)); }
+.vts-border-stone-700 { border-color: var(--vts-color-stone-700, color-mix(in srgb, var(--vts-color-stone, #78716c) 75%, black 25%)); }
+.vts-border-stone-800 { border-color: var(--vts-color-stone-800, color-mix(in srgb, var(--vts-color-stone, #78716c) 60%, black 40%)); }
+.vts-border-stone-900 { border-color: var(--vts-color-stone-900, color-mix(in srgb, var(--vts-color-stone, #78716c) 45%, black 55%)); }
+.vts-border-stone-950 { border-color: var(--vts-color-stone-950, color-mix(in srgb, var(--vts-color-stone, #78716c) 30%, black 70%)); }

package/src/pgo-components/styles/utilities/position.css

@@ -0,0 +1,14 @@
+@layer utilities {
+	/* Position utilities */
+	.vts-position-static { position: static; }
+	.vts-position-relative { position: relative; }
+	.vts-position-absolute { position: absolute; }
+	.vts-position-fixed { position: fixed; }
+	.vts-position-sticky { position: sticky; }
+
+	/* Offsets */
+	.vts-top-0 { top: 0; }
+	.vts-right-0 { right: 0; }
+	.vts-bottom-0 { bottom: 0; }
+	.vts-left-0 { left: 0; }
+}