@wellingtonhlc/shared-ui 0.27.1 → 0.29.0

package/dist/styles.css

@@ -595,13 +595,7 @@ h2.react-datepicker__current-month {
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
-    --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-950: oklch(25.8% 0.092 26.042);
-    --color-amber-600: oklch(66.6% 0.179 58.318);
-    --color-amber-700: oklch(55.5% 0.163 48.998);
-    --color-slate-900: oklch(20.8% 0.042 265.755);
-    --color-black: #000;
-    --color-white: #fff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
@@ -631,10 +625,14 @@ h2.react-datepicker__current-month {
     --leading-tight: 1.25;
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
+    --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
+    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.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;
@@ -933,35 +931,35 @@ h2.react-datepicker__current-month {
   .left-full {
     left: 100%;
   }
-  .z-40 {
-    z-index: 40;
+  .z-\[var\(--z-critical-dialog\)\] {
+    z-index: var(--z-critical-dialog);
   }
-  .z-50 {
-    z-index: 50;
+  .z-\[var\(--z-flyout\)\] {
+    z-index: var(--z-flyout);
   }
-  .z-\[2\] {
-    z-index: 2;
+  .z-\[var\(--z-loading-overlay\)\] {
+    z-index: var(--z-loading-overlay);
   }
-  .z-\[29\] {
-    z-index: 29;
+  .z-\[var\(--z-modal\)\] {
+    z-index: var(--z-modal);
   }
-  .z-\[70\] {
-    z-index: 70;
+  .z-\[var\(--z-modal-overlay\)\] {
+    z-index: var(--z-modal-overlay);
   }
-  .z-\[100\] {
-    z-index: 100;
+  .z-\[var\(--z-navigation\)\] {
+    z-index: var(--z-navigation);
   }
-  .z-\[110\] {
-    z-index: 110;
+  .z-\[var\(--z-navigation-overlay\)\] {
+    z-index: var(--z-navigation-overlay);
   }
-  .z-\[200\] {
-    z-index: 200;
+  .z-\[var\(--z-popover\)\] {
+    z-index: var(--z-popover);
   }
-  .z-\[999\] {
-    z-index: 999;
+  .z-\[var\(--z-table-header\)\] {
+    z-index: var(--z-table-header);
   }
-  .z-\[10000\] {
-    z-index: 10000;
+  .z-\[var\(--z-tooltip\)\] {
+    z-index: var(--z-tooltip);
   }
   .order-3 {
     order: 3;
@@ -1029,9 +1027,6 @@ h2.react-datepicker__current-month {
   .mr-auto {
     margin-right: auto;
   }
-  .-mb-px {
-    margin-bottom: -1px;
-  }
   .mb-0 {
     margin-bottom: calc(var(--spacing) * 0);
   }
@@ -1044,6 +1039,9 @@ h2.react-datepicker__current-month {
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -1209,6 +1207,9 @@ h2.react-datepicker__current-month {
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
@@ -1428,6 +1429,9 @@ h2.react-datepicker__current-month {
   .w-\[44rem\] {
     width: 44rem;
   }
+  .w-\[48rem\] {
+    width: 48rem;
+  }
   .w-\[52rem\] {
     width: 52rem;
   }
@@ -1650,12 +1654,15 @@ h2.react-datepicker__current-month {
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
   .grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
-  .grid-cols-\[8rem_minmax\(0\,1fr\)\] {
-    grid-template-columns: 8rem minmax(0,1fr);
-  }
   .grid-cols-\[minmax\(0\,1fr\)_auto_auto_auto\] {
     grid-template-columns: minmax(0,1fr) auto auto auto;
   }
@@ -1846,6 +1853,9 @@ h2.react-datepicker__current-month {
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
@@ -1889,36 +1899,6 @@ h2.react-datepicker__current-month {
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-\[color-mix\(in_srgb\,\#34d399_45\%\,var\(--app-border\)\)\] {
-    border-color: #34d399;
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in srgb,#34d399 45%,var(--app-border));
-    }
-  }
-  .border-\[color-mix\(in_srgb\,\#60a5fa_45\%\,var\(--app-border\)\)\] {
-    border-color: #60a5fa;
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in srgb,#60a5fa 45%,var(--app-border));
-    }
-  }
-  .border-\[color-mix\(in_srgb\,\#f87171_52\%\,var\(--app-border\)\)\] {
-    border-color: #f87171;
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in srgb,#f87171 52%,var(--app-border));
-    }
-  }
-  .border-\[color-mix\(in_srgb\,\#fbbf24_52\%\,var\(--app-border\)\)\] {
-    border-color: #fbbf24;
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in srgb,#fbbf24 52%,var(--app-border));
-    }
-  }
-  .border-\[color-mix\(in_srgb\,var\(--brand\)_34\%\,var\(--app-border\)\)\] {
-    border-color: var(--brand);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in srgb,var(--brand) 34%,var(--app-border));
-    }
-  }
   .border-\[color-mix\(in_srgb\,var\(--brand\)_40\%\,transparent\)\] {
     border-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1931,10 +1911,10 @@ h2.react-datepicker__current-month {
       border-color: color-mix(in srgb,var(--brand) 44%,var(--app-border));
     }
   }
-  .border-\[color-mix\(in_srgb\,var\(--brand\)_64\%\,\#fff\)\] {
+  .border-\[color-mix\(in_srgb\,var\(--brand\)_64\%\,var\(--on-solid\)\)\] {
     border-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in srgb,var(--brand) 64%,#fff);
+      border-color: color-mix(in srgb,var(--brand) 64%,var(--on-solid));
     }
   }
   .border-\[color-mix\(in_srgb\,var\(--foreground-muted\)_24\%\,transparent\)\] {
@@ -1949,20 +1929,17 @@ h2.react-datepicker__current-month {
       border-color: color-mix(in srgb,var(--foreground-muted) 42%,var(--app-border));
     }
   }
-  .border-\[var\(--status-danger-border\,\#f87171\)\] {
-    border-color: var(--status-danger-border,#f87171);
-  }
-  .border-\[var\(--status-danger-border\,\#fca5a5\)\] {
-    border-color: var(--status-danger-border,#fca5a5);
+  .border-\[var\(--status-danger-border\)\] {
+    border-color: var(--status-danger-border);
   }
-  .border-\[var\(--status-info-border\,\#93c5fd\)\] {
-    border-color: var(--status-info-border,#93c5fd);
+  .border-\[var\(--status-info-border\)\] {
+    border-color: var(--status-info-border);
   }
-  .border-\[var\(--status-success-border\,\#86efac\)\] {
-    border-color: var(--status-success-border,#86efac);
+  .border-\[var\(--status-success-border\)\] {
+    border-color: var(--status-success-border);
   }
-  .border-\[var\(--status-warning-border\,\#fcd34d\)\] {
-    border-color: var(--status-warning-border,#fcd34d);
+  .border-\[var\(--status-warning-border\)\] {
+    border-color: var(--status-warning-border);
   }
   .border-app-border {
     border-color: var(--color-app-border);
@@ -1982,38 +1959,17 @@ h2.react-datepicker__current-month {
   .border-transparent {
     border-color: transparent;
   }
-  .\!bg-\[rgb\(var\(--color-brand\)\/0\.08\)\] {
-    background-color: rgb(var(--color-brand)/0.08) !important;
-  }
-  .\!bg-transparent {
-    background-color: transparent !important;
-  }
-  .bg-\[\#dc2626\] {
-    background-color: #dc2626;
-  }
-  .bg-\[color-mix\(in_srgb\,\#3b82f6_16\%\,var\(--background-secondary\)\)\] {
-    background-color: #3b82f6;
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,#3b82f6 16%,var(--background-secondary));
-    }
+  .border-x-transparent {
+    border-inline-color: transparent;
   }
-  .bg-\[color-mix\(in_srgb\,\#10b981_16\%\,var\(--background-secondary\)\)\] {
-    background-color: #10b981;
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,#10b981 16%,var(--background-secondary));
-    }
+  .border-b-app-border {
+    border-bottom-color: var(--color-app-border);
   }
-  .bg-\[color-mix\(in_srgb\,\#ef4444_16\%\,var\(--background-secondary\)\)\] {
-    background-color: #ef4444;
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,#ef4444 16%,var(--background-secondary));
-    }
+  .\!bg-\[var\(--sidebar-item-active\)\] {
+    background-color: var(--sidebar-item-active) !important;
   }
-  .bg-\[color-mix\(in_srgb\,\#f59e0b_16\%\,var\(--background-secondary\)\)\] {
-    background-color: #f59e0b;
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,#f59e0b 16%,var(--background-secondary));
-    }
+  .\!bg-transparent {
+    background-color: transparent !important;
   }
   .bg-\[color-mix\(in_srgb\,var\(--brand\)_5\%\,var\(--surface\)\)\] {
     background-color: var(--brand);
@@ -2045,24 +2001,12 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in srgb,var(--brand) 14%,var(--surface));
     }
   }
-  .bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,var\(--surface\)\)\] {
-    background-color: var(--destructive);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,var(--destructive) 12%,var(--surface));
-    }
-  }
   .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_3\%\,var\(--background-secondary\)\)\] {
     background-color: var(--foreground-muted);
     @supports (color: color-mix(in lab, red, red)) {
       background-color: color-mix(in srgb,var(--foreground-muted) 3%,var(--background-secondary));
     }
   }
-  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_5\%\,var\(--background-secondary\)\)\] {
-    background-color: var(--foreground-muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in srgb,var(--foreground-muted) 5%,var(--background-secondary));
-    }
-  }
   .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_5\%\,var\(--surface\)\)\] {
     background-color: var(--foreground-muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2093,23 +2037,59 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in srgb,var(--foreground-muted) 18%,var(--surface));
     }
   }
-  .bg-\[rgb\(var\(--color-brand\)\/0\.08\)\] {
-    background-color: rgb(var(--color-brand)/0.08);
-  }
   .bg-\[var\(--brand\)\] {
     background-color: var(--brand);
   }
-  .bg-\[var\(--status-danger-bg\,rgba\(254\,202\,202\,0\.8\)\)\] {
-    background-color: var(--status-danger-bg,rgba(254,202,202,0.8));
+  .bg-\[var\(--destructive\)\] {
+    background-color: var(--destructive);
+  }
+  .bg-\[var\(--overlay-loading\)\] {
+    background-color: var(--overlay-loading);
+  }
+  .bg-\[var\(--overlay-navigation\)\] {
+    background-color: var(--overlay-navigation);
+  }
+  .bg-\[var\(--overlay-navigation-soft\)\] {
+    background-color: var(--overlay-navigation-soft);
+  }
+  .bg-\[var\(--overlay-navigation-strong\)\] {
+    background-color: var(--overlay-navigation-strong);
+  }
+  .bg-\[var\(--overlay-scrim\)\] {
+    background-color: var(--overlay-scrim);
+  }
+  .bg-\[var\(--primary-light\)\] {
+    background-color: var(--primary-light);
+  }
+  .bg-\[var\(--sidebar-background\)\] {
+    background-color: var(--sidebar-background);
+  }
+  .bg-\[var\(--sidebar-flyout-background\)\] {
+    background-color: var(--sidebar-flyout-background);
+  }
+  .bg-\[var\(--sidebar-neutral-active\)\] {
+    background-color: var(--sidebar-neutral-active);
+  }
+  .bg-\[var\(--sidebar-toggle-bg\)\] {
+    background-color: var(--sidebar-toggle-bg);
   }
-  .bg-\[var\(--status-info-bg\,rgba\(219\,234\,254\,0\.8\)\)\] {
-    background-color: var(--status-info-bg,rgba(219,234,254,0.8));
+  .bg-\[var\(--status-danger-bg\)\] {
+    background-color: var(--status-danger-bg);
   }
-  .bg-\[var\(--status-success-bg\,rgba\(220\,252\,231\,0\.8\)\)\] {
-    background-color: var(--status-success-bg,rgba(220,252,231,0.8));
+  .bg-\[var\(--status-info-bg\)\] {
+    background-color: var(--status-info-bg);
   }
-  .bg-\[var\(--status-warning-bg\,rgba\(254\,243\,199\,0\.8\)\)\] {
-    background-color: var(--status-warning-bg,rgba(254,243,199,0.8));
+  .bg-\[var\(--status-success-bg\)\] {
+    background-color: var(--status-success-bg);
+  }
+  .bg-\[var\(--status-warning-bg\)\] {
+    background-color: var(--status-warning-bg);
+  }
+  .bg-\[var\(--tabs-background\)\] {
+    background-color: var(--tabs-background);
+  }
+  .bg-\[var\(--topbar-background\)\] {
+    background-color: var(--topbar-background);
   }
   .bg-app-border {
     background-color: var(--color-app-border);
@@ -2120,18 +2100,6 @@ h2.react-datepicker__current-month {
   .bg-background-secondary {
     background-color: var(--color-background-secondary);
   }
-  .bg-background\/40 {
-    background-color: var(--color-background);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-background) 40%, transparent);
-    }
-  }
-  .bg-black\/50 {
-    background-color: color-mix(in srgb, #000 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
-  }
   .bg-brand {
     background-color: var(--color-brand);
   }
@@ -2156,24 +2124,6 @@ h2.react-datepicker__current-month {
   .bg-input-bg {
     background-color: var(--color-input-bg);
   }
-  .bg-slate-900\/18 {
-    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 18%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-slate-900) 18%, transparent);
-    }
-  }
-  .bg-slate-900\/28 {
-    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 28%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-slate-900) 28%, transparent);
-    }
-  }
-  .bg-slate-900\/42 {
-    background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 42%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-slate-900) 42%, transparent);
-    }
-  }
   .bg-surface {
     background-color: var(--color-surface);
   }
@@ -2186,16 +2136,10 @@ h2.react-datepicker__current-month {
   .bg-transparent {
     background-color: transparent;
   }
-  .bg-white\/80 {
-    background-color: color-mix(in srgb, #fff 80%, transparent);
+  .bg-\[linear-gradient\(135deg\,color-mix\(in_srgb\,var\(--surface\)_92\%\,var\(--brand\)_8\%\)\,var\(--surface\)\)\] {
+    background-image: linear-gradient(135deg,var(--surface),var(--surface));
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
-    }
-  }
-  .bg-\[linear-gradient\(135deg\,color-mix\(in_srgb\,var\(--color-surface\,var\(--surface\)\)_92\%\,var\(--color-primary\,var\(--brand\)\)_8\%\)\,var\(--color-surface\,var\(--surface\)\)\)\] {
-    background-image: linear-gradient(135deg,var(--color-surface,var(--surface)),var(--color-surface,var(--surface)));
-    @supports (color: color-mix(in lab, red, red)) {
-      background-image: linear-gradient(135deg,color-mix(in srgb,var(--color-surface,var(--surface)) 92%,var(--color-primary,var(--brand)) 8%),var(--color-surface,var(--surface)));
+      background-image: linear-gradient(135deg,color-mix(in srgb,var(--surface) 92%,var(--brand) 8%),var(--surface));
     }
   }
   .fill-surface {
@@ -2225,6 +2169,9 @@ h2.react-datepicker__current-month {
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
@@ -2321,6 +2268,9 @@ h2.react-datepicker__current-month {
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
@@ -2430,23 +2380,14 @@ h2.react-datepicker__current-month {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .text-\[0\.65rem\] {
-    font-size: 0.65rem;
-  }
-  .text-\[0\.625rem\] {
-    font-size: 0.625rem;
-  }
-  .text-\[0\.8125rem\] {
-    font-size: 0.8125rem;
-  }
-  .text-\[10px\] {
-    font-size: 10px;
+  .text-\[length\:var\(--font-size-2xs\)\] {
+    font-size: var(--font-size-2xs);
   }
-  .text-\[11px\] {
-    font-size: 11px;
+  .text-\[length\:var\(--font-size-caption\)\] {
+    font-size: var(--font-size-caption);
   }
-  .text-\[13px\] {
-    font-size: 13px;
+  .text-\[length\:var\(--font-size-compact\)\] {
+    font-size: var(--font-size-compact);
   }
   .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
@@ -2464,9 +2405,9 @@ h2.react-datepicker__current-month {
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
   }
-  .leading-\[14px\] {
-    --tw-leading: 14px;
-    line-height: 14px;
+  .leading-\[var\(--line-height-2xs\)\] {
+    --tw-leading: var(--line-height-2xs);
+    line-height: var(--line-height-2xs);
   }
   .leading-none {
     --tw-leading: 1;
@@ -2500,25 +2441,21 @@ h2.react-datepicker__current-month {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-\[-0\.03em\] {
-    --tw-tracking: -0.03em;
-    letter-spacing: -0.03em;
+  .tracking-\[var\(--letter-spacing-caps\)\] {
+    --tw-tracking: var(--letter-spacing-caps);
+    letter-spacing: var(--letter-spacing-caps);
   }
-  .tracking-\[-0\.015em\] {
-    --tw-tracking: -0.015em;
-    letter-spacing: -0.015em;
+  .tracking-\[var\(--letter-spacing-label\)\] {
+    --tw-tracking: var(--letter-spacing-label);
+    letter-spacing: var(--letter-spacing-label);
   }
-  .tracking-\[0\.14em\] {
-    --tw-tracking: 0.14em;
-    letter-spacing: 0.14em;
+  .tracking-\[var\(--letter-spacing-tight\)\] {
+    --tw-tracking: var(--letter-spacing-tight);
+    letter-spacing: var(--letter-spacing-tight);
   }
-  .tracking-\[0\.16em\] {
-    --tw-tracking: 0.16em;
-    letter-spacing: 0.16em;
-  }
-  .tracking-\[0\.045em\] {
-    --tw-tracking: 0.045em;
-    letter-spacing: 0.045em;
+  .tracking-\[var\(--letter-spacing-title\)\] {
+    --tw-tracking: var(--letter-spacing-title);
+    letter-spacing: var(--letter-spacing-title);
   }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
@@ -2543,24 +2480,6 @@ h2.react-datepicker__current-month {
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-\[color-mix\(in_srgb\,\#16a34a_86\%\,var\(--foreground\)\)\]\! {
-    color: #16a34a !important;
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in srgb,#16a34a 86%,var(--foreground)) !important;
-    }
-  }
-  .text-\[color-mix\(in_srgb\,\#dc2626_86\%\,var\(--foreground\)\)\] {
-    color: #dc2626;
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in srgb,#dc2626 86%,var(--foreground));
-    }
-  }
-  .text-\[color-mix\(in_srgb\,\#dc2626_86\%\,var\(--foreground\)\)\]\! {
-    color: #dc2626 !important;
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in srgb,#dc2626 86%,var(--foreground)) !important;
-    }
-  }
   .text-\[color-mix\(in_srgb\,var\(--brand\)_68\%\,var\(--foreground-muted\)\)\] {
     color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2579,78 +2498,54 @@ h2.react-datepicker__current-month {
       color: color-mix(in srgb,var(--brand) 72%,var(--foreground-muted));
     }
   }
-  .text-\[color-mix\(in_srgb\,var\(--brand\)_82\%\,var\(--foreground\)\)\] {
-    color: var(--brand);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in srgb,var(--brand) 82%,var(--foreground));
-    }
-  }
   .text-\[color-mix\(in_srgb\,var\(--brand\)_86\%\,var\(--foreground\)\)\] {
     color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in srgb,var(--brand) 86%,var(--foreground));
     }
   }
-  .text-\[color-mix\(in_srgb\,var\(--brand\)_88\%\,var\(--foreground\)\)\] {
-    color: var(--brand);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in srgb,var(--brand) 88%,var(--foreground));
-    }
-  }
   .text-\[color-mix\(in_srgb\,var\(--destructive\)_86\%\,var\(--foreground\)\)\] {
     color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
       color: color-mix(in srgb,var(--destructive) 86%,var(--foreground));
     }
   }
-  .text-\[color-mix\(in_srgb\,var\(--status-info-text\,\#2563eb\)_76\%\,var\(--foreground\)\)\] {
-    color: var(--status-info-text,#2563eb);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in srgb,var(--status-info-text,#2563eb) 76%,var(--foreground));
-    }
-  }
-  .text-\[color-mix\(in_srgb\,var\(--status-warning-text\,\#d97706\)_76\%\,var\(--foreground\)\)\] {
-    color: var(--status-warning-text,#d97706);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in srgb,var(--status-warning-text,#d97706) 76%,var(--foreground));
-    }
-  }
   .text-\[var\(--brand\)\] {
     color: var(--brand);
   }
-  .text-\[var\(--primary-foreground\,\#ffffff\)\] {
-    color: var(--primary-foreground,#ffffff);
+  .text-\[var\(--on-solid\)\] {
+    color: var(--on-solid);
+  }
+  .text-\[var\(--primary-foreground\)\] {
+    color: var(--primary-foreground);
+  }
+  .text-\[var\(--status-danger-icon\)\] {
+    color: var(--status-danger-icon);
+  }
+  .text-\[var\(--status-danger-icon\)\]\! {
+    color: var(--status-danger-icon) !important;
   }
   .text-\[var\(--status-danger-text\)\] {
     color: var(--status-danger-text);
   }
-  .text-\[var\(--status-danger-text\,\#7f1d1d\)\] {
-    color: var(--status-danger-text,#7f1d1d);
-  }
-  .text-\[var\(--status-danger-text\,\#b91c1c\)\] {
-    color: var(--status-danger-text,#b91c1c);
+  .text-\[var\(--status-info-icon\)\] {
+    color: var(--status-info-icon);
   }
   .text-\[var\(--status-info-text\)\] {
     color: var(--status-info-text);
   }
-  .text-\[var\(--status-info-text\,\#1d4ed8\)\] {
-    color: var(--status-info-text,#1d4ed8);
+  .text-\[var\(--status-success-icon\)\]\! {
+    color: var(--status-success-icon) !important;
   }
   .text-\[var\(--status-success-text\)\] {
     color: var(--status-success-text);
   }
-  .text-\[var\(--status-success-text\,\#15803d\)\] {
-    color: var(--status-success-text,#15803d);
+  .text-\[var\(--status-warning-icon\)\] {
+    color: var(--status-warning-icon);
   }
   .text-\[var\(--status-warning-text\)\] {
     color: var(--status-warning-text);
   }
-  .text-\[var\(--status-warning-text\,\#92400e\)\] {
-    color: var(--status-warning-text,#92400e);
-  }
-  .text-amber-600 {
-    color: var(--color-amber-600);
-  }
   .text-brand {
     color: var(--color-brand);
   }
@@ -2684,9 +2579,6 @@ h2.react-datepicker__current-month {
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-white {
-    color: var(--color-white);
-  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -2717,122 +2609,86 @@ h2.react-datepicker__current-month {
   .opacity-100 {
     opacity: 100%;
   }
-  .shadow-2xl {
-    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--brand\)_20\%\,transparent\)\] {
-    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand));
+  .shadow-\[0_0_0_4px_color-mix\(in_srgb\,var\(--brand\)_18\%\,transparent\)\] {
+    --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--brand));
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 20%,transparent));
+      --tw-shadow: 0 0 0 4px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 18%,transparent));
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_0_0_3px_color-mix\(in_srgb\,var\(--brand\)_24\%\,transparent\)\] {
-    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, var(--brand));
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-danger-border\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-danger-border));
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 24%,transparent));
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-danger-border) 18%,transparent));
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_0_0_4px_color-mix\(in_srgb\,var\(--brand\)_18\%\,transparent\)\] {
-    --tw-shadow: 0 0 0 4px var(--tw-shadow-color, var(--brand));
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-info-border\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-info-border));
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0 0 0 4px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 18%,transparent));
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-info-border) 18%,transparent));
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_2px_8px_-2px_color-mix\(in_srgb\,\#000_6\%\,transparent\)\] {
-    --tw-shadow: 0 2px 8px -2px var(--tw-shadow-color, color-mix(in srgb,#000 6%,transparent));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-\[0_4px_6px_-1px_rgb\(0_0_0\/0\.07\)\,0_2px_4px_-2px_rgb\(0_0_0\/0\.05\)\] {
-    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0/0.07)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0/0.05));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-\[0_8px_24px_-4px_rgba\(0\,0\,0\,0\.16\)\,0_2px_8px_-2px_rgba\(0\,0\,0\,0\.08\)\] {
-    --tw-shadow: 0 8px 24px -4px var(--tw-shadow-color, rgba(0,0,0,0.16)), 0 2px 8px -2px var(--tw-shadow-color, rgba(0,0,0,0.08));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-\[0_10px_22px_-16px_color-mix\(in_srgb\,var\(--brand\)_70\%\,\#000\)\] {
-    --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, var(--brand));
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-success-border\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-success-border));
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 70%,#000));
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-success-border) 18%,transparent));
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_12px_32px_rgba\(15\,23\,42\,0\.06\)\] {
-    --tw-shadow: 0 12px 32px var(--tw-shadow-color, rgba(15,23,42,0.06));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-\[0_14px_26px_-20px_color-mix\(in_srgb\,var\(--brand\)_45\%\,\#000\)\] {
-    --tw-shadow: 0 14px 26px -20px var(--tw-shadow-color, var(--brand));
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-warning-border\)_18\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-warning-border));
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: 0 14px 26px -20px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 45%,#000));
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-warning-border) 18%,transparent));
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_16px_36px_-24px_color-mix\(in_srgb\,\#000_50\%\,transparent\)\] {
-    --tw-shadow: 0 16px 36px -24px var(--tw-shadow-color, color-mix(in srgb,#000 50%,transparent));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,\#fff_32\%\,transparent\)\,0_8px_18px_-14px_rgba\(0\,0\,0\,0\.55\)\] {
-    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,#fff 32%,transparent)), 0 8px 18px -14px var(--tw-shadow-color, rgba(0,0,0,0.55));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--brand\)_8\%\,transparent\)\] {
-    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--brand));
+  .shadow-\[inset_0_1px_0_color-mix\(in_srgb\,var\(--on-solid\)_40\%\,transparent\)\] {
+    --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, var(--on-solid));
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 8%,transparent));
+      --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, color-mix(in srgb,var(--on-solid) 40%,transparent));
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-danger-border\,\#fca5a5\)_18\%\,transparent\)\] {
-    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-danger-border,#fca5a5));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-danger-border,#fca5a5) 18%,transparent));
-    }
+  .shadow-\[var\(--shadow-action\)\] {
+    --tw-shadow: var(--shadow-action);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-info-border\,\#93c5fd\)_18\%\,transparent\)\] {
-    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-info-border,#93c5fd));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-info-border,#93c5fd) 18%,transparent));
-    }
+  .shadow-\[var\(--shadow-brand\)\] {
+    --tw-shadow: var(--shadow-brand);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-success-border\,\#86efac\)_18\%\,transparent\)\] {
-    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-success-border,#86efac));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-success-border,#86efac) 18%,transparent));
-    }
+  .shadow-\[var\(--shadow-flyout\)\] {
+    --tw-shadow: var(--shadow-flyout);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--status-warning-border\,\#fcd34d\)_18\%\,transparent\)\] {
-    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--status-warning-border,#fcd34d));
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--status-warning-border,#fcd34d) 18%,transparent));
-    }
+  .shadow-\[var\(--shadow-focus\)\] {
+    --tw-shadow: var(--shadow-focus);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.10\)\] {
-    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.10));
+  .shadow-\[var\(--shadow-lg\)\] {
+    --tw-shadow: var(--shadow-lg);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.12\)\] {
-    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.12));
+  .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-\[inset_0_0_0_1px_rgba\(15\,23\,42\,0\.06\)\] {
-    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgba(15,23,42,0.06));
+  .shadow-\[var\(--shadow-overlay\)\] {
+    --tw-shadow: var(--shadow-overlay);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[inset_0_1px_0_color-mix\(in_srgb\,\#fff_40\%\,transparent\)\] {
-    --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, color-mix(in srgb,#fff 40%,transparent));
+  .shadow-\[var\(--shadow-sm\)\] {
+    --tw-shadow: var(--shadow-sm);
     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)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+  .shadow-\[var\(--shadow-theme-swatch\)\] {
+    --tw-shadow: var(--shadow-theme-swatch);
+    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-topbar\)\] {
+    --tw-shadow: var(--shadow-topbar);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-none {
@@ -2854,18 +2710,18 @@ h2.react-datepicker__current-month {
   .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-\[1\.5px\] {
-    --tw-backdrop-blur: blur(1.5px);
+  .backdrop-blur-\[var\(--backdrop-blur-md\)\] {
+    --tw-backdrop-blur: blur(var(--backdrop-blur-md));
     -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-\[2px\] {
-    --tw-backdrop-blur: blur(2px);
+  .backdrop-blur-\[var\(--backdrop-blur-sm\)\] {
+    --tw-backdrop-blur: blur(var(--backdrop-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,);
     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-\[3px\] {
-    --tw-backdrop-blur: blur(3px);
+  .backdrop-blur-\[var\(--backdrop-blur-xs\)\] {
+    --tw-backdrop-blur: blur(var(--backdrop-blur-xs));
     -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,);
   }
@@ -2959,17 +2815,17 @@ h2.react-datepicker__current-month {
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .duration-150 {
-    --tw-duration: 150ms;
-    transition-duration: 150ms;
+  .duration-\[var\(--duration-fast\)\] {
+    --tw-duration: var(--duration-fast);
+    transition-duration: var(--duration-fast);
   }
-  .duration-200 {
-    --tw-duration: 200ms;
-    transition-duration: 200ms;
+  .duration-\[var\(--duration-normal\)\] {
+    --tw-duration: var(--duration-normal);
+    transition-duration: var(--duration-normal);
   }
-  .duration-300 {
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
+  .duration-\[var\(--duration-slow\)\] {
+    --tw-duration: var(--duration-slow);
+    transition-duration: var(--duration-slow);
   }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
@@ -3018,6 +2874,44 @@ h2.react-datepicker__current-month {
       color: var(--color-foreground-muted);
     }
   }
+  .after\:min-w-0 {
+    &::after {
+      content: var(--tw-content);
+      min-width: calc(var(--spacing) * 0);
+    }
+  }
+  .after\:flex-1 {
+    &::after {
+      content: var(--tw-content);
+      flex: 1;
+    }
+  }
+  .after\:border-b {
+    &::after {
+      content: var(--tw-content);
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .after\:border-app-border {
+    &::after {
+      content: var(--tw-content);
+      border-color: var(--color-app-border);
+    }
+  }
+  .after\:bg-\[var\(--tabs-background\)\] {
+    &::after {
+      content: var(--tw-content);
+      background-color: var(--tabs-background);
+    }
+  }
+  .after\:content-\[\'\'\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-content: '';
+      content: var(--tw-content);
+    }
+  }
   .first\:border-l-0 {
     &:first-child {
       border-left-style: var(--tw-border-style);
@@ -3044,6 +2938,14 @@ h2.react-datepicker__current-month {
       padding-inline-end: var(--table-action-edge-pad) !important;
     }
   }
+  .hover\:translate-x-8 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-translate-x: calc(var(--spacing) * 8);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+  }
   .hover\:-translate-y-px {
     &:hover {
       @media (hover: hover) {
@@ -3080,16 +2982,6 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_48\%\,var\(--app-border\)\)\] {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--brand);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in srgb,var(--brand) 48%,var(--app-border));
-        }
-      }
-    }
-  }
   .hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_52\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3131,38 +3023,10 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:\!bg-\[rgb\(var\(--color-brand\)\/0\.12\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: rgb(var(--color-brand)/0.12) !important;
-      }
-    }
-  }
-  .hover\:bg-\[\#b91c1c\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: #b91c1c;
-      }
-    }
-  }
-  .hover\:bg-\[color-mix\(in_srgb\,\#16a34a_10\%\,transparent\)\]\! {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb,#16a34a 10%,transparent) !important;
-      }
-    }
-  }
-  .hover\:bg-\[color-mix\(in_srgb\,\#dc2626_10\%\,transparent\)\]\! {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb,#dc2626 10%,transparent) !important;
-      }
-    }
-  }
-  .hover\:bg-\[color-mix\(in_srgb\,\#facc15_14\%\,transparent\)\] {
+  .hover\:\!bg-\[var\(--sidebar-item-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb,#facc15 14%,transparent);
+        background-color: var(--sidebar-item-hover) !important;
       }
     }
   }
@@ -3186,16 +3050,6 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_8\%\,transparent\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--brand);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--brand) 8%,transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_8\%\,var\(--surface\)\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3236,200 +3090,195 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_18\%\,var\(--surface\)\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_10\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--brand);
+        background-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--brand) 18%,var(--surface));
+          background-color: color-mix(in srgb,var(--destructive) 10%,transparent);
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_10\%\,transparent\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,var\(--tabs-background\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--destructive);
+        background-color: var(--foreground-muted);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--destructive) 10%,transparent);
+          background-color: color-mix(in srgb,var(--foreground-muted) 8%,var(--tabs-background));
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,transparent\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-bg\)_78\%\,var\(--status-danger-border\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--destructive);
+        background-color: var(--status-danger-bg);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--destructive) 12%,transparent);
+          background-color: color-mix(in srgb,var(--status-danger-bg) 78%,var(--status-danger-border));
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,var\(--background-secondary\)\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-icon\)_10\%\,transparent\)\]\! {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--foreground-muted);
+        background-color: var(--status-danger-icon) !important;
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--foreground-muted) 8%,var(--background-secondary));
+          background-color: color-mix(in srgb,var(--status-danger-icon) 10%,transparent) !important;
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-bg\,rgba\(254\,202\,202\,0\.8\)\)_78\%\,var\(--status-danger-border\,\#fca5a5\)\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-info-bg\)_78\%\,var\(--status-info-border\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-danger-bg,rgba(254,202,202,0.8));
+        background-color: var(--status-info-bg);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-danger-bg,rgba(254,202,202,0.8)) 78%,var(--status-danger-border,#fca5a5));
+          background-color: color-mix(in srgb,var(--status-info-bg) 78%,var(--status-info-border));
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-info-bg\,rgba\(219\,234\,254\,0\.8\)\)_78\%\,var\(--status-info-border\,\#93c5fd\)\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-bg\)_78\%\,var\(--status-success-border\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-info-bg,rgba(219,234,254,0.8));
+        background-color: var(--status-success-bg);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-info-bg,rgba(219,234,254,0.8)) 78%,var(--status-info-border,#93c5fd));
+          background-color: color-mix(in srgb,var(--status-success-bg) 78%,var(--status-success-border));
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-bg\,rgba\(220\,252\,231\,0\.8\)\)_78\%\,var\(--status-success-border\,\#86efac\)\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-icon\)_10\%\,transparent\)\]\! {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-success-bg,rgba(220,252,231,0.8));
+        background-color: var(--status-success-icon) !important;
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-success-bg,rgba(220,252,231,0.8)) 78%,var(--status-success-border,#86efac));
+          background-color: color-mix(in srgb,var(--status-success-icon) 10%,transparent) !important;
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-warning-bg\,rgba\(254\,243\,199\,0\.8\)\)_78\%\,var\(--status-warning-border\,\#fcd34d\)\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-warning-bg\)_78\%\,var\(--status-warning-border\)\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-warning-bg,rgba(254,243,199,0.8));
+        background-color: var(--status-warning-bg);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-warning-bg,rgba(254,243,199,0.8)) 78%,var(--status-warning-border,#fcd34d));
+          background-color: color-mix(in srgb,var(--status-warning-bg) 78%,var(--status-warning-border));
         }
       }
     }
   }
-  .hover\:bg-\[rgb\(var\(--color-brand\)\/0\.11\)\] {
+  .hover\:bg-\[var\(--brand-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: rgb(var(--color-brand)/0.11);
+        background-color: var(--brand-hover);
       }
     }
   }
-  .hover\:bg-\[rgb\(var\(--color-brand\)\/0\.12\)\] {
+  .hover\:bg-\[var\(--brand-surface-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: rgb(var(--color-brand)/0.12);
+        background-color: var(--brand-surface-hover);
       }
     }
   }
-  .hover\:bg-\[var\(--brand-hover\,var\(--brand\)\)\] {
+  .hover\:bg-\[var\(--brand-surface-subtle\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--brand-hover,var(--brand));
+        background-color: var(--brand-surface-subtle);
       }
     }
   }
-  .hover\:bg-background {
+  .hover\:bg-\[var\(--contrast-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-background);
+        background-color: var(--contrast-hover);
       }
     }
   }
-  .hover\:bg-background-secondary {
+  .hover\:bg-\[var\(--destructive-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-background-secondary);
+        background-color: var(--destructive-hover);
       }
     }
   }
-  .hover\:bg-background\/40 {
+  .hover\:bg-\[var\(--sidebar-neutral-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-background);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-background) 40%, transparent);
-        }
+        background-color: var(--sidebar-neutral-hover);
       }
     }
   }
