@mdigital_ui/ui 0.2.2 → 0.2.4

package/dist/styles/global.css

@@ -20,9 +20,12 @@
     --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);
@@ -42,7 +45,7 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
-    --text-base: 0.9rem;
+    --text-base: 1rem;
     --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
@@ -54,13 +57,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-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-xs: 0.125rem;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -84,30 +98,34 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: ui-sans-serif, system-ui, sans-serif;
     --default-mono-font-family: ui-monospace, 'SF Mono', monospace;
-    --color-primary: oklch(0.6029 0.15 239.2065);
-    --color-primary-hover: oklch(0.5029 0.2 239.2065);
-    --color-primary-active: oklch(0.4529 0.2 239.2065);
+    --color-primary: oklch(60.29% 0.15 239.2065);
+    --color-primary-hover: oklch(50.29% 0.2 239.2065);
+    --color-primary-active: oklch(45.29% 0.2 239.2065);
     --color-primary-foreground: oklch(100% 0 0);
     --color-secondary: oklch(50% 0.05 240);
     --color-secondary-hover: oklch(45% 0.06 240);
     --color-secondary-active: oklch(40% 0.07 240);
     --color-secondary-foreground: oklch(100% 0 0);
-    --color-accent: oklch(0.8 0.1737 67);
-    --color-accent-hover: oklch(0.75 0.237 67);
-    --color-accent-active: oklch(0.7 0.1937 67);
+    --color-accent: oklch(80% 0.1737 67);
+    --color-accent-hover: oklch(75% 0.237 67);
+    --color-accent-active: oklch(70% 0.1937 67);
     --color-accent-foreground: oklch(15% 0 0);
-    --color-success: oklch(0.7 0.2 145);
-    --color-success-hover: oklch(0.65 0.22 145);
-    --color-success-active: oklch(0.5 0.24 145);
+    --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(65% 0.2 25);
     --color-error-hover: oklch(75% 0.2 25);
     --color-error-active: oklch(80% 0.2 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);
@@ -129,14 +147,28 @@
     --input-height-md: 2.25rem;
     --input-height-lg: 2.75rem;
     --input-padding-x-xs: 0.5rem;
+    --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: 5rem;
+    --textarea-padding-xs: 0.5rem;
     --textarea-padding-sm: 0.625rem;
     --textarea-padding-md: 0.6875rem;
     --textarea-padding-lg: 0.875rem;
     --select-height-xs: 1.75rem;
+    --select-height-sm: 2rem;
+    --select-height-md: 2.25rem;
     --select-height-lg: 2.75rem;
     --select-padding-x-xs: 0.5rem;
+    --select-padding-x-sm: 0.75rem;
+    --select-padding-x-md: 0.875rem;
     --select-padding-x-lg: 1.125rem;
     --checkbox-size-xs: 0.875rem;
     --checkbox-size-sm: 1rem;
@@ -151,7 +183,99 @@
     --switch-height-md: 1.25rem;
     --switch-height-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;
+    --modal-padding-lg: 2rem;
+    --modal-gap-xs: 0.75rem;
+    --modal-gap-sm: 0.75rem;
+    --modal-gap-md: 1rem;
+    --modal-gap-lg: 1.25rem;
+    --badge-font-size-xs: 0.625rem;
+    --badge-font-size-sm: 0.75rem;
+    --badge-font-size-md: 0.75rem;
+    --badge-font-size-lg: 0.875rem;
+    --badge-padding-x-xs: 0.25rem;
+    --badge-padding-x-sm: 0.375rem;
+    --badge-padding-x-md: 0.5rem;
+    --badge-padding-x-lg: 0.625rem;
+    --badge-padding-y-xs: 0;
+    --badge-padding-y-sm: 0.125rem;
+    --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;
+    --accordion-padding-x-lg: 1.5rem;
+    --accordion-padding-y-xs: 0.5rem;
+    --accordion-padding-y-sm: 0.625rem;
+    --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: 1rem;
+    --tabs-padding-x: 1rem;
+    --tabs-padding-y: 0.5rem;
+    --stepper-icon-size: 2rem;
+    --stepper-line-thickness: 2px;
+    --stepper-gap: 1rem;
     --spacing-0: 0px;
     --spacing-1: 0.25rem;
     --spacing-2: 0.5rem;
@@ -159,9 +283,12 @@
     --spacing-4: 1rem;
     --spacing-5: 1.25rem;
     --spacing-6: 1.5rem;
+    --spacing-8: 2rem;
+    --spacing-10: 2.5rem;
     --spacing-12: 3rem;
     --radius-none: 0px;
     --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);
@@ -491,6 +618,9 @@
   .my-2 {
     margin-block: 0.5rem;
   }
+  .my-4 {
+    margin-block: 1rem;
+  }
   .-mt-8 {
     margin-top: calc(2rem * -1);
   }
@@ -560,6 +690,9 @@
   .mb-6 {
     margin-bottom: 1.5rem;
   }
+  .mb-\[var\(--card-header-gap\)\] {
+    margin-bottom: var(--card-header-gap);
+  }
   .ml-0 {
     margin-left: 0px;
   }
@@ -761,6 +894,9 @@
   .h-\[var\(--checkbox-size-sm\)\] {
     height: var(--checkbox-size-sm);
   }
+  .h-\[var\(--checkbox-size-xs\)\] {
+    height: var(--checkbox-size-xs);
+  }
   .h-\[var\(--input-height-lg\)\] {
     height: var(--input-height-lg);
   }
@@ -773,6 +909,21 @@
   .h-\[var\(--input-height-xl\)\] {
     height: var(--input-height-xl);
   }
