From 7a78657c2395db0ec9fb07ded43927d9c7eb2dc1 Mon Sep 17 00:00:00 2001
From: erdfern <rexsomnia@pm.me>
Date: Tue, 21 Jan 2025 16:29:25 +0100
Subject: [PATCH] restore pcss extensions...

---
 src/app.pcss       | 6419 ++++++++++++++++++++++++++++++++++++++++++++
 tailwind.config.ts |    4 +-
 2 files changed, 6422 insertions(+), 1 deletion(-)

diff --git a/src/app.pcss b/src/app.pcss
index b5c61c95..446dbdfe 100644
--- a/src/app.pcss
+++ b/src/app.pcss
@@ -1,3 +1,6422 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@tailwind variants;
+
+html,
+body {
+}
+
+:root [data-theme='grady'] {
+	--base-font-family: system-ui;
+	--heading-font-family: system-ui;
+}
+
+.externalHTML h1 {
+	@apply pb-1 pt-1 text-2xl font-bold underline;
+}
+.externalHTML h2 {
+	@apply pb-1 pt-1 text-xl font-semibold;
+}
+.externalHTML ul {
+	ul {
+		@apply list-disc font-normal;
+	}
+	@apply list-disc pl-6 font-normal;
+}
+
+textarea {
+	@apply border-none;
+}
+
+/* default style for scrollbars using the 'scrollbar' class from the tw plugin */
+@layer utilities {
+	.scrollbar {
+		@apply scrollbar-track-gray-100 scrollbar-thumb-gray-300 dark:scrollbar-track-slate-900 dark:scrollbar-thumb-slate-700;
+	}
+}
+
+/* extending the skeleton-provided variants from here:                                                     */
+/* https://github.com/skeletonlabs/skeleton/blob/master/packages/plugin/src/styles/components/variants.css */
+@layer components {
+	/* color interpolations for black + white */
+
+	.bg-black-950 {
+		@apply bg-neutral-950;
+	}
+	.bg-white-50 {
+		@apply bg-neutral-50;
+	}
+	.bg-black-900 {
+		@apply bg-neutral-900;
+	}
+	.bg-white-100 {
+		@apply bg-neutral-100;
+	}
+	.bg-black-800 {
+		@apply bg-neutral-800;
+	}
+	.bg-white-200 {
+		@apply bg-neutral-200;
+	}
+	.bg-black-700 {
+		@apply bg-neutral-700;
+	}
+	.bg-white-300 {
+		@apply bg-neutral-300;
+	}
+	.bg-black-600 {
+		@apply bg-neutral-600;
+	}
+	.bg-white-400 {
+		@apply bg-neutral-400;
+	}
+	.bg-black-500 {
+		@apply bg-neutral-500;
+	}
+	.bg-white-500 {
+		@apply bg-neutral-500;
+	}
+	.bg-black-400 {
+		@apply bg-neutral-400;
+	}
+	.bg-white-600 {
+		@apply bg-neutral-600;
+	}
+	.bg-black-300 {
+		@apply bg-neutral-300;
+	}
+	.bg-white-700 {
+		@apply bg-neutral-700;
+	}
+	.bg-black-200 {
+		@apply bg-neutral-200;
+	}
+	.bg-white-800 {
+		@apply bg-neutral-800;
+	}
+	.bg-black-100 {
+		@apply bg-neutral-100;
+	}
+	.bg-white-900 {
+		@apply bg-neutral-900;
+	}
+	.bg-black-50 {
+		@apply bg-neutral-50;
+	}
+	.bg-white-950 {
+		@apply bg-neutral-950;
+	}
+
+	/* red */
+
+	.variant-filled-red-50 {
+		@apply bg-red-50 text-black dark:bg-red-950 dark:text-white;
+	}
+	.variant-soft-red-50 {
+		@apply bg-red-50 text-red-500 dark:bg-red-950 dark:text-red-500;
+	}
+	.variant-outline-only-red-50 {
+		@apply ring-[2px] ring-red-50 dark:ring-[2px] dark:ring-red-950;
+	}
+	.variant-outline-soft-red-50 {
+		@apply bg-red-50 text-red-500 ring-[2px] ring-red-200 dark:bg-red-950 dark:text-red-500 dark:ring-[2px] dark:ring-red-800;
+	}
+	.variant-outline-filled-red-50 {
+		@apply bg-red-50 text-black ring-[2px] ring-red-200 dark:bg-red-950 dark:text-white dark:ring-[2px] dark:ring-red-800;
+	}
+	.variant-ringed-red-50 {
+		@apply bg-transparent ring-[1px] ring-red-50 dark:bg-transparent dark:ring-[1px] dark:ring-red-950;
+	}
+	.variant-ghost-red-50 {
+		@apply bg-red-50/20 ring-[2px] ring-red-50 dark:bg-red-950/20 dark:ring-[2px] dark:ring-red-950;
+	}
+	.variant-glass-red-50 {
+		@apply bg-red-50/40 text-red-500 backdrop-blur-lg dark:bg-red-950/40 dark:text-red-500;
+	}
+	.variant-seethrough-red-50 {
+		@apply bg-red-50/40 text-black dark:bg-red-950/40 dark:text-white;
+	}
+
+	.variant-filled-red-100 {
+		@apply bg-red-100 text-black dark:bg-red-900 dark:text-white;
+	}
+	.variant-soft-red-100 {
+		@apply bg-red-100 text-red-600 dark:bg-red-900 dark:text-red-400;
+	}
+	.variant-outline-only-red-100 {
+		@apply ring-[2px] ring-red-100 dark:ring-[2px] dark:ring-red-900;
+	}
+	.variant-outline-soft-red-100 {
+		@apply bg-red-100 text-red-600 ring-[2px] ring-red-300 dark:bg-red-900 dark:text-red-400 dark:ring-[2px] dark:ring-red-700;
+	}
+	.variant-outline-filled-red-100 {
+		@apply bg-red-100 text-black ring-[2px] ring-red-300 dark:bg-red-900 dark:text-white dark:ring-[2px] dark:ring-red-700;
+	}
+	.variant-ringed-red-100 {
+		@apply bg-transparent ring-[1px] ring-red-100 dark:bg-transparent dark:ring-[1px] dark:ring-red-900;
+	}
+	.variant-ghost-red-100 {
+		@apply bg-red-100/20 ring-[2px] ring-red-100 dark:bg-red-900/20 dark:ring-[2px] dark:ring-red-900;
+	}
+	.variant-glass-red-100 {
+		@apply bg-red-100/40 text-red-600 backdrop-blur-lg dark:bg-red-900/40 dark:text-red-400;
+	}
+	.variant-seethrough-red-100 {
+		@apply bg-red-100/40 text-black dark:bg-red-900/40 dark:text-white;
+	}
+
+	.variant-filled-red-200 {
+		@apply bg-red-200 text-black dark:bg-red-800 dark:text-white;
+	}
+	.variant-soft-red-200 {
+		@apply bg-red-200 text-red-700 dark:bg-red-800 dark:text-red-300;
+	}
+	.variant-outline-only-red-200 {
+		@apply ring-[2px] ring-red-200 dark:ring-[2px] dark:ring-red-800;
+	}
+	.variant-outline-soft-red-200 {
+		@apply bg-red-200 text-red-700 ring-[2px] ring-red-400 dark:bg-red-800 dark:text-red-300 dark:ring-[2px] dark:ring-red-600;
+	}
+	.variant-outline-filled-red-200 {
+		@apply bg-red-200 text-black ring-[2px] ring-red-400 dark:bg-red-800 dark:text-white dark:ring-[2px] dark:ring-red-600;
+	}
+	.variant-ringed-red-200 {
+		@apply bg-transparent ring-[1px] ring-red-200 dark:bg-transparent dark:ring-[1px] dark:ring-red-800;
+	}
+	.variant-ghost-red-200 {
+		@apply bg-red-200/20 ring-[2px] ring-red-200 dark:bg-red-800/20 dark:ring-[2px] dark:ring-red-800;
+	}
+	.variant-glass-red-200 {
+		@apply bg-red-200/40 text-red-700 backdrop-blur-lg dark:bg-red-800/40 dark:text-red-300;
+	}
+	.variant-seethrough-red-200 {
+		@apply bg-red-200/40 text-black dark:bg-red-800/40 dark:text-white;
+	}
+
+	.variant-filled-red-300 {
+		@apply bg-red-300 text-black dark:bg-red-700 dark:text-white;
+	}
+	.variant-soft-red-300 {
+		@apply bg-red-300 text-red-800 dark:bg-red-700 dark:text-red-200;
+	}
+	.variant-outline-only-red-300 {
+		@apply ring-[2px] ring-red-300 dark:ring-[2px] dark:ring-red-700;
+	}
+	.variant-outline-soft-red-300 {
+		@apply bg-red-300 text-red-800 ring-[2px] ring-red-500 dark:bg-red-700 dark:text-red-200 dark:ring-[2px] dark:ring-red-500;
+	}
+	.variant-outline-filled-red-300 {
+		@apply bg-red-300 text-black ring-[2px] ring-red-500 dark:bg-red-700 dark:text-white dark:ring-[2px] dark:ring-red-500;
+	}
+	.variant-ringed-red-300 {
+		@apply bg-transparent ring-[1px] ring-red-300 dark:bg-transparent dark:ring-[1px] dark:ring-red-700;
+	}
+	.variant-ghost-red-300 {
+		@apply bg-red-300/20 ring-[2px] ring-red-300 dark:bg-red-700/20 dark:ring-[2px] dark:ring-red-700;
+	}
+	.variant-glass-red-300 {
+		@apply bg-red-300/40 text-red-800 backdrop-blur-lg dark:bg-red-700/40 dark:text-red-200;
+	}
+	.variant-seethrough-red-300 {
+		@apply bg-red-300/40 text-black dark:bg-red-700/40 dark:text-white;
+	}
+
+	.variant-filled-red-400 {
+		@apply bg-red-400 text-black dark:bg-red-600 dark:text-white;
+	}
+	.variant-soft-red-400 {
+		@apply bg-red-400 text-red-900 dark:bg-red-600 dark:text-red-100;
+	}
+	.variant-outline-only-red-400 {
+		@apply ring-[2px] ring-red-400 dark:ring-[2px] dark:ring-red-600;
+	}
+	.variant-outline-soft-red-400 {
+		@apply bg-red-400 text-red-900 ring-[2px] ring-red-600 dark:bg-red-600 dark:text-red-100 dark:ring-[2px] dark:ring-red-400;
+	}
+	.variant-outline-filled-red-400 {
+		@apply bg-red-400 text-black ring-[2px] ring-red-600 dark:bg-red-600 dark:text-white dark:ring-[2px] dark:ring-red-400;
+	}
+	.variant-ringed-red-400 {
+		@apply bg-transparent ring-[1px] ring-red-400 dark:bg-transparent dark:ring-[1px] dark:ring-red-600;
+	}
+	.variant-ghost-red-400 {
+		@apply bg-red-400/20 ring-[2px] ring-red-400 dark:bg-red-600/20 dark:ring-[2px] dark:ring-red-600;
+	}
+	.variant-glass-red-400 {
+		@apply bg-red-400/40 text-red-900 backdrop-blur-lg dark:bg-red-600/40 dark:text-red-100;
+	}
+	.variant-seethrough-red-400 {
+		@apply bg-red-400/40 text-black dark:bg-red-600/40 dark:text-white;
+	}
+
+	.variant-filled-red-500 {
+		@apply bg-red-500 text-white dark:bg-red-500 dark:text-white;
+	}
+	.variant-soft-red-500 {
+		@apply bg-red-500 text-red-50 dark:bg-red-500 dark:text-red-50;
+	}
+	.variant-outline-only-red-500 {
+		@apply ring-[2px] ring-red-500 dark:ring-[2px] dark:ring-red-500;
+	}
+	.variant-outline-soft-red-500 {
+		@apply bg-red-500 text-red-50 ring-[2px] ring-red-300 dark:bg-red-500 dark:text-red-50 dark:ring-[2px] dark:ring-red-300;
+	}
+	.variant-outline-filled-red-500 {
+		@apply bg-red-500 text-white ring-[2px] ring-red-300 dark:bg-red-500 dark:text-white dark:ring-[2px] dark:ring-red-300;
+	}
+	.variant-ringed-red-500 {
+		@apply bg-transparent ring-[1px] ring-red-500 dark:bg-transparent dark:ring-[1px] dark:ring-red-500;
+	}
+	.variant-ghost-red-500 {
+		@apply bg-red-500/20 ring-[2px] ring-red-500 dark:bg-red-500/20 dark:ring-[2px] dark:ring-red-500;
+	}
+	.variant-glass-red-500 {
+		@apply bg-red-500/40 text-red-50 backdrop-blur-lg dark:bg-red-500/40 dark:text-red-50;
+	}
+	.variant-seethrough-red-500 {
+		@apply bg-red-500/40 text-white dark:bg-red-500/40 dark:text-white;
+	}
+
+	.variant-filled-red-600 {
+		@apply bg-red-600 text-white dark:bg-red-400 dark:text-black;
+	}
+	.variant-soft-red-600 {
+		@apply bg-red-600 text-red-100 dark:bg-red-400 dark:text-red-900;
+	}
+	.variant-outline-only-red-600 {
+		@apply ring-[2px] ring-red-600 dark:ring-[2px] dark:ring-red-400;
+	}
+	.variant-outline-soft-red-600 {
+		@apply bg-red-600 text-red-100 ring-[2px] ring-red-400 dark:bg-red-400 dark:text-red-900 dark:ring-[2px] dark:ring-red-600;
+	}
+	.variant-outline-filled-red-600 {
+		@apply bg-red-600 text-white ring-[2px] ring-red-400 dark:bg-red-400 dark:text-black dark:ring-[2px] dark:ring-red-600;
+	}
+	.variant-ringed-red-600 {
+		@apply bg-transparent ring-[1px] ring-red-600 dark:bg-transparent dark:ring-[1px] dark:ring-red-400;
+	}
+	.variant-ghost-red-600 {
+		@apply bg-red-600/20 ring-[2px] ring-red-600 dark:bg-red-400/20 dark:ring-[2px] dark:ring-red-400;
+	}
+	.variant-glass-red-600 {
+		@apply bg-red-600/40 text-red-100 backdrop-blur-lg dark:bg-red-400/40 dark:text-red-900;
+	}
+	.variant-seethrough-red-600 {
+		@apply bg-red-600/40 text-white dark:bg-red-400/40 dark:text-black;
+	}
+
+	.variant-filled-red-700 {
+		@apply bg-red-700 text-white dark:bg-red-300 dark:text-black;
+	}
+	.variant-soft-red-700 {
+		@apply bg-red-700 text-red-200 dark:bg-red-300 dark:text-red-800;
+	}
+	.variant-outline-only-red-700 {
+		@apply ring-[2px] ring-red-700 dark:ring-[2px] dark:ring-red-300;
+	}
+	.variant-outline-soft-red-700 {
+		@apply bg-red-700 text-red-200 ring-[2px] ring-red-500 dark:bg-red-300 dark:text-red-800 dark:ring-[2px] dark:ring-red-500;
+	}
+	.variant-outline-filled-red-700 {
+		@apply bg-red-700 text-white ring-[2px] ring-red-500 dark:bg-red-300 dark:text-black dark:ring-[2px] dark:ring-red-500;
+	}
+	.variant-ringed-red-700 {
+		@apply bg-transparent ring-[1px] ring-red-700 dark:bg-transparent dark:ring-[1px] dark:ring-red-300;
+	}
+	.variant-ghost-red-700 {
+		@apply bg-red-700/20 ring-[2px] ring-red-700 dark:bg-red-300/20 dark:ring-[2px] dark:ring-red-300;
+	}
+	.variant-glass-red-700 {
+		@apply bg-red-700/40 text-red-200 backdrop-blur-lg dark:bg-red-300/40 dark:text-red-800;
+	}
+	.variant-seethrough-red-700 {
+		@apply bg-red-700/40 text-white dark:bg-red-300/40 dark:text-black;
+	}
+
+	.variant-filled-red-800 {
+		@apply bg-red-800 text-white dark:bg-red-200 dark:text-black;
+	}
+	.variant-soft-red-800 {
+		@apply bg-red-800 text-red-300 dark:bg-red-200 dark:text-red-700;
+	}
+	.variant-outline-only-red-800 {
+		@apply ring-[2px] ring-red-800 dark:ring-[2px] dark:ring-red-200;
+	}
+	.variant-outline-soft-red-800 {
+		@apply bg-red-800 text-red-300 ring-[2px] ring-red-600 dark:bg-red-200 dark:text-red-700 dark:ring-[2px] dark:ring-red-400;
+	}
+	.variant-outline-filled-red-800 {
+		@apply bg-red-800 text-white ring-[2px] ring-red-600 dark:bg-red-200 dark:text-black dark:ring-[2px] dark:ring-red-400;
+	}
+	.variant-ringed-red-800 {
+		@apply bg-transparent ring-[1px] ring-red-800 dark:bg-transparent dark:ring-[1px] dark:ring-red-200;
+	}
+	.variant-ghost-red-800 {
+		@apply bg-red-800/20 ring-[2px] ring-red-800 dark:bg-red-200/20 dark:ring-[2px] dark:ring-red-200;
+	}
+	.variant-glass-red-800 {
+		@apply bg-red-800/40 text-red-300 backdrop-blur-lg dark:bg-red-200/40 dark:text-red-700;
+	}
+	.variant-seethrough-red-800 {
+		@apply bg-red-800/40 text-white dark:bg-red-200/40 dark:text-black;
+	}
+
+	.variant-filled-red-900 {
+		@apply bg-red-900 text-white dark:bg-red-100 dark:text-black;
+	}
+	.variant-soft-red-900 {
+		@apply bg-red-900 text-red-400 dark:bg-red-100 dark:text-red-600;
+	}
+	.variant-outline-only-red-900 {
+		@apply ring-[2px] ring-red-900 dark:ring-[2px] dark:ring-red-100;
+	}
+	.variant-outline-soft-red-900 {
+		@apply bg-red-900 text-red-400 ring-[2px] ring-red-700 dark:bg-red-100 dark:text-red-600 dark:ring-[2px] dark:ring-red-300;
+	}
+	.variant-outline-filled-red-900 {
+		@apply bg-red-900 text-white ring-[2px] ring-red-700 dark:bg-red-100 dark:text-black dark:ring-[2px] dark:ring-red-300;
+	}
+	.variant-ringed-red-900 {
+		@apply bg-transparent ring-[1px] ring-red-900 dark:bg-transparent dark:ring-[1px] dark:ring-red-100;
+	}
+	.variant-ghost-red-900 {
+		@apply bg-red-900/20 ring-[2px] ring-red-900 dark:bg-red-100/20 dark:ring-[2px] dark:ring-red-100;
+	}
+	.variant-glass-red-900 {
+		@apply bg-red-900/40 text-red-400 backdrop-blur-lg dark:bg-red-100/40 dark:text-red-600;
+	}
+	.variant-seethrough-red-900 {
+		@apply bg-red-900/40 text-white dark:bg-red-100/40 dark:text-black;
+	}
+
+	.variant-filled-red-950 {
+		@apply bg-red-950 text-white dark:bg-red-50 dark:text-black;
+	}
+	.variant-soft-red-950 {
+		@apply bg-red-950 text-red-500 dark:bg-red-50 dark:text-red-500;
+	}
+	.variant-outline-only-red-950 {
+		@apply ring-[2px] ring-red-950 dark:ring-[2px] dark:ring-red-50;
+	}
+	.variant-outline-soft-red-950 {
+		@apply bg-red-950 text-red-500 ring-[2px] ring-red-800 dark:bg-red-50 dark:text-red-500 dark:ring-[2px] dark:ring-red-200;
+	}
+	.variant-outline-filled-red-950 {
+		@apply bg-red-950 text-white ring-[2px] ring-red-800 dark:bg-red-50 dark:text-black dark:ring-[2px] dark:ring-red-200;
+	}
+	.variant-ringed-red-950 {
+		@apply bg-transparent ring-[1px] ring-red-950 dark:bg-transparent dark:ring-[1px] dark:ring-red-50;
+	}
+	.variant-ghost-red-950 {
+		@apply bg-red-950/20 ring-[2px] ring-red-950 dark:bg-red-50/20 dark:ring-[2px] dark:ring-red-50;
+	}
+	.variant-glass-red-950 {
+		@apply bg-red-950/40 text-red-500 backdrop-blur-lg dark:bg-red-50/40 dark:text-red-500;
+	}
+	.variant-seethrough-red-950 {
+		@apply bg-red-950/40 text-white dark:bg-red-50/40 dark:text-black;
+	}
+
+	/* green */
+
+	.variant-filled-green-50 {
+		@apply bg-green-50 text-black dark:bg-green-950 dark:text-white;
+	}
+	.variant-soft-green-50 {
+		@apply bg-green-50 text-green-500 dark:bg-green-950 dark:text-green-500;
+	}
+	.variant-outline-only-green-50 {
+		@apply ring-[2px] ring-green-50 dark:ring-[2px] dark:ring-green-950;
+	}
+	.variant-outline-soft-green-50 {
+		@apply bg-green-50 text-green-500 ring-[2px] ring-green-200 dark:bg-green-950 dark:text-green-500 dark:ring-[2px] dark:ring-green-800;
+	}
+	.variant-outline-filled-green-50 {
+		@apply bg-green-50 text-black ring-[2px] ring-green-200 dark:bg-green-950 dark:text-white dark:ring-[2px] dark:ring-green-800;
+	}
+	.variant-ringed-green-50 {
+		@apply bg-transparent ring-[1px] ring-green-50 dark:bg-transparent dark:ring-[1px] dark:ring-green-950;
+	}
+	.variant-ghost-green-50 {
+		@apply bg-green-50/20 ring-[2px] ring-green-50 dark:bg-green-950/20 dark:ring-[2px] dark:ring-green-950;
+	}
+	.variant-glass-green-50 {
+		@apply bg-green-50/40 text-green-500 backdrop-blur-lg dark:bg-green-950/40 dark:text-green-500;
+	}
+	.variant-seethrough-green-50 {
+		@apply bg-green-50/40 text-black dark:bg-green-950/40 dark:text-white;
+	}
+
+	.variant-filled-green-100 {
+		@apply bg-green-100 text-black dark:bg-green-900 dark:text-white;
+	}
+	.variant-soft-green-100 {
+		@apply bg-green-100 text-green-600 dark:bg-green-900 dark:text-green-400;
+	}
+	.variant-outline-only-green-100 {
+		@apply ring-[2px] ring-green-100 dark:ring-[2px] dark:ring-green-900;
+	}
+	.variant-outline-soft-green-100 {
+		@apply bg-green-100 text-green-600 ring-[2px] ring-green-300 dark:bg-green-900 dark:text-green-400 dark:ring-[2px] dark:ring-green-700;
+	}
+	.variant-outline-filled-green-100 {
+		@apply bg-green-100 text-black ring-[2px] ring-green-300 dark:bg-green-900 dark:text-white dark:ring-[2px] dark:ring-green-700;
+	}
+	.variant-ringed-green-100 {
+		@apply bg-transparent ring-[1px] ring-green-100 dark:bg-transparent dark:ring-[1px] dark:ring-green-900;
+	}
+	.variant-ghost-green-100 {
+		@apply bg-green-100/20 ring-[2px] ring-green-100 dark:bg-green-900/20 dark:ring-[2px] dark:ring-green-900;
+	}
+	.variant-glass-green-100 {
+		@apply bg-green-100/40 text-green-600 backdrop-blur-lg dark:bg-green-900/40 dark:text-green-400;
+	}
+	.variant-seethrough-green-100 {
+		@apply bg-green-100/40 text-black dark:bg-green-900/40 dark:text-white;
+	}
+
+	.variant-filled-green-200 {
+		@apply bg-green-200 text-black dark:bg-green-800 dark:text-white;
+	}
+	.variant-soft-green-200 {
+		@apply bg-green-200 text-green-700 dark:bg-green-800 dark:text-green-300;
+	}
+	.variant-outline-only-green-200 {
+		@apply ring-[2px] ring-green-200 dark:ring-[2px] dark:ring-green-800;
+	}
+	.variant-outline-soft-green-200 {
+		@apply bg-green-200 text-green-700 ring-[2px] ring-green-400 dark:bg-green-800 dark:text-green-300 dark:ring-[2px] dark:ring-green-600;
+	}
+	.variant-outline-filled-green-200 {
+		@apply bg-green-200 text-black ring-[2px] ring-green-400 dark:bg-green-800 dark:text-white dark:ring-[2px] dark:ring-green-600;
+	}
+	.variant-ringed-green-200 {
+		@apply bg-transparent ring-[1px] ring-green-200 dark:bg-transparent dark:ring-[1px] dark:ring-green-800;
+	}
+	.variant-ghost-green-200 {
+		@apply bg-green-200/20 ring-[2px] ring-green-200 dark:bg-green-800/20 dark:ring-[2px] dark:ring-green-800;
+	}
+	.variant-glass-green-200 {
+		@apply bg-green-200/40 text-green-700 backdrop-blur-lg dark:bg-green-800/40 dark:text-green-300;
+	}
+	.variant-seethrough-green-200 {
+		@apply bg-green-200/40 text-black dark:bg-green-800/40 dark:text-white;
+	}
+
+	.variant-filled-green-300 {
+		@apply bg-green-300 text-black dark:bg-green-700 dark:text-white;
+	}
+	.variant-soft-green-300 {
+		@apply bg-green-300 text-green-800 dark:bg-green-700 dark:text-green-200;
+	}
+	.variant-outline-only-green-300 {
+		@apply ring-[2px] ring-green-300 dark:ring-[2px] dark:ring-green-700;
+	}
+	.variant-outline-soft-green-300 {
+		@apply bg-green-300 text-green-800 ring-[2px] ring-green-500 dark:bg-green-700 dark:text-green-200 dark:ring-[2px] dark:ring-green-500;
+	}
+	.variant-outline-filled-green-300 {
+		@apply bg-green-300 text-black ring-[2px] ring-green-500 dark:bg-green-700 dark:text-white dark:ring-[2px] dark:ring-green-500;
+	}
+	.variant-ringed-green-300 {
+		@apply bg-transparent ring-[1px] ring-green-300 dark:bg-transparent dark:ring-[1px] dark:ring-green-700;
+	}
+	.variant-ghost-green-300 {
+		@apply bg-green-300/20 ring-[2px] ring-green-300 dark:bg-green-700/20 dark:ring-[2px] dark:ring-green-700;
+	}
+	.variant-glass-green-300 {
+		@apply bg-green-300/40 text-green-800 backdrop-blur-lg dark:bg-green-700/40 dark:text-green-200;
+	}
+	.variant-seethrough-green-300 {
+		@apply bg-green-300/40 text-black dark:bg-green-700/40 dark:text-white;
+	}
+
+	.variant-filled-green-400 {
+		@apply bg-green-400 text-black dark:bg-green-600 dark:text-white;
+	}
+	.variant-soft-green-400 {
+		@apply bg-green-400 text-green-900 dark:bg-green-600 dark:text-green-100;
+	}
+	.variant-outline-only-green-400 {
+		@apply ring-[2px] ring-green-400 dark:ring-[2px] dark:ring-green-600;
+	}
+	.variant-outline-soft-green-400 {
+		@apply bg-green-400 text-green-900 ring-[2px] ring-green-600 dark:bg-green-600 dark:text-green-100 dark:ring-[2px] dark:ring-green-400;
+	}
+	.variant-outline-filled-green-400 {
+		@apply bg-green-400 text-black ring-[2px] ring-green-600 dark:bg-green-600 dark:text-white dark:ring-[2px] dark:ring-green-400;
+	}
+	.variant-ringed-green-400 {
+		@apply bg-transparent ring-[1px] ring-green-400 dark:bg-transparent dark:ring-[1px] dark:ring-green-600;
+	}
+	.variant-ghost-green-400 {
+		@apply bg-green-400/20 ring-[2px] ring-green-400 dark:bg-green-600/20 dark:ring-[2px] dark:ring-green-600;
+	}
+	.variant-glass-green-400 {
+		@apply bg-green-400/40 text-green-900 backdrop-blur-lg dark:bg-green-600/40 dark:text-green-100;
+	}
+	.variant-seethrough-green-400 {
+		@apply bg-green-400/40 text-black dark:bg-green-600/40 dark:text-white;
+	}
+
+	.variant-filled-green-500 {
+		@apply bg-green-500 text-white dark:bg-green-500 dark:text-white;
+	}
+	.variant-soft-green-500 {
+		@apply bg-green-500 text-green-50 dark:bg-green-500 dark:text-green-50;
+	}
+	.variant-outline-only-green-500 {
+		@apply ring-[2px] ring-green-500 dark:ring-[2px] dark:ring-green-500;
+	}
+	.variant-outline-soft-green-500 {
+		@apply bg-green-500 text-green-50 ring-[2px] ring-green-300 dark:bg-green-500 dark:text-green-50 dark:ring-[2px] dark:ring-green-300;
+	}
+	.variant-outline-filled-green-500 {
+		@apply bg-green-500 text-white ring-[2px] ring-green-300 dark:bg-green-500 dark:text-white dark:ring-[2px] dark:ring-green-300;
+	}
+	.variant-ringed-green-500 {
+		@apply bg-transparent ring-[1px] ring-green-500 dark:bg-transparent dark:ring-[1px] dark:ring-green-500;
+	}
+	.variant-ghost-green-500 {
+		@apply bg-green-500/20 ring-[2px] ring-green-500 dark:bg-green-500/20 dark:ring-[2px] dark:ring-green-500;
+	}
+	.variant-glass-green-500 {
+		@apply bg-green-500/40 text-green-50 backdrop-blur-lg dark:bg-green-500/40 dark:text-green-50;
+	}
+	.variant-seethrough-green-500 {
+		@apply bg-green-500/40 text-white dark:bg-green-500/40 dark:text-white;
+	}
+
+	.variant-filled-green-600 {
+		@apply bg-green-600 text-white dark:bg-green-400 dark:text-black;
+	}
+	.variant-soft-green-600 {
+		@apply bg-green-600 text-green-100 dark:bg-green-400 dark:text-green-900;
+	}
+	.variant-outline-only-green-600 {
+		@apply ring-[2px] ring-green-600 dark:ring-[2px] dark:ring-green-400;
+	}
+	.variant-outline-soft-green-600 {
+		@apply bg-green-600 text-green-100 ring-[2px] ring-green-400 dark:bg-green-400 dark:text-green-900 dark:ring-[2px] dark:ring-green-600;
+	}
+	.variant-outline-filled-green-600 {
+		@apply bg-green-600 text-white ring-[2px] ring-green-400 dark:bg-green-400 dark:text-black dark:ring-[2px] dark:ring-green-600;
+	}
+	.variant-ringed-green-600 {
+		@apply bg-transparent ring-[1px] ring-green-600 dark:bg-transparent dark:ring-[1px] dark:ring-green-400;
+	}
+	.variant-ghost-green-600 {
+		@apply bg-green-600/20 ring-[2px] ring-green-600 dark:bg-green-400/20 dark:ring-[2px] dark:ring-green-400;
+	}
+	.variant-glass-green-600 {
+		@apply bg-green-600/40 text-green-100 backdrop-blur-lg dark:bg-green-400/40 dark:text-green-900;
+	}
+	.variant-seethrough-green-600 {
+		@apply bg-green-600/40 text-white dark:bg-green-400/40 dark:text-black;
+	}
+
+	.variant-filled-green-700 {
+		@apply bg-green-700 text-white dark:bg-green-300 dark:text-black;
+	}
+	.variant-soft-green-700 {
+		@apply bg-green-700 text-green-200 dark:bg-green-300 dark:text-green-800;
+	}
+	.variant-outline-only-green-700 {
+		@apply ring-[2px] ring-green-700 dark:ring-[2px] dark:ring-green-300;
+	}
+	.variant-outline-soft-green-700 {
+		@apply bg-green-700 text-green-200 ring-[2px] ring-green-500 dark:bg-green-300 dark:text-green-800 dark:ring-[2px] dark:ring-green-500;
+	}
+	.variant-outline-filled-green-700 {
+		@apply bg-green-700 text-white ring-[2px] ring-green-500 dark:bg-green-300 dark:text-black dark:ring-[2px] dark:ring-green-500;
+	}
+	.variant-ringed-green-700 {
+		@apply bg-transparent ring-[1px] ring-green-700 dark:bg-transparent dark:ring-[1px] dark:ring-green-300;
+	}
+	.variant-ghost-green-700 {
+		@apply bg-green-700/20 ring-[2px] ring-green-700 dark:bg-green-300/20 dark:ring-[2px] dark:ring-green-300;
+	}
+	.variant-glass-green-700 {
+		@apply bg-green-700/40 text-green-200 backdrop-blur-lg dark:bg-green-300/40 dark:text-green-800;
+	}
+	.variant-seethrough-green-700 {
+		@apply bg-green-700/40 text-white dark:bg-green-300/40 dark:text-black;
+	}
+
+	.variant-filled-green-800 {
+		@apply bg-green-800 text-white dark:bg-green-200 dark:text-black;
+	}
+	.variant-soft-green-800 {
+		@apply bg-green-800 text-green-300 dark:bg-green-200 dark:text-green-700;
+	}
+	.variant-outline-only-green-800 {
+		@apply ring-[2px] ring-green-800 dark:ring-[2px] dark:ring-green-200;
+	}
+	.variant-outline-soft-green-800 {
+		@apply bg-green-800 text-green-300 ring-[2px] ring-green-600 dark:bg-green-200 dark:text-green-700 dark:ring-[2px] dark:ring-green-400;
+	}
+	.variant-outline-filled-green-800 {
+		@apply bg-green-800 text-white ring-[2px] ring-green-600 dark:bg-green-200 dark:text-black dark:ring-[2px] dark:ring-green-400;
+	}
+	.variant-ringed-green-800 {
+		@apply bg-transparent ring-[1px] ring-green-800 dark:bg-transparent dark:ring-[1px] dark:ring-green-200;
+	}
+	.variant-ghost-green-800 {
+		@apply bg-green-800/20 ring-[2px] ring-green-800 dark:bg-green-200/20 dark:ring-[2px] dark:ring-green-200;
+	}
+	.variant-glass-green-800 {
+		@apply bg-green-800/40 text-green-300 backdrop-blur-lg dark:bg-green-200/40 dark:text-green-700;
+	}
+	.variant-seethrough-green-800 {
+		@apply bg-green-800/40 text-white dark:bg-green-200/40 dark:text-black;
+	}
+
+	.variant-filled-green-900 {
+		@apply bg-green-900 text-white dark:bg-green-100 dark:text-black;
+	}
+	.variant-soft-green-900 {
+		@apply bg-green-900 text-green-400 dark:bg-green-100 dark:text-green-600;
+	}
+	.variant-outline-only-green-900 {
+		@apply ring-[2px] ring-green-900 dark:ring-[2px] dark:ring-green-100;
+	}
+	.variant-outline-soft-green-900 {
+		@apply bg-green-900 text-green-400 ring-[2px] ring-green-700 dark:bg-green-100 dark:text-green-600 dark:ring-[2px] dark:ring-green-300;
+	}
+	.variant-outline-filled-green-900 {
+		@apply bg-green-900 text-white ring-[2px] ring-green-700 dark:bg-green-100 dark:text-black dark:ring-[2px] dark:ring-green-300;
+	}
+	.variant-ringed-green-900 {
+		@apply bg-transparent ring-[1px] ring-green-900 dark:bg-transparent dark:ring-[1px] dark:ring-green-100;
+	}
+	.variant-ghost-green-900 {
+		@apply bg-green-900/20 ring-[2px] ring-green-900 dark:bg-green-100/20 dark:ring-[2px] dark:ring-green-100;
+	}
+	.variant-glass-green-900 {
+		@apply bg-green-900/40 text-green-400 backdrop-blur-lg dark:bg-green-100/40 dark:text-green-600;
+	}
+	.variant-seethrough-green-900 {
+		@apply bg-green-900/40 text-white dark:bg-green-100/40 dark:text-black;
+	}
+
+	.variant-filled-green-950 {
+		@apply bg-green-950 text-white dark:bg-green-50 dark:text-black;
+	}
+	.variant-soft-green-950 {
+		@apply bg-green-950 text-green-500 dark:bg-green-50 dark:text-green-500;
+	}
+	.variant-outline-only-green-950 {
+		@apply ring-[2px] ring-green-950 dark:ring-[2px] dark:ring-green-50;
+	}
+	.variant-outline-soft-green-950 {
+		@apply bg-green-950 text-green-500 ring-[2px] ring-green-800 dark:bg-green-50 dark:text-green-500 dark:ring-[2px] dark:ring-green-200;
+	}
+	.variant-outline-filled-green-950 {
+		@apply bg-green-950 text-white ring-[2px] ring-green-800 dark:bg-green-50 dark:text-black dark:ring-[2px] dark:ring-green-200;
+	}
+	.variant-ringed-green-950 {
+		@apply bg-transparent ring-[1px] ring-green-950 dark:bg-transparent dark:ring-[1px] dark:ring-green-50;
+	}
+	.variant-ghost-green-950 {
+		@apply bg-green-950/20 ring-[2px] ring-green-950 dark:bg-green-50/20 dark:ring-[2px] dark:ring-green-50;
+	}
+	.variant-glass-green-950 {
+		@apply bg-green-950/40 text-green-500 backdrop-blur-lg dark:bg-green-50/40 dark:text-green-500;
+	}
+	.variant-seethrough-green-950 {
+		@apply bg-green-950/40 text-white dark:bg-green-50/40 dark:text-black;
+	}
+
+	/* blue */
+
+	.variant-filled-blue-50 {
+		@apply bg-blue-50 text-black dark:bg-blue-950 dark:text-white;
+	}
+	.variant-soft-blue-50 {
+		@apply bg-blue-50 text-blue-500 dark:bg-blue-950 dark:text-blue-500;
+	}
+	.variant-outline-only-blue-50 {
+		@apply ring-[2px] ring-blue-50 dark:ring-[2px] dark:ring-blue-950;
+	}
+	.variant-outline-soft-blue-50 {
+		@apply bg-blue-50 text-blue-500 ring-[2px] ring-blue-200 dark:bg-blue-950 dark:text-blue-500 dark:ring-[2px] dark:ring-blue-800;
+	}
+	.variant-outline-filled-blue-50 {
+		@apply bg-blue-50 text-black ring-[2px] ring-blue-200 dark:bg-blue-950 dark:text-white dark:ring-[2px] dark:ring-blue-800;
+	}
+	.variant-ringed-blue-50 {
+		@apply bg-transparent ring-[1px] ring-blue-50 dark:bg-transparent dark:ring-[1px] dark:ring-blue-950;
+	}
+	.variant-ghost-blue-50 {
+		@apply bg-blue-50/20 ring-[2px] ring-blue-50 dark:bg-blue-950/20 dark:ring-[2px] dark:ring-blue-950;
+	}
+	.variant-glass-blue-50 {
+		@apply bg-blue-50/40 text-blue-500 backdrop-blur-lg dark:bg-blue-950/40 dark:text-blue-500;
+	}
+	.variant-seethrough-blue-50 {
+		@apply bg-blue-50/40 text-black dark:bg-blue-950/40 dark:text-white;
+	}
+
+	.variant-filled-blue-100 {
+		@apply bg-blue-100 text-black dark:bg-blue-900 dark:text-white;
+	}
+	.variant-soft-blue-100 {
+		@apply bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-400;
+	}
+	.variant-outline-only-blue-100 {
+		@apply ring-[2px] ring-blue-100 dark:ring-[2px] dark:ring-blue-900;
+	}
+	.variant-outline-soft-blue-100 {
+		@apply bg-blue-100 text-blue-600 ring-[2px] ring-blue-300 dark:bg-blue-900 dark:text-blue-400 dark:ring-[2px] dark:ring-blue-700;
+	}
+	.variant-outline-filled-blue-100 {
+		@apply bg-blue-100 text-black ring-[2px] ring-blue-300 dark:bg-blue-900 dark:text-white dark:ring-[2px] dark:ring-blue-700;
+	}
+	.variant-ringed-blue-100 {
+		@apply bg-transparent ring-[1px] ring-blue-100 dark:bg-transparent dark:ring-[1px] dark:ring-blue-900;
+	}
+	.variant-ghost-blue-100 {
+		@apply bg-blue-100/20 ring-[2px] ring-blue-100 dark:bg-blue-900/20 dark:ring-[2px] dark:ring-blue-900;
+	}
+	.variant-glass-blue-100 {
+		@apply bg-blue-100/40 text-blue-600 backdrop-blur-lg dark:bg-blue-900/40 dark:text-blue-400;
+	}
+	.variant-seethrough-blue-100 {
+		@apply bg-blue-100/40 text-black dark:bg-blue-900/40 dark:text-white;
+	}
+
+	.variant-filled-blue-200 {
+		@apply bg-blue-200 text-black dark:bg-blue-800 dark:text-white;
+	}
+	.variant-soft-blue-200 {
+		@apply bg-blue-200 text-blue-700 dark:bg-blue-800 dark:text-blue-300;
+	}
+	.variant-outline-only-blue-200 {
+		@apply ring-[2px] ring-blue-200 dark:ring-[2px] dark:ring-blue-800;
+	}
+	.variant-outline-soft-blue-200 {
+		@apply bg-blue-200 text-blue-700 ring-[2px] ring-blue-400 dark:bg-blue-800 dark:text-blue-300 dark:ring-[2px] dark:ring-blue-600;
+	}
+	.variant-outline-filled-blue-200 {
+		@apply bg-blue-200 text-black ring-[2px] ring-blue-400 dark:bg-blue-800 dark:text-white dark:ring-[2px] dark:ring-blue-600;
+	}
+	.variant-ringed-blue-200 {
+		@apply bg-transparent ring-[1px] ring-blue-200 dark:bg-transparent dark:ring-[1px] dark:ring-blue-800;
+	}
+	.variant-ghost-blue-200 {
+		@apply bg-blue-200/20 ring-[2px] ring-blue-200 dark:bg-blue-800/20 dark:ring-[2px] dark:ring-blue-800;
+	}
+	.variant-glass-blue-200 {
+		@apply bg-blue-200/40 text-blue-700 backdrop-blur-lg dark:bg-blue-800/40 dark:text-blue-300;
+	}
+	.variant-seethrough-blue-200 {
+		@apply bg-blue-200/40 text-black dark:bg-blue-800/40 dark:text-white;
+	}
+
+	.variant-filled-blue-300 {
+		@apply bg-blue-300 text-black dark:bg-blue-700 dark:text-white;
+	}
+	.variant-soft-blue-300 {
+		@apply bg-blue-300 text-blue-800 dark:bg-blue-700 dark:text-blue-200;
+	}
+	.variant-outline-only-blue-300 {
+		@apply ring-[2px] ring-blue-300 dark:ring-[2px] dark:ring-blue-700;
+	}
+	.variant-outline-soft-blue-300 {
+		@apply bg-blue-300 text-blue-800 ring-[2px] ring-blue-500 dark:bg-blue-700 dark:text-blue-200 dark:ring-[2px] dark:ring-blue-500;
+	}
+	.variant-outline-filled-blue-300 {
+		@apply bg-blue-300 text-black ring-[2px] ring-blue-500 dark:bg-blue-700 dark:text-white dark:ring-[2px] dark:ring-blue-500;
+	}
+	.variant-ringed-blue-300 {
+		@apply bg-transparent ring-[1px] ring-blue-300 dark:bg-transparent dark:ring-[1px] dark:ring-blue-700;
+	}
+	.variant-ghost-blue-300 {
+		@apply bg-blue-300/20 ring-[2px] ring-blue-300 dark:bg-blue-700/20 dark:ring-[2px] dark:ring-blue-700;
+	}
+	.variant-glass-blue-300 {
+		@apply bg-blue-300/40 text-blue-800 backdrop-blur-lg dark:bg-blue-700/40 dark:text-blue-200;
+	}
+	.variant-seethrough-blue-300 {
+		@apply bg-blue-300/40 text-black dark:bg-blue-700/40 dark:text-white;
+	}
+
+	.variant-filled-blue-400 {
+		@apply bg-blue-400 text-black dark:bg-blue-600 dark:text-white;
+	}
+	.variant-soft-blue-400 {
+		@apply bg-blue-400 text-blue-900 dark:bg-blue-600 dark:text-blue-100;
+	}
+	.variant-outline-only-blue-400 {
+		@apply ring-[2px] ring-blue-400 dark:ring-[2px] dark:ring-blue-600;
+	}
+	.variant-outline-soft-blue-400 {
+		@apply bg-blue-400 text-blue-900 ring-[2px] ring-blue-600 dark:bg-blue-600 dark:text-blue-100 dark:ring-[2px] dark:ring-blue-400;
+	}
+	.variant-outline-filled-blue-400 {
+		@apply bg-blue-400 text-black ring-[2px] ring-blue-600 dark:bg-blue-600 dark:text-white dark:ring-[2px] dark:ring-blue-400;
+	}
+	.variant-ringed-blue-400 {
+		@apply bg-transparent ring-[1px] ring-blue-400 dark:bg-transparent dark:ring-[1px] dark:ring-blue-600;
+	}
+	.variant-ghost-blue-400 {
+		@apply bg-blue-400/20 ring-[2px] ring-blue-400 dark:bg-blue-600/20 dark:ring-[2px] dark:ring-blue-600;
+	}
+	.variant-glass-blue-400 {
+		@apply bg-blue-400/40 text-blue-900 backdrop-blur-lg dark:bg-blue-600/40 dark:text-blue-100;
+	}
+	.variant-seethrough-blue-400 {
+		@apply bg-blue-400/40 text-black dark:bg-blue-600/40 dark:text-white;
+	}
+
+	.variant-filled-blue-500 {
+		@apply bg-blue-500 text-white dark:bg-blue-500 dark:text-white;
+	}
+	.variant-soft-blue-500 {
+		@apply bg-blue-500 text-blue-50 dark:bg-blue-500 dark:text-blue-50;
+	}
+	.variant-outline-only-blue-500 {
+		@apply ring-[2px] ring-blue-500 dark:ring-[2px] dark:ring-blue-500;
+	}
+	.variant-outline-soft-blue-500 {
+		@apply bg-blue-500 text-blue-50 ring-[2px] ring-blue-300 dark:bg-blue-500 dark:text-blue-50 dark:ring-[2px] dark:ring-blue-300;
+	}
+	.variant-outline-filled-blue-500 {
+		@apply bg-blue-500 text-white ring-[2px] ring-blue-300 dark:bg-blue-500 dark:text-white dark:ring-[2px] dark:ring-blue-300;
+	}
+	.variant-ringed-blue-500 {
+		@apply bg-transparent ring-[1px] ring-blue-500 dark:bg-transparent dark:ring-[1px] dark:ring-blue-500;
+	}
+	.variant-ghost-blue-500 {
+		@apply bg-blue-500/20 ring-[2px] ring-blue-500 dark:bg-blue-500/20 dark:ring-[2px] dark:ring-blue-500;
+	}
+	.variant-glass-blue-500 {
+		@apply bg-blue-500/40 text-blue-50 backdrop-blur-lg dark:bg-blue-500/40 dark:text-blue-50;
+	}
+	.variant-seethrough-blue-500 {
+		@apply bg-blue-500/40 text-white dark:bg-blue-500/40 dark:text-white;
+	}
+
+	.variant-filled-blue-600 {
+		@apply bg-blue-600 text-white dark:bg-blue-400 dark:text-black;
+	}
+	.variant-soft-blue-600 {
+		@apply bg-blue-600 text-blue-100 dark:bg-blue-400 dark:text-blue-900;
+	}
+	.variant-outline-only-blue-600 {
+		@apply ring-[2px] ring-blue-600 dark:ring-[2px] dark:ring-blue-400;
+	}
+	.variant-outline-soft-blue-600 {
+		@apply bg-blue-600 text-blue-100 ring-[2px] ring-blue-400 dark:bg-blue-400 dark:text-blue-900 dark:ring-[2px] dark:ring-blue-600;
+	}
+	.variant-outline-filled-blue-600 {
+		@apply bg-blue-600 text-white ring-[2px] ring-blue-400 dark:bg-blue-400 dark:text-black dark:ring-[2px] dark:ring-blue-600;
+	}
+	.variant-ringed-blue-600 {
+		@apply bg-transparent ring-[1px] ring-blue-600 dark:bg-transparent dark:ring-[1px] dark:ring-blue-400;
+	}
+	.variant-ghost-blue-600 {
+		@apply bg-blue-600/20 ring-[2px] ring-blue-600 dark:bg-blue-400/20 dark:ring-[2px] dark:ring-blue-400;
+	}
+	.variant-glass-blue-600 {
+		@apply bg-blue-600/40 text-blue-100 backdrop-blur-lg dark:bg-blue-400/40 dark:text-blue-900;
+	}
+	.variant-seethrough-blue-600 {
+		@apply bg-blue-600/40 text-white dark:bg-blue-400/40 dark:text-black;
+	}
+
+	.variant-filled-blue-700 {
+		@apply bg-blue-700 text-white dark:bg-blue-300 dark:text-black;
+	}
+	.variant-soft-blue-700 {
+		@apply bg-blue-700 text-blue-200 dark:bg-blue-300 dark:text-blue-800;
+	}
+	.variant-outline-only-blue-700 {
+		@apply ring-[2px] ring-blue-700 dark:ring-[2px] dark:ring-blue-300;
+	}
+	.variant-outline-soft-blue-700 {
+		@apply bg-blue-700 text-blue-200 ring-[2px] ring-blue-500 dark:bg-blue-300 dark:text-blue-800 dark:ring-[2px] dark:ring-blue-500;
+	}
+	.variant-outline-filled-blue-700 {
+		@apply bg-blue-700 text-white ring-[2px] ring-blue-500 dark:bg-blue-300 dark:text-black dark:ring-[2px] dark:ring-blue-500;
+	}
+	.variant-ringed-blue-700 {
+		@apply bg-transparent ring-[1px] ring-blue-700 dark:bg-transparent dark:ring-[1px] dark:ring-blue-300;
+	}
+	.variant-ghost-blue-700 {
+		@apply bg-blue-700/20 ring-[2px] ring-blue-700 dark:bg-blue-300/20 dark:ring-[2px] dark:ring-blue-300;
+	}
+	.variant-glass-blue-700 {
+		@apply bg-blue-700/40 text-blue-200 backdrop-blur-lg dark:bg-blue-300/40 dark:text-blue-800;
+	}
+	.variant-seethrough-blue-700 {
+		@apply bg-blue-700/40 text-white dark:bg-blue-300/40 dark:text-black;
+	}
+
+	.variant-filled-blue-800 {
+		@apply bg-blue-800 text-white dark:bg-blue-200 dark:text-black;
+	}
+	.variant-soft-blue-800 {
+		@apply bg-blue-800 text-blue-300 dark:bg-blue-200 dark:text-blue-700;
+	}
+	.variant-outline-only-blue-800 {
+		@apply ring-[2px] ring-blue-800 dark:ring-[2px] dark:ring-blue-200;
+	}
+	.variant-outline-soft-blue-800 {
+		@apply bg-blue-800 text-blue-300 ring-[2px] ring-blue-600 dark:bg-blue-200 dark:text-blue-700 dark:ring-[2px] dark:ring-blue-400;
+	}
+	.variant-outline-filled-blue-800 {
+		@apply bg-blue-800 text-white ring-[2px] ring-blue-600 dark:bg-blue-200 dark:text-black dark:ring-[2px] dark:ring-blue-400;
+	}
+	.variant-ringed-blue-800 {
+		@apply bg-transparent ring-[1px] ring-blue-800 dark:bg-transparent dark:ring-[1px] dark:ring-blue-200;
+	}
+	.variant-ghost-blue-800 {
+		@apply bg-blue-800/20 ring-[2px] ring-blue-800 dark:bg-blue-200/20 dark:ring-[2px] dark:ring-blue-200;
+	}
+	.variant-glass-blue-800 {
+		@apply bg-blue-800/40 text-blue-300 backdrop-blur-lg dark:bg-blue-200/40 dark:text-blue-700;
+	}
+	.variant-seethrough-blue-800 {
+		@apply bg-blue-800/40 text-white dark:bg-blue-200/40 dark:text-black;
+	}
+
+	.variant-filled-blue-900 {
+		@apply bg-blue-900 text-white dark:bg-blue-100 dark:text-black;
+	}
+	.variant-soft-blue-900 {
+		@apply bg-blue-900 text-blue-400 dark:bg-blue-100 dark:text-blue-600;
+	}
+	.variant-outline-only-blue-900 {
+		@apply ring-[2px] ring-blue-900 dark:ring-[2px] dark:ring-blue-100;
+	}
+	.variant-outline-soft-blue-900 {
+		@apply bg-blue-900 text-blue-400 ring-[2px] ring-blue-700 dark:bg-blue-100 dark:text-blue-600 dark:ring-[2px] dark:ring-blue-300;
+	}
+	.variant-outline-filled-blue-900 {
+		@apply bg-blue-900 text-white ring-[2px] ring-blue-700 dark:bg-blue-100 dark:text-black dark:ring-[2px] dark:ring-blue-300;
+	}
+	.variant-ringed-blue-900 {
+		@apply bg-transparent ring-[1px] ring-blue-900 dark:bg-transparent dark:ring-[1px] dark:ring-blue-100;
+	}
+	.variant-ghost-blue-900 {
+		@apply bg-blue-900/20 ring-[2px] ring-blue-900 dark:bg-blue-100/20 dark:ring-[2px] dark:ring-blue-100;
+	}
+	.variant-glass-blue-900 {
+		@apply bg-blue-900/40 text-blue-400 backdrop-blur-lg dark:bg-blue-100/40 dark:text-blue-600;
+	}
+	.variant-seethrough-blue-900 {
+		@apply bg-blue-900/40 text-white dark:bg-blue-100/40 dark:text-black;
+	}
+
+	.variant-filled-blue-950 {
+		@apply bg-blue-950 text-white dark:bg-blue-50 dark:text-black;
+	}
+	.variant-soft-blue-950 {
+		@apply bg-blue-950 text-blue-500 dark:bg-blue-50 dark:text-blue-500;
+	}
+	.variant-outline-only-blue-950 {
+		@apply ring-[2px] ring-blue-950 dark:ring-[2px] dark:ring-blue-50;
+	}
+	.variant-outline-soft-blue-950 {
+		@apply bg-blue-950 text-blue-500 ring-[2px] ring-blue-800 dark:bg-blue-50 dark:text-blue-500 dark:ring-[2px] dark:ring-blue-200;
+	}
+	.variant-outline-filled-blue-950 {
+		@apply bg-blue-950 text-white ring-[2px] ring-blue-800 dark:bg-blue-50 dark:text-black dark:ring-[2px] dark:ring-blue-200;
+	}
+	.variant-ringed-blue-950 {
+		@apply bg-transparent ring-[1px] ring-blue-950 dark:bg-transparent dark:ring-[1px] dark:ring-blue-50;
+	}
+	.variant-ghost-blue-950 {
+		@apply bg-blue-950/20 ring-[2px] ring-blue-950 dark:bg-blue-50/20 dark:ring-[2px] dark:ring-blue-50;
+	}
+	.variant-glass-blue-950 {
+		@apply bg-blue-950/40 text-blue-500 backdrop-blur-lg dark:bg-blue-50/40 dark:text-blue-500;
+	}
+	.variant-seethrough-blue-950 {
+		@apply bg-blue-950/40 text-white dark:bg-blue-50/40 dark:text-black;
+	}
+
+	/* cyan */
+
+	.variant-filled-cyan-50 {
+		@apply bg-cyan-50 text-black dark:bg-cyan-950 dark:text-white;
+	}
+	.variant-soft-cyan-50 {
+		@apply bg-cyan-50 text-cyan-500 dark:bg-cyan-950 dark:text-cyan-500;
+	}
+	.variant-outline-only-cyan-50 {
+		@apply ring-[2px] ring-cyan-50 dark:ring-[2px] dark:ring-cyan-950;
+	}
+	.variant-outline-soft-cyan-50 {
+		@apply bg-cyan-50 text-cyan-500 ring-[2px] ring-cyan-200 dark:bg-cyan-950 dark:text-cyan-500 dark:ring-[2px] dark:ring-cyan-800;
+	}
+	.variant-outline-filled-cyan-50 {
+		@apply bg-cyan-50 text-black ring-[2px] ring-cyan-200 dark:bg-cyan-950 dark:text-white dark:ring-[2px] dark:ring-cyan-800;
+	}
+	.variant-ringed-cyan-50 {
+		@apply bg-transparent ring-[1px] ring-cyan-50 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-950;
+	}
+	.variant-ghost-cyan-50 {
+		@apply bg-cyan-50/20 ring-[2px] ring-cyan-50 dark:bg-cyan-950/20 dark:ring-[2px] dark:ring-cyan-950;
+	}
+	.variant-glass-cyan-50 {
+		@apply bg-cyan-50/40 text-cyan-500 backdrop-blur-lg dark:bg-cyan-950/40 dark:text-cyan-500;
+	}
+	.variant-seethrough-cyan-50 {
+		@apply bg-cyan-50/40 text-black dark:bg-cyan-950/40 dark:text-white;
+	}
+
+	.variant-filled-cyan-100 {
+		@apply bg-cyan-100 text-black dark:bg-cyan-900 dark:text-white;
+	}
+	.variant-soft-cyan-100 {
+		@apply bg-cyan-100 text-cyan-600 dark:bg-cyan-900 dark:text-cyan-400;
+	}
+	.variant-outline-only-cyan-100 {
+		@apply ring-[2px] ring-cyan-100 dark:ring-[2px] dark:ring-cyan-900;
+	}
+	.variant-outline-soft-cyan-100 {
+		@apply bg-cyan-100 text-cyan-600 ring-[2px] ring-cyan-300 dark:bg-cyan-900 dark:text-cyan-400 dark:ring-[2px] dark:ring-cyan-700;
+	}
+	.variant-outline-filled-cyan-100 {
+		@apply bg-cyan-100 text-black ring-[2px] ring-cyan-300 dark:bg-cyan-900 dark:text-white dark:ring-[2px] dark:ring-cyan-700;
+	}
+	.variant-ringed-cyan-100 {
+		@apply bg-transparent ring-[1px] ring-cyan-100 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-900;
+	}
+	.variant-ghost-cyan-100 {
+		@apply bg-cyan-100/20 ring-[2px] ring-cyan-100 dark:bg-cyan-900/20 dark:ring-[2px] dark:ring-cyan-900;
+	}
+	.variant-glass-cyan-100 {
+		@apply bg-cyan-100/40 text-cyan-600 backdrop-blur-lg dark:bg-cyan-900/40 dark:text-cyan-400;
+	}
+	.variant-seethrough-cyan-100 {
+		@apply bg-cyan-100/40 text-black dark:bg-cyan-900/40 dark:text-white;
+	}
+
+	.variant-filled-cyan-200 {
+		@apply bg-cyan-200 text-black dark:bg-cyan-800 dark:text-white;
+	}
+	.variant-soft-cyan-200 {
+		@apply bg-cyan-200 text-cyan-700 dark:bg-cyan-800 dark:text-cyan-300;
+	}
+	.variant-outline-only-cyan-200 {
+		@apply ring-[2px] ring-cyan-200 dark:ring-[2px] dark:ring-cyan-800;
+	}
+	.variant-outline-soft-cyan-200 {
+		@apply bg-cyan-200 text-cyan-700 ring-[2px] ring-cyan-400 dark:bg-cyan-800 dark:text-cyan-300 dark:ring-[2px] dark:ring-cyan-600;
+	}
+	.variant-outline-filled-cyan-200 {
+		@apply bg-cyan-200 text-black ring-[2px] ring-cyan-400 dark:bg-cyan-800 dark:text-white dark:ring-[2px] dark:ring-cyan-600;
+	}
+	.variant-ringed-cyan-200 {
+		@apply bg-transparent ring-[1px] ring-cyan-200 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-800;
+	}
+	.variant-ghost-cyan-200 {
+		@apply bg-cyan-200/20 ring-[2px] ring-cyan-200 dark:bg-cyan-800/20 dark:ring-[2px] dark:ring-cyan-800;
+	}
+	.variant-glass-cyan-200 {
+		@apply bg-cyan-200/40 text-cyan-700 backdrop-blur-lg dark:bg-cyan-800/40 dark:text-cyan-300;
+	}
+	.variant-seethrough-cyan-200 {
+		@apply bg-cyan-200/40 text-black dark:bg-cyan-800/40 dark:text-white;
+	}
+
+	.variant-filled-cyan-300 {
+		@apply bg-cyan-300 text-black dark:bg-cyan-700 dark:text-white;
+	}
+	.variant-soft-cyan-300 {
+		@apply bg-cyan-300 text-cyan-800 dark:bg-cyan-700 dark:text-cyan-200;
+	}
+	.variant-outline-only-cyan-300 {
+		@apply ring-[2px] ring-cyan-300 dark:ring-[2px] dark:ring-cyan-700;
+	}
+	.variant-outline-soft-cyan-300 {
+		@apply bg-cyan-300 text-cyan-800 ring-[2px] ring-cyan-500 dark:bg-cyan-700 dark:text-cyan-200 dark:ring-[2px] dark:ring-cyan-500;
+	}
+	.variant-outline-filled-cyan-300 {
+		@apply bg-cyan-300 text-black ring-[2px] ring-cyan-500 dark:bg-cyan-700 dark:text-white dark:ring-[2px] dark:ring-cyan-500;
+	}
+	.variant-ringed-cyan-300 {
+		@apply bg-transparent ring-[1px] ring-cyan-300 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-700;
+	}
+	.variant-ghost-cyan-300 {
+		@apply bg-cyan-300/20 ring-[2px] ring-cyan-300 dark:bg-cyan-700/20 dark:ring-[2px] dark:ring-cyan-700;
+	}
+	.variant-glass-cyan-300 {
+		@apply bg-cyan-300/40 text-cyan-800 backdrop-blur-lg dark:bg-cyan-700/40 dark:text-cyan-200;
+	}
+	.variant-seethrough-cyan-300 {
+		@apply bg-cyan-300/40 text-black dark:bg-cyan-700/40 dark:text-white;
+	}
+
+	.variant-filled-cyan-400 {
+		@apply bg-cyan-400 text-black dark:bg-cyan-600 dark:text-white;
+	}
+	.variant-soft-cyan-400 {
+		@apply bg-cyan-400 text-cyan-900 dark:bg-cyan-600 dark:text-cyan-100;
+	}
+	.variant-outline-only-cyan-400 {
+		@apply ring-[2px] ring-cyan-400 dark:ring-[2px] dark:ring-cyan-600;
+	}
+	.variant-outline-soft-cyan-400 {
+		@apply bg-cyan-400 text-cyan-900 ring-[2px] ring-cyan-600 dark:bg-cyan-600 dark:text-cyan-100 dark:ring-[2px] dark:ring-cyan-400;
+	}
+	.variant-outline-filled-cyan-400 {
+		@apply bg-cyan-400 text-black ring-[2px] ring-cyan-600 dark:bg-cyan-600 dark:text-white dark:ring-[2px] dark:ring-cyan-400;
+	}
+	.variant-ringed-cyan-400 {
+		@apply bg-transparent ring-[1px] ring-cyan-400 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-600;
+	}
+	.variant-ghost-cyan-400 {
+		@apply bg-cyan-400/20 ring-[2px] ring-cyan-400 dark:bg-cyan-600/20 dark:ring-[2px] dark:ring-cyan-600;
+	}
+	.variant-glass-cyan-400 {
+		@apply bg-cyan-400/40 text-cyan-900 backdrop-blur-lg dark:bg-cyan-600/40 dark:text-cyan-100;
+	}
+	.variant-seethrough-cyan-400 {
+		@apply bg-cyan-400/40 text-black dark:bg-cyan-600/40 dark:text-white;
+	}
+
+	.variant-filled-cyan-500 {
+		@apply bg-cyan-500 text-white dark:bg-cyan-500 dark:text-white;
+	}
+	.variant-soft-cyan-500 {
+		@apply bg-cyan-500 text-cyan-50 dark:bg-cyan-500 dark:text-cyan-50;
+	}
+	.variant-outline-only-cyan-500 {
+		@apply ring-[2px] ring-cyan-500 dark:ring-[2px] dark:ring-cyan-500;
+	}
+	.variant-outline-soft-cyan-500 {
+		@apply bg-cyan-500 text-cyan-50 ring-[2px] ring-cyan-300 dark:bg-cyan-500 dark:text-cyan-50 dark:ring-[2px] dark:ring-cyan-300;
+	}
+	.variant-outline-filled-cyan-500 {
+		@apply bg-cyan-500 text-white ring-[2px] ring-cyan-300 dark:bg-cyan-500 dark:text-white dark:ring-[2px] dark:ring-cyan-300;
+	}
+	.variant-ringed-cyan-500 {
+		@apply bg-transparent ring-[1px] ring-cyan-500 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-500;
+	}
+	.variant-ghost-cyan-500 {
+		@apply bg-cyan-500/20 ring-[2px] ring-cyan-500 dark:bg-cyan-500/20 dark:ring-[2px] dark:ring-cyan-500;
+	}
+	.variant-glass-cyan-500 {
+		@apply bg-cyan-500/40 text-cyan-50 backdrop-blur-lg dark:bg-cyan-500/40 dark:text-cyan-50;
+	}
+	.variant-seethrough-cyan-500 {
+		@apply bg-cyan-500/40 text-white dark:bg-cyan-500/40 dark:text-white;
+	}
+
+	.variant-filled-cyan-600 {
+		@apply bg-cyan-600 text-white dark:bg-cyan-400 dark:text-black;
+	}
+	.variant-soft-cyan-600 {
+		@apply bg-cyan-600 text-cyan-100 dark:bg-cyan-400 dark:text-cyan-900;
+	}
+	.variant-outline-only-cyan-600 {
+		@apply ring-[2px] ring-cyan-600 dark:ring-[2px] dark:ring-cyan-400;
+	}
+	.variant-outline-soft-cyan-600 {
+		@apply bg-cyan-600 text-cyan-100 ring-[2px] ring-cyan-400 dark:bg-cyan-400 dark:text-cyan-900 dark:ring-[2px] dark:ring-cyan-600;
+	}
+	.variant-outline-filled-cyan-600 {
+		@apply bg-cyan-600 text-white ring-[2px] ring-cyan-400 dark:bg-cyan-400 dark:text-black dark:ring-[2px] dark:ring-cyan-600;
+	}
+	.variant-ringed-cyan-600 {
+		@apply bg-transparent ring-[1px] ring-cyan-600 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-400;
+	}
+	.variant-ghost-cyan-600 {
+		@apply bg-cyan-600/20 ring-[2px] ring-cyan-600 dark:bg-cyan-400/20 dark:ring-[2px] dark:ring-cyan-400;
+	}
+	.variant-glass-cyan-600 {
+		@apply bg-cyan-600/40 text-cyan-100 backdrop-blur-lg dark:bg-cyan-400/40 dark:text-cyan-900;
+	}
+	.variant-seethrough-cyan-600 {
+		@apply bg-cyan-600/40 text-white dark:bg-cyan-400/40 dark:text-black;
+	}
+
+	.variant-filled-cyan-700 {
+		@apply bg-cyan-700 text-white dark:bg-cyan-300 dark:text-black;
+	}
+	.variant-soft-cyan-700 {
+		@apply bg-cyan-700 text-cyan-200 dark:bg-cyan-300 dark:text-cyan-800;
+	}
+	.variant-outline-only-cyan-700 {
+		@apply ring-[2px] ring-cyan-700 dark:ring-[2px] dark:ring-cyan-300;
+	}
+	.variant-outline-soft-cyan-700 {
+		@apply bg-cyan-700 text-cyan-200 ring-[2px] ring-cyan-500 dark:bg-cyan-300 dark:text-cyan-800 dark:ring-[2px] dark:ring-cyan-500;
+	}
+	.variant-outline-filled-cyan-700 {
+		@apply bg-cyan-700 text-white ring-[2px] ring-cyan-500 dark:bg-cyan-300 dark:text-black dark:ring-[2px] dark:ring-cyan-500;
+	}
+	.variant-ringed-cyan-700 {
+		@apply bg-transparent ring-[1px] ring-cyan-700 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-300;
+	}
+	.variant-ghost-cyan-700 {
+		@apply bg-cyan-700/20 ring-[2px] ring-cyan-700 dark:bg-cyan-300/20 dark:ring-[2px] dark:ring-cyan-300;
+	}
+	.variant-glass-cyan-700 {
+		@apply bg-cyan-700/40 text-cyan-200 backdrop-blur-lg dark:bg-cyan-300/40 dark:text-cyan-800;
+	}
+	.variant-seethrough-cyan-700 {
+		@apply bg-cyan-700/40 text-white dark:bg-cyan-300/40 dark:text-black;
+	}
+
+	.variant-filled-cyan-800 {
+		@apply bg-cyan-800 text-white dark:bg-cyan-200 dark:text-black;
+	}
+	.variant-soft-cyan-800 {
+		@apply bg-cyan-800 text-cyan-300 dark:bg-cyan-200 dark:text-cyan-700;
+	}
+	.variant-outline-only-cyan-800 {
+		@apply ring-[2px] ring-cyan-800 dark:ring-[2px] dark:ring-cyan-200;
+	}
+	.variant-outline-soft-cyan-800 {
+		@apply bg-cyan-800 text-cyan-300 ring-[2px] ring-cyan-600 dark:bg-cyan-200 dark:text-cyan-700 dark:ring-[2px] dark:ring-cyan-400;
+	}
+	.variant-outline-filled-cyan-800 {
+		@apply bg-cyan-800 text-white ring-[2px] ring-cyan-600 dark:bg-cyan-200 dark:text-black dark:ring-[2px] dark:ring-cyan-400;
+	}
+	.variant-ringed-cyan-800 {
+		@apply bg-transparent ring-[1px] ring-cyan-800 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-200;
+	}
+	.variant-ghost-cyan-800 {
+		@apply bg-cyan-800/20 ring-[2px] ring-cyan-800 dark:bg-cyan-200/20 dark:ring-[2px] dark:ring-cyan-200;
+	}
+	.variant-glass-cyan-800 {
+		@apply bg-cyan-800/40 text-cyan-300 backdrop-blur-lg dark:bg-cyan-200/40 dark:text-cyan-700;
+	}
+	.variant-seethrough-cyan-800 {
+		@apply bg-cyan-800/40 text-white dark:bg-cyan-200/40 dark:text-black;
+	}
+
+	.variant-filled-cyan-900 {
+		@apply bg-cyan-900 text-white dark:bg-cyan-100 dark:text-black;
+	}
+	.variant-soft-cyan-900 {
+		@apply bg-cyan-900 text-cyan-400 dark:bg-cyan-100 dark:text-cyan-600;
+	}
+	.variant-outline-only-cyan-900 {
+		@apply ring-[2px] ring-cyan-900 dark:ring-[2px] dark:ring-cyan-100;
+	}
+	.variant-outline-soft-cyan-900 {
+		@apply bg-cyan-900 text-cyan-400 ring-[2px] ring-cyan-700 dark:bg-cyan-100 dark:text-cyan-600 dark:ring-[2px] dark:ring-cyan-300;
+	}
+	.variant-outline-filled-cyan-900 {
+		@apply bg-cyan-900 text-white ring-[2px] ring-cyan-700 dark:bg-cyan-100 dark:text-black dark:ring-[2px] dark:ring-cyan-300;
+	}
+	.variant-ringed-cyan-900 {
+		@apply bg-transparent ring-[1px] ring-cyan-900 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-100;
+	}
+	.variant-ghost-cyan-900 {
+		@apply bg-cyan-900/20 ring-[2px] ring-cyan-900 dark:bg-cyan-100/20 dark:ring-[2px] dark:ring-cyan-100;
+	}
+	.variant-glass-cyan-900 {
+		@apply bg-cyan-900/40 text-cyan-400 backdrop-blur-lg dark:bg-cyan-100/40 dark:text-cyan-600;
+	}
+	.variant-seethrough-cyan-900 {
+		@apply bg-cyan-900/40 text-white dark:bg-cyan-100/40 dark:text-black;
+	}
+
+	.variant-filled-cyan-950 {
+		@apply bg-cyan-950 text-white dark:bg-cyan-50 dark:text-black;
+	}
+	.variant-soft-cyan-950 {
+		@apply bg-cyan-950 text-cyan-500 dark:bg-cyan-50 dark:text-cyan-500;
+	}
+	.variant-outline-only-cyan-950 {
+		@apply ring-[2px] ring-cyan-950 dark:ring-[2px] dark:ring-cyan-50;
+	}
+	.variant-outline-soft-cyan-950 {
+		@apply bg-cyan-950 text-cyan-500 ring-[2px] ring-cyan-800 dark:bg-cyan-50 dark:text-cyan-500 dark:ring-[2px] dark:ring-cyan-200;
+	}
+	.variant-outline-filled-cyan-950 {
+		@apply bg-cyan-950 text-white ring-[2px] ring-cyan-800 dark:bg-cyan-50 dark:text-black dark:ring-[2px] dark:ring-cyan-200;
+	}
+	.variant-ringed-cyan-950 {
+		@apply bg-transparent ring-[1px] ring-cyan-950 dark:bg-transparent dark:ring-[1px] dark:ring-cyan-50;
+	}
+	.variant-ghost-cyan-950 {
+		@apply bg-cyan-950/20 ring-[2px] ring-cyan-950 dark:bg-cyan-50/20 dark:ring-[2px] dark:ring-cyan-50;
+	}
+	.variant-glass-cyan-950 {
+		@apply bg-cyan-950/40 text-cyan-500 backdrop-blur-lg dark:bg-cyan-50/40 dark:text-cyan-500;
+	}
+	.variant-seethrough-cyan-950 {
+		@apply bg-cyan-950/40 text-white dark:bg-cyan-50/40 dark:text-black;
+	}
+
+	/* pink */
+
+	.variant-filled-pink-50 {
+		@apply bg-pink-50 text-black dark:bg-pink-950 dark:text-white;
+	}
+	.variant-soft-pink-50 {
+		@apply bg-pink-50 text-pink-500 dark:bg-pink-950 dark:text-pink-500;
+	}
+	.variant-outline-only-pink-50 {
+		@apply ring-[2px] ring-pink-50 dark:ring-[2px] dark:ring-pink-950;
+	}
+	.variant-outline-soft-pink-50 {
+		@apply bg-pink-50 text-pink-500 ring-[2px] ring-pink-200 dark:bg-pink-950 dark:text-pink-500 dark:ring-[2px] dark:ring-pink-800;
+	}
+	.variant-outline-filled-pink-50 {
+		@apply bg-pink-50 text-black ring-[2px] ring-pink-200 dark:bg-pink-950 dark:text-white dark:ring-[2px] dark:ring-pink-800;
+	}
+	.variant-ringed-pink-50 {
+		@apply bg-transparent ring-[1px] ring-pink-50 dark:bg-transparent dark:ring-[1px] dark:ring-pink-950;
+	}
+	.variant-ghost-pink-50 {
+		@apply bg-pink-50/20 ring-[2px] ring-pink-50 dark:bg-pink-950/20 dark:ring-[2px] dark:ring-pink-950;
+	}
+	.variant-glass-pink-50 {
+		@apply bg-pink-50/40 text-pink-500 backdrop-blur-lg dark:bg-pink-950/40 dark:text-pink-500;
+	}
+	.variant-seethrough-pink-50 {
+		@apply bg-pink-50/40 text-black dark:bg-pink-950/40 dark:text-white;
+	}
+
+	.variant-filled-pink-100 {
+		@apply bg-pink-100 text-black dark:bg-pink-900 dark:text-white;
+	}
+	.variant-soft-pink-100 {
+		@apply bg-pink-100 text-pink-600 dark:bg-pink-900 dark:text-pink-400;
+	}
+	.variant-outline-only-pink-100 {
+		@apply ring-[2px] ring-pink-100 dark:ring-[2px] dark:ring-pink-900;
+	}
+	.variant-outline-soft-pink-100 {
+		@apply bg-pink-100 text-pink-600 ring-[2px] ring-pink-300 dark:bg-pink-900 dark:text-pink-400 dark:ring-[2px] dark:ring-pink-700;
+	}
+	.variant-outline-filled-pink-100 {
+		@apply bg-pink-100 text-black ring-[2px] ring-pink-300 dark:bg-pink-900 dark:text-white dark:ring-[2px] dark:ring-pink-700;
+	}
+	.variant-ringed-pink-100 {
+		@apply bg-transparent ring-[1px] ring-pink-100 dark:bg-transparent dark:ring-[1px] dark:ring-pink-900;
+	}
+	.variant-ghost-pink-100 {
+		@apply bg-pink-100/20 ring-[2px] ring-pink-100 dark:bg-pink-900/20 dark:ring-[2px] dark:ring-pink-900;
+	}
+	.variant-glass-pink-100 {
+		@apply bg-pink-100/40 text-pink-600 backdrop-blur-lg dark:bg-pink-900/40 dark:text-pink-400;
+	}
+	.variant-seethrough-pink-100 {
+		@apply bg-pink-100/40 text-black dark:bg-pink-900/40 dark:text-white;
+	}
+
+	.variant-filled-pink-200 {
+		@apply bg-pink-200 text-black dark:bg-pink-800 dark:text-white;
+	}
+	.variant-soft-pink-200 {
+		@apply bg-pink-200 text-pink-700 dark:bg-pink-800 dark:text-pink-300;
+	}
+	.variant-outline-only-pink-200 {
+		@apply ring-[2px] ring-pink-200 dark:ring-[2px] dark:ring-pink-800;
+	}
+	.variant-outline-soft-pink-200 {
+		@apply bg-pink-200 text-pink-700 ring-[2px] ring-pink-400 dark:bg-pink-800 dark:text-pink-300 dark:ring-[2px] dark:ring-pink-600;
+	}
+	.variant-outline-filled-pink-200 {
+		@apply bg-pink-200 text-black ring-[2px] ring-pink-400 dark:bg-pink-800 dark:text-white dark:ring-[2px] dark:ring-pink-600;
+	}
+	.variant-ringed-pink-200 {
+		@apply bg-transparent ring-[1px] ring-pink-200 dark:bg-transparent dark:ring-[1px] dark:ring-pink-800;
+	}
+	.variant-ghost-pink-200 {
+		@apply bg-pink-200/20 ring-[2px] ring-pink-200 dark:bg-pink-800/20 dark:ring-[2px] dark:ring-pink-800;
+	}
+	.variant-glass-pink-200 {
+		@apply bg-pink-200/40 text-pink-700 backdrop-blur-lg dark:bg-pink-800/40 dark:text-pink-300;
+	}
+	.variant-seethrough-pink-200 {
+		@apply bg-pink-200/40 text-black dark:bg-pink-800/40 dark:text-white;
+	}
+
+	.variant-filled-pink-300 {
+		@apply bg-pink-300 text-black dark:bg-pink-700 dark:text-white;
+	}
+	.variant-soft-pink-300 {
+		@apply bg-pink-300 text-pink-800 dark:bg-pink-700 dark:text-pink-200;
+	}
+	.variant-outline-only-pink-300 {
+		@apply ring-[2px] ring-pink-300 dark:ring-[2px] dark:ring-pink-700;
+	}
+	.variant-outline-soft-pink-300 {
+		@apply bg-pink-300 text-pink-800 ring-[2px] ring-pink-500 dark:bg-pink-700 dark:text-pink-200 dark:ring-[2px] dark:ring-pink-500;
+	}
+	.variant-outline-filled-pink-300 {
+		@apply bg-pink-300 text-black ring-[2px] ring-pink-500 dark:bg-pink-700 dark:text-white dark:ring-[2px] dark:ring-pink-500;
+	}
+	.variant-ringed-pink-300 {
+		@apply bg-transparent ring-[1px] ring-pink-300 dark:bg-transparent dark:ring-[1px] dark:ring-pink-700;
+	}
+	.variant-ghost-pink-300 {
+		@apply bg-pink-300/20 ring-[2px] ring-pink-300 dark:bg-pink-700/20 dark:ring-[2px] dark:ring-pink-700;
+	}
+	.variant-glass-pink-300 {
+		@apply bg-pink-300/40 text-pink-800 backdrop-blur-lg dark:bg-pink-700/40 dark:text-pink-200;
+	}
+	.variant-seethrough-pink-300 {
+		@apply bg-pink-300/40 text-black dark:bg-pink-700/40 dark:text-white;
+	}
+
+	.variant-filled-pink-400 {
+		@apply bg-pink-400 text-black dark:bg-pink-600 dark:text-white;
+	}
+	.variant-soft-pink-400 {
+		@apply bg-pink-400 text-pink-900 dark:bg-pink-600 dark:text-pink-100;
+	}
+	.variant-outline-only-pink-400 {
+		@apply ring-[2px] ring-pink-400 dark:ring-[2px] dark:ring-pink-600;
+	}
+	.variant-outline-soft-pink-400 {
+		@apply bg-pink-400 text-pink-900 ring-[2px] ring-pink-600 dark:bg-pink-600 dark:text-pink-100 dark:ring-[2px] dark:ring-pink-400;
+	}
+	.variant-outline-filled-pink-400 {
+		@apply bg-pink-400 text-black ring-[2px] ring-pink-600 dark:bg-pink-600 dark:text-white dark:ring-[2px] dark:ring-pink-400;
+	}
+	.variant-ringed-pink-400 {
+		@apply bg-transparent ring-[1px] ring-pink-400 dark:bg-transparent dark:ring-[1px] dark:ring-pink-600;
+	}
+	.variant-ghost-pink-400 {
+		@apply bg-pink-400/20 ring-[2px] ring-pink-400 dark:bg-pink-600/20 dark:ring-[2px] dark:ring-pink-600;
+	}
+	.variant-glass-pink-400 {
+		@apply bg-pink-400/40 text-pink-900 backdrop-blur-lg dark:bg-pink-600/40 dark:text-pink-100;
+	}
+	.variant-seethrough-pink-400 {
+		@apply bg-pink-400/40 text-black dark:bg-pink-600/40 dark:text-white;
+	}
+
+	.variant-filled-pink-500 {
+		@apply bg-pink-500 text-white dark:bg-pink-500 dark:text-white;
+	}
+	.variant-soft-pink-500 {
+		@apply bg-pink-500 text-pink-50 dark:bg-pink-500 dark:text-pink-50;
+	}
+	.variant-outline-only-pink-500 {
+		@apply ring-[2px] ring-pink-500 dark:ring-[2px] dark:ring-pink-500;
+	}
+	.variant-outline-soft-pink-500 {
+		@apply bg-pink-500 text-pink-50 ring-[2px] ring-pink-300 dark:bg-pink-500 dark:text-pink-50 dark:ring-[2px] dark:ring-pink-300;
+	}
+	.variant-outline-filled-pink-500 {
+		@apply bg-pink-500 text-white ring-[2px] ring-pink-300 dark:bg-pink-500 dark:text-white dark:ring-[2px] dark:ring-pink-300;
+	}
+	.variant-ringed-pink-500 {
+		@apply bg-transparent ring-[1px] ring-pink-500 dark:bg-transparent dark:ring-[1px] dark:ring-pink-500;
+	}
+	.variant-ghost-pink-500 {
+		@apply bg-pink-500/20 ring-[2px] ring-pink-500 dark:bg-pink-500/20 dark:ring-[2px] dark:ring-pink-500;
+	}
+	.variant-glass-pink-500 {
+		@apply bg-pink-500/40 text-pink-50 backdrop-blur-lg dark:bg-pink-500/40 dark:text-pink-50;
+	}
+	.variant-seethrough-pink-500 {
+		@apply bg-pink-500/40 text-white dark:bg-pink-500/40 dark:text-white;
+	}
+
+	.variant-filled-pink-600 {
+		@apply bg-pink-600 text-white dark:bg-pink-400 dark:text-black;
+	}
+	.variant-soft-pink-600 {
+		@apply bg-pink-600 text-pink-100 dark:bg-pink-400 dark:text-pink-900;
+	}
+	.variant-outline-only-pink-600 {
+		@apply ring-[2px] ring-pink-600 dark:ring-[2px] dark:ring-pink-400;
+	}
+	.variant-outline-soft-pink-600 {
+		@apply bg-pink-600 text-pink-100 ring-[2px] ring-pink-400 dark:bg-pink-400 dark:text-pink-900 dark:ring-[2px] dark:ring-pink-600;
+	}
+	.variant-outline-filled-pink-600 {
+		@apply bg-pink-600 text-white ring-[2px] ring-pink-400 dark:bg-pink-400 dark:text-black dark:ring-[2px] dark:ring-pink-600;
+	}
+	.variant-ringed-pink-600 {
+		@apply bg-transparent ring-[1px] ring-pink-600 dark:bg-transparent dark:ring-[1px] dark:ring-pink-400;
+	}
+	.variant-ghost-pink-600 {
+		@apply bg-pink-600/20 ring-[2px] ring-pink-600 dark:bg-pink-400/20 dark:ring-[2px] dark:ring-pink-400;
+	}
+	.variant-glass-pink-600 {
+		@apply bg-pink-600/40 text-pink-100 backdrop-blur-lg dark:bg-pink-400/40 dark:text-pink-900;
+	}
+	.variant-seethrough-pink-600 {
+		@apply bg-pink-600/40 text-white dark:bg-pink-400/40 dark:text-black;
+	}
+
+	.variant-filled-pink-700 {
+		@apply bg-pink-700 text-white dark:bg-pink-300 dark:text-black;
+	}
+	.variant-soft-pink-700 {
+		@apply bg-pink-700 text-pink-200 dark:bg-pink-300 dark:text-pink-800;
+	}
+	.variant-outline-only-pink-700 {
+		@apply ring-[2px] ring-pink-700 dark:ring-[2px] dark:ring-pink-300;
+	}
+	.variant-outline-soft-pink-700 {
+		@apply bg-pink-700 text-pink-200 ring-[2px] ring-pink-500 dark:bg-pink-300 dark:text-pink-800 dark:ring-[2px] dark:ring-pink-500;
+	}
+	.variant-outline-filled-pink-700 {
+		@apply bg-pink-700 text-white ring-[2px] ring-pink-500 dark:bg-pink-300 dark:text-black dark:ring-[2px] dark:ring-pink-500;
+	}
+	.variant-ringed-pink-700 {
+		@apply bg-transparent ring-[1px] ring-pink-700 dark:bg-transparent dark:ring-[1px] dark:ring-pink-300;
+	}
+	.variant-ghost-pink-700 {
+		@apply bg-pink-700/20 ring-[2px] ring-pink-700 dark:bg-pink-300/20 dark:ring-[2px] dark:ring-pink-300;
+	}
+	.variant-glass-pink-700 {
+		@apply bg-pink-700/40 text-pink-200 backdrop-blur-lg dark:bg-pink-300/40 dark:text-pink-800;
+	}
+	.variant-seethrough-pink-700 {
+		@apply bg-pink-700/40 text-white dark:bg-pink-300/40 dark:text-black;
+	}
+
+	.variant-filled-pink-800 {
+		@apply bg-pink-800 text-white dark:bg-pink-200 dark:text-black;
+	}
+	.variant-soft-pink-800 {
+		@apply bg-pink-800 text-pink-300 dark:bg-pink-200 dark:text-pink-700;
+	}
+	.variant-outline-only-pink-800 {
+		@apply ring-[2px] ring-pink-800 dark:ring-[2px] dark:ring-pink-200;
+	}
+	.variant-outline-soft-pink-800 {
+		@apply bg-pink-800 text-pink-300 ring-[2px] ring-pink-600 dark:bg-pink-200 dark:text-pink-700 dark:ring-[2px] dark:ring-pink-400;
+	}
+	.variant-outline-filled-pink-800 {
+		@apply bg-pink-800 text-white ring-[2px] ring-pink-600 dark:bg-pink-200 dark:text-black dark:ring-[2px] dark:ring-pink-400;
+	}
+	.variant-ringed-pink-800 {
+		@apply bg-transparent ring-[1px] ring-pink-800 dark:bg-transparent dark:ring-[1px] dark:ring-pink-200;
+	}
+	.variant-ghost-pink-800 {
+		@apply bg-pink-800/20 ring-[2px] ring-pink-800 dark:bg-pink-200/20 dark:ring-[2px] dark:ring-pink-200;
+	}
+	.variant-glass-pink-800 {
+		@apply bg-pink-800/40 text-pink-300 backdrop-blur-lg dark:bg-pink-200/40 dark:text-pink-700;
+	}
+	.variant-seethrough-pink-800 {
+		@apply bg-pink-800/40 text-white dark:bg-pink-200/40 dark:text-black;
+	}
+
+	.variant-filled-pink-900 {
+		@apply bg-pink-900 text-white dark:bg-pink-100 dark:text-black;
+	}
+	.variant-soft-pink-900 {
+		@apply bg-pink-900 text-pink-400 dark:bg-pink-100 dark:text-pink-600;
+	}
+	.variant-outline-only-pink-900 {
+		@apply ring-[2px] ring-pink-900 dark:ring-[2px] dark:ring-pink-100;
+	}
+	.variant-outline-soft-pink-900 {
+		@apply bg-pink-900 text-pink-400 ring-[2px] ring-pink-700 dark:bg-pink-100 dark:text-pink-600 dark:ring-[2px] dark:ring-pink-300;
+	}
+	.variant-outline-filled-pink-900 {
+		@apply bg-pink-900 text-white ring-[2px] ring-pink-700 dark:bg-pink-100 dark:text-black dark:ring-[2px] dark:ring-pink-300;
+	}
+	.variant-ringed-pink-900 {
+		@apply bg-transparent ring-[1px] ring-pink-900 dark:bg-transparent dark:ring-[1px] dark:ring-pink-100;
+	}
+	.variant-ghost-pink-900 {
+		@apply bg-pink-900/20 ring-[2px] ring-pink-900 dark:bg-pink-100/20 dark:ring-[2px] dark:ring-pink-100;
+	}
+	.variant-glass-pink-900 {
+		@apply bg-pink-900/40 text-pink-400 backdrop-blur-lg dark:bg-pink-100/40 dark:text-pink-600;
+	}
+	.variant-seethrough-pink-900 {
+		@apply bg-pink-900/40 text-white dark:bg-pink-100/40 dark:text-black;
+	}
+
+	.variant-filled-pink-950 {
+		@apply bg-pink-950 text-white dark:bg-pink-50 dark:text-black;
+	}
+	.variant-soft-pink-950 {
+		@apply bg-pink-950 text-pink-500 dark:bg-pink-50 dark:text-pink-500;
+	}
+	.variant-outline-only-pink-950 {
+		@apply ring-[2px] ring-pink-950 dark:ring-[2px] dark:ring-pink-50;
+	}
+	.variant-outline-soft-pink-950 {
+		@apply bg-pink-950 text-pink-500 ring-[2px] ring-pink-800 dark:bg-pink-50 dark:text-pink-500 dark:ring-[2px] dark:ring-pink-200;
+	}
+	.variant-outline-filled-pink-950 {
+		@apply bg-pink-950 text-white ring-[2px] ring-pink-800 dark:bg-pink-50 dark:text-black dark:ring-[2px] dark:ring-pink-200;
+	}
+	.variant-ringed-pink-950 {
+		@apply bg-transparent ring-[1px] ring-pink-950 dark:bg-transparent dark:ring-[1px] dark:ring-pink-50;
+	}
+	.variant-ghost-pink-950 {
+		@apply bg-pink-950/20 ring-[2px] ring-pink-950 dark:bg-pink-50/20 dark:ring-[2px] dark:ring-pink-50;
+	}
+	.variant-glass-pink-950 {
+		@apply bg-pink-950/40 text-pink-500 backdrop-blur-lg dark:bg-pink-50/40 dark:text-pink-500;
+	}
+	.variant-seethrough-pink-950 {
+		@apply bg-pink-950/40 text-white dark:bg-pink-50/40 dark:text-black;
+	}
+
+	/* yellow */
+
+	.variant-filled-yellow-50 {
+		@apply bg-yellow-50 text-black dark:bg-yellow-950 dark:text-black;
+	}
+	.variant-soft-yellow-50 {
+		@apply bg-yellow-50 text-yellow-500 dark:bg-yellow-950 dark:text-yellow-950;
+	}
+	.variant-outline-only-yellow-50 {
+		@apply ring-[2px] ring-yellow-50 dark:ring-[2px] dark:ring-yellow-950;
+	}
+	.variant-outline-soft-yellow-50 {
+		@apply bg-yellow-50 text-yellow-500 ring-[2px] ring-yellow-200 dark:bg-yellow-950 dark:text-yellow-950 dark:ring-[2px] dark:ring-yellow-800;
+	}
+	.variant-outline-filled-yellow-50 {
+		@apply bg-yellow-50 text-black ring-[2px] ring-yellow-200 dark:bg-yellow-950 dark:text-black dark:ring-[2px] dark:ring-yellow-800;
+	}
+	.variant-ringed-yellow-50 {
+		@apply bg-transparent ring-[1px] ring-yellow-50 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-950;
+	}
+	.variant-ghost-yellow-50 {
+		@apply bg-yellow-50/20 ring-[2px] ring-yellow-50 dark:bg-yellow-950/20 dark:ring-[2px] dark:ring-yellow-950;
+	}
+	.variant-glass-yellow-50 {
+		@apply bg-yellow-50/40 text-yellow-500 backdrop-blur-lg dark:bg-yellow-950/40 dark:text-yellow-950;
+	}
+	.variant-seethrough-yellow-50 {
+		@apply bg-yellow-50/40 text-black dark:bg-yellow-950/40 dark:text-black;
+	}
+
+	.variant-filled-yellow-100 {
+		@apply bg-yellow-100 text-black dark:bg-yellow-900 dark:text-black;
+	}
+	.variant-soft-yellow-100 {
+		@apply bg-yellow-100 text-yellow-600 dark:bg-yellow-900 dark:text-yellow-950;
+	}
+	.variant-outline-only-yellow-100 {
+		@apply ring-[2px] ring-yellow-100 dark:ring-[2px] dark:ring-yellow-900;
+	}
+	.variant-outline-soft-yellow-100 {
+		@apply bg-yellow-100 text-yellow-600 ring-[2px] ring-yellow-300 dark:bg-yellow-900 dark:text-yellow-950 dark:ring-[2px] dark:ring-yellow-700;
+	}
+	.variant-outline-filled-yellow-100 {
+		@apply bg-yellow-100 text-black ring-[2px] ring-yellow-300 dark:bg-yellow-900 dark:text-black dark:ring-[2px] dark:ring-yellow-700;
+	}
+	.variant-ringed-yellow-100 {
+		@apply bg-transparent ring-[1px] ring-yellow-100 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-900;
+	}
+	.variant-ghost-yellow-100 {
+		@apply bg-yellow-100/20 ring-[2px] ring-yellow-100 dark:bg-yellow-900/20 dark:ring-[2px] dark:ring-yellow-900;
+	}
+	.variant-glass-yellow-100 {
+		@apply bg-yellow-100/40 text-yellow-600 backdrop-blur-lg dark:bg-yellow-900/40 dark:text-yellow-950;
+	}
+	.variant-seethrough-yellow-100 {
+		@apply bg-yellow-100/40 text-black dark:bg-yellow-900/40 dark:text-black;
+	}
+
+	.variant-filled-yellow-200 {
+		@apply bg-yellow-200 text-black dark:bg-yellow-800 dark:text-black;
+	}
+	.variant-soft-yellow-200 {
+		@apply bg-yellow-200 text-yellow-700 dark:bg-yellow-800 dark:text-yellow-950;
+	}
+	.variant-outline-only-yellow-200 {
+		@apply ring-[2px] ring-yellow-200 dark:ring-[2px] dark:ring-yellow-800;
+	}
+	.variant-outline-soft-yellow-200 {
+		@apply bg-yellow-200 text-yellow-700 ring-[2px] ring-yellow-400 dark:bg-yellow-800 dark:text-yellow-950 dark:ring-[2px] dark:ring-yellow-600;
+	}
+	.variant-outline-filled-yellow-200 {
+		@apply bg-yellow-200 text-black ring-[2px] ring-yellow-400 dark:bg-yellow-800 dark:text-black dark:ring-[2px] dark:ring-yellow-600;
+	}
+	.variant-ringed-yellow-200 {
+		@apply bg-transparent ring-[1px] ring-yellow-200 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-800;
+	}
+	.variant-ghost-yellow-200 {
+		@apply bg-yellow-200/20 ring-[2px] ring-yellow-200 dark:bg-yellow-800/20 dark:ring-[2px] dark:ring-yellow-800;
+	}
+	.variant-glass-yellow-200 {
+		@apply bg-yellow-200/40 text-yellow-700 backdrop-blur-lg dark:bg-yellow-800/40 dark:text-yellow-950;
+	}
+	.variant-seethrough-yellow-200 {
+		@apply bg-yellow-200/40 text-black dark:bg-yellow-800/40 dark:text-black;
+	}
+
+	.variant-filled-yellow-300 {
+		@apply bg-yellow-300 text-black dark:bg-yellow-700 dark:text-black;
+	}
+	.variant-soft-yellow-300 {
+		@apply bg-yellow-300 text-yellow-800 dark:bg-yellow-700 dark:text-yellow-950;
+	}
+	.variant-outline-only-yellow-300 {
+		@apply ring-[2px] ring-yellow-300 dark:ring-[2px] dark:ring-yellow-700;
+	}
+	.variant-outline-soft-yellow-300 {
+		@apply bg-yellow-300 text-yellow-800 ring-[2px] ring-yellow-500 dark:bg-yellow-700 dark:text-yellow-950 dark:ring-[2px] dark:ring-yellow-500;
+	}
+	.variant-outline-filled-yellow-300 {
+		@apply bg-yellow-300 text-black ring-[2px] ring-yellow-500 dark:bg-yellow-700 dark:text-black dark:ring-[2px] dark:ring-yellow-500;
+	}
+	.variant-ringed-yellow-300 {
+		@apply bg-transparent ring-[1px] ring-yellow-300 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-700;
+	}
+	.variant-ghost-yellow-300 {
+		@apply bg-yellow-300/20 ring-[2px] ring-yellow-300 dark:bg-yellow-700/20 dark:ring-[2px] dark:ring-yellow-700;
+	}
+	.variant-glass-yellow-300 {
+		@apply bg-yellow-300/40 text-yellow-800 backdrop-blur-lg dark:bg-yellow-700/40 dark:text-yellow-950;
+	}
+	.variant-seethrough-yellow-300 {
+		@apply bg-yellow-300/40 text-black dark:bg-yellow-700/40 dark:text-black;
+	}
+
+	.variant-filled-yellow-400 {
+		@apply bg-yellow-400 text-black dark:bg-yellow-600 dark:text-black;
+	}
+	.variant-soft-yellow-400 {
+		@apply bg-yellow-400 text-yellow-900 dark:bg-yellow-600 dark:text-yellow-950;
+	}
+	.variant-outline-only-yellow-400 {
+		@apply ring-[2px] ring-yellow-400 dark:ring-[2px] dark:ring-yellow-600;
+	}
+	.variant-outline-soft-yellow-400 {
+		@apply bg-yellow-400 text-yellow-900 ring-[2px] ring-yellow-600 dark:bg-yellow-600 dark:text-yellow-950 dark:ring-[2px] dark:ring-yellow-400;
+	}
+	.variant-outline-filled-yellow-400 {
+		@apply bg-yellow-400 text-black ring-[2px] ring-yellow-600 dark:bg-yellow-600 dark:text-black dark:ring-[2px] dark:ring-yellow-400;
+	}
+	.variant-ringed-yellow-400 {
+		@apply bg-transparent ring-[1px] ring-yellow-400 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-600;
+	}
+	.variant-ghost-yellow-400 {
+		@apply bg-yellow-400/20 ring-[2px] ring-yellow-400 dark:bg-yellow-600/20 dark:ring-[2px] dark:ring-yellow-600;
+	}
+	.variant-glass-yellow-400 {
+		@apply bg-yellow-400/40 text-yellow-900 backdrop-blur-lg dark:bg-yellow-600/40 dark:text-yellow-950;
+	}
+	.variant-seethrough-yellow-400 {
+		@apply bg-yellow-400/40 text-black dark:bg-yellow-600/40 dark:text-black;
+	}
+
+	.variant-filled-yellow-500 {
+		@apply bg-yellow-500 text-black dark:bg-yellow-500 dark:text-black;
+	}
+	.variant-soft-yellow-500 {
+		@apply bg-yellow-500 text-yellow-950 dark:bg-yellow-500 dark:text-yellow-950;
+	}
+	.variant-outline-only-yellow-500 {
+		@apply ring-[2px] ring-yellow-500 dark:ring-[2px] dark:ring-yellow-500;
+	}
+	.variant-outline-soft-yellow-500 {
+		@apply bg-yellow-500 text-yellow-950 ring-[2px] ring-yellow-300 dark:bg-yellow-500 dark:text-yellow-950 dark:ring-[2px] dark:ring-yellow-300;
+	}
+	.variant-outline-filled-yellow-500 {
+		@apply bg-yellow-500 text-black ring-[2px] ring-yellow-300 dark:bg-yellow-500 dark:text-black dark:ring-[2px] dark:ring-yellow-300;
+	}
+	.variant-ringed-yellow-500 {
+		@apply bg-transparent ring-[1px] ring-yellow-500 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-500;
+	}
+	.variant-ghost-yellow-500 {
+		@apply bg-yellow-500/20 ring-[2px] ring-yellow-500 dark:bg-yellow-500/20 dark:ring-[2px] dark:ring-yellow-500;
+	}
+	.variant-glass-yellow-500 {
+		@apply bg-yellow-500/40 text-yellow-950 backdrop-blur-lg dark:bg-yellow-500/40 dark:text-yellow-950;
+	}
+	.variant-seethrough-yellow-500 {
+		@apply bg-yellow-500/40 text-black dark:bg-yellow-500/40 dark:text-black;
+	}
+
+	.variant-filled-yellow-600 {
+		@apply bg-yellow-600 text-black dark:bg-yellow-400 dark:text-black;
+	}
+	.variant-soft-yellow-600 {
+		@apply bg-yellow-600 text-yellow-950 dark:bg-yellow-400 dark:text-yellow-900;
+	}
+	.variant-outline-only-yellow-600 {
+		@apply ring-[2px] ring-yellow-600 dark:ring-[2px] dark:ring-yellow-400;
+	}
+	.variant-outline-soft-yellow-600 {
+		@apply bg-yellow-600 text-yellow-950 ring-[2px] ring-yellow-400 dark:bg-yellow-400 dark:text-yellow-900 dark:ring-[2px] dark:ring-yellow-600;
+	}
+	.variant-outline-filled-yellow-600 {
+		@apply bg-yellow-600 text-black ring-[2px] ring-yellow-400 dark:bg-yellow-400 dark:text-black dark:ring-[2px] dark:ring-yellow-600;
+	}
+	.variant-ringed-yellow-600 {
+		@apply bg-transparent ring-[1px] ring-yellow-600 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-400;
+	}
+	.variant-ghost-yellow-600 {
+		@apply bg-yellow-600/20 ring-[2px] ring-yellow-600 dark:bg-yellow-400/20 dark:ring-[2px] dark:ring-yellow-400;
+	}
+	.variant-glass-yellow-600 {
+		@apply bg-yellow-600/40 text-yellow-950 backdrop-blur-lg dark:bg-yellow-400/40 dark:text-yellow-900;
+	}
+	.variant-seethrough-yellow-600 {
+		@apply bg-yellow-600/40 text-black dark:bg-yellow-400/40 dark:text-black;
+	}
+
+	.variant-filled-yellow-700 {
+		@apply bg-yellow-700 text-black dark:bg-yellow-300 dark:text-black;
+	}
+	.variant-soft-yellow-700 {
+		@apply bg-yellow-700 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-800;
+	}
+	.variant-outline-only-yellow-700 {
+		@apply ring-[2px] ring-yellow-700 dark:ring-[2px] dark:ring-yellow-300;
+	}
+	.variant-outline-soft-yellow-700 {
+		@apply bg-yellow-700 text-yellow-950 ring-[2px] ring-yellow-500 dark:bg-yellow-300 dark:text-yellow-800 dark:ring-[2px] dark:ring-yellow-500;
+	}
+	.variant-outline-filled-yellow-700 {
+		@apply bg-yellow-700 text-black ring-[2px] ring-yellow-500 dark:bg-yellow-300 dark:text-black dark:ring-[2px] dark:ring-yellow-500;
+	}
+	.variant-ringed-yellow-700 {
+		@apply bg-transparent ring-[1px] ring-yellow-700 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-300;
+	}
+	.variant-ghost-yellow-700 {
+		@apply bg-yellow-700/20 ring-[2px] ring-yellow-700 dark:bg-yellow-300/20 dark:ring-[2px] dark:ring-yellow-300;
+	}
+	.variant-glass-yellow-700 {
+		@apply bg-yellow-700/40 text-yellow-950 backdrop-blur-lg dark:bg-yellow-300/40 dark:text-yellow-800;
+	}
+	.variant-seethrough-yellow-700 {
+		@apply bg-yellow-700/40 text-black dark:bg-yellow-300/40 dark:text-black;
+	}
+
+	.variant-filled-yellow-800 {
+		@apply bg-yellow-800 text-black dark:bg-yellow-200 dark:text-black;
+	}
+	.variant-soft-yellow-800 {
+		@apply bg-yellow-800 text-yellow-950 dark:bg-yellow-200 dark:text-yellow-700;
+	}
+	.variant-outline-only-yellow-800 {
+		@apply ring-[2px] ring-yellow-800 dark:ring-[2px] dark:ring-yellow-200;
+	}
+	.variant-outline-soft-yellow-800 {
+		@apply bg-yellow-800 text-yellow-950 ring-[2px] ring-yellow-600 dark:bg-yellow-200 dark:text-yellow-700 dark:ring-[2px] dark:ring-yellow-400;
+	}
+	.variant-outline-filled-yellow-800 {
+		@apply bg-yellow-800 text-black ring-[2px] ring-yellow-600 dark:bg-yellow-200 dark:text-black dark:ring-[2px] dark:ring-yellow-400;
+	}
+	.variant-ringed-yellow-800 {
+		@apply bg-transparent ring-[1px] ring-yellow-800 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-200;
+	}
+	.variant-ghost-yellow-800 {
+		@apply bg-yellow-800/20 ring-[2px] ring-yellow-800 dark:bg-yellow-200/20 dark:ring-[2px] dark:ring-yellow-200;
+	}
+	.variant-glass-yellow-800 {
+		@apply bg-yellow-800/40 text-yellow-950 backdrop-blur-lg dark:bg-yellow-200/40 dark:text-yellow-700;
+	}
+	.variant-seethrough-yellow-800 {
+		@apply bg-yellow-800/40 text-black dark:bg-yellow-200/40 dark:text-black;
+	}
+
+	.variant-filled-yellow-900 {
+		@apply bg-yellow-900 text-black dark:bg-yellow-100 dark:text-black;
+	}
+	.variant-soft-yellow-900 {
+		@apply bg-yellow-900 text-yellow-950 dark:bg-yellow-100 dark:text-yellow-600;
+	}
+	.variant-outline-only-yellow-900 {
+		@apply ring-[2px] ring-yellow-900 dark:ring-[2px] dark:ring-yellow-100;
+	}
+	.variant-outline-soft-yellow-900 {
+		@apply bg-yellow-900 text-yellow-950 ring-[2px] ring-yellow-700 dark:bg-yellow-100 dark:text-yellow-600 dark:ring-[2px] dark:ring-yellow-300;
+	}
+	.variant-outline-filled-yellow-900 {
+		@apply bg-yellow-900 text-black ring-[2px] ring-yellow-700 dark:bg-yellow-100 dark:text-black dark:ring-[2px] dark:ring-yellow-300;
+	}
+	.variant-ringed-yellow-900 {
+		@apply bg-transparent ring-[1px] ring-yellow-900 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-100;
+	}
+	.variant-ghost-yellow-900 {
+		@apply bg-yellow-900/20 ring-[2px] ring-yellow-900 dark:bg-yellow-100/20 dark:ring-[2px] dark:ring-yellow-100;
+	}
+	.variant-glass-yellow-900 {
+		@apply bg-yellow-900/40 text-yellow-950 backdrop-blur-lg dark:bg-yellow-100/40 dark:text-yellow-600;
+	}
+	.variant-seethrough-yellow-900 {
+		@apply bg-yellow-900/40 text-black dark:bg-yellow-100/40 dark:text-black;
+	}
+
+	.variant-filled-yellow-950 {
+		@apply bg-yellow-950 text-black dark:bg-yellow-50 dark:text-black;
+	}
+	.variant-soft-yellow-950 {
+		@apply bg-yellow-950 text-yellow-950 dark:bg-yellow-50 dark:text-yellow-500;
+	}
+	.variant-outline-only-yellow-950 {
+		@apply ring-[2px] ring-yellow-950 dark:ring-[2px] dark:ring-yellow-50;
+	}
+	.variant-outline-soft-yellow-950 {
+		@apply bg-yellow-950 text-yellow-950 ring-[2px] ring-yellow-800 dark:bg-yellow-50 dark:text-yellow-500 dark:ring-[2px] dark:ring-yellow-200;
+	}
+	.variant-outline-filled-yellow-950 {
+		@apply bg-yellow-950 text-black ring-[2px] ring-yellow-800 dark:bg-yellow-50 dark:text-black dark:ring-[2px] dark:ring-yellow-200;
+	}
+	.variant-ringed-yellow-950 {
+		@apply bg-transparent ring-[1px] ring-yellow-950 dark:bg-transparent dark:ring-[1px] dark:ring-yellow-50;
+	}
+	.variant-ghost-yellow-950 {
+		@apply bg-yellow-950/20 ring-[2px] ring-yellow-950 dark:bg-yellow-50/20 dark:ring-[2px] dark:ring-yellow-50;
+	}
+	.variant-glass-yellow-950 {
+		@apply bg-yellow-950/40 text-yellow-950 backdrop-blur-lg dark:bg-yellow-50/40 dark:text-yellow-500;
+	}
+	.variant-seethrough-yellow-950 {
+		@apply bg-yellow-950/40 text-black dark:bg-yellow-50/40 dark:text-black;
+	}
+
+	/* orange */
+
+	.variant-filled-orange-50 {
+		@apply bg-orange-50 text-black dark:bg-orange-950 dark:text-white;
+	}
+	.variant-soft-orange-50 {
+		@apply bg-orange-50 text-orange-500 dark:bg-orange-950 dark:text-orange-500;
+	}
+	.variant-outline-only-orange-50 {
+		@apply ring-[2px] ring-orange-50 dark:ring-[2px] dark:ring-orange-950;
+	}
+	.variant-outline-soft-orange-50 {
+		@apply bg-orange-50 text-orange-500 ring-[2px] ring-orange-200 dark:bg-orange-950 dark:text-orange-500 dark:ring-[2px] dark:ring-orange-800;
+	}
+	.variant-outline-filled-orange-50 {
+		@apply bg-orange-50 text-black ring-[2px] ring-orange-200 dark:bg-orange-950 dark:text-white dark:ring-[2px] dark:ring-orange-800;
+	}
+	.variant-ringed-orange-50 {
+		@apply bg-transparent ring-[1px] ring-orange-50 dark:bg-transparent dark:ring-[1px] dark:ring-orange-950;
+	}
+	.variant-ghost-orange-50 {
+		@apply bg-orange-50/20 ring-[2px] ring-orange-50 dark:bg-orange-950/20 dark:ring-[2px] dark:ring-orange-950;
+	}
+	.variant-glass-orange-50 {
+		@apply bg-orange-50/40 text-orange-500 backdrop-blur-lg dark:bg-orange-950/40 dark:text-orange-500;
+	}
+	.variant-seethrough-orange-50 {
+		@apply bg-orange-50/40 text-black dark:bg-orange-950/40 dark:text-white;
+	}
+
+	.variant-filled-orange-100 {
+		@apply bg-orange-100 text-black dark:bg-orange-900 dark:text-white;
+	}
+	.variant-soft-orange-100 {
+		@apply bg-orange-100 text-orange-600 dark:bg-orange-900 dark:text-orange-400;
+	}
+	.variant-outline-only-orange-100 {
+		@apply ring-[2px] ring-orange-100 dark:ring-[2px] dark:ring-orange-900;
+	}
+	.variant-outline-soft-orange-100 {
+		@apply bg-orange-100 text-orange-600 ring-[2px] ring-orange-300 dark:bg-orange-900 dark:text-orange-400 dark:ring-[2px] dark:ring-orange-700;
+	}
+	.variant-outline-filled-orange-100 {
+		@apply bg-orange-100 text-black ring-[2px] ring-orange-300 dark:bg-orange-900 dark:text-white dark:ring-[2px] dark:ring-orange-700;
+	}
+	.variant-ringed-orange-100 {
+		@apply bg-transparent ring-[1px] ring-orange-100 dark:bg-transparent dark:ring-[1px] dark:ring-orange-900;
+	}
+	.variant-ghost-orange-100 {
+		@apply bg-orange-100/20 ring-[2px] ring-orange-100 dark:bg-orange-900/20 dark:ring-[2px] dark:ring-orange-900;
+	}
+	.variant-glass-orange-100 {
+		@apply bg-orange-100/40 text-orange-600 backdrop-blur-lg dark:bg-orange-900/40 dark:text-orange-400;
+	}
+	.variant-seethrough-orange-100 {
+		@apply bg-orange-100/40 text-black dark:bg-orange-900/40 dark:text-white;
+	}
+
+	.variant-filled-orange-200 {
+		@apply bg-orange-200 text-black dark:bg-orange-800 dark:text-white;
+	}
+	.variant-soft-orange-200 {
+		@apply bg-orange-200 text-orange-700 dark:bg-orange-800 dark:text-orange-300;
+	}
+	.variant-outline-only-orange-200 {
+		@apply ring-[2px] ring-orange-200 dark:ring-[2px] dark:ring-orange-800;
+	}
+	.variant-outline-soft-orange-200 {
+		@apply bg-orange-200 text-orange-700 ring-[2px] ring-orange-400 dark:bg-orange-800 dark:text-orange-300 dark:ring-[2px] dark:ring-orange-600;
+	}
+	.variant-outline-filled-orange-200 {
+		@apply bg-orange-200 text-black ring-[2px] ring-orange-400 dark:bg-orange-800 dark:text-white dark:ring-[2px] dark:ring-orange-600;
+	}
+	.variant-ringed-orange-200 {
+		@apply bg-transparent ring-[1px] ring-orange-200 dark:bg-transparent dark:ring-[1px] dark:ring-orange-800;
+	}
+	.variant-ghost-orange-200 {
+		@apply bg-orange-200/20 ring-[2px] ring-orange-200 dark:bg-orange-800/20 dark:ring-[2px] dark:ring-orange-800;
+	}
+	.variant-glass-orange-200 {
+		@apply bg-orange-200/40 text-orange-700 backdrop-blur-lg dark:bg-orange-800/40 dark:text-orange-300;
+	}
+	.variant-seethrough-orange-200 {
+		@apply bg-orange-200/40 text-black dark:bg-orange-800/40 dark:text-white;
+	}
+
+	.variant-filled-orange-300 {
+		@apply bg-orange-300 text-black dark:bg-orange-700 dark:text-black;
+	}
+	.variant-soft-orange-300 {
+		@apply bg-orange-300 text-orange-800 dark:bg-orange-700 dark:text-orange-950;
+	}
+	.variant-outline-only-orange-300 {
+		@apply ring-[2px] ring-orange-300 dark:ring-[2px] dark:ring-orange-700;
+	}
+	.variant-outline-soft-orange-300 {
+		@apply bg-orange-300 text-orange-800 ring-[2px] ring-orange-500 dark:bg-orange-700 dark:text-orange-950 dark:ring-[2px] dark:ring-orange-500;
+	}
+	.variant-outline-filled-orange-300 {
+		@apply bg-orange-300 text-black ring-[2px] ring-orange-500 dark:bg-orange-700 dark:text-black dark:ring-[2px] dark:ring-orange-500;
+	}
+	.variant-ringed-orange-300 {
+		@apply bg-transparent ring-[1px] ring-orange-300 dark:bg-transparent dark:ring-[1px] dark:ring-orange-700;
+	}
+	.variant-ghost-orange-300 {
+		@apply bg-orange-300/20 ring-[2px] ring-orange-300 dark:bg-orange-700/20 dark:ring-[2px] dark:ring-orange-700;
+	}
+	.variant-glass-orange-300 {
+		@apply bg-orange-300/40 text-orange-800 backdrop-blur-lg dark:bg-orange-700/40 dark:text-orange-950;
+	}
+	.variant-seethrough-orange-300 {
+		@apply bg-orange-300/40 text-black dark:bg-orange-700/40 dark:text-black;
+	}
+
+	.variant-filled-orange-400 {
+		@apply bg-orange-400 text-black dark:bg-orange-600 dark:text-black;
+	}
+	.variant-soft-orange-400 {
+		@apply bg-orange-400 text-orange-900 dark:bg-orange-600 dark:text-orange-950;
+	}
+	.variant-outline-only-orange-400 {
+		@apply ring-[2px] ring-orange-400 dark:ring-[2px] dark:ring-orange-600;
+	}
+	.variant-outline-soft-orange-400 {
+		@apply bg-orange-400 text-orange-900 ring-[2px] ring-orange-600 dark:bg-orange-600 dark:text-orange-950 dark:ring-[2px] dark:ring-orange-400;
+	}
+	.variant-outline-filled-orange-400 {
+		@apply bg-orange-400 text-black ring-[2px] ring-orange-600 dark:bg-orange-600 dark:text-black dark:ring-[2px] dark:ring-orange-400;
+	}
+	.variant-ringed-orange-400 {
+		@apply bg-transparent ring-[1px] ring-orange-400 dark:bg-transparent dark:ring-[1px] dark:ring-orange-600;
+	}
+	.variant-ghost-orange-400 {
+		@apply bg-orange-400/20 ring-[2px] ring-orange-400 dark:bg-orange-600/20 dark:ring-[2px] dark:ring-orange-600;
+	}
+	.variant-glass-orange-400 {
+		@apply bg-orange-400/40 text-orange-900 backdrop-blur-lg dark:bg-orange-600/40 dark:text-orange-950;
+	}
+	.variant-seethrough-orange-400 {
+		@apply bg-orange-400/40 text-black dark:bg-orange-600/40 dark:text-black;
+	}
+
+	.variant-filled-orange-500 {
+		@apply bg-orange-500 text-black dark:bg-orange-500 dark:text-black;
+	}
+	.variant-soft-orange-500 {
+		@apply bg-orange-500 text-orange-950 dark:bg-orange-500 dark:text-orange-950;
+	}
+	.variant-outline-only-orange-500 {
+		@apply ring-[2px] ring-orange-500 dark:ring-[2px] dark:ring-orange-500;
+	}
+	.variant-outline-soft-orange-500 {
+		@apply bg-orange-500 text-orange-950 ring-[2px] ring-orange-300 dark:bg-orange-500 dark:text-orange-950 dark:ring-[2px] dark:ring-orange-300;
+	}
+	.variant-outline-filled-orange-500 {
+		@apply bg-orange-500 text-black ring-[2px] ring-orange-300 dark:bg-orange-500 dark:text-black dark:ring-[2px] dark:ring-orange-300;
+	}
+	.variant-ringed-orange-500 {
+		@apply bg-transparent ring-[1px] ring-orange-500 dark:bg-transparent dark:ring-[1px] dark:ring-orange-500;
+	}
+	.variant-ghost-orange-500 {
+		@apply bg-orange-500/20 ring-[2px] ring-orange-500 dark:bg-orange-500/20 dark:ring-[2px] dark:ring-orange-500;
+	}
+	.variant-glass-orange-500 {
+		@apply bg-orange-500/40 text-orange-950 backdrop-blur-lg dark:bg-orange-500/40 dark:text-orange-950;
+	}
+	.variant-seethrough-orange-500 {
+		@apply bg-orange-500/40 text-black dark:bg-orange-500/40 dark:text-black;
+	}
+
+	.variant-filled-orange-600 {
+		@apply bg-orange-600 text-black dark:bg-orange-400 dark:text-black;
+	}
+	.variant-soft-orange-600 {
+		@apply bg-orange-600 text-orange-950 dark:bg-orange-400 dark:text-orange-900;
+	}
+	.variant-outline-only-orange-600 {
+		@apply ring-[2px] ring-orange-600 dark:ring-[2px] dark:ring-orange-400;
+	}
+	.variant-outline-soft-orange-600 {
+		@apply bg-orange-600 text-orange-950 ring-[2px] ring-orange-400 dark:bg-orange-400 dark:text-orange-900 dark:ring-[2px] dark:ring-orange-600;
+	}
+	.variant-outline-filled-orange-600 {
+		@apply bg-orange-600 text-black ring-[2px] ring-orange-400 dark:bg-orange-400 dark:text-black dark:ring-[2px] dark:ring-orange-600;
+	}
+	.variant-ringed-orange-600 {
+		@apply bg-transparent ring-[1px] ring-orange-600 dark:bg-transparent dark:ring-[1px] dark:ring-orange-400;
+	}
+	.variant-ghost-orange-600 {
+		@apply bg-orange-600/20 ring-[2px] ring-orange-600 dark:bg-orange-400/20 dark:ring-[2px] dark:ring-orange-400;
+	}
+	.variant-glass-orange-600 {
+		@apply bg-orange-600/40 text-orange-950 backdrop-blur-lg dark:bg-orange-400/40 dark:text-orange-900;
+	}
+	.variant-seethrough-orange-600 {
+		@apply bg-orange-600/40 text-black dark:bg-orange-400/40 dark:text-black;
+	}
+
+	.variant-filled-orange-700 {
+		@apply bg-orange-700 text-black dark:bg-orange-300 dark:text-black;
+	}
+	.variant-soft-orange-700 {
+		@apply bg-orange-700 text-orange-950 dark:bg-orange-300 dark:text-orange-800;
+	}
+	.variant-outline-only-orange-700 {
+		@apply ring-[2px] ring-orange-700 dark:ring-[2px] dark:ring-orange-300;
+	}
+	.variant-outline-soft-orange-700 {
+		@apply bg-orange-700 text-orange-950 ring-[2px] ring-orange-500 dark:bg-orange-300 dark:text-orange-800 dark:ring-[2px] dark:ring-orange-500;
+	}
+	.variant-outline-filled-orange-700 {
+		@apply bg-orange-700 text-black ring-[2px] ring-orange-500 dark:bg-orange-300 dark:text-black dark:ring-[2px] dark:ring-orange-500;
+	}
+	.variant-ringed-orange-700 {
+		@apply bg-transparent ring-[1px] ring-orange-700 dark:bg-transparent dark:ring-[1px] dark:ring-orange-300;
+	}
+	.variant-ghost-orange-700 {
+		@apply bg-orange-700/20 ring-[2px] ring-orange-700 dark:bg-orange-300/20 dark:ring-[2px] dark:ring-orange-300;
+	}
+	.variant-glass-orange-700 {
+		@apply bg-orange-700/40 text-orange-950 backdrop-blur-lg dark:bg-orange-300/40 dark:text-orange-800;
+	}
+	.variant-seethrough-orange-700 {
+		@apply bg-orange-700/40 text-black dark:bg-orange-300/40 dark:text-black;
+	}
+
+	.variant-filled-orange-800 {
+		@apply bg-orange-800 text-white dark:bg-orange-200 dark:text-black;
+	}
+	.variant-soft-orange-800 {
+		@apply bg-orange-800 text-orange-300 dark:bg-orange-200 dark:text-orange-700;
+	}
+	.variant-outline-only-orange-800 {
+		@apply ring-[2px] ring-orange-800 dark:ring-[2px] dark:ring-orange-200;
+	}
+	.variant-outline-soft-orange-800 {
+		@apply bg-orange-800 text-orange-300 ring-[2px] ring-orange-600 dark:bg-orange-200 dark:text-orange-700 dark:ring-[2px] dark:ring-orange-400;
+	}
+	.variant-outline-filled-orange-800 {
+		@apply bg-orange-800 text-white ring-[2px] ring-orange-600 dark:bg-orange-200 dark:text-black dark:ring-[2px] dark:ring-orange-400;
+	}
+	.variant-ringed-orange-800 {
+		@apply bg-transparent ring-[1px] ring-orange-800 dark:bg-transparent dark:ring-[1px] dark:ring-orange-200;
+	}
+	.variant-ghost-orange-800 {
+		@apply bg-orange-800/20 ring-[2px] ring-orange-800 dark:bg-orange-200/20 dark:ring-[2px] dark:ring-orange-200;
+	}
+	.variant-glass-orange-800 {
+		@apply bg-orange-800/40 text-orange-300 backdrop-blur-lg dark:bg-orange-200/40 dark:text-orange-700;
+	}
+	.variant-seethrough-orange-800 {
+		@apply bg-orange-800/40 text-white dark:bg-orange-200/40 dark:text-black;
+	}
+
+	.variant-filled-orange-900 {
+		@apply bg-orange-900 text-white dark:bg-orange-100 dark:text-black;
+	}
+	.variant-soft-orange-900 {
+		@apply bg-orange-900 text-orange-400 dark:bg-orange-100 dark:text-orange-600;
+	}
+	.variant-outline-only-orange-900 {
+		@apply ring-[2px] ring-orange-900 dark:ring-[2px] dark:ring-orange-100;
+	}
+	.variant-outline-soft-orange-900 {
+		@apply bg-orange-900 text-orange-400 ring-[2px] ring-orange-700 dark:bg-orange-100 dark:text-orange-600 dark:ring-[2px] dark:ring-orange-300;
+	}
+	.variant-outline-filled-orange-900 {
+		@apply bg-orange-900 text-white ring-[2px] ring-orange-700 dark:bg-orange-100 dark:text-black dark:ring-[2px] dark:ring-orange-300;
+	}
+	.variant-ringed-orange-900 {
+		@apply bg-transparent ring-[1px] ring-orange-900 dark:bg-transparent dark:ring-[1px] dark:ring-orange-100;
+	}
+	.variant-ghost-orange-900 {
+		@apply bg-orange-900/20 ring-[2px] ring-orange-900 dark:bg-orange-100/20 dark:ring-[2px] dark:ring-orange-100;
+	}
+	.variant-glass-orange-900 {
+		@apply bg-orange-900/40 text-orange-400 backdrop-blur-lg dark:bg-orange-100/40 dark:text-orange-600;
+	}
+	.variant-seethrough-orange-900 {
+		@apply bg-orange-900/40 text-white dark:bg-orange-100/40 dark:text-black;
+	}
+
+	.variant-filled-orange-950 {
+		@apply bg-orange-950 text-white dark:bg-orange-50 dark:text-black;
+	}
+	.variant-soft-orange-950 {
+		@apply bg-orange-950 text-orange-500 dark:bg-orange-50 dark:text-orange-500;
+	}
+	.variant-outline-only-orange-950 {
+		@apply ring-[2px] ring-orange-950 dark:ring-[2px] dark:ring-orange-50;
+	}
+	.variant-outline-soft-orange-950 {
+		@apply bg-orange-950 text-orange-500 ring-[2px] ring-orange-800 dark:bg-orange-50 dark:text-orange-500 dark:ring-[2px] dark:ring-orange-200;
+	}
+	.variant-outline-filled-orange-950 {
+		@apply bg-orange-950 text-white ring-[2px] ring-orange-800 dark:bg-orange-50 dark:text-black dark:ring-[2px] dark:ring-orange-200;
+	}
+	.variant-ringed-orange-950 {
+		@apply bg-transparent ring-[1px] ring-orange-950 dark:bg-transparent dark:ring-[1px] dark:ring-orange-50;
+	}
+	.variant-ghost-orange-950 {
+		@apply bg-orange-950/20 ring-[2px] ring-orange-950 dark:bg-orange-50/20 dark:ring-[2px] dark:ring-orange-50;
+	}
+	.variant-glass-orange-950 {
+		@apply bg-orange-950/40 text-orange-500 backdrop-blur-lg dark:bg-orange-50/40 dark:text-orange-500;
+	}
+	.variant-seethrough-orange-950 {
+		@apply bg-orange-950/40 text-white dark:bg-orange-50/40 dark:text-black;
+	}
+
+	/* purple */
+
+	.variant-filled-purple-50 {
+		@apply bg-purple-50 text-black dark:bg-purple-950 dark:text-white;
+	}
+	.variant-soft-purple-50 {
+		@apply bg-purple-50 text-purple-500 dark:bg-purple-950 dark:text-purple-500;
+	}
+	.variant-outline-only-purple-50 {
+		@apply ring-[2px] ring-purple-50 dark:ring-[2px] dark:ring-purple-950;
+	}
+	.variant-outline-soft-purple-50 {
+		@apply bg-purple-50 text-purple-500 ring-[2px] ring-purple-200 dark:bg-purple-950 dark:text-purple-500 dark:ring-[2px] dark:ring-purple-800;
+	}
+	.variant-outline-filled-purple-50 {
+		@apply bg-purple-50 text-black ring-[2px] ring-purple-200 dark:bg-purple-950 dark:text-white dark:ring-[2px] dark:ring-purple-800;
+	}
+	.variant-ringed-purple-50 {
+		@apply bg-transparent ring-[1px] ring-purple-50 dark:bg-transparent dark:ring-[1px] dark:ring-purple-950;
+	}
+	.variant-ghost-purple-50 {
+		@apply bg-purple-50/20 ring-[2px] ring-purple-50 dark:bg-purple-950/20 dark:ring-[2px] dark:ring-purple-950;
+	}
+	.variant-glass-purple-50 {
+		@apply bg-purple-50/40 text-purple-500 backdrop-blur-lg dark:bg-purple-950/40 dark:text-purple-500;
+	}
+	.variant-seethrough-purple-50 {
+		@apply bg-purple-50/40 text-black dark:bg-purple-950/40 dark:text-white;
+	}
+
+	.variant-filled-purple-100 {
+		@apply bg-purple-100 text-black dark:bg-purple-900 dark:text-white;
+	}
+	.variant-soft-purple-100 {
+		@apply bg-purple-100 text-purple-600 dark:bg-purple-900 dark:text-purple-400;
+	}
+	.variant-outline-only-purple-100 {
+		@apply ring-[2px] ring-purple-100 dark:ring-[2px] dark:ring-purple-900;
+	}
+	.variant-outline-soft-purple-100 {
+		@apply bg-purple-100 text-purple-600 ring-[2px] ring-purple-300 dark:bg-purple-900 dark:text-purple-400 dark:ring-[2px] dark:ring-purple-700;
+	}
+	.variant-outline-filled-purple-100 {
+		@apply bg-purple-100 text-black ring-[2px] ring-purple-300 dark:bg-purple-900 dark:text-white dark:ring-[2px] dark:ring-purple-700;
+	}
+	.variant-ringed-purple-100 {
+		@apply bg-transparent ring-[1px] ring-purple-100 dark:bg-transparent dark:ring-[1px] dark:ring-purple-900;
+	}
+	.variant-ghost-purple-100 {
+		@apply bg-purple-100/20 ring-[2px] ring-purple-100 dark:bg-purple-900/20 dark:ring-[2px] dark:ring-purple-900;
+	}
+	.variant-glass-purple-100 {
+		@apply bg-purple-100/40 text-purple-600 backdrop-blur-lg dark:bg-purple-900/40 dark:text-purple-400;
+	}
+	.variant-seethrough-purple-100 {
+		@apply bg-purple-100/40 text-black dark:bg-purple-900/40 dark:text-white;
+	}
+
+	.variant-filled-purple-200 {
+		@apply bg-purple-200 text-black dark:bg-purple-800 dark:text-white;
+	}
+	.variant-soft-purple-200 {
+		@apply bg-purple-200 text-purple-700 dark:bg-purple-800 dark:text-purple-300;
+	}
+	.variant-outline-only-purple-200 {
+		@apply ring-[2px] ring-purple-200 dark:ring-[2px] dark:ring-purple-800;
+	}
+	.variant-outline-soft-purple-200 {
+		@apply bg-purple-200 text-purple-700 ring-[2px] ring-purple-400 dark:bg-purple-800 dark:text-purple-300 dark:ring-[2px] dark:ring-purple-600;
+	}
+	.variant-outline-filled-purple-200 {
+		@apply bg-purple-200 text-black ring-[2px] ring-purple-400 dark:bg-purple-800 dark:text-white dark:ring-[2px] dark:ring-purple-600;
+	}
+	.variant-ringed-purple-200 {
+		@apply bg-transparent ring-[1px] ring-purple-200 dark:bg-transparent dark:ring-[1px] dark:ring-purple-800;
+	}
+	.variant-ghost-purple-200 {
+		@apply bg-purple-200/20 ring-[2px] ring-purple-200 dark:bg-purple-800/20 dark:ring-[2px] dark:ring-purple-800;
+	}
+	.variant-glass-purple-200 {
+		@apply bg-purple-200/40 text-purple-700 backdrop-blur-lg dark:bg-purple-800/40 dark:text-purple-300;
+	}
+	.variant-seethrough-purple-200 {
+		@apply bg-purple-200/40 text-black dark:bg-purple-800/40 dark:text-white;
+	}
+
+	.variant-filled-purple-300 {
+		@apply bg-purple-300 text-white dark:bg-purple-700 dark:text-white;
+	}
+	.variant-soft-purple-300 {
+		@apply bg-purple-300 text-purple-50 dark:bg-purple-700 dark:text-purple-200;
+	}
+	.variant-outline-only-purple-300 {
+		@apply ring-[2px] ring-purple-300 dark:ring-[2px] dark:ring-purple-700;
+	}
+	.variant-outline-soft-purple-300 {
+		@apply bg-purple-300 text-purple-50 ring-[2px] ring-purple-500 dark:bg-purple-700 dark:text-purple-200 dark:ring-[2px] dark:ring-purple-500;
+	}
+	.variant-outline-filled-purple-300 {
+		@apply bg-purple-300 text-white ring-[2px] ring-purple-500 dark:bg-purple-700 dark:text-white dark:ring-[2px] dark:ring-purple-500;
+	}
+	.variant-ringed-purple-300 {
+		@apply bg-transparent ring-[1px] ring-purple-300 dark:bg-transparent dark:ring-[1px] dark:ring-purple-700;
+	}
+	.variant-ghost-purple-300 {
+		@apply bg-purple-300/20 ring-[2px] ring-purple-300 dark:bg-purple-700/20 dark:ring-[2px] dark:ring-purple-700;
+	}
+	.variant-glass-purple-300 {
+		@apply bg-purple-300/40 text-purple-50 backdrop-blur-lg dark:bg-purple-700/40 dark:text-purple-200;
+	}
+	.variant-seethrough-purple-300 {
+		@apply bg-purple-300/40 text-white dark:bg-purple-700/40 dark:text-white;
+	}
+
+	.variant-filled-purple-400 {
+		@apply bg-purple-400 text-white dark:bg-purple-600 dark:text-white;
+	}
+	.variant-soft-purple-400 {
+		@apply bg-purple-400 text-purple-50 dark:bg-purple-600 dark:text-purple-100;
+	}
+	.variant-outline-only-purple-400 {
+		@apply ring-[2px] ring-purple-400 dark:ring-[2px] dark:ring-purple-600;
+	}
+	.variant-outline-soft-purple-400 {
+		@apply bg-purple-400 text-purple-50 ring-[2px] ring-purple-600 dark:bg-purple-600 dark:text-purple-100 dark:ring-[2px] dark:ring-purple-400;
+	}
+	.variant-outline-filled-purple-400 {
+		@apply bg-purple-400 text-white ring-[2px] ring-purple-600 dark:bg-purple-600 dark:text-white dark:ring-[2px] dark:ring-purple-400;
+	}
+	.variant-ringed-purple-400 {
+		@apply bg-transparent ring-[1px] ring-purple-400 dark:bg-transparent dark:ring-[1px] dark:ring-purple-600;
+	}
+	.variant-ghost-purple-400 {
+		@apply bg-purple-400/20 ring-[2px] ring-purple-400 dark:bg-purple-600/20 dark:ring-[2px] dark:ring-purple-600;
+	}
+	.variant-glass-purple-400 {
+		@apply bg-purple-400/40 text-purple-50 backdrop-blur-lg dark:bg-purple-600/40 dark:text-purple-100;
+	}
+	.variant-seethrough-purple-400 {
+		@apply bg-purple-400/40 text-white dark:bg-purple-600/40 dark:text-white;
+	}
+
+	.variant-filled-purple-500 {
+		@apply bg-purple-500 text-white dark:bg-purple-500 dark:text-white;
+	}
+	.variant-soft-purple-500 {
+		@apply bg-purple-500 text-purple-50 dark:bg-purple-500 dark:text-purple-50;
+	}
+	.variant-outline-only-purple-500 {
+		@apply ring-[2px] ring-purple-500 dark:ring-[2px] dark:ring-purple-500;
+	}
+	.variant-outline-soft-purple-500 {
+		@apply bg-purple-500 text-purple-50 ring-[2px] ring-purple-300 dark:bg-purple-500 dark:text-purple-50 dark:ring-[2px] dark:ring-purple-300;
+	}
+	.variant-outline-filled-purple-500 {
+		@apply bg-purple-500 text-white ring-[2px] ring-purple-300 dark:bg-purple-500 dark:text-white dark:ring-[2px] dark:ring-purple-300;
+	}
+	.variant-ringed-purple-500 {
+		@apply bg-transparent ring-[1px] ring-purple-500 dark:bg-transparent dark:ring-[1px] dark:ring-purple-500;
+	}
+	.variant-ghost-purple-500 {
+		@apply bg-purple-500/20 ring-[2px] ring-purple-500 dark:bg-purple-500/20 dark:ring-[2px] dark:ring-purple-500;
+	}
+	.variant-glass-purple-500 {
+		@apply bg-purple-500/40 text-purple-50 backdrop-blur-lg dark:bg-purple-500/40 dark:text-purple-50;
+	}
+	.variant-seethrough-purple-500 {
+		@apply bg-purple-500/40 text-white dark:bg-purple-500/40 dark:text-white;
+	}
+
+	.variant-filled-purple-600 {
+		@apply bg-purple-600 text-white dark:bg-purple-400 dark:text-white;
+	}
+	.variant-soft-purple-600 {
+		@apply bg-purple-600 text-purple-100 dark:bg-purple-400 dark:text-purple-50;
+	}
+	.variant-outline-only-purple-600 {
+		@apply ring-[2px] ring-purple-600 dark:ring-[2px] dark:ring-purple-400;
+	}
+	.variant-outline-soft-purple-600 {
+		@apply bg-purple-600 text-purple-100 ring-[2px] ring-purple-400 dark:bg-purple-400 dark:text-purple-50 dark:ring-[2px] dark:ring-purple-600;
+	}
+	.variant-outline-filled-purple-600 {
+		@apply bg-purple-600 text-white ring-[2px] ring-purple-400 dark:bg-purple-400 dark:text-white dark:ring-[2px] dark:ring-purple-600;
+	}
+	.variant-ringed-purple-600 {
+		@apply bg-transparent ring-[1px] ring-purple-600 dark:bg-transparent dark:ring-[1px] dark:ring-purple-400;
+	}
+	.variant-ghost-purple-600 {
+		@apply bg-purple-600/20 ring-[2px] ring-purple-600 dark:bg-purple-400/20 dark:ring-[2px] dark:ring-purple-400;
+	}
+	.variant-glass-purple-600 {
+		@apply bg-purple-600/40 text-purple-100 backdrop-blur-lg dark:bg-purple-400/40 dark:text-purple-50;
+	}
+	.variant-seethrough-purple-600 {
+		@apply bg-purple-600/40 text-white dark:bg-purple-400/40 dark:text-white;
+	}
+
+	.variant-filled-purple-700 {
+		@apply bg-purple-700 text-white dark:bg-purple-300 dark:text-white;
+	}
+	.variant-soft-purple-700 {
+		@apply bg-purple-700 text-purple-200 dark:bg-purple-300 dark:text-purple-50;
+	}
+	.variant-outline-only-purple-700 {
+		@apply ring-[2px] ring-purple-700 dark:ring-[2px] dark:ring-purple-300;
+	}
+	.variant-outline-soft-purple-700 {
+		@apply bg-purple-700 text-purple-200 ring-[2px] ring-purple-500 dark:bg-purple-300 dark:text-purple-50 dark:ring-[2px] dark:ring-purple-500;
+	}
+	.variant-outline-filled-purple-700 {
+		@apply bg-purple-700 text-white ring-[2px] ring-purple-500 dark:bg-purple-300 dark:text-white dark:ring-[2px] dark:ring-purple-500;
+	}
+	.variant-ringed-purple-700 {
+		@apply bg-transparent ring-[1px] ring-purple-700 dark:bg-transparent dark:ring-[1px] dark:ring-purple-300;
+	}
+	.variant-ghost-purple-700 {
+		@apply bg-purple-700/20 ring-[2px] ring-purple-700 dark:bg-purple-300/20 dark:ring-[2px] dark:ring-purple-300;
+	}
+	.variant-glass-purple-700 {
+		@apply bg-purple-700/40 text-purple-200 backdrop-blur-lg dark:bg-purple-300/40 dark:text-purple-50;
+	}
+	.variant-seethrough-purple-700 {
+		@apply bg-purple-700/40 text-white dark:bg-purple-300/40 dark:text-white;
+	}
+
+	.variant-filled-purple-800 {
+		@apply bg-purple-800 text-white dark:bg-purple-200 dark:text-black;
+	}
+	.variant-soft-purple-800 {
+		@apply bg-purple-800 text-purple-300 dark:bg-purple-200 dark:text-purple-700;
+	}
+	.variant-outline-only-purple-800 {
+		@apply ring-[2px] ring-purple-800 dark:ring-[2px] dark:ring-purple-200;
+	}
+	.variant-outline-soft-purple-800 {
+		@apply bg-purple-800 text-purple-300 ring-[2px] ring-purple-600 dark:bg-purple-200 dark:text-purple-700 dark:ring-[2px] dark:ring-purple-400;
+	}
+	.variant-outline-filled-purple-800 {
+		@apply bg-purple-800 text-white ring-[2px] ring-purple-600 dark:bg-purple-200 dark:text-black dark:ring-[2px] dark:ring-purple-400;
+	}
+	.variant-ringed-purple-800 {
+		@apply bg-transparent ring-[1px] ring-purple-800 dark:bg-transparent dark:ring-[1px] dark:ring-purple-200;
+	}
+	.variant-ghost-purple-800 {
+		@apply bg-purple-800/20 ring-[2px] ring-purple-800 dark:bg-purple-200/20 dark:ring-[2px] dark:ring-purple-200;
+	}
+	.variant-glass-purple-800 {
+		@apply bg-purple-800/40 text-purple-300 backdrop-blur-lg dark:bg-purple-200/40 dark:text-purple-700;
+	}
+	.variant-seethrough-purple-800 {
+		@apply bg-purple-800/40 text-white dark:bg-purple-200/40 dark:text-black;
+	}
+
+	.variant-filled-purple-900 {
+		@apply bg-purple-900 text-white dark:bg-purple-100 dark:text-black;
+	}
+	.variant-soft-purple-900 {
+		@apply bg-purple-900 text-purple-400 dark:bg-purple-100 dark:text-purple-600;
+	}
+	.variant-outline-only-purple-900 {
+		@apply ring-[2px] ring-purple-900 dark:ring-[2px] dark:ring-purple-100;
+	}
+	.variant-outline-soft-purple-900 {
+		@apply bg-purple-900 text-purple-400 ring-[2px] ring-purple-700 dark:bg-purple-100 dark:text-purple-600 dark:ring-[2px] dark:ring-purple-300;
+	}
+	.variant-outline-filled-purple-900 {
+		@apply bg-purple-900 text-white ring-[2px] ring-purple-700 dark:bg-purple-100 dark:text-black dark:ring-[2px] dark:ring-purple-300;
+	}
+	.variant-ringed-purple-900 {
+		@apply bg-transparent ring-[1px] ring-purple-900 dark:bg-transparent dark:ring-[1px] dark:ring-purple-100;
+	}
+	.variant-ghost-purple-900 {
+		@apply bg-purple-900/20 ring-[2px] ring-purple-900 dark:bg-purple-100/20 dark:ring-[2px] dark:ring-purple-100;
+	}
+	.variant-glass-purple-900 {
+		@apply bg-purple-900/40 text-purple-400 backdrop-blur-lg dark:bg-purple-100/40 dark:text-purple-600;
+	}
+	.variant-seethrough-purple-900 {
+		@apply bg-purple-900/40 text-white dark:bg-purple-100/40 dark:text-black;
+	}
+
+	.variant-filled-purple-950 {
+		@apply bg-purple-950 text-white dark:bg-purple-50 dark:text-black;
+	}
+	.variant-soft-purple-950 {
+		@apply bg-purple-950 text-purple-500 dark:bg-purple-50 dark:text-purple-500;
+	}
+	.variant-outline-only-purple-950 {
+		@apply ring-[2px] ring-purple-950 dark:ring-[2px] dark:ring-purple-50;
+	}
+	.variant-outline-soft-purple-950 {
+		@apply bg-purple-950 text-purple-500 ring-[2px] ring-purple-800 dark:bg-purple-50 dark:text-purple-500 dark:ring-[2px] dark:ring-purple-200;
+	}
+	.variant-outline-filled-purple-950 {
+		@apply bg-purple-950 text-white ring-[2px] ring-purple-800 dark:bg-purple-50 dark:text-black dark:ring-[2px] dark:ring-purple-200;
+	}
+	.variant-ringed-purple-950 {
+		@apply bg-transparent ring-[1px] ring-purple-950 dark:bg-transparent dark:ring-[1px] dark:ring-purple-50;
+	}
+	.variant-ghost-purple-950 {
+		@apply bg-purple-950/20 ring-[2px] ring-purple-950 dark:bg-purple-50/20 dark:ring-[2px] dark:ring-purple-50;
+	}
+	.variant-glass-purple-950 {
+		@apply bg-purple-950/40 text-purple-500 backdrop-blur-lg dark:bg-purple-50/40 dark:text-purple-500;
+	}
+	.variant-seethrough-purple-950 {
+		@apply bg-purple-950/40 text-white dark:bg-purple-50/40 dark:text-black;
+	}
+
+	/* teal */
+
+	.variant-filled-teal-50 {
+		@apply bg-teal-50 text-black dark:bg-teal-950 dark:text-white;
+	}
+	.variant-soft-teal-50 {
+		@apply bg-teal-50 text-teal-500 dark:bg-teal-950 dark:text-teal-500;
+	}
+	.variant-outline-only-teal-50 {
+		@apply ring-[2px] ring-teal-50 dark:ring-[2px] dark:ring-teal-950;
+	}
+	.variant-outline-soft-teal-50 {
+		@apply bg-teal-50 text-teal-500 ring-[2px] ring-teal-200 dark:bg-teal-950 dark:text-teal-500 dark:ring-[2px] dark:ring-teal-800;
+	}
+	.variant-outline-filled-teal-50 {
+		@apply bg-teal-50 text-black ring-[2px] ring-teal-200 dark:bg-teal-950 dark:text-white dark:ring-[2px] dark:ring-teal-800;
+	}
+	.variant-ringed-teal-50 {
+		@apply bg-transparent ring-[1px] ring-teal-50 dark:bg-transparent dark:ring-[1px] dark:ring-teal-950;
+	}
+	.variant-ghost-teal-50 {
+		@apply bg-teal-50/20 ring-[2px] ring-teal-50 dark:bg-teal-950/20 dark:ring-[2px] dark:ring-teal-950;
+	}
+	.variant-glass-teal-50 {
+		@apply bg-teal-50/40 text-teal-500 backdrop-blur-lg dark:bg-teal-950/40 dark:text-teal-500;
+	}
+	.variant-seethrough-teal-50 {
+		@apply bg-teal-50/40 text-black dark:bg-teal-950/40 dark:text-white;
+	}
+
+	.variant-filled-teal-100 {
+		@apply bg-teal-100 text-black dark:bg-teal-900 dark:text-white;
+	}
+	.variant-soft-teal-100 {
+		@apply bg-teal-100 text-teal-600 dark:bg-teal-900 dark:text-teal-400;
+	}
+	.variant-outline-only-teal-100 {
+		@apply ring-[2px] ring-teal-100 dark:ring-[2px] dark:ring-teal-900;
+	}
+	.variant-outline-soft-teal-100 {
+		@apply bg-teal-100 text-teal-600 ring-[2px] ring-teal-300 dark:bg-teal-900 dark:text-teal-400 dark:ring-[2px] dark:ring-teal-700;
+	}
+	.variant-outline-filled-teal-100 {
+		@apply bg-teal-100 text-black ring-[2px] ring-teal-300 dark:bg-teal-900 dark:text-white dark:ring-[2px] dark:ring-teal-700;
+	}
+	.variant-ringed-teal-100 {
+		@apply bg-transparent ring-[1px] ring-teal-100 dark:bg-transparent dark:ring-[1px] dark:ring-teal-900;
+	}
+	.variant-ghost-teal-100 {
+		@apply bg-teal-100/20 ring-[2px] ring-teal-100 dark:bg-teal-900/20 dark:ring-[2px] dark:ring-teal-900;
+	}
+	.variant-glass-teal-100 {
+		@apply bg-teal-100/40 text-teal-600 backdrop-blur-lg dark:bg-teal-900/40 dark:text-teal-400;
+	}
+	.variant-seethrough-teal-100 {
+		@apply bg-teal-100/40 text-black dark:bg-teal-900/40 dark:text-white;
+	}
+
+	.variant-filled-teal-200 {
+		@apply bg-teal-200 text-black dark:bg-teal-800 dark:text-white;
+	}
+	.variant-soft-teal-200 {
+		@apply bg-teal-200 text-teal-700 dark:bg-teal-800 dark:text-teal-300;
+	}
+	.variant-outline-only-teal-200 {
+		@apply ring-[2px] ring-teal-200 dark:ring-[2px] dark:ring-teal-800;
+	}
+	.variant-outline-soft-teal-200 {
+		@apply bg-teal-200 text-teal-700 ring-[2px] ring-teal-400 dark:bg-teal-800 dark:text-teal-300 dark:ring-[2px] dark:ring-teal-600;
+	}
+	.variant-outline-filled-teal-200 {
+		@apply bg-teal-200 text-black ring-[2px] ring-teal-400 dark:bg-teal-800 dark:text-white dark:ring-[2px] dark:ring-teal-600;
+	}
+	.variant-ringed-teal-200 {
+		@apply bg-transparent ring-[1px] ring-teal-200 dark:bg-transparent dark:ring-[1px] dark:ring-teal-800;
+	}
+	.variant-ghost-teal-200 {
+		@apply bg-teal-200/20 ring-[2px] ring-teal-200 dark:bg-teal-800/20 dark:ring-[2px] dark:ring-teal-800;
+	}
+	.variant-glass-teal-200 {
+		@apply bg-teal-200/40 text-teal-700 backdrop-blur-lg dark:bg-teal-800/40 dark:text-teal-300;
+	}
+	.variant-seethrough-teal-200 {
+		@apply bg-teal-200/40 text-black dark:bg-teal-800/40 dark:text-white;
+	}
+
+	.variant-filled-teal-300 {
+		@apply bg-teal-300 text-black dark:bg-teal-700 dark:text-white;
+	}
+	.variant-soft-teal-300 {
+		@apply bg-teal-300 text-teal-800 dark:bg-teal-700 dark:text-teal-200;
+	}
+	.variant-outline-only-teal-300 {
+		@apply ring-[2px] ring-teal-300 dark:ring-[2px] dark:ring-teal-700;
+	}
+	.variant-outline-soft-teal-300 {
+		@apply bg-teal-300 text-teal-800 ring-[2px] ring-teal-500 dark:bg-teal-700 dark:text-teal-200 dark:ring-[2px] dark:ring-teal-500;
+	}
+	.variant-outline-filled-teal-300 {
+		@apply bg-teal-300 text-black ring-[2px] ring-teal-500 dark:bg-teal-700 dark:text-white dark:ring-[2px] dark:ring-teal-500;
+	}
+	.variant-ringed-teal-300 {
+		@apply bg-transparent ring-[1px] ring-teal-300 dark:bg-transparent dark:ring-[1px] dark:ring-teal-700;
+	}
+	.variant-ghost-teal-300 {
+		@apply bg-teal-300/20 ring-[2px] ring-teal-300 dark:bg-teal-700/20 dark:ring-[2px] dark:ring-teal-700;
+	}
+	.variant-glass-teal-300 {
+		@apply bg-teal-300/40 text-teal-800 backdrop-blur-lg dark:bg-teal-700/40 dark:text-teal-200;
+	}
+	.variant-seethrough-teal-300 {
+		@apply bg-teal-300/40 text-black dark:bg-teal-700/40 dark:text-white;
+	}
+
+	.variant-filled-teal-400 {
+		@apply bg-teal-400 text-black dark:bg-teal-600 dark:text-white;
+	}
+	.variant-soft-teal-400 {
+		@apply bg-teal-400 text-teal-900 dark:bg-teal-600 dark:text-teal-100;
+	}
+	.variant-outline-only-teal-400 {
+		@apply ring-[2px] ring-teal-400 dark:ring-[2px] dark:ring-teal-600;
+	}
+	.variant-outline-soft-teal-400 {
+		@apply bg-teal-400 text-teal-900 ring-[2px] ring-teal-600 dark:bg-teal-600 dark:text-teal-100 dark:ring-[2px] dark:ring-teal-400;
+	}
+	.variant-outline-filled-teal-400 {
+		@apply bg-teal-400 text-black ring-[2px] ring-teal-600 dark:bg-teal-600 dark:text-white dark:ring-[2px] dark:ring-teal-400;
+	}
+	.variant-ringed-teal-400 {
+		@apply bg-transparent ring-[1px] ring-teal-400 dark:bg-transparent dark:ring-[1px] dark:ring-teal-600;
+	}
+	.variant-ghost-teal-400 {
+		@apply bg-teal-400/20 ring-[2px] ring-teal-400 dark:bg-teal-600/20 dark:ring-[2px] dark:ring-teal-600;
+	}
+	.variant-glass-teal-400 {
+		@apply bg-teal-400/40 text-teal-900 backdrop-blur-lg dark:bg-teal-600/40 dark:text-teal-100;
+	}
+	.variant-seethrough-teal-400 {
+		@apply bg-teal-400/40 text-black dark:bg-teal-600/40 dark:text-white;
+	}
+
+	.variant-filled-teal-500 {
+		@apply bg-teal-500 text-white dark:bg-teal-500 dark:text-white;
+	}
+	.variant-soft-teal-500 {
+		@apply bg-teal-500 text-teal-50 dark:bg-teal-500 dark:text-teal-50;
+	}
+	.variant-outline-only-teal-500 {
+		@apply ring-[2px] ring-teal-500 dark:ring-[2px] dark:ring-teal-500;
+	}
+	.variant-outline-soft-teal-500 {
+		@apply bg-teal-500 text-teal-50 ring-[2px] ring-teal-300 dark:bg-teal-500 dark:text-teal-50 dark:ring-[2px] dark:ring-teal-300;
+	}
+	.variant-outline-filled-teal-500 {
+		@apply bg-teal-500 text-white ring-[2px] ring-teal-300 dark:bg-teal-500 dark:text-white dark:ring-[2px] dark:ring-teal-300;
+	}
+	.variant-ringed-teal-500 {
+		@apply bg-transparent ring-[1px] ring-teal-500 dark:bg-transparent dark:ring-[1px] dark:ring-teal-500;
+	}
+	.variant-ghost-teal-500 {
+		@apply bg-teal-500/20 ring-[2px] ring-teal-500 dark:bg-teal-500/20 dark:ring-[2px] dark:ring-teal-500;
+	}
+	.variant-glass-teal-500 {
+		@apply bg-teal-500/40 text-teal-50 backdrop-blur-lg dark:bg-teal-500/40 dark:text-teal-50;
+	}
+	.variant-seethrough-teal-500 {
+		@apply bg-teal-500/40 text-white dark:bg-teal-500/40 dark:text-white;
+	}
+
+	.variant-filled-teal-600 {
+		@apply bg-teal-600 text-white dark:bg-teal-400 dark:text-black;
+	}
+	.variant-soft-teal-600 {
+		@apply bg-teal-600 text-teal-100 dark:bg-teal-400 dark:text-teal-900;
+	}
+	.variant-outline-only-teal-600 {
+		@apply ring-[2px] ring-teal-600 dark:ring-[2px] dark:ring-teal-400;
+	}
+	.variant-outline-soft-teal-600 {
+		@apply bg-teal-600 text-teal-100 ring-[2px] ring-teal-400 dark:bg-teal-400 dark:text-teal-900 dark:ring-[2px] dark:ring-teal-600;
+	}
+	.variant-outline-filled-teal-600 {
+		@apply bg-teal-600 text-white ring-[2px] ring-teal-400 dark:bg-teal-400 dark:text-black dark:ring-[2px] dark:ring-teal-600;
+	}
+	.variant-ringed-teal-600 {
+		@apply bg-transparent ring-[1px] ring-teal-600 dark:bg-transparent dark:ring-[1px] dark:ring-teal-400;
+	}
+	.variant-ghost-teal-600 {
+		@apply bg-teal-600/20 ring-[2px] ring-teal-600 dark:bg-teal-400/20 dark:ring-[2px] dark:ring-teal-400;
+	}
+	.variant-glass-teal-600 {
+		@apply bg-teal-600/40 text-teal-100 backdrop-blur-lg dark:bg-teal-400/40 dark:text-teal-900;
+	}
+	.variant-seethrough-teal-600 {
+		@apply bg-teal-600/40 text-white dark:bg-teal-400/40 dark:text-black;
+	}
+
+	.variant-filled-teal-700 {
+		@apply bg-teal-700 text-white dark:bg-teal-300 dark:text-black;
+	}
+	.variant-soft-teal-700 {
+		@apply bg-teal-700 text-teal-200 dark:bg-teal-300 dark:text-teal-800;
+	}
+	.variant-outline-only-teal-700 {
+		@apply ring-[2px] ring-teal-700 dark:ring-[2px] dark:ring-teal-300;
+	}
+	.variant-outline-soft-teal-700 {
+		@apply bg-teal-700 text-teal-200 ring-[2px] ring-teal-500 dark:bg-teal-300 dark:text-teal-800 dark:ring-[2px] dark:ring-teal-500;
+	}
+	.variant-outline-filled-teal-700 {
+		@apply bg-teal-700 text-white ring-[2px] ring-teal-500 dark:bg-teal-300 dark:text-black dark:ring-[2px] dark:ring-teal-500;
+	}
+	.variant-ringed-teal-700 {
+		@apply bg-transparent ring-[1px] ring-teal-700 dark:bg-transparent dark:ring-[1px] dark:ring-teal-300;
+	}
+	.variant-ghost-teal-700 {
+		@apply bg-teal-700/20 ring-[2px] ring-teal-700 dark:bg-teal-300/20 dark:ring-[2px] dark:ring-teal-300;
+	}
+	.variant-glass-teal-700 {
+		@apply bg-teal-700/40 text-teal-200 backdrop-blur-lg dark:bg-teal-300/40 dark:text-teal-800;
+	}
+	.variant-seethrough-teal-700 {
+		@apply bg-teal-700/40 text-white dark:bg-teal-300/40 dark:text-black;
+	}
+
+	.variant-filled-teal-800 {
+		@apply bg-teal-800 text-white dark:bg-teal-200 dark:text-black;
+	}
+	.variant-soft-teal-800 {
+		@apply bg-teal-800 text-teal-300 dark:bg-teal-200 dark:text-teal-700;
+	}
+	.variant-outline-only-teal-800 {
+		@apply ring-[2px] ring-teal-800 dark:ring-[2px] dark:ring-teal-200;
+	}
+	.variant-outline-soft-teal-800 {
+		@apply bg-teal-800 text-teal-300 ring-[2px] ring-teal-600 dark:bg-teal-200 dark:text-teal-700 dark:ring-[2px] dark:ring-teal-400;
+	}
+	.variant-outline-filled-teal-800 {
+		@apply bg-teal-800 text-white ring-[2px] ring-teal-600 dark:bg-teal-200 dark:text-black dark:ring-[2px] dark:ring-teal-400;
+	}
+	.variant-ringed-teal-800 {
+		@apply bg-transparent ring-[1px] ring-teal-800 dark:bg-transparent dark:ring-[1px] dark:ring-teal-200;
+	}
+	.variant-ghost-teal-800 {
+		@apply bg-teal-800/20 ring-[2px] ring-teal-800 dark:bg-teal-200/20 dark:ring-[2px] dark:ring-teal-200;
+	}
+	.variant-glass-teal-800 {
+		@apply bg-teal-800/40 text-teal-300 backdrop-blur-lg dark:bg-teal-200/40 dark:text-teal-700;
+	}
+	.variant-seethrough-teal-800 {
+		@apply bg-teal-800/40 text-white dark:bg-teal-200/40 dark:text-black;
+	}
+
+	.variant-filled-teal-900 {
+		@apply bg-teal-900 text-white dark:bg-teal-100 dark:text-black;
+	}
+	.variant-soft-teal-900 {
+		@apply bg-teal-900 text-teal-400 dark:bg-teal-100 dark:text-teal-600;
+	}
+	.variant-outline-only-teal-900 {
+		@apply ring-[2px] ring-teal-900 dark:ring-[2px] dark:ring-teal-100;
+	}
+	.variant-outline-soft-teal-900 {
+		@apply bg-teal-900 text-teal-400 ring-[2px] ring-teal-700 dark:bg-teal-100 dark:text-teal-600 dark:ring-[2px] dark:ring-teal-300;
+	}
+	.variant-outline-filled-teal-900 {
+		@apply bg-teal-900 text-white ring-[2px] ring-teal-700 dark:bg-teal-100 dark:text-black dark:ring-[2px] dark:ring-teal-300;
+	}
+	.variant-ringed-teal-900 {
+		@apply bg-transparent ring-[1px] ring-teal-900 dark:bg-transparent dark:ring-[1px] dark:ring-teal-100;
+	}
+	.variant-ghost-teal-900 {
+		@apply bg-teal-900/20 ring-[2px] ring-teal-900 dark:bg-teal-100/20 dark:ring-[2px] dark:ring-teal-100;
+	}
+	.variant-glass-teal-900 {
+		@apply bg-teal-900/40 text-teal-400 backdrop-blur-lg dark:bg-teal-100/40 dark:text-teal-600;
+	}
+	.variant-seethrough-teal-900 {
+		@apply bg-teal-900/40 text-white dark:bg-teal-100/40 dark:text-black;
+	}
+
+	.variant-filled-teal-950 {
+		@apply bg-teal-950 text-white dark:bg-teal-50 dark:text-black;
+	}
+	.variant-soft-teal-950 {
+		@apply bg-teal-950 text-teal-500 dark:bg-teal-50 dark:text-teal-500;
+	}
+	.variant-outline-only-teal-950 {
+		@apply ring-[2px] ring-teal-950 dark:ring-[2px] dark:ring-teal-50;
+	}
+	.variant-outline-soft-teal-950 {
+		@apply bg-teal-950 text-teal-500 ring-[2px] ring-teal-800 dark:bg-teal-50 dark:text-teal-500 dark:ring-[2px] dark:ring-teal-200;
+	}
+	.variant-outline-filled-teal-950 {
+		@apply bg-teal-950 text-white ring-[2px] ring-teal-800 dark:bg-teal-50 dark:text-black dark:ring-[2px] dark:ring-teal-200;
+	}
+	.variant-ringed-teal-950 {
+		@apply bg-transparent ring-[1px] ring-teal-950 dark:bg-transparent dark:ring-[1px] dark:ring-teal-50;
+	}
+	.variant-ghost-teal-950 {
+		@apply bg-teal-950/20 ring-[2px] ring-teal-950 dark:bg-teal-50/20 dark:ring-[2px] dark:ring-teal-50;
+	}
+	.variant-glass-teal-950 {
+		@apply bg-teal-950/40 text-teal-500 backdrop-blur-lg dark:bg-teal-50/40 dark:text-teal-500;
+	}
+	.variant-seethrough-teal-950 {
+		@apply bg-teal-950/40 text-white dark:bg-teal-50/40 dark:text-black;
+	}
+
+	/* slate */
+
+	.variant-filled-slate-50 {
+		@apply bg-slate-50 text-black dark:bg-slate-950 dark:text-white;
+	}
+	.variant-soft-slate-50 {
+		@apply bg-slate-50 text-slate-500 dark:bg-slate-950 dark:text-slate-500;
+	}
+	.variant-outline-only-slate-50 {
+		@apply ring-[2px] ring-slate-50 dark:ring-[2px] dark:ring-slate-950;
+	}
+	.variant-outline-soft-slate-50 {
+		@apply bg-slate-50 text-slate-500 ring-[2px] ring-slate-200 dark:bg-slate-950 dark:text-slate-500 dark:ring-[2px] dark:ring-slate-800;
+	}
+	.variant-outline-filled-slate-50 {
+		@apply bg-slate-50 text-black ring-[2px] ring-slate-200 dark:bg-slate-950 dark:text-white dark:ring-[2px] dark:ring-slate-800;
+	}
+	.variant-ringed-slate-50 {
+		@apply bg-transparent ring-[1px] ring-slate-50 dark:bg-transparent dark:ring-[1px] dark:ring-slate-950;
+	}
+	.variant-ghost-slate-50 {
+		@apply bg-slate-50/20 ring-[2px] ring-slate-50 dark:bg-slate-950/20 dark:ring-[2px] dark:ring-slate-950;
+	}
+	.variant-glass-slate-50 {
+		@apply bg-slate-50/40 text-slate-500 backdrop-blur-lg dark:bg-slate-950/40 dark:text-slate-500;
+	}
+	.variant-seethrough-slate-50 {
+		@apply bg-slate-50/40 text-black dark:bg-slate-950/40 dark:text-white;
+	}
+
+	.variant-filled-slate-100 {
+		@apply bg-slate-100 text-black dark:bg-slate-900 dark:text-white;
+	}
+	.variant-soft-slate-100 {
+		@apply bg-slate-100 text-slate-600 dark:bg-slate-900 dark:text-slate-400;
+	}
+	.variant-outline-only-slate-100 {
+		@apply ring-[2px] ring-slate-100 dark:ring-[2px] dark:ring-slate-900;
+	}
+	.variant-outline-soft-slate-100 {
+		@apply bg-slate-100 text-slate-600 ring-[2px] ring-slate-300 dark:bg-slate-900 dark:text-slate-400 dark:ring-[2px] dark:ring-slate-700;
+	}
+	.variant-outline-filled-slate-100 {
+		@apply bg-slate-100 text-black ring-[2px] ring-slate-300 dark:bg-slate-900 dark:text-white dark:ring-[2px] dark:ring-slate-700;
+	}
+	.variant-ringed-slate-100 {
+		@apply bg-transparent ring-[1px] ring-slate-100 dark:bg-transparent dark:ring-[1px] dark:ring-slate-900;
+	}
+	.variant-ghost-slate-100 {
+		@apply bg-slate-100/20 ring-[2px] ring-slate-100 dark:bg-slate-900/20 dark:ring-[2px] dark:ring-slate-900;
+	}
+	.variant-glass-slate-100 {
+		@apply bg-slate-100/40 text-slate-600 backdrop-blur-lg dark:bg-slate-900/40 dark:text-slate-400;
+	}
+	.variant-seethrough-slate-100 {
+		@apply bg-slate-100/40 text-black dark:bg-slate-900/40 dark:text-white;
+	}
+
+	.variant-filled-slate-200 {
+		@apply bg-slate-200 text-black dark:bg-slate-800 dark:text-white;
+	}
+	.variant-soft-slate-200 {
+		@apply bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-300;
+	}
+	.variant-outline-only-slate-200 {
+		@apply ring-[2px] ring-slate-200 dark:ring-[2px] dark:ring-slate-800;
+	}
+	.variant-outline-soft-slate-200 {
+		@apply bg-slate-200 text-slate-700 ring-[2px] ring-slate-400 dark:bg-slate-800 dark:text-slate-300 dark:ring-[2px] dark:ring-slate-600;
+	}
+	.variant-outline-filled-slate-200 {
+		@apply bg-slate-200 text-black ring-[2px] ring-slate-400 dark:bg-slate-800 dark:text-white dark:ring-[2px] dark:ring-slate-600;
+	}
+	.variant-ringed-slate-200 {
+		@apply bg-transparent ring-[1px] ring-slate-200 dark:bg-transparent dark:ring-[1px] dark:ring-slate-800;
+	}
+	.variant-ghost-slate-200 {
+		@apply bg-slate-200/20 ring-[2px] ring-slate-200 dark:bg-slate-800/20 dark:ring-[2px] dark:ring-slate-800;
+	}
+	.variant-glass-slate-200 {
+		@apply bg-slate-200/40 text-slate-700 backdrop-blur-lg dark:bg-slate-800/40 dark:text-slate-300;
+	}
+	.variant-seethrough-slate-200 {
+		@apply bg-slate-200/40 text-black dark:bg-slate-800/40 dark:text-white;
+	}
+
+	.variant-filled-slate-300 {
+		@apply bg-slate-300 text-black dark:bg-slate-700 dark:text-white;
+	}
+	.variant-soft-slate-300 {
+		@apply bg-slate-300 text-slate-800 dark:bg-slate-700 dark:text-slate-200;
+	}
+	.variant-outline-only-slate-300 {
+		@apply ring-[2px] ring-slate-300 dark:ring-[2px] dark:ring-slate-700;
+	}
+	.variant-outline-soft-slate-300 {
+		@apply bg-slate-300 text-slate-800 ring-[2px] ring-slate-500 dark:bg-slate-700 dark:text-slate-200 dark:ring-[2px] dark:ring-slate-500;
+	}
+	.variant-outline-filled-slate-300 {
+		@apply bg-slate-300 text-black ring-[2px] ring-slate-500 dark:bg-slate-700 dark:text-white dark:ring-[2px] dark:ring-slate-500;
+	}
+	.variant-ringed-slate-300 {
+		@apply bg-transparent ring-[1px] ring-slate-300 dark:bg-transparent dark:ring-[1px] dark:ring-slate-700;
+	}
+	.variant-ghost-slate-300 {
+		@apply bg-slate-300/20 ring-[2px] ring-slate-300 dark:bg-slate-700/20 dark:ring-[2px] dark:ring-slate-700;
+	}
+	.variant-glass-slate-300 {
+		@apply bg-slate-300/40 text-slate-800 backdrop-blur-lg dark:bg-slate-700/40 dark:text-slate-200;
+	}
+	.variant-seethrough-slate-300 {
+		@apply bg-slate-300/40 text-black dark:bg-slate-700/40 dark:text-white;
+	}
+
+	.variant-filled-slate-400 {
+		@apply bg-slate-400 text-white dark:bg-slate-600 dark:text-white;
+	}
+	.variant-soft-slate-400 {
+		@apply bg-slate-400 text-slate-50 dark:bg-slate-600 dark:text-slate-100;
+	}
+	.variant-outline-only-slate-400 {
+		@apply ring-[2px] ring-slate-400 dark:ring-[2px] dark:ring-slate-600;
+	}
+	.variant-outline-soft-slate-400 {
+		@apply bg-slate-400 text-slate-50 ring-[2px] ring-slate-600 dark:bg-slate-600 dark:text-slate-100 dark:ring-[2px] dark:ring-slate-400;
+	}
+	.variant-outline-filled-slate-400 {
+		@apply bg-slate-400 text-white ring-[2px] ring-slate-600 dark:bg-slate-600 dark:text-white dark:ring-[2px] dark:ring-slate-400;
+	}
+	.variant-ringed-slate-400 {
+		@apply bg-transparent ring-[1px] ring-slate-400 dark:bg-transparent dark:ring-[1px] dark:ring-slate-600;
+	}
+	.variant-ghost-slate-400 {
+		@apply bg-slate-400/20 ring-[2px] ring-slate-400 dark:bg-slate-600/20 dark:ring-[2px] dark:ring-slate-600;
+	}
+	.variant-glass-slate-400 {
+		@apply bg-slate-400/40 text-slate-50 backdrop-blur-lg dark:bg-slate-600/40 dark:text-slate-100;
+	}
+	.variant-seethrough-slate-400 {
+		@apply bg-slate-400/40 text-white dark:bg-slate-600/40 dark:text-white;
+	}
+
+	.variant-filled-slate-500 {
+		@apply bg-slate-500 text-white dark:bg-slate-500 dark:text-white;
+	}
+	.variant-soft-slate-500 {
+		@apply bg-slate-500 text-slate-50 dark:bg-slate-500 dark:text-slate-50;
+	}
+	.variant-outline-only-slate-500 {
+		@apply ring-[2px] ring-slate-500 dark:ring-[2px] dark:ring-slate-500;
+	}
+	.variant-outline-soft-slate-500 {
+		@apply bg-slate-500 text-slate-50 ring-[2px] ring-slate-300 dark:bg-slate-500 dark:text-slate-50 dark:ring-[2px] dark:ring-slate-300;
+	}
+	.variant-outline-filled-slate-500 {
+		@apply bg-slate-500 text-white ring-[2px] ring-slate-300 dark:bg-slate-500 dark:text-white dark:ring-[2px] dark:ring-slate-300;
+	}
+	.variant-ringed-slate-500 {
+		@apply bg-transparent ring-[1px] ring-slate-500 dark:bg-transparent dark:ring-[1px] dark:ring-slate-500;
+	}
+	.variant-ghost-slate-500 {
+		@apply bg-slate-500/20 ring-[2px] ring-slate-500 dark:bg-slate-500/20 dark:ring-[2px] dark:ring-slate-500;
+	}
+	.variant-glass-slate-500 {
+		@apply bg-slate-500/40 text-slate-50 backdrop-blur-lg dark:bg-slate-500/40 dark:text-slate-50;
+	}
+	.variant-seethrough-slate-500 {
+		@apply bg-slate-500/40 text-white dark:bg-slate-500/40 dark:text-white;
+	}
+
+	.variant-filled-slate-600 {
+		@apply bg-slate-600 text-white dark:bg-slate-400 dark:text-white;
+	}
+	.variant-soft-slate-600 {
+		@apply bg-slate-600 text-slate-100 dark:bg-slate-400 dark:text-slate-50;
+	}
+	.variant-outline-only-slate-600 {
+		@apply ring-[2px] ring-slate-600 dark:ring-[2px] dark:ring-slate-400;
+	}
+	.variant-outline-soft-slate-600 {
+		@apply bg-slate-600 text-slate-100 ring-[2px] ring-slate-400 dark:bg-slate-400 dark:text-slate-50 dark:ring-[2px] dark:ring-slate-600;
+	}
+	.variant-outline-filled-slate-600 {
+		@apply bg-slate-600 text-white ring-[2px] ring-slate-400 dark:bg-slate-400 dark:text-white dark:ring-[2px] dark:ring-slate-600;
+	}
+	.variant-ringed-slate-600 {
+		@apply bg-transparent ring-[1px] ring-slate-600 dark:bg-transparent dark:ring-[1px] dark:ring-slate-400;
+	}
+	.variant-ghost-slate-600 {
+		@apply bg-slate-600/20 ring-[2px] ring-slate-600 dark:bg-slate-400/20 dark:ring-[2px] dark:ring-slate-400;
+	}
+	.variant-glass-slate-600 {
+		@apply bg-slate-600/40 text-slate-100 backdrop-blur-lg dark:bg-slate-400/40 dark:text-slate-50;
+	}
+	.variant-seethrough-slate-600 {
+		@apply bg-slate-600/40 text-white dark:bg-slate-400/40 dark:text-white;
+	}
+
+	.variant-filled-slate-700 {
+		@apply bg-slate-700 text-white dark:bg-slate-300 dark:text-black;
+	}
+	.variant-soft-slate-700 {
+		@apply bg-slate-700 text-slate-200 dark:bg-slate-300 dark:text-slate-800;
+	}
+	.variant-outline-only-slate-700 {
+		@apply ring-[2px] ring-slate-700 dark:ring-[2px] dark:ring-slate-300;
+	}
+	.variant-outline-soft-slate-700 {
+		@apply bg-slate-700 text-slate-200 ring-[2px] ring-slate-500 dark:bg-slate-300 dark:text-slate-800 dark:ring-[2px] dark:ring-slate-500;
+	}
+	.variant-outline-filled-slate-700 {
+		@apply bg-slate-700 text-white ring-[2px] ring-slate-500 dark:bg-slate-300 dark:text-black dark:ring-[2px] dark:ring-slate-500;
+	}
+	.variant-ringed-slate-700 {
+		@apply bg-transparent ring-[1px] ring-slate-700 dark:bg-transparent dark:ring-[1px] dark:ring-slate-300;
+	}
+	.variant-ghost-slate-700 {
+		@apply bg-slate-700/20 ring-[2px] ring-slate-700 dark:bg-slate-300/20 dark:ring-[2px] dark:ring-slate-300;
+	}
+	.variant-glass-slate-700 {
+		@apply bg-slate-700/40 text-slate-200 backdrop-blur-lg dark:bg-slate-300/40 dark:text-slate-800;
+	}
+	.variant-seethrough-slate-700 {
+		@apply bg-slate-700/40 text-white dark:bg-slate-300/40 dark:text-black;
+	}
+
+	.variant-filled-slate-800 {
+		@apply bg-slate-800 text-white dark:bg-slate-200 dark:text-black;
+	}
+	.variant-soft-slate-800 {
+		@apply bg-slate-800 text-slate-300 dark:bg-slate-200 dark:text-slate-700;
+	}
+	.variant-outline-only-slate-800 {
+		@apply ring-[2px] ring-slate-800 dark:ring-[2px] dark:ring-slate-200;
+	}
+	.variant-outline-soft-slate-800 {
+		@apply bg-slate-800 text-slate-300 ring-[2px] ring-slate-600 dark:bg-slate-200 dark:text-slate-700 dark:ring-[2px] dark:ring-slate-400;
+	}
+	.variant-outline-filled-slate-800 {
+		@apply bg-slate-800 text-white ring-[2px] ring-slate-600 dark:bg-slate-200 dark:text-black dark:ring-[2px] dark:ring-slate-400;
+	}
+	.variant-ringed-slate-800 {
+		@apply bg-transparent ring-[1px] ring-slate-800 dark:bg-transparent dark:ring-[1px] dark:ring-slate-200;
+	}
+	.variant-ghost-slate-800 {
+		@apply bg-slate-800/20 ring-[2px] ring-slate-800 dark:bg-slate-200/20 dark:ring-[2px] dark:ring-slate-200;
+	}
+	.variant-glass-slate-800 {
+		@apply bg-slate-800/40 text-slate-300 backdrop-blur-lg dark:bg-slate-200/40 dark:text-slate-700;
+	}
+	.variant-seethrough-slate-800 {
+		@apply bg-slate-800/40 text-white dark:bg-slate-200/40 dark:text-black;
+	}
+
+	.variant-filled-slate-900 {
+		@apply bg-slate-900 text-white dark:bg-slate-100 dark:text-black;
+	}
+	.variant-soft-slate-900 {
+		@apply bg-slate-900 text-slate-400 dark:bg-slate-100 dark:text-slate-600;
+	}
+	.variant-outline-only-slate-900 {
+		@apply ring-[2px] ring-slate-900 dark:ring-[2px] dark:ring-slate-100;
+	}
+	.variant-outline-soft-slate-900 {
+		@apply bg-slate-900 text-slate-400 ring-[2px] ring-slate-700 dark:bg-slate-100 dark:text-slate-600 dark:ring-[2px] dark:ring-slate-300;
+	}
+	.variant-outline-filled-slate-900 {
+		@apply bg-slate-900 text-white ring-[2px] ring-slate-700 dark:bg-slate-100 dark:text-black dark:ring-[2px] dark:ring-slate-300;
+	}
+	.variant-ringed-slate-900 {
+		@apply bg-transparent ring-[1px] ring-slate-900 dark:bg-transparent dark:ring-[1px] dark:ring-slate-100;
+	}
+	.variant-ghost-slate-900 {
+		@apply bg-slate-900/20 ring-[2px] ring-slate-900 dark:bg-slate-100/20 dark:ring-[2px] dark:ring-slate-100;
+	}
+	.variant-glass-slate-900 {
+		@apply bg-slate-900/40 text-slate-400 backdrop-blur-lg dark:bg-slate-100/40 dark:text-slate-600;
+	}
+	.variant-seethrough-slate-900 {
+		@apply bg-slate-900/40 text-white dark:bg-slate-100/40 dark:text-black;
+	}
+
+	.variant-filled-slate-950 {
+		@apply bg-slate-950 text-white dark:bg-slate-50 dark:text-black;
+	}
+	.variant-soft-slate-950 {
+		@apply bg-slate-950 text-slate-500 dark:bg-slate-50 dark:text-slate-500;
+	}
+	.variant-outline-only-slate-950 {
+		@apply ring-[2px] ring-slate-950 dark:ring-[2px] dark:ring-slate-50;
+	}
+	.variant-outline-soft-slate-950 {
+		@apply bg-slate-950 text-slate-500 ring-[2px] ring-slate-800 dark:bg-slate-50 dark:text-slate-500 dark:ring-[2px] dark:ring-slate-200;
+	}
+	.variant-outline-filled-slate-950 {
+		@apply bg-slate-950 text-white ring-[2px] ring-slate-800 dark:bg-slate-50 dark:text-black dark:ring-[2px] dark:ring-slate-200;
+	}
+	.variant-ringed-slate-950 {
+		@apply bg-transparent ring-[1px] ring-slate-950 dark:bg-transparent dark:ring-[1px] dark:ring-slate-50;
+	}
+	.variant-ghost-slate-950 {
+		@apply bg-slate-950/20 ring-[2px] ring-slate-950 dark:bg-slate-50/20 dark:ring-[2px] dark:ring-slate-50;
+	}
+	.variant-glass-slate-950 {
+		@apply bg-slate-950/40 text-slate-500 backdrop-blur-lg dark:bg-slate-50/40 dark:text-slate-500;
+	}
+	.variant-seethrough-slate-950 {
+		@apply bg-slate-950/40 text-white dark:bg-slate-50/40 dark:text-black;
+	}
+
+	/* amber */
+
+	.variant-filled-amber-50 {
+		@apply bg-amber-50 text-black dark:bg-amber-950 dark:text-black;
+	}
+	.variant-soft-amber-50 {
+		@apply bg-amber-50 text-amber-500 dark:bg-amber-950 dark:text-amber-950;
+	}
+	.variant-outline-only-amber-50 {
+		@apply ring-[2px] ring-amber-50 dark:ring-[2px] dark:ring-amber-950;
+	}
+	.variant-outline-soft-amber-50 {
+		@apply bg-amber-50 text-amber-500 ring-[2px] ring-amber-200 dark:bg-amber-950 dark:text-amber-950 dark:ring-[2px] dark:ring-amber-800;
+	}
+	.variant-outline-filled-amber-50 {
+		@apply bg-amber-50 text-black ring-[2px] ring-amber-200 dark:bg-amber-950 dark:text-black dark:ring-[2px] dark:ring-amber-800;
+	}
+	.variant-ringed-amber-50 {
+		@apply bg-transparent ring-[1px] ring-amber-50 dark:bg-transparent dark:ring-[1px] dark:ring-amber-950;
+	}
+	.variant-ghost-amber-50 {
+		@apply bg-amber-50/20 ring-[2px] ring-amber-50 dark:bg-amber-950/20 dark:ring-[2px] dark:ring-amber-950;
+	}
+	.variant-glass-amber-50 {
+		@apply bg-amber-50/40 text-amber-500 backdrop-blur-lg dark:bg-amber-950/40 dark:text-amber-950;
+	}
+	.variant-seethrough-amber-50 {
+		@apply bg-amber-50/40 text-black dark:bg-amber-950/40 dark:text-black;
+	}
+
+	.variant-filled-amber-100 {
+		@apply bg-amber-100 text-black dark:bg-amber-900 dark:text-black;
+	}
+	.variant-soft-amber-100 {
+		@apply bg-amber-100 text-amber-600 dark:bg-amber-900 dark:text-amber-950;
+	}
+	.variant-outline-only-amber-100 {
+		@apply ring-[2px] ring-amber-100 dark:ring-[2px] dark:ring-amber-900;
+	}
+	.variant-outline-soft-amber-100 {
+		@apply bg-amber-100 text-amber-600 ring-[2px] ring-amber-300 dark:bg-amber-900 dark:text-amber-950 dark:ring-[2px] dark:ring-amber-700;
+	}
+	.variant-outline-filled-amber-100 {
+		@apply bg-amber-100 text-black ring-[2px] ring-amber-300 dark:bg-amber-900 dark:text-black dark:ring-[2px] dark:ring-amber-700;
+	}
+	.variant-ringed-amber-100 {
+		@apply bg-transparent ring-[1px] ring-amber-100 dark:bg-transparent dark:ring-[1px] dark:ring-amber-900;
+	}
+	.variant-ghost-amber-100 {
+		@apply bg-amber-100/20 ring-[2px] ring-amber-100 dark:bg-amber-900/20 dark:ring-[2px] dark:ring-amber-900;
+	}
+	.variant-glass-amber-100 {
+		@apply bg-amber-100/40 text-amber-600 backdrop-blur-lg dark:bg-amber-900/40 dark:text-amber-950;
+	}
+	.variant-seethrough-amber-100 {
+		@apply bg-amber-100/40 text-black dark:bg-amber-900/40 dark:text-black;
+	}
+
+	.variant-filled-amber-200 {
+		@apply bg-amber-200 text-black dark:bg-amber-800 dark:text-black;
+	}
+	.variant-soft-amber-200 {
+		@apply bg-amber-200 text-amber-700 dark:bg-amber-800 dark:text-amber-950;
+	}
+	.variant-outline-only-amber-200 {
+		@apply ring-[2px] ring-amber-200 dark:ring-[2px] dark:ring-amber-800;
+	}
+	.variant-outline-soft-amber-200 {
+		@apply bg-amber-200 text-amber-700 ring-[2px] ring-amber-400 dark:bg-amber-800 dark:text-amber-950 dark:ring-[2px] dark:ring-amber-600;
+	}
+	.variant-outline-filled-amber-200 {
+		@apply bg-amber-200 text-black ring-[2px] ring-amber-400 dark:bg-amber-800 dark:text-black dark:ring-[2px] dark:ring-amber-600;
+	}
+	.variant-ringed-amber-200 {
+		@apply bg-transparent ring-[1px] ring-amber-200 dark:bg-transparent dark:ring-[1px] dark:ring-amber-800;
+	}
+	.variant-ghost-amber-200 {
+		@apply bg-amber-200/20 ring-[2px] ring-amber-200 dark:bg-amber-800/20 dark:ring-[2px] dark:ring-amber-800;
+	}
+	.variant-glass-amber-200 {
+		@apply bg-amber-200/40 text-amber-700 backdrop-blur-lg dark:bg-amber-800/40 dark:text-amber-950;
+	}
+	.variant-seethrough-amber-200 {
+		@apply bg-amber-200/40 text-black dark:bg-amber-800/40 dark:text-black;
+	}
+
+	.variant-filled-amber-300 {
+		@apply bg-amber-300 text-black dark:bg-amber-700 dark:text-black;
+	}
+	.variant-soft-amber-300 {
+		@apply bg-amber-300 text-amber-800 dark:bg-amber-700 dark:text-amber-950;
+	}
+	.variant-outline-only-amber-300 {
+		@apply ring-[2px] ring-amber-300 dark:ring-[2px] dark:ring-amber-700;
+	}
+	.variant-outline-soft-amber-300 {
+		@apply bg-amber-300 text-amber-800 ring-[2px] ring-amber-500 dark:bg-amber-700 dark:text-amber-950 dark:ring-[2px] dark:ring-amber-500;
+	}
+	.variant-outline-filled-amber-300 {
+		@apply bg-amber-300 text-black ring-[2px] ring-amber-500 dark:bg-amber-700 dark:text-black dark:ring-[2px] dark:ring-amber-500;
+	}
+	.variant-ringed-amber-300 {
+		@apply bg-transparent ring-[1px] ring-amber-300 dark:bg-transparent dark:ring-[1px] dark:ring-amber-700;
+	}
+	.variant-ghost-amber-300 {
+		@apply bg-amber-300/20 ring-[2px] ring-amber-300 dark:bg-amber-700/20 dark:ring-[2px] dark:ring-amber-700;
+	}
+	.variant-glass-amber-300 {
+		@apply bg-amber-300/40 text-amber-800 backdrop-blur-lg dark:bg-amber-700/40 dark:text-amber-950;
+	}
+	.variant-seethrough-amber-300 {
+		@apply bg-amber-300/40 text-black dark:bg-amber-700/40 dark:text-black;
+	}
+
+	.variant-filled-amber-400 {
+		@apply bg-amber-400 text-black dark:bg-amber-600 dark:text-black;
+	}
+	.variant-soft-amber-400 {
+		@apply bg-amber-400 text-amber-900 dark:bg-amber-600 dark:text-amber-950;
+	}
+	.variant-outline-only-amber-400 {
+		@apply ring-[2px] ring-amber-400 dark:ring-[2px] dark:ring-amber-600;
+	}
+	.variant-outline-soft-amber-400 {
+		@apply bg-amber-400 text-amber-900 ring-[2px] ring-amber-600 dark:bg-amber-600 dark:text-amber-950 dark:ring-[2px] dark:ring-amber-400;
+	}
+	.variant-outline-filled-amber-400 {
+		@apply bg-amber-400 text-black ring-[2px] ring-amber-600 dark:bg-amber-600 dark:text-black dark:ring-[2px] dark:ring-amber-400;
+	}
+	.variant-ringed-amber-400 {
+		@apply bg-transparent ring-[1px] ring-amber-400 dark:bg-transparent dark:ring-[1px] dark:ring-amber-600;
+	}
+	.variant-ghost-amber-400 {
+		@apply bg-amber-400/20 ring-[2px] ring-amber-400 dark:bg-amber-600/20 dark:ring-[2px] dark:ring-amber-600;
+	}
+	.variant-glass-amber-400 {
+		@apply bg-amber-400/40 text-amber-900 backdrop-blur-lg dark:bg-amber-600/40 dark:text-amber-950;
+	}
+	.variant-seethrough-amber-400 {
+		@apply bg-amber-400/40 text-black dark:bg-amber-600/40 dark:text-black;
+	}
+
+	.variant-filled-amber-500 {
+		@apply bg-amber-500 text-black dark:bg-amber-500 dark:text-black;
+	}
+	.variant-soft-amber-500 {
+		@apply bg-amber-500 text-amber-950 dark:bg-amber-500 dark:text-amber-950;
+	}
+	.variant-outline-only-amber-500 {
+		@apply ring-[2px] ring-amber-500 dark:ring-[2px] dark:ring-amber-500;
+	}
+	.variant-outline-soft-amber-500 {
+		@apply bg-amber-500 text-amber-950 ring-[2px] ring-amber-300 dark:bg-amber-500 dark:text-amber-950 dark:ring-[2px] dark:ring-amber-300;
+	}
+	.variant-outline-filled-amber-500 {
+		@apply bg-amber-500 text-black ring-[2px] ring-amber-300 dark:bg-amber-500 dark:text-black dark:ring-[2px] dark:ring-amber-300;
+	}
+	.variant-ringed-amber-500 {
+		@apply bg-transparent ring-[1px] ring-amber-500 dark:bg-transparent dark:ring-[1px] dark:ring-amber-500;
+	}
+	.variant-ghost-amber-500 {
+		@apply bg-amber-500/20 ring-[2px] ring-amber-500 dark:bg-amber-500/20 dark:ring-[2px] dark:ring-amber-500;
+	}
+	.variant-glass-amber-500 {
+		@apply bg-amber-500/40 text-amber-950 backdrop-blur-lg dark:bg-amber-500/40 dark:text-amber-950;
+	}
+	.variant-seethrough-amber-500 {
+		@apply bg-amber-500/40 text-black dark:bg-amber-500/40 dark:text-black;
+	}
+
+	.variant-filled-amber-600 {
+		@apply bg-amber-600 text-black dark:bg-amber-400 dark:text-black;
+	}
+	.variant-soft-amber-600 {
+		@apply bg-amber-600 text-amber-950 dark:bg-amber-400 dark:text-amber-900;
+	}
+	.variant-outline-only-amber-600 {
+		@apply ring-[2px] ring-amber-600 dark:ring-[2px] dark:ring-amber-400;
+	}
+	.variant-outline-soft-amber-600 {
+		@apply bg-amber-600 text-amber-950 ring-[2px] ring-amber-400 dark:bg-amber-400 dark:text-amber-900 dark:ring-[2px] dark:ring-amber-600;
+	}
+	.variant-outline-filled-amber-600 {
+		@apply bg-amber-600 text-black ring-[2px] ring-amber-400 dark:bg-amber-400 dark:text-black dark:ring-[2px] dark:ring-amber-600;
+	}
+	.variant-ringed-amber-600 {
+		@apply bg-transparent ring-[1px] ring-amber-600 dark:bg-transparent dark:ring-[1px] dark:ring-amber-400;
+	}
+	.variant-ghost-amber-600 {
+		@apply bg-amber-600/20 ring-[2px] ring-amber-600 dark:bg-amber-400/20 dark:ring-[2px] dark:ring-amber-400;
+	}
+	.variant-glass-amber-600 {
+		@apply bg-amber-600/40 text-amber-950 backdrop-blur-lg dark:bg-amber-400/40 dark:text-amber-900;
+	}
+	.variant-seethrough-amber-600 {
+		@apply bg-amber-600/40 text-black dark:bg-amber-400/40 dark:text-black;
+	}
+
+	.variant-filled-amber-700 {
+		@apply bg-amber-700 text-black dark:bg-amber-300 dark:text-black;
+	}
+	.variant-soft-amber-700 {
+		@apply bg-amber-700 text-amber-950 dark:bg-amber-300 dark:text-amber-800;
+	}
+	.variant-outline-only-amber-700 {
+		@apply ring-[2px] ring-amber-700 dark:ring-[2px] dark:ring-amber-300;
+	}
+	.variant-outline-soft-amber-700 {
+		@apply bg-amber-700 text-amber-950 ring-[2px] ring-amber-500 dark:bg-amber-300 dark:text-amber-800 dark:ring-[2px] dark:ring-amber-500;
+	}
+	.variant-outline-filled-amber-700 {
+		@apply bg-amber-700 text-black ring-[2px] ring-amber-500 dark:bg-amber-300 dark:text-black dark:ring-[2px] dark:ring-amber-500;
+	}
+	.variant-ringed-amber-700 {
+		@apply bg-transparent ring-[1px] ring-amber-700 dark:bg-transparent dark:ring-[1px] dark:ring-amber-300;
+	}
+	.variant-ghost-amber-700 {
+		@apply bg-amber-700/20 ring-[2px] ring-amber-700 dark:bg-amber-300/20 dark:ring-[2px] dark:ring-amber-300;
+	}
+	.variant-glass-amber-700 {
+		@apply bg-amber-700/40 text-amber-950 backdrop-blur-lg dark:bg-amber-300/40 dark:text-amber-800;
+	}
+	.variant-seethrough-amber-700 {
+		@apply bg-amber-700/40 text-black dark:bg-amber-300/40 dark:text-black;
+	}
+
+	.variant-filled-amber-800 {
+		@apply bg-amber-800 text-black dark:bg-amber-200 dark:text-black;
+	}
+	.variant-soft-amber-800 {
+		@apply bg-amber-800 text-amber-950 dark:bg-amber-200 dark:text-amber-700;
+	}
+	.variant-outline-only-amber-800 {
+		@apply ring-[2px] ring-amber-800 dark:ring-[2px] dark:ring-amber-200;
+	}
+	.variant-outline-soft-amber-800 {
+		@apply bg-amber-800 text-amber-950 ring-[2px] ring-amber-600 dark:bg-amber-200 dark:text-amber-700 dark:ring-[2px] dark:ring-amber-400;
+	}
+	.variant-outline-filled-amber-800 {
+		@apply bg-amber-800 text-black ring-[2px] ring-amber-600 dark:bg-amber-200 dark:text-black dark:ring-[2px] dark:ring-amber-400;
+	}
+	.variant-ringed-amber-800 {
+		@apply bg-transparent ring-[1px] ring-amber-800 dark:bg-transparent dark:ring-[1px] dark:ring-amber-200;
+	}
+	.variant-ghost-amber-800 {
+		@apply bg-amber-800/20 ring-[2px] ring-amber-800 dark:bg-amber-200/20 dark:ring-[2px] dark:ring-amber-200;
+	}
+	.variant-glass-amber-800 {
+		@apply bg-amber-800/40 text-amber-950 backdrop-blur-lg dark:bg-amber-200/40 dark:text-amber-700;
+	}
+	.variant-seethrough-amber-800 {
+		@apply bg-amber-800/40 text-black dark:bg-amber-200/40 dark:text-black;
+	}
+
+	.variant-filled-amber-900 {
+		@apply bg-amber-900 text-black dark:bg-amber-100 dark:text-black;
+	}
+	.variant-soft-amber-900 {
+		@apply bg-amber-900 text-amber-950 dark:bg-amber-100 dark:text-amber-600;
+	}
+	.variant-outline-only-amber-900 {
+		@apply ring-[2px] ring-amber-900 dark:ring-[2px] dark:ring-amber-100;
+	}
+	.variant-outline-soft-amber-900 {
+		@apply bg-amber-900 text-amber-950 ring-[2px] ring-amber-700 dark:bg-amber-100 dark:text-amber-600 dark:ring-[2px] dark:ring-amber-300;
+	}
+	.variant-outline-filled-amber-900 {
+		@apply bg-amber-900 text-black ring-[2px] ring-amber-700 dark:bg-amber-100 dark:text-black dark:ring-[2px] dark:ring-amber-300;
+	}
+	.variant-ringed-amber-900 {
+		@apply bg-transparent ring-[1px] ring-amber-900 dark:bg-transparent dark:ring-[1px] dark:ring-amber-100;
+	}
+	.variant-ghost-amber-900 {
+		@apply bg-amber-900/20 ring-[2px] ring-amber-900 dark:bg-amber-100/20 dark:ring-[2px] dark:ring-amber-100;
+	}
+	.variant-glass-amber-900 {
+		@apply bg-amber-900/40 text-amber-950 backdrop-blur-lg dark:bg-amber-100/40 dark:text-amber-600;
+	}
+	.variant-seethrough-amber-900 {
+		@apply bg-amber-900/40 text-black dark:bg-amber-100/40 dark:text-black;
+	}
+
+	.variant-filled-amber-950 {
+		@apply bg-amber-950 text-black dark:bg-amber-50 dark:text-black;
+	}
+	.variant-soft-amber-950 {
+		@apply bg-amber-950 text-amber-950 dark:bg-amber-50 dark:text-amber-500;
+	}
+	.variant-outline-only-amber-950 {
+		@apply ring-[2px] ring-amber-950 dark:ring-[2px] dark:ring-amber-50;
+	}
+	.variant-outline-soft-amber-950 {
+		@apply bg-amber-950 text-amber-950 ring-[2px] ring-amber-800 dark:bg-amber-50 dark:text-amber-500 dark:ring-[2px] dark:ring-amber-200;
+	}
+	.variant-outline-filled-amber-950 {
+		@apply bg-amber-950 text-black ring-[2px] ring-amber-800 dark:bg-amber-50 dark:text-black dark:ring-[2px] dark:ring-amber-200;
+	}
+	.variant-ringed-amber-950 {
+		@apply bg-transparent ring-[1px] ring-amber-950 dark:bg-transparent dark:ring-[1px] dark:ring-amber-50;
+	}
+	.variant-ghost-amber-950 {
+		@apply bg-amber-950/20 ring-[2px] ring-amber-950 dark:bg-amber-50/20 dark:ring-[2px] dark:ring-amber-50;
+	}
+	.variant-glass-amber-950 {
+		@apply bg-amber-950/40 text-amber-950 backdrop-blur-lg dark:bg-amber-50/40 dark:text-amber-500;
+	}
+	.variant-seethrough-amber-950 {
+		@apply bg-amber-950/40 text-black dark:bg-amber-50/40 dark:text-black;
+	}
+
+	/* indigo */
+
+	.variant-filled-indigo-50 {
+		@apply bg-indigo-50 text-black dark:bg-indigo-950 dark:text-white;
+	}
+	.variant-soft-indigo-50 {
+		@apply bg-indigo-50 text-indigo-500 dark:bg-indigo-950 dark:text-indigo-500;
+	}
+	.variant-outline-only-indigo-50 {
+		@apply ring-[2px] ring-indigo-50 dark:ring-[2px] dark:ring-indigo-950;
+	}
+	.variant-outline-soft-indigo-50 {
+		@apply bg-indigo-50 text-indigo-500 ring-[2px] ring-indigo-200 dark:bg-indigo-950 dark:text-indigo-500 dark:ring-[2px] dark:ring-indigo-800;
+	}
+	.variant-outline-filled-indigo-50 {
+		@apply bg-indigo-50 text-black ring-[2px] ring-indigo-200 dark:bg-indigo-950 dark:text-white dark:ring-[2px] dark:ring-indigo-800;
+	}
+	.variant-ringed-indigo-50 {
+		@apply bg-transparent ring-[1px] ring-indigo-50 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-950;
+	}
+	.variant-ghost-indigo-50 {
+		@apply bg-indigo-50/20 ring-[2px] ring-indigo-50 dark:bg-indigo-950/20 dark:ring-[2px] dark:ring-indigo-950;
+	}
+	.variant-glass-indigo-50 {
+		@apply bg-indigo-50/40 text-indigo-500 backdrop-blur-lg dark:bg-indigo-950/40 dark:text-indigo-500;
+	}
+	.variant-seethrough-indigo-50 {
+		@apply bg-indigo-50/40 text-black dark:bg-indigo-950/40 dark:text-white;
+	}
+
+	.variant-filled-indigo-100 {
+		@apply bg-indigo-100 text-black dark:bg-indigo-900 dark:text-white;
+	}
+	.variant-soft-indigo-100 {
+		@apply bg-indigo-100 text-indigo-600 dark:bg-indigo-900 dark:text-indigo-400;
+	}
+	.variant-outline-only-indigo-100 {
+		@apply ring-[2px] ring-indigo-100 dark:ring-[2px] dark:ring-indigo-900;
+	}
+	.variant-outline-soft-indigo-100 {
+		@apply bg-indigo-100 text-indigo-600 ring-[2px] ring-indigo-300 dark:bg-indigo-900 dark:text-indigo-400 dark:ring-[2px] dark:ring-indigo-700;
+	}
+	.variant-outline-filled-indigo-100 {
+		@apply bg-indigo-100 text-black ring-[2px] ring-indigo-300 dark:bg-indigo-900 dark:text-white dark:ring-[2px] dark:ring-indigo-700;
+	}
+	.variant-ringed-indigo-100 {
+		@apply bg-transparent ring-[1px] ring-indigo-100 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-900;
+	}
+	.variant-ghost-indigo-100 {
+		@apply bg-indigo-100/20 ring-[2px] ring-indigo-100 dark:bg-indigo-900/20 dark:ring-[2px] dark:ring-indigo-900;
+	}
+	.variant-glass-indigo-100 {
+		@apply bg-indigo-100/40 text-indigo-600 backdrop-blur-lg dark:bg-indigo-900/40 dark:text-indigo-400;
+	}
+	.variant-seethrough-indigo-100 {
+		@apply bg-indigo-100/40 text-black dark:bg-indigo-900/40 dark:text-white;
+	}
+
+	.variant-filled-indigo-200 {
+		@apply bg-indigo-200 text-black dark:bg-indigo-800 dark:text-white;
+	}
+	.variant-soft-indigo-200 {
+		@apply bg-indigo-200 text-indigo-700 dark:bg-indigo-800 dark:text-indigo-300;
+	}
+	.variant-outline-only-indigo-200 {
+		@apply ring-[2px] ring-indigo-200 dark:ring-[2px] dark:ring-indigo-800;
+	}
+	.variant-outline-soft-indigo-200 {
+		@apply bg-indigo-200 text-indigo-700 ring-[2px] ring-indigo-400 dark:bg-indigo-800 dark:text-indigo-300 dark:ring-[2px] dark:ring-indigo-600;
+	}
+	.variant-outline-filled-indigo-200 {
+		@apply bg-indigo-200 text-black ring-[2px] ring-indigo-400 dark:bg-indigo-800 dark:text-white dark:ring-[2px] dark:ring-indigo-600;
+	}
+	.variant-ringed-indigo-200 {
+		@apply bg-transparent ring-[1px] ring-indigo-200 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-800;
+	}
+	.variant-ghost-indigo-200 {
+		@apply bg-indigo-200/20 ring-[2px] ring-indigo-200 dark:bg-indigo-800/20 dark:ring-[2px] dark:ring-indigo-800;
+	}
+	.variant-glass-indigo-200 {
+		@apply bg-indigo-200/40 text-indigo-700 backdrop-blur-lg dark:bg-indigo-800/40 dark:text-indigo-300;
+	}
+	.variant-seethrough-indigo-200 {
+		@apply bg-indigo-200/40 text-black dark:bg-indigo-800/40 dark:text-white;
+	}
+
+	.variant-filled-indigo-300 {
+		@apply bg-indigo-300 text-white dark:bg-indigo-700 dark:text-white;
+	}
+	.variant-soft-indigo-300 {
+		@apply bg-indigo-300 text-indigo-50 dark:bg-indigo-700 dark:text-indigo-200;
+	}
+	.variant-outline-only-indigo-300 {
+		@apply ring-[2px] ring-indigo-300 dark:ring-[2px] dark:ring-indigo-700;
+	}
+	.variant-outline-soft-indigo-300 {
+		@apply bg-indigo-300 text-indigo-50 ring-[2px] ring-indigo-500 dark:bg-indigo-700 dark:text-indigo-200 dark:ring-[2px] dark:ring-indigo-500;
+	}
+	.variant-outline-filled-indigo-300 {
+		@apply bg-indigo-300 text-white ring-[2px] ring-indigo-500 dark:bg-indigo-700 dark:text-white dark:ring-[2px] dark:ring-indigo-500;
+	}
+	.variant-ringed-indigo-300 {
+		@apply bg-transparent ring-[1px] ring-indigo-300 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-700;
+	}
+	.variant-ghost-indigo-300 {
+		@apply bg-indigo-300/20 ring-[2px] ring-indigo-300 dark:bg-indigo-700/20 dark:ring-[2px] dark:ring-indigo-700;
+	}
+	.variant-glass-indigo-300 {
+		@apply bg-indigo-300/40 text-indigo-50 backdrop-blur-lg dark:bg-indigo-700/40 dark:text-indigo-200;
+	}
+	.variant-seethrough-indigo-300 {
+		@apply bg-indigo-300/40 text-white dark:bg-indigo-700/40 dark:text-white;
+	}
+
+	.variant-filled-indigo-400 {
+		@apply bg-indigo-400 text-white dark:bg-indigo-600 dark:text-white;
+	}
+	.variant-soft-indigo-400 {
+		@apply bg-indigo-400 text-indigo-50 dark:bg-indigo-600 dark:text-indigo-100;
+	}
+	.variant-outline-only-indigo-400 {
+		@apply ring-[2px] ring-indigo-400 dark:ring-[2px] dark:ring-indigo-600;
+	}
+	.variant-outline-soft-indigo-400 {
+		@apply bg-indigo-400 text-indigo-50 ring-[2px] ring-indigo-600 dark:bg-indigo-600 dark:text-indigo-100 dark:ring-[2px] dark:ring-indigo-400;
+	}
+	.variant-outline-filled-indigo-400 {
+		@apply bg-indigo-400 text-white ring-[2px] ring-indigo-600 dark:bg-indigo-600 dark:text-white dark:ring-[2px] dark:ring-indigo-400;
+	}
+	.variant-ringed-indigo-400 {
+		@apply bg-transparent ring-[1px] ring-indigo-400 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-600;
+	}
+	.variant-ghost-indigo-400 {
+		@apply bg-indigo-400/20 ring-[2px] ring-indigo-400 dark:bg-indigo-600/20 dark:ring-[2px] dark:ring-indigo-600;
+	}
+	.variant-glass-indigo-400 {
+		@apply bg-indigo-400/40 text-indigo-50 backdrop-blur-lg dark:bg-indigo-600/40 dark:text-indigo-100;
+	}
+	.variant-seethrough-indigo-400 {
+		@apply bg-indigo-400/40 text-white dark:bg-indigo-600/40 dark:text-white;
+	}
+
+	.variant-filled-indigo-500 {
+		@apply bg-indigo-500 text-white dark:bg-indigo-500 dark:text-white;
+	}
+	.variant-soft-indigo-500 {
+		@apply bg-indigo-500 text-indigo-50 dark:bg-indigo-500 dark:text-indigo-50;
+	}
+	.variant-outline-only-indigo-500 {
+		@apply ring-[2px] ring-indigo-500 dark:ring-[2px] dark:ring-indigo-500;
+	}
+	.variant-outline-soft-indigo-500 {
+		@apply bg-indigo-500 text-indigo-50 ring-[2px] ring-indigo-300 dark:bg-indigo-500 dark:text-indigo-50 dark:ring-[2px] dark:ring-indigo-300;
+	}
+	.variant-outline-filled-indigo-500 {
+		@apply bg-indigo-500 text-white ring-[2px] ring-indigo-300 dark:bg-indigo-500 dark:text-white dark:ring-[2px] dark:ring-indigo-300;
+	}
+	.variant-ringed-indigo-500 {
+		@apply bg-transparent ring-[1px] ring-indigo-500 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-500;
+	}
+	.variant-ghost-indigo-500 {
+		@apply bg-indigo-500/20 ring-[2px] ring-indigo-500 dark:bg-indigo-500/20 dark:ring-[2px] dark:ring-indigo-500;
+	}
+	.variant-glass-indigo-500 {
+		@apply bg-indigo-500/40 text-indigo-50 backdrop-blur-lg dark:bg-indigo-500/40 dark:text-indigo-50;
+	}
+	.variant-seethrough-indigo-500 {
+		@apply bg-indigo-500/40 text-white dark:bg-indigo-500/40 dark:text-white;
+	}
+
+	.variant-filled-indigo-600 {
+		@apply bg-indigo-600 text-white dark:bg-indigo-400 dark:text-white;
+	}
+	.variant-soft-indigo-600 {
+		@apply bg-indigo-600 text-indigo-100 dark:bg-indigo-400 dark:text-indigo-50;
+	}
+	.variant-outline-only-indigo-600 {
+		@apply ring-[2px] ring-indigo-600 dark:ring-[2px] dark:ring-indigo-400;
+	}
+	.variant-outline-soft-indigo-600 {
+		@apply bg-indigo-600 text-indigo-100 ring-[2px] ring-indigo-400 dark:bg-indigo-400 dark:text-indigo-50 dark:ring-[2px] dark:ring-indigo-600;
+	}
+	.variant-outline-filled-indigo-600 {
+		@apply bg-indigo-600 text-white ring-[2px] ring-indigo-400 dark:bg-indigo-400 dark:text-white dark:ring-[2px] dark:ring-indigo-600;
+	}
+	.variant-ringed-indigo-600 {
+		@apply bg-transparent ring-[1px] ring-indigo-600 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-400;
+	}
+	.variant-ghost-indigo-600 {
+		@apply bg-indigo-600/20 ring-[2px] ring-indigo-600 dark:bg-indigo-400/20 dark:ring-[2px] dark:ring-indigo-400;
+	}
+	.variant-glass-indigo-600 {
+		@apply bg-indigo-600/40 text-indigo-100 backdrop-blur-lg dark:bg-indigo-400/40 dark:text-indigo-50;
+	}
+	.variant-seethrough-indigo-600 {
+		@apply bg-indigo-600/40 text-white dark:bg-indigo-400/40 dark:text-white;
+	}
+
+	.variant-filled-indigo-700 {
+		@apply bg-indigo-700 text-white dark:bg-indigo-300 dark:text-white;
+	}
+	.variant-soft-indigo-700 {
+		@apply bg-indigo-700 text-indigo-200 dark:bg-indigo-300 dark:text-indigo-50;
+	}
+	.variant-outline-only-indigo-700 {
+		@apply ring-[2px] ring-indigo-700 dark:ring-[2px] dark:ring-indigo-300;
+	}
+	.variant-outline-soft-indigo-700 {
+		@apply bg-indigo-700 text-indigo-200 ring-[2px] ring-indigo-500 dark:bg-indigo-300 dark:text-indigo-50 dark:ring-[2px] dark:ring-indigo-500;
+	}
+	.variant-outline-filled-indigo-700 {
+		@apply bg-indigo-700 text-white ring-[2px] ring-indigo-500 dark:bg-indigo-300 dark:text-white dark:ring-[2px] dark:ring-indigo-500;
+	}
+	.variant-ringed-indigo-700 {
+		@apply bg-transparent ring-[1px] ring-indigo-700 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-300;
+	}
+	.variant-ghost-indigo-700 {
+		@apply bg-indigo-700/20 ring-[2px] ring-indigo-700 dark:bg-indigo-300/20 dark:ring-[2px] dark:ring-indigo-300;
+	}
+	.variant-glass-indigo-700 {
+		@apply bg-indigo-700/40 text-indigo-200 backdrop-blur-lg dark:bg-indigo-300/40 dark:text-indigo-50;
+	}
+	.variant-seethrough-indigo-700 {
+		@apply bg-indigo-700/40 text-white dark:bg-indigo-300/40 dark:text-white;
+	}
+
+	.variant-filled-indigo-800 {
+		@apply bg-indigo-800 text-white dark:bg-indigo-200 dark:text-black;
+	}
+	.variant-soft-indigo-800 {
+		@apply bg-indigo-800 text-indigo-300 dark:bg-indigo-200 dark:text-indigo-700;
+	}
+	.variant-outline-only-indigo-800 {
+		@apply ring-[2px] ring-indigo-800 dark:ring-[2px] dark:ring-indigo-200;
+	}
+	.variant-outline-soft-indigo-800 {
+		@apply bg-indigo-800 text-indigo-300 ring-[2px] ring-indigo-600 dark:bg-indigo-200 dark:text-indigo-700 dark:ring-[2px] dark:ring-indigo-400;
+	}
+	.variant-outline-filled-indigo-800 {
+		@apply bg-indigo-800 text-white ring-[2px] ring-indigo-600 dark:bg-indigo-200 dark:text-black dark:ring-[2px] dark:ring-indigo-400;
+	}
+	.variant-ringed-indigo-800 {
+		@apply bg-transparent ring-[1px] ring-indigo-800 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-200;
+	}
+	.variant-ghost-indigo-800 {
+		@apply bg-indigo-800/20 ring-[2px] ring-indigo-800 dark:bg-indigo-200/20 dark:ring-[2px] dark:ring-indigo-200;
+	}
+	.variant-glass-indigo-800 {
+		@apply bg-indigo-800/40 text-indigo-300 backdrop-blur-lg dark:bg-indigo-200/40 dark:text-indigo-700;
+	}
+	.variant-seethrough-indigo-800 {
+		@apply bg-indigo-800/40 text-white dark:bg-indigo-200/40 dark:text-black;
+	}
+
+	.variant-filled-indigo-900 {
+		@apply bg-indigo-900 text-white dark:bg-indigo-100 dark:text-black;
+	}
+	.variant-soft-indigo-900 {
+		@apply bg-indigo-900 text-indigo-400 dark:bg-indigo-100 dark:text-indigo-600;
+	}
+	.variant-outline-only-indigo-900 {
+		@apply ring-[2px] ring-indigo-900 dark:ring-[2px] dark:ring-indigo-100;
+	}
+	.variant-outline-soft-indigo-900 {
+		@apply bg-indigo-900 text-indigo-400 ring-[2px] ring-indigo-700 dark:bg-indigo-100 dark:text-indigo-600 dark:ring-[2px] dark:ring-indigo-300;
+	}
+	.variant-outline-filled-indigo-900 {
+		@apply bg-indigo-900 text-white ring-[2px] ring-indigo-700 dark:bg-indigo-100 dark:text-black dark:ring-[2px] dark:ring-indigo-300;
+	}
+	.variant-ringed-indigo-900 {
+		@apply bg-transparent ring-[1px] ring-indigo-900 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-100;
+	}
+	.variant-ghost-indigo-900 {
+		@apply bg-indigo-900/20 ring-[2px] ring-indigo-900 dark:bg-indigo-100/20 dark:ring-[2px] dark:ring-indigo-100;
+	}
+	.variant-glass-indigo-900 {
+		@apply bg-indigo-900/40 text-indigo-400 backdrop-blur-lg dark:bg-indigo-100/40 dark:text-indigo-600;
+	}
+	.variant-seethrough-indigo-900 {
+		@apply bg-indigo-900/40 text-white dark:bg-indigo-100/40 dark:text-black;
+	}
+
+	.variant-filled-indigo-950 {
+		@apply bg-indigo-950 text-white dark:bg-indigo-50 dark:text-black;
+	}
+	.variant-soft-indigo-950 {
+		@apply bg-indigo-950 text-indigo-500 dark:bg-indigo-50 dark:text-indigo-500;
+	}
+	.variant-outline-only-indigo-950 {
+		@apply ring-[2px] ring-indigo-950 dark:ring-[2px] dark:ring-indigo-50;
+	}
+	.variant-outline-soft-indigo-950 {
+		@apply bg-indigo-950 text-indigo-500 ring-[2px] ring-indigo-800 dark:bg-indigo-50 dark:text-indigo-500 dark:ring-[2px] dark:ring-indigo-200;
+	}
+	.variant-outline-filled-indigo-950 {
+		@apply bg-indigo-950 text-white ring-[2px] ring-indigo-800 dark:bg-indigo-50 dark:text-black dark:ring-[2px] dark:ring-indigo-200;
+	}
+	.variant-ringed-indigo-950 {
+		@apply bg-transparent ring-[1px] ring-indigo-950 dark:bg-transparent dark:ring-[1px] dark:ring-indigo-50;
+	}
+	.variant-ghost-indigo-950 {
+		@apply bg-indigo-950/20 ring-[2px] ring-indigo-950 dark:bg-indigo-50/20 dark:ring-[2px] dark:ring-indigo-50;
+	}
+	.variant-glass-indigo-950 {
+		@apply bg-indigo-950/40 text-indigo-500 backdrop-blur-lg dark:bg-indigo-50/40 dark:text-indigo-500;
+	}
+	.variant-seethrough-indigo-950 {
+		@apply bg-indigo-950/40 text-white dark:bg-indigo-50/40 dark:text-black;
+	}
+
+	/* primary */
+
+	.variant-filled-primary-50 {
+		@apply bg-primary-50 text-black dark:bg-primary-950 dark:text-white;
+	}
+	.variant-soft-primary-50 {
+		@apply bg-primary-50 text-primary-500 dark:bg-primary-950 dark:text-primary-500;
+	}
+	.variant-outline-only-primary-50 {
+		@apply ring-[2px] ring-primary-50 dark:ring-[2px] dark:ring-primary-950;
+	}
+	.variant-outline-soft-primary-50 {
+		@apply bg-primary-50 text-primary-500 ring-[2px] ring-primary-200 dark:bg-primary-950 dark:text-primary-500 dark:ring-[2px] dark:ring-primary-800;
+	}
+	.variant-outline-filled-primary-50 {
+		@apply bg-primary-50 text-black ring-[2px] ring-primary-200 dark:bg-primary-950 dark:text-white dark:ring-[2px] dark:ring-primary-800;
+	}
+	.variant-ringed-primary-50 {
+		@apply bg-transparent ring-[1px] ring-primary-50 dark:bg-transparent dark:ring-[1px] dark:ring-primary-950;
+	}
+	.variant-ghost-primary-50 {
+		@apply bg-primary-50/20 ring-[2px] ring-primary-50 dark:bg-primary-950/20 dark:ring-[2px] dark:ring-primary-950;
+	}
+	.variant-glass-primary-50 {
+		@apply bg-primary-50/40 text-primary-500 backdrop-blur-lg dark:bg-primary-950/40 dark:text-primary-500;
+	}
+	.variant-seethrough-primary-50 {
+		@apply bg-primary-50/40 text-black dark:bg-primary-950/40 dark:text-white;
+	}
+
+	.variant-filled-primary-100 {
+		@apply bg-primary-100 text-black dark:bg-primary-900 dark:text-white;
+	}
+	.variant-soft-primary-100 {
+		@apply bg-primary-100 text-primary-600 dark:bg-primary-900 dark:text-primary-400;
+	}
+	.variant-outline-only-primary-100 {
+		@apply ring-[2px] ring-primary-100 dark:ring-[2px] dark:ring-primary-900;
+	}
+	.variant-outline-soft-primary-100 {
+		@apply bg-primary-100 text-primary-600 ring-[2px] ring-primary-300 dark:bg-primary-900 dark:text-primary-400 dark:ring-[2px] dark:ring-primary-700;
+	}
+	.variant-outline-filled-primary-100 {
+		@apply bg-primary-100 text-black ring-[2px] ring-primary-300 dark:bg-primary-900 dark:text-white dark:ring-[2px] dark:ring-primary-700;
+	}
+	.variant-ringed-primary-100 {
+		@apply bg-transparent ring-[1px] ring-primary-100 dark:bg-transparent dark:ring-[1px] dark:ring-primary-900;
+	}
+	.variant-ghost-primary-100 {
+		@apply bg-primary-100/20 ring-[2px] ring-primary-100 dark:bg-primary-900/20 dark:ring-[2px] dark:ring-primary-900;
+	}
+	.variant-glass-primary-100 {
+		@apply bg-primary-100/40 text-primary-600 backdrop-blur-lg dark:bg-primary-900/40 dark:text-primary-400;
+	}
+	.variant-seethrough-primary-100 {
+		@apply bg-primary-100/40 text-black dark:bg-primary-900/40 dark:text-white;
+	}
+
+	.variant-filled-primary-200 {
+		@apply bg-primary-200 text-black dark:bg-primary-800 dark:text-white;
+	}
+	.variant-soft-primary-200 {
+		@apply bg-primary-200 text-primary-700 dark:bg-primary-800 dark:text-primary-300;
+	}
+	.variant-outline-only-primary-200 {
+		@apply ring-[2px] ring-primary-200 dark:ring-[2px] dark:ring-primary-800;
+	}
+	.variant-outline-soft-primary-200 {
+		@apply bg-primary-200 text-primary-700 ring-[2px] ring-primary-400 dark:bg-primary-800 dark:text-primary-300 dark:ring-[2px] dark:ring-primary-600;
+	}
+	.variant-outline-filled-primary-200 {
+		@apply bg-primary-200 text-black ring-[2px] ring-primary-400 dark:bg-primary-800 dark:text-white dark:ring-[2px] dark:ring-primary-600;
+	}
+	.variant-ringed-primary-200 {
+		@apply bg-transparent ring-[1px] ring-primary-200 dark:bg-transparent dark:ring-[1px] dark:ring-primary-800;
+	}
+	.variant-ghost-primary-200 {
+		@apply bg-primary-200/20 ring-[2px] ring-primary-200 dark:bg-primary-800/20 dark:ring-[2px] dark:ring-primary-800;
+	}
+	.variant-glass-primary-200 {
+		@apply bg-primary-200/40 text-primary-700 backdrop-blur-lg dark:bg-primary-800/40 dark:text-primary-300;
+	}
+	.variant-seethrough-primary-200 {
+		@apply bg-primary-200/40 text-black dark:bg-primary-800/40 dark:text-white;
+	}
+
+	.variant-filled-primary-300 {
+		@apply bg-primary-300 text-black dark:bg-primary-700 dark:text-white;
+	}
+	.variant-soft-primary-300 {
+		@apply bg-primary-300 text-primary-800 dark:bg-primary-700 dark:text-primary-200;
+	}
+	.variant-outline-only-primary-300 {
+		@apply ring-[2px] ring-primary-300 dark:ring-[2px] dark:ring-primary-700;
+	}
+	.variant-outline-soft-primary-300 {
+		@apply bg-primary-300 text-primary-800 ring-[2px] ring-primary-500 dark:bg-primary-700 dark:text-primary-200 dark:ring-[2px] dark:ring-primary-500;
+	}
+	.variant-outline-filled-primary-300 {
+		@apply bg-primary-300 text-black ring-[2px] ring-primary-500 dark:bg-primary-700 dark:text-white dark:ring-[2px] dark:ring-primary-500;
+	}
+	.variant-ringed-primary-300 {
+		@apply bg-transparent ring-[1px] ring-primary-300 dark:bg-transparent dark:ring-[1px] dark:ring-primary-700;
+	}
+	.variant-ghost-primary-300 {
+		@apply bg-primary-300/20 ring-[2px] ring-primary-300 dark:bg-primary-700/20 dark:ring-[2px] dark:ring-primary-700;
+	}
+	.variant-glass-primary-300 {
+		@apply bg-primary-300/40 text-primary-800 backdrop-blur-lg dark:bg-primary-700/40 dark:text-primary-200;
+	}
+	.variant-seethrough-primary-300 {
+		@apply bg-primary-300/40 text-black dark:bg-primary-700/40 dark:text-white;
+	}
+
+	.variant-filled-primary-400 {
+		@apply bg-primary-400 text-black dark:bg-primary-600 dark:text-white;
+	}
+	.variant-soft-primary-400 {
+		@apply bg-primary-400 text-primary-900 dark:bg-primary-600 dark:text-primary-100;
+	}
+	.variant-outline-only-primary-400 {
+		@apply ring-[2px] ring-primary-400 dark:ring-[2px] dark:ring-primary-600;
+	}
+	.variant-outline-soft-primary-400 {
+		@apply bg-primary-400 text-primary-900 ring-[2px] ring-primary-600 dark:bg-primary-600 dark:text-primary-100 dark:ring-[2px] dark:ring-primary-400;
+	}
+	.variant-outline-filled-primary-400 {
+		@apply bg-primary-400 text-black ring-[2px] ring-primary-600 dark:bg-primary-600 dark:text-white dark:ring-[2px] dark:ring-primary-400;
+	}
+	.variant-ringed-primary-400 {
+		@apply bg-transparent ring-[1px] ring-primary-400 dark:bg-transparent dark:ring-[1px] dark:ring-primary-600;
+	}
+	.variant-ghost-primary-400 {
+		@apply bg-primary-400/20 ring-[2px] ring-primary-400 dark:bg-primary-600/20 dark:ring-[2px] dark:ring-primary-600;
+	}
+	.variant-glass-primary-400 {
+		@apply bg-primary-400/40 text-primary-900 backdrop-blur-lg dark:bg-primary-600/40 dark:text-primary-100;
+	}
+	.variant-seethrough-primary-400 {
+		@apply bg-primary-400/40 text-black dark:bg-primary-600/40 dark:text-white;
+	}
+
+	.variant-filled-primary-500 {
+		@apply bg-primary-500 text-white dark:bg-primary-500 dark:text-white;
+	}
+	.variant-soft-primary-500 {
+		@apply bg-primary-500 text-primary-50 dark:bg-primary-500 dark:text-primary-50;
+	}
+	.variant-outline-only-primary-500 {
+		@apply ring-[2px] ring-primary-500 dark:ring-[2px] dark:ring-primary-500;
+	}
+	.variant-outline-soft-primary-500 {
+		@apply bg-primary-500 text-primary-50 ring-[2px] ring-primary-300 dark:bg-primary-500 dark:text-primary-50 dark:ring-[2px] dark:ring-primary-300;
+	}
+	.variant-outline-filled-primary-500 {
+		@apply bg-primary-500 text-white ring-[2px] ring-primary-300 dark:bg-primary-500 dark:text-white dark:ring-[2px] dark:ring-primary-300;
+	}
+	.variant-ringed-primary-500 {
+		@apply bg-transparent ring-[1px] ring-primary-500 dark:bg-transparent dark:ring-[1px] dark:ring-primary-500;
+	}
+	.variant-ghost-primary-500 {
+		@apply bg-primary-500/20 ring-[2px] ring-primary-500 dark:bg-primary-500/20 dark:ring-[2px] dark:ring-primary-500;
+	}
+	.variant-glass-primary-500 {
+		@apply bg-primary-500/40 text-primary-50 backdrop-blur-lg dark:bg-primary-500/40 dark:text-primary-50;
+	}
+	.variant-seethrough-primary-500 {
+		@apply bg-primary-500/40 text-white dark:bg-primary-500/40 dark:text-white;
+	}
+
+	.variant-filled-primary-600 {
+		@apply bg-primary-600 text-white dark:bg-primary-400 dark:text-black;
+	}
+	.variant-soft-primary-600 {
+		@apply bg-primary-600 text-primary-100 dark:bg-primary-400 dark:text-primary-900;
+	}
+	.variant-outline-only-primary-600 {
+		@apply ring-[2px] ring-primary-600 dark:ring-[2px] dark:ring-primary-400;
+	}
+	.variant-outline-soft-primary-600 {
+		@apply bg-primary-600 text-primary-100 ring-[2px] ring-primary-400 dark:bg-primary-400 dark:text-primary-900 dark:ring-[2px] dark:ring-primary-600;
+	}
+	.variant-outline-filled-primary-600 {
+		@apply bg-primary-600 text-white ring-[2px] ring-primary-400 dark:bg-primary-400 dark:text-black dark:ring-[2px] dark:ring-primary-600;
+	}
+	.variant-ringed-primary-600 {
+		@apply bg-transparent ring-[1px] ring-primary-600 dark:bg-transparent dark:ring-[1px] dark:ring-primary-400;
+	}
+	.variant-ghost-primary-600 {
+		@apply bg-primary-600/20 ring-[2px] ring-primary-600 dark:bg-primary-400/20 dark:ring-[2px] dark:ring-primary-400;
+	}
+	.variant-glass-primary-600 {
+		@apply bg-primary-600/40 text-primary-100 backdrop-blur-lg dark:bg-primary-400/40 dark:text-primary-900;
+	}
+	.variant-seethrough-primary-600 {
+		@apply bg-primary-600/40 text-white dark:bg-primary-400/40 dark:text-black;
+	}
+
+	.variant-filled-primary-700 {
+		@apply bg-primary-700 text-white dark:bg-primary-300 dark:text-black;
+	}
+	.variant-soft-primary-700 {
+		@apply bg-primary-700 text-primary-200 dark:bg-primary-300 dark:text-primary-800;
+	}
+	.variant-outline-only-primary-700 {
+		@apply ring-[2px] ring-primary-700 dark:ring-[2px] dark:ring-primary-300;
+	}
+	.variant-outline-soft-primary-700 {
+		@apply bg-primary-700 text-primary-200 ring-[2px] ring-primary-500 dark:bg-primary-300 dark:text-primary-800 dark:ring-[2px] dark:ring-primary-500;
+	}
+	.variant-outline-filled-primary-700 {
+		@apply bg-primary-700 text-white ring-[2px] ring-primary-500 dark:bg-primary-300 dark:text-black dark:ring-[2px] dark:ring-primary-500;
+	}
+	.variant-ringed-primary-700 {
+		@apply bg-transparent ring-[1px] ring-primary-700 dark:bg-transparent dark:ring-[1px] dark:ring-primary-300;
+	}
+	.variant-ghost-primary-700 {
+		@apply bg-primary-700/20 ring-[2px] ring-primary-700 dark:bg-primary-300/20 dark:ring-[2px] dark:ring-primary-300;
+	}
+	.variant-glass-primary-700 {
+		@apply bg-primary-700/40 text-primary-200 backdrop-blur-lg dark:bg-primary-300/40 dark:text-primary-800;
+	}
+	.variant-seethrough-primary-700 {
+		@apply bg-primary-700/40 text-white dark:bg-primary-300/40 dark:text-black;
+	}
+
+	.variant-filled-primary-800 {
+		@apply bg-primary-800 text-white dark:bg-primary-200 dark:text-black;
+	}
+	.variant-soft-primary-800 {
+		@apply bg-primary-800 text-primary-300 dark:bg-primary-200 dark:text-primary-700;
+	}
+	.variant-outline-only-primary-800 {
+		@apply ring-[2px] ring-primary-800 dark:ring-[2px] dark:ring-primary-200;
+	}
+	.variant-outline-soft-primary-800 {
+		@apply bg-primary-800 text-primary-300 ring-[2px] ring-primary-600 dark:bg-primary-200 dark:text-primary-700 dark:ring-[2px] dark:ring-primary-400;
+	}
+	.variant-outline-filled-primary-800 {
+		@apply bg-primary-800 text-white ring-[2px] ring-primary-600 dark:bg-primary-200 dark:text-black dark:ring-[2px] dark:ring-primary-400;
+	}
+	.variant-ringed-primary-800 {
+		@apply bg-transparent ring-[1px] ring-primary-800 dark:bg-transparent dark:ring-[1px] dark:ring-primary-200;
+	}
+	.variant-ghost-primary-800 {
+		@apply bg-primary-800/20 ring-[2px] ring-primary-800 dark:bg-primary-200/20 dark:ring-[2px] dark:ring-primary-200;
+	}
+	.variant-glass-primary-800 {
+		@apply bg-primary-800/40 text-primary-300 backdrop-blur-lg dark:bg-primary-200/40 dark:text-primary-700;
+	}
+	.variant-seethrough-primary-800 {
+		@apply bg-primary-800/40 text-white dark:bg-primary-200/40 dark:text-black;
+	}
+
+	.variant-filled-primary-900 {
+		@apply bg-primary-900 text-white dark:bg-primary-100 dark:text-black;
+	}
+	.variant-soft-primary-900 {
+		@apply bg-primary-900 text-primary-400 dark:bg-primary-100 dark:text-primary-600;
+	}
+	.variant-outline-only-primary-900 {
+		@apply ring-[2px] ring-primary-900 dark:ring-[2px] dark:ring-primary-100;
+	}
+	.variant-outline-soft-primary-900 {
+		@apply bg-primary-900 text-primary-400 ring-[2px] ring-primary-700 dark:bg-primary-100 dark:text-primary-600 dark:ring-[2px] dark:ring-primary-300;
+	}
+	.variant-outline-filled-primary-900 {
+		@apply bg-primary-900 text-white ring-[2px] ring-primary-700 dark:bg-primary-100 dark:text-black dark:ring-[2px] dark:ring-primary-300;
+	}
+	.variant-ringed-primary-900 {
+		@apply bg-transparent ring-[1px] ring-primary-900 dark:bg-transparent dark:ring-[1px] dark:ring-primary-100;
+	}
+	.variant-ghost-primary-900 {
+		@apply bg-primary-900/20 ring-[2px] ring-primary-900 dark:bg-primary-100/20 dark:ring-[2px] dark:ring-primary-100;
+	}
+	.variant-glass-primary-900 {
+		@apply bg-primary-900/40 text-primary-400 backdrop-blur-lg dark:bg-primary-100/40 dark:text-primary-600;
+	}
+	.variant-seethrough-primary-900 {
+		@apply bg-primary-900/40 text-white dark:bg-primary-100/40 dark:text-black;
+	}
+
+	.variant-filled-primary-950 {
+		@apply bg-primary-950 text-white dark:bg-primary-50 dark:text-black;
+	}
+	.variant-soft-primary-950 {
+		@apply bg-primary-950 text-primary-500 dark:bg-primary-50 dark:text-primary-500;
+	}
+	.variant-outline-only-primary-950 {
+		@apply ring-[2px] ring-primary-950 dark:ring-[2px] dark:ring-primary-50;
+	}
+	.variant-outline-soft-primary-950 {
+		@apply bg-primary-950 text-primary-500 ring-[2px] ring-primary-800 dark:bg-primary-50 dark:text-primary-500 dark:ring-[2px] dark:ring-primary-200;
+	}
+	.variant-outline-filled-primary-950 {
+		@apply bg-primary-950 text-white ring-[2px] ring-primary-800 dark:bg-primary-50 dark:text-black dark:ring-[2px] dark:ring-primary-200;
+	}
+	.variant-ringed-primary-950 {
+		@apply bg-transparent ring-[1px] ring-primary-950 dark:bg-transparent dark:ring-[1px] dark:ring-primary-50;
+	}
+	.variant-ghost-primary-950 {
+		@apply bg-primary-950/20 ring-[2px] ring-primary-950 dark:bg-primary-50/20 dark:ring-[2px] dark:ring-primary-50;
+	}
+	.variant-glass-primary-950 {
+		@apply bg-primary-950/40 text-primary-500 backdrop-blur-lg dark:bg-primary-50/40 dark:text-primary-500;
+	}
+	.variant-seethrough-primary-950 {
+		@apply bg-primary-950/40 text-white dark:bg-primary-50/40 dark:text-black;
+	}
+
+	/* secondary */
+
+	.variant-filled-secondary-50 {
+		@apply bg-secondary-50 text-black dark:bg-secondary-950 dark:text-white;
+	}
+	.variant-soft-secondary-50 {
+		@apply bg-secondary-50 text-secondary-500 dark:bg-secondary-950 dark:text-secondary-500;
+	}
+	.variant-outline-only-secondary-50 {
+		@apply ring-[2px] ring-secondary-50 dark:ring-[2px] dark:ring-secondary-950;
+	}
+	.variant-outline-soft-secondary-50 {
+		@apply bg-secondary-50 text-secondary-500 ring-[2px] ring-secondary-200 dark:bg-secondary-950 dark:text-secondary-500 dark:ring-[2px] dark:ring-secondary-800;
+	}
+	.variant-outline-filled-secondary-50 {
+		@apply bg-secondary-50 text-black ring-[2px] ring-secondary-200 dark:bg-secondary-950 dark:text-white dark:ring-[2px] dark:ring-secondary-800;
+	}
+	.variant-ringed-secondary-50 {
+		@apply bg-transparent ring-[1px] ring-secondary-50 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-950;
+	}
+	.variant-ghost-secondary-50 {
+		@apply bg-secondary-50/20 ring-[2px] ring-secondary-50 dark:bg-secondary-950/20 dark:ring-[2px] dark:ring-secondary-950;
+	}
+	.variant-glass-secondary-50 {
+		@apply bg-secondary-50/40 text-secondary-500 backdrop-blur-lg dark:bg-secondary-950/40 dark:text-secondary-500;
+	}
+	.variant-seethrough-secondary-50 {
+		@apply bg-secondary-50/40 text-black dark:bg-secondary-950/40 dark:text-white;
+	}
+
+	.variant-filled-secondary-100 {
+		@apply bg-secondary-100 text-black dark:bg-secondary-900 dark:text-white;
+	}
+	.variant-soft-secondary-100 {
+		@apply bg-secondary-100 text-secondary-600 dark:bg-secondary-900 dark:text-secondary-400;
+	}
+	.variant-outline-only-secondary-100 {
+		@apply ring-[2px] ring-secondary-100 dark:ring-[2px] dark:ring-secondary-900;
+	}
+	.variant-outline-soft-secondary-100 {
+		@apply bg-secondary-100 text-secondary-600 ring-[2px] ring-secondary-300 dark:bg-secondary-900 dark:text-secondary-400 dark:ring-[2px] dark:ring-secondary-700;
+	}
+	.variant-outline-filled-secondary-100 {
+		@apply bg-secondary-100 text-black ring-[2px] ring-secondary-300 dark:bg-secondary-900 dark:text-white dark:ring-[2px] dark:ring-secondary-700;
+	}
+	.variant-ringed-secondary-100 {
+		@apply bg-transparent ring-[1px] ring-secondary-100 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-900;
+	}
+	.variant-ghost-secondary-100 {
+		@apply bg-secondary-100/20 ring-[2px] ring-secondary-100 dark:bg-secondary-900/20 dark:ring-[2px] dark:ring-secondary-900;
+	}
+	.variant-glass-secondary-100 {
+		@apply bg-secondary-100/40 text-secondary-600 backdrop-blur-lg dark:bg-secondary-900/40 dark:text-secondary-400;
+	}
+	.variant-seethrough-secondary-100 {
+		@apply bg-secondary-100/40 text-black dark:bg-secondary-900/40 dark:text-white;
+	}
+
+	.variant-filled-secondary-200 {
+		@apply bg-secondary-200 text-black dark:bg-secondary-800 dark:text-white;
+	}
+	.variant-soft-secondary-200 {
+		@apply bg-secondary-200 text-secondary-700 dark:bg-secondary-800 dark:text-secondary-300;
+	}
+	.variant-outline-only-secondary-200 {
+		@apply ring-[2px] ring-secondary-200 dark:ring-[2px] dark:ring-secondary-800;
+	}
+	.variant-outline-soft-secondary-200 {
+		@apply bg-secondary-200 text-secondary-700 ring-[2px] ring-secondary-400 dark:bg-secondary-800 dark:text-secondary-300 dark:ring-[2px] dark:ring-secondary-600;
+	}
+	.variant-outline-filled-secondary-200 {
+		@apply bg-secondary-200 text-black ring-[2px] ring-secondary-400 dark:bg-secondary-800 dark:text-white dark:ring-[2px] dark:ring-secondary-600;
+	}
+	.variant-ringed-secondary-200 {
+		@apply bg-transparent ring-[1px] ring-secondary-200 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-800;
+	}
+	.variant-ghost-secondary-200 {
+		@apply bg-secondary-200/20 ring-[2px] ring-secondary-200 dark:bg-secondary-800/20 dark:ring-[2px] dark:ring-secondary-800;
+	}
+	.variant-glass-secondary-200 {
+		@apply bg-secondary-200/40 text-secondary-700 backdrop-blur-lg dark:bg-secondary-800/40 dark:text-secondary-300;
+	}
+	.variant-seethrough-secondary-200 {
+		@apply bg-secondary-200/40 text-black dark:bg-secondary-800/40 dark:text-white;
+	}
+
+	.variant-filled-secondary-300 {
+		@apply bg-secondary-300 text-black dark:bg-secondary-700 dark:text-white;
+	}
+	.variant-soft-secondary-300 {
+		@apply bg-secondary-300 text-secondary-800 dark:bg-secondary-700 dark:text-secondary-200;
+	}
+	.variant-outline-only-secondary-300 {
+		@apply ring-[2px] ring-secondary-300 dark:ring-[2px] dark:ring-secondary-700;
+	}
+	.variant-outline-soft-secondary-300 {
+		@apply bg-secondary-300 text-secondary-800 ring-[2px] ring-secondary-500 dark:bg-secondary-700 dark:text-secondary-200 dark:ring-[2px] dark:ring-secondary-500;
+	}
+	.variant-outline-filled-secondary-300 {
+		@apply bg-secondary-300 text-black ring-[2px] ring-secondary-500 dark:bg-secondary-700 dark:text-white dark:ring-[2px] dark:ring-secondary-500;
+	}
+	.variant-ringed-secondary-300 {
+		@apply bg-transparent ring-[1px] ring-secondary-300 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-700;
+	}
+	.variant-ghost-secondary-300 {
+		@apply bg-secondary-300/20 ring-[2px] ring-secondary-300 dark:bg-secondary-700/20 dark:ring-[2px] dark:ring-secondary-700;
+	}
+	.variant-glass-secondary-300 {
+		@apply bg-secondary-300/40 text-secondary-800 backdrop-blur-lg dark:bg-secondary-700/40 dark:text-secondary-200;
+	}
+	.variant-seethrough-secondary-300 {
+		@apply bg-secondary-300/40 text-black dark:bg-secondary-700/40 dark:text-white;
+	}
+
+	.variant-filled-secondary-400 {
+		@apply bg-secondary-400 text-black dark:bg-secondary-600 dark:text-white;
+	}
+	.variant-soft-secondary-400 {
+		@apply bg-secondary-400 text-secondary-900 dark:bg-secondary-600 dark:text-secondary-100;
+	}
+	.variant-outline-only-secondary-400 {
+		@apply ring-[2px] ring-secondary-400 dark:ring-[2px] dark:ring-secondary-600;
+	}
+	.variant-outline-soft-secondary-400 {
+		@apply bg-secondary-400 text-secondary-900 ring-[2px] ring-secondary-600 dark:bg-secondary-600 dark:text-secondary-100 dark:ring-[2px] dark:ring-secondary-400;
+	}
+	.variant-outline-filled-secondary-400 {
+		@apply bg-secondary-400 text-black ring-[2px] ring-secondary-600 dark:bg-secondary-600 dark:text-white dark:ring-[2px] dark:ring-secondary-400;
+	}
+	.variant-ringed-secondary-400 {
+		@apply bg-transparent ring-[1px] ring-secondary-400 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-600;
+	}
+	.variant-ghost-secondary-400 {
+		@apply bg-secondary-400/20 ring-[2px] ring-secondary-400 dark:bg-secondary-600/20 dark:ring-[2px] dark:ring-secondary-600;
+	}
+	.variant-glass-secondary-400 {
+		@apply bg-secondary-400/40 text-secondary-900 backdrop-blur-lg dark:bg-secondary-600/40 dark:text-secondary-100;
+	}
+	.variant-seethrough-secondary-400 {
+		@apply bg-secondary-400/40 text-black dark:bg-secondary-600/40 dark:text-white;
+	}
+
+	.variant-filled-secondary-500 {
+		@apply bg-secondary-500 text-white dark:bg-secondary-500 dark:text-white;
+	}
+	.variant-soft-secondary-500 {
+		@apply bg-secondary-500 text-secondary-50 dark:bg-secondary-500 dark:text-secondary-50;
+	}
+	.variant-outline-only-secondary-500 {
+		@apply ring-[2px] ring-secondary-500 dark:ring-[2px] dark:ring-secondary-500;
+	}
+	.variant-outline-soft-secondary-500 {
+		@apply bg-secondary-500 text-secondary-50 ring-[2px] ring-secondary-300 dark:bg-secondary-500 dark:text-secondary-50 dark:ring-[2px] dark:ring-secondary-300;
+	}
+	.variant-outline-filled-secondary-500 {
+		@apply bg-secondary-500 text-white ring-[2px] ring-secondary-300 dark:bg-secondary-500 dark:text-white dark:ring-[2px] dark:ring-secondary-300;
+	}
+	.variant-ringed-secondary-500 {
+		@apply bg-transparent ring-[1px] ring-secondary-500 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-500;
+	}
+	.variant-ghost-secondary-500 {
+		@apply bg-secondary-500/20 ring-[2px] ring-secondary-500 dark:bg-secondary-500/20 dark:ring-[2px] dark:ring-secondary-500;
+	}
+	.variant-glass-secondary-500 {
+		@apply bg-secondary-500/40 text-secondary-50 backdrop-blur-lg dark:bg-secondary-500/40 dark:text-secondary-50;
+	}
+	.variant-seethrough-secondary-500 {
+		@apply bg-secondary-500/40 text-white dark:bg-secondary-500/40 dark:text-white;
+	}
+
+	.variant-filled-secondary-600 {
+		@apply bg-secondary-600 text-white dark:bg-secondary-400 dark:text-black;
+	}
+	.variant-soft-secondary-600 {
+		@apply bg-secondary-600 text-secondary-100 dark:bg-secondary-400 dark:text-secondary-900;
+	}
+	.variant-outline-only-secondary-600 {
+		@apply ring-[2px] ring-secondary-600 dark:ring-[2px] dark:ring-secondary-400;
+	}
+	.variant-outline-soft-secondary-600 {
+		@apply bg-secondary-600 text-secondary-100 ring-[2px] ring-secondary-400 dark:bg-secondary-400 dark:text-secondary-900 dark:ring-[2px] dark:ring-secondary-600;
+	}
+	.variant-outline-filled-secondary-600 {
+		@apply bg-secondary-600 text-white ring-[2px] ring-secondary-400 dark:bg-secondary-400 dark:text-black dark:ring-[2px] dark:ring-secondary-600;
+	}
+	.variant-ringed-secondary-600 {
+		@apply bg-transparent ring-[1px] ring-secondary-600 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-400;
+	}
+	.variant-ghost-secondary-600 {
+		@apply bg-secondary-600/20 ring-[2px] ring-secondary-600 dark:bg-secondary-400/20 dark:ring-[2px] dark:ring-secondary-400;
+	}
+	.variant-glass-secondary-600 {
+		@apply bg-secondary-600/40 text-secondary-100 backdrop-blur-lg dark:bg-secondary-400/40 dark:text-secondary-900;
+	}
+	.variant-seethrough-secondary-600 {
+		@apply bg-secondary-600/40 text-white dark:bg-secondary-400/40 dark:text-black;
+	}
+
+	.variant-filled-secondary-700 {
+		@apply bg-secondary-700 text-white dark:bg-secondary-300 dark:text-black;
+	}
+	.variant-soft-secondary-700 {
+		@apply bg-secondary-700 text-secondary-200 dark:bg-secondary-300 dark:text-secondary-800;
+	}
+	.variant-outline-only-secondary-700 {
+		@apply ring-[2px] ring-secondary-700 dark:ring-[2px] dark:ring-secondary-300;
+	}
+	.variant-outline-soft-secondary-700 {
+		@apply bg-secondary-700 text-secondary-200 ring-[2px] ring-secondary-500 dark:bg-secondary-300 dark:text-secondary-800 dark:ring-[2px] dark:ring-secondary-500;
+	}
+	.variant-outline-filled-secondary-700 {
+		@apply bg-secondary-700 text-white ring-[2px] ring-secondary-500 dark:bg-secondary-300 dark:text-black dark:ring-[2px] dark:ring-secondary-500;
+	}
+	.variant-ringed-secondary-700 {
+		@apply bg-transparent ring-[1px] ring-secondary-700 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-300;
+	}
+	.variant-ghost-secondary-700 {
+		@apply bg-secondary-700/20 ring-[2px] ring-secondary-700 dark:bg-secondary-300/20 dark:ring-[2px] dark:ring-secondary-300;
+	}
+	.variant-glass-secondary-700 {
+		@apply bg-secondary-700/40 text-secondary-200 backdrop-blur-lg dark:bg-secondary-300/40 dark:text-secondary-800;
+	}
+	.variant-seethrough-secondary-700 {
+		@apply bg-secondary-700/40 text-white dark:bg-secondary-300/40 dark:text-black;
+	}
+
+	.variant-filled-secondary-800 {
+		@apply bg-secondary-800 text-white dark:bg-secondary-200 dark:text-black;
+	}
+	.variant-soft-secondary-800 {
+		@apply bg-secondary-800 text-secondary-300 dark:bg-secondary-200 dark:text-secondary-700;
+	}
+	.variant-outline-only-secondary-800 {
+		@apply ring-[2px] ring-secondary-800 dark:ring-[2px] dark:ring-secondary-200;
+	}
+	.variant-outline-soft-secondary-800 {
+		@apply bg-secondary-800 text-secondary-300 ring-[2px] ring-secondary-600 dark:bg-secondary-200 dark:text-secondary-700 dark:ring-[2px] dark:ring-secondary-400;
+	}
+	.variant-outline-filled-secondary-800 {
+		@apply bg-secondary-800 text-white ring-[2px] ring-secondary-600 dark:bg-secondary-200 dark:text-black dark:ring-[2px] dark:ring-secondary-400;
+	}
+	.variant-ringed-secondary-800 {
+		@apply bg-transparent ring-[1px] ring-secondary-800 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-200;
+	}
+	.variant-ghost-secondary-800 {
+		@apply bg-secondary-800/20 ring-[2px] ring-secondary-800 dark:bg-secondary-200/20 dark:ring-[2px] dark:ring-secondary-200;
+	}
+	.variant-glass-secondary-800 {
+		@apply bg-secondary-800/40 text-secondary-300 backdrop-blur-lg dark:bg-secondary-200/40 dark:text-secondary-700;
+	}
+	.variant-seethrough-secondary-800 {
+		@apply bg-secondary-800/40 text-white dark:bg-secondary-200/40 dark:text-black;
+	}
+
+	.variant-filled-secondary-900 {
+		@apply bg-secondary-900 text-white dark:bg-secondary-100 dark:text-black;
+	}
+	.variant-soft-secondary-900 {
+		@apply bg-secondary-900 text-secondary-400 dark:bg-secondary-100 dark:text-secondary-600;
+	}
+	.variant-outline-only-secondary-900 {
+		@apply ring-[2px] ring-secondary-900 dark:ring-[2px] dark:ring-secondary-100;
+	}
+	.variant-outline-soft-secondary-900 {
+		@apply bg-secondary-900 text-secondary-400 ring-[2px] ring-secondary-700 dark:bg-secondary-100 dark:text-secondary-600 dark:ring-[2px] dark:ring-secondary-300;
+	}
+	.variant-outline-filled-secondary-900 {
+		@apply bg-secondary-900 text-white ring-[2px] ring-secondary-700 dark:bg-secondary-100 dark:text-black dark:ring-[2px] dark:ring-secondary-300;
+	}
+	.variant-ringed-secondary-900 {
+		@apply bg-transparent ring-[1px] ring-secondary-900 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-100;
+	}
+	.variant-ghost-secondary-900 {
+		@apply bg-secondary-900/20 ring-[2px] ring-secondary-900 dark:bg-secondary-100/20 dark:ring-[2px] dark:ring-secondary-100;
+	}
+	.variant-glass-secondary-900 {
+		@apply bg-secondary-900/40 text-secondary-400 backdrop-blur-lg dark:bg-secondary-100/40 dark:text-secondary-600;
+	}
+	.variant-seethrough-secondary-900 {
+		@apply bg-secondary-900/40 text-white dark:bg-secondary-100/40 dark:text-black;
+	}
+
+	.variant-filled-secondary-950 {
+		@apply bg-secondary-950 text-white dark:bg-secondary-50 dark:text-black;
+	}
+	.variant-soft-secondary-950 {
+		@apply bg-secondary-950 text-secondary-500 dark:bg-secondary-50 dark:text-secondary-500;
+	}
+	.variant-outline-only-secondary-950 {
+		@apply ring-[2px] ring-secondary-950 dark:ring-[2px] dark:ring-secondary-50;
+	}
+	.variant-outline-soft-secondary-950 {
+		@apply bg-secondary-950 text-secondary-500 ring-[2px] ring-secondary-800 dark:bg-secondary-50 dark:text-secondary-500 dark:ring-[2px] dark:ring-secondary-200;
+	}
+	.variant-outline-filled-secondary-950 {
+		@apply bg-secondary-950 text-white ring-[2px] ring-secondary-800 dark:bg-secondary-50 dark:text-black dark:ring-[2px] dark:ring-secondary-200;
+	}
+	.variant-ringed-secondary-950 {
+		@apply bg-transparent ring-[1px] ring-secondary-950 dark:bg-transparent dark:ring-[1px] dark:ring-secondary-50;
+	}
+	.variant-ghost-secondary-950 {
+		@apply bg-secondary-950/20 ring-[2px] ring-secondary-950 dark:bg-secondary-50/20 dark:ring-[2px] dark:ring-secondary-50;
+	}
+	.variant-glass-secondary-950 {
+		@apply bg-secondary-950/40 text-secondary-500 backdrop-blur-lg dark:bg-secondary-50/40 dark:text-secondary-500;
+	}
+	.variant-seethrough-secondary-950 {
+		@apply bg-secondary-950/40 text-white dark:bg-secondary-50/40 dark:text-black;
+	}
+
+	/* tertiary */
+
+	.variant-filled-tertiary-50 {
+		@apply bg-tertiary-50 text-black dark:bg-tertiary-950 dark:text-white;
+	}
+	.variant-soft-tertiary-50 {
+		@apply bg-tertiary-50 text-tertiary-500 dark:bg-tertiary-950 dark:text-tertiary-500;
+	}
+	.variant-outline-only-tertiary-50 {
+		@apply ring-[2px] ring-tertiary-50 dark:ring-[2px] dark:ring-tertiary-950;
+	}
+	.variant-outline-soft-tertiary-50 {
+		@apply bg-tertiary-50 text-tertiary-500 ring-[2px] ring-tertiary-200 dark:bg-tertiary-950 dark:text-tertiary-500 dark:ring-[2px] dark:ring-tertiary-800;
+	}
+	.variant-outline-filled-tertiary-50 {
+		@apply bg-tertiary-50 text-black ring-[2px] ring-tertiary-200 dark:bg-tertiary-950 dark:text-white dark:ring-[2px] dark:ring-tertiary-800;
+	}
+	.variant-ringed-tertiary-50 {
+		@apply bg-transparent ring-[1px] ring-tertiary-50 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-950;
+	}
+	.variant-ghost-tertiary-50 {
+		@apply bg-tertiary-50/20 ring-[2px] ring-tertiary-50 dark:bg-tertiary-950/20 dark:ring-[2px] dark:ring-tertiary-950;
+	}
+	.variant-glass-tertiary-50 {
+		@apply bg-tertiary-50/40 text-tertiary-500 backdrop-blur-lg dark:bg-tertiary-950/40 dark:text-tertiary-500;
+	}
+	.variant-seethrough-tertiary-50 {
+		@apply bg-tertiary-50/40 text-black dark:bg-tertiary-950/40 dark:text-white;
+	}
+
+	.variant-filled-tertiary-100 {
+		@apply bg-tertiary-100 text-black dark:bg-tertiary-900 dark:text-white;
+	}
+	.variant-soft-tertiary-100 {
+		@apply bg-tertiary-100 text-tertiary-600 dark:bg-tertiary-900 dark:text-tertiary-400;
+	}
+	.variant-outline-only-tertiary-100 {
+		@apply ring-[2px] ring-tertiary-100 dark:ring-[2px] dark:ring-tertiary-900;
+	}
+	.variant-outline-soft-tertiary-100 {
+		@apply bg-tertiary-100 text-tertiary-600 ring-[2px] ring-tertiary-300 dark:bg-tertiary-900 dark:text-tertiary-400 dark:ring-[2px] dark:ring-tertiary-700;
+	}
+	.variant-outline-filled-tertiary-100 {
+		@apply bg-tertiary-100 text-black ring-[2px] ring-tertiary-300 dark:bg-tertiary-900 dark:text-white dark:ring-[2px] dark:ring-tertiary-700;
+	}
+	.variant-ringed-tertiary-100 {
+		@apply bg-transparent ring-[1px] ring-tertiary-100 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-900;
+	}
+	.variant-ghost-tertiary-100 {
+		@apply bg-tertiary-100/20 ring-[2px] ring-tertiary-100 dark:bg-tertiary-900/20 dark:ring-[2px] dark:ring-tertiary-900;
+	}
+	.variant-glass-tertiary-100 {
+		@apply bg-tertiary-100/40 text-tertiary-600 backdrop-blur-lg dark:bg-tertiary-900/40 dark:text-tertiary-400;
+	}
+	.variant-seethrough-tertiary-100 {
+		@apply bg-tertiary-100/40 text-black dark:bg-tertiary-900/40 dark:text-white;
+	}
+
+	.variant-filled-tertiary-200 {
+		@apply bg-tertiary-200 text-black dark:bg-tertiary-800 dark:text-white;
+	}
+	.variant-soft-tertiary-200 {
+		@apply bg-tertiary-200 text-tertiary-700 dark:bg-tertiary-800 dark:text-tertiary-300;
+	}
+	.variant-outline-only-tertiary-200 {
+		@apply ring-[2px] ring-tertiary-200 dark:ring-[2px] dark:ring-tertiary-800;
+	}
+	.variant-outline-soft-tertiary-200 {
+		@apply bg-tertiary-200 text-tertiary-700 ring-[2px] ring-tertiary-400 dark:bg-tertiary-800 dark:text-tertiary-300 dark:ring-[2px] dark:ring-tertiary-600;
+	}
+	.variant-outline-filled-tertiary-200 {
+		@apply bg-tertiary-200 text-black ring-[2px] ring-tertiary-400 dark:bg-tertiary-800 dark:text-white dark:ring-[2px] dark:ring-tertiary-600;
+	}
+	.variant-ringed-tertiary-200 {
+		@apply bg-transparent ring-[1px] ring-tertiary-200 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-800;
+	}
+	.variant-ghost-tertiary-200 {
+		@apply bg-tertiary-200/20 ring-[2px] ring-tertiary-200 dark:bg-tertiary-800/20 dark:ring-[2px] dark:ring-tertiary-800;
+	}
+	.variant-glass-tertiary-200 {
+		@apply bg-tertiary-200/40 text-tertiary-700 backdrop-blur-lg dark:bg-tertiary-800/40 dark:text-tertiary-300;
+	}
+	.variant-seethrough-tertiary-200 {
+		@apply bg-tertiary-200/40 text-black dark:bg-tertiary-800/40 dark:text-white;
+	}
+
+	.variant-filled-tertiary-300 {
+		@apply bg-tertiary-300 text-black dark:bg-tertiary-700 dark:text-white;
+	}
+	.variant-soft-tertiary-300 {
+		@apply bg-tertiary-300 text-tertiary-800 dark:bg-tertiary-700 dark:text-tertiary-200;
+	}
+	.variant-outline-only-tertiary-300 {
+		@apply ring-[2px] ring-tertiary-300 dark:ring-[2px] dark:ring-tertiary-700;
+	}
+	.variant-outline-soft-tertiary-300 {
+		@apply bg-tertiary-300 text-tertiary-800 ring-[2px] ring-tertiary-500 dark:bg-tertiary-700 dark:text-tertiary-200 dark:ring-[2px] dark:ring-tertiary-500;
+	}
+	.variant-outline-filled-tertiary-300 {
+		@apply bg-tertiary-300 text-black ring-[2px] ring-tertiary-500 dark:bg-tertiary-700 dark:text-white dark:ring-[2px] dark:ring-tertiary-500;
+	}
+	.variant-ringed-tertiary-300 {
+		@apply bg-transparent ring-[1px] ring-tertiary-300 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-700;
+	}
+	.variant-ghost-tertiary-300 {
+		@apply bg-tertiary-300/20 ring-[2px] ring-tertiary-300 dark:bg-tertiary-700/20 dark:ring-[2px] dark:ring-tertiary-700;
+	}
+	.variant-glass-tertiary-300 {
+		@apply bg-tertiary-300/40 text-tertiary-800 backdrop-blur-lg dark:bg-tertiary-700/40 dark:text-tertiary-200;
+	}
+	.variant-seethrough-tertiary-300 {
+		@apply bg-tertiary-300/40 text-black dark:bg-tertiary-700/40 dark:text-white;
+	}
+
+	.variant-filled-tertiary-400 {
+		@apply bg-tertiary-400 text-black dark:bg-tertiary-600 dark:text-white;
+	}
+	.variant-soft-tertiary-400 {
+		@apply bg-tertiary-400 text-tertiary-900 dark:bg-tertiary-600 dark:text-tertiary-100;
+	}
+	.variant-outline-only-tertiary-400 {
+		@apply ring-[2px] ring-tertiary-400 dark:ring-[2px] dark:ring-tertiary-600;
+	}
+	.variant-outline-soft-tertiary-400 {
+		@apply bg-tertiary-400 text-tertiary-900 ring-[2px] ring-tertiary-600 dark:bg-tertiary-600 dark:text-tertiary-100 dark:ring-[2px] dark:ring-tertiary-400;
+	}
+	.variant-outline-filled-tertiary-400 {
+		@apply bg-tertiary-400 text-black ring-[2px] ring-tertiary-600 dark:bg-tertiary-600 dark:text-white dark:ring-[2px] dark:ring-tertiary-400;
+	}
+	.variant-ringed-tertiary-400 {
+		@apply bg-transparent ring-[1px] ring-tertiary-400 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-600;
+	}
+	.variant-ghost-tertiary-400 {
+		@apply bg-tertiary-400/20 ring-[2px] ring-tertiary-400 dark:bg-tertiary-600/20 dark:ring-[2px] dark:ring-tertiary-600;
+	}
+	.variant-glass-tertiary-400 {
+		@apply bg-tertiary-400/40 text-tertiary-900 backdrop-blur-lg dark:bg-tertiary-600/40 dark:text-tertiary-100;
+	}
+	.variant-seethrough-tertiary-400 {
+		@apply bg-tertiary-400/40 text-black dark:bg-tertiary-600/40 dark:text-white;
+	}
+
+	.variant-filled-tertiary-500 {
+		@apply bg-tertiary-500 text-white dark:bg-tertiary-500 dark:text-white;
+	}
+	.variant-soft-tertiary-500 {
+		@apply bg-tertiary-500 text-tertiary-50 dark:bg-tertiary-500 dark:text-tertiary-50;
+	}
+	.variant-outline-only-tertiary-500 {
+		@apply ring-[2px] ring-tertiary-500 dark:ring-[2px] dark:ring-tertiary-500;
+	}
+	.variant-outline-soft-tertiary-500 {
+		@apply bg-tertiary-500 text-tertiary-50 ring-[2px] ring-tertiary-300 dark:bg-tertiary-500 dark:text-tertiary-50 dark:ring-[2px] dark:ring-tertiary-300;
+	}
+	.variant-outline-filled-tertiary-500 {
+		@apply bg-tertiary-500 text-white ring-[2px] ring-tertiary-300 dark:bg-tertiary-500 dark:text-white dark:ring-[2px] dark:ring-tertiary-300;
+	}
+	.variant-ringed-tertiary-500 {
+		@apply bg-transparent ring-[1px] ring-tertiary-500 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-500;
+	}
+	.variant-ghost-tertiary-500 {
+		@apply bg-tertiary-500/20 ring-[2px] ring-tertiary-500 dark:bg-tertiary-500/20 dark:ring-[2px] dark:ring-tertiary-500;
+	}
+	.variant-glass-tertiary-500 {
+		@apply bg-tertiary-500/40 text-tertiary-50 backdrop-blur-lg dark:bg-tertiary-500/40 dark:text-tertiary-50;
+	}
+	.variant-seethrough-tertiary-500 {
+		@apply bg-tertiary-500/40 text-white dark:bg-tertiary-500/40 dark:text-white;
+	}
+
+	.variant-filled-tertiary-600 {
+		@apply bg-tertiary-600 text-white dark:bg-tertiary-400 dark:text-black;
+	}
+	.variant-soft-tertiary-600 {
+		@apply bg-tertiary-600 text-tertiary-100 dark:bg-tertiary-400 dark:text-tertiary-900;
+	}
+	.variant-outline-only-tertiary-600 {
+		@apply ring-[2px] ring-tertiary-600 dark:ring-[2px] dark:ring-tertiary-400;
+	}
+	.variant-outline-soft-tertiary-600 {
+		@apply bg-tertiary-600 text-tertiary-100 ring-[2px] ring-tertiary-400 dark:bg-tertiary-400 dark:text-tertiary-900 dark:ring-[2px] dark:ring-tertiary-600;
+	}
+	.variant-outline-filled-tertiary-600 {
+		@apply bg-tertiary-600 text-white ring-[2px] ring-tertiary-400 dark:bg-tertiary-400 dark:text-black dark:ring-[2px] dark:ring-tertiary-600;
+	}
+	.variant-ringed-tertiary-600 {
+		@apply bg-transparent ring-[1px] ring-tertiary-600 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-400;
+	}
+	.variant-ghost-tertiary-600 {
+		@apply bg-tertiary-600/20 ring-[2px] ring-tertiary-600 dark:bg-tertiary-400/20 dark:ring-[2px] dark:ring-tertiary-400;
+	}
+	.variant-glass-tertiary-600 {
+		@apply bg-tertiary-600/40 text-tertiary-100 backdrop-blur-lg dark:bg-tertiary-400/40 dark:text-tertiary-900;
+	}
+	.variant-seethrough-tertiary-600 {
+		@apply bg-tertiary-600/40 text-white dark:bg-tertiary-400/40 dark:text-black;
+	}
+
+	.variant-filled-tertiary-700 {
+		@apply bg-tertiary-700 text-white dark:bg-tertiary-300 dark:text-black;
+	}
+	.variant-soft-tertiary-700 {
+		@apply bg-tertiary-700 text-tertiary-200 dark:bg-tertiary-300 dark:text-tertiary-800;
+	}
+	.variant-outline-only-tertiary-700 {
+		@apply ring-[2px] ring-tertiary-700 dark:ring-[2px] dark:ring-tertiary-300;
+	}
+	.variant-outline-soft-tertiary-700 {
+		@apply bg-tertiary-700 text-tertiary-200 ring-[2px] ring-tertiary-500 dark:bg-tertiary-300 dark:text-tertiary-800 dark:ring-[2px] dark:ring-tertiary-500;
+	}
+	.variant-outline-filled-tertiary-700 {
+		@apply bg-tertiary-700 text-white ring-[2px] ring-tertiary-500 dark:bg-tertiary-300 dark:text-black dark:ring-[2px] dark:ring-tertiary-500;
+	}
+	.variant-ringed-tertiary-700 {
+		@apply bg-transparent ring-[1px] ring-tertiary-700 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-300;
+	}
+	.variant-ghost-tertiary-700 {
+		@apply bg-tertiary-700/20 ring-[2px] ring-tertiary-700 dark:bg-tertiary-300/20 dark:ring-[2px] dark:ring-tertiary-300;
+	}
+	.variant-glass-tertiary-700 {
+		@apply bg-tertiary-700/40 text-tertiary-200 backdrop-blur-lg dark:bg-tertiary-300/40 dark:text-tertiary-800;
+	}
+	.variant-seethrough-tertiary-700 {
+		@apply bg-tertiary-700/40 text-white dark:bg-tertiary-300/40 dark:text-black;
+	}
+
+	.variant-filled-tertiary-800 {
+		@apply bg-tertiary-800 text-white dark:bg-tertiary-200 dark:text-black;
+	}
+	.variant-soft-tertiary-800 {
+		@apply bg-tertiary-800 text-tertiary-300 dark:bg-tertiary-200 dark:text-tertiary-700;
+	}
+	.variant-outline-only-tertiary-800 {
+		@apply ring-[2px] ring-tertiary-800 dark:ring-[2px] dark:ring-tertiary-200;
+	}
+	.variant-outline-soft-tertiary-800 {
+		@apply bg-tertiary-800 text-tertiary-300 ring-[2px] ring-tertiary-600 dark:bg-tertiary-200 dark:text-tertiary-700 dark:ring-[2px] dark:ring-tertiary-400;
+	}
+	.variant-outline-filled-tertiary-800 {
+		@apply bg-tertiary-800 text-white ring-[2px] ring-tertiary-600 dark:bg-tertiary-200 dark:text-black dark:ring-[2px] dark:ring-tertiary-400;
+	}
+	.variant-ringed-tertiary-800 {
+		@apply bg-transparent ring-[1px] ring-tertiary-800 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-200;
+	}
+	.variant-ghost-tertiary-800 {
+		@apply bg-tertiary-800/20 ring-[2px] ring-tertiary-800 dark:bg-tertiary-200/20 dark:ring-[2px] dark:ring-tertiary-200;
+	}
+	.variant-glass-tertiary-800 {
+		@apply bg-tertiary-800/40 text-tertiary-300 backdrop-blur-lg dark:bg-tertiary-200/40 dark:text-tertiary-700;
+	}
+	.variant-seethrough-tertiary-800 {
+		@apply bg-tertiary-800/40 text-white dark:bg-tertiary-200/40 dark:text-black;
+	}
+
+	.variant-filled-tertiary-900 {
+		@apply bg-tertiary-900 text-white dark:bg-tertiary-100 dark:text-black;
+	}
+	.variant-soft-tertiary-900 {
+		@apply bg-tertiary-900 text-tertiary-400 dark:bg-tertiary-100 dark:text-tertiary-600;
+	}
+	.variant-outline-only-tertiary-900 {
+		@apply ring-[2px] ring-tertiary-900 dark:ring-[2px] dark:ring-tertiary-100;
+	}
+	.variant-outline-soft-tertiary-900 {
+		@apply bg-tertiary-900 text-tertiary-400 ring-[2px] ring-tertiary-700 dark:bg-tertiary-100 dark:text-tertiary-600 dark:ring-[2px] dark:ring-tertiary-300;
+	}
+	.variant-outline-filled-tertiary-900 {
+		@apply bg-tertiary-900 text-white ring-[2px] ring-tertiary-700 dark:bg-tertiary-100 dark:text-black dark:ring-[2px] dark:ring-tertiary-300;
+	}
+	.variant-ringed-tertiary-900 {
+		@apply bg-transparent ring-[1px] ring-tertiary-900 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-100;
+	}
+	.variant-ghost-tertiary-900 {
+		@apply bg-tertiary-900/20 ring-[2px] ring-tertiary-900 dark:bg-tertiary-100/20 dark:ring-[2px] dark:ring-tertiary-100;
+	}
+	.variant-glass-tertiary-900 {
+		@apply bg-tertiary-900/40 text-tertiary-400 backdrop-blur-lg dark:bg-tertiary-100/40 dark:text-tertiary-600;
+	}
+	.variant-seethrough-tertiary-900 {
+		@apply bg-tertiary-900/40 text-white dark:bg-tertiary-100/40 dark:text-black;
+	}
+
+	.variant-filled-tertiary-950 {
+		@apply bg-tertiary-950 text-white dark:bg-tertiary-50 dark:text-black;
+	}
+	.variant-soft-tertiary-950 {
+		@apply bg-tertiary-950 text-tertiary-500 dark:bg-tertiary-50 dark:text-tertiary-500;
+	}
+	.variant-outline-only-tertiary-950 {
+		@apply ring-[2px] ring-tertiary-950 dark:ring-[2px] dark:ring-tertiary-50;
+	}
+	.variant-outline-soft-tertiary-950 {
+		@apply bg-tertiary-950 text-tertiary-500 ring-[2px] ring-tertiary-800 dark:bg-tertiary-50 dark:text-tertiary-500 dark:ring-[2px] dark:ring-tertiary-200;
+	}
+	.variant-outline-filled-tertiary-950 {
+		@apply bg-tertiary-950 text-white ring-[2px] ring-tertiary-800 dark:bg-tertiary-50 dark:text-black dark:ring-[2px] dark:ring-tertiary-200;
+	}
+	.variant-ringed-tertiary-950 {
+		@apply bg-transparent ring-[1px] ring-tertiary-950 dark:bg-transparent dark:ring-[1px] dark:ring-tertiary-50;
+	}
+	.variant-ghost-tertiary-950 {
+		@apply bg-tertiary-950/20 ring-[2px] ring-tertiary-950 dark:bg-tertiary-50/20 dark:ring-[2px] dark:ring-tertiary-50;
+	}
+	.variant-glass-tertiary-950 {
+		@apply bg-tertiary-950/40 text-tertiary-500 backdrop-blur-lg dark:bg-tertiary-50/40 dark:text-tertiary-500;
+	}
+	.variant-seethrough-tertiary-950 {
+		@apply bg-tertiary-950/40 text-white dark:bg-tertiary-50/40 dark:text-black;
+	}
+
+	/* success */
+
+	.variant-filled-success-50 {
+		@apply bg-success-50 text-black dark:bg-success-950 dark:text-white;
+	}
+	.variant-soft-success-50 {
+		@apply bg-success-50 text-success-500 dark:bg-success-950 dark:text-success-500;
+	}
+	.variant-outline-only-success-50 {
+		@apply ring-[2px] ring-success-50 dark:ring-[2px] dark:ring-success-950;
+	}
+	.variant-outline-soft-success-50 {
+		@apply bg-success-50 text-success-500 ring-[2px] ring-success-200 dark:bg-success-950 dark:text-success-500 dark:ring-[2px] dark:ring-success-800;
+	}
+	.variant-outline-filled-success-50 {
+		@apply bg-success-50 text-black ring-[2px] ring-success-200 dark:bg-success-950 dark:text-white dark:ring-[2px] dark:ring-success-800;
+	}
+	.variant-ringed-success-50 {
+		@apply bg-transparent ring-[1px] ring-success-50 dark:bg-transparent dark:ring-[1px] dark:ring-success-950;
+	}
+	.variant-ghost-success-50 {
+		@apply bg-success-50/20 ring-[2px] ring-success-50 dark:bg-success-950/20 dark:ring-[2px] dark:ring-success-950;
+	}
+	.variant-glass-success-50 {
+		@apply bg-success-50/40 text-success-500 backdrop-blur-lg dark:bg-success-950/40 dark:text-success-500;
+	}
+	.variant-seethrough-success-50 {
+		@apply bg-success-50/40 text-black dark:bg-success-950/40 dark:text-white;
+	}
+
+	.variant-filled-success-100 {
+		@apply bg-success-100 text-black dark:bg-success-900 dark:text-white;
+	}
+	.variant-soft-success-100 {
+		@apply bg-success-100 text-success-600 dark:bg-success-900 dark:text-success-400;
+	}
+	.variant-outline-only-success-100 {
+		@apply ring-[2px] ring-success-100 dark:ring-[2px] dark:ring-success-900;
+	}
+	.variant-outline-soft-success-100 {
+		@apply bg-success-100 text-success-600 ring-[2px] ring-success-300 dark:bg-success-900 dark:text-success-400 dark:ring-[2px] dark:ring-success-700;
+	}
+	.variant-outline-filled-success-100 {
+		@apply bg-success-100 text-black ring-[2px] ring-success-300 dark:bg-success-900 dark:text-white dark:ring-[2px] dark:ring-success-700;
+	}
+	.variant-ringed-success-100 {
+		@apply bg-transparent ring-[1px] ring-success-100 dark:bg-transparent dark:ring-[1px] dark:ring-success-900;
+	}
+	.variant-ghost-success-100 {
+		@apply bg-success-100/20 ring-[2px] ring-success-100 dark:bg-success-900/20 dark:ring-[2px] dark:ring-success-900;
+	}
+	.variant-glass-success-100 {
+		@apply bg-success-100/40 text-success-600 backdrop-blur-lg dark:bg-success-900/40 dark:text-success-400;
+	}
+	.variant-seethrough-success-100 {
+		@apply bg-success-100/40 text-black dark:bg-success-900/40 dark:text-white;
+	}
+
+	.variant-filled-success-200 {
+		@apply bg-success-200 text-black dark:bg-success-800 dark:text-white;
+	}
+	.variant-soft-success-200 {
+		@apply bg-success-200 text-success-700 dark:bg-success-800 dark:text-success-300;
+	}
+	.variant-outline-only-success-200 {
+		@apply ring-[2px] ring-success-200 dark:ring-[2px] dark:ring-success-800;
+	}
+	.variant-outline-soft-success-200 {
+		@apply bg-success-200 text-success-700 ring-[2px] ring-success-400 dark:bg-success-800 dark:text-success-300 dark:ring-[2px] dark:ring-success-600;
+	}
+	.variant-outline-filled-success-200 {
+		@apply bg-success-200 text-black ring-[2px] ring-success-400 dark:bg-success-800 dark:text-white dark:ring-[2px] dark:ring-success-600;
+	}
+	.variant-ringed-success-200 {
+		@apply bg-transparent ring-[1px] ring-success-200 dark:bg-transparent dark:ring-[1px] dark:ring-success-800;
+	}
+	.variant-ghost-success-200 {
+		@apply bg-success-200/20 ring-[2px] ring-success-200 dark:bg-success-800/20 dark:ring-[2px] dark:ring-success-800;
+	}
+	.variant-glass-success-200 {
+		@apply bg-success-200/40 text-success-700 backdrop-blur-lg dark:bg-success-800/40 dark:text-success-300;
+	}
+	.variant-seethrough-success-200 {
+		@apply bg-success-200/40 text-black dark:bg-success-800/40 dark:text-white;
+	}
+
+	.variant-filled-success-300 {
+		@apply bg-success-300 text-black dark:bg-success-700 dark:text-white;
+	}
+	.variant-soft-success-300 {
+		@apply bg-success-300 text-success-800 dark:bg-success-700 dark:text-success-200;
+	}
+	.variant-outline-only-success-300 {
+		@apply ring-[2px] ring-success-300 dark:ring-[2px] dark:ring-success-700;
+	}
+	.variant-outline-soft-success-300 {
+		@apply bg-success-300 text-success-800 ring-[2px] ring-success-500 dark:bg-success-700 dark:text-success-200 dark:ring-[2px] dark:ring-success-500;
+	}
+	.variant-outline-filled-success-300 {
+		@apply bg-success-300 text-black ring-[2px] ring-success-500 dark:bg-success-700 dark:text-white dark:ring-[2px] dark:ring-success-500;
+	}
+	.variant-ringed-success-300 {
+		@apply bg-transparent ring-[1px] ring-success-300 dark:bg-transparent dark:ring-[1px] dark:ring-success-700;
+	}
+	.variant-ghost-success-300 {
+		@apply bg-success-300/20 ring-[2px] ring-success-300 dark:bg-success-700/20 dark:ring-[2px] dark:ring-success-700;
+	}
+	.variant-glass-success-300 {
+		@apply bg-success-300/40 text-success-800 backdrop-blur-lg dark:bg-success-700/40 dark:text-success-200;
+	}
+	.variant-seethrough-success-300 {
+		@apply bg-success-300/40 text-black dark:bg-success-700/40 dark:text-white;
+	}
+
+	.variant-filled-success-400 {
+		@apply bg-success-400 text-black dark:bg-success-600 dark:text-white;
+	}
+	.variant-soft-success-400 {
+		@apply bg-success-400 text-success-900 dark:bg-success-600 dark:text-success-100;
+	}
+	.variant-outline-only-success-400 {
+		@apply ring-[2px] ring-success-400 dark:ring-[2px] dark:ring-success-600;
+	}
+	.variant-outline-soft-success-400 {
+		@apply bg-success-400 text-success-900 ring-[2px] ring-success-600 dark:bg-success-600 dark:text-success-100 dark:ring-[2px] dark:ring-success-400;
+	}
+	.variant-outline-filled-success-400 {
+		@apply bg-success-400 text-black ring-[2px] ring-success-600 dark:bg-success-600 dark:text-white dark:ring-[2px] dark:ring-success-400;
+	}
+	.variant-ringed-success-400 {
+		@apply bg-transparent ring-[1px] ring-success-400 dark:bg-transparent dark:ring-[1px] dark:ring-success-600;
+	}
+	.variant-ghost-success-400 {
+		@apply bg-success-400/20 ring-[2px] ring-success-400 dark:bg-success-600/20 dark:ring-[2px] dark:ring-success-600;
+	}
+	.variant-glass-success-400 {
+		@apply bg-success-400/40 text-success-900 backdrop-blur-lg dark:bg-success-600/40 dark:text-success-100;
+	}
+	.variant-seethrough-success-400 {
+		@apply bg-success-400/40 text-black dark:bg-success-600/40 dark:text-white;
+	}
+
+	.variant-filled-success-500 {
+		@apply bg-success-500 text-white dark:bg-success-500 dark:text-white;
+	}
+	.variant-soft-success-500 {
+		@apply bg-success-500 text-success-50 dark:bg-success-500 dark:text-success-50;
+	}
+	.variant-outline-only-success-500 {
+		@apply ring-[2px] ring-success-500 dark:ring-[2px] dark:ring-success-500;
+	}
+	.variant-outline-soft-success-500 {
+		@apply bg-success-500 text-success-50 ring-[2px] ring-success-300 dark:bg-success-500 dark:text-success-50 dark:ring-[2px] dark:ring-success-300;
+	}
+	.variant-outline-filled-success-500 {
+		@apply bg-success-500 text-white ring-[2px] ring-success-300 dark:bg-success-500 dark:text-white dark:ring-[2px] dark:ring-success-300;
+	}
+	.variant-ringed-success-500 {
+		@apply bg-transparent ring-[1px] ring-success-500 dark:bg-transparent dark:ring-[1px] dark:ring-success-500;
+	}
+	.variant-ghost-success-500 {
+		@apply bg-success-500/20 ring-[2px] ring-success-500 dark:bg-success-500/20 dark:ring-[2px] dark:ring-success-500;
+	}
+	.variant-glass-success-500 {
+		@apply bg-success-500/40 text-success-50 backdrop-blur-lg dark:bg-success-500/40 dark:text-success-50;
+	}
+	.variant-seethrough-success-500 {
+		@apply bg-success-500/40 text-white dark:bg-success-500/40 dark:text-white;
+	}
+
+	.variant-filled-success-600 {
+		@apply bg-success-600 text-white dark:bg-success-400 dark:text-black;
+	}
+	.variant-soft-success-600 {
+		@apply bg-success-600 text-success-100 dark:bg-success-400 dark:text-success-900;
+	}
+	.variant-outline-only-success-600 {
+		@apply ring-[2px] ring-success-600 dark:ring-[2px] dark:ring-success-400;
+	}
+	.variant-outline-soft-success-600 {
+		@apply bg-success-600 text-success-100 ring-[2px] ring-success-400 dark:bg-success-400 dark:text-success-900 dark:ring-[2px] dark:ring-success-600;
+	}
+	.variant-outline-filled-success-600 {
+		@apply bg-success-600 text-white ring-[2px] ring-success-400 dark:bg-success-400 dark:text-black dark:ring-[2px] dark:ring-success-600;
+	}
+	.variant-ringed-success-600 {
+		@apply bg-transparent ring-[1px] ring-success-600 dark:bg-transparent dark:ring-[1px] dark:ring-success-400;
+	}
+	.variant-ghost-success-600 {
+		@apply bg-success-600/20 ring-[2px] ring-success-600 dark:bg-success-400/20 dark:ring-[2px] dark:ring-success-400;
+	}
+	.variant-glass-success-600 {
+		@apply bg-success-600/40 text-success-100 backdrop-blur-lg dark:bg-success-400/40 dark:text-success-900;
+	}
+	.variant-seethrough-success-600 {
+		@apply bg-success-600/40 text-white dark:bg-success-400/40 dark:text-black;
+	}
+
+	.variant-filled-success-700 {
+		@apply bg-success-700 text-white dark:bg-success-300 dark:text-black;
+	}
+	.variant-soft-success-700 {
+		@apply bg-success-700 text-success-200 dark:bg-success-300 dark:text-success-800;
+	}
+	.variant-outline-only-success-700 {
+		@apply ring-[2px] ring-success-700 dark:ring-[2px] dark:ring-success-300;
+	}
+	.variant-outline-soft-success-700 {
+		@apply bg-success-700 text-success-200 ring-[2px] ring-success-500 dark:bg-success-300 dark:text-success-800 dark:ring-[2px] dark:ring-success-500;
+	}
+	.variant-outline-filled-success-700 {
+		@apply bg-success-700 text-white ring-[2px] ring-success-500 dark:bg-success-300 dark:text-black dark:ring-[2px] dark:ring-success-500;
+	}
+	.variant-ringed-success-700 {
+		@apply bg-transparent ring-[1px] ring-success-700 dark:bg-transparent dark:ring-[1px] dark:ring-success-300;
+	}
+	.variant-ghost-success-700 {
+		@apply bg-success-700/20 ring-[2px] ring-success-700 dark:bg-success-300/20 dark:ring-[2px] dark:ring-success-300;
+	}
+	.variant-glass-success-700 {
+		@apply bg-success-700/40 text-success-200 backdrop-blur-lg dark:bg-success-300/40 dark:text-success-800;
+	}
+	.variant-seethrough-success-700 {
+		@apply bg-success-700/40 text-white dark:bg-success-300/40 dark:text-black;
+	}
+
+	.variant-filled-success-800 {
+		@apply bg-success-800 text-white dark:bg-success-200 dark:text-black;
+	}
+	.variant-soft-success-800 {
+		@apply bg-success-800 text-success-300 dark:bg-success-200 dark:text-success-700;
+	}
+	.variant-outline-only-success-800 {
+		@apply ring-[2px] ring-success-800 dark:ring-[2px] dark:ring-success-200;
+	}
+	.variant-outline-soft-success-800 {
+		@apply bg-success-800 text-success-300 ring-[2px] ring-success-600 dark:bg-success-200 dark:text-success-700 dark:ring-[2px] dark:ring-success-400;
+	}
+	.variant-outline-filled-success-800 {
+		@apply bg-success-800 text-white ring-[2px] ring-success-600 dark:bg-success-200 dark:text-black dark:ring-[2px] dark:ring-success-400;
+	}
+	.variant-ringed-success-800 {
+		@apply bg-transparent ring-[1px] ring-success-800 dark:bg-transparent dark:ring-[1px] dark:ring-success-200;
+	}
+	.variant-ghost-success-800 {
+		@apply bg-success-800/20 ring-[2px] ring-success-800 dark:bg-success-200/20 dark:ring-[2px] dark:ring-success-200;
+	}
+	.variant-glass-success-800 {
+		@apply bg-success-800/40 text-success-300 backdrop-blur-lg dark:bg-success-200/40 dark:text-success-700;
+	}
+	.variant-seethrough-success-800 {
+		@apply bg-success-800/40 text-white dark:bg-success-200/40 dark:text-black;
+	}
+
+	.variant-filled-success-900 {
+		@apply bg-success-900 text-white dark:bg-success-100 dark:text-black;
+	}
+	.variant-soft-success-900 {
+		@apply bg-success-900 text-success-400 dark:bg-success-100 dark:text-success-600;
+	}
+	.variant-outline-only-success-900 {
+		@apply ring-[2px] ring-success-900 dark:ring-[2px] dark:ring-success-100;
+	}
+	.variant-outline-soft-success-900 {
+		@apply bg-success-900 text-success-400 ring-[2px] ring-success-700 dark:bg-success-100 dark:text-success-600 dark:ring-[2px] dark:ring-success-300;
+	}
+	.variant-outline-filled-success-900 {
+		@apply bg-success-900 text-white ring-[2px] ring-success-700 dark:bg-success-100 dark:text-black dark:ring-[2px] dark:ring-success-300;
+	}
+	.variant-ringed-success-900 {
+		@apply bg-transparent ring-[1px] ring-success-900 dark:bg-transparent dark:ring-[1px] dark:ring-success-100;
+	}
+	.variant-ghost-success-900 {
+		@apply bg-success-900/20 ring-[2px] ring-success-900 dark:bg-success-100/20 dark:ring-[2px] dark:ring-success-100;
+	}
+	.variant-glass-success-900 {
+		@apply bg-success-900/40 text-success-400 backdrop-blur-lg dark:bg-success-100/40 dark:text-success-600;
+	}
+	.variant-seethrough-success-900 {
+		@apply bg-success-900/40 text-white dark:bg-success-100/40 dark:text-black;
+	}
+
+	.variant-filled-success-950 {
+		@apply bg-success-950 text-white dark:bg-success-50 dark:text-black;
+	}
+	.variant-soft-success-950 {
+		@apply bg-success-950 text-success-500 dark:bg-success-50 dark:text-success-500;
+	}
+	.variant-outline-only-success-950 {
+		@apply ring-[2px] ring-success-950 dark:ring-[2px] dark:ring-success-50;
+	}
+	.variant-outline-soft-success-950 {
+		@apply bg-success-950 text-success-500 ring-[2px] ring-success-800 dark:bg-success-50 dark:text-success-500 dark:ring-[2px] dark:ring-success-200;
+	}
+	.variant-outline-filled-success-950 {
+		@apply bg-success-950 text-white ring-[2px] ring-success-800 dark:bg-success-50 dark:text-black dark:ring-[2px] dark:ring-success-200;
+	}
+	.variant-ringed-success-950 {
+		@apply bg-transparent ring-[1px] ring-success-950 dark:bg-transparent dark:ring-[1px] dark:ring-success-50;
+	}
+	.variant-ghost-success-950 {
+		@apply bg-success-950/20 ring-[2px] ring-success-950 dark:bg-success-50/20 dark:ring-[2px] dark:ring-success-50;
+	}
+	.variant-glass-success-950 {
+		@apply bg-success-950/40 text-success-500 backdrop-blur-lg dark:bg-success-50/40 dark:text-success-500;
+	}
+	.variant-seethrough-success-950 {
+		@apply bg-success-950/40 text-white dark:bg-success-50/40 dark:text-black;
+	}
+
+	/* warning */
+
+	.variant-filled-warning-50 {
+		@apply bg-warning-50 text-black dark:bg-warning-950 dark:text-black;
+	}
+	.variant-soft-warning-50 {
+		@apply bg-warning-50 text-warning-500 dark:bg-warning-950 dark:text-warning-950;
+	}
+	.variant-outline-only-warning-50 {
+		@apply ring-[2px] ring-warning-50 dark:ring-[2px] dark:ring-warning-950;
+	}
+	.variant-outline-soft-warning-50 {
+		@apply bg-warning-50 text-warning-500 ring-[2px] ring-warning-200 dark:bg-warning-950 dark:text-warning-950 dark:ring-[2px] dark:ring-warning-800;
+	}
+	.variant-outline-filled-warning-50 {
+		@apply bg-warning-50 text-black ring-[2px] ring-warning-200 dark:bg-warning-950 dark:text-black dark:ring-[2px] dark:ring-warning-800;
+	}
+	.variant-ringed-warning-50 {
+		@apply bg-transparent ring-[1px] ring-warning-50 dark:bg-transparent dark:ring-[1px] dark:ring-warning-950;
+	}
+	.variant-ghost-warning-50 {
+		@apply bg-warning-50/20 ring-[2px] ring-warning-50 dark:bg-warning-950/20 dark:ring-[2px] dark:ring-warning-950;
+	}
+	.variant-glass-warning-50 {
+		@apply bg-warning-50/40 text-warning-500 backdrop-blur-lg dark:bg-warning-950/40 dark:text-warning-950;
+	}
+	.variant-seethrough-warning-50 {
+		@apply bg-warning-50/40 text-black dark:bg-warning-950/40 dark:text-black;
+	}
+
+	.variant-filled-warning-100 {
+		@apply bg-warning-100 text-black dark:bg-warning-900 dark:text-black;
+	}
+	.variant-soft-warning-100 {
+		@apply bg-warning-100 text-warning-600 dark:bg-warning-900 dark:text-warning-950;
+	}
+	.variant-outline-only-warning-100 {
+		@apply ring-[2px] ring-warning-100 dark:ring-[2px] dark:ring-warning-900;
+	}
+	.variant-outline-soft-warning-100 {
+		@apply bg-warning-100 text-warning-600 ring-[2px] ring-warning-300 dark:bg-warning-900 dark:text-warning-950 dark:ring-[2px] dark:ring-warning-700;
+	}
+	.variant-outline-filled-warning-100 {
+		@apply bg-warning-100 text-black ring-[2px] ring-warning-300 dark:bg-warning-900 dark:text-black dark:ring-[2px] dark:ring-warning-700;
+	}
+	.variant-ringed-warning-100 {
+		@apply bg-transparent ring-[1px] ring-warning-100 dark:bg-transparent dark:ring-[1px] dark:ring-warning-900;
+	}
+	.variant-ghost-warning-100 {
+		@apply bg-warning-100/20 ring-[2px] ring-warning-100 dark:bg-warning-900/20 dark:ring-[2px] dark:ring-warning-900;
+	}
+	.variant-glass-warning-100 {
+		@apply bg-warning-100/40 text-warning-600 backdrop-blur-lg dark:bg-warning-900/40 dark:text-warning-950;
+	}
+	.variant-seethrough-warning-100 {
+		@apply bg-warning-100/40 text-black dark:bg-warning-900/40 dark:text-black;
+	}
+
+	.variant-filled-warning-200 {
+		@apply bg-warning-200 text-black dark:bg-warning-800 dark:text-black;
+	}
+	.variant-soft-warning-200 {
+		@apply bg-warning-200 text-warning-700 dark:bg-warning-800 dark:text-warning-950;
+	}
+	.variant-outline-only-warning-200 {
+		@apply ring-[2px] ring-warning-200 dark:ring-[2px] dark:ring-warning-800;
+	}
+	.variant-outline-soft-warning-200 {
+		@apply bg-warning-200 text-warning-700 ring-[2px] ring-warning-400 dark:bg-warning-800 dark:text-warning-950 dark:ring-[2px] dark:ring-warning-600;
+	}
+	.variant-outline-filled-warning-200 {
+		@apply bg-warning-200 text-black ring-[2px] ring-warning-400 dark:bg-warning-800 dark:text-black dark:ring-[2px] dark:ring-warning-600;
+	}
+	.variant-ringed-warning-200 {
+		@apply bg-transparent ring-[1px] ring-warning-200 dark:bg-transparent dark:ring-[1px] dark:ring-warning-800;
+	}
+	.variant-ghost-warning-200 {
+		@apply bg-warning-200/20 ring-[2px] ring-warning-200 dark:bg-warning-800/20 dark:ring-[2px] dark:ring-warning-800;
+	}
+	.variant-glass-warning-200 {
+		@apply bg-warning-200/40 text-warning-700 backdrop-blur-lg dark:bg-warning-800/40 dark:text-warning-950;
+	}
+	.variant-seethrough-warning-200 {
+		@apply bg-warning-200/40 text-black dark:bg-warning-800/40 dark:text-black;
+	}
+
+	.variant-filled-warning-300 {
+		@apply bg-warning-300 text-black dark:bg-warning-700 dark:text-black;
+	}
+	.variant-soft-warning-300 {
+		@apply bg-warning-300 text-warning-800 dark:bg-warning-700 dark:text-warning-950;
+	}
+	.variant-outline-only-warning-300 {
+		@apply ring-[2px] ring-warning-300 dark:ring-[2px] dark:ring-warning-700;
+	}
+	.variant-outline-soft-warning-300 {
+		@apply bg-warning-300 text-warning-800 ring-[2px] ring-warning-500 dark:bg-warning-700 dark:text-warning-950 dark:ring-[2px] dark:ring-warning-500;
+	}
+	.variant-outline-filled-warning-300 {
+		@apply bg-warning-300 text-black ring-[2px] ring-warning-500 dark:bg-warning-700 dark:text-black dark:ring-[2px] dark:ring-warning-500;
+	}
+	.variant-ringed-warning-300 {
+		@apply bg-transparent ring-[1px] ring-warning-300 dark:bg-transparent dark:ring-[1px] dark:ring-warning-700;
+	}
+	.variant-ghost-warning-300 {
+		@apply bg-warning-300/20 ring-[2px] ring-warning-300 dark:bg-warning-700/20 dark:ring-[2px] dark:ring-warning-700;
+	}
+	.variant-glass-warning-300 {
+		@apply bg-warning-300/40 text-warning-800 backdrop-blur-lg dark:bg-warning-700/40 dark:text-warning-950;
+	}
+	.variant-seethrough-warning-300 {
+		@apply bg-warning-300/40 text-black dark:bg-warning-700/40 dark:text-black;
+	}
+
+	.variant-filled-warning-400 {
+		@apply bg-warning-400 text-black dark:bg-warning-600 dark:text-black;
+	}
+	.variant-soft-warning-400 {
+		@apply bg-warning-400 text-warning-900 dark:bg-warning-600 dark:text-warning-950;
+	}
+	.variant-outline-only-warning-400 {
+		@apply ring-[2px] ring-warning-400 dark:ring-[2px] dark:ring-warning-600;
+	}
+	.variant-outline-soft-warning-400 {
+		@apply bg-warning-400 text-warning-900 ring-[2px] ring-warning-600 dark:bg-warning-600 dark:text-warning-950 dark:ring-[2px] dark:ring-warning-400;
+	}
+	.variant-outline-filled-warning-400 {
+		@apply bg-warning-400 text-black ring-[2px] ring-warning-600 dark:bg-warning-600 dark:text-black dark:ring-[2px] dark:ring-warning-400;
+	}
+	.variant-ringed-warning-400 {
+		@apply bg-transparent ring-[1px] ring-warning-400 dark:bg-transparent dark:ring-[1px] dark:ring-warning-600;
+	}
+	.variant-ghost-warning-400 {
+		@apply bg-warning-400/20 ring-[2px] ring-warning-400 dark:bg-warning-600/20 dark:ring-[2px] dark:ring-warning-600;
+	}
+	.variant-glass-warning-400 {
+		@apply bg-warning-400/40 text-warning-900 backdrop-blur-lg dark:bg-warning-600/40 dark:text-warning-950;
+	}
+	.variant-seethrough-warning-400 {
+		@apply bg-warning-400/40 text-black dark:bg-warning-600/40 dark:text-black;
+	}
+
+	.variant-filled-warning-500 {
+		@apply bg-warning-500 text-black dark:bg-warning-500 dark:text-black;
+	}
+	.variant-soft-warning-500 {
+		@apply bg-warning-500 text-warning-950 dark:bg-warning-500 dark:text-warning-950;
+	}
+	.variant-outline-only-warning-500 {
+		@apply ring-[2px] ring-warning-500 dark:ring-[2px] dark:ring-warning-500;
+	}
+	.variant-outline-soft-warning-500 {
+		@apply bg-warning-500 text-warning-950 ring-[2px] ring-warning-300 dark:bg-warning-500 dark:text-warning-950 dark:ring-[2px] dark:ring-warning-300;
+	}
+	.variant-outline-filled-warning-500 {
+		@apply bg-warning-500 text-black ring-[2px] ring-warning-300 dark:bg-warning-500 dark:text-black dark:ring-[2px] dark:ring-warning-300;
+	}
+	.variant-ringed-warning-500 {
+		@apply bg-transparent ring-[1px] ring-warning-500 dark:bg-transparent dark:ring-[1px] dark:ring-warning-500;
+	}
+	.variant-ghost-warning-500 {
+		@apply bg-warning-500/20 ring-[2px] ring-warning-500 dark:bg-warning-500/20 dark:ring-[2px] dark:ring-warning-500;
+	}
+	.variant-glass-warning-500 {
+		@apply bg-warning-500/40 text-warning-950 backdrop-blur-lg dark:bg-warning-500/40 dark:text-warning-950;
+	}
+	.variant-seethrough-warning-500 {
+		@apply bg-warning-500/40 text-black dark:bg-warning-500/40 dark:text-black;
+	}
+
+	.variant-filled-warning-600 {
+		@apply bg-warning-600 text-black dark:bg-warning-400 dark:text-black;
+	}
+	.variant-soft-warning-600 {
+		@apply bg-warning-600 text-warning-950 dark:bg-warning-400 dark:text-warning-900;
+	}
+	.variant-outline-only-warning-600 {
+		@apply ring-[2px] ring-warning-600 dark:ring-[2px] dark:ring-warning-400;
+	}
+	.variant-outline-soft-warning-600 {
+		@apply bg-warning-600 text-warning-950 ring-[2px] ring-warning-400 dark:bg-warning-400 dark:text-warning-900 dark:ring-[2px] dark:ring-warning-600;
+	}
+	.variant-outline-filled-warning-600 {
+		@apply bg-warning-600 text-black ring-[2px] ring-warning-400 dark:bg-warning-400 dark:text-black dark:ring-[2px] dark:ring-warning-600;
+	}
+	.variant-ringed-warning-600 {
+		@apply bg-transparent ring-[1px] ring-warning-600 dark:bg-transparent dark:ring-[1px] dark:ring-warning-400;
+	}
+	.variant-ghost-warning-600 {
+		@apply bg-warning-600/20 ring-[2px] ring-warning-600 dark:bg-warning-400/20 dark:ring-[2px] dark:ring-warning-400;
+	}
+	.variant-glass-warning-600 {
+		@apply bg-warning-600/40 text-warning-950 backdrop-blur-lg dark:bg-warning-400/40 dark:text-warning-900;
+	}
+	.variant-seethrough-warning-600 {
+		@apply bg-warning-600/40 text-black dark:bg-warning-400/40 dark:text-black;
+	}
+
+	.variant-filled-warning-700 {
+		@apply bg-warning-700 text-black dark:bg-warning-300 dark:text-black;
+	}
+	.variant-soft-warning-700 {
+		@apply bg-warning-700 text-warning-950 dark:bg-warning-300 dark:text-warning-800;
+	}
+	.variant-outline-only-warning-700 {
+		@apply ring-[2px] ring-warning-700 dark:ring-[2px] dark:ring-warning-300;
+	}
+	.variant-outline-soft-warning-700 {
+		@apply bg-warning-700 text-warning-950 ring-[2px] ring-warning-500 dark:bg-warning-300 dark:text-warning-800 dark:ring-[2px] dark:ring-warning-500;
+	}
+	.variant-outline-filled-warning-700 {
+		@apply bg-warning-700 text-black ring-[2px] ring-warning-500 dark:bg-warning-300 dark:text-black dark:ring-[2px] dark:ring-warning-500;
+	}
+	.variant-ringed-warning-700 {
+		@apply bg-transparent ring-[1px] ring-warning-700 dark:bg-transparent dark:ring-[1px] dark:ring-warning-300;
+	}
+	.variant-ghost-warning-700 {
+		@apply bg-warning-700/20 ring-[2px] ring-warning-700 dark:bg-warning-300/20 dark:ring-[2px] dark:ring-warning-300;
+	}
+	.variant-glass-warning-700 {
+		@apply bg-warning-700/40 text-warning-950 backdrop-blur-lg dark:bg-warning-300/40 dark:text-warning-800;
+	}
+	.variant-seethrough-warning-700 {
+		@apply bg-warning-700/40 text-black dark:bg-warning-300/40 dark:text-black;
+	}
+
+	.variant-filled-warning-800 {
+		@apply bg-warning-800 text-black dark:bg-warning-200 dark:text-black;
+	}
+	.variant-soft-warning-800 {
+		@apply bg-warning-800 text-warning-950 dark:bg-warning-200 dark:text-warning-700;
+	}
+	.variant-outline-only-warning-800 {
+		@apply ring-[2px] ring-warning-800 dark:ring-[2px] dark:ring-warning-200;
+	}
+	.variant-outline-soft-warning-800 {
+		@apply bg-warning-800 text-warning-950 ring-[2px] ring-warning-600 dark:bg-warning-200 dark:text-warning-700 dark:ring-[2px] dark:ring-warning-400;
+	}
+	.variant-outline-filled-warning-800 {
+		@apply bg-warning-800 text-black ring-[2px] ring-warning-600 dark:bg-warning-200 dark:text-black dark:ring-[2px] dark:ring-warning-400;
+	}
+	.variant-ringed-warning-800 {
+		@apply bg-transparent ring-[1px] ring-warning-800 dark:bg-transparent dark:ring-[1px] dark:ring-warning-200;
+	}
+	.variant-ghost-warning-800 {
+		@apply bg-warning-800/20 ring-[2px] ring-warning-800 dark:bg-warning-200/20 dark:ring-[2px] dark:ring-warning-200;
+	}
+	.variant-glass-warning-800 {
+		@apply bg-warning-800/40 text-warning-950 backdrop-blur-lg dark:bg-warning-200/40 dark:text-warning-700;
+	}
+	.variant-seethrough-warning-800 {
+		@apply bg-warning-800/40 text-black dark:bg-warning-200/40 dark:text-black;
+	}
+
+	.variant-filled-warning-900 {
+		@apply bg-warning-900 text-black dark:bg-warning-100 dark:text-black;
+	}
+	.variant-soft-warning-900 {
+		@apply bg-warning-900 text-warning-950 dark:bg-warning-100 dark:text-warning-600;
+	}
+	.variant-outline-only-warning-900 {
+		@apply ring-[2px] ring-warning-900 dark:ring-[2px] dark:ring-warning-100;
+	}
+	.variant-outline-soft-warning-900 {
+		@apply bg-warning-900 text-warning-950 ring-[2px] ring-warning-700 dark:bg-warning-100 dark:text-warning-600 dark:ring-[2px] dark:ring-warning-300;
+	}
+	.variant-outline-filled-warning-900 {
+		@apply bg-warning-900 text-black ring-[2px] ring-warning-700 dark:bg-warning-100 dark:text-black dark:ring-[2px] dark:ring-warning-300;
+	}
+	.variant-ringed-warning-900 {
+		@apply bg-transparent ring-[1px] ring-warning-900 dark:bg-transparent dark:ring-[1px] dark:ring-warning-100;
+	}
+	.variant-ghost-warning-900 {
+		@apply bg-warning-900/20 ring-[2px] ring-warning-900 dark:bg-warning-100/20 dark:ring-[2px] dark:ring-warning-100;
+	}
+	.variant-glass-warning-900 {
+		@apply bg-warning-900/40 text-warning-950 backdrop-blur-lg dark:bg-warning-100/40 dark:text-warning-600;
+	}
+	.variant-seethrough-warning-900 {
+		@apply bg-warning-900/40 text-black dark:bg-warning-100/40 dark:text-black;
+	}
+
+	.variant-filled-warning-950 {
+		@apply bg-warning-950 text-black dark:bg-warning-50 dark:text-black;
+	}
+	.variant-soft-warning-950 {
+		@apply bg-warning-950 text-warning-950 dark:bg-warning-50 dark:text-warning-500;
+	}
+	.variant-outline-only-warning-950 {
+		@apply ring-[2px] ring-warning-950 dark:ring-[2px] dark:ring-warning-50;
+	}
+	.variant-outline-soft-warning-950 {
+		@apply bg-warning-950 text-warning-950 ring-[2px] ring-warning-800 dark:bg-warning-50 dark:text-warning-500 dark:ring-[2px] dark:ring-warning-200;
+	}
+	.variant-outline-filled-warning-950 {
+		@apply bg-warning-950 text-black ring-[2px] ring-warning-800 dark:bg-warning-50 dark:text-black dark:ring-[2px] dark:ring-warning-200;
+	}
+	.variant-ringed-warning-950 {
+		@apply bg-transparent ring-[1px] ring-warning-950 dark:bg-transparent dark:ring-[1px] dark:ring-warning-50;
+	}
+	.variant-ghost-warning-950 {
+		@apply bg-warning-950/20 ring-[2px] ring-warning-950 dark:bg-warning-50/20 dark:ring-[2px] dark:ring-warning-50;
+	}
+	.variant-glass-warning-950 {
+		@apply bg-warning-950/40 text-warning-950 backdrop-blur-lg dark:bg-warning-50/40 dark:text-warning-500;
+	}
+	.variant-seethrough-warning-950 {
+		@apply bg-warning-950/40 text-black dark:bg-warning-50/40 dark:text-black;
+	}
+
+	/* error */
+
+	.variant-filled-error-50 {
+		@apply bg-error-50 text-black dark:bg-error-950 dark:text-white;
+	}
+	.variant-soft-error-50 {
+		@apply bg-error-50 text-error-500 dark:bg-error-950 dark:text-error-500;
+	}
+	.variant-outline-only-error-50 {
+		@apply ring-[2px] ring-error-50 dark:ring-[2px] dark:ring-error-950;
+	}
+	.variant-outline-soft-error-50 {
+		@apply bg-error-50 text-error-500 ring-[2px] ring-error-200 dark:bg-error-950 dark:text-error-500 dark:ring-[2px] dark:ring-error-800;
+	}
+	.variant-outline-filled-error-50 {
+		@apply bg-error-50 text-black ring-[2px] ring-error-200 dark:bg-error-950 dark:text-white dark:ring-[2px] dark:ring-error-800;
+	}
+	.variant-ringed-error-50 {
+		@apply bg-transparent ring-[1px] ring-error-50 dark:bg-transparent dark:ring-[1px] dark:ring-error-950;
+	}
+	.variant-ghost-error-50 {
+		@apply bg-error-50/20 ring-[2px] ring-error-50 dark:bg-error-950/20 dark:ring-[2px] dark:ring-error-950;
+	}
+	.variant-glass-error-50 {
+		@apply bg-error-50/40 text-error-500 backdrop-blur-lg dark:bg-error-950/40 dark:text-error-500;
+	}
+	.variant-seethrough-error-50 {
+		@apply bg-error-50/40 text-black dark:bg-error-950/40 dark:text-white;
+	}
+
+	.variant-filled-error-100 {
+		@apply bg-error-100 text-black dark:bg-error-900 dark:text-white;
+	}
+	.variant-soft-error-100 {
+		@apply bg-error-100 text-error-600 dark:bg-error-900 dark:text-error-400;
+	}
+	.variant-outline-only-error-100 {
+		@apply ring-[2px] ring-error-100 dark:ring-[2px] dark:ring-error-900;
+	}
+	.variant-outline-soft-error-100 {
+		@apply bg-error-100 text-error-600 ring-[2px] ring-error-300 dark:bg-error-900 dark:text-error-400 dark:ring-[2px] dark:ring-error-700;
+	}
+	.variant-outline-filled-error-100 {
+		@apply bg-error-100 text-black ring-[2px] ring-error-300 dark:bg-error-900 dark:text-white dark:ring-[2px] dark:ring-error-700;
+	}
+	.variant-ringed-error-100 {
+		@apply bg-transparent ring-[1px] ring-error-100 dark:bg-transparent dark:ring-[1px] dark:ring-error-900;
+	}
+	.variant-ghost-error-100 {
+		@apply bg-error-100/20 ring-[2px] ring-error-100 dark:bg-error-900/20 dark:ring-[2px] dark:ring-error-900;
+	}
+	.variant-glass-error-100 {
+		@apply bg-error-100/40 text-error-600 backdrop-blur-lg dark:bg-error-900/40 dark:text-error-400;
+	}
+	.variant-seethrough-error-100 {
+		@apply bg-error-100/40 text-black dark:bg-error-900/40 dark:text-white;
+	}
+
+	.variant-filled-error-200 {
+		@apply bg-error-200 text-black dark:bg-error-800 dark:text-white;
+	}
+	.variant-soft-error-200 {
+		@apply bg-error-200 text-error-700 dark:bg-error-800 dark:text-error-300;
+	}
+	.variant-outline-only-error-200 {
+		@apply ring-[2px] ring-error-200 dark:ring-[2px] dark:ring-error-800;
+	}
+	.variant-outline-soft-error-200 {
+		@apply bg-error-200 text-error-700 ring-[2px] ring-error-400 dark:bg-error-800 dark:text-error-300 dark:ring-[2px] dark:ring-error-600;
+	}
+	.variant-outline-filled-error-200 {
+		@apply bg-error-200 text-black ring-[2px] ring-error-400 dark:bg-error-800 dark:text-white dark:ring-[2px] dark:ring-error-600;
+	}
+	.variant-ringed-error-200 {
+		@apply bg-transparent ring-[1px] ring-error-200 dark:bg-transparent dark:ring-[1px] dark:ring-error-800;
+	}
+	.variant-ghost-error-200 {
+		@apply bg-error-200/20 ring-[2px] ring-error-200 dark:bg-error-800/20 dark:ring-[2px] dark:ring-error-800;
+	}
+	.variant-glass-error-200 {
+		@apply bg-error-200/40 text-error-700 backdrop-blur-lg dark:bg-error-800/40 dark:text-error-300;
+	}
+	.variant-seethrough-error-200 {
+		@apply bg-error-200/40 text-black dark:bg-error-800/40 dark:text-white;
+	}
+
+	.variant-filled-error-300 {
+		@apply bg-error-300 text-black dark:bg-error-700 dark:text-white;
+	}
+	.variant-soft-error-300 {
+		@apply bg-error-300 text-error-800 dark:bg-error-700 dark:text-error-200;
+	}
+	.variant-outline-only-error-300 {
+		@apply ring-[2px] ring-error-300 dark:ring-[2px] dark:ring-error-700;
+	}
+	.variant-outline-soft-error-300 {
+		@apply bg-error-300 text-error-800 ring-[2px] ring-error-500 dark:bg-error-700 dark:text-error-200 dark:ring-[2px] dark:ring-error-500;
+	}
+	.variant-outline-filled-error-300 {
+		@apply bg-error-300 text-black ring-[2px] ring-error-500 dark:bg-error-700 dark:text-white dark:ring-[2px] dark:ring-error-500;
+	}
+	.variant-ringed-error-300 {
+		@apply bg-transparent ring-[1px] ring-error-300 dark:bg-transparent dark:ring-[1px] dark:ring-error-700;
+	}
+	.variant-ghost-error-300 {
+		@apply bg-error-300/20 ring-[2px] ring-error-300 dark:bg-error-700/20 dark:ring-[2px] dark:ring-error-700;
+	}
+	.variant-glass-error-300 {
+		@apply bg-error-300/40 text-error-800 backdrop-blur-lg dark:bg-error-700/40 dark:text-error-200;
+	}
+	.variant-seethrough-error-300 {
+		@apply bg-error-300/40 text-black dark:bg-error-700/40 dark:text-white;
+	}
+
+	.variant-filled-error-400 {
+		@apply bg-error-400 text-black dark:bg-error-600 dark:text-white;
+	}
+	.variant-soft-error-400 {
+		@apply bg-error-400 text-error-900 dark:bg-error-600 dark:text-error-100;
+	}
+	.variant-outline-only-error-400 {
+		@apply ring-[2px] ring-error-400 dark:ring-[2px] dark:ring-error-600;
+	}
+	.variant-outline-soft-error-400 {
+		@apply bg-error-400 text-error-900 ring-[2px] ring-error-600 dark:bg-error-600 dark:text-error-100 dark:ring-[2px] dark:ring-error-400;
+	}
+	.variant-outline-filled-error-400 {
+		@apply bg-error-400 text-black ring-[2px] ring-error-600 dark:bg-error-600 dark:text-white dark:ring-[2px] dark:ring-error-400;
+	}
+	.variant-ringed-error-400 {
+		@apply bg-transparent ring-[1px] ring-error-400 dark:bg-transparent dark:ring-[1px] dark:ring-error-600;
+	}
+	.variant-ghost-error-400 {
+		@apply bg-error-400/20 ring-[2px] ring-error-400 dark:bg-error-600/20 dark:ring-[2px] dark:ring-error-600;
+	}
+	.variant-glass-error-400 {
+		@apply bg-error-400/40 text-error-900 backdrop-blur-lg dark:bg-error-600/40 dark:text-error-100;
+	}
+	.variant-seethrough-error-400 {
+		@apply bg-error-400/40 text-black dark:bg-error-600/40 dark:text-white;
+	}
+
+	.variant-filled-error-500 {
+		@apply bg-error-500 text-white dark:bg-error-500 dark:text-white;
+	}
+	.variant-soft-error-500 {
+		@apply bg-error-500 text-error-50 dark:bg-error-500 dark:text-error-50;
+	}
+	.variant-outline-only-error-500 {
+		@apply ring-[2px] ring-error-500 dark:ring-[2px] dark:ring-error-500;
+	}
+	.variant-outline-soft-error-500 {
+		@apply bg-error-500 text-error-50 ring-[2px] ring-error-300 dark:bg-error-500 dark:text-error-50 dark:ring-[2px] dark:ring-error-300;
+	}
+	.variant-outline-filled-error-500 {
+		@apply bg-error-500 text-white ring-[2px] ring-error-300 dark:bg-error-500 dark:text-white dark:ring-[2px] dark:ring-error-300;
+	}
+	.variant-ringed-error-500 {
+		@apply bg-transparent ring-[1px] ring-error-500 dark:bg-transparent dark:ring-[1px] dark:ring-error-500;
+	}
+	.variant-ghost-error-500 {
+		@apply bg-error-500/20 ring-[2px] ring-error-500 dark:bg-error-500/20 dark:ring-[2px] dark:ring-error-500;
+	}
+	.variant-glass-error-500 {
+		@apply bg-error-500/40 text-error-50 backdrop-blur-lg dark:bg-error-500/40 dark:text-error-50;
+	}
+	.variant-seethrough-error-500 {
+		@apply bg-error-500/40 text-white dark:bg-error-500/40 dark:text-white;
+	}
+
+	.variant-filled-error-600 {
+		@apply bg-error-600 text-white dark:bg-error-400 dark:text-black;
+	}
+	.variant-soft-error-600 {
+		@apply bg-error-600 text-error-100 dark:bg-error-400 dark:text-error-900;
+	}
+	.variant-outline-only-error-600 {
+		@apply ring-[2px] ring-error-600 dark:ring-[2px] dark:ring-error-400;
+	}
+	.variant-outline-soft-error-600 {
+		@apply bg-error-600 text-error-100 ring-[2px] ring-error-400 dark:bg-error-400 dark:text-error-900 dark:ring-[2px] dark:ring-error-600;
+	}
+	.variant-outline-filled-error-600 {
+		@apply bg-error-600 text-white ring-[2px] ring-error-400 dark:bg-error-400 dark:text-black dark:ring-[2px] dark:ring-error-600;
+	}
+	.variant-ringed-error-600 {
+		@apply bg-transparent ring-[1px] ring-error-600 dark:bg-transparent dark:ring-[1px] dark:ring-error-400;
+	}
+	.variant-ghost-error-600 {
+		@apply bg-error-600/20 ring-[2px] ring-error-600 dark:bg-error-400/20 dark:ring-[2px] dark:ring-error-400;
+	}
+	.variant-glass-error-600 {
+		@apply bg-error-600/40 text-error-100 backdrop-blur-lg dark:bg-error-400/40 dark:text-error-900;
+	}
+	.variant-seethrough-error-600 {
+		@apply bg-error-600/40 text-white dark:bg-error-400/40 dark:text-black;
+	}
+
+	.variant-filled-error-700 {
+		@apply bg-error-700 text-white dark:bg-error-300 dark:text-black;
+	}
+	.variant-soft-error-700 {
+		@apply bg-error-700 text-error-200 dark:bg-error-300 dark:text-error-800;
+	}
+	.variant-outline-only-error-700 {
+		@apply ring-[2px] ring-error-700 dark:ring-[2px] dark:ring-error-300;
+	}
+	.variant-outline-soft-error-700 {
+		@apply bg-error-700 text-error-200 ring-[2px] ring-error-500 dark:bg-error-300 dark:text-error-800 dark:ring-[2px] dark:ring-error-500;
+	}
+	.variant-outline-filled-error-700 {
+		@apply bg-error-700 text-white ring-[2px] ring-error-500 dark:bg-error-300 dark:text-black dark:ring-[2px] dark:ring-error-500;
+	}
+	.variant-ringed-error-700 {
+		@apply bg-transparent ring-[1px] ring-error-700 dark:bg-transparent dark:ring-[1px] dark:ring-error-300;
+	}
+	.variant-ghost-error-700 {
+		@apply bg-error-700/20 ring-[2px] ring-error-700 dark:bg-error-300/20 dark:ring-[2px] dark:ring-error-300;
+	}
+	.variant-glass-error-700 {
+		@apply bg-error-700/40 text-error-200 backdrop-blur-lg dark:bg-error-300/40 dark:text-error-800;
+	}
+	.variant-seethrough-error-700 {
+		@apply bg-error-700/40 text-white dark:bg-error-300/40 dark:text-black;
+	}
+
+	.variant-filled-error-800 {
+		@apply bg-error-800 text-white dark:bg-error-200 dark:text-black;
+	}
+	.variant-soft-error-800 {
+		@apply bg-error-800 text-error-300 dark:bg-error-200 dark:text-error-700;
+	}
+	.variant-outline-only-error-800 {
+		@apply ring-[2px] ring-error-800 dark:ring-[2px] dark:ring-error-200;
+	}
+	.variant-outline-soft-error-800 {
+		@apply bg-error-800 text-error-300 ring-[2px] ring-error-600 dark:bg-error-200 dark:text-error-700 dark:ring-[2px] dark:ring-error-400;
+	}
+	.variant-outline-filled-error-800 {
+		@apply bg-error-800 text-white ring-[2px] ring-error-600 dark:bg-error-200 dark:text-black dark:ring-[2px] dark:ring-error-400;
+	}
+	.variant-ringed-error-800 {
+		@apply bg-transparent ring-[1px] ring-error-800 dark:bg-transparent dark:ring-[1px] dark:ring-error-200;
+	}
+	.variant-ghost-error-800 {
+		@apply bg-error-800/20 ring-[2px] ring-error-800 dark:bg-error-200/20 dark:ring-[2px] dark:ring-error-200;
+	}
+	.variant-glass-error-800 {
+		@apply bg-error-800/40 text-error-300 backdrop-blur-lg dark:bg-error-200/40 dark:text-error-700;
+	}
+	.variant-seethrough-error-800 {
+		@apply bg-error-800/40 text-white dark:bg-error-200/40 dark:text-black;
+	}
+
+	.variant-filled-error-900 {
+		@apply bg-error-900 text-white dark:bg-error-100 dark:text-black;
+	}
+	.variant-soft-error-900 {
+		@apply bg-error-900 text-error-400 dark:bg-error-100 dark:text-error-600;
+	}
+	.variant-outline-only-error-900 {
+		@apply ring-[2px] ring-error-900 dark:ring-[2px] dark:ring-error-100;
+	}
+	.variant-outline-soft-error-900 {
+		@apply bg-error-900 text-error-400 ring-[2px] ring-error-700 dark:bg-error-100 dark:text-error-600 dark:ring-[2px] dark:ring-error-300;
+	}
+	.variant-outline-filled-error-900 {
+		@apply bg-error-900 text-white ring-[2px] ring-error-700 dark:bg-error-100 dark:text-black dark:ring-[2px] dark:ring-error-300;
+	}
+	.variant-ringed-error-900 {
+		@apply bg-transparent ring-[1px] ring-error-900 dark:bg-transparent dark:ring-[1px] dark:ring-error-100;
+	}
+	.variant-ghost-error-900 {
+		@apply bg-error-900/20 ring-[2px] ring-error-900 dark:bg-error-100/20 dark:ring-[2px] dark:ring-error-100;
+	}
+	.variant-glass-error-900 {
+		@apply bg-error-900/40 text-error-400 backdrop-blur-lg dark:bg-error-100/40 dark:text-error-600;
+	}
+	.variant-seethrough-error-900 {
+		@apply bg-error-900/40 text-white dark:bg-error-100/40 dark:text-black;
+	}
+
+	.variant-filled-error-950 {
+		@apply bg-error-950 text-white dark:bg-error-50 dark:text-black;
+	}
+	.variant-soft-error-950 {
+		@apply bg-error-950 text-error-500 dark:bg-error-50 dark:text-error-500;
+	}
+	.variant-outline-only-error-950 {
+		@apply ring-[2px] ring-error-950 dark:ring-[2px] dark:ring-error-50;
+	}
+	.variant-outline-soft-error-950 {
+		@apply bg-error-950 text-error-500 ring-[2px] ring-error-800 dark:bg-error-50 dark:text-error-500 dark:ring-[2px] dark:ring-error-200;
+	}
+	.variant-outline-filled-error-950 {
+		@apply bg-error-950 text-white ring-[2px] ring-error-800 dark:bg-error-50 dark:text-black dark:ring-[2px] dark:ring-error-200;
+	}
+	.variant-ringed-error-950 {
+		@apply bg-transparent ring-[1px] ring-error-950 dark:bg-transparent dark:ring-[1px] dark:ring-error-50;
+	}
+	.variant-ghost-error-950 {
+		@apply bg-error-950/20 ring-[2px] ring-error-950 dark:bg-error-50/20 dark:ring-[2px] dark:ring-error-50;
+	}
+	.variant-glass-error-950 {
+		@apply bg-error-950/40 text-error-500 backdrop-blur-lg dark:bg-error-50/40 dark:text-error-500;
+	}
+	.variant-seethrough-error-950 {
+		@apply bg-error-950/40 text-white dark:bg-error-50/40 dark:text-black;
+	}
+
+	/* surface */
+
+	.variant-filled-surface-50 {
+		@apply bg-surface-50 text-black dark:bg-surface-950 dark:text-white;
+	}
+	.variant-soft-surface-50 {
+		@apply bg-surface-50 text-surface-500 dark:bg-surface-950 dark:text-surface-500;
+	}
+	.variant-outline-only-surface-50 {
+		@apply ring-[2px] ring-surface-50 dark:ring-[2px] dark:ring-surface-950;
+	}
+	.variant-outline-soft-surface-50 {
+		@apply bg-surface-50 text-surface-500 ring-[2px] ring-surface-200 dark:bg-surface-950 dark:text-surface-500 dark:ring-[2px] dark:ring-surface-800;
+	}
+	.variant-outline-filled-surface-50 {
+		@apply bg-surface-50 text-black ring-[2px] ring-surface-200 dark:bg-surface-950 dark:text-white dark:ring-[2px] dark:ring-surface-800;
+	}
+	.variant-ringed-surface-50 {
+		@apply bg-transparent ring-[1px] ring-surface-50 dark:bg-transparent dark:ring-[1px] dark:ring-surface-950;
+	}
+	.variant-ghost-surface-50 {
+		@apply bg-surface-50/20 ring-[2px] ring-surface-50 dark:bg-surface-950/20 dark:ring-[2px] dark:ring-surface-950;
+	}
+	.variant-glass-surface-50 {
+		@apply bg-surface-50/40 text-surface-500 backdrop-blur-lg dark:bg-surface-950/40 dark:text-surface-500;
+	}
+	.variant-seethrough-surface-50 {
+		@apply bg-surface-50/40 text-black dark:bg-surface-950/40 dark:text-white;
+	}
+
+	.variant-filled-surface-100 {
+		@apply bg-surface-100 text-black dark:bg-surface-900 dark:text-white;
+	}
+	.variant-soft-surface-100 {
+		@apply bg-surface-100 text-surface-600 dark:bg-surface-900 dark:text-surface-400;
+	}
+	.variant-outline-only-surface-100 {
+		@apply ring-[2px] ring-surface-100 dark:ring-[2px] dark:ring-surface-900;
+	}
+	.variant-outline-soft-surface-100 {
+		@apply bg-surface-100 text-surface-600 ring-[2px] ring-surface-300 dark:bg-surface-900 dark:text-surface-400 dark:ring-[2px] dark:ring-surface-700;
+	}
+	.variant-outline-filled-surface-100 {
+		@apply bg-surface-100 text-black ring-[2px] ring-surface-300 dark:bg-surface-900 dark:text-white dark:ring-[2px] dark:ring-surface-700;
+	}
+	.variant-ringed-surface-100 {
+		@apply bg-transparent ring-[1px] ring-surface-100 dark:bg-transparent dark:ring-[1px] dark:ring-surface-900;
+	}
+	.variant-ghost-surface-100 {
+		@apply bg-surface-100/20 ring-[2px] ring-surface-100 dark:bg-surface-900/20 dark:ring-[2px] dark:ring-surface-900;
+	}
+	.variant-glass-surface-100 {
+		@apply bg-surface-100/40 text-surface-600 backdrop-blur-lg dark:bg-surface-900/40 dark:text-surface-400;
+	}
+	.variant-seethrough-surface-100 {
+		@apply bg-surface-100/40 text-black dark:bg-surface-900/40 dark:text-white;
+	}
+
+	.variant-filled-surface-200 {
+		@apply bg-surface-200 text-black dark:bg-surface-800 dark:text-white;
+	}
+	.variant-soft-surface-200 {
+		@apply bg-surface-200 text-surface-700 dark:bg-surface-800 dark:text-surface-300;
+	}
+	.variant-outline-only-surface-200 {
+		@apply ring-[2px] ring-surface-200 dark:ring-[2px] dark:ring-surface-800;
+	}
+	.variant-outline-soft-surface-200 {
+		@apply bg-surface-200 text-surface-700 ring-[2px] ring-surface-400 dark:bg-surface-800 dark:text-surface-300 dark:ring-[2px] dark:ring-surface-600;
+	}
+	.variant-outline-filled-surface-200 {
+		@apply bg-surface-200 text-black ring-[2px] ring-surface-400 dark:bg-surface-800 dark:text-white dark:ring-[2px] dark:ring-surface-600;
+	}
+	.variant-ringed-surface-200 {
+		@apply bg-transparent ring-[1px] ring-surface-200 dark:bg-transparent dark:ring-[1px] dark:ring-surface-800;
+	}
+	.variant-ghost-surface-200 {
+		@apply bg-surface-200/20 ring-[2px] ring-surface-200 dark:bg-surface-800/20 dark:ring-[2px] dark:ring-surface-800;
+	}
+	.variant-glass-surface-200 {
+		@apply bg-surface-200/40 text-surface-700 backdrop-blur-lg dark:bg-surface-800/40 dark:text-surface-300;
+	}
+	.variant-seethrough-surface-200 {
+		@apply bg-surface-200/40 text-black dark:bg-surface-800/40 dark:text-white;
+	}
+
+	.variant-filled-surface-300 {
+		@apply bg-surface-300 text-black dark:bg-surface-700 dark:text-white;
+	}
+	.variant-soft-surface-300 {
+		@apply bg-surface-300 text-surface-800 dark:bg-surface-700 dark:text-surface-200;
+	}
+	.variant-outline-only-surface-300 {
+		@apply ring-[2px] ring-surface-300 dark:ring-[2px] dark:ring-surface-700;
+	}
+	.variant-outline-soft-surface-300 {
+		@apply bg-surface-300 text-surface-800 ring-[2px] ring-surface-500 dark:bg-surface-700 dark:text-surface-200 dark:ring-[2px] dark:ring-surface-500;
+	}
+	.variant-outline-filled-surface-300 {
+		@apply bg-surface-300 text-black ring-[2px] ring-surface-500 dark:bg-surface-700 dark:text-white dark:ring-[2px] dark:ring-surface-500;
+	}
+	.variant-ringed-surface-300 {
+		@apply bg-transparent ring-[1px] ring-surface-300 dark:bg-transparent dark:ring-[1px] dark:ring-surface-700;
+	}
+	.variant-ghost-surface-300 {
+		@apply bg-surface-300/20 ring-[2px] ring-surface-300 dark:bg-surface-700/20 dark:ring-[2px] dark:ring-surface-700;
+	}
+	.variant-glass-surface-300 {
+		@apply bg-surface-300/40 text-surface-800 backdrop-blur-lg dark:bg-surface-700/40 dark:text-surface-200;
+	}
+	.variant-seethrough-surface-300 {
+		@apply bg-surface-300/40 text-black dark:bg-surface-700/40 dark:text-white;
+	}
+
+	.variant-filled-surface-400 {
+		@apply bg-surface-400 text-white dark:bg-surface-600 dark:text-white;
+	}
+	.variant-soft-surface-400 {
+		@apply bg-surface-400 text-surface-50 dark:bg-surface-600 dark:text-surface-100;
+	}
+	.variant-outline-only-surface-400 {
+		@apply ring-[2px] ring-surface-400 dark:ring-[2px] dark:ring-surface-600;
+	}
+	.variant-outline-soft-surface-400 {
+		@apply bg-surface-400 text-surface-50 ring-[2px] ring-surface-600 dark:bg-surface-600 dark:text-surface-100 dark:ring-[2px] dark:ring-surface-400;
+	}
+	.variant-outline-filled-surface-400 {
+		@apply bg-surface-400 text-white ring-[2px] ring-surface-600 dark:bg-surface-600 dark:text-white dark:ring-[2px] dark:ring-surface-400;
+	}
+	.variant-ringed-surface-400 {
+		@apply bg-transparent ring-[1px] ring-surface-400 dark:bg-transparent dark:ring-[1px] dark:ring-surface-600;
+	}
+	.variant-ghost-surface-400 {
+		@apply bg-surface-400/20 ring-[2px] ring-surface-400 dark:bg-surface-600/20 dark:ring-[2px] dark:ring-surface-600;
+	}
+	.variant-glass-surface-400 {
+		@apply bg-surface-400/40 text-surface-50 backdrop-blur-lg dark:bg-surface-600/40 dark:text-surface-100;
+	}
+	.variant-seethrough-surface-400 {
+		@apply bg-surface-400/40 text-white dark:bg-surface-600/40 dark:text-white;
+	}
+
+	.variant-filled-surface-500 {
+		@apply bg-surface-500 text-white dark:bg-surface-500 dark:text-white;
+	}
+	.variant-soft-surface-500 {
+		@apply bg-surface-500 text-surface-50 dark:bg-surface-500 dark:text-surface-50;
+	}
+	.variant-outline-only-surface-500 {
+		@apply ring-[2px] ring-surface-500 dark:ring-[2px] dark:ring-surface-500;
+	}
+	.variant-outline-soft-surface-500 {
+		@apply bg-surface-500 text-surface-50 ring-[2px] ring-surface-300 dark:bg-surface-500 dark:text-surface-50 dark:ring-[2px] dark:ring-surface-300;
+	}
+	.variant-outline-filled-surface-500 {
+		@apply bg-surface-500 text-white ring-[2px] ring-surface-300 dark:bg-surface-500 dark:text-white dark:ring-[2px] dark:ring-surface-300;
+	}
+	.variant-ringed-surface-500 {
+		@apply bg-transparent ring-[1px] ring-surface-500 dark:bg-transparent dark:ring-[1px] dark:ring-surface-500;
+	}
+	.variant-ghost-surface-500 {
+		@apply bg-surface-500/20 ring-[2px] ring-surface-500 dark:bg-surface-500/20 dark:ring-[2px] dark:ring-surface-500;
+	}
+	.variant-glass-surface-500 {
+		@apply bg-surface-500/40 text-surface-50 backdrop-blur-lg dark:bg-surface-500/40 dark:text-surface-50;
+	}
+	.variant-seethrough-surface-500 {
+		@apply bg-surface-500/40 text-white dark:bg-surface-500/40 dark:text-white;
+	}
+
+	.variant-filled-surface-600 {
+		@apply bg-surface-600 text-white dark:bg-surface-400 dark:text-white;
+	}
+	.variant-soft-surface-600 {
+		@apply bg-surface-600 text-surface-100 dark:bg-surface-400 dark:text-surface-50;
+	}
+	.variant-outline-only-surface-600 {
+		@apply ring-[2px] ring-surface-600 dark:ring-[2px] dark:ring-surface-400;
+	}
+	.variant-outline-soft-surface-600 {
+		@apply bg-surface-600 text-surface-100 ring-[2px] ring-surface-400 dark:bg-surface-400 dark:text-surface-50 dark:ring-[2px] dark:ring-surface-600;
+	}
+	.variant-outline-filled-surface-600 {
+		@apply bg-surface-600 text-white ring-[2px] ring-surface-400 dark:bg-surface-400 dark:text-white dark:ring-[2px] dark:ring-surface-600;
+	}
+	.variant-ringed-surface-600 {
+		@apply bg-transparent ring-[1px] ring-surface-600 dark:bg-transparent dark:ring-[1px] dark:ring-surface-400;
+	}
+	.variant-ghost-surface-600 {
+		@apply bg-surface-600/20 ring-[2px] ring-surface-600 dark:bg-surface-400/20 dark:ring-[2px] dark:ring-surface-400;
+	}
+	.variant-glass-surface-600 {
+		@apply bg-surface-600/40 text-surface-100 backdrop-blur-lg dark:bg-surface-400/40 dark:text-surface-50;
+	}
+	.variant-seethrough-surface-600 {
+		@apply bg-surface-600/40 text-white dark:bg-surface-400/40 dark:text-white;
+	}
+
+	.variant-filled-surface-700 {
+		@apply bg-surface-700 text-white dark:bg-surface-300 dark:text-black;
+	}
+	.variant-soft-surface-700 {
+		@apply bg-surface-700 text-surface-200 dark:bg-surface-300 dark:text-surface-800;
+	}
+	.variant-outline-only-surface-700 {
+		@apply ring-[2px] ring-surface-700 dark:ring-[2px] dark:ring-surface-300;
+	}
+	.variant-outline-soft-surface-700 {
+		@apply bg-surface-700 text-surface-200 ring-[2px] ring-surface-500 dark:bg-surface-300 dark:text-surface-800 dark:ring-[2px] dark:ring-surface-500;
+	}
+	.variant-outline-filled-surface-700 {
+		@apply bg-surface-700 text-white ring-[2px] ring-surface-500 dark:bg-surface-300 dark:text-black dark:ring-[2px] dark:ring-surface-500;
+	}
+	.variant-ringed-surface-700 {
+		@apply bg-transparent ring-[1px] ring-surface-700 dark:bg-transparent dark:ring-[1px] dark:ring-surface-300;
+	}
+	.variant-ghost-surface-700 {
+		@apply bg-surface-700/20 ring-[2px] ring-surface-700 dark:bg-surface-300/20 dark:ring-[2px] dark:ring-surface-300;
+	}
+	.variant-glass-surface-700 {
+		@apply bg-surface-700/40 text-surface-200 backdrop-blur-lg dark:bg-surface-300/40 dark:text-surface-800;
+	}
+	.variant-seethrough-surface-700 {
+		@apply bg-surface-700/40 text-white dark:bg-surface-300/40 dark:text-black;
+	}
+
+	.variant-filled-surface-800 {
+		@apply bg-surface-800 text-white dark:bg-surface-200 dark:text-black;
+	}
+	.variant-soft-surface-800 {
+		@apply bg-surface-800 text-surface-300 dark:bg-surface-200 dark:text-surface-700;
+	}
+	.variant-outline-only-surface-800 {
+		@apply ring-[2px] ring-surface-800 dark:ring-[2px] dark:ring-surface-200;
+	}
+	.variant-outline-soft-surface-800 {
+		@apply bg-surface-800 text-surface-300 ring-[2px] ring-surface-600 dark:bg-surface-200 dark:text-surface-700 dark:ring-[2px] dark:ring-surface-400;
+	}
+	.variant-outline-filled-surface-800 {
+		@apply bg-surface-800 text-white ring-[2px] ring-surface-600 dark:bg-surface-200 dark:text-black dark:ring-[2px] dark:ring-surface-400;
+	}
+	.variant-ringed-surface-800 {
+		@apply bg-transparent ring-[1px] ring-surface-800 dark:bg-transparent dark:ring-[1px] dark:ring-surface-200;
+	}
+	.variant-ghost-surface-800 {
+		@apply bg-surface-800/20 ring-[2px] ring-surface-800 dark:bg-surface-200/20 dark:ring-[2px] dark:ring-surface-200;
+	}
+	.variant-glass-surface-800 {
+		@apply bg-surface-800/40 text-surface-300 backdrop-blur-lg dark:bg-surface-200/40 dark:text-surface-700;
+	}
+	.variant-seethrough-surface-800 {
+		@apply bg-surface-800/40 text-white dark:bg-surface-200/40 dark:text-black;
+	}
+
+	.variant-filled-surface-900 {
+		@apply bg-surface-900 text-white dark:bg-surface-100 dark:text-black;
+	}
+	.variant-soft-surface-900 {
+		@apply bg-surface-900 text-surface-400 dark:bg-surface-100 dark:text-surface-600;
+	}
+	.variant-outline-only-surface-900 {
+		@apply ring-[2px] ring-surface-900 dark:ring-[2px] dark:ring-surface-100;
+	}
+	.variant-outline-soft-surface-900 {
+		@apply bg-surface-900 text-surface-400 ring-[2px] ring-surface-700 dark:bg-surface-100 dark:text-surface-600 dark:ring-[2px] dark:ring-surface-300;
+	}
+	.variant-outline-filled-surface-900 {
+		@apply bg-surface-900 text-white ring-[2px] ring-surface-700 dark:bg-surface-100 dark:text-black dark:ring-[2px] dark:ring-surface-300;
+	}
+	.variant-ringed-surface-900 {
+		@apply bg-transparent ring-[1px] ring-surface-900 dark:bg-transparent dark:ring-[1px] dark:ring-surface-100;
+	}
+	.variant-ghost-surface-900 {
+		@apply bg-surface-900/20 ring-[2px] ring-surface-900 dark:bg-surface-100/20 dark:ring-[2px] dark:ring-surface-100;
+	}
+	.variant-glass-surface-900 {
+		@apply bg-surface-900/40 text-surface-400 backdrop-blur-lg dark:bg-surface-100/40 dark:text-surface-600;
+	}
+	.variant-seethrough-surface-900 {
+		@apply bg-surface-900/40 text-white dark:bg-surface-100/40 dark:text-black;
+	}
+
+	.variant-filled-surface-950 {
+		@apply bg-surface-950 text-white dark:bg-surface-50 dark:text-black;
+	}
+	.variant-soft-surface-950 {
+		@apply bg-surface-950 text-surface-500 dark:bg-surface-50 dark:text-surface-500;
+	}
+	.variant-outline-only-surface-950 {
+		@apply ring-[2px] ring-surface-950 dark:ring-[2px] dark:ring-surface-50;
+	}
+	.variant-outline-soft-surface-950 {
+		@apply bg-surface-950 text-surface-500 ring-[2px] ring-surface-800 dark:bg-surface-50 dark:text-surface-500 dark:ring-[2px] dark:ring-surface-200;
+	}
+	.variant-outline-filled-surface-950 {
+		@apply bg-surface-950 text-white ring-[2px] ring-surface-800 dark:bg-surface-50 dark:text-black dark:ring-[2px] dark:ring-surface-200;
+	}
+	.variant-ringed-surface-950 {
+		@apply bg-transparent ring-[1px] ring-surface-950 dark:bg-transparent dark:ring-[1px] dark:ring-surface-50;
+	}
+	.variant-ghost-surface-950 {
+		@apply bg-surface-950/20 ring-[2px] ring-surface-950 dark:bg-surface-50/20 dark:ring-[2px] dark:ring-surface-50;
+	}
+	.variant-glass-surface-950 {
+		@apply bg-surface-950/40 text-surface-500 backdrop-blur-lg dark:bg-surface-50/40 dark:text-surface-500;
+	}
+	.variant-seethrough-surface-950 {
+		@apply bg-surface-950/40 text-white dark:bg-surface-50/40 dark:text-black;
+	}
+
+	/* black */
+
+	.variant-filled-black-50 {
+		@apply bg-black-50 dark:bg-black-950 text-white dark:text-black;
+	}
+	.variant-soft-black-50 {
+		@apply bg-black-50 text-black-500 dark:bg-black-950 dark:text-black-500;
+	}
+	.variant-outline-only-black-50 {
+		@apply ring-black-50 dark:ring-black-950 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-50 {
+		@apply bg-black-50 text-black-500 ring-black-200 dark:bg-black-950 dark:text-black-500 dark:ring-black-800 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-50 {
+		@apply bg-black-50 ring-black-200 dark:bg-black-950 dark:ring-black-800 text-white ring-[2px] dark:text-black dark:ring-[2px];
+	}
+	.variant-ringed-black-50 {
+		@apply ring-black-50 dark:ring-black-950 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-black-100 {
+		@apply bg-black-100 dark:bg-black-900 text-white dark:text-black;
+	}
+	.variant-soft-black-100 {
+		@apply bg-black-100 text-black-600 dark:bg-black-900 dark:text-black-400;
+	}
+	.variant-outline-only-black-100 {
+		@apply ring-black-100 dark:ring-black-900 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-100 {
+		@apply bg-black-100 text-black-600 ring-black-300 dark:bg-black-900 dark:text-black-400 dark:ring-black-700 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-100 {
+		@apply bg-black-100 ring-black-300 dark:bg-black-900 dark:ring-black-700 text-white ring-[2px] dark:text-black dark:ring-[2px];
+	}
+	.variant-ringed-black-100 {
+		@apply ring-black-100 dark:ring-black-900 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-black-200 {
+		@apply bg-black-200 dark:bg-black-800 text-white dark:text-black;
+	}
+	.variant-soft-black-200 {
+		@apply bg-black-200 text-black-700 dark:bg-black-800 dark:text-black-300;
+	}
+	.variant-outline-only-black-200 {
+		@apply ring-black-200 dark:ring-black-800 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-200 {
+		@apply bg-black-200 text-black-700 ring-black-400 dark:bg-black-800 dark:text-black-300 dark:ring-black-600 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-200 {
+		@apply bg-black-200 ring-black-400 dark:bg-black-800 dark:ring-black-600 text-white ring-[2px] dark:text-black dark:ring-[2px];
+	}
+	.variant-ringed-black-200 {
+		@apply ring-black-200 dark:ring-black-800 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-black-300 {
+		@apply bg-black-300 dark:bg-black-700 text-white dark:text-black;
+	}
+	.variant-soft-black-300 {
+		@apply bg-black-300 text-black-800 dark:bg-black-700 dark:text-black-200;
+	}
+	.variant-outline-only-black-300 {
+		@apply ring-black-300 dark:ring-black-700 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-300 {
+		@apply bg-black-300 text-black-800 ring-black-500 dark:bg-black-700 dark:text-black-200 dark:ring-black-500 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-300 {
+		@apply bg-black-300 ring-black-500 dark:bg-black-700 dark:ring-black-500 text-white ring-[2px] dark:text-black dark:ring-[2px];
+	}
+	.variant-ringed-black-300 {
+		@apply ring-black-300 dark:ring-black-700 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-black-400 {
+		@apply bg-black-400 dark:bg-black-600 text-white dark:text-black;
+	}
+	.variant-soft-black-400 {
+		@apply bg-black-400 text-black-900 dark:bg-black-600 dark:text-black-100;
+	}
+	.variant-outline-only-black-400 {
+		@apply ring-black-400 dark:ring-black-600 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-400 {
+		@apply bg-black-400 text-black-900 ring-black-600 dark:bg-black-600 dark:text-black-100 dark:ring-black-400 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-400 {
+		@apply bg-black-400 ring-black-600 dark:bg-black-600 dark:ring-black-400 text-white ring-[2px] dark:text-black dark:ring-[2px];
+	}
+	.variant-ringed-black-400 {
+		@apply ring-black-400 dark:ring-black-600 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-black-500 {
+		@apply bg-black-500 dark:bg-black-500 text-white dark:text-white;
+	}
+	.variant-soft-black-500 {
+		@apply bg-black-500 text-black-50 dark:bg-black-500 dark:text-black-50;
+	}
+	.variant-outline-only-black-500 {
+		@apply ring-black-500 dark:ring-black-500 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-500 {
+		@apply bg-black-500 text-black-50 ring-black-300 dark:bg-black-500 dark:text-black-50 dark:ring-black-300 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-500 {
+		@apply bg-black-500 ring-black-300 dark:bg-black-500 dark:ring-black-300 text-white ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-black-500 {
+		@apply ring-black-500 dark:ring-black-500 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-black-600 {
+		@apply bg-black-600 dark:bg-black-400 text-black dark:text-white;
+	}
+	.variant-soft-black-600 {
+		@apply bg-black-600 text-black-100 dark:bg-black-400 dark:text-black-900;
+	}
+	.variant-outline-only-black-600 {
+		@apply ring-black-600 dark:ring-black-400 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-600 {
+		@apply bg-black-600 text-black-100 ring-black-400 dark:bg-black-400 dark:text-black-900 dark:ring-black-600 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-600 {
+		@apply bg-black-600 ring-black-400 dark:bg-black-400 dark:ring-black-600 text-black ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-black-600 {
+		@apply ring-black-600 dark:ring-black-400 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-black-700 {
+		@apply bg-black-700 dark:bg-black-300 text-black dark:text-white;
+	}
+	.variant-soft-black-700 {
+		@apply bg-black-700 text-black-200 dark:bg-black-300 dark:text-black-800;
+	}
+	.variant-outline-only-black-700 {
+		@apply ring-black-700 dark:ring-black-300 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-700 {
+		@apply bg-black-700 text-black-200 ring-black-500 dark:bg-black-300 dark:text-black-800 dark:ring-black-500 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-700 {
+		@apply bg-black-700 ring-black-500 dark:bg-black-300 dark:ring-black-500 text-black ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-black-700 {
+		@apply ring-black-700 dark:ring-black-300 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-black-800 {
+		@apply bg-black-800 dark:bg-black-200 text-black dark:text-white;
+	}
+	.variant-soft-black-800 {
+		@apply bg-black-800 text-black-300 dark:bg-black-200 dark:text-black-700;
+	}
+	.variant-outline-only-black-800 {
+		@apply ring-black-800 dark:ring-black-200 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-800 {
+		@apply bg-black-800 text-black-300 ring-black-600 dark:bg-black-200 dark:text-black-700 dark:ring-black-400 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-800 {
+		@apply bg-black-800 ring-black-600 dark:bg-black-200 dark:ring-black-400 text-black ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-black-800 {
+		@apply ring-black-800 dark:ring-black-200 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-black-900 {
+		@apply bg-black-900 dark:bg-black-100 text-black dark:text-white;
+	}
+	.variant-soft-black-900 {
+		@apply bg-black-900 text-black-400 dark:bg-black-100 dark:text-black-600;
+	}
+	.variant-outline-only-black-900 {
+		@apply ring-black-900 dark:ring-black-100 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-900 {
+		@apply bg-black-900 text-black-400 ring-black-700 dark:bg-black-100 dark:text-black-600 dark:ring-black-300 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-900 {
+		@apply bg-black-900 ring-black-700 dark:bg-black-100 dark:ring-black-300 text-black ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-black-900 {
+		@apply ring-black-900 dark:ring-black-100 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-black-950 {
+		@apply bg-black-950 dark:bg-black-50 text-black dark:text-white;
+	}
+	.variant-soft-black-950 {
+		@apply bg-black-950 text-black-500 dark:bg-black-50 dark:text-black-500;
+	}
+	.variant-outline-only-black-950 {
+		@apply ring-black-950 dark:ring-black-50 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-black-950 {
+		@apply bg-black-950 text-black-500 ring-black-800 dark:bg-black-50 dark:text-black-500 dark:ring-black-200 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-black-950 {
+		@apply bg-black-950 ring-black-800 dark:bg-black-50 dark:ring-black-200 text-black ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-black-950 {
+		@apply ring-black-950 dark:ring-black-50 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	/* white */
+
+	.variant-filled-white-50 {
+		@apply bg-white-50 dark:bg-white-950 text-black dark:text-white;
+	}
+	.variant-soft-white-50 {
+		@apply bg-white-50 text-white-500 dark:bg-white-950 dark:text-white-500;
+	}
+	.variant-outline-only-white-50 {
+		@apply ring-white-50 dark:ring-white-950 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-50 {
+		@apply bg-white-50 text-white-500 ring-white-200 dark:bg-white-950 dark:text-white-500 dark:ring-white-800 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-50 {
+		@apply bg-white-50 ring-white-200 dark:bg-white-950 dark:ring-white-800 text-black ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-white-50 {
+		@apply ring-white-50 dark:ring-white-950 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-white-100 {
+		@apply bg-white-100 dark:bg-white-900 text-black dark:text-white;
+	}
+	.variant-soft-white-100 {
+		@apply bg-white-100 text-white-600 dark:bg-white-900 dark:text-white-400;
+	}
+	.variant-outline-only-white-100 {
+		@apply ring-white-100 dark:ring-white-900 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-100 {
+		@apply bg-white-100 text-white-600 ring-white-300 dark:bg-white-900 dark:text-white-400 dark:ring-white-700 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-100 {
+		@apply bg-white-100 ring-white-300 dark:bg-white-900 dark:ring-white-700 text-black ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-white-100 {
+		@apply ring-white-100 dark:ring-white-900 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-white-200 {
+		@apply bg-white-200 dark:bg-white-800 text-black dark:text-white;
+	}
+	.variant-soft-white-200 {
+		@apply bg-white-200 text-white-700 dark:bg-white-800 dark:text-white-300;
+	}
+	.variant-outline-only-white-200 {
+		@apply ring-white-200 dark:ring-white-800 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-200 {
+		@apply bg-white-200 text-white-700 ring-white-400 dark:bg-white-800 dark:text-white-300 dark:ring-white-600 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-200 {
+		@apply bg-white-200 ring-white-400 dark:bg-white-800 dark:ring-white-600 text-black ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-white-200 {
+		@apply ring-white-200 dark:ring-white-800 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-white-300 {
+		@apply bg-white-300 dark:bg-white-700 text-black dark:text-white;
+	}
+	.variant-soft-white-300 {
+		@apply bg-white-300 text-white-800 dark:bg-white-700 dark:text-white-200;
+	}
+	.variant-outline-only-white-300 {
+		@apply ring-white-300 dark:ring-white-700 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-300 {
+		@apply bg-white-300 text-white-800 ring-white-500 dark:bg-white-700 dark:text-white-200 dark:ring-white-500 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-300 {
+		@apply bg-white-300 ring-white-500 dark:bg-white-700 dark:ring-white-500 text-black ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-white-300 {
+		@apply ring-white-300 dark:ring-white-700 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-white-400 {
+		@apply bg-white-400 dark:bg-white-600 text-black dark:text-white;
+	}
+	.variant-soft-white-400 {
+		@apply bg-white-400 text-white-900 dark:bg-white-600 dark:text-white-100;
+	}
+	.variant-outline-only-white-400 {
+		@apply ring-white-400 dark:ring-white-600 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-400 {
+		@apply bg-white-400 text-white-900 ring-white-600 dark:bg-white-600 dark:text-white-100 dark:ring-white-400 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-400 {
+		@apply bg-white-400 ring-white-600 dark:bg-white-600 dark:ring-white-400 text-black ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-white-400 {
+		@apply ring-white-400 dark:ring-white-600 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-white-500 {
+		@apply bg-white-500 dark:bg-white-500 text-white dark:text-white;
+	}
+	.variant-soft-white-500 {
+		@apply bg-white-500 text-white-50 dark:bg-white-500 dark:text-white-50;
+	}
+	.variant-outline-only-white-500 {
+		@apply ring-white-500 dark:ring-white-500 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-500 {
+		@apply bg-white-500 text-white-50 ring-white-300 dark:bg-white-500 dark:text-white-50 dark:ring-white-300 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-500 {
+		@apply bg-white-500 ring-white-300 dark:bg-white-500 dark:ring-white-300 text-white ring-[2px] dark:text-white dark:ring-[2px];
+	}
+	.variant-ringed-white-500 {
+		@apply ring-white-500 dark:ring-white-500 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-white-600 {
+		@apply bg-white-600 dark:bg-white-400 text-white dark:text-black;
+	}
+	.variant-soft-white-600 {
+		@apply bg-white-600 text-white-100 dark:bg-white-400 dark:text-white-900;
+	}
+	.variant-outline-only-white-600 {
+		@apply ring-white-600 dark:ring-white-400 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-600 {
+		@apply bg-white-600 text-white-100 ring-white-400 dark:bg-white-400 dark:text-white-900 dark:ring-white-600 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-600 {
+		@apply bg-white-600 ring-white-400 dark:bg-white-400 dark:ring-white-600 text-white ring-[2px] dark:text-black dark:ring-[2px];
+	}
+	.variant-ringed-white-600 {
+		@apply ring-white-600 dark:ring-white-400 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-white-700 {
+		@apply bg-white-700 dark:bg-white-300 text-white dark:text-black;
+	}
+	.variant-soft-white-700 {
+		@apply bg-white-700 text-white-200 dark:bg-white-300 dark:text-white-800;
+	}
+	.variant-outline-only-white-700 {
+		@apply ring-white-700 dark:ring-white-300 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-700 {
+		@apply bg-white-700 text-white-200 ring-white-500 dark:bg-white-300 dark:text-white-800 dark:ring-white-500 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-700 {
+		@apply bg-white-700 ring-white-500 dark:bg-white-300 dark:ring-white-500 text-white ring-[2px] dark:text-black dark:ring-[2px];
+	}
+	.variant-ringed-white-700 {
+		@apply ring-white-700 dark:ring-white-300 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-white-800 {
+		@apply bg-white-800 dark:bg-white-200 text-white dark:text-black;
+	}
+	.variant-soft-white-800 {
+		@apply bg-white-800 text-white-300 dark:bg-white-200 dark:text-white-700;
+	}
+	.variant-outline-only-white-800 {
+		@apply ring-white-800 dark:ring-white-200 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-800 {
+		@apply bg-white-800 text-white-300 ring-white-600 dark:bg-white-200 dark:text-white-700 dark:ring-white-400 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-800 {
+		@apply bg-white-800 ring-white-600 dark:bg-white-200 dark:ring-white-400 text-white ring-[2px] dark:text-black dark:ring-[2px];
+	}
+	.variant-ringed-white-800 {
+		@apply ring-white-800 dark:ring-white-200 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-white-900 {
+		@apply bg-white-900 dark:bg-white-100 text-white dark:text-black;
+	}
+	.variant-soft-white-900 {
+		@apply bg-white-900 text-white-400 dark:bg-white-100 dark:text-white-600;
+	}
+	.variant-outline-only-white-900 {
+		@apply ring-white-900 dark:ring-white-100 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-900 {
+		@apply bg-white-900 text-white-400 ring-white-700 dark:bg-white-100 dark:text-white-600 dark:ring-white-300 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-900 {
+		@apply bg-white-900 ring-white-700 dark:bg-white-100 dark:ring-white-300 text-white ring-[2px] dark:text-black dark:ring-[2px];
+	}
+	.variant-ringed-white-900 {
+		@apply ring-white-900 dark:ring-white-100 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+
+	.variant-filled-white-950 {
+		@apply bg-white-950 dark:bg-white-50 text-white dark:text-black;
+	}
+	.variant-soft-white-950 {
+		@apply bg-white-950 text-white-500 dark:bg-white-50 dark:text-white-500;
+	}
+	.variant-outline-only-white-950 {
+		@apply ring-white-950 dark:ring-white-50 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-soft-white-950 {
+		@apply bg-white-950 text-white-500 ring-white-800 dark:bg-white-50 dark:text-white-500 dark:ring-white-200 ring-[2px] dark:ring-[2px];
+	}
+	.variant-outline-filled-white-950 {
+		@apply bg-white-950 ring-white-800 dark:bg-white-50 dark:ring-white-200 text-white ring-[2px] dark:text-black dark:ring-[2px];
+	}
+	.variant-ringed-white-950 {
+		@apply ring-white-950 dark:ring-white-50 bg-transparent ring-[1px] dark:bg-transparent dark:ring-[1px];
+	}
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index bb06dbe9..7a0f7015 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -3,6 +3,7 @@ import type { Config } from 'tailwindcss';
 import { join } from 'path';
 import { skeleton, contentPath } from '@skeletonlabs/skeleton/plugin';
 import * as themes from '@skeletonlabs/skeleton/themes';
+import twScrollbar from 'tailwind-scrollbar';
 
 import grady from './theme';
 
@@ -18,6 +19,7 @@ export default {
 	plugins: [
 		skeleton({
 			themes: [themes.catppuccin, themes.rose, grady]
-		})
+		}),
+		twScrollbar
 	]
 } satisfies Config;
-- 
GitLab