diff --git a/package.json b/package.json
index f807a7c..9da8882 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./style": "./src/styles/style.css",
     "./components/*": "./src/components/*",
     "./utils/*": "./src/utils/*"
   },
@@ -77,4 +78,4 @@
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.1"
   }
-}
+}
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
index 0d1c945..400c7dd 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,9 +1,9 @@
+@import "./style.css";
 @import "tailwindcss";
 
 @plugin "@tailwindcss/forms";
 
 @layer base {
-
     button:not(:disabled),
     [role="button"]:not(:disabled) {
         cursor: pointer;
@@ -11,239 +11,4 @@
 }
 
 @custom-variant dark (&:is(.dark *));
-@custom-variant hover (&:hover);
-
-:root {
-    /* Roles (defaults) */
-    --primary: 221 83% 53%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 262 83% 58%;
-    --secondary-foreground: 210 40% 98%;
-    --tertiary: 26 95% 55%;
-    --tertiary-foreground: 26 100% 10%;
-    --accent: 173 80% 40%;
-    --accent-foreground: 168 75% 97%;
-    --info: 199 89% 48%;
-    --info-foreground: 210 40% 98%;
-    --success: 142 71% 45%;
-    --success-foreground: 144 60% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 26 83% 15%;
-    --danger: 0 84% 60%;
-    --danger-foreground: 0 0% 100%;
-    --neutral: 215 16% 47%;
-    --neutral-foreground: 210 40% 98%;
-    --link: 221 83% 53%;
-    --link-visited: 262 83% 58%;
-}
-
-/* ---------- Brand palettes (swap only role colors) ---------- */
-/* ocean */
-[data-color="ocean"] {
-    --primary: 199 89% 48%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 172 66% 45%;
-    --secondary-foreground: 168 75% 97%;
-    --tertiary: 260 84% 60%;
-    --tertiary-foreground: 260 100% 98%;
-    --accent: 205 100% 36%;
-    --accent-foreground: 210 40% 98%;
-    --info: 199 95% 62%;
-    --success: 145 65% 43%;
-    --success-foreground: 144 60% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 26 83% 15%;
-    --danger: 0 84% 60%;
-    --danger-foreground: 0 0% 100%;
-    --neutral: 215 16% 47%;
-    --neutral-foreground: 210 40% 98%;
-}
-
-/* forest */
-[data-color="forest"] {
-    --primary: 142 71% 35%;
-    --primary-foreground: 144 60% 98%;
-    --secondary: 84 64% 35%;
-    --secondary-foreground: 60 30% 96%;
-    --tertiary: 25 86% 50%;
-    --tertiary-foreground: 26 100% 10%;
-    --accent: 160 84% 39%;
-    --accent-foreground: 150 80% 96%;
-    --info: 199 89% 48%;
-    --success: 142 71% 42%;
-    --success-foreground: 144 60% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 26 83% 15%;
-    --danger: 0 84% 60%;
-    --danger-foreground: 0 0% 100%;
-    --neutral: 215 16% 47%;
-    --neutral-foreground: 210 40% 98%;
-}
-
-/* sunset */
-[data-color="sunset"] {
-    --primary: 14 90% 57%;
-    --primary-foreground: 24 100% 97%;
-    --secondary: 340 82% 52%;
-    --secondary-foreground: 0 0% 100%;
-    --tertiary: 48 96% 53%;
-    --tertiary-foreground: 26 100% 12%;
-    --accent: 262 83% 58%;
-    --accent-foreground: 210 40% 98%;
-    --info: 199 89% 48%;
-    --success: 142 71% 45%;
-    --success-foreground: 144 60% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 26 83% 15%;
-    --danger: 0 84% 60%;
-    --danger-foreground: 0 0% 100%;
-    --neutral: 215 16% 47%;
-    --neutral-foreground: 210 40% 98%;
-}
-
-/* grape */
-[data-color="grape"] {
-    --primary: 262 83% 58%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 292 84% 61%;
-    --secondary-foreground: 210 40% 98%;
-    --tertiary: 199 89% 48%;
-    --tertiary-foreground: 210 40% 98%;
-    --accent: 316 73% 52%;
-    --accent-foreground: 0 0% 100%;
-    --info: 199 89% 48%;
-    --success: 150 70% 40%;
-    --success-foreground: 150 40% 96%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 26 83% 15%;
-    --danger: 0 84% 60%;
-    --danger-foreground: 0 0% 100%;
-    --neutral: 215 16% 47%;
-    --neutral-foreground: 210 40% 98%;
-}
-
-/* slate (low-chroma) */
-[data-color="slate"] {
-    --primary: 215 20% 50%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 220 14% 34%;
-    --secondary-foreground: 210 40% 98%;
-    --tertiary: 220 10% 60%;
-    --tertiary-foreground: 222 47% 10%;
-    --accent: 215 16% 47%;
-    --accent-foreground: 210 40% 98%;
-    --info: 215 20% 65%;
-    --success: 142 25% 45%;
-    --success-foreground: 144 40% 96%;
-    --warning: 38 60% 50%;
-    --warning-foreground: 26 83% 15%;
-    --danger: 0 70% 55%;
-    --danger-foreground: 0 0% 100%;
-    --neutral: 216 10% 40%;
-    --neutral-foreground: 210 40% 98%;
-}
-
-/* mint */
-[data-color="mint"] {
-    --primary: 158 64% 45%;
-    --primary-foreground: 160 84% 98%;
-    --secondary: 174 60% 40%;
-    --secondary-foreground: 168 75% 97%;
-    --tertiary: 192 84% 40%;
-    --tertiary-foreground: 210 40% 98%;
-    --accent: 173 80% 40%;
-    --accent-foreground: 168 75% 97%;
-    --info: 199 90% 50%;
-    --success: 156 72% 36%;
-    --success-foreground: 158 70% 96%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 26 83% 15%;
-    --danger: 2 83% 63%;
-    --danger-foreground: 0 0% 100%;
-    --neutral: 215 16% 47%;
-    --neutral-foreground: 210 40% 98%;
-}
-
-/* amber */
-[data-color="amber"] {
-    --primary: 38 94% 55%;
-    --primary-foreground: 26 83% 12%;
-    --secondary: 14 90% 57%;
-    --secondary-foreground: 24 100% 97%;
-    --tertiary: 26 100% 55%;
-    --tertiary-foreground: 26 100% 12%;
-    --accent: 199 89% 48%;
-    --accent-foreground: 210 40% 98%;
-    --info: 199 89% 48%;
-    --success: 142 71% 45%;
-    --success-foreground: 144 60% 98%;
-    --warning: 38 94% 55%;
-    --warning-foreground: 26 83% 15%;
-    --danger: 0 84% 60%;
-    --danger-foreground: 0 0% 100%;
-    --neutral: 215 16% 47%;
-    --neutral-foreground: 210 40% 98%;
-}
-
-/* crimson */
-[data-color="crimson"] {
-    --primary: 350 85% 55%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 0 84% 60%;
-    --secondary-foreground: 0 0% 100%;
-    --tertiary: 17 88% 60%;
-    --tertiary-foreground: 26 100% 12%;
-    --accent: 262 83% 58%;
-    --accent-foreground: 210 40% 98%;
-    --info: 199 89% 48%;
-    --success: 142 71% 45%;
-    --success-foreground: 144 60% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 26 83% 15%;
-    --danger: 0 84% 60%;
-    --danger-foreground: 0 0% 100%;
-    --neutral: 215 16% 47%;
-    --neutral-foreground: 210 40% 98%;
-}
-
-/* indigo */
-[data-color="indigo"] {
-    --primary: 231 89% 60%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 262 83% 58%;
-    --secondary-foreground: 210 40% 98%;
-    --tertiary: 173 80% 40%;
-    --tertiary-foreground: 168 75% 97%;
-    --accent: 199 89% 48%;
-    --accent-foreground: 210 40% 98%;
-    --info: 201 96% 48%;
-    --success: 142 71% 45%;
-    --success-foreground: 144 60% 98%;
-    --warning: 38 92% 50%;
-    --warning-foreground: 26 83% 15%;
-    --danger: 0 84% 60%;
-    --danger-foreground: 0 0% 100%;
-    --neutral: 215 16% 47%;
-    --neutral-foreground: 210 40% 98%;
-}
-
-@theme {
-    --color-primary: hsl(var(--primary));
-    --color-primary-foreground: hsl(var(--primary-foreground));
-    --color-secondary: hsl(var(--secondary));
-    --color-secondary-foreground: hsl(var(--secondary-foreground));
-    --color-tertiary: hsl(var(--tertiary));
-    --color-tertiary-foreground: hsl(var(--tertiary-foreground));
-    --color-accent: hsl(var(--accent));
-    --color-accent-foreground: hsl(var(--accent-foreground));
-    --color-info: hsl(var(--info));
-    --color-info-foreground: hsl(var(--info-foreground));
-    --color-success: hsl(var(--success));
-    --color-success-foreground: hsl(var(--success-foreground));
-    --color-warning: hsl(var(--warning));
-    --color-warning-foreground: hsl(var(--warning-foreground));
-    --color-danger: hsl(var(--danger));
-    --color-danger-foreground: hsl(var(--danger-foreground));
-    --color-neutral: hsl(var(--neutral));
-    --color-neutral-foreground: hsl(var(--neutral-foreground));
-}
\ No newline at end of file
+@custom-variant hover (&:hover);
\ No newline at end of file
diff --git a/src/styles/style.css b/src/styles/style.css
new file mode 100644
index 0000000..fc3e948
--- /dev/null
+++ b/src/styles/style.css
@@ -0,0 +1,234 @@
+:root {
+    /* Roles (defaults) */
+    --primary: 221 83% 53%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 262 83% 58%;
+    --secondary-foreground: 210 40% 98%;
+    --tertiary: 26 95% 55%;
+    --tertiary-foreground: 26 100% 10%;
+    --accent: 173 80% 40%;
+    --accent-foreground: 168 75% 97%;
+    --info: 199 89% 48%;
+    --info-foreground: 210 40% 98%;
+    --success: 142 71% 45%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+    --link: 221 83% 53%;
+    --link-visited: 262 83% 58%;
+}
+
+/* ---------- Brand palettes (swap only role colors) ---------- */
+/* ocean */
+[data-color="ocean"] {
+    --primary: 199 89% 48%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 172 66% 45%;
+    --secondary-foreground: 168 75% 97%;
+    --tertiary: 260 84% 60%;
+    --tertiary-foreground: 260 100% 98%;
+    --accent: 205 100% 36%;
+    --accent-foreground: 210 40% 98%;
+    --info: 199 95% 62%;
+    --success: 145 65% 43%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* forest */
+[data-color="forest"] {
+    --primary: 142 71% 35%;
+    --primary-foreground: 144 60% 98%;
+    --secondary: 84 64% 35%;
+    --secondary-foreground: 60 30% 96%;
+    --tertiary: 25 86% 50%;
+    --tertiary-foreground: 26 100% 10%;
+    --accent: 160 84% 39%;
+    --accent-foreground: 150 80% 96%;
+    --info: 199 89% 48%;
+    --success: 142 71% 42%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* sunset */
+[data-color="sunset"] {
+    --primary: 14 90% 57%;
+    --primary-foreground: 24 100% 97%;
+    --secondary: 340 82% 52%;
+    --secondary-foreground: 0 0% 100%;
+    --tertiary: 48 96% 53%;
+    --tertiary-foreground: 26 100% 12%;
+    --accent: 262 83% 58%;
+    --accent-foreground: 210 40% 98%;
+    --info: 199 89% 48%;
+    --success: 142 71% 45%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* grape */
+[data-color="grape"] {
+    --primary: 262 83% 58%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 292 84% 61%;
+    --secondary-foreground: 210 40% 98%;
+    --tertiary: 199 89% 48%;
+    --tertiary-foreground: 210 40% 98%;
+    --accent: 316 73% 52%;
+    --accent-foreground: 0 0% 100%;
+    --info: 199 89% 48%;
+    --success: 150 70% 40%;
+    --success-foreground: 150 40% 96%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* slate (low-chroma) */
+[data-color="slate"] {
+    --primary: 215 20% 50%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 220 14% 34%;
+    --secondary-foreground: 210 40% 98%;
+    --tertiary: 220 10% 60%;
+    --tertiary-foreground: 222 47% 10%;
+    --accent: 215 16% 47%;
+    --accent-foreground: 210 40% 98%;
+    --info: 215 20% 65%;
+    --success: 142 25% 45%;
+    --success-foreground: 144 40% 96%;
+    --warning: 38 60% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 70% 55%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 216 10% 40%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* mint */
+[data-color="mint"] {
+    --primary: 158 64% 45%;
+    --primary-foreground: 160 84% 98%;
+    --secondary: 174 60% 40%;
+    --secondary-foreground: 168 75% 97%;
+    --tertiary: 192 84% 40%;
+    --tertiary-foreground: 210 40% 98%;
+    --accent: 173 80% 40%;
+    --accent-foreground: 168 75% 97%;
+    --info: 199 90% 50%;
+    --success: 156 72% 36%;
+    --success-foreground: 158 70% 96%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 2 83% 63%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* amber */
+[data-color="amber"] {
+    --primary: 38 94% 55%;
+    --primary-foreground: 26 83% 12%;
+    --secondary: 14 90% 57%;
+    --secondary-foreground: 24 100% 97%;
+    --tertiary: 26 100% 55%;
+    --tertiary-foreground: 26 100% 12%;
+    --accent: 199 89% 48%;
+    --accent-foreground: 210 40% 98%;
+    --info: 199 89% 48%;
+    --success: 142 71% 45%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 94% 55%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* crimson */
+[data-color="crimson"] {
+    --primary: 350 85% 55%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 84% 60%;
+    --secondary-foreground: 0 0% 100%;
+    --tertiary: 17 88% 60%;
+    --tertiary-foreground: 26 100% 12%;
+    --accent: 262 83% 58%;
+    --accent-foreground: 210 40% 98%;
+    --info: 199 89% 48%;
+    --success: 142 71% 45%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+/* indigo */
+[data-color="indigo"] {
+    --primary: 231 89% 60%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 262 83% 58%;
+    --secondary-foreground: 210 40% 98%;
+    --tertiary: 173 80% 40%;
+    --tertiary-foreground: 168 75% 97%;
+    --accent: 199 89% 48%;
+    --accent-foreground: 210 40% 98%;
+    --info: 201 96% 48%;
+    --success: 142 71% 45%;
+    --success-foreground: 144 60% 98%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 26 83% 15%;
+    --danger: 0 84% 60%;
+    --danger-foreground: 0 0% 100%;
+    --neutral: 215 16% 47%;
+    --neutral-foreground: 210 40% 98%;
+}
+
+@theme {
+    --color-primary: hsl(var(--primary));
+    --color-primary-foreground: hsl(var(--primary-foreground));
+    --color-secondary: hsl(var(--secondary));
+    --color-secondary-foreground: hsl(var(--secondary-foreground));
+    --color-tertiary: hsl(var(--tertiary));
+    --color-tertiary-foreground: hsl(var(--tertiary-foreground));
+    --color-accent: hsl(var(--accent));
+    --color-accent-foreground: hsl(var(--accent-foreground));
+    --color-info: hsl(var(--info));
+    --color-info-foreground: hsl(var(--info-foreground));
+    --color-success: hsl(var(--success));
+    --color-success-foreground: hsl(var(--success-foreground));
+    --color-warning: hsl(var(--warning));
+    --color-warning-foreground: hsl(var(--warning-foreground));
+    --color-danger: hsl(var(--danger));
+    --color-danger-foreground: hsl(var(--danger-foreground));
+    --color-neutral: hsl(var(--neutral));
+    --color-neutral-foreground: hsl(var(--neutral-foreground));
+}
\ No newline at end of file