-  .hover\:bg-black\/10 {
+  .hover\:bg-\[var\(--sidebar-toggle-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, #000 10%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
-        }
+        background-color: var(--sidebar-toggle-hover);
       }
     }
   }
-  .hover\:bg-destructive {
+  .hover\:bg-\[var\(--status-danger-bg\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-destructive);
+        background-color: var(--status-danger-bg);
       }
     }
   }
-  .hover\:bg-white\/70 {
+  .hover\:bg-\[var\(--status-warning-bg\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, #fff 70%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
-        }
+        background-color: var(--status-warning-bg);
       }
     }
   }
-  .hover\:font-semibold {
+  .hover\:bg-background {
     &:hover {
       @media (hover: hover) {
-        --tw-font-weight: var(--font-weight-semibold);
-        font-weight: var(--font-weight-semibold);
+        background-color: var(--color-background);
       }
     }
   }
-  .hover\:text-\[color-mix\(in_srgb\,\#16a34a_86\%\,var\(--foreground\)\)\]\! {
+  .hover\:bg-background-secondary {
     &:hover {
       @media (hover: hover) {
-        color: #16a34a !important;
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in srgb,#16a34a 86%,var(--foreground)) !important;
-        }
+        background-color: var(--color-background-secondary);
       }
     }
   }
-  .hover\:text-\[color-mix\(in_srgb\,\#dc2626_86\%\,var\(--foreground\)\)\]\! {
+  .hover\:bg-background\/40 {
     &:hover {
       @media (hover: hover) {
-        color: #dc2626 !important;
+        background-color: var(--color-background);
         @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in srgb,#dc2626 86%,var(--foreground)) !important;
+          background-color: color-mix(in oklab, var(--color-background) 40%, transparent);
         }
       }
     }
   }
-  .hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_86\%\,var\(--foreground\)\)\] {
+  .hover\:bg-destructive {
     &:hover {
       @media (hover: hover) {
-        color: var(--brand);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in srgb,var(--brand) 86%,var(--foreground));
-        }
+        background-color: var(--color-destructive);
+      }
+    }
+  }
+  .hover\:font-semibold {
+    &:hover {
+      @media (hover: hover) {
+        --tw-font-weight: var(--font-weight-semibold);
+        font-weight: var(--font-weight-semibold);
       }
     }
   }
