@mdigital_ui/ui 0.4.2 → 0.4.4

package/styles/global.css

@@ -4,7 +4,6 @@
 @layer theme {
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif;
-    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
     --font-mono: ui-monospace, "SF Mono", monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
@@ -21,12 +20,10 @@
     --color-gray-50: oklch(98% 0 0);
     --color-gray-100: oklch(96% 0 0);
     --color-gray-200: oklch(92% 0 0);
-    --color-gray-300: oklch(87% 0 0);
     --color-gray-400: oklch(71% 0 0);
     --color-gray-500: oklch(55% 0 0);
     --color-gray-600: oklch(45% 0 0);
     --color-gray-700: oklch(35% 0 0);
-    --color-gray-800: oklch(25% 0 0);
     --color-gray-900: oklch(15% 0 0);
     --color-gray-950: oklch(10% 0 0);
     --color-black: oklch(0% 0 0);
@@ -56,36 +53,24 @@
     --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
-    --text-5xl: 3rem;
-    --text-6xl: 3.75rem;
+    --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
-    --tracking-tighter: -0.05em;
     --tracking-tight: -0.025em;
-    --tracking-normal: 0em;
     --tracking-wide: 0.025em;
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
-    --leading-tight: 1.25;
     --leading-snug: 1.375;
-    --leading-normal: 1.5;
     --leading-relaxed: 1.625;
-    --leading-loose: 2;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.625rem;
-    --radius-2xl: 0.75rem;
-    --radius-3xl: 1rem;
     --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-    --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -110,62 +95,29 @@
     --color-accent-active: oklch(70% 0.1937 67);
     --color-accent-foreground: oklch(15% 0 0);
     --color-success: oklch(70% 0.2 145);
-    --color-success-hover: oklch(65% 0.22 145);
-    --color-success-active: oklch(50% 0.24 145);
     --color-success-foreground: oklch(100% 0 0);
     --color-error: oklch(63% 0.22 25);
-    --color-error-hover: oklch(56% 0.24 25);
-    --color-error-active: oklch(50% 0.26 25);
     --color-error-foreground: oklch(100% 0 0);
     --color-warning: oklch(75% 0.15 85);
-    --color-warning-hover: oklch(70% 0.17 85);
-    --color-warning-active: oklch(65% 0.19 85);
     --color-warning-foreground: oklch(15% 0 0);
     --color-info: oklch(60% 0.19 255);
-    --color-info-hover: oklch(55% 0.21 255);
-    --color-info-active: oklch(50% 0.23 255);
     --color-info-foreground: oklch(100% 0 0);
     --color-background: oklch(100% 0 0);
     --color-background-secondary: oklch(98% 0 0);
     --color-surface: oklch(96% 0 0);
     --color-card: oklch(100% 0 0);
+    --color-card-foreground: oklch(15% 0 0);
     --color-border: oklch(93% 0 0);
     --color-border-primary: oklch(85% 0 0);
-    --color-border-hover: oklch(80% 0 0);
-    --color-border-focus: var(--color-primary);
     --color-text-primary: oklch(15% 0 0);
     --color-text-secondary: oklch(45% 0 0);
     --color-text-muted: oklch(60% 0 0);
     --color-text-disabled: oklch(71% 0 0);
-    --color-focus: var(--color-primary);
-    --color-focus-ring: oklch(60.29% 0.15 239.2065 / 30%);
-    --color-disabled: oklch(87% 0 0);
-    --color-disabled-text: oklch(55% 0 0);
     --color-overlay: oklch(0% 0 0 / 50%);
     --size-xs: 1.75rem;
     --size-sm: 2rem;
     --size-md: 2.25rem;
     --size-lg: 2.75rem;
-    --space-0: 0px;
-    --space-1: 0.25rem;
-    --space-2: 0.5rem;
-    --space-3: 0.75rem;
-    --space-4: 1rem;
-    --space-5: 1.25rem;
-    --space-6: 1.5rem;
-    --space-8: 2rem;
-    --space-10: 2.5rem;
-    --space-12: 3rem;
-    --space-16: 4rem;
-    --space-20: 5rem;
-    --space-24: 6rem;
-    --duration-instant: 50ms;
-    --duration-fast: 150ms;
-    --duration-normal: 200ms;
-    --duration-slow: 300ms;
-    --duration-slower: 500ms;
-    --ease-linear: linear;
-    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
     --ripple-scale: 2.5;
     --ripple-opacity: 0.35;
     --button-height-xs: var(--size-xs);
@@ -184,12 +136,6 @@
     --input-padding-x-sm: 0.75rem;
     --input-padding-x-md: 0.875rem;
     --input-padding-x-lg: 1.125rem;
-    --color-input-border: oklch(87% 0 0);
-    --color-input-border-focus: oklch(55% 0.25 255);
-    --color-input-border-error: oklch(60% 0.25 25);
-    --color-input-bg: oklch(100% 0 0);
-    --color-input-text: oklch(15% 0 0);
-    --color-input-placeholder: oklch(60% 0 0);
     --overlay-stripe: oklch(100% 0 0 / 0.15);
     --textarea-min-height-xs: 4rem;
     --textarea-min-height-sm: 5rem;
@@ -239,24 +185,15 @@
     --switch-translate-sm: 1rem;
     --switch-translate-md: 1.25rem;
     --switch-translate-lg: 1.5rem;
-    --label-font-size-xs: 0.75rem;
-    --label-font-size-sm: 0.875rem;
-    --label-font-size-base: 1rem;
-    --label-font-size-lg: 1.125rem;
     --card-padding: 1.5rem;
     --card-header-gap: 0.375rem;
     --card-title-size: 1.5rem;
-    --card-title-weight: var(--font-weight-semibold);
-    --card-description-size: 0.875rem;
     --card-content-padding: 1.5rem;
     --card-footer-padding: 1.5rem;
     --modal-max-width-xs: 20rem;
     --modal-max-width-sm: 24rem;
     --modal-max-width-md: 28rem;
     --modal-max-width-lg: 32rem;
-    --modal-max-width-xl: 36rem;
-    --modal-max-width-2xl: 42rem;
-    --modal-max-width-full: 90vw;
     --modal-padding-xs: 1rem;
     --modal-padding-sm: 1rem;
     --modal-padding-md: 1.5rem;
@@ -277,7 +214,6 @@
     --badge-padding-y-sm: 0.075rem;
     --badge-padding-y-md: 0.125rem;
     --badge-padding-y-lg: 0.25rem;
-    --badge-radius: 0.25rem;
     --accordion-padding-x-xs: 0.75rem;
     --accordion-padding-x-sm: 1rem;
     --accordion-padding-x-md: 1.25rem;
@@ -287,46 +223,12 @@
     --accordion-padding-y-md: 0.75rem;
     --accordion-padding-y-lg: 1rem;
     --divider-gap: 1rem;
-    --divider-thickness: 1px;
     --divider-left-before-width: 5%;
     --divider-left-after-width: 95%;
     --divider-center-before-width: 50%;
     --divider-center-after-width: 50%;
     --divider-right-before-width: 95%;
     --divider-right-after-width: 5%;
-    --table-padding-x-xs: 0.5rem;
-    --table-padding-x-sm: 0.75rem;
-    --table-padding-x-md: 1rem;
-    --table-padding-x-lg: 1.25rem;
-    --table-padding-y-xs: 0.5rem;
-    --table-padding-y-sm: 0.625rem;
-    --table-padding-y-md: 0.75rem;
-    --table-padding-y-lg: 1rem;
-    --table-border-width: 1px;
-    --table-header-bg: var(--color-surface);
-    --table-row-hover-bg: var(--color-background-secondary);
-    --dropdown-padding-x: 0.5rem;
-    --dropdown-padding-y: 0.5rem;
-    --dropdown-item-padding-x: 0.75rem;
-    --dropdown-item-padding-y: 0.5rem;
-    --dropdown-max-height: 20rem;
-    --dropdown-min-width: 8rem;
-    --tooltip-padding-x: 0.75rem;
-    --tooltip-padding-y: 0.5rem;
-    --tooltip-max-width: 20rem;
-    --tooltip-font-size: 0.875rem;
-    --tooltip-arrow-size: 6px;
-    --drawer-width-sm: 20rem;
-    --drawer-width-md: 24rem;
-    --drawer-width-lg: 28rem;
-    --drawer-width-xl: 32rem;
-    --drawer-width-full: 100vw;
-    --drawer-padding: 1.5rem;
-    --popover-padding: 1rem;
-    --popover-max-width: 24rem;
-    --popover-min-width: 12rem;
-    --breadcrumb-gap: 0.5rem;
-    --breadcrumb-separator-gap: 0.5rem;
     --tabs-gap-xs: 0.25rem;
     --tabs-gap-sm: 0.375rem;
     --tabs-gap-md: 0.5rem;
@@ -339,9 +241,6 @@
     --tabs-padding-y-sm: 0.375rem;
     --tabs-padding-y-md: 0.5rem;
     --tabs-padding-y-lg: 0.625rem;
-    --stepper-icon-size: 2rem;
-    --stepper-line-thickness: 2px;
-    --stepper-gap: 1rem;
     --spacing-0: 0px;
     --spacing-1: 0.25rem;
     --spacing-2: 0.5rem;
@@ -356,13 +255,11 @@
     --radius-full: 9999px;
     --leading-none: 1;
     --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
-    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
     --z-dropdown: 1000;
-    --z-sticky: 1020;
     --z-modal: 1040;
     --z-popover: 1050;
     --z-tooltip: 1060;
+    --z-overlay: 1070;
   }
 }
 @layer base {
@@ -675,9 +572,24 @@
   .z-\[1\] {
     z-index: 1;
   }
+  .z-\[calc\(var\(--z-overlay\)\+1\)\] {
+    z-index: calc(var(--z-overlay) + 1);
+  }
+  .z-\[var\(--z-dropdown\)\] {
+    z-index: var(--z-dropdown);
+  }
+  .z-\[var\(--z-modal\)\] {
+    z-index: var(--z-modal);
+  }
+  .z-\[var\(--z-overlay\)\] {
+    z-index: var(--z-overlay);
+  }
   .z-\[var\(--z-popover\)\] {
     z-index: var(--z-popover);
   }
+  .z-\[var\(--z-tooltip\)\] {
+    z-index: var(--z-tooltip);
+  }
   .order-1 {
     order: 1;
   }
@@ -711,6 +623,9 @@
       max-width: 96rem;
     }
   }
