@mdigital_ui/ui 0.4.3 → 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);
   }
@@ -1838,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 {
@@ -1903,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 {
@@ -1917,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 {
@@ -2102,18 +2098,6 @@
   .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-border {
     border-color: var(--color-border);
   }
@@ -2129,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)) {
@@ -2150,12 +2128,6 @@
   .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)) {
@@ -2171,27 +2143,9 @@
       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-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-secondary\/30 {
-    border-color: color-mix(in srgb, oklch(50% 0.05 240) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
-    }
-  }
   .border-slot {
     border-color: var(--_c-border);
   }
@@ -2216,18 +2170,6 @@
   .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-transparent {
     border-color: transparent;
   }
@@ -2240,11 +2182,8 @@
       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-white {
+    border-color: var(--color-white);
   }
   .border-t-transparent {
     border-top-color: transparent;
@@ -2261,12 +2200,6 @@
   .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)) {
@@ -2279,6 +2212,18 @@
   .bg-background-secondary {
     background-color: var(--color-background-secondary);
   }
+  .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-background) 80%, 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-background) 90%, transparent);
+    }
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
@@ -2342,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)) {
@@ -2438,18 +2377,6 @@
   .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-slot {
     background-color: var(--_c-bg);
   }
@@ -2534,6 +2461,12 @@
       background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);
     }
   }
+  .bg-warning\/20 {
+    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);
+    }
+  }
   .bg-white\/80 {
     background-color: color-mix(in srgb, oklch(100% 0 0) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2647,6 +2580,18 @@
   .stroke-secondary {
     stroke: var(--color-secondary);
   }
+  .stroke-slot {
+    stroke: var(--_c);
+  }
+  .stroke-slot-10 {
+    stroke: oklch(from var(--_c) l c h / 10%);
+  }
+  .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);
   }
@@ -2722,6 +2667,9 @@
   .p-3 {
     padding: var(--spacing-3);
   }
+  .p-3\.5 {
+    padding: calc(var(--spacing) * 3.5);
+  }
   .p-4 {
     padding: var(--spacing-4);
   }
@@ -2734,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);
   }
@@ -2929,6 +2880,9 @@
   .pt-0 {
     padding-top: var(--spacing-0);
   }
+  .pt-1 {
+    padding-top: var(--spacing-1);
+  }
   .pt-2 {
     padding-top: var(--spacing-2);
   }
@@ -2947,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);
   }
@@ -3007,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);
   }
@@ -3016,6 +2979,9 @@
   .pl-11 {
     padding-left: calc(var(--spacing) * 11);
   }
+  .pl-14 {
+    padding-left: calc(var(--spacing) * 14);
+  }
   .text-center {
     text-align: center;
   }
@@ -3093,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);
@@ -3113,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);
@@ -3147,6 +3120,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
   .text-accent {
     color: var(--color-accent);
   }
@@ -3162,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);
   }
@@ -3240,6 +3219,24 @@
   .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);
   }
@@ -3270,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;
   }
@@ -3288,6 +3289,9 @@
   .opacity-25 {
     opacity: 25%;
   }
+  .opacity-30 {
+    opacity: 30%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -3326,58 +3330,19 @@
     --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-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-primary {
+    --tw-ring-color: var(--color-primary);
   }
-  .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-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-offset-background {
     --tw-ring-offset-color: var(--color-background);
@@ -3405,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,);
@@ -3479,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));
   }
@@ -3537,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;
   }
@@ -3959,11 +3916,21 @@
       background-color: var(--color-surface);
     }
   }
+  .focus-within\:border-error {
+    &:focus-within {
+      border-color: var(--color-error);
+    }
+  }
   .focus-within\:border-primary {
     &:focus-within {
       border-color: var(--color-primary);
     }
   }
+  .focus-within\:border-slot {
+    &:focus-within {
+      border-color: var(--_c-border);
+    }
+  }
   .hover\:-translate-y-0\.5 {
     &:hover {
       @media (hover: hover) {
@@ -4016,22 +3983,12 @@
       }
     }
   }
-  .hover\:bg-accent\/10 {
+  .hover\:border-slot-50 {
     &: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);
+        border-color: var(--_c-border);
         @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);
         }
       }
     }
@@ -4083,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) {
@@ -4117,43 +4064,6 @@
       }
     }
   }