-  .hover\:text-\[var\(--brand\)\] {
+  .hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_86\%\,var\(--foreground\)\)\] {
     &:hover {
       @media (hover: hover) {
         color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in srgb,var(--brand) 86%,var(--foreground));
+        }
       }
     }
   }
@@ -3440,77 +3289,77 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:text-amber-700 {
+  .hover\:text-\[var\(--on-solid\)\] {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-amber-700);
+        color: var(--on-solid);
       }
     }
   }
-  .hover\:text-brand {
+  .hover\:text-\[var\(--status-danger-icon\)\]\! {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-brand);
+        color: var(--status-danger-icon) !important;
       }
     }
   }
-  .hover\:text-brand\/70 {
+  .hover\:text-\[var\(--status-danger-text\)\] {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-brand);
-        @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-brand) 70%, transparent);
-        }
+        color: var(--status-danger-text);
       }
     }
   }
-  .hover\:text-foreground {
+  .hover\:text-\[var\(--status-success-icon\)\]\! {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-foreground);
+        color: var(--status-success-icon) !important;
       }
     }
   }
-  .hover\:text-red-700 {
+  .hover\:text-\[var\(--status-warning-text\)\] {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-red-700);
+        color: var(--status-warning-text);
       }
     }
   }
-  .hover\:text-white {
+  .hover\:text-brand {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-white);
+        color: var(--color-brand);
       }
     }
   }