+  .m-3 {
+    margin: var(--spacing-3);
+  }
   .-mx-0 {
     margin-inline: calc(var(--spacing-0) * -1);
   }
@@ -762,9 +677,6 @@
   .mt-6 {
     margin-top: var(--spacing-6);
   }
-  .mt-8 {
-    margin-top: var(--spacing-8);
-  }
   .mt-auto {
     margin-top: auto;
   }
@@ -804,6 +716,12 @@
   .mb-6 {
     margin-bottom: var(--spacing-6);
   }
+  .mb-8 {
+    margin-bottom: var(--spacing-8);
+  }
+  .mb-10 {
+    margin-bottom: var(--spacing-10);
+  }
   .ml-0 {
     margin-left: var(--spacing-0);
   }
@@ -825,6 +743,9 @@
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -1082,12 +1003,21 @@
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
+  .h-28 {
+    height: calc(var(--spacing) * 28);
+  }
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
+  .h-36 {
+    height: calc(var(--spacing) * 36);
+  }
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
+  .h-44 {
+    height: calc(var(--spacing) * 44);
+  }
   .h-48 {
     height: calc(var(--spacing) * 48);
   }
@@ -1097,6 +1027,9 @@
   .h-96 {
     height: calc(var(--spacing) * 96);
   }
+  .h-\[18px\] {
+    height: 18px;
+  }
   .h-\[96vh\] {
     height: 96vh;
   }
@@ -1115,6 +1048,15 @@
   .h-\[300px\] {
     height: 300px;
   }
+  .h-\[480px\] {
+    height: 480px;
+  }
+  .h-\[500px\] {
+    height: 500px;
+  }
+  .h-\[520px\] {
+    height: 520px;
+  }
   .h-auto {
     height: auto;
   }
@@ -1130,6 +1072,9 @@
   .h-screen {
     height: 100vh;
   }
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -1151,6 +1096,21 @@
   .max-h-\[500px\] {
     max-height: 500px;
   }
+  .min-h-\(--input-height-lg\) {
+    min-height: var(--input-height-lg);
+  }
+  .min-h-\(--input-height-md\) {
+    min-height: var(--input-height-md);
+  }
+  .min-h-\(--input-height-sm\) {
+    min-height: var(--input-height-sm);
+  }
+  .min-h-\(--input-height-xs\) {
+    min-height: var(--input-height-xs);
+  }
+  .min-h-\(--select-height-xs\) {
+    min-height: var(--select-height-xs);
+  }
   .min-h-\(--textarea-min-height-lg\) {
     min-height: var(--textarea-min-height-lg);
   }
@@ -1304,6 +1264,9 @@
   .w-\(--switch-width-xs\) {
     width: var(--switch-width-xs);
   }
+  .w-0 {
+    width: var(--spacing-0);
+  }
   .w-0\.5 {
     width: calc(var(--spacing) * 0.5);
   }
@@ -1370,6 +1333,9 @@
   .w-12 {
     width: var(--spacing-12);
   }
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
@@ -1388,9 +1354,15 @@
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
+  .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
+  .w-52 {
+    width: calc(var(--spacing) * 52);
+  }
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
@@ -1490,8 +1462,17 @@
   .max-w-\[150px\] {
     max-width: 150px;
   }
-  .max-w-\[200px\] {
-    max-width: 200px;
+  .max-w-\[260px\] {
+    max-width: 260px;
+  }
+  .max-w-\[300px\] {
+    max-width: 300px;
+  }
+  .max-w-\[340px\] {
+    max-width: 340px;
+  }
+  .max-w-\[400px\] {
+    max-width: 400px;
   }
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
@@ -1535,6 +1516,9 @@
   .min-w-12 {
     min-width: var(--spacing-12);
   }
+  .min-w-\[18px\] {
+    min-width: 18px;
+  }
   .min-w-\[60px\] {
     min-width: 60px;
   }
@@ -1646,6 +1630,9 @@
   .-rotate-90 {
     rotate: calc(90deg * -1);
   }
+  .rotate-45 {
+    rotate: 45deg;
+  }
   .rotate-90 {
     rotate: 90deg;
   }
@@ -1655,9 +1642,6 @@
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
-  .animate-\[button-ripple_600ms_ease-out_forwards\] {
-    animation: button-ripple 600ms ease-out forwards;
-  }
   .animate-\[ripple_600ms_ease-out_forwards\] {
     animation: ripple 600ms ease-out forwards;
   }
@@ -1673,6 +1657,9 @@
   .animate-spin {
     animation: var(--animate-spin);
   }
+  .cursor-crosshair {
+    cursor: crosshair;
+  }
   .cursor-default {
     cursor: default;
   }
@@ -1706,6 +1693,9 @@
   .resize-y {
     resize: vertical;
   }
+  .scroll-mt-4 {
+    scroll-margin-top: var(--spacing-4);
+  }
   .scroll-py-1 {
     scroll-padding-block: var(--spacing-1);
   }
@@ -1736,12 +1726,6 @@
   .grid-cols-\[1fr_auto_1fr\] {
     grid-template-columns: 1fr auto 1fr;
   }
-  .grid-rows-\[0fr\] {
-    grid-template-rows: 0fr;
-  }
-  .grid-rows-\[1fr\] {
-    grid-template-rows: 1fr;
-  }
   .flex-col {
     flex-direction: column;
   }
@@ -1844,63 +1828,69 @@
   .gap-8 {
     gap: var(--spacing-8);
   }
+  .gap-10 {
+    gap: var(--spacing-10);
+  }
   .gap-12 {
     gap: var(--spacing-12);
   }
+  .gap-16 {
+    gap: calc(var(--spacing) * 16);
+  }
   .space-y-0 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--space-0) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--space-0) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--spacing-0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-0) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--space-1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--space-1) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--spacing-1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--space-2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--space-2) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--spacing-2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-3 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--space-3) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--space-3) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--spacing-3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-3) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--space-4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--space-4) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--spacing-4) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-6 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--space-6) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--space-6) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--spacing-6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-8 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--space-8) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--space-8) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--spacing-8) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .space-y-12 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(var(--space-12) * var(--tw-space-y-reverse));
-      margin-block-end: calc(var(--space-12) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(var(--spacing-12) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-12) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .gap-x-8 {
@@ -1909,8 +1899,8 @@
   .-space-x-1 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--space-1) * -1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--space-1) * -1) * calc(1 - var(--tw-space-x-reverse)));
+      margin-inline-start: calc(calc(var(--spacing-1) * -1) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing-1) * -1) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
   .-space-x-1\.5 {
@@ -1923,8 +1913,8 @@
   .-space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--space-2) * -1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--space-2) * -1) * calc(1 - var(--tw-space-x-reverse)));
+      margin-inline-start: calc(calc(var(--spacing-2) * -1) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing-2) * -1) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
   .-space-x-2\.5 {
@@ -1958,14 +1948,6 @@
       border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
     }
   }
-  .divide-accent\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(80% 0.1737 67) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
-      }
-    }
-  }
   .divide-border {
     :where(& > :not(:last-child)) {
       border-color: var(--color-border);
@@ -1987,54 +1969,6 @@
       }
     }
   }
-  .divide-error\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-error) 20%, transparent);
-      }
-    }
-  }
-  .divide-info\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(60% 0.19 255) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-info) 20%, transparent);
-      }
-    }
-  }
-  .divide-primary\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-      }
-    }
-  }
-  .divide-secondary\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(50% 0.05 240) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
-      }
-    }
-  }
-  .divide-success\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-success) 20%, transparent);
-      }
-    }
-  }
-  .divide-warning\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(75% 0.15 85) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
-      }
-    }
-  }
   .self-center {
     align-self: center;
   }
@@ -2145,10 +2079,6 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
   }
-  .border-l-6 {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 6px;
-  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -2165,54 +2095,12 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .\!border-error {
-    border-color: var(--color-error) !important;
-  }
-  .\!border-info {
-    border-color: var(--color-info) !important;
-  }
-  .\!border-success {
-    border-color: var(--color-success) !important;
-  }
-  .\!border-warning {
-    border-color: var(--color-warning) !important;
-  }
   .border-accent {
     border-color: var(--color-accent);
   }
-  .border-accent\/20 {
-    border-color: color-mix(in srgb, oklch(80% 0.1737 67) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
-    }
-  }
-  .border-accent\/30 {
-    border-color: color-mix(in srgb, oklch(80% 0.1737 67) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
-    }
-  }
-  .border-accent\/50 {
-    border-color: color-mix(in srgb, oklch(80% 0.1737 67) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
-    }
-  }
-  .border-accent\/60 {
-    border-color: color-mix(in srgb, oklch(80% 0.1737 67) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-accent) 60%, transparent);
-    }
-  }
   .border-border {
     border-color: var(--color-border);
   }
-  .border-border\/30 {
-    border-color: color-mix(in srgb, oklch(93% 0 0) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-border) 30%, transparent);
-    }
-  }
   .border-border\/50 {
     border-color: color-mix(in srgb, oklch(93% 0 0) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2225,12 +2113,6 @@
   .border-error {
     border-color: var(--color-error);
   }
-  .border-error\/20 {
-    border-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-error) 20%, transparent);
-    }
-  }
   .border-error\/30 {
     border-color: color-mix(in srgb, oklch(63% 0.22 25) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2243,39 +2125,15 @@
       border-color: color-mix(in oklab, var(--color-error) 50%, transparent);
     }
   }
-  .border-error\/60 {
-    border-color: color-mix(in srgb, oklch(63% 0.22 25) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-error) 60%, transparent);
-    }
-  }
   .border-info {
     border-color: var(--color-info);
   }
-  .border-info\/20 {
-    border-color: color-mix(in srgb, oklch(60% 0.19 255) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-info) 20%, transparent);
-    }
-  }
   .border-info\/30 {
     border-color: color-mix(in srgb, oklch(60% 0.19 255) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-info) 30%, transparent);
     }
   }
-  .border-info\/50 {
-    border-color: color-mix(in srgb, oklch(60% 0.19 255) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-info) 50%, transparent);
-    }
-  }
-  .border-info\/60 {
-    border-color: color-mix(in srgb, oklch(60% 0.19 255) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-info) 60%, transparent);
-    }
-  }
   .border-primary {
     border-color: var(--color-primary);
   }
@@ -2285,87 +2143,33 @@
       border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
     }
   }