+  .h-\[var\(--input-height-xs\)\] {
+    height: var(--input-height-xs);
+  }
+  .h-\[var\(--select-height-lg\)\] {
+    height: var(--select-height-lg);
+  }
+  .h-\[var\(--select-height-md\)\] {
+    height: var(--select-height-md);
+  }
+  .h-\[var\(--select-height-sm\)\] {
+    height: var(--select-height-sm);
+  }
+  .h-\[var\(--select-height-xs\)\] {
+    height: var(--select-height-xs);
+  }
   .h-\[var\(--switch-height-lg\)\] {
     height: var(--switch-height-lg);
   }
@@ -782,6 +933,9 @@
   .h-\[var\(--switch-height-sm\)\] {
     height: var(--switch-height-sm);
   }
+  .h-\[var\(--switch-height-xs\)\] {
+    height: var(--switch-height-xs);
+  }
   .h-auto {
     height: auto;
   }
@@ -926,9 +1080,6 @@
   .w-6 {
     width: 1.5rem;
   }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
-  }
   .w-8 {
     width: 2rem;
   }
@@ -977,9 +1128,18 @@
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
+  .w-\[5\%\] {
+    width: 5%;
+  }
+  .w-\[50\%\] {
+    width: 50%;
+  }
   .w-\[70\%\] {
     width: 70%;
   }
+  .w-\[95\%\] {
+    width: 95%;
+  }
   .w-\[200px\] {
     width: 200px;
   }
@@ -1007,6 +1167,27 @@
   .w-\[var\(--checkbox-size-sm\)\] {
     width: var(--checkbox-size-sm);
   }
+  .w-\[var\(--checkbox-size-xs\)\] {
+    width: var(--checkbox-size-xs);
+  }
+  .w-\[var\(--divider-center-after-width\)\] {
+    width: var(--divider-center-after-width);
+  }
+  .w-\[var\(--divider-center-before-width\)\] {
+    width: var(--divider-center-before-width);
+  }
+  .w-\[var\(--divider-left-after-width\)\] {
+    width: var(--divider-left-after-width);
+  }
+  .w-\[var\(--divider-left-before-width\)\] {
+    width: var(--divider-left-before-width);
+  }
+  .w-\[var\(--divider-right-after-width\)\] {
+    width: var(--divider-right-after-width);
+  }
+  .w-\[var\(--divider-right-before-width\)\] {
+    width: var(--divider-right-before-width);
+  }
   .w-\[var\(--radix-popover-trigger-width\)\] {
     width: var(--radix-popover-trigger-width);
   }
@@ -1019,6 +1200,9 @@
   .w-\[var\(--switch-width-sm\)\] {
     width: var(--switch-width-sm);
   }
+  .w-\[var\(--switch-width-xs\)\] {
+    width: var(--switch-width-xs);
+  }
   .w-auto {
     width: auto;
   }
@@ -1028,6 +1212,9 @@
   .w-full {
     width: 100%;
   }