-  .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) {
@@ -4164,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) {
@@ -4194,33 +4084,20 @@
       }
     }
   }
-  .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);
       }
     }
   }
@@ -4254,26 +4131,6 @@
       }
     }
   }
-  .hover\:bg-success\/10 {
-    &:hover {
-      @media (hover: hover) {
-        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);
-        }
-      }
-    }
-  }
-  .hover\:bg-success\/20 {
-    &:hover {
-      @media (hover: hover) {
-        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);
-        }
-      }
-    }
-  }
   .hover\:bg-success\/90 {
     &:hover {
       @media (hover: hover) {
@@ -4318,125 +4175,34 @@
       }
     }
   }
-  .hover\:bg-warning\/10 {
+  .hover\:bg-white {
     &: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);
-        }
+        background-color: var(--color-white);
       }
     }
   }
-  .hover\:bg-warning\/20 {
+  .hover\:text-error {
     &: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);
-        }
+        color: var(--color-error);
       }
     }
   }
-  .hover\:bg-warning\/90 {
+  .hover\:text-primary {
     &: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);
-        }
+        color: var(--color-primary);
       }
     }
   }
-  .hover\:bg-white {
+  .hover\:text-primary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-white);
-      }
-    }
-  }
-  .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) {
-        color: var(--color-error);
-      }
-    }
-  }
-  .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) {
-        color: var(--color-primary);
-      }
-    }
-  }
-  .hover\:text-primary\/80 {
-    &:hover {
-      @media (hover: hover) {
-        color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 80%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-primary) 80%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:text-secondary {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-secondary);
-      }
-    }
-  }
-  .hover\:text-secondary\/80 {
-    &:hover {
-      @media (hover: hover) {
-        color: color-mix(in srgb, oklch(50% 0.05 240) 80%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
-        }
+        color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 80%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+        }
       }
     }
   }
@@ -4457,20 +4223,10 @@
       }
     }
   }
-  .hover\:text-success {
+  .hover\:text-slot-fg {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-success);
-      }
-    }
-  }
-  .hover\:text-success\/80 {
-    &: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);
       }
     }
   }
@@ -4481,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%;
       }
     }
   }
@@ -4644,51 +4373,11 @@
       border-color: var(--color-warning);
     }
   }
-  .focus-visible\:bg-accent\/10 {
+  .focus-visible\:bg-slot-10 {
     &:focus-visible {
-      background-color: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
+      background-color: var(--_c);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
-      }
-    }
-  }
-  .focus-visible\:bg-error\/10 {
-    &:focus-visible {
-      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-visible\:bg-info\/10 {
-    &:focus-visible {
-      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-visible\:bg-primary\/10 {
-    &:focus-visible {
-      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-visible\:bg-secondary\/10 {
-    &:focus-visible {
-      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-visible\:bg-success\/10 {
-    &:focus-visible {
-      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);
+        background-color: color-mix(in oklch, var(--_c) 10%, transparent);
       }
     }
   }
@@ -4697,47 +4386,9 @@
       background-color: var(--color-surface);
     }
   }
-  .focus-visible\:bg-warning\/10 {
-    &:focus-visible {
-      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-visible\:text-accent {
-    &:focus-visible {
-      color: var(--color-accent);
-    }
-  }
-  .focus-visible\:text-error {
-    &:focus-visible {
-      color: var(--color-error);
-    }
-  }
-  .focus-visible\:text-info {
+  .focus-visible\:text-slot {
     &:focus-visible {
-      color: var(--color-info);
-    }
-  }
-  .focus-visible\:text-primary {
-    &:focus-visible {
-      color: var(--color-primary);
-    }
-  }
-  .focus-visible\:text-secondary {
-    &:focus-visible {
-      color: var(--color-secondary);
-    }
-  }
-  .focus-visible\:text-success {
-    &:focus-visible {
-      color: var(--color-success);
-    }
-  }
-  .focus-visible\:text-warning {
-    &:focus-visible {
-      color: var(--color-warning);
+      color: var(--_c);
     }
   }
   .focus-visible\:ring-2 {
@@ -4790,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%;
@@ -4846,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;
@@ -4870,105 +4539,17 @@
       }
     }
   }
-  .data-\[selected\=true\]\:bg-accent\/10 {
+  .data-\[selected\=true\]\:bg-slot-10 {
     &[data-selected="true"] {
-      background-color: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
+      background-color: var(--_c);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
+        background-color: color-mix(in oklch, var(--_c) 10%, transparent);
       }
     }
   }
-  .data-\[selected\=true\]\:bg-error\/10 {
+  .data-\[selected\=true\]\:text-slot {
     &[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-\[selected\=true\]\:text-text-primary {
-    &[data-selected="true"] {
-      color: var(--color-text-primary);
-    }
-  }
-  .data-\[selected\=true\]\:text-warning {
-    &[data-selected="true"] {
-      color: var(--color-warning);
+      color: var(--_c);
     }
   }
   .data-\[side\=bottom\]\:slide-in-from-top-2 {
@@ -5255,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;
+      background-color: var(--_c-bg) !important;
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-warning) 10%, transparent) !important;
+        background-color: color-mix(in oklch,var(--_c-bg) 10%,transparent) !important;
       }
     }
   }
-  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-accent\/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(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;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-surface) 30%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-warning\/30 {
-    & .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;
+      background-color: var(--_c-bg) !important;
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 50%, transparent) !important;
+        background-color: color-mix(in oklch,var(--_c-bg) 30%,transparent) !important;
       }
     }
   }
-  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-success\/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(70% 0.2 145) 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-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;
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-surface) 50%, transparent) !important;
-      }
-    }
-  }
-  .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-warning\/50 {
-    & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in srgb, oklch(75% 0.15 85) 50%, transparent) !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;
       }
     }
   }