-  .border-primary\/30 {
-    border-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
-    }
-  }
-  .border-primary\/50 {
-    border-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
-    }
-  }
-  .border-primary\/60 {
-    border-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
-  }
   .border-secondary {
     border-color: var(--color-secondary);
   }
-  .border-secondary\/20 {
-    border-color: color-mix(in srgb, oklch(50% 0.05 240) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
-    }
+  .border-slot {
+    border-color: var(--_c-border);
   }
-  .border-secondary\/30 {
-    border-color: color-mix(in srgb, oklch(50% 0.05 240) 30%, transparent);
+  .border-slot-20 {
+    border-color: var(--_c-border);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
+      border-color: color-mix(in oklch, var(--_c-border) 20%, transparent);
     }
   }
-  .border-secondary\/50 {
-    border-color: color-mix(in srgb, oklch(50% 0.05 240) 50%, transparent);
+  .border-slot-30 {
+    border-color: var(--_c-border);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-secondary) 50%, transparent);
+      border-color: color-mix(in oklch, var(--_c-border) 30%, transparent);
     }
   }
-  .border-secondary\/60 {
-    border-color: color-mix(in srgb, oklch(50% 0.05 240) 60%, transparent);
+  .border-slot-50 {
+    border-color: var(--_c-border);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
+      border-color: color-mix(in oklch, var(--_c-border) 50%, transparent);
     }
   }
   .border-success {
     border-color: var(--color-success);
   }
-  .border-success\/20 {
-    border-color: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-success) 20%, transparent);
-    }
-  }
-  .border-success\/30 {
-    border-color: color-mix(in srgb, oklch(70% 0.2 145) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-success) 30%, transparent);
-    }
-  }
-  .border-success\/50 {
-    border-color: color-mix(in srgb, oklch(70% 0.2 145) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-success) 50%, transparent);
-    }
-  }
-  .border-success\/60 {
-    border-color: color-mix(in srgb, oklch(70% 0.2 145) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-success) 60%, transparent);
-    }
-  }
-  .border-surface {
-    border-color: var(--color-surface);
-  }
-  .border-text-primary {
-    border-color: var(--color-text-primary);
-  }
-  .border-text-secondary {
-    border-color: var(--color-text-secondary);
-  }
   .border-transparent {
     border-color: transparent;
   }
@@ -2378,50 +2182,14 @@
       border-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
     }
   }
-  .border-warning\/30 {
-    border-color: color-mix(in srgb, oklch(75% 0.15 85) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
-    }
-  }
-  .border-warning\/50 {
-    border-color: color-mix(in srgb, oklch(75% 0.15 85) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-warning) 50%, transparent);
-    }
-  }
-  .border-warning\/60 {
-    border-color: color-mix(in srgb, oklch(75% 0.15 85) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-warning) 60%, transparent);
-    }
+  .border-white {
+    border-color: var(--color-white);
   }
   .border-t-transparent {
     border-top-color: transparent;
   }
-  .border-l-accent {
-    border-left-color: var(--color-accent);
-  }
-  .border-l-border {
-    border-left-color: var(--color-border);
-  }
-  .border-l-error {
-    border-left-color: var(--color-error);
-  }
-  .border-l-info {
-    border-left-color: var(--color-info);
-  }
-  .border-l-primary {
-    border-left-color: var(--color-primary);
-  }
-  .border-l-secondary {
-    border-left-color: var(--color-secondary);
-  }
-  .border-l-success {
-    border-left-color: var(--color-success);
-  }
-  .border-l-warning {
-    border-left-color: var(--color-warning);
+  .border-l-slot {
+    border-left-color: var(--_c-border);
   }
   .bg-accent {
     background-color: var(--color-accent);
@@ -2432,76 +2200,28 @@
   .bg-accent-hover {
     background-color: var(--color-accent-hover);
   }
-  .bg-accent\/5 {
-    background-color: color-mix(in srgb, oklch(80% 0.1737 67) 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 5%, transparent);
-    }
-  }
   .bg-accent\/10 {
     background-color: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
     }
   }
-  .bg-accent\/20 {
-    background-color: color-mix(in srgb, oklch(80% 0.1737 67) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
-    }
-  }
-  .bg-accent\/30 {
-    background-color: color-mix(in srgb, oklch(80% 0.1737 67) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
-    }
-  }
-  .bg-accent\/50 {
-    background-color: color-mix(in srgb, oklch(80% 0.1737 67) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
-    }
-  }
-  .bg-accent\/60 {
-    background-color: color-mix(in srgb, oklch(80% 0.1737 67) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 60%, transparent);
-    }
-  }
   .bg-background {
     background-color: var(--color-background);
   }
   .bg-background-secondary {
     background-color: var(--color-background-secondary);
   }
-  .bg-black\/10 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
-    }
-  }
-  .bg-black\/20 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
-    }
-  }
-  .bg-black\/30 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
-    }
-  }
-  .bg-black\/40 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 40%, transparent);
+  .bg-background\/80 {
+    background-color: color-mix(in srgb, oklch(100% 0 0) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
+      background-color: color-mix(in oklab, var(--color-background) 80%, transparent);
     }
   }
-  .bg-black\/50 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 50%, transparent);
+  .bg-background\/90 {
+    background-color: color-mix(in srgb, oklch(100% 0 0) 90%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-background) 90%, transparent);
     }
   }
   .bg-blue-600 {
@@ -2513,12 +2233,6 @@
   .bg-border-primary {
     background-color: var(--color-border-primary);
   }
-  .bg-border\/20 {
-    background-color: color-mix(in srgb, oklch(93% 0 0) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-border) 20%, transparent);
-    }
-  }
   .bg-border\/50 {
     background-color: color-mix(in srgb, oklch(93% 0 0) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2558,18 +2272,6 @@
       background-color: color-mix(in oklab, var(--color-error) 30%, transparent);
     }
   }
-  .bg-error\/50 {
-    background-color: color-mix(in srgb, oklch(63% 0.22 25) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-error) 50%, transparent);
-    }
-  }
-  .bg-error\/60 {
-    background-color: color-mix(in srgb, oklch(63% 0.22 25) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-error) 60%, transparent);
-    }
-  }
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
@@ -2585,12 +2287,6 @@
   .bg-info {
     background-color: var(--color-info);
   }
-  .bg-info\/5 {
-    background-color: color-mix(in srgb, oklch(60% 0.19 255) 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-info) 5%, transparent);
-    }
-  }
   .bg-info\/10 {
     background-color: color-mix(in srgb, oklch(60% 0.19 255) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2603,26 +2299,38 @@
       background-color: color-mix(in oklab, var(--color-info) 20%, transparent);
     }
   }
-  .bg-info\/30 {
-    background-color: color-mix(in srgb, oklch(60% 0.19 255) 30%, transparent);
+  .bg-overlay {
+    background-color: var(--color-overlay);
+  }
+  .bg-overlay\/20 {
+    background-color: color-mix(in srgb, oklch(0% 0 0 / 50%) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-info) 30%, transparent);
+      background-color: color-mix(in oklab, var(--color-overlay) 20%, transparent);
     }
   }
-  .bg-info\/50 {
-    background-color: color-mix(in srgb, oklch(60% 0.19 255) 50%, transparent);
+  .bg-overlay\/30 {
+    background-color: color-mix(in srgb, oklch(0% 0 0 / 50%) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-info) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-overlay) 30%, transparent);
     }
   }
-  .bg-info\/60 {
-    background-color: color-mix(in srgb, oklch(60% 0.19 255) 60%, transparent);
+  .bg-overlay\/40 {
+    background-color: color-mix(in srgb, oklch(0% 0 0 / 50%) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-info) 60%, transparent);
+      background-color: color-mix(in oklab, var(--color-overlay) 40%, transparent);
     }
   }
-  .bg-overlay {
-    background-color: var(--color-overlay);
+  .bg-overlay\/50 {
+    background-color: color-mix(in srgb, oklch(0% 0 0 / 50%) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-overlay) 50%, transparent);
+    }
+  }
+  .bg-overlay\/80 {
+    background-color: color-mix(in srgb, oklch(0% 0 0 / 50%) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-overlay) 80%, transparent);
+    }
   }
   .bg-primary {
     background-color: var(--color-primary);
@@ -2657,24 +2365,6 @@
       background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
     }
   }
-  .bg-primary\/30 {
-    background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
-    }
-  }
-  .bg-primary\/50 {
-    background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
-    }
-  }
-  .bg-primary\/60 {
-    background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
-  }
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
@@ -2687,40 +2377,25 @@
   .bg-secondary-hover {
     background-color: var(--color-secondary-hover);
   }
-  .bg-secondary\/5 {
-    background-color: color-mix(in srgb, oklch(50% 0.05 240) 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary) 5%, transparent);
-    }
-  }
-  .bg-secondary\/10 {
-    background-color: color-mix(in srgb, oklch(50% 0.05 240) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
-    }
-  }
-  .bg-secondary\/20 {
-    background-color: color-mix(in srgb, oklch(50% 0.05 240) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
-    }
+  .bg-slot {
+    background-color: var(--_c-bg);
   }
-  .bg-secondary\/30 {
-    background-color: color-mix(in srgb, oklch(50% 0.05 240) 30%, transparent);
+  .bg-slot-10 {
+    background-color: var(--_c);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
+      background-color: color-mix(in oklch, var(--_c) 10%, transparent);
     }
   }
-  .bg-secondary\/50 {
-    background-color: color-mix(in srgb, oklch(50% 0.05 240) 50%, transparent);
+  .bg-slot-20 {
+    background-color: var(--_c);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary) 50%, transparent);
+      background-color: color-mix(in oklch, var(--_c) 20%, transparent);
     }
   }
-  .bg-secondary\/60 {
-    background-color: color-mix(in srgb, oklch(50% 0.05 240) 60%, transparent);
+  .bg-slot-50 {
+    background-color: var(--_c);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
+      background-color: color-mix(in oklch, var(--_c) 50%, transparent);
     }
   }
   .bg-success {
@@ -2738,30 +2413,6 @@
       background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
     }
   }
-  .bg-success\/20 {
-    background-color: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-success) 20%, transparent);
-    }
-  }
-  .bg-success\/30 {
-    background-color: color-mix(in srgb, oklch(70% 0.2 145) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-success) 30%, transparent);
-    }
-  }
-  .bg-success\/50 {
-    background-color: color-mix(in srgb, oklch(70% 0.2 145) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-success) 50%, transparent);
-    }
-  }
-  .bg-success\/60 {
-    background-color: color-mix(in srgb, oklch(70% 0.2 145) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-success) 60%, transparent);
-    }
-  }
   .bg-surface {
     background-color: var(--color-surface);
   }