+  .w-px {
+    width: 1px;
+  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -1049,6 +1236,18 @@
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
+  .max-w-\[var\(--modal-max-width-lg\)\] {
+    max-width: var(--modal-max-width-lg);
+  }
+  .max-w-\[var\(--modal-max-width-md\)\] {
+    max-width: var(--modal-max-width-md);
+  }
+  .max-w-\[var\(--modal-max-width-sm\)\] {
+    max-width: var(--modal-max-width-sm);
+  }
+  .max-w-\[var\(--modal-max-width-xs\)\] {
+    max-width: var(--modal-max-width-xs);
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -1299,6 +1498,24 @@
   .gap-32 {
     gap: calc(var(--spacing) * 32);
   }
+  .gap-\[var\(--card-header-gap\)\] {
+    gap: var(--card-header-gap);
+  }
+  .gap-\[var\(--divider-gap\)\] {
+    gap: var(--divider-gap);
+  }
+  .gap-\[var\(--modal-gap-lg\)\] {
+    gap: var(--modal-gap-lg);
+  }
+  .gap-\[var\(--modal-gap-md\)\] {
+    gap: var(--modal-gap-md);
+  }
+  .gap-\[var\(--modal-gap-sm\)\] {
+    gap: var(--modal-gap-sm);
+  }
+  .gap-\[var\(--modal-gap-xs\)\] {
+    gap: var(--modal-gap-xs);
+  }
   .space-y-0\.5 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1386,6 +1603,9 @@
   .self-end {
     align-self: flex-end;
   }
+  .self-stretch {
+    align-self: stretch;
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1397,6 +1617,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
   .overflow-x-hidden {
     overflow-x: hidden;
   }
@@ -1412,9 +1635,6 @@
   .rounded-3xl {
     border-radius: 1rem;
   }
-  .rounded-\[var\(--radius-lg\)\] {
-    border-radius: var(--radius-lg);
-  }
   .rounded-full {
     border-radius: 9999px;
   }
@@ -1489,6 +1709,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
   .border-l-4 {
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
@@ -1501,10 +1725,18 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-dotted {
+    --tw-border-style: dotted;
+    border-style: dotted;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
   }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
   .\!border-error {
     border-color: oklch(65% 0.2 25) !important;
   }
@@ -1512,25 +1744,25 @@
     border-color: oklch(60% 0.19 255) !important;
   }
   .\!border-success {
-    border-color: oklch(0.7 0.2 145) !important;
+    border-color: oklch(70% 0.2 145) !important;
   }
   .\!border-warning {
     border-color: oklch(75% 0.15 85) !important;
   }
   .border-accent {
-    border-color: oklch(0.8 0.1737 67);
+    border-color: oklch(80% 0.1737 67);
   }
   .border-accent\/20 {
-    border-color: color-mix(in oklab, oklch(0.8 0.1737 67) 20%, transparent);
+    border-color: color-mix(in oklab, oklch(80% 0.1737 67) 20%, transparent);
   }
   .border-accent\/30 {
-    border-color: color-mix(in oklab, oklch(0.8 0.1737 67) 30%, transparent);
+    border-color: color-mix(in oklab, oklch(80% 0.1737 67) 30%, transparent);
   }
   .border-accent\/50 {
-    border-color: color-mix(in oklab, oklch(0.8 0.1737 67) 50%, transparent);
+    border-color: color-mix(in oklab, oklch(80% 0.1737 67) 50%, transparent);
   }
   .border-accent\/60 {
-    border-color: color-mix(in oklab, oklch(0.8 0.1737 67) 60%, transparent);
+    border-color: color-mix(in oklab, oklch(80% 0.1737 67) 60%, transparent);
   }
   .border-background {
     border-color: oklch(100% 0 0);
@@ -1587,19 +1819,19 @@
     border-color: color-mix(in oklab, oklch(60% 0.19 255) 60%, transparent);
   }
   .border-primary {
-    border-color: oklch(0.6029 0.15 239.2065);
+    border-color: oklch(60.29% 0.15 239.2065);
   }
   .border-primary\/20 {
-    border-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+    border-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
   }
   .border-primary\/30 {
-    border-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 30%, transparent);
+    border-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 30%, transparent);
   }
   .border-primary\/50 {
-    border-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 50%, transparent);
+    border-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 50%, transparent);
   }
   .border-primary\/60 {
-    border-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 60%, transparent);
+    border-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 60%, transparent);
   }
   .border-secondary {
     border-color: oklch(50% 0.05 240);
@@ -1617,19 +1849,19 @@
     border-color: color-mix(in oklab, oklch(50% 0.05 240) 60%, transparent);
   }
   .border-success {
-    border-color: oklch(0.7 0.2 145);
+    border-color: oklch(70% 0.2 145);
   }
   .border-success\/20 {
-    border-color: color-mix(in oklab, oklch(0.7 0.2 145) 20%, transparent);
+    border-color: color-mix(in oklab, oklch(70% 0.2 145) 20%, transparent);
   }
   .border-success\/30 {
-    border-color: color-mix(in oklab, oklch(0.7 0.2 145) 30%, transparent);
+    border-color: color-mix(in oklab, oklch(70% 0.2 145) 30%, transparent);
   }
   .border-success\/50 {
-    border-color: color-mix(in oklab, oklch(0.7 0.2 145) 50%, transparent);
+    border-color: color-mix(in oklab, oklch(70% 0.2 145) 50%, transparent);
   }
   .border-success\/60 {
-    border-color: color-mix(in oklab, oklch(0.7 0.2 145) 60%, transparent);
+    border-color: color-mix(in oklab, oklch(70% 0.2 145) 60%, transparent);
   }
   .border-surface {
     border-color: oklch(96% 0 0);
@@ -1662,7 +1894,7 @@
     border-top-color: transparent;
   }
   .border-l-accent {
-    border-left-color: oklch(0.8 0.1737 67);
+    border-left-color: oklch(80% 0.1737 67);
   }
   .border-l-border {
     border-left-color: oklch(93% 0 0);
@@ -1674,43 +1906,37 @@
     border-left-color: oklch(60% 0.19 255);
   }
   .border-l-primary {
-    border-left-color: oklch(0.6029 0.15 239.2065);
+    border-left-color: oklch(60.29% 0.15 239.2065);
   }
   .border-l-secondary {
     border-left-color: oklch(50% 0.05 240);
   }
   .border-l-success {
-    border-left-color: oklch(0.7 0.2 145);
+    border-left-color: oklch(70% 0.2 145);
   }
   .border-l-warning {
     border-left-color: oklch(75% 0.15 85);
   }