-  .hover\:shadow-\[0_14px_26px_-20px_color-mix\(in_srgb\,var\(--brand\)_45\%\,\#000\)\] {
+  .hover\:text-brand\/70 {
     &:hover {
       @media (hover: hover) {
-        --tw-shadow: 0 14px 26px -20px var(--tw-shadow-color, var(--brand));
+        color: var(--color-brand);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-shadow: 0 14px 26px -20px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 45%,#000));
+          color: color-mix(in oklab, var(--color-brand) 70%, transparent);
         }
-        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       }
     }
   }
-  .hover\:shadow-\[0_16px_28px_-18px_color-mix\(in_srgb\,var\(--brand\)_80\%\,\#000\)\] {
+  .hover\:text-foreground {
     &:hover {
       @media (hover: hover) {
-        --tw-shadow: 0 16px 28px -18px var(--tw-shadow-color, var(--brand));
-        @supports (color: color-mix(in lab, red, red)) {
-          --tw-shadow: 0 16px 28px -18px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 80%,#000));
-        }
+        color: var(--color-foreground);
+      }
+    }
+  }
+  .hover\:shadow-\[var\(--shadow-action\)\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: var(--shadow-action);
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       }
     }
   }
-  .hover\:shadow-\[inset_0_0_0_1px_rgba\(15\,23\,42\,0\.05\)\] {
+  .hover\:shadow-\[var\(--shadow-brand-hover\)\] {
     &:hover {
       @media (hover: hover) {
-        --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgba(15,23,42,0.05));
+        --tw-shadow: var(--shadow-brand-hover);
         box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       }
     }
@@ -3822,14 +3671,14 @@ h2.react-datepicker__current-month {
       border-color: var(--color-app-border);
     }
   }
-  .data-\[state\=active\]\:border-b-background-secondary {
+  .data-\[state\=active\]\:\!border-b-transparent {
     &[data-state="active"] {
-      border-bottom-color: var(--color-background-secondary);
+      border-bottom-color: transparent !important;
     }
   }
-  .data-\[state\=active\]\:bg-background-secondary {
+  .data-\[state\=active\]\:bg-surface {
     &[data-state="active"] {
-      background-color: var(--color-background-secondary);
+      background-color: var(--color-surface);
     }
   }
   .data-\[state\=active\]\:text-foreground {
@@ -3837,17 +3686,14 @@ h2.react-datepicker__current-month {
       color: var(--color-foreground);
     }
   }
-  .data-\[state\=open\]\:bg-\[color-mix\(in_srgb\,\#facc15_14\%\,transparent\)\] {
+  .data-\[state\=open\]\:bg-\[var\(--status-danger-bg\)\] {
     &[data-state="open"] {
-      background-color: color-mix(in srgb,#facc15 14%,transparent);
+      background-color: var(--status-danger-bg);
     }
   }
-  .data-\[state\=open\]\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,transparent\)\] {
+  .data-\[state\=open\]\:bg-\[var\(--status-warning-bg\)\] {
     &[data-state="open"] {
-      background-color: var(--destructive);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in srgb,var(--destructive) 12%,transparent);
-      }
+      background-color: var(--status-warning-bg);
     }
   }
   .data-\[state\=open\]\:bg-background {
@@ -3855,9 +3701,14 @@ h2.react-datepicker__current-month {
       background-color: var(--color-background);
     }
   }
-  .data-\[state\=open\]\:text-amber-700 {
+  .data-\[state\=open\]\:text-\[var\(--status-danger-text\)\] {
+    &[data-state="open"] {
+      color: var(--status-danger-text);
+    }
+  }
+  .data-\[state\=open\]\:text-\[var\(--status-warning-text\)\] {
     &[data-state="open"] {
-      color: var(--color-amber-700);
+      color: var(--status-warning-text);
     }
   }
   .data-\[state\=open\]\:text-foreground {
@@ -3865,9 +3716,9 @@ h2.react-datepicker__current-month {
       color: var(--color-foreground);
     }
   }
-  .data-\[state\=open\]\:text-red-700 {
-    &[data-state="open"] {
-      color: var(--color-red-700);
+  .motion-reduce\:transition-none {
+    @media (prefers-reduced-motion: reduce) {
+      transition-property: none;
     }
   }
   .max-md\:gap-3 {
@@ -3941,9 +3792,9 @@ h2.react-datepicker__current-month {
       position: static;
     }
   }
-  .md\:z-\[60\] {
+  .md\:z-\[var\(--z-navigation-desktop\)\] {
     @media (width >= 48rem) {
-      z-index: 60;
+      z-index: var(--z-navigation-desktop);
     }
   }
   .md\:order-none {
@@ -4027,9 +3878,9 @@ h2.react-datepicker__current-month {
       text-align: left;
     }
   }
-  .md\:text-\[0\.8125rem\] {
+  .md\:text-\[length\:var\(--font-size-compact\)\] {
     @media (width >= 48rem) {
-      font-size: 0.8125rem;
+      font-size: var(--font-size-compact);
     }
   }
   .md\:shadow-none {
@@ -4070,32 +3921,11 @@ h2.react-datepicker__current-month {
       align-self: stretch;
     }
   }
-  .dark\:border-\[color-mix\(in_srgb\,var\(--brand\)_42\%\,var\(--app-border\)\)\] {
-    @media (prefers-color-scheme: dark) {
-      border-color: var(--brand);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in srgb,var(--brand) 42%,var(--app-border));
-      }
-    }
-  }
   .dark\:border-red-400 {
     @media (prefers-color-scheme: dark) {
       border-color: var(--color-red-400);
     }
   }
-  .dark\:\!bg-\[rgb\(var\(--color-brand\)\/0\.13\)\] {
-    @media (prefers-color-scheme: dark) {
-      background-color: rgb(var(--color-brand)/0.13) !important;
-    }
-  }
-  .dark\:bg-\[color-mix\(in_srgb\,var\(--brand\)_18\%\,var\(--surface\)\)\] {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--brand);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in srgb,var(--brand) 18%,var(--surface));
-      }
-    }
-  }
   .dark\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_28\%\,var\(--surface\)\)\] {
     @media (prefers-color-scheme: dark) {
       background-color: var(--foreground-muted);
@@ -4112,52 +3942,11 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .dark\:bg-\[rgb\(var\(--color-brand\)\/0\.13\)\] {
-    @media (prefers-color-scheme: dark) {
-      background-color: rgb(var(--color-brand)/0.13);
-    }
-  }
-  .dark\:bg-white\/\[0\.08\] {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, #fff 8%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
-      }
-    }
-  }
-  .dark\:text-\[color-mix\(in_srgb\,var\(--brand\)_42\%\,\#fff\)\] {
-    @media (prefers-color-scheme: dark) {
-      color: var(--brand);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in srgb,var(--brand) 42%,#fff);
-      }
-    }
-  }
-  .dark\:text-foreground {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-foreground);
-    }
-  }
   .dark\:text-red-400 {
     @media (prefers-color-scheme: dark) {
       color: var(--color-red-400);
     }
   }