@@ -2792,9 +2443,6 @@
   .bg-text-primary {
     background-color: var(--color-text-primary);
   }
-  .bg-text-secondary {
-    background-color: var(--color-text-secondary);
-  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -2819,24 +2467,6 @@
       background-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
     }
   }
-  .bg-warning\/30 {
-    background-color: color-mix(in srgb, oklch(75% 0.15 85) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
-    }
-  }
-  .bg-warning\/50 {
-    background-color: color-mix(in srgb, oklch(75% 0.15 85) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-warning) 50%, transparent);
-    }
-  }
-  .bg-warning\/60 {
-    background-color: color-mix(in srgb, oklch(75% 0.15 85) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-warning) 60%, transparent);
-    }
-  }
   .bg-white\/80 {
     background-color: color-mix(in srgb, oklch(100% 0 0) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2929,24 +2559,6 @@
   .stroke-accent {
     stroke: var(--color-accent);
   }
-  .stroke-accent\/10 {
-    stroke: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-accent) 10%, transparent);
-    }
-  }
-  .stroke-accent\/20 {
-    stroke: color-mix(in srgb, oklch(80% 0.1737 67) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-accent) 20%, transparent);
-    }
-  }
-  .stroke-accent\/60 {
-    stroke: color-mix(in srgb, oklch(80% 0.1737 67) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-accent) 60%, transparent);
-    }
-  }
   .stroke-border {
     stroke: var(--color-border);
   }
@@ -2959,144 +2571,33 @@
   .stroke-error {
     stroke: var(--color-error);
   }
-  .stroke-error\/10 {
-    stroke: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-error) 10%, transparent);
-    }
-  }
-  .stroke-error\/20 {
-    stroke: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-error) 20%, transparent);
-    }
-  }
-  .stroke-error\/60 {
-    stroke: color-mix(in srgb, oklch(63% 0.22 25) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-error) 60%, transparent);
-    }
-  }
   .stroke-info {
     stroke: var(--color-info);
   }
-  .stroke-info\/10 {
-    stroke: color-mix(in srgb, oklch(60% 0.19 255) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-info) 10%, transparent);
-    }
-  }
-  .stroke-info\/20 {
-    stroke: color-mix(in srgb, oklch(60% 0.19 255) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-info) 20%, transparent);
-    }
-  }
-  .stroke-info\/60 {
-    stroke: color-mix(in srgb, oklch(60% 0.19 255) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-info) 60%, transparent);
-    }
-  }
   .stroke-primary {
     stroke: var(--color-primary);
   }
-  .stroke-primary\/10 {
-    stroke: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-primary) 10%, transparent);
-    }
-  }
-  .stroke-primary\/20 {
-    stroke: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-primary) 20%, transparent);
-    }
-  }
-  .stroke-primary\/60 {
-    stroke: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
-  }
   .stroke-secondary {
     stroke: var(--color-secondary);
   }
-  .stroke-secondary\/10 {
-    stroke: color-mix(in srgb, oklch(50% 0.05 240) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-secondary) 10%, transparent);
-    }
+  .stroke-slot {
+    stroke: var(--_c);
   }
-  .stroke-secondary\/20 {
-    stroke: color-mix(in srgb, oklch(50% 0.05 240) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-secondary) 20%, transparent);
-    }
+  .stroke-slot-10 {
+    stroke: oklch(from var(--_c) l c h / 10%);
   }
-  .stroke-secondary\/60 {
-    stroke: color-mix(in srgb, oklch(50% 0.05 240) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-secondary) 60%, transparent);
-    }
+  .stroke-slot-20 {
+    stroke: oklch(from var(--_c) l c h / 20%);
+  }
+  .stroke-slot-50 {
+    stroke: oklch(from var(--_c) l c h / 50%);
   }
   .stroke-success {
     stroke: var(--color-success);
   }
-  .stroke-success\/10 {
-    stroke: color-mix(in srgb, oklch(70% 0.2 145) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-success) 10%, transparent);
-    }
-  }
-  .stroke-success\/20 {
-    stroke: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-success) 20%, transparent);
-    }
-  }
-  .stroke-success\/60 {
-    stroke: color-mix(in srgb, oklch(70% 0.2 145) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-success) 60%, transparent);
-    }
-  }
-  .stroke-surface {
-    stroke: var(--color-surface);
-  }
-  .stroke-surface\/50 {
-    stroke: color-mix(in srgb, oklch(96% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-surface) 50%, transparent);
-    }
-  }
-  .stroke-surface\/80 {
-    stroke: color-mix(in srgb, oklch(96% 0 0) 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-surface) 80%, transparent);
-    }
-  }
   .stroke-warning {
     stroke: var(--color-warning);
   }
-  .stroke-warning\/10 {
-    stroke: color-mix(in srgb, oklch(75% 0.15 85) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-warning) 10%, transparent);
-    }
-  }
-  .stroke-warning\/20 {
-    stroke: color-mix(in srgb, oklch(75% 0.15 85) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-warning) 20%, transparent);
-    }
-  }
-  .stroke-warning\/60 {
-    stroke: color-mix(in srgb, oklch(75% 0.15 85) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-warning) 60%, transparent);
-    }
-  }
   .object-contain {
     object-fit: contain;
   }
@@ -3166,6 +2667,9 @@
   .p-3 {
     padding: var(--spacing-3);
   }
+  .p-3\.5 {
+    padding: calc(var(--spacing) * 3.5);
+  }
   .p-4 {
     padding: var(--spacing-4);
   }
@@ -3178,6 +2682,9 @@
   .p-8 {
     padding: var(--spacing-8);
   }
+  .p-12 {
+    padding: var(--spacing-12);
+  }
   .px-\(--accordion-padding-x-lg\) {
     padding-inline: var(--accordion-padding-x-lg);
   }
@@ -3373,6 +2880,9 @@
   .pt-0 {
     padding-top: var(--spacing-0);
   }
+  .pt-1 {
+    padding-top: var(--spacing-1);
+  }
   .pt-2 {
     padding-top: var(--spacing-2);
   }
@@ -3391,6 +2901,9 @@
   .pt-6 {
     padding-top: var(--spacing-6);
   }
+  .pt-14 {
+    padding-top: calc(var(--spacing) * 14);
+  }
   .pr-3 {
     padding-right: var(--spacing-3);
   }
@@ -3451,6 +2964,12 @@
   .pl-4 {
     padding-left: var(--spacing-4);
   }
+  .pl-5 {
+    padding-left: var(--spacing-5);
+  }
+  .pl-6 {
+    padding-left: var(--spacing-6);
+  }
   .pl-8 {
     padding-left: var(--spacing-8);
   }
@@ -3460,6 +2979,9 @@
   .pl-11 {
     padding-left: calc(var(--spacing) * 11);
   }
+  .pl-14 {
+    padding-left: calc(var(--spacing) * 14);
+  }
   .text-center {
     text-align: center;
   }
@@ -3537,6 +3059,9 @@
   .text-\[10px\] {
     font-size: 10px;
   }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .leading-none {
     --tw-leading: var(--leading-none);
     line-height: var(--leading-none);
@@ -3557,6 +3082,10 @@
     --tw-font-weight: var(--font-weight-extrabold);
     font-weight: var(--font-weight-extrabold);
   }
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -3591,18 +3120,12 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
   .text-accent {
     color: var(--color-accent);
   }
-  .text-accent-foreground {
-    color: var(--color-accent-foreground);
-  }
-  .text-accent-foreground\/50 {
-    color: color-mix(in srgb, oklch(15% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-accent-foreground) 50%, transparent);
-    }
-  }
   .text-background {
     color: var(--color-background);
   }
@@ -3615,6 +3138,9 @@
   .text-blue-700 {
     color: var(--color-blue-700);
   }
+  .text-card-foreground {
+    color: var(--color-card-foreground);
+  }
   .text-cyan-500 {
     color: var(--color-cyan-500);
   }
@@ -3624,12 +3150,6 @@
   .text-error-foreground {
     color: var(--color-error-foreground);
   }
-  .text-error-foreground\/50 {
-    color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-error-foreground) 50%, transparent);
-    }
-  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -3648,15 +3168,6 @@
   .text-info {
     color: var(--color-info);
   }
-  .text-info-foreground {
-    color: var(--color-info-foreground);
-  }
-  .text-info-foreground\/50 {
-    color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-info-foreground) 50%, transparent);
-    }
-  }
   .text-inherit {
     color: inherit;
   }
@@ -3672,12 +3183,6 @@
   .text-primary-foreground {
     color: var(--color-primary-foreground);
   }
-  .text-primary-foreground\/50 {
-    color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-primary-foreground) 50%, transparent);
-    }
-  }
   .text-purple-500 {
     color: var(--color-purple-500);
   }
@@ -3690,14 +3195,11 @@
   .text-secondary {
     color: var(--color-secondary);
   }
-  .text-secondary-foreground {
-    color: var(--color-secondary-foreground);
+  .text-slot {
+    color: var(--_c);
   }
-  .text-secondary-foreground\/50 {
-    color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-secondary-foreground) 50%, transparent);
-    }
+  .text-slot-fg {
+    color: var(--_c-fg);
   }
   .text-success {
     color: var(--color-success);
@@ -3705,12 +3207,6 @@
   .text-success-foreground {
     color: var(--color-success-foreground);
   }
-  .text-success-foreground\/50 {
-    color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-success-foreground) 50%, transparent);
-    }
-  }
   .text-text-disabled {
     color: var(--color-text-disabled);
   }
@@ -3723,18 +3219,30 @@
   .text-text-secondary {
     color: var(--color-text-secondary);
   }
+  .text-text-secondary\/40 {
+    color: color-mix(in srgb, oklch(45% 0 0) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-text-secondary) 40%, transparent);
+    }
+  }
+  .text-text-secondary\/50 {
+    color: color-mix(in srgb, oklch(45% 0 0) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-text-secondary) 50%, transparent);
+    }
+  }
+  .text-text-secondary\/60 {
+    color: color-mix(in srgb, oklch(45% 0 0) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-text-secondary) 60%, transparent);
+    }
+  }
   .text-warning {
     color: var(--color-warning);
   }
   .text-warning-foreground {
     color: var(--color-warning-foreground);
   }
-  .text-warning-foreground\/50 {
-    color: color-mix(in srgb, oklch(15% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-warning-foreground) 50%, transparent);
-    }
-  }
   .text-white {
     color: var(--color-white);
   }