@@ -5452,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\(--_c-bg\)\] {
     & .react-datepicker  day--range-end {
-      background-color: var(--color-secondary) !important;
+      background-color: var(--_c-bg) !important;
     }
   }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!bg-success {
+  .\[\&_\.react-datepicker__day--range-end\]\:\!\[color\:var\(--_c-fg\)\] {
     & .react-datepicker  day--range-end {
-      background-color: var(--color-success) !important;
+      color: var(--_c-fg) !important;
     }
   }
-  .\[\&_\.react-datepicker__day--range-end\]\:\!bg-surface {
-    & .react-datepicker  day--range-end {
-      background-color: var(--color-surface) !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\(--_c-bg\)\] {
     & .react-datepicker  day--range-start {
-      background-color: var(--color-accent) !important;
+      background-color: var(--_c-bg) !important;
     }
   }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!bg-error {
+  .\[\&_\.react-datepicker__day--range-start\]\:\!\[color\:var\(--_c-fg\)\] {
     & .react-datepicker  day--range-start {
-      background-color: var(--color-error) !important;
+      color: var(--_c-fg) !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 {
-      color: var(--color-background) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--range-start\]\:\!text-text-primary {
-    & .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\(--_c-bg\)\] {
     & .react-datepicker  day--selected {
-      background-color: var(--color-info) !important;
+      background-color: var(--_c-bg) !important;
     }
   }
-  .\[\&_\.react-datepicker__day--selected\]\:\!bg-primary {
+  .\[\&_\.react-datepicker__day--selected\]\:\!\[color\:var\(--_c-fg\)\] {
     & .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;
-    }
-  }
-  .\[\&_\.react-datepicker__day--selected\]\:\!bg-warning {
-    & .react-datepicker  day--selected {
-      background-color: var(--color-warning) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__day--selected\]\:\!text-background {
-    & .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 {
@@ -5608,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\(--_c-border\)\] {
     & .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(--color-warning) !important;
+      border-color: var(--_c-border) !important;
     }
   }
   .\[\&_\.react-datepicker__day--today\]\:\!font-semibold {
@@ -5776,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\(--_c-bg\)\] {
     & .react-datepicker  time-list-item--selected {
-      background-color: var(--color-warning) !important;
+      background-color: var(--_c-bg) !important;
     }
   }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!text-background {
+  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!\[color\:var\(--_c-fg\)\] {
     & .react-datepicker  time-list-item--selected {
-      color: var(--color-background) !important;
-    }
-  }
-  .\[\&_\.react-datepicker__time-list-item--selected\]\:\!text-text-primary {
-    & .react-datepicker  time-list-item--selected {
-      color: var(--color-text-primary) !important;
+      color: var(--_c-fg) !important;
     }
   }
   .\[\&_\.react-datepicker__week\]\:\!grid {
@@ -6108,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);
@@ -6141,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);
@@ -6167,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;
@@ -6617,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;
@@ -6846,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%;