-  .dark\:shadow-\[0_14px_28px_-20px_color-mix\(in_srgb\,var\(--brand\)_86\%\,\#000\)\] {
-    @media (prefers-color-scheme: dark) {
-      --tw-shadow: 0 14px 28px -20px var(--tw-shadow-color, var(--brand));
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-shadow: 0 14px 28px -20px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 86%,#000));
-      }
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .dark\:shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.18\)\] {
-    @media (prefers-color-scheme: dark) {
-      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.18));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
   .dark\:hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_54\%\,var\(--app-border\)\)\] {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -4170,144 +3959,42 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .dark\:hover\:\!bg-\[rgb\(var\(--color-brand\)\/0\.17\)\] {
+  .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-icon\)_16\%\,transparent\)\]\! {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: rgb(var(--color-brand)/0.17) !important;
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-\[color-mix\(in_srgb\,\#16a34a_16\%\,transparent\)\]\! {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb,#16a34a 16%,transparent) !important;
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-\[color-mix\(in_srgb\,\#dc2626_16\%\,transparent\)\]\! {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb,#dc2626 16%,transparent) !important;
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_12\%\,transparent\)\] {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--brand);
+          background-color: var(--status-danger-icon) !important;
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in srgb,var(--brand) 12%,transparent);
+            background-color: color-mix(in srgb,var(--status-danger-icon) 16%,transparent) !important;
           }
         }
       }
     }
   }