@@ -3759,6 +3267,10 @@
   .italic {
     font-style: italic;
   }
+  .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
   .line-through {
     text-decoration-line: line-through;
   }
@@ -3777,6 +3289,9 @@
   .opacity-25 {
     opacity: 25%;
   }
+  .opacity-30 {
+    opacity: 30%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -3815,58 +3330,22 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ring-1 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .ring-2 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ring-accent\/20 {
-    --tw-ring-color: color-mix(in srgb, oklch(80% 0.1737 67) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
-    }
-  }
   .ring-background {
     --tw-ring-color: var(--color-background);
   }
-  .ring-error\/20 {
-    --tw-ring-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-error) 20%, transparent);
-    }
-  }
-  .ring-info\/20 {
-    --tw-ring-color: color-mix(in srgb, oklch(60% 0.19 255) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-info) 20%, transparent);
-    }
-  }
-  .ring-primary\/20 {
-    --tw-ring-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-    }
-  }
-  .ring-secondary\/20 {
-    --tw-ring-color: color-mix(in srgb, oklch(50% 0.05 240) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
-    }
+  .ring-primary {
+    --tw-ring-color: var(--color-primary);
   }
-  .ring-success\/20 {
-    --tw-ring-color: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-success) 20%, transparent);
-    }
+  .ring-offset-1 {
+    --tw-ring-offset-width: 1px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
-  .ring-warning\/20 {
-    --tw-ring-color: color-mix(in srgb, oklch(75% 0.15 85) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
-    }
+  .ring-offset-background {
+    --tw-ring-offset-color: var(--color-background);
   }
   .outline-hidden {
     --tw-outline-style: none;
@@ -3891,11 +3370,6 @@
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
-  .backdrop-blur-\[5px\] {
-    --tw-backdrop-blur: blur(5px);
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .backdrop-blur-sm {
     --tw-backdrop-blur: blur(var(--blur-sm));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
@@ -3930,11 +3404,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[grid-template-rows\] {
-    transition-property: grid-template-rows;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-\[left\] {
     transition-property: left;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3955,6 +3424,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[stroke-dashoffset\] {
+    transition-property: stroke-dashoffset;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[top\,font-size\,color\] {
     transition-property: top,font-size,color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3965,13 +3439,13 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[var\(--transition-normal\)\] {
-    transition-property: var(--transition-normal);
+  .transition-\[width\,height\] {
+    transition-property: width,height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[width\,height\] {
-    transition-property: width,height;
+  .transition-all {
+    transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -4023,9 +3497,6 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
-  .will-change-\[backdrop-filter\] {
-    will-change: backdrop-filter;
-  }
   .will-change-\[transform\,_opacity\] {
     will-change: transform, opacity;
   }
@@ -4057,6 +3528,102 @@
     --tw-enter-scale: calc(95*1%);
     --tw-enter-scale: .95;
   }
+  .\[--_c-bg\:var\(--color-accent\)\] {
+    --_c-bg: var(--color-accent);
+  }
+  .\[--_c-bg\:var\(--color-error\)\] {
+    --_c-bg: var(--color-error);
+  }
+  .\[--_c-bg\:var\(--color-info\)\] {
+    --_c-bg: var(--color-info);
+  }
+  .\[--_c-bg\:var\(--color-primary\)\] {
+    --_c-bg: var(--color-primary);
+  }
+  .\[--_c-bg\:var\(--color-secondary\)\] {
+    --_c-bg: var(--color-secondary);
+  }
+  .\[--_c-bg\:var\(--color-success\)\] {
+    --_c-bg: var(--color-success);
+  }
+  .\[--_c-bg\:var\(--color-surface\)\] {
+    --_c-bg: var(--color-surface);
+  }
+  .\[--_c-bg\:var\(--color-warning\)\] {
+    --_c-bg: var(--color-warning);
+  }
+  .\[--_c-border\:var\(--color-accent\)\] {
+    --_c-border: var(--color-accent);
+  }
+  .\[--_c-border\:var\(--color-border\)\] {
+    --_c-border: var(--color-border);
+  }
+  .\[--_c-border\:var\(--color-error\)\] {
+    --_c-border: var(--color-error);
+  }
+  .\[--_c-border\:var\(--color-info\)\] {
+    --_c-border: var(--color-info);
+  }
+  .\[--_c-border\:var\(--color-primary\)\] {
+    --_c-border: var(--color-primary);
+  }
+  .\[--_c-border\:var\(--color-secondary\)\] {
+    --_c-border: var(--color-secondary);
+  }
+  .\[--_c-border\:var\(--color-success\)\] {
+    --_c-border: var(--color-success);
+  }
+  .\[--_c-border\:var\(--color-warning\)\] {
+    --_c-border: var(--color-warning);
+  }
+  .\[--_c-fg\:var\(--color-accent-foreground\)\] {
+    --_c-fg: var(--color-accent-foreground);
+  }
+  .\[--_c-fg\:var\(--color-error-foreground\)\] {
+    --_c-fg: var(--color-error-foreground);
+  }
+  .\[--_c-fg\:var\(--color-info-foreground\)\] {
+    --_c-fg: var(--color-info-foreground);
+  }
+  .\[--_c-fg\:var\(--color-primary-foreground\)\] {
+    --_c-fg: var(--color-primary-foreground);
+  }
+  .\[--_c-fg\:var\(--color-secondary-foreground\)\] {
+    --_c-fg: var(--color-secondary-foreground);
+  }
+  .\[--_c-fg\:var\(--color-success-foreground\)\] {
+    --_c-fg: var(--color-success-foreground);
+  }
+  .\[--_c-fg\:var\(--color-text-primary\)\] {
+    --_c-fg: var(--color-text-primary);
+  }
+  .\[--_c-fg\:var\(--color-warning-foreground\)\] {
+    --_c-fg: var(--color-warning-foreground);
+  }
+  .\[--_c\:var\(--color-accent\)\] {
+    --_c: var(--color-accent);
+  }
+  .\[--_c\:var\(--color-error\)\] {
+    --_c: var(--color-error);
+  }
+  .\[--_c\:var\(--color-info\)\] {
+    --_c: var(--color-info);
+  }
+  .\[--_c\:var\(--color-primary\)\] {
+    --_c: var(--color-primary);
+  }
+  .\[--_c\:var\(--color-secondary\)\] {
+    --_c: var(--color-secondary);
+  }
+  .\[--_c\:var\(--color-success\)\] {
+    --_c: var(--color-success);
+  }
+  .\[--_c\:var\(--color-text-primary\)\] {
+    --_c: var(--color-text-primary);
+  }
+  .\[--_c\:var\(--color-warning\)\] {
+    --_c: var(--color-warning);
+  }
   .\[--card-content-padding\:0\.5rem\] {
     --card-content-padding: 0.5rem;
   }
@@ -4133,39 +3700,14 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .peer-checked\:bg-accent {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-accent);
-    }
-  }
   .peer-checked\:bg-error {
     &:is(:where(.peer):checked ~ *) {
       background-color: var(--color-error);
     }
   }
-  .peer-checked\:bg-info {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-info);
-    }
-  }
-  .peer-checked\:bg-primary {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-primary);
-    }
-  }
-  .peer-checked\:bg-secondary {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-secondary);
-    }
-  }
-  .peer-checked\:bg-success {
+  .peer-checked\:bg-slot {
     &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-success);
-    }
-  }
-  .peer-checked\:bg-warning {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-warning);
+      background-color: var(--_c-bg);
     }
   }
   .peer-focus\:top-1 {
@@ -4225,39 +3767,14 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .peer-focus-visible\:ring-accent {
-    &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-accent);
-    }
-  }
   .peer-focus-visible\:ring-error {
     &:is(:where(.peer):focus-visible ~ *) {
       --tw-ring-color: var(--color-error);
     }
   }
-  .peer-focus-visible\:ring-info {
-    &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-info);
-    }
-  }
-  .peer-focus-visible\:ring-primary {
-    &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-primary);
-    }
-  }
-  .peer-focus-visible\:ring-secondary {
-    &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-secondary);
-    }
-  }
-  .peer-focus-visible\:ring-success {
+  .peer-focus-visible\:ring-slot {
     &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-success);
-    }
-  }
-  .peer-focus-visible\:ring-warning {
-    &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-warning);
+      --tw-ring-color: var(--_c);
     }
   }
   .peer-focus-visible\:ring-offset-2 {
@@ -4368,187 +3885,85 @@
       padding-right: var(--spacing-4);
     }
   }
-  .checked\:border-accent {
-    &:checked {
-      border-color: var(--color-accent);
-    }
-  }
   .checked\:border-error {
     &:checked {
       border-color: var(--color-error);
     }
   }
-  .checked\:border-info {
+  .checked\:border-slot {
     &:checked {
-      border-color: var(--color-info);
+      border-color: var(--_c-border);
     }
   }
-  .checked\:border-primary {
+  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--_c\)\] {
     &:checked {
-      border-color: var(--color-primary);
+      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--_c));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .checked\:border-secondary {
-    &:checked {
-      border-color: var(--color-secondary);
+  .indeterminate\:border-slot {
+    &:indeterminate {
+      border-color: var(--_c-border);
     }
   }
-  .checked\:border-success {
-    &:checked {
-      border-color: var(--color-success);
+  .read-only\:cursor-default {
+    &:read-only {
+      cursor: default;
     }
   }
-  .checked\:border-warning {
-    &:checked {
-      border-color: var(--color-warning);
+  .read-only\:bg-surface {
+    &:read-only {
+      background-color: var(--color-surface);
     }
   }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-accent\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-accent));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .focus-within\:border-error {
+    &:focus-within {
+      border-color: var(--color-error);
     }
   }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-error\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-error));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .focus-within\:border-primary {
+    &:focus-within {
+      border-color: var(--color-primary);
     }
   }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-info\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-info));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .focus-within\:border-slot {
+    &:focus-within {
+      border-color: var(--_c-border);
     }
   }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-primary\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-primary));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .hover\:-translate-y-0\.5 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-translate-y: calc(var(--spacing) * -0.5);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
     }
   }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-secondary\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-secondary));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .hover\:scale-105 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 105%;
+        --tw-scale-y: 105%;
+        --tw-scale-z: 105%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
     }
   }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-success\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-success));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .hover\:scale-110 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-scale-x: 110%;