-  .bg-\[var\(--color-accent\)\] {
-    background-color: var(--color-accent);
-  }
-  .bg-\[var\(--color-primary\)\] {
-    background-color: var(--color-primary);
-  }
   .bg-accent {
-    background-color: oklch(0.8 0.1737 67);
+    background-color: oklch(80% 0.1737 67);
   }
   .bg-accent\/5 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 5%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 5%, transparent);
   }
   .bg-accent\/10 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 10%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 10%, transparent);
   }
   .bg-accent\/20 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 20%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 20%, transparent);
   }
   .bg-accent\/30 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 30%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 30%, transparent);
   }
   .bg-accent\/50 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 50%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 50%, transparent);
   }
   .bg-accent\/60 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 60%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 60%, transparent);
   }
   .bg-background {
     background-color: oklch(100% 0 0);
@@ -1803,28 +2029,28 @@
     background-color: color-mix(in oklab, oklch(60% 0.19 255) 60%, transparent);
   }
   .bg-primary {
-    background-color: oklch(0.6029 0.15 239.2065);
+    background-color: oklch(60.29% 0.15 239.2065);
   }
   .bg-primary-hover {
-    background-color: oklch(0.5029 0.2 239.2065);
+    background-color: oklch(50.29% 0.2 239.2065);
   }
   .bg-primary\/5 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 5%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 5%, transparent);
   }
   .bg-primary\/10 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 10%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 10%, transparent);
   }
   .bg-primary\/20 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
   }
   .bg-primary\/30 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 30%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 30%, transparent);
   }
   .bg-primary\/50 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 50%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 50%, transparent);
   }
   .bg-primary\/60 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 60%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 60%, transparent);
   }
   .bg-red-600 {
     background-color: var(--color-red-600);
@@ -1851,25 +2077,25 @@
     background-color: color-mix(in oklab, oklch(50% 0.05 240) 60%, transparent);
   }
   .bg-success {
-    background-color: oklch(0.7 0.2 145);
+    background-color: oklch(70% 0.2 145);
   }
   .bg-success\/5 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 5%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 5%, transparent);
   }
   .bg-success\/10 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 10%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 10%, transparent);
   }
   .bg-success\/20 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 20%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 20%, transparent);
   }
   .bg-success\/30 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 30%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 30%, transparent);
   }
   .bg-success\/50 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 50%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 50%, transparent);
   }
   .bg-success\/60 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 60%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 60%, transparent);
   }
   .bg-surface {
     background-color: oklch(96% 0 0);
@@ -1943,11 +2169,11 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .from-primary {
-    --tw-gradient-from: oklch(0.6029 0.15 239.2065);
+    --tw-gradient-from: oklch(60.29% 0.15 239.2065);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .from-primary\/20 {
-    --tw-gradient-from: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+    --tw-gradient-from: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .via-gray-100 {
@@ -1956,7 +2182,7 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
   .to-accent\/20 {
-    --tw-gradient-to: color-mix(in oklab, oklch(0.8 0.1737 67) 20%, transparent);
+    --tw-gradient-to: color-mix(in oklab, oklch(80% 0.1737 67) 20%, transparent);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .to-gray-200 {
@@ -1964,7 +2190,7 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .to-primary\/60 {
-    --tw-gradient-to: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 60%, transparent);
+    --tw-gradient-to: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 60%, transparent);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .to-transparent {
@@ -1981,16 +2207,16 @@
     fill: transparent;
   }
   .stroke-accent {
-    stroke: oklch(0.8 0.1737 67);
+    stroke: oklch(80% 0.1737 67);
   }
   .stroke-accent\/10 {
-    stroke: color-mix(in oklab, oklch(0.8 0.1737 67) 10%, transparent);
+    stroke: color-mix(in oklab, oklch(80% 0.1737 67) 10%, transparent);
   }
   .stroke-accent\/20 {
-    stroke: color-mix(in oklab, oklch(0.8 0.1737 67) 20%, transparent);
+    stroke: color-mix(in oklab, oklch(80% 0.1737 67) 20%, transparent);
   }
   .stroke-accent\/60 {
-    stroke: color-mix(in oklab, oklch(0.8 0.1737 67) 60%, transparent);
+    stroke: color-mix(in oklab, oklch(80% 0.1737 67) 60%, transparent);
   }
   .stroke-border {
     stroke: oklch(93% 0 0);
@@ -2023,16 +2249,16 @@
     stroke: color-mix(in oklab, oklch(60% 0.19 255) 60%, transparent);
   }
   .stroke-primary {
-    stroke: oklch(0.6029 0.15 239.2065);
+    stroke: oklch(60.29% 0.15 239.2065);
   }
   .stroke-primary\/10 {
-    stroke: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 10%, transparent);
+    stroke: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 10%, transparent);
   }
   .stroke-primary\/20 {
-    stroke: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+    stroke: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
   }
   .stroke-primary\/60 {
-    stroke: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 60%, transparent);
+    stroke: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 60%, transparent);
   }
   .stroke-secondary {
     stroke: oklch(50% 0.05 240);
@@ -2047,16 +2273,16 @@
     stroke: color-mix(in oklab, oklch(50% 0.05 240) 60%, transparent);
   }
   .stroke-success {
-    stroke: oklch(0.7 0.2 145);
+    stroke: oklch(70% 0.2 145);
   }
   .stroke-success\/10 {
-    stroke: color-mix(in oklab, oklch(0.7 0.2 145) 10%, transparent);
+    stroke: color-mix(in oklab, oklch(70% 0.2 145) 10%, transparent);
   }
   .stroke-success\/20 {
-    stroke: color-mix(in oklab, oklch(0.7 0.2 145) 20%, transparent);
+    stroke: color-mix(in oklab, oklch(70% 0.2 145) 20%, transparent);
   }
   .stroke-success\/60 {
-    stroke: color-mix(in oklab, oklch(0.7 0.2 145) 60%, transparent);
+    stroke: color-mix(in oklab, oklch(70% 0.2 145) 60%, transparent);
   }
   .stroke-surface {
     stroke: oklch(96% 0 0);
@@ -2118,6 +2344,27 @@
   .p-8 {
     padding: 2rem;
   }
+  .p-\[var\(--card-content-padding\)\] {
+    padding: var(--card-content-padding);
+  }
+  .p-\[var\(--card-footer-padding\)\] {
+    padding: var(--card-footer-padding);
+  }
+  .p-\[var\(--card-padding\)\] {
+    padding: var(--card-padding);
+  }
+  .p-\[var\(--modal-padding-lg\)\] {
+    padding: var(--modal-padding-lg);
+  }
+  .p-\[var\(--modal-padding-md\)\] {
+    padding: var(--modal-padding-md);
+  }
+  .p-\[var\(--modal-padding-sm\)\] {
+    padding: var(--modal-padding-sm);
+  }
+  .p-\[var\(--modal-padding-xs\)\] {
+    padding: var(--modal-padding-xs);
+  }
   .p-\[var\(--textarea-padding-lg\)\] {
     padding: var(--textarea-padding-lg);
   }
@@ -2163,6 +2410,30 @@
   .px-10 {
     padding-inline: 2.5rem;
   }
+  .px-\[var\(--accordion-padding-x-lg\)\] {
+    padding-inline: var(--accordion-padding-x-lg);
+  }
+  .px-\[var\(--accordion-padding-x-md\)\] {
+    padding-inline: var(--accordion-padding-x-md);
+  }
+  .px-\[var\(--accordion-padding-x-sm\)\] {
+    padding-inline: var(--accordion-padding-x-sm);
+  }
+  .px-\[var\(--accordion-padding-x-xs\)\] {
+    padding-inline: var(--accordion-padding-x-xs);
+  }
+  .px-\[var\(--badge-padding-x-lg\)\] {
+    padding-inline: var(--badge-padding-x-lg);
+  }
+  .px-\[var\(--badge-padding-x-md\)\] {
+    padding-inline: var(--badge-padding-x-md);
+  }
+  .px-\[var\(--badge-padding-x-sm\)\] {
+    padding-inline: var(--badge-padding-x-sm);
+  }
+  .px-\[var\(--badge-padding-x-xs\)\] {
+    padding-inline: var(--badge-padding-x-xs);
+  }
   .px-\[var\(--button-padding-x-lg\)\] {
     padding-inline: var(--button-padding-x-lg);
   }
@@ -2175,6 +2446,30 @@
   .px-\[var\(--button-padding-x-xs\)\] {
     padding-inline: var(--button-padding-x-xs);
   }
+  .px-\[var\(--input-padding-x-lg\)\] {
+    padding-inline: var(--input-padding-x-lg);
+  }
+  .px-\[var\(--input-padding-x-md\)\] {
+    padding-inline: var(--input-padding-x-md);
+  }
+  .px-\[var\(--input-padding-x-sm\)\] {
+    padding-inline: var(--input-padding-x-sm);
+  }
+  .px-\[var\(--input-padding-x-xs\)\] {
+    padding-inline: var(--input-padding-x-xs);
+  }
+  .px-\[var\(--select-padding-x-lg\)\] {
+    padding-inline: var(--select-padding-x-lg);
+  }
+  .px-\[var\(--select-padding-x-md\)\] {
+    padding-inline: var(--select-padding-x-md);
+  }
+  .px-\[var\(--select-padding-x-sm\)\] {
+    padding-inline: var(--select-padding-x-sm);
+  }
+  .px-\[var\(--select-padding-x-xs\)\] {
+    padding-inline: var(--select-padding-x-xs);
+  }
   .py-0 {
     padding-block: 0px;
   }
@@ -2211,6 +2506,30 @@
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
+  .py-\[var\(--accordion-padding-y-lg\)\] {
+    padding-block: var(--accordion-padding-y-lg);
+  }
+  .py-\[var\(--accordion-padding-y-md\)\] {
+    padding-block: var(--accordion-padding-y-md);
+  }
+  .py-\[var\(--accordion-padding-y-sm\)\] {
+    padding-block: var(--accordion-padding-y-sm);
+  }
+  .py-\[var\(--accordion-padding-y-xs\)\] {
+    padding-block: var(--accordion-padding-y-xs);
+  }
+  .py-\[var\(--badge-padding-y-lg\)\] {
+    padding-block: var(--badge-padding-y-lg);
+  }
+  .py-\[var\(--badge-padding-y-md\)\] {
+    padding-block: var(--badge-padding-y-md);
+  }
+  .py-\[var\(--badge-padding-y-sm\)\] {
+    padding-block: var(--badge-padding-y-sm);
+  }
+  .py-\[var\(--badge-padding-y-xs\)\] {
+    padding-block: var(--badge-padding-y-xs);
+  }
   .pt-0 {
     padding-top: 0px;
   }
@@ -2256,15 +2575,24 @@
   .pr-24 {
     padding-right: calc(var(--spacing) * 24);
   }
+  .pr-\[calc\(var\(--select-padding-x-lg\)\*2\)\] {
+    padding-right: calc(var(--select-padding-x-lg) * 2);
+  }
+  .pr-\[calc\(var\(--select-padding-x-md\)\*2\)\] {
+    padding-right: calc(var(--select-padding-x-md) * 2);
+  }
+  .pr-\[calc\(var\(--select-padding-x-sm\)\*2\)\] {
+    padding-right: calc(var(--select-padding-x-sm) * 2);
+  }
+  .pr-\[calc\(var\(--select-padding-x-xs\)\*2\)\] {
+    padding-right: calc(var(--select-padding-x-xs) * 2);
+  }
   .pb-0 {
     padding-bottom: 0px;
   }
   .pb-2 {
     padding-bottom: 0.5rem;
   }
-  .pb-2\.5 {
-    padding-bottom: calc(var(--spacing) * 2.5);
-  }
   .pb-3 {
     padding-bottom: 0.75rem;
   }
@@ -2277,8 +2605,20 @@
   .pb-8 {
     padding-bottom: 2rem;
   }
-  .pl-1 {
-    padding-left: 0.25rem;
+  .pb-\[var\(--accordion-padding-y-lg\)\] {
+    padding-bottom: var(--accordion-padding-y-lg);
+  }
+  .pb-\[var\(--accordion-padding-y-md\)\] {
+    padding-bottom: var(--accordion-padding-y-md);
+  }
+  .pb-\[var\(--accordion-padding-y-sm\)\] {
+    padding-bottom: var(--accordion-padding-y-sm);
+  }
+  .pb-\[var\(--accordion-padding-y-xs\)\] {
+    padding-bottom: var(--accordion-padding-y-xs);
+  }
+  .pl-3 {
+    padding-left: 0.75rem;
   }
   .pl-8 {
     padding-left: 2rem;
@@ -2304,6 +2644,18 @@
   .pl-36 {
     padding-left: calc(var(--spacing) * 36);
   }
+  .pl-\[var\(--select-padding-x-lg\)\] {
+    padding-left: var(--select-padding-x-lg);
+  }
+  .pl-\[var\(--select-padding-x-md\)\] {
+    padding-left: var(--select-padding-x-md);
+  }
+  .pl-\[var\(--select-padding-x-sm\)\] {
+    padding-left: var(--select-padding-x-sm);
+  }
+  .pl-\[var\(--select-padding-x-xs\)\] {
+    padding-left: var(--select-padding-x-xs);
+  }
   .text-center {
     text-align: center;
   }
@@ -2320,19 +2672,19 @@
     font-family: ui-sans-serif, system-ui, sans-serif;
   }
   .text-2xl {
-    font-size: var(--text-2xl);
+    font-size: 1.5rem;
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
   .text-3xl {
-    font-size: var(--text-3xl);
+    font-size: 1.875rem;
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
   .text-4xl {
-    font-size: var(--text-4xl);
+    font-size: 2.25rem;
     line-height: var(--tw-leading, var(--text-4xl--line-height));
   }
   .text-base {
-    font-size: 0.9rem;
+    font-size: 1rem;
     line-height: var(--tw-leading, var(--text-base--line-height));
   }
   .text-lg {
@@ -2344,7 +2696,7 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
   .text-xl {
-    font-size: var(--text-xl);
+    font-size: 1.25rem;
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
   .text-xs {
@@ -2361,9 +2713,9 @@
     --tw-leading: 1;
     line-height: 1;
   }
-  .font-\[var\(--font-weight-semibold\)\] {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
+  .font-\[var\(--card-title-weight\)\] {
+    --tw-font-weight: var(--card-title-weight);
+    font-weight: var(--card-title-weight);
   }
   .font-bold {
     --tw-font-weight: 700;
@@ -2378,16 +2730,16 @@
     font-weight: 600;
   }
   .tracking-tight {
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
+    --tw-tracking: -0.025em;
+    letter-spacing: -0.025em;
   }
   .tracking-wider {
-    --tw-tracking: var(--tracking-wider);
-    letter-spacing: var(--tracking-wider);
+    --tw-tracking: 0.05em;
+    letter-spacing: 0.05em;
   }
   .tracking-widest {
-    --tw-tracking: var(--tracking-widest);
-    letter-spacing: var(--tracking-widest);
+    --tw-tracking: 0.1em;
+    letter-spacing: 0.1em;
   }
   .text-ellipsis {
     text-overflow: ellipsis;
@@ -2395,11 +2747,29 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-\[var\(--text-lg\)\] {
-    color: var(--text-lg);
+  .text-\[var\(--badge-font-size-lg\)\] {
+    color: var(--badge-font-size-lg);
+  }
+  .text-\[var\(--badge-font-size-md\)\] {
+    color: var(--badge-font-size-md);
+  }
+  .text-\[var\(--badge-font-size-sm\)\] {
+    color: var(--badge-font-size-sm);
+  }
+  .text-\[var\(--badge-font-size-xs\)\] {
+    color: var(--badge-font-size-xs);
+  }
+  .text-\[var\(--card-description-size\)\] {
+    color: var(--card-description-size);
+  }
+  .text-\[var\(--card-title-size\)\] {
+    color: var(--card-title-size);
+  }
+  .text-\[var\(--text-base\)\] {
+    color: var(--text-base);
   }
   .text-accent {
-    color: oklch(0.8 0.1737 67);
+    color: oklch(80% 0.1737 67);
   }
   .text-accent-foreground {
     color: oklch(15% 0 0);
@@ -2462,7 +2832,7 @@
     color: var(--color-pink-500);
   }
   .text-primary {
-    color: oklch(0.6029 0.15 239.2065);
+    color: oklch(60.29% 0.15 239.2065);
   }
   .text-primary-foreground {
     color: oklch(100% 0 0);
@@ -2489,7 +2859,7 @@
     color: color-mix(in oklab, oklch(100% 0 0) 50%, transparent);
   }
   .text-success {
-    color: oklch(0.7 0.2 145);
+    color: oklch(70% 0.2 145);
   }
   .text-success-foreground {
     color: oklch(100% 0 0);
@@ -2567,10 +2937,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[var\(--shadow-md\)\] {
-    --tw-shadow: var(--shadow-md);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2716,7 +3082,7 @@
   }
   .peer-checked\:bg-accent {
     &:is(:where(.peer):checked ~ *) {
-      background-color: oklch(0.8 0.1737 67);
+      background-color: oklch(80% 0.1737 67);
     }
   }
   .peer-checked\:bg-error {
@@ -2731,7 +3097,7 @@
   }
   .peer-checked\:bg-primary {
     &:is(:where(.peer):checked ~ *) {
-      background-color: oklch(0.6029 0.15 239.2065);
+      background-color: oklch(60.29% 0.15 239.2065);
     }
   }
   .peer-checked\:bg-secondary {
@@ -2741,7 +3107,7 @@
   }
   .peer-checked\:bg-success {
     &:is(:where(.peer):checked ~ *) {
-      background-color: oklch(0.7 0.2 145);
+      background-color: oklch(70% 0.2 145);
     }
   }
   .peer-checked\:bg-warning {
@@ -2784,7 +3150,7 @@
   }
   .checked\:border-accent {
     &:checked {
-      border-color: oklch(0.8 0.1737 67);
+      border-color: oklch(80% 0.1737 67);
     }
   }
   .checked\:border-error {
@@ -2799,7 +3165,7 @@
   }
   .checked\:border-primary {
     &:checked {
-      border-color: oklch(0.6029 0.15 239.2065);
+      border-color: oklch(60.29% 0.15 239.2065);
     }
   }
   .checked\:border-secondary {
@@ -2809,7 +3175,7 @@
   }
   .checked\:border-success {
     &:checked {
-      border-color: oklch(0.7 0.2 145);
+      border-color: oklch(70% 0.2 145);
     }
   }
   .checked\:border-warning {
@@ -2892,7 +3258,7 @@
   .hover\:border-accent {
     &:hover {
       @media (hover: hover) {
-        border-color: oklch(0.8 0.1737 67);
+        border-color: oklch(80% 0.1737 67);
       }
     }
   }
@@ -2920,14 +3286,14 @@
   .hover\:border-primary {
     &:hover {
       @media (hover: hover) {
-        border-color: oklch(0.6029 0.15 239.2065);
+        border-color: oklch(60.29% 0.15 239.2065);
       }
     }
   }
   .hover\:border-primary\/50 {
     &:hover {
       @media (hover: hover) {
-        border-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 50%, transparent);
+        border-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 50%, transparent);
       }
     }
   }
@@ -2941,7 +3307,7 @@
   .hover\:border-success {
     &:hover {
       @media (hover: hover) {
-        border-color: oklch(0.7 0.2 145);
+        border-color: oklch(70% 0.2 145);
       }
     }
   }
@@ -2959,38 +3325,31 @@
       }
     }
   }
-  .hover\:bg-\[var\(--color-accent-hover\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-accent-hover);
-      }
-    }
-  }
   .hover\:bg-accent\/5 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 5%, transparent);
+        background-color: color-mix(in oklab, oklch(80% 0.1737 67) 5%, transparent);
       }
     }
   }
   .hover\:bg-accent\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 10%, transparent);