-  .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_14\%\,transparent\)\] {
+  .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-icon\)_16\%\,transparent\)\]\! {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--brand);
+          background-color: var(--status-success-icon) !important;
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in srgb,var(--brand) 14%,transparent);
+            background-color: color-mix(in srgb,var(--status-success-icon) 16%,transparent) !important;
           }
         }
       }
     }
   }
-  .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_24\%\,var\(--surface\)\)\] {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--brand);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in srgb,var(--brand) 24%,var(--surface));
-          }
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-\[rgb\(var\(--color-brand\)\/0\.16\)\] {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: rgb(var(--color-brand)/0.16);
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-\[rgb\(var\(--color-brand\)\/0\.17\)\] {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: rgb(var(--color-brand)/0.17);
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-white\/10 {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, #fff 10%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
-          }
-        }
-      }
-    }
-  }
-  .dark\:hover\:bg-white\/\[0\.06\] {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, #fff 6%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
-          }
-        }
-      }
-    }
-  }
-  .dark\:hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_30\%\,\#fff\)\] {
+  .dark\:hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_78\%\,var\(--on-solid\)\)\] {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
           color: var(--brand);
           @supports (color: color-mix(in lab, red, red)) {
-            color: color-mix(in srgb,var(--brand) 30%,#fff);
+            color: color-mix(in srgb,var(--brand) 78%,var(--on-solid));
           }
         }
       }
     }
   }