+        --tw-scale-y: 110%;
+        --tw-scale-z: 110%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+      }
     }
   }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-warning\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-warning));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .indeterminate\:border-accent {
-    &:indeterminate {
-      border-color: var(--color-accent);
-    }
-  }
-  .indeterminate\:border-error {
-    &:indeterminate {
-      border-color: var(--color-error);
-    }
-  }
-  .indeterminate\:border-info {
-    &:indeterminate {
-      border-color: var(--color-info);
-    }
-  }
-  .indeterminate\:border-primary {
-    &:indeterminate {
-      border-color: var(--color-primary);
-    }
-  }
-  .indeterminate\:border-secondary {
-    &:indeterminate {
-      border-color: var(--color-secondary);
-    }
-  }
-  .indeterminate\:border-success {
-    &:indeterminate {
-      border-color: var(--color-success);
-    }
-  }
-  .indeterminate\:border-warning {
-    &:indeterminate {
-      border-color: var(--color-warning);
-    }
-  }
-  .read-only\:cursor-default {
-    &:read-only {
-      cursor: default;
-    }
-  }
-  .read-only\:bg-surface {
-    &:read-only {
-      background-color: var(--color-surface);
-    }
-  }
-  .focus-within\:border-primary {
-    &:focus-within {
-      border-color: var(--color-primary);
-    }
-  }
-  .hover\:-translate-y-0\.5 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-translate-y: calc(var(--spacing) * -0.5);
-        translate: var(--tw-translate-x) var(--tw-translate-y);
-      }
-    }
-  }
-  .hover\:scale-105 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-scale-x: 105%;
-        --tw-scale-y: 105%;
-        --tw-scale-z: 105%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
-      }
-    }
-  }
-  .hover\:scale-110 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-scale-x: 110%;
-        --tw-scale-y: 110%;
-        --tw-scale-z: 110%;
-        scale: var(--tw-scale-x) var(--tw-scale-y);
-      }
-    }
-  }
-  .hover\:border-accent {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-accent);
-      }
-    }
-  }
-  .hover\:border-error {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-error);
-      }
-    }
-  }
-  .hover\:border-info {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-info);
-      }
-    }
-  }
-  .hover\:border-primary {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-primary);
-      }
+  .hover\:border-primary {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-primary);
+      }
     }
   }
   .hover\:border-primary\/50 {
@@ -4561,60 +3976,19 @@
       }
     }
   }
-  .hover\:border-secondary {
+  .hover\:border-slot {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-secondary);
+        border-color: var(--_c-border);
       }
     }
   }
-  .hover\:border-success {
+  .hover\:border-slot-50 {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-success);
-      }
-    }
-  }
-  .hover\:border-text-primary {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-text-primary);
-      }
-    }
-  }
-  .hover\:border-warning {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-warning);
-      }
-    }
-  }
-  .hover\:bg-accent\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(80% 0.1737 67) 5%, transparent);
+        border-color: var(--_c-border);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 5%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-accent\/10 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-accent\/20 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(80% 0.1737 67) 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
+          border-color: color-mix(in oklch, var(--_c-border) 50%, transparent);
         }
       }
     }
@@ -4656,16 +4030,6 @@
       }
     }
   }
-  .hover\:bg-error\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(63% 0.22 25) 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-error) 5%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-error\/10 {
     &:hover {
       @media (hover: hover) {
@@ -4676,16 +4040,6 @@
       }
     }
   }
-  .hover\:bg-error\/20 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-error) 20%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-error\/90 {
     &:hover {
       @media (hover: hover) {
@@ -4710,53 +4064,6 @@
       }
     }
   }
-  .hover\:bg-info\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(60% 0.19 255) 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-info) 5%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-info\/10 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(60% 0.19 255) 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-info) 10%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-info\/20 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(60% 0.19 255) 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-info) 20%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-info\/90 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(60% 0.19 255) 90%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-info) 90%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-primary {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-primary);
-      }
-    }
-  }
   .hover\:bg-primary\/5 {
     &:hover {
       @media (hover: hover) {
@@ -4767,26 +4074,6 @@
       }
     }
   }
-  .hover\:bg-primary\/10 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-primary\/20 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
@@ -4797,72 +4084,49 @@
       }
     }
   }
-  .hover\:bg-secondary\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(50% 0.05 240) 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-secondary) 5%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-secondary\/10 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(50% 0.05 240) 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-secondary\/20 {
+  .hover\:bg-secondary\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(50% 0.05 240) 20%, transparent);
+        background-color: color-mix(in srgb, oklch(50% 0.05 240) 90%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
+          background-color: color-mix(in oklab, var(--color-secondary) 90%, transparent);
         }
       }
     }
   }
-  .hover\:bg-secondary\/90 {
+  .hover\:bg-slot {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(50% 0.05 240) 90%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-secondary) 90%, transparent);
-        }
+        background-color: var(--_c-bg);
       }
     }
   }
-  .hover\:bg-success\/5 {
+  .hover\:bg-slot-10 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(70% 0.2 145) 5%, transparent);
+        background-color: var(--_c);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-success) 5%, transparent);
+          background-color: color-mix(in oklch, var(--_c) 10%, transparent);
         }
       }
     }
   }
-  .hover\:bg-success\/10 {
+  .hover\:bg-slot-20 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(70% 0.2 145) 10%, transparent);
+        background-color: var(--_c);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
+          background-color: color-mix(in oklch, var(--_c) 20%, transparent);
         }
       }
     }
   }
-  .hover\:bg-success\/20 {
+  .hover\:bg-slot-90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
+        background-color: var(--_c-bg);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-success) 20%, transparent);
+          background-color: color-mix(in oklch, var(--_c-bg) 90%, var(--color-background));
         }
       }
     }
@@ -4911,46 +4175,6 @@
       }
     }
   }
-  .hover\:bg-warning\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(75% 0.15 85) 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-warning) 5%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-warning\/10 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(75% 0.15 85) 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-warning\/20 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(75% 0.15 85) 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-warning\/90 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(75% 0.15 85) 90%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-warning) 90%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-white {
     &:hover {
       @media (hover: hover) {
@@ -4958,23 +4182,6 @@
       }
     }
   }
-  .hover\:text-accent {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-accent);
-      }
-    }
-  }
-  .hover\:text-accent\/80 {
-    &:hover {
-      @media (hover: hover) {
-        color: color-mix(in srgb, oklch(80% 0.1737 67) 80%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-accent) 80%, transparent);
-        }
-      }
-    }
-  }
   .hover\:text-error {
     &:hover {
       @media (hover: hover) {
@@ -4982,33 +4189,6 @@
       }
     }
   }
-  .hover\:text-error\/80 {
-    &:hover {
-      @media (hover: hover) {
-        color: color-mix(in srgb, oklch(63% 0.22 25) 80%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-error) 80%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:text-info {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-info);
-      }
-    }
-  }
-  .hover\:text-info\/80 {
-    &:hover {
-      @media (hover: hover) {
-        color: color-mix(in srgb, oklch(60% 0.19 255) 80%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-info) 80%, transparent);
-        }
-      }
-    }
-  }
   .hover\:text-primary {
     &:hover {
       @media (hover: hover) {
@@ -5026,37 +4206,27 @@
       }
     }
   }
-  .hover\:text-secondary {
+  .hover\:text-slot {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-secondary);
+        color: var(--_c);
       }
     }
   }
-  .hover\:text-secondary\/80 {
+  .hover\:text-slot-80 {
     &:hover {
       @media (hover: hover) {
-        color: color-mix(in srgb, oklch(50% 0.05 240) 80%, transparent);
+        color: var(--_c);
         @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
+          color: color-mix(in oklch, var(--_c) 80%, transparent);
         }
       }
     }
   }
-  .hover\:text-success {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-success);
-      }
-    }
-  }
-  .hover\:text-success\/80 {
+  .hover\:text-slot-fg {
     &:hover {
       @media (hover: hover) {
-        color: color-mix(in srgb, oklch(70% 0.2 145) 80%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-success) 80%, transparent);
-        }
+        color: var(--_c-fg);
       }
     }
   }
@@ -5067,51 +4237,24 @@
       }
     }
   }
-  .hover\:text-text-primary\/80 {
-    &:hover {
-      @media (hover: hover) {
-        color: color-mix(in srgb, oklch(15% 0 0) 80%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-text-primary) 80%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:text-warning {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-warning);
-      }
-    }
-  }
-  .hover\:text-warning\/80 {
-    &:hover {
-      @media (hover: hover) {
-        color: color-mix(in srgb, oklch(75% 0.15 85) 80%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-warning) 80%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:text-white {
+  .hover\:no-underline {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-white);
+        text-decoration-line: none;
       }
     }
   }
-  .hover\:no-underline {
+  .hover\:underline {
     &:hover {
       @media (hover: hover) {
-        text-decoration-line: none;
+        text-decoration-line: underline;
       }
     }
   }
-  .hover\:underline {
+  .hover\:opacity-80 {
     &:hover {
       @media (hover: hover) {
-        text-decoration-line: underline;
+        opacity: 80%;
       }
     }
   }
@@ -5137,26 +4280,6 @@
       }
     }
   }
-  .focus\:\!border-error {
-    &:focus {
-      border-color: var(--color-error) !important;
-    }
-  }
-  .focus\:\!border-info {
-    &:focus {
-      border-color: var(--color-info) !important;
-    }
-  }
-  .focus\:\!border-success {
-    &:focus {
-      border-color: var(--color-success) !important;
-    }
-  }
-  .focus\:\!border-warning {
-    &:focus {
-      border-color: var(--color-warning) !important;
-    }
-  }
   .focus\:border-error {
     &:focus {
       border-color: var(--color-error);
@@ -5182,108 +4305,11 @@
       border-color: var(--color-warning);
     }
   }
-  .focus\:bg-accent\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
-      }
-    }
-  }
-  .focus\:bg-error\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
-      }
-    }
-  }
-  .focus\:bg-info\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(60% 0.19 255) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-info) 10%, transparent);
-      }
-    }
-  }
-  .focus\:bg-primary\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
-      }
-    }
-  }
-  .focus\:bg-secondary\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(50% 0.05 240) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
-      }
-    }
-  }
-  .focus\:bg-success\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(70% 0.2 145) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
-      }
-    }
-  }
   .focus\:bg-surface {
     &:focus {
       background-color: var(--color-surface);
     }
   }