+        background-color: color-mix(in oklab, oklch(80% 0.1737 67) 10%, transparent);
       }
     }
   }
   .hover\:bg-accent\/20 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 20%, transparent);
+        background-color: color-mix(in oklab, oklch(80% 0.1737 67) 20%, transparent);
       }
     }
   }
   .hover\:bg-accent\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 90%, transparent);
+        background-color: color-mix(in oklab, oklch(80% 0.1737 67) 90%, transparent);
       }
     }
   }
@@ -3088,35 +3447,35 @@
   .hover\:bg-primary {
     &:hover {
       @media (hover: hover) {
-        background-color: oklch(0.6029 0.15 239.2065);
+        background-color: oklch(60.29% 0.15 239.2065);
       }
     }
   }
   .hover\:bg-primary\/5 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 5%, transparent);
+        background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 5%, transparent);
       }
     }
   }
   .hover\:bg-primary\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 10%, transparent);
+        background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 10%, transparent);
       }
     }
   }
   .hover\:bg-primary\/20 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+        background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
       }
     }
   }
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 90%, transparent);
+        background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 90%, transparent);
       }
     }
   }
@@ -3151,28 +3510,28 @@
   .hover\:bg-success\/5 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.7 0.2 145) 5%, transparent);
+        background-color: color-mix(in oklab, oklch(70% 0.2 145) 5%, transparent);
       }
     }
   }
   .hover\:bg-success\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.7 0.2 145) 10%, transparent);