-  .dark\:hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_78\%\,\#fff\)\] {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          color: var(--brand);
-          @supports (color: color-mix(in lab, red, red)) {
-            color: color-mix(in srgb,var(--brand) 78%,#fff);
-          }
-        }
-      }
-    }
-  }
-  .dark\:hover\:text-foreground {
-    @media (prefers-color-scheme: dark) {
-      &:hover {
-        @media (hover: hover) {
-          color: var(--color-foreground);
-        }
-      }
-    }
-  }
   .dark\:focus\:border-red-400 {
     @media (prefers-color-scheme: dark) {
       &:focus {
@@ -4643,23 +4330,156 @@ h2.react-datepicker__current-month {
   }
 }
 :root {
+  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  --font-size-2xs: 0.625rem;
+  --font-size-caption: 0.6875rem;
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-compact: 0.8125rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --line-height-tight: 1.25;
+  --line-height-normal: 1.5;
+  --line-height-2xs: 0.875rem;
+  --letter-spacing-tight: -0.03em;
+  --letter-spacing-title: -0.015em;
+  --letter-spacing-label: 0.045em;
+  --letter-spacing-caps: 0.16em;
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-1-5: 0.375rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-12: 3rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000 8%, transparent);
+  --shadow-md: 0 8px 24px -12px color-mix(in srgb, #000 24%, transparent);
+  --shadow-lg: 0 16px 36px -24px color-mix(in srgb, #000 50%, transparent);
+  --shadow-brand: 0 10px 22px -16px var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --shadow-brand: 0 10px 22px -16px color-mix(in srgb, var(--brand) 70%, #000);
+  }
+  --shadow-brand-hover: 0 16px 28px -18px var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --shadow-brand-hover: 0 16px 28px -18px color-mix(in srgb, var(--brand) 80%, #000);
+  }
+  --shadow-action: 0 14px 26px -20px var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --shadow-action: 0 14px 26px -20px color-mix(in srgb, var(--brand) 45%, #000);
+  }
+  --shadow-topbar: 0 2px 8px -2px color-mix(in srgb, #000 6%, transparent);
+  --shadow-flyout: 0 8px 24px -4px color-mix(in srgb, #000 16%, transparent), 0 2px 8px -2px color-mix(in srgb, #000 8%, transparent);
+  --shadow-focus: 0 0 0 3px var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
+  }
+  --shadow-warning-focus: 0 0 0 2px var(--background-secondary), 0 0 0 4px var(--status-warning-border);
+  @supports (color: color-mix(in lab, red, red)) {
+    --shadow-warning-focus: 0 0 0 2px var(--background-secondary), 0 0 0 4px color-mix(in srgb, var(--status-warning-border) 62%, transparent);
+  }
+  --shadow-theme-swatch: inset 0 0 0 1px var(--on-solid), 0 8px 18px -14px color-mix(in srgb, #000 55%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --shadow-theme-swatch: inset 0 0 0 1px color-mix(in srgb, var(--on-solid) 32%, transparent), 0 8px 18px -14px color-mix(in srgb, #000 55%, transparent);
+  }
+  --shadow-overlay: 0 24px 64px -28px color-mix(in srgb, #000 62%, transparent);
+  --duration-fast: 150ms;
+  --duration-normal: 200ms;
+  --duration-slow: 300ms;
+  --overlay-scrim: color-mix(in srgb, #000 50%, transparent);
+  --overlay-loading: var(--background);
+  @supports (color: color-mix(in lab, red, red)) {
+    --overlay-loading: color-mix(in srgb, var(--background) 40%, transparent);
+  }
+  --overlay-navigation-soft: color-mix(in srgb, #0f172a 18%, transparent);
+  --overlay-navigation: color-mix(in srgb, #0f172a 28%, transparent);
+  --overlay-navigation-strong: color-mix(in srgb, #0f172a 42%, transparent);
+  --backdrop-blur-xs: 1.5px;
+  --backdrop-blur-sm: 2px;
+  --backdrop-blur-md: 3px;
+  --z-table-header: 2;
+  --z-navigation-overlay: 29;
+  --z-navigation: 40;
+  --z-popover: 50;
+  --z-navigation-desktop: 60;
+  --z-flyout: 70;
+  --z-modal-overlay: 100;
+  --z-modal: 110;
+  --z-tooltip: 200;
+  --z-loading-overlay: 999;
+  --z-datepicker: 9999;
+  --z-critical-dialog: 10000;
   --background: var(--light-background, #f6f7fb);
-  --background-secondary: var(--light-background-secondary, #ffffff);
+  --background-secondary: var(--light-background-secondary, #eef1f7);
   --surface: var(--light-surface, #ffffff);
   --foreground: #2f3338;
   --foreground-muted: var(--light-foreground-muted, #7d7e84);
   --muted-foreground: var(--foreground-muted);
   --app-border: var(--light-app-border, #e6e8f2);
-  --primary: #5b5cff;
-  --primary-hover: #6d6eff;
-  --primary-light: #ede9fe;
+  --primary: #2563eb;
+  --primary-hover: #3b82f6;
+  --primary-light: #dbeafe;
   --primary-foreground: #ffffff;
   --color-primary-soft: var(--primary-light);
   --color-primary-foreground: var(--primary-foreground);
   --brand: var(--primary);
   --brand-hover: var(--primary-hover);
+  --brand-surface-subtle: var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --brand-surface-subtle: color-mix(in srgb, var(--brand) 8%, transparent);
+  }
+  --brand-surface-hover: var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --brand-surface-hover: color-mix(in srgb, var(--brand) 12%, transparent);
+  }
+  --brand-surface-active: var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --brand-surface-active: color-mix(in srgb, var(--brand) 16%, transparent);
+  }
+  --contrast-hover: color-mix(in srgb, #000 10%, transparent);
   --sidebar-background: var(--surface);
+  --sidebar-flyout-background: var(--surface);
+  --topbar-background: var(--surface);
+  --tabs-background: var(--background-secondary);
+  @supports (color: color-mix(in lab, red, red)) {
+    --tabs-background: color-mix(in srgb, var(--background-secondary) 50%, var(--surface));
+  }
+  --sidebar-accent: var(--status-info-icon);
+  --sidebar-toggle-bg: var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-toggle-bg: color-mix(in srgb, var(--brand) 8%, transparent);
+  }
+  --sidebar-toggle-hover: var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-toggle-hover: color-mix(in srgb, var(--brand) 11%, transparent);
+  }
+  --sidebar-item-active: var(--sidebar-accent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-item-active: color-mix(in srgb, var(--sidebar-accent) 8%, transparent);
+  }
+  --sidebar-item-hover: var(--sidebar-accent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-item-hover: color-mix(in srgb, var(--sidebar-accent) 12%, transparent);
+  }
+  --sidebar-neutral-active: var(--foreground);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-neutral-active: color-mix(in srgb, var(--foreground) 6%, transparent);
+  }
+  --sidebar-neutral-hover: var(--foreground);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-neutral-hover: color-mix(in srgb, var(--foreground) 4%, transparent);
+  }
   --destructive: #ef4444;
+  --destructive-hover: #dc2626;
+  --on-solid: #ffffff;
   --input-bg: var(--light-input-bg, #eceef5);
   --status-info-bg: #dbeafe;
   --status-info-border: #60a5fa;
@@ -4673,22 +4493,50 @@ h2.react-datepicker__current-month {
   --status-warning-border: #f59e0b;
   --status-warning-text: #78350f;
   --status-warning-icon: #b45309;
-  --status-danger-bg: #fee2e2;
-  --status-danger-border: #f87171;
-  --status-danger-text: #7f1d1d;
-  --status-danger-icon: #dc2626;
-  --radius: 0.5rem;
+  --status-danger-bg: #fff0ed;
+  --status-danger-border: #e85d4a;
+  --status-danger-text: #7a271a;
+  --status-danger-icon: #c43224;
+  --radius: var(--radius-md);
 }
 .dark {
-  --background: var(--dark-background, #0b0820);
-  --background-secondary: var(--dark-background-secondary, #141030);
-  --surface: var(--dark-surface, #1b1642);
+  --background: var(--dark-background, #0b1220);
+  --background-secondary: var(--dark-background-secondary, #111827);
+  --surface: var(--dark-surface, #172033);
   --foreground: #ffffff;
-  --foreground-muted: var(--dark-foreground-muted, #c7c6e5);
+  --foreground-muted: var(--dark-foreground-muted, #b8c4d6);
   --muted-foreground: var(--foreground-muted);
-  --app-border: var(--dark-app-border, #2a245a);
-  --input-bg: var(--dark-input-bg, #161138);
+  --app-border: var(--dark-app-border, #29364d);
+  --input-bg: var(--dark-input-bg, #111a2b);
   --sidebar-background: var(--surface);
+  --sidebar-flyout-background: var(--surface);
+  --topbar-background: var(--surface);
+  --tabs-background: var(--background-secondary);
+  --sidebar-accent: var(--status-info-icon);
+  --sidebar-toggle-bg: var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-toggle-bg: color-mix(in srgb, var(--brand) 13%, transparent);
+  }
+  --sidebar-toggle-hover: var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-toggle-hover: color-mix(in srgb, var(--brand) 15%, transparent);
+  }
+  --sidebar-item-active: var(--sidebar-accent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-item-active: color-mix(in srgb, var(--sidebar-accent) 13%, transparent);
+  }
+  --sidebar-item-hover: var(--sidebar-accent);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-item-hover: color-mix(in srgb, var(--sidebar-accent) 15%, transparent);
+  }
+  --sidebar-neutral-active: var(--on-solid);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-neutral-active: color-mix(in srgb, var(--on-solid) 8%, transparent);
+  }
+  --sidebar-neutral-hover: var(--on-solid);
+  @supports (color: color-mix(in lab, red, red)) {
+    --sidebar-neutral-hover: color-mix(in srgb, var(--on-solid) 6%, transparent);
+  }
   --status-info-bg: color-mix(in srgb, #3b82f6 16%, transparent);
   --status-info-border: color-mix(in srgb, #60a5fa 34%, transparent);
   --status-info-text: #dbeafe;
@@ -4701,10 +4549,37 @@ h2.react-datepicker__current-month {
   --status-warning-border: color-mix(in srgb, #fbbf24 38%, transparent);
   --status-warning-text: #fef3c7;
   --status-warning-icon: #fcd34d;
-  --status-danger-bg: color-mix(in srgb, #ef4444 16%, transparent);
-  --status-danger-border: color-mix(in srgb, #f87171 38%, transparent);
-  --status-danger-text: #fee2e2;
-  --status-danger-icon: #fca5a5;
+  --status-danger-bg: #e85d4a;
+  @supports (color: color-mix(in lab, red, red)) {
+    --status-danger-bg: color-mix(in srgb, #e85d4a 14%, var(--surface));
+  }
+  --status-danger-border: #e85d4a;
+  @supports (color: color-mix(in lab, red, red)) {
+    --status-danger-border: color-mix(in srgb, #e85d4a 48%, var(--app-border));
+  }
+  --status-danger-text: #ffd9d2;
+  --status-danger-icon: #ff9585;
+  --shadow-sm: 0 1px 2px color-mix(in srgb, #000 28%, transparent);
+  --shadow-md: 0 10px 28px -14px color-mix(in srgb, #000 58%, transparent);
+  --shadow-lg: 0 18px 42px -24px color-mix(in srgb, #000 72%, transparent);
+  --shadow-topbar: 0 2px 10px -2px color-mix(in srgb, #000 36%, transparent);
+  --shadow-overlay: 0 24px 64px -24px color-mix(in srgb, #000 78%, transparent);
+  --brand-surface-subtle: var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --brand-surface-subtle: color-mix(in srgb, var(--brand) 13%, transparent);
+  }
+  --brand-surface-hover: var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --brand-surface-hover: color-mix(in srgb, var(--brand) 17%, transparent);
+  }
+  --brand-surface-active: var(--brand);
+  @supports (color: color-mix(in lab, red, red)) {
+    --brand-surface-active: color-mix(in srgb, var(--brand) 21%, transparent);
+  }
+  --contrast-hover: var(--on-solid);
+  @supports (color: color-mix(in lab, red, red)) {
+    --contrast-hover: color-mix(in srgb, var(--on-solid) 10%, transparent);
+  }
 }
 .app-page-message--default {
   border-color: var(--app-border);
@@ -4815,24 +4690,24 @@ h2.react-datepicker__current-month {
   color: var(--status-danger-icon);
 }
 .app-datepicker-popper {
-  z-index: 9999 !important;
+  z-index: var(--z-datepicker) !important;
 }
 .react-datepicker {
   display: flex !important;
   align-items: flex-start !important;
   border-color: var(--app-border) !important;
-  background-color: var(--background-secondary) !important;
+  background-color: var(--surface) !important;
   color: var(--foreground) !important;
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
+  box-shadow: var(--shadow-md) !important;
 }
 .react-datepicker__header {
-  background-color: var(--background-secondary) !important;
+  background-color: var(--surface) !important;
   border-bottom-color: var(--app-border) !important;
 }
-.react-datepicker__current-month,
+.react-datepicker__current-month,
 .react-datepicker-time__header {
   color: var(--foreground) !important;
-  font-size: 0.8125rem !important;
+  font-size: var(--font-size-compact) !important;
   font-weight: 600 !important;
 }
 .react-datepicker__day-name,
@@ -4840,9 +4715,9 @@ h2.react-datepicker__current-month {
 .react-datepicker__time-name {
   width: 2rem;
   line-height: 2rem;
-  margin: 0.125rem;
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
+  margin: calc(var(--space-1) / 2);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-size-xs);
 }
 .react-datepicker__day-name {
   color: var(--foreground-muted) !important;
@@ -4851,11 +4726,11 @@ h2.react-datepicker__current-month {
   letter-spacing: 0.02em;
 }
 .react-datepicker__month {
-  margin: 0.5rem;
+  margin: var(--space-2);
 }
 .react-datepicker__day {
   color: var(--foreground) !important;
-  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
+  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
 }
 .react-datepicker__day:hover,
 .react-datepicker__day--keyboard-selected {
@@ -4874,7 +4749,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__day--in-selecting-range,
 .react-datepicker__day--in-range {
   background-color: var(--brand) !important;
-  color: #ffffff !important;
+  color: var(--on-solid) !important;
   box-shadow: none !important;
 }
 .react-datepicker__day--today {
@@ -4886,11 +4761,11 @@ h2.react-datepicker__current-month {
   opacity: 0.5;
 }
 .react-datepicker__navigation {
-  top: 0.125rem;
+  top: calc(var(--space-1) / 2);
   height: 2rem;
   width: 2rem;
-  border-radius: 9999px;
-  transition: background-color 160ms ease;
+  border-radius: var(--radius-full);
+  transition: background-color var(--duration-fast) ease;
 }
 .react-datepicker__navigation:hover {
   background-color: var(--background) !important;
@@ -4911,10 +4786,10 @@ h2.react-datepicker__current-month {
   float: none !important;
   border-left: 1px solid var(--app-border) !important;
 }
-.react-datepicker__time-container .react-datepicker__header--time,
-.react-datepicker__time-container .react-datepicker__time,
+.react-datepicker__time-container .react-datepicker__header--time,
+.react-datepicker__time-container .react-datepicker__time,
 .react-datepicker__time-container .react-datepicker__time-box {
-  background-color: var(--background-secondary) !important;
+  background-color: var(--surface) !important;
   border-bottom-color: var(--app-border) !important;
 }
 .react-datepicker__time-list-item {
@@ -4923,8 +4798,8 @@ h2.react-datepicker__current-month {
   line-height: 2rem !important;
   display: flex !important;
   align-items: center !important;
-  font-size: 0.75rem;
-  transition: background-color 160ms ease;
+  font-size: var(--font-size-xs);
+  transition: background-color var(--duration-fast) ease;
 }
 .react-datepicker__time-list-item:not(.react-datepicker__time-list-item--selected):not(.react-datepicker__time-list-item--disabled):hover {
   background-color: var(--background) !important;
@@ -4933,7 +4808,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__time-list-item--selected,
 .react-datepicker__time-list-item--selected:hover {
   background-color: var(--brand) !important;
-  color: #ffffff !important;
+  color: var(--on-solid) !important;
   font-weight: 600 !important;
 }
 .react-datepicker__time-list-item--disabled,
@@ -4961,7 +4836,7 @@ h2.react-datepicker__current-month {
 .field-select option:hover,
 .field-select option:focus {
   background-color: var(--brand) !important;
-  color: #ffffff !important;
+  color: var(--on-solid) !important;
 }
 .dark .field-select,
 [data-theme='dark'] .field-select {
@@ -4977,7 +4852,7 @@ h2.react-datepicker__current-month {
   background-color: var(--brand);
 }
 .app-switch__thumb {
-  background-color: #ffffff;
+  background-color: var(--on-solid);
 }
 .app-radio {
   border-color: var(--foreground-muted);
@@ -5238,6 +5113,11 @@ h2.react-datepicker__current-month {
   syntax: "*";
   inherits: false;
 }
+@property --tw-content {
+  syntax: "*";
+  initial-value: "";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -5306,6 +5186,7 @@ h2.react-datepicker__current-month {
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-content: "";
     }
   }
 }