-  .focus\:bg-warning\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(75% 0.15 85) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);
-      }
-    }
-  }
-  .focus\:text-accent {
-    &:focus {
-      color: var(--color-accent);
-    }
-  }
-  .focus\:text-error {
-    &:focus {
-      color: var(--color-error);
-    }
-  }
-  .focus\:text-info {
-    &:focus {
-      color: var(--color-info);
-    }
-  }
-  .focus\:text-primary {
-    &:focus {
-      color: var(--color-primary);
-    }
-  }
-  .focus\:text-secondary {
-    &:focus {
-      color: var(--color-secondary);
-    }
-  }
-  .focus\:text-success {
-    &:focus {
-      color: var(--color-success);
-    }
-  }
-  .focus\:text-warning {
-    &:focus {
-      color: var(--color-warning);
-    }
-  }
-  .focus\:ring-1 {
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -5295,63 +4321,17 @@
       --tw-ring-color: currentcolor;
     }
   }
-  .focus\:ring-error\/20 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-error) 20%, transparent);
-      }
-    }
-  }
-  .focus\:ring-info\/20 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(60% 0.19 255) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-info) 20%, transparent);
-      }
-    }
-  }
   .focus\:ring-primary {
     &:focus {
       --tw-ring-color: var(--color-primary);
     }
   }
-  .focus\:ring-primary\/20 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-      }
-    }
-  }
-  .focus\:ring-success\/20 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-success) 20%, transparent);
-      }
-    }
-  }
-  .focus\:ring-warning\/20 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(75% 0.15 85) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
-      }
-    }
-  }
   .focus\:ring-offset-1 {
     &:focus {
       --tw-ring-offset-width: 1px;
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
-  .focus\:ring-offset-2 {
-    &:focus {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
   .focus\:outline-hidden {
     &:focus {
       --tw-outline-style: none;
@@ -5368,64 +4348,63 @@
       outline-style: none;
     }
   }
-  .focus-visible\:ring-1 {
+  .focus-visible\:border-error {
     &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      border-color: var(--color-error);
     }
   }
-  .focus-visible\:ring-2 {
+  .focus-visible\:border-info {
     &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      border-color: var(--color-info);
     }
   }
-  .focus-visible\:ring-accent {
+  .focus-visible\:border-primary {
     &:focus-visible {
-      --tw-ring-color: var(--color-accent);
+      border-color: var(--color-primary);
     }
   }
-  .focus-visible\:ring-border {
+  .focus-visible\:border-success {
     &:focus-visible {
-      --tw-ring-color: var(--color-border);
+      border-color: var(--color-success);
     }
   }
-  .focus-visible\:ring-error {
+  .focus-visible\:border-warning {
     &:focus-visible {
-      --tw-ring-color: var(--color-error);
+      border-color: var(--color-warning);
     }
   }
-  .focus-visible\:ring-info {
+  .focus-visible\:bg-slot-10 {
     &:focus-visible {
-      --tw-ring-color: var(--color-info);
+      background-color: var(--_c);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklch, var(--_c) 10%, transparent);
+      }
     }
   }
-  .focus-visible\:ring-primary {
+  .focus-visible\:bg-surface {
     &:focus-visible {
-      --tw-ring-color: var(--color-primary);
+      background-color: var(--color-surface);
     }
   }
-  .focus-visible\:ring-primary\/20 {
+  .focus-visible\:text-slot {
     &:focus-visible {
-      --tw-ring-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-      }
+      color: var(--_c);
     }
   }
-  .focus-visible\:ring-secondary {
+  .focus-visible\:ring-2 {
     &:focus-visible {
-      --tw-ring-color: var(--color-secondary);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus-visible\:ring-success {
+  .focus-visible\:ring-primary {
     &:focus-visible {
-      --tw-ring-color: var(--color-success);
+      --tw-ring-color: var(--color-primary);
     }
   }
-  .focus-visible\:ring-warning {
+  .focus-visible\:ring-slot {
     &:focus-visible {
-      --tw-ring-color: var(--color-warning);
+      --tw-ring-color: var(--_c);
     }
   }
   .focus-visible\:ring-offset-1 {
@@ -5462,6 +4441,14 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .active\:scale-95 {
+    &:active {
+      --tw-scale-x: 95%;
+      --tw-scale-y: 95%;
+      --tw-scale-z: 95%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+  }
   .active\:scale-100 {
     &:active {
       --tw-scale-x: 100%;
@@ -5486,11 +4473,6 @@
       cursor: not-allowed;
     }
   }
-  .disabled\:opacity-30 {
-    &:disabled {
-      opacity: 30%;
-    }
-  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -5523,6 +4505,16 @@
       }
     }
   }
+  .aria-disabled\:cursor-not-allowed {
+    &[aria-disabled="true"] {
+      cursor: not-allowed;
+    }
+  }
+  .aria-disabled\:opacity-50 {
+    &[aria-disabled="true"] {
+      opacity: 50%;
+    }
+  }
   .data-\[disabled\=true\]\:pointer-events-none {
     &[data-disabled="true"] {
       pointer-events: none;
@@ -5540,112 +4532,24 @@
     }
   }
   .data-\[pressed\=true\]\:ring-current\/30 {
-    &[data-pressed="true"] {
-      --tw-ring-color: currentcolor;
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, currentcolor 30%, transparent);
-      }
-    }
-  }
-  .data-\[selected\=true\]\:bg-accent\/10 {
-    &[data-selected="true"] {
-      background-color: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
-      }
-    }
-  }
-  .data-\[selected\=true\]\:bg-error\/10 {
-    &[data-selected="true"] {
-      background-color: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
-      }
-    }
-  }
-  .data-\[selected\=true\]\:bg-info\/10 {
-    &[data-selected="true"] {
-      background-color: color-mix(in srgb, oklch(60% 0.19 255) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-info) 10%, transparent);
-      }
-    }
-  }
-  .data-\[selected\=true\]\:bg-primary\/10 {
-    &[data-selected="true"] {
-      background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
-      }
-    }
-  }
-  .data-\[selected\=true\]\:bg-secondary\/10 {
-    &[data-selected="true"] {
-      background-color: color-mix(in srgb, oklch(50% 0.05 240) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
-      }
-    }
-  }
-  .data-\[selected\=true\]\:bg-success\/10 {
-    &[data-selected="true"] {
-      background-color: color-mix(in srgb, oklch(70% 0.2 145) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
-      }
-    }
-  }
-  .data-\[selected\=true\]\:bg-surface {
-    &[data-selected="true"] {
-      background-color: var(--color-surface);
-    }
-  }
-  .data-\[selected\=true\]\:bg-warning\/10 {
-    &[data-selected="true"] {
-      background-color: color-mix(in srgb, oklch(75% 0.15 85) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);
-      }
-    }
-  }
-  .data-\[selected\=true\]\:text-accent {
-    &[data-selected="true"] {
-      color: var(--color-accent);
-    }
-  }
-  .data-\[selected\=true\]\:text-error {
-    &[data-selected="true"] {
-      color: var(--color-error);
-    }
-  }
-  .data-\[selected\=true\]\:text-info {
-    &[data-selected="true"] {
-      color: var(--color-info);
-    }
-  }
-  .data-\[selected\=true\]\:text-primary {
-    &[data-selected="true"] {
-      color: var(--color-primary);
-    }
-  }
-  .data-\[selected\=true\]\:text-secondary {
-    &[data-selected="true"] {
-      color: var(--color-secondary);
-    }
-  }
-  .data-\[selected\=true\]\:text-success {
-    &[data-selected="true"] {
-      color: var(--color-success);
+    &[data-pressed="true"] {
+      --tw-ring-color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, currentcolor 30%, transparent);
+      }
     }
   }
-  .data-\[selected\=true\]\:text-text-primary {
+  .data-\[selected\=true\]\:bg-slot-10 {
     &[data-selected="true"] {
-      color: var(--color-text-primary);
+      background-color: var(--_c);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklch, var(--_c) 10%, transparent);
+      }
     }
   }
-  .data-\[selected\=true\]\:text-warning {
+  .data-\[selected\=true\]\:text-slot {
     &[data-selected="true"] {
-      color: var(--color-warning);
+      color: var(--_c);
     }
   }
   .data-\[side\=bottom\]\:slide-in-from-top-2 {
@@ -5932,195 +4836,27 @@
       }
     }
   }
-  .\[\&_\.react-datepicker__day--in-range\]\:\!bg-accent\/10 {
-    & .react-datepicker  day--in-range {
-      background-color: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-accent) 10%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-range\]\:\!bg-error\/10 {
-    & .react-datepicker  day--in-range {
-      background-color: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-error) 10%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-range\]\:\!bg-info\/10 {
-    & .react-datepicker  day--in-range {
-      background-color: color-mix(in srgb, oklch(60% 0.19 255) 10%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-info) 10%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-range\]\:\!bg-primary\/10 {
-    & .react-datepicker  day--in-range {
-      background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 10%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-range\]\:\!bg-secondary\/10 {
-    & .react-datepicker  day--in-range {
-      background-color: color-mix(in srgb, oklch(50% 0.05 240) 10%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-range\]\:\!bg-success\/10 {
-    & .react-datepicker  day--in-range {
-      background-color: color-mix(in srgb, oklch(70% 0.2 145) 10%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-success) 10%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-range\]\:\!bg-surface\/10 {
-    & .react-datepicker  day--in-range {
-      background-color: color-mix(in srgb, oklch(96% 0 0) 10%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-surface) 10%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-range\]\:\!bg-warning\/10 {
+  .\[\&_\.react-datepicker__day--in-range\]\:\!\[background-color\:color-mix\(in_oklch\,var\(--_c-bg\)_10\%\,transparent\)\] {
     & .react-datepicker  day--in-range {
-      background-color: color-mix(in srgb, oklch(75% 0.15 85) 10%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-warning) 10%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-accent\/30 {
-    & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in srgb, oklch(80% 0.1737 67) 30%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-accent) 30%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-error\/30 {
-    & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in srgb, oklch(63% 0.22 25) 30%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-error) 30%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-info\/30 {
-    & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in srgb, oklch(60% 0.19 255) 30%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-info) 30%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-primary\/30 {
-    & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 30%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 30%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-secondary\/30 {
-    & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in srgb, oklch(50% 0.05 240) 30%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 30%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-success\/30 {
-    & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in srgb, oklch(70% 0.2 145) 30%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-success) 30%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-surface\/30 {
-    & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in srgb, oklch(96% 0 0) 30%, transparent) !important;
+      background-color: var(--_c-bg) !important;
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-surface) 30%, transparent) !important;
+        background-color: color-mix(in oklch,var(--_c-bg) 10%,transparent) !important;
       }
     }
   }
-  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-warning\/30 {
+  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!\[background-color\:color-mix\(in_oklch\,var\(--_c-bg\)_30\%\,transparent\)\] {
     & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in srgb, oklch(75% 0.15 85) 30%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-warning) 30%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-accent\/50 {
-    & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in srgb, oklch(80% 0.1737 67) 50%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-accent) 50%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-error\/50 {
-    & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in srgb, oklch(63% 0.22 25) 50%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-error) 50%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-info\/50 {
-    & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in srgb, oklch(60% 0.19 255) 50%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-info) 50%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-primary\/50 {
-    & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 50%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 50%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-secondary\/50 {
-    & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in srgb, oklch(50% 0.05 240) 50%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 50%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-success\/50 {
-    & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in srgb, oklch(70% 0.2 145) 50%, transparent) !important;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-success) 50%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-surface\/50 {
-    & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in srgb, oklch(96% 0 0) 50%, transparent) !important;
+      background-color: var(--_c-bg) !important;
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-surface) 50%, transparent) !important;
+        background-color: color-mix(in oklch,var(--_c-bg) 30%,transparent) !important;
       }
     }
   }
-  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-warning\/50 {
+  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!\[background-color\:color-mix\(in_oklch\,var\(--_c-bg\)_50\%\,transparent\)\] {
     & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in srgb, oklch(75% 0.15 85) 50%, transparent) !important;
+      background-color: var(--_c-bg) !important;
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-warning) 50%, transparent) !important;
+        background-color: color-mix(in oklch,var(--_c-bg) 50%,transparent) !important;
       }
     }
   }