+        background-color: color-mix(in oklab, oklch(70% 0.2 145) 10%, transparent);
       }
     }
   }
   .hover\:bg-success\/20 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.7 0.2 145) 20%, transparent);
+        background-color: color-mix(in oklab, oklch(70% 0.2 145) 20%, transparent);
       }
     }
   }
   .hover\:bg-success\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.7 0.2 145) 90%, transparent);
+        background-color: color-mix(in oklab, oklch(70% 0.2 145) 90%, transparent);
       }
     }
   }
@@ -3242,7 +3601,7 @@
   .hover\:text-accent {
     &:hover {
       @media (hover: hover) {
-        color: oklch(0.8 0.1737 67);
+        color: oklch(80% 0.1737 67);
       }
     }
   }
@@ -3270,7 +3629,7 @@
   .hover\:text-primary {
     &:hover {
       @media (hover: hover) {
-        color: oklch(0.6029 0.15 239.2065);
+        color: oklch(60.29% 0.15 239.2065);
       }
     }
   }
@@ -3284,7 +3643,7 @@
   .hover\:text-success {
     &:hover {
       @media (hover: hover) {
-        color: oklch(0.7 0.2 145);
+        color: oklch(70% 0.2 145);
       }
     }
   }
@@ -3380,7 +3739,7 @@
   }
   .focus\:\!border-success {
     &:focus {
-      border-color: oklch(0.7 0.2 145) !important;
+      border-color: oklch(70% 0.2 145) !important;
     }
   }
   .focus\:\!border-warning {
@@ -3400,12 +3759,12 @@
   }
   .focus\:border-primary {
     &:focus {
-      border-color: oklch(0.6029 0.15 239.2065);
+      border-color: oklch(60.29% 0.15 239.2065);
     }
   }
   .focus\:border-success {
     &:focus {
-      border-color: oklch(0.7 0.2 145);
+      border-color: oklch(70% 0.2 145);
     }
   }
   .focus\:border-warning {
@@ -3421,12 +3780,12 @@
   }
   .focus\:ring-primary {
     &:focus {
-      --tw-ring-color: oklch(0.6029 0.15 239.2065);
+      --tw-ring-color: oklch(60.29% 0.15 239.2065);
     }
   }
   .focus\:ring-primary\/20 {
     &:focus {
-      --tw-ring-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+      --tw-ring-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
     }
   }
   .focus\:ring-offset-2 {
@@ -3518,12 +3877,32 @@
   }
   .data-\[selected\=true\]\:bg-primary\/10 {
     &[data-selected="true"] {
-      background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 10%, transparent);
+      background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 10%, transparent);
     }
   }
   .data-\[selected\=true\]\:text-primary {
     &[data-selected="true"] {
-      color: oklch(0.6029 0.15 239.2065);
+      color: oklch(60.29% 0.15 239.2065);
+    }
+  }
+  .sm\:max-w-\[var\(--modal-max-width-lg\)\] {
+    @media (width >= 40rem) {
+      max-width: var(--modal-max-width-lg);
+    }
+  }
+  .sm\:max-w-\[var\(--modal-max-width-md\)\] {
+    @media (width >= 40rem) {
+      max-width: var(--modal-max-width-md);
+    }
+  }
+  .sm\:max-w-\[var\(--modal-max-width-sm\)\] {
+    @media (width >= 40rem) {
+      max-width: var(--modal-max-width-sm);
+    }
+  }
+  .sm\:max-w-\[var\(--modal-max-width-xs\)\] {
+    @media (width >= 40rem) {
+      max-width: var(--modal-max-width-xs);
     }
   }
   .sm\:max-w-lg {
@@ -3647,22 +4026,22 @@
   }
   .\[\&_\.react-datepicker__day--in-range\]\:\!bg-primary\/10 {
     & .react-datepicker  day--in-range {
-      background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 10%, transparent) !important;
+      background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 10%, transparent) !important;
     }
   }
   .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-primary\/30 {
     & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 30%, transparent) !important;
+      background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 30%, transparent) !important;
     }
   }
   .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-primary\/50 {
     & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 50%, transparent) !important;
+      background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 50%, transparent) !important;
     }
   }
   .\[\&_\.react-datepicker__day--selected\]\:\!bg-primary {
     & .react-datepicker  day--selected {
-      background-color: oklch(0.6029 0.15 239.2065) !important;
+      background-color: oklch(60.29% 0.15 239.2065) !important;
     }
   }
   .\[\&_\.react-datepicker__day-name\]\:\!text-text-muted {
@@ -3722,7 +4101,7 @@
   }
   .\[\&_\.react-datepicker__time-list-item--selected\]\:\!bg-primary {
     & .react-datepicker  time-list-item--selected {
-      background-color: oklch(0.6029 0.15 239.2065) !important;
+      background-color: oklch(60.29% 0.15 239.2065) !important;
     }
   }
   .\[\&_\.react-datepicker__time-list-item--selected\]\:\!text-white {
@@ -3897,45 +4276,49 @@
     }
   }
 }
+:root.dark,
 .dark {
-  --color-primary: oklch(65% 0.25 255);
-  --color-primary-hover: oklch(70% 0.27 255);
-  --color-primary-active: oklch(75% 0.29 255);
-  --color-secondary: oklch(60% 0.15 30);
-  --color-secondary-hover: oklch(65% 0.17 30);
-  --color-secondary-active: oklch(70% 0.19 30);
-  --color-accent: oklch(70% 0.22 310);
-  --color-accent-hover: oklch(75% 0.24 310);
-  --color-accent-active: oklch(80% 0.26 310);
-  --color-success: oklch(65% 0.2 145);
-  --color-success-hover: oklch(70% 0.22 145);
-  --color-success-active: oklch(75% 0.24 145);
-  --color-error: oklch(65% 0.2 25);
-  --color-error-hover: oklch(75% 0.2 25);
-  --color-error-active: oklch(80% 0.2 25);
-  --color-warning: oklch(75% 0.15 85);
-  --color-warning-hover: oklch(80% 0.17 85);
-  --color-warning-active: oklch(85% 0.19 85);
-  --color-info: oklch(65% 0.19 255);
-  --color-info-hover: oklch(70% 0.21 255);
-  --color-info-active: oklch(75% 0.23 255);
-  --color-background: oklch(15% 0 0);
-  --color-background-secondary: oklch(18% 0 0);
-  --color-surface: oklch(20% 0 0);
-  --color-border: oklch(30% 0 0);
-  --color-border-primary: oklch(35% 0 0);
-  --color-text-primary: oklch(95% 0 0);
-  --color-text-secondary: oklch(70% 0 0);
-  --color-text-muted: oklch(55% 0 0);
-  --color-input-border: oklch(30% 0 0);
-  --color-input-border-focus: oklch(65% 0.25 255);
-  --color-input-border-error: oklch(65% 0.25 25);
-  --color-input-bg: oklch(18% 0 0);
-  --color-input-text: oklch(95% 0 0);
-  --color-input-placeholder: oklch(55% 0 0);
+  --color-primary: oklch(70% 0.19 255);
+  --color-primary-hover: oklch(75% 0.21 255);
+  --color-primary-active: oklch(78% 0.23 255);
+  --color-secondary: oklch(68% 0.12 260);
+  --color-secondary-hover: oklch(72% 0.14 260);
+  --color-secondary-active: oklch(76% 0.16 260);
+  --color-accent: oklch(75% 0.18 140);
+  --color-accent-hover: oklch(78% 0.2 140);
+  --color-accent-active: oklch(82% 0.22 140);
+  --color-success: oklch(72% 0.18 150);
+  --color-success-hover: oklch(76% 0.2 150);
+  --color-success-active: oklch(80% 0.22 150);
+  --color-error: oklch(70% 0.22 25);
+  --color-error-hover: oklch(74% 0.24 25);
+  --color-error-active: oklch(78% 0.26 25);
+  --color-warning: oklch(78% 0.16 75);
+  --color-warning-hover: oklch(82% 0.18 75);
+  --color-warning-active: oklch(85% 0.2 75);
+  --color-info: oklch(72% 0.16 230);
+  --color-info-hover: oklch(76% 0.18 230);
+  --color-info-active: oklch(80% 0.2 230);
+  --color-background: oklch(17% 0.01 240);
+  --color-background-secondary: oklch(20% 0.01 240);
+  --color-surface: oklch(23% 0.01 240);
+  --color-border: oklch(32% 0.01 240);
+  --color-border-primary: oklch(42% 0.02 240);
+  --color-text-primary: oklch(96% 0 0);
+  --color-text-secondary: oklch(75% 0 0);
+  --color-text-muted: oklch(60% 0 0);
+  --color-input-border: oklch(32% 0.01 240);
+  --color-input-border-focus: oklch(70% 0.19 255);
+  --color-input-border-error: oklch(70% 0.22 25);
+  --color-input-bg: oklch(20% 0.01 240);
+  --color-input-text: oklch(96% 0 0);
+  --color-input-placeholder: oklch(60% 0 0);
+  --overlay-stripe: oklch(0% 0 0 / 0.2);
 }
 html,
 body {
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
   overscroll-behavior: none;
 }
 @layer components {
@@ -3992,7 +4375,7 @@ body {
 .react-datepicker-year-header {
   color: var(--color-gray-900) !important;
   font-weight: var(--font-weight-semibold) !important;
-  font-size: var(--font-size-base) !important;
+  font-size: var(--text-base) !important;
 }
 .react-datepicker__day-name,
 .react-datepicker__day,