@@ -6129,154 +4865,34 @@
       color: var(--color-text-secondary) !important;
     }
   }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!bg-accent {
-    & .react-datepicker  day--range-end {
-      background-color: var(--color-accent) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!bg-error {
-    & .react-datepicker  day--range-end {
-      background-color: var(--color-error) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!bg-info {
-    & .react-datepicker  day--range-end {
-      background-color: var(--color-info) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!bg-primary {
-    & .react-datepicker  day--range-end {
-      background-color: var(--color-primary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!bg-secondary {
-    & .react-datepicker  day--range-end {
-      background-color: var(--color-secondary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!bg-success {
+  .\[\&_\.react-datepicker__day--range-end\]\:\!\[background-color\:var\(--_c-bg\)\] {
     & .react-datepicker  day--range-end {
-      background-color: var(--color-success) !important;
+      background-color: var(--_c-bg) !important;
     }
   }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!bg-surface {
+  .\[\&_\.react-datepicker__day--range-end\]\:\!\[color\:var\(--_c-fg\)\] {
     & .react-datepicker  day--range-end {
-      background-color: var(--color-surface) !important;
+      color: var(--_c-fg) !important;
     }
   }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!bg-warning {
-    & .react-datepicker  day--range-end {
-      background-color: var(--color-warning) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!text-background {
-    & .react-datepicker  day--range-end {
-      color: var(--color-background) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!text-text-primary {
-    & .react-datepicker  day--range-end {
-      color: var(--color-text-primary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!bg-accent {
-    & .react-datepicker  day--range-start {
-      background-color: var(--color-accent) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!bg-error {
-    & .react-datepicker  day--range-start {
-      background-color: var(--color-error) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!bg-info {
-    & .react-datepicker  day--range-start {
-      background-color: var(--color-info) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!bg-primary {
-    & .react-datepicker  day--range-start {
-      background-color: var(--color-primary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!bg-secondary {
-    & .react-datepicker  day--range-start {
-      background-color: var(--color-secondary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!bg-success {
-    & .react-datepicker  day--range-start {
-      background-color: var(--color-success) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!bg-surface {
-    & .react-datepicker  day--range-start {
-      background-color: var(--color-surface) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!bg-warning {
-    & .react-datepicker  day--range-start {
-      background-color: var(--color-warning) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!text-background {
+  .\[\&_\.react-datepicker__day--range-start\]\:\!\[background-color\:var\(--_c-bg\)\] {
     & .react-datepicker  day--range-start {
-      color: var(--color-background) !important;
+      background-color: var(--_c-bg) !important;
     }
   }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!text-text-primary {
+  .\[\&_\.react-datepicker__day--range-start\]\:\!\[color\:var\(--_c-fg\)\] {
     & .react-datepicker  day--range-start {
-      color: var(--color-text-primary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--selected\]\:\!bg-accent {
-    & .react-datepicker  day--selected {
-      background-color: var(--color-accent) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--selected\]\:\!bg-error {
-    & .react-datepicker  day--selected {
-      background-color: var(--color-error) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--selected\]\:\!bg-info {
-    & .react-datepicker  day--selected {
-      background-color: var(--color-info) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--selected\]\:\!bg-primary {
-    & .react-datepicker  day--selected {
-      background-color: var(--color-primary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--selected\]\:\!bg-secondary {
-    & .react-datepicker  day--selected {
-      background-color: var(--color-secondary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--selected\]\:\!bg-success {
-    & .react-datepicker  day--selected {
-      background-color: var(--color-success) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--selected\]\:\!bg-surface {
-    & .react-datepicker  day--selected {
-      background-color: var(--color-surface) !important;
+      color: var(--_c-fg) !important;
     }
   }
-  .\[\&_\.react-datepicker__day--selected\]\:\!bg-warning {
+  .\[\&_\.react-datepicker__day--selected\]\:\!\[background-color\:var\(--_c-bg\)\] {
     & .react-datepicker  day--selected {
-      background-color: var(--color-warning) !important;
+      background-color: var(--_c-bg) !important;
     }
   }
-  .\[\&_\.react-datepicker__day--selected\]\:\!text-background {
+  .\[\&_\.react-datepicker__day--selected\]\:\!\[color\:var\(--_c-fg\)\] {
     & .react-datepicker  day--selected {
-      color: var(--color-background) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--selected\]\:\!text-text-primary {
-    & .react-datepicker  day--selected {
-      color: var(--color-text-primary) !important;
+      color: var(--_c-fg) !important;
     }
   }
   .\[\&_\.react-datepicker__day--today\]\:\!border {
@@ -6285,44 +4901,9 @@
       border-width: 1px !important;
     }
   }
-  .\[\&_\.react-datepicker__day--today\]\:\!border-accent {
-    & .react-datepicker  day--today {
-      border-color: var(--color-accent) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--today\]\:\!border-border {
-    & .react-datepicker  day--today {
-      border-color: var(--color-border) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--today\]\:\!border-error {
-    & .react-datepicker  day--today {
-      border-color: var(--color-error) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--today\]\:\!border-info {
-    & .react-datepicker  day--today {
-      border-color: var(--color-info) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--today\]\:\!border-primary {
-    & .react-datepicker  day--today {
-      border-color: var(--color-primary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--today\]\:\!border-secondary {
-    & .react-datepicker  day--today {
-      border-color: var(--color-secondary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--today\]\:\!border-success {
-    & .react-datepicker  day--today {
-      border-color: var(--color-success) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--today\]\:\!border-warning {
+  .\[\&_\.react-datepicker__day--today\]\:\!\[border-color\:var\(--_c-border\)\] {
     & .react-datepicker  day--today {
-      border-color: var(--color-warning) !important;
+      border-color: var(--_c-border) !important;
     }
   }
   .\[\&_\.react-datepicker__day--today\]\:\!font-semibold {
@@ -6453,54 +5034,14 @@
       }
     }
   }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!bg-accent {
-    & .react-datepicker  time-list-item--selected {
-      background-color: var(--color-accent) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!bg-error {
-    & .react-datepicker  time-list-item--selected {
-      background-color: var(--color-error) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!bg-info {
-    & .react-datepicker  time-list-item--selected {
-      background-color: var(--color-info) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!bg-primary {
-    & .react-datepicker  time-list-item--selected {
-      background-color: var(--color-primary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!bg-secondary {
-    & .react-datepicker  time-list-item--selected {
-      background-color: var(--color-secondary) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!bg-success {
-    & .react-datepicker  time-list-item--selected {
-      background-color: var(--color-success) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!bg-surface {
-    & .react-datepicker  time-list-item--selected {
-      background-color: var(--color-surface) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!bg-warning {
-    & .react-datepicker  time-list-item--selected {
-      background-color: var(--color-warning) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!text-background {
+  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!\[background-color\:var\(--_c-bg\)\] {
     & .react-datepicker  time-list-item--selected {
-      color: var(--color-background) !important;
+      background-color: var(--_c-bg) !important;
     }
   }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!text-text-primary {
+  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!\[color\:var\(--_c-fg\)\] {
     & .react-datepicker  time-list-item--selected {
-      color: var(--color-text-primary) !important;
+      color: var(--_c-fg) !important;
     }
   }
   .\[\&_\.react-datepicker__week\]\:\!grid {
@@ -6785,7 +5326,9 @@
   initial-value: 0;
 }
 :root.dark,
-.dark {
+.dark,
+:root[data-mode='dark'],
+[data-mode='dark'] {
   --color-primary: oklch(62% 0.17 239);
   --color-primary-hover: oklch(67% 0.19 239);
   --color-primary-active: oklch(72% 0.21 239);
@@ -6818,6 +5361,7 @@
   --color-background-secondary: oklch(16% 0.01 260);
   --color-surface: oklch(20% 0.015 260);
   --color-card: oklch(16% 0.01 260);
+  --color-card-foreground: oklch(95% 0 0);
   --color-border: oklch(28% 0.015 260);
   --color-border-primary: oklch(38% 0.02 260);
   --color-border-hover: oklch(45% 0.02 260);
@@ -6844,20 +5388,14 @@
   --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.7);
   --overlay-stripe: oklch(100% 0 0 / 0.08);
 }
-html,
-body {
-  background-color: var(--color-background);
-  color: var(--color-text-primary);
-  overscroll-behavior: none;
-}
-.pagination {
-  display: flex;
-  gap: 2px;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 20px;
-  z-index: 100;
+@layer base {
+  *, ::before, ::after {
+    border-color: var(--color-border);
+  }
+  body {
+    color: var(--color-text-primary);
+    background-color: var(--color-background);
+  }
 }
 .react-datepicker-wrapper {
   display: block;
@@ -7294,6 +5832,26 @@ body {
   syntax: "*";
   inherits: false;
 }
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -7523,6 +6081,11 @@ body {
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;