@uipath/apollo-wind 0.10.0 → 0.11.0-pr295.af4e744

package/dist/styles.css

@@ -219,12 +219,15 @@
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
     --container-lg: 32rem;
+    --container-xl: 36rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
+    --container-5xl: 64rem;
     --container-6xl: 72rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
@@ -251,9 +254,9 @@
     --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;
     --radius-xs: 0.125rem;
@@ -267,40 +270,27 @@
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --blur-sm: 8px;
+    --blur-xl: 24px;
     --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
-    --color-card: var(--color-card);
-    --color-card-foreground: var(--color-card-foreground);
-    --color-popover: var(--color-popover);
-    --color-popover-foreground: var(--color-popover-foreground);
-    --color-primary-foreground: var(--color-primary-foreground);
-    --color-secondary: var(--color-secondary);
-    --color-secondary-foreground: var(--color-secondary-foreground);
-    --color-muted: var(--color-muted);
-    --color-muted-foreground: var(--color-muted-foreground);
-    --color-accent: var(--color-accent);
-    --color-accent-foreground: var(--color-accent-foreground);
-    --color-destructive: var(--color-destructive);
-    --color-destructive-foreground: var(--color-destructive-foreground);
-    --color-input: var(--color-input);
-    --color-ring: var(--color-ring);
-    --color-chart-1: var(--color-chart-1);
-    --color-chart-2: var(--color-chart-2);
-    --color-chart-3: var(--color-chart-3);
-    --color-chart-4: var(--color-chart-4);
-    --color-chart-5: var(--color-chart-5);
-    --color-sidebar: var(--color-sidebar);
-    --color-sidebar-foreground: var(--color-sidebar-foreground);
-    --color-sidebar-primary: var(--color-sidebar-primary);
-    --color-sidebar-primary-foreground: var(--color-sidebar-primary-foreground);
-    --color-sidebar-accent: var(--color-sidebar-accent);
-    --color-sidebar-accent-foreground: var(--color-sidebar-accent-foreground);
-    --color-sidebar-border: var(--color-sidebar-border);
-    --color-sidebar-ring: var(--color-sidebar-ring);
-    --color-background: var(--color-background);
+    --color-brand: var(--brand);
+    --color-foreground-inverse: var(--foreground-inverse);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-primary: var(--primary);
+    --color-muted: var(--muted);
+    --color-border: var(--border);
+    --color-border-de-emp: var(--border-de-emp);
+    --color-ring: var(--ring);
+    --color-foreground-emp: var(--foreground-emp);
+    --color-foreground-link: var(--foreground-link);
+    --color-border-disabled: var(--border-disabled);
+    --color-border-grid: var(--border-grid);
+    --color-logo: var(--logo);
     --color-background-secondary: var(--color-background-secondary);
     --color-background-inverse: var(--color-background-inverse);
     --color-background-gray: var(--color-background-gray);
@@ -317,25 +307,15 @@
     --color-notification-indicator: var(--color-notification-indicator);
     --color-hover: var(--color-hover);
     --color-curtain: var(--color-curtain);
-    --color-border: var(--color-border);
-    --color-border-disabled: var(--color-border-disabled);
-    --color-border-grid: var(--color-border-grid);
-    --color-border-de-emp: var(--color-border-de-emp);
     --color-selection: var(--color-selection);
-    --color-logo: var(--color-logo);
-    --color-foreground: var(--color-foreground);
     --color-foreground-light: var(--color-foreground-light);
-    --color-foreground-emp: var(--color-foreground-emp);
     --color-foreground-de-emp: var(--color-foreground-de-emp);
     --color-foreground-disable: var(--color-foreground-disable);
-    --color-foreground-inverse: var(--color-foreground-inverse);
     --color-foreground-highlight: var(--color-foreground-highlight);
     --color-foreground-highlight-selected: var(--color-foreground-highlight-selected);
     --color-foreground-highlight-selected-hover: var(--color-foreground-highlight-selected-hover);
-    --color-foreground-link: var(--color-foreground-link);
     --color-foreground-link-pressed: var(--color-foreground-link-pressed);
     --color-foreground-inv-de-emp: var(--color-foreground-inv-de-emp);
-    --color-primary: var(--color-primary);
     --color-primary-lighter: var(--color-primary-lighter);
     --color-primary-darker: var(--color-primary-darker);
     --color-primary-hover: var(--color-primary-hover);
@@ -573,6 +553,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }
@@ -614,9 +597,6 @@
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
-  .-top-0\.5 {
-    top: calc(var(--spacing) * -0.5);
-  }
   .-top-2 {
     top: calc(var(--spacing) * -2);
   }
@@ -626,54 +606,66 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
   .top-2\.5 {
     top: calc(var(--spacing) * 2.5);
   }
+  .top-3 {
+    top: calc(var(--spacing) * 3);
+  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
-  .top-\[1px\] {
-    top: 1px;
+  .top-12 {
+    top: calc(var(--spacing) * 12);
   }
   .top-\[50\%\] {
     top: 50%;
   }
-  .top-\[60\%\] {
-    top: 60%;
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
   }
-  .top-full {
-    top: 100%;
+  .-right-6 {
+    right: calc(var(--spacing) * -6);
   }
-  .-right-0\.5 {
-    right: calc(var(--spacing) * -0.5);
+  .-right-7 {
+    right: calc(var(--spacing) * -7);
   }
-  .-right-1 {
-    right: calc(var(--spacing) * -1);
+  .-right-8 {
+    right: calc(var(--spacing) * -8);
   }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
-  .right-6 {
-    right: calc(var(--spacing) * 6);
+  .right-5 {
+    right: calc(var(--spacing) * 5);
   }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
-  .bottom-4 {
-    bottom: calc(var(--spacing) * 4);
-  }
-  .bottom-6 {
-    bottom: calc(var(--spacing) * 6);
+  .bottom-5 {
+    bottom: calc(var(--spacing) * 5);
   }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
@@ -686,8 +678,8 @@
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
-  .left-6 {
-    left: calc(var(--spacing) * 6);
+  .left-4 {
+    left: calc(var(--spacing) * 4);
   }
   .left-\[50\%\] {
     left: 50%;
@@ -695,11 +687,17 @@
   .z-10 {
     z-index: 10;
   }
+  .z-20 {
+    z-index: 20;
+  }
+  .z-30 {
+    z-index: 30;
+  }
   .z-50 {
     z-index: 50;
   }
-  .z-\[1\] {
-    z-index: 1;
+  .col-span-1 {
+    grid-column: span 1 / span 1;
   }
   .col-span-2 {
     grid-column: span 2 / span 2;
@@ -710,15 +708,18 @@
   .col-span-4 {
     grid-column: span 4 / span 4;
   }
+  .col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .col-span-12 {
+    grid-column: span 12 / span 12;
+  }
   .row-span-1 {
     grid-row: span 1 / span 1;
   }
   .row-span-2 {
     grid-row: span 2 / span 2;
   }
-  .row-span-3 {
-    grid-row: span 3 / span 3;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -740,9 +741,6 @@
   .m-0 {
     margin: calc(var(--spacing) * 0);
   }
-  .m-1 {
-    margin: calc(var(--spacing) * 1);
-  }
   .m-4 {
     margin: calc(var(--spacing) * 4);
   }
@@ -752,27 +750,45 @@
   .-mx-2 {
     margin-inline: calc(var(--spacing) * -2);
   }
+  .-mx-6 {
+    margin-inline: calc(var(--spacing) * -6);
+  }
+  .mx-0\.5 {
+    margin-inline: calc(var(--spacing) * 0.5);
+  }
   .mx-1 {
     margin-inline: calc(var(--spacing) * 1);
   }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
   .mx-auto {
     margin-inline: auto;
   }
+  .my-0\.5 {
+    margin-block: calc(var(--spacing) * 0.5);
+  }
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
+  .my-3 {
+    margin-block: calc(var(--spacing) * 3);
+  }
+  .my-10 {
+    margin-block: calc(var(--spacing) * 10);
+  }
+  .ms-1 {
+    margin-inline-start: calc(var(--spacing) * 1);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
-  .mt-1\.5 {
-    margin-top: calc(var(--spacing) * 1.5);
-  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -791,8 +807,8 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
-  .mt-16 {
-    margin-top: calc(var(--spacing) * 16);
+  .mt-20 {
+    margin-top: calc(var(--spacing) * 20);
   }
   .mt-24 {
     margin-top: calc(var(--spacing) * 24);
@@ -800,12 +816,18 @@
   .mt-auto {
     margin-top: auto;
   }
+  .-mr-2 {
+    margin-right: calc(var(--spacing) * -2);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mr-auto {
+    margin-right: auto;
+  }
   .mb-1 {
     margin-bottom: calc(var(--spacing) * 1);
   }
@@ -821,20 +843,20 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
-  .mb-12 {
-    margin-bottom: calc(var(--spacing) * 12);
-  }
   .-ml-3 {
     margin-left: calc(var(--spacing) * -3);
   }
-  .-ml-px {
-    margin-left: -1px;
+  .ml-0\.5 {
+    margin-left: calc(var(--spacing) * 0.5);
   }
   .ml-1 {
     margin-left: calc(var(--spacing) * 1);
@@ -860,15 +882,12 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
   }
-  .line-clamp-2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
   .block {
     display: block;
   }
+  .contents {
+    display: contents;
+  }
   .flex {
     display: flex;
   }
@@ -881,12 +900,18 @@
   .inline {
     display: inline;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
   .table {
     display: table;
   }
+  .aspect-auto {
+    aspect-ratio: auto;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -901,6 +926,16 @@
     width: --cell-size;
     height: --cell-size;
   }
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
   .h-1\.5 {
     height: calc(var(--spacing) * 1.5);
   }
@@ -982,12 +1017,18 @@
   .h-\[2px\] {
     height: 2px;
   }
-  .h-\[40px\] {
-    height: 40px;
+  .h-\[18px\] {
+    height: 18px;
+  }
+  .h-\[42px\] {
+    height: 42px;
   }
   .h-\[60px\] {
     height: 60px;
   }
+  .h-\[120px\] {
+    height: 120px;
+  }
   .h-\[140px\] {
     height: 140px;
   }
@@ -997,30 +1038,33 @@
   .h-\[200px\] {
     height: 200px;
   }
+  .h-\[250px\] {
+    height: 250px;
+  }
   .h-\[300px\] {
     height: 300px;
   }
+  .h-\[360px\] {
+    height: 360px;
+  }
   .h-\[400px\] {
     height: 400px;
   }
   .h-\[500px\] {
     height: 500px;
   }
+  .h-\[560px\] {
+    height: 560px;
+  }
   .h-\[600px\] {
     height: 600px;
   }
   .h-\[700px\] {
     height: 700px;
   }
-  .h-\[calc\(75vh-80px\)\] {
-    height: calc(75vh - 80px);
-  }
   .h-\[calc\(100vh-10rem\)\] {
     height: calc(100vh - 10rem);
   }
-  .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
-    height: var(--radix-navigation-menu-viewport-height);
-  }
   .h-\[var\(--radix-select-trigger-height\)\] {
     height: var(--radix-select-trigger-height);
   }
@@ -1036,6 +1080,9 @@
   .h-screen {
     height: 100vh;
   }
+  .max-h-16 {
+    max-height: calc(var(--spacing) * 16);
+  }
   .max-h-40 {
     max-height: calc(var(--spacing) * 40);
   }
@@ -1045,8 +1092,11 @@
   .max-h-\[--radix-select-content-available-height\] {
     max-height: --radix-select-content-available-height;
   }
-  .max-h-\[75vh\] {
-    max-height: 75vh;
+  .max-h-\[85vh\] {
+    max-height: 85vh;
+  }
+  .max-h-\[120px\] {
+    max-height: 120px;
   }
   .max-h-\[300px\] {
     max-height: 300px;
@@ -1057,6 +1107,9 @@
   .max-h-full {
     max-height: 100%;
   }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
   .min-h-5 {
     min-height: calc(var(--spacing) * 5);
   }
@@ -1066,11 +1119,14 @@
   .min-h-\[32px\] {
     min-height: 32px;
   }
+  .min-h-\[78px\] {
+    min-height: 78px;
+  }
   .min-h-\[80px\] {
     min-height: 80px;
   }
-  .min-h-\[120px\] {
-    min-height: 120px;
+  .min-h-\[124px\] {
+    min-height: 124px;
   }
   .min-h-\[400px\] {
     min-height: 400px;
@@ -1084,12 +1140,24 @@
   .w-1 {
     width: calc(var(--spacing) * 1);
   }
+  .w-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+  }
+  .w-1\/2 {
+    width: calc(1/2 * 100%);
+  }
+  .w-1\/3 {
+    width: calc(1/3 * 100%);
+  }
   .w-2 {
     width: calc(var(--spacing) * 2);
   }
   .w-2\.5 {
     width: calc(var(--spacing) * 2.5);
   }
+  .w-2\/3 {
+    width: calc(2/3 * 100%);
+  }
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -1141,12 +1209,24 @@
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
   .w-32 {
     width: calc(var(--spacing) * 32);
   }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+  .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
+  .w-52 {
+    width: calc(var(--spacing) * 52);
+  }
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
@@ -1177,17 +1257,26 @@
   .w-\[2px\] {
     width: 2px;
   }
+  .w-\[18px\] {
+    width: 18px;
+  }
   .w-\[40px\] {
     width: 40px;
   }
-  .w-\[41px\] {
-    width: 41px;
+  .w-\[42px\] {
+    width: 42px;
+  }
+  .w-\[50px\] {
+    width: 50px;
   }
-  .w-\[60\%\] {
-    width: 60%;
+  .w-\[60px\] {
+    width: 60px;
   }
-  .w-\[80\%\] {
-    width: 80%;
+  .w-\[70px\] {
+    width: 70px;
+  }
+  .w-\[80px\] {
+    width: 80px;
   }
   .w-\[100px\] {
     width: 100px;
@@ -1195,9 +1284,21 @@
   .w-\[110px\] {
     width: 110px;
   }
+  .w-\[120px\] {
+    width: 120px;
+  }
+  .w-\[130px\] {
+    width: 130px;
+  }
+  .w-\[140px\] {
+    width: 140px;
+  }
   .w-\[150px\] {
     width: 150px;
   }
+  .w-\[160px\] {
+    width: 160px;
+  }
   .w-\[180px\] {
     width: 180px;
   }
@@ -1213,21 +1314,51 @@
   .w-\[300px\] {
     width: 300px;
   }
+  .w-\[320px\] {
+    width: 320px;
+  }
   .w-\[350px\] {
     width: 350px;
   }
+  .w-\[360px\] {
+    width: 360px;
+  }
   .w-\[400px\] {
     width: 400px;
   }
+  .w-\[420px\] {
+    width: 420px;
+  }
   .w-\[450px\] {
     width: 450px;
   }
+  .w-\[480px\] {
+    width: 480px;
+  }
+  .w-\[500px\] {
+    width: 500px;
+  }
+  .w-\[550px\] {
+    width: 550px;
+  }
   .w-\[600px\] {
     width: 600px;
   }
+  .w-\[680px\] {
+    width: 680px;
+  }
   .w-\[700px\] {
     width: 700px;
   }
+  .w-\[760px\] {
+    width: 760px;
+  }
+  .w-\[900px\] {
+    width: 900px;
+  }
+  .w-\[930px\] {
+    width: 930px;
+  }
   .w-auto {
     width: auto;
   }
@@ -1237,9 +1368,6 @@
   .w-full {
     width: 100%;
   }
-  .w-max {
-    width: max-content;
-  }
   .w-px {
     width: 1px;
   }
@@ -1252,29 +1380,44 @@
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
+  .max-w-5xl {
+    max-width: var(--container-5xl);
+  }
   .max-w-6xl {
     max-width: var(--container-6xl);
   }
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
+  .max-w-\[6rem\] {
+    max-width: 6rem;
+  }
+  .max-w-\[85\%\] {
+    max-width: 85%;
+  }
   .max-w-\[120px\] {
     max-width: 120px;
   }
   .max-w-\[200px\] {
     max-width: 200px;
   }
-  .max-w-\[240px\] {
-    max-width: 240px;
+  .max-w-\[220px\] {
+    max-width: 220px;
   }
-  .max-w-\[260px\] {
-    max-width: 260px;
+  .max-w-\[360px\] {
+    max-width: 360px;
   }
-  .max-w-\[280px\] {
-    max-width: 280px;
+  .max-w-\[477px\] {
+    max-width: 477px;
   }
-  .max-w-\[320px\] {
-    max-width: 320px;
+  .max-w-\[640px\] {
+    max-width: 640px;
+  }
+  .max-w-\[680px\] {
+    max-width: 680px;
   }
   .max-w-\[800px\] {
     max-width: 800px;
@@ -1282,24 +1425,33 @@
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
+  .max-w-\[calc\(100\%-32px\)\] {
+    max-width: calc(100% - 32px);
+  }
   .max-w-full {
     max-width: 100%;
   }
   .max-w-lg {
     max-width: var(--container-lg);
   }
-  .max-w-max {
-    max-width: max-content;
-  }
   .max-w-md {
     max-width: var(--container-md);
   }
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
+  .max-w-xs {
+    max-width: var(--container-xs);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
+  .min-w-5 {
+    min-width: calc(var(--spacing) * 5);
+  }
   .min-w-9 {
     min-width: calc(var(--spacing) * 9);
   }
@@ -1312,18 +1464,12 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
-  .min-w-\[12rem\] {
-    min-width: 12rem;
-  }
   .min-w-\[var\(--radix-select-trigger-width\)\] {
     min-width: var(--radix-select-trigger-width);
   }
   .flex-1 {
     flex: 1;
   }
-  .flex-shrink-0 {
-    flex-shrink: 0;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1345,9 +1491,6 @@
   .origin-\[--radix-hover-card-content-transform-origin\] {
     transform-origin: --radix-hover-card-content-transform-origin;
   }
-  .origin-\[--radix-menubar-content-transform-origin\] {
-    transform-origin: --radix-menubar-content-transform-origin;
-  }
   .origin-\[--radix-popover-content-transform-origin\] {
     transform-origin: --radix-popover-content-transform-origin;
   }
@@ -1372,6 +1515,10 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .-translate-y-2 {
+    --tw-translate-y: calc(var(--spacing) * -2);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-\[-50\%\] {
     --tw-translate-y: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1388,15 +1535,26 @@
     --tw-scale-z: 110%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
-  .rotate-45 {
-    rotate: 45deg;
+  .-scale-x-100 {
+    --tw-scale-x: calc(100% * -1);
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .-scale-y-100 {
+    --tw-scale-y: calc(100% * -1);
+    scale: var(--tw-scale-x) var(--tw-scale-y);
   }
   .rotate-90 {
     rotate: 90deg;
   }
+  .rotate-180 {
+    rotate: 180deg;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
+  .animate-none {
+    animation: none;
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -1409,6 +1567,12 @@
   .cursor-default {
     cursor: default;
   }
+  .cursor-grab {
+    cursor: grab;
+  }
+  .cursor-help {
+    cursor: help;
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -1433,8 +1597,8 @@
   .list-disc {
     list-style-type: disc;
   }
-  .list-none {
-    list-style-type: none;
+  .appearance-none {
+    appearance: none;
   }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -1448,9 +1612,15 @@
   .grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
   .grid-cols-11 {
     grid-template-columns: repeat(11, minmax(0, 1fr));
   }
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1520,18 +1690,39 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .gap-7 {
+    gap: calc(var(--spacing) * 7);
+  }
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
+  .gap-10 {
+    gap: calc(var(--spacing) * 10);
+  }
+  .gap-\[15px\] {
+    gap: 15px;
+  }
+  .gap-\[18px\] {
+    gap: 18px;
+  }
+  .gap-\[37px\] {
+    gap: 37px;
+  }
   .space-y-0 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1581,6 +1772,13 @@
       margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-6 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1595,6 +1793,13 @@
       margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-10 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-12 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1609,16 +1814,12 @@
       margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-6 {
+    column-gap: calc(var(--spacing) * 6);
+  }
   .gap-x-8 {
     column-gap: calc(var(--spacing) * 8);
   }
-  .space-x-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-x-reverse: 0;
-      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
-      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
-    }
-  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1636,6 +1837,9 @@
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }
+  .gap-y-3 {
+    row-gap: calc(var(--spacing) * 3);
+  }
   .self-end {
     align-self: flex-end;
   }
@@ -1671,6 +1875,24 @@
   .rounded-3xl {
     border-radius: var(--radius-3xl);
   }
+  .rounded-\[2px\] {
+    border-radius: 2px;
+  }
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
+  .rounded-\[10px\] {
+    border-radius: 10px;
+  }
+  .rounded-\[12px\] {
+    border-radius: 12px;
+  }
+  .rounded-\[20px\] {
+    border-radius: 20px;
+  }
+  .rounded-\[32px\] {
+    border-radius: 32px;
+  }
   .rounded-\[inherit\] {
     border-radius: inherit;
   }
@@ -1723,12 +1945,8 @@
     border-top-left-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
   }
-  .rounded-l-none {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  .rounded-tl-sm {
-    border-top-left-radius: var(--radius-sm);
+  .rounded-tl-2xl {
+    border-top-left-radius: var(--radius-2xl);
   }
   .rounded-r-2xl {
     border-top-right-radius: var(--radius-2xl);
@@ -1738,6 +1956,9 @@
     border-top-right-radius: var(--radius-md);
     border-bottom-right-radius: var(--radius-md);
   }
+  .rounded-tr-2xl {
+    border-top-right-radius: var(--radius-2xl);
+  }
   .rounded-b-2xl {
     border-bottom-right-radius: var(--radius-2xl);
     border-bottom-left-radius: var(--radius-2xl);
@@ -1746,6 +1967,15 @@
     border-bottom-right-radius: var(--radius-md);
     border-bottom-left-radius: var(--radius-md);
   }
+  .rounded-br-\[4px\] {
+    border-bottom-right-radius: 4px;
+  }
+  .rounded-br-sm {
+    border-bottom-right-radius: var(--radius-sm);
+  }
+  .rounded-bl-2xl {
+    border-bottom-left-radius: var(--radius-2xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -1758,6 +1988,10 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .border-\[1\.5px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+  }
   .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1782,10 +2016,6 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
-  .border-l-0 {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 0px;
-  }
   .border-l-2 {
     border-left-style: var(--tw-border-style);
     border-left-width: 2px;
@@ -1794,52 +2024,58 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-border {
+  .border-\(--color-border\) {
     border-color: var(--color-border);
   }
+  .border-border {
+    border-color: var(--border);
+  }
   .border-border-de-emp {
-    border-color: var(--color-border-de-emp);
+    border-color: var(--border-de-emp);
   }
-  .border-border\/20 {
-    border-color: var(--color-border);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-border) 20%, transparent);
-    }
+  .border-border-deep {
+    border-color: var(--border-deep);
   }
-  .border-border\/30 {
-    border-color: var(--color-border);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-border) 30%, transparent);
-    }
+  .border-border-hover {
+    border-color: var(--border-hover);
   }
-  .border-border\/40 {
-    border-color: var(--color-border);
+  .border-border-inverse {
+    border-color: var(--border-inverse);
+  }
+  .border-border-muted {
+    border-color: var(--border-muted);
+  }
+  .border-border-subtle {
+    border-color: var(--border-subtle);
+  }
+  .border-border\/30 {
+    border-color: var(--border);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-border) 40%, transparent);
+      border-color: color-mix(in oklab, var(--border) 30%, transparent);
     }
   }
   .border-border\/50 {
-    border-color: var(--color-border);
+    border-color: var(--border);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
+      border-color: color-mix(in oklab, var(--border) 50%, transparent);
     }
   }
+  .border-brand {
+    border-color: var(--brand);
+  }
   .border-current {
     border-color: currentcolor;
   }
-  .border-destructive {
-    border-color: var(--color-destructive);
-  }
   .border-destructive\/20 {
-    border-color: var(--color-destructive);
+    border-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-destructive) 20%, transparent);
+      border-color: color-mix(in oklab, var(--destructive) 20%, transparent);
     }
   }
   .border-destructive\/50 {
-    border-color: var(--color-destructive);
+    border-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-destructive) 50%, transparent);
+      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
     }
   }
   .border-gray-200 {
@@ -1860,13 +2096,19 @@
       border-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
     }
   }
+  .border-hover {
+    border-color: var(--color-hover);
+  }
   .border-input {
-    border-color: var(--color-input);
+    border-color: var(--input);
+  }
+  .border-muted {
+    border-color: var(--muted);
   }
   .border-muted-foreground\/25 {
-    border-color: var(--color-muted-foreground);
+    border-color: var(--muted-foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-muted-foreground) 25%, transparent);
+      border-color: color-mix(in oklab, var(--muted-foreground) 25%, transparent);
     }
   }
   .border-orange-200 {
@@ -1876,18 +2118,18 @@
     border-color: var(--color-orange-300);
   }
   .border-primary {
-    border-color: var(--color-primary);
+    border-color: var(--primary);
   }
   .border-primary\/20 {
-    border-color: var(--color-primary);
+    border-color: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+      border-color: color-mix(in oklab, var(--primary) 20%, transparent);
     }
   }
   .border-primary\/30 {
-    border-color: var(--color-primary);
+    border-color: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
+      border-color: color-mix(in oklab, var(--primary) 30%, transparent);
     }
   }
   .border-red-200 {
@@ -1902,8 +2144,14 @@
       border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
     }
   }
+  .border-red-500\/30 {
+    border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
+    }
+  }
   .border-ring {
-    border-color: var(--color-ring);
+    border-color: var(--ring);
   }
   .border-transparent {
     border-color: transparent;
@@ -1917,31 +2165,43 @@
       border-color: color-mix(in oklab, var(--color-yellow-500) 20%, transparent);
     }
   }
-  .border-y-border {
-    border-block-color: var(--color-border);
+  .border-zinc-200 {
+    border-color: var(--color-zinc-200);
+  }
+  .border-zinc-600 {
+    border-color: var(--color-zinc-600);
+  }
+  .border-zinc-700 {
+    border-color: var(--color-zinc-700);
+  }
+  .border-zinc-800 {
+    border-color: var(--color-zinc-800);
+  }
+  .border-zinc-900 {
+    border-color: var(--color-zinc-900);
   }
   .border-t-transparent {
     border-top-color: transparent;
   }
-  .border-r-border {
-    border-right-color: var(--color-border);
-  }
-  .border-l-background {
-    border-left-color: var(--color-background);
+  .border-b-transparent {
+    border-bottom-color: transparent;
   }
   .border-l-transparent {
     border-left-color: transparent;
   }
+  .bg-\(--color-bg\) {
+    background-color: var(--color-bg);
+  }
   .bg-\[\#ff0000\] {
     background-color: #ff0000;
   }
   .bg-accent {
-    background-color: var(--color-accent);
+    background-color: var(--accent);
   }
   .bg-accent\/50 {
-    background-color: var(--color-accent);
+    background-color: var(--accent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
     }
   }
   .bg-amber-50 {
@@ -1978,12 +2238,12 @@
     background-color: var(--color-amber-950);
   }
   .bg-background {
-    background-color: var(--color-background);
+    background-color: var(--background);
   }
   .bg-background\/80 {
-    background-color: var(--color-background);
+    background-color: var(--background);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-background) 80%, transparent);
+      background-color: color-mix(in oklab, var(--background) 80%, transparent);
     }
   }
   .bg-black {
@@ -2019,6 +2279,18 @@
   .bg-blue-500 {
     background-color: var(--color-blue-500);
   }
+  .bg-blue-500\/0 {
+    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 0%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-500) 0%, transparent);
+    }
+  }
+  .bg-blue-500\/10 {
+    background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
+    }
+  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
@@ -2035,10 +2307,37 @@
     background-color: var(--color-blue-950);
   }
   .bg-border {
-    background-color: var(--color-border);
+    background-color: var(--border);
+  }
+  .bg-border-subtle {
+    background-color: var(--border-subtle);
+  }
+  .bg-brand {
+    background-color: var(--brand);
+  }
+  .bg-brand-subtle {
+    background-color: var(--brand-subtle);
+  }
+  .bg-brand\/10 {
+    background-color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--brand) 10%, transparent);
+    }
+  }
+  .bg-brand\/60 {
+    background-color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--brand) 60%, transparent);
+    }
   }
   .bg-card {
-    background-color: var(--color-card);
+    background-color: var(--card);
+  }
+  .bg-card\/50 {
+    background-color: var(--card);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--card) 50%, transparent);
+    }
   }
   .bg-cyan-50 {
     background-color: var(--color-cyan-50);
@@ -2074,12 +2373,15 @@
     background-color: var(--color-cyan-950);
   }
   .bg-destructive {
-    background-color: var(--color-destructive);
+    background-color: var(--destructive);
+  }
+  .bg-destructive-foreground {
+    background-color: var(--destructive-foreground);
   }
   .bg-destructive\/10 {
-    background-color: var(--color-destructive);
+    background-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
     }
   }
   .bg-emerald-50 {
@@ -2115,6 +2417,9 @@
   .bg-emerald-950 {
     background-color: var(--color-emerald-950);
   }
+  .bg-foreground {
+    background-color: var(--foreground);
+  }
   .bg-fuchsia-50 {
     background-color: var(--color-fuchsia-50);
   }
@@ -2205,6 +2510,12 @@
       background-color: color-mix(in oklab, var(--color-green-500) 5%, transparent);
     }
   }
+  .bg-green-500\/10 {
+    background-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
+    }
+  }
   .bg-green-600 {
     background-color: var(--color-green-600);
   }
@@ -2254,42 +2565,39 @@
     background-color: var(--color-indigo-950);
   }
   .bg-muted {
-    background-color: var(--color-muted);
+    background-color: var(--muted);
   }
-  .bg-muted\/10 {
-    background-color: var(--color-muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 10%, transparent);
-    }
+  .bg-muted-foreground {
+    background-color: var(--muted-foreground);
   }
   .bg-muted\/20 {
-    background-color: var(--color-muted);
+    background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 20%, transparent);
+      background-color: color-mix(in oklab, var(--muted) 20%, transparent);
     }
   }
   .bg-muted\/30 {
-    background-color: var(--color-muted);
+    background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 30%, transparent);
+      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
     }
   }
   .bg-muted\/40 {
-    background-color: var(--color-muted);
+    background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
+      background-color: color-mix(in oklab, var(--muted) 40%, transparent);
     }
   }
   .bg-muted\/50 {
-    background-color: var(--color-muted);
+    background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
     }
   }
   .bg-muted\/80 {
-    background-color: var(--color-muted);
+    background-color: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-muted) 80%, transparent);
+      background-color: color-mix(in oklab, var(--muted) 80%, transparent);
     }
   }
   .bg-orange-50 {
@@ -2359,27 +2667,30 @@
     background-color: var(--color-pink-950);
   }
   .bg-popover {
-    background-color: var(--color-popover);
+    background-color: var(--popover);
   }
   .bg-primary {
-    background-color: var(--color-primary);
+    background-color: var(--primary);
+  }
+  .bg-primary-foreground {
+    background-color: var(--primary-foreground);
   }
   .bg-primary\/5 {
-    background-color: var(--color-primary);
+    background-color: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
+      background-color: color-mix(in oklab, var(--primary) 5%, transparent);
     }
   }
   .bg-primary\/10 {
-    background-color: var(--color-primary);
+    background-color: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
+      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
     }
   }
   .bg-primary\/20 {
-    background-color: var(--color-primary);
+    background-color: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
     }
   }
   .bg-purple-50 {
@@ -2439,6 +2750,12 @@
       background-color: color-mix(in oklab, var(--color-red-500) 5%, transparent);
     }
   }
+  .bg-red-500\/10 {
+    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
+    }
+  }
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
@@ -2488,7 +2805,7 @@
     background-color: var(--color-rose-950);
   }
   .bg-secondary {
-    background-color: var(--color-secondary);
+    background-color: var(--secondary);
   }
   .bg-sky-50 {
     background-color: var(--color-sky-50);
@@ -2556,6 +2873,54 @@
   .bg-slate-950 {
     background-color: var(--color-slate-950);
   }
+  .bg-success\/10 {
+    background-color: var(--success);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--success) 10%, transparent);
+    }
+  }
+  .bg-surface {
+    background-color: var(--surface);
+  }
+  .bg-surface-hover {
+    background-color: var(--surface-hover);
+  }
+  .bg-surface-inverse {
+    background-color: var(--surface-inverse);
+  }
+  .bg-surface-muted {
+    background-color: var(--surface-muted);
+  }
+  .bg-surface-overlay {
+    background-color: var(--surface-overlay);
+  }
+  .bg-surface-overlay\/50 {
+    background-color: var(--surface-overlay);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--surface-overlay) 50%, transparent);
+    }
+  }
+  .bg-surface-raised {
+    background-color: var(--surface-raised);
+  }
+  .bg-surface-raised\/20 {
+    background-color: var(--surface-raised);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--surface-raised) 20%, transparent);
+    }
+  }
+  .bg-surface-raised\/40 {
+    background-color: var(--surface-raised);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--surface-raised) 40%, transparent);
+    }
+  }
+  .bg-surface-raised\/50 {
+    background-color: var(--surface-raised);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--surface-raised) 50%, transparent);
+    }
+  }
   .bg-teal-50 {
     background-color: var(--color-teal-50);
   }
@@ -2625,6 +2990,9 @@
   .bg-violet-950 {
     background-color: var(--color-violet-950);
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .bg-yellow-50 {
     background-color: var(--color-yellow-50);
   }
@@ -2649,6 +3017,12 @@
       background-color: color-mix(in oklab, var(--color-yellow-500) 5%, transparent);
     }
   }
+  .bg-yellow-500\/10 {
+    background-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-yellow-500) 10%, transparent);
+    }
+  }
   .bg-yellow-600 {
     background-color: var(--color-yellow-600);
   }
@@ -2709,25 +3083,36 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .bg-gradient-1 {
+    background-image: var(--gradient-1);
+  }
+  .bg-gradient-2 {
+    background-image: var(--gradient-2);
+  }
+  .bg-gradient-3 {
+    background-image: var(--gradient-3);
+  }
+  .bg-gradient-4 {
+    background-image: var(--gradient-4);
+  }
+  .bg-gradient-5 {
+    background-image: var(--gradient-5);
+  }
+  .bg-gradient-6 {
+    background-image: var(--gradient-6);
+  }
   .from-background {
-    --tw-gradient-from: var(--color-background);
+    --tw-gradient-from: var(--background);
     --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-foreground {
-    --tw-gradient-from: var(--color-foreground);
-    --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-muted\/50 {
-    --tw-gradient-from: var(--color-muted);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--color-muted) 50%, transparent);
-    }
+    --tw-gradient-from: var(--foreground);
     --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\/5 {
-    --tw-gradient-from: var(--color-primary);
+    --tw-gradient-from: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--color-primary) 5%, transparent);
+      --tw-gradient-from: color-mix(in oklab, var(--primary) 5%, 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));
   }
@@ -2735,34 +3120,34 @@
     --tw-gradient-from: var(--color-purple-600);
     --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-surface {
+    --tw-gradient-from: var(--surface);
+    --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-background {
-    --tw-gradient-via: var(--color-background);
+    --tw-gradient-via: var(--background);
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
   .via-primary\/10 {
-    --tw-gradient-via: var(--color-primary);
+    --tw-gradient-via: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-via: color-mix(in oklab, var(--color-primary) 10%, transparent);
+      --tw-gradient-via: color-mix(in oklab, var(--primary) 10%, transparent);
     }
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
   .to-foreground\/70 {
-    --tw-gradient-to: var(--color-foreground);
+    --tw-gradient-to: var(--foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--color-foreground) 70%, transparent);
+      --tw-gradient-to: color-mix(in oklab, var(--foreground) 70%, 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-muted {
-    --tw-gradient-to: var(--color-muted);
-    --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-muted\/20 {
-    --tw-gradient-to: var(--color-muted);
+    --tw-gradient-to: var(--muted);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--color-muted) 20%, transparent);
+      --tw-gradient-to: color-mix(in oklab, var(--muted) 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));
   }
@@ -2771,18 +3156,28 @@
     --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\/5 {
-    --tw-gradient-to: var(--color-primary);
+    --tw-gradient-to: var(--primary);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--color-primary) 5%, transparent);
+      --tw-gradient-to: color-mix(in oklab, var(--primary) 5%, 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-surface-raised {
+    --tw-gradient-to: var(--surface-raised);
+    --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));
+  }
   .bg-clip-text {
     background-clip: text;
   }
   .fill-current {
     fill: currentcolor;
   }
+  .fill-foreground {
+    fill: var(--foreground);
+  }
+  .fill-muted-foreground {
+    fill: var(--muted-foreground);
+  }
   .fill-yellow-400 {
     fill: var(--color-yellow-400);
   }
@@ -2798,9 +3193,6 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
-  .p-1\.5 {
-    padding: calc(var(--spacing) * 1.5);
-  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -2849,9 +3241,15 @@
   .px-8 {
     padding-inline: calc(var(--spacing) * 8);
   }
+  .px-10 {
+    padding-inline: calc(var(--spacing) * 10);
+  }
   .px-\[--cell-size\] {
     padding-inline: --cell-size;
   }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -2864,12 +3262,18 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -2891,21 +3295,33 @@
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-0\.5 {
+    padding-top: calc(var(--spacing) * 0.5);
+  }
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-2\.5 {
+    padding-top: calc(var(--spacing) * 2.5);
+  }
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
   .pt-8 {
     padding-top: calc(var(--spacing) * 8);
   }
+  .pt-\[18px\] {
+    padding-top: 18px;
+  }
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
@@ -2915,12 +3331,24 @@
   .pr-2\.5 {
     padding-right: calc(var(--spacing) * 2.5);
   }
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
+  .pr-6 {
+    padding-right: calc(var(--spacing) * 6);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
+  .pr-10 {
+    padding-right: calc(var(--spacing) * 10);
+  }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -2933,8 +3361,11 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
-  .pb-12 {
-    padding-bottom: calc(var(--spacing) * 12);
+  .pl-0 {
+    padding-left: calc(var(--spacing) * 0);
+  }
+  .pl-1 {
+    padding-left: calc(var(--spacing) * 1);
   }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
@@ -2945,18 +3376,27 @@
   .pl-3 {
     padding-left: calc(var(--spacing) * 3);
   }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+  .pl-5 {
+    padding-left: calc(var(--spacing) * 5);
+  }
   .pl-6 {
     padding-left: calc(var(--spacing) * 6);
   }
-  .pl-7 {
-    padding-left: calc(var(--spacing) * 7);
-  }
   .pl-8 {
     padding-left: calc(var(--spacing) * 8);
   }
+  .pl-9 {
+    padding-left: calc(var(--spacing) * 9);
+  }
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
+  .pl-12 {
+    padding-left: calc(var(--spacing) * 12);
+  }
   .text-center {
     text-align: center;
   }
@@ -2972,6 +3412,9 @@
   .font-mono {
     font-family: var(--font-mono);
   }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -3007,12 +3450,54 @@
   .text-\[0\.8rem\] {
     font-size: 0.8rem;
   }
+  .text-\[2rem\] {
+    font-size: 2rem;
+  }
   .text-\[9px\] {
     font-size: 9px;
   }
   .text-\[10px\] {
     font-size: 10px;
   }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
+  .text-\[12px\] {
+    font-size: 12px;
+  }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
+  .text-\[15px\] {
+    font-size: 15px;
+  }
+  .text-\[40px\] {
+    font-size: 40px;
+  }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
+  .leading-7 {
+    --tw-leading: calc(var(--spacing) * 7);
+    line-height: calc(var(--spacing) * 7);
+  }
+  .leading-9 {
+    --tw-leading: calc(var(--spacing) * 9);
+    line-height: calc(var(--spacing) * 9);
+  }
+  .leading-\[18px\] {
+    --tw-leading: 18px;
+    line-height: 18px;
+  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
@@ -3025,10 +3510,6 @@
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
-  .leading-snug {
-    --tw-leading: var(--leading-snug);
-    line-height: var(--leading-snug);
-  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -3053,6 +3534,26 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .tracking-\[-0\.3px\] {
+    --tw-tracking: -0.3px;
+    letter-spacing: -0.3px;
+  }
+  .tracking-\[-0\.4px\] {
+    --tw-tracking: -0.4px;
+    letter-spacing: -0.4px;
+  }
+  .tracking-\[-0\.6px\] {
+    --tw-tracking: -0.6px;
+    letter-spacing: -0.6px;
+  }
+  .tracking-\[-0\.8px\] {
+    --tw-tracking: -0.8px;
+    letter-spacing: -0.8px;
+  }
+  .tracking-\[-0\.35px\] {
+    --tw-tracking: -0.35px;
+    letter-spacing: -0.35px;
+  }
   .tracking-normal {
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
@@ -3065,6 +3566,10 @@
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
   }
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -3078,14 +3583,20 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .whitespace-pre {
+    white-space: pre;
+  }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
   .text-accent-foreground {
-    color: var(--color-accent-foreground);
+    color: var(--accent-foreground);
   }
-  .text-background {
-    color: var(--color-background);
+  .text-amber-500 {
+    color: var(--color-amber-500);
+  }
+  .text-blue-400 {
+    color: var(--color-blue-400);
   }
   .text-blue-500 {
     color: var(--color-blue-500);
@@ -3093,20 +3604,65 @@
   .text-blue-600 {
     color: var(--color-blue-600);
   }
+  .text-brand {
+    color: var(--brand);
+  }
   .text-card-foreground {
-    color: var(--color-card-foreground);
+    color: var(--card-foreground);
   }
   .text-current {
     color: currentcolor;
   }
   .text-destructive {
-    color: var(--color-destructive);
+    color: var(--destructive);
   }
   .text-destructive-foreground {
-    color: var(--color-destructive-foreground);
+    color: var(--destructive-foreground);
   }
   .text-foreground {
-    color: var(--color-foreground);
+    color: var(--foreground);
+  }
+  .text-foreground-accent {
+    color: var(--foreground-accent);
+  }
+  .text-foreground-accent-muted {
+    color: var(--foreground-accent-muted);
+  }
+  .text-foreground-accent\/70 {
+    color: var(--foreground-accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground-accent) 70%, transparent);
+    }
+  }
+  .text-foreground-accent\/80 {
+    color: var(--foreground-accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground-accent) 80%, transparent);
+    }
+  }
+  .text-foreground-hover {
+    color: var(--foreground-hover);
+  }
+  .text-foreground-inverse {
+    color: var(--foreground-inverse);
+  }
+  .text-foreground-muted {
+    color: var(--foreground-muted);
+  }
+  .text-foreground-on-accent {
+    color: var(--foreground-on-accent);
+  }
+  .text-foreground-secondary {
+    color: var(--foreground-secondary);
+  }
+  .text-foreground-subtle {
+    color: var(--foreground-subtle);
+  }
+  .text-foreground\/50 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 50%, transparent);
+    }
   }
   .text-gray-50 {
     color: var(--color-gray-50);
@@ -3120,6 +3676,9 @@
   .text-gray-600 {
     color: var(--color-gray-600);
   }
+  .text-green-400 {
+    color: var(--color-green-400);
+  }
   .text-green-500 {
     color: var(--color-green-500);
   }
@@ -3133,7 +3692,7 @@
     color: var(--color-green-800);
   }
   .text-muted-foreground {
-    color: var(--color-muted-foreground);
+    color: var(--muted-foreground);
   }
   .text-orange-500 {
     color: var(--color-orange-500);
@@ -3145,17 +3704,38 @@
     color: var(--color-orange-800);
   }
   .text-popover-foreground {
-    color: var(--color-popover-foreground);
+    color: var(--popover-foreground);
   }
   .text-primary {
-    color: var(--color-primary);
+    color: var(--primary);
   }
   .text-primary-foreground {
-    color: var(--color-primary-foreground);
+    color: var(--primary-foreground);
+  }
+  .text-primary\/60 {
+    color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--primary) 60%, transparent);
+    }
+  }
+  .text-primary\/70 {
+    color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--primary) 70%, transparent);
+    }
+  }
+  .text-primary\/80 {
+    color: var(--primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--primary) 80%, transparent);
+    }
   }
   .text-purple-600 {
     color: var(--color-purple-600);
   }
+  .text-red-400 {
+    color: var(--color-red-400);
+  }
   .text-red-500 {
     color: var(--color-red-500);
   }
@@ -3166,7 +3746,13 @@
     color: var(--color-red-800);
   }
   .text-secondary-foreground {
-    color: var(--color-secondary-foreground);
+    color: var(--secondary-foreground);
+  }
+  .text-success {
+    color: var(--success);
+  }
+  .text-transparent {
+    color: transparent;
   }
   .text-white {
     color: var(--color-white);
@@ -3186,6 +3772,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .normal-case {
+    text-transform: none;
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -3205,12 +3794,21 @@
   .underline {
     text-decoration-line: underline;
   }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .accent-primary {
+    accent-color: var(--primary);
+  }
   .opacity-0 {
     opacity: 0%;
   }
+  .opacity-40 {
+    opacity: 40%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -3234,6 +3832,14 @@
     --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-\[0px_4px_16px_0px_rgba\(0\,0\,0\,0\.25\)\] {
+    --tw-shadow: 0px 4px 16px 0px var(--tw-shadow-color, rgba(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-\[0px_4px_24px_0px_rgba\(0\,0\,0\,0\.25\)\] {
+    --tw-shadow: 0px 4px 24px 0px var(--tw-shadow-color, rgba(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-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));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3250,6 +3856,10 @@
     --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-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px 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-xs {
     --tw-shadow: 0 1px 2px 0 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);
@@ -3262,31 +3872,35 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-1 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-2 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .ring-brand\/30 {
+    --tw-ring-color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--brand) 30%, transparent);
+    }
+  }
   .ring-emerald-500 {
     --tw-ring-color: var(--color-emerald-500);
   }
   .ring-primary {
-    --tw-ring-color: var(--color-primary);
-  }
-  .ring-primary\/20 {
-    --tw-ring-color: var(--color-primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-    }
+    --tw-ring-color: var(--primary);
   }
   .ring-ring {
-    --tw-ring-color: var(--color-ring);
+    --tw-ring-color: var(--ring);
   }
   .ring-offset-1 {
     --tw-ring-offset-width: 1px;
     --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   }
   .ring-offset-background {
-    --tw-ring-offset-color: var(--color-background);
+    --tw-ring-offset-color: var(--background);
   }
   .outline {
     outline-style: var(--tw-outline-style);
@@ -3304,11 +3918,21 @@
     -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-xl {
+    --tw-backdrop-blur: blur(var(--blur-xl));
+    -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,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[width\] {
+    transition-property: width;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3329,6 +3953,13 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-none {
+    transition-property: none;
+  }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
@@ -3352,22 +3983,12 @@
   .\[--cell-size\:2\.75rem\] {
     --cell-size: 2.75rem;
   }
-  .group-hover\:bg-primary\/10 {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        background-color: var(--color-primary);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
-        }
-      }
-    }
-  }
   .group-hover\:bg-primary\/50 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
-        background-color: var(--color-primary);
+        background-color: var(--primary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+          background-color: color-mix(in oklab, var(--primary) 50%, transparent);
         }
       }
     }
@@ -3375,7 +3996,7 @@
   .group-hover\:text-primary {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
-        color: var(--color-primary);
+        color: var(--primary);
       }
     }
   }
@@ -3419,7 +4040,7 @@
   }
   .group-data-\[focused\=true\]\/day\:border-ring {
     &:is(:where(.group\/day)[data-focused="true"] *) {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
   }
   .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
@@ -3430,25 +4051,20 @@
   }
   .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
     &:is(:where(.group\/day)[data-focused="true"] *) {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
   }
   .group-data-\[resize-handle-state\=drag\]\:bg-primary {
     &:is(:where(.group)[data-resize-handle-state="drag"] *) {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
   }
   .group-data-\[resize-handle-state\=hover\]\:bg-primary {
     &:is(:where(.group)[data-resize-handle-state="hover"] *) {
-      background-color: var(--color-primary);
-    }
-  }
-  .group-data-\[state\=open\]\:rotate-180 {
-    &:is(:where(.group)[data-state="open"] *) {
-      rotate: 180deg;
+      background-color: var(--primary);
     }
   }
   .group-data-\[state\=open\]\/section\:rotate-90 {
@@ -3458,37 +4074,37 @@
   }
   .group-\[\.toast\]\:bg-muted {
     &:is(:where(.group):is(.toast) *) {
-      background-color: var(--color-muted);
+      background-color: var(--muted);
     }
   }
   .group-\[\.toast\]\:bg-primary {
     &:is(:where(.group):is(.toast) *) {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
   }
   .group-\[\.toast\]\:text-muted-foreground {
     &:is(:where(.group):is(.toast) *) {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
   }
   .group-\[\.toast\]\:text-primary-foreground {
     &:is(:where(.group):is(.toast) *) {
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
     }
   }
   .group-\[\.toaster\]\:border-border {
     &:is(:where(.group):is(.toaster) *) {
-      border-color: var(--color-border);
+      border-color: var(--border);
     }
   }
   .group-\[\.toaster\]\:bg-background {
     &:is(:where(.group):is(.toaster) *) {
-      background-color: var(--color-background);
+      background-color: var(--background);
     }
   }
   .group-\[\.toaster\]\:text-foreground {
     &:is(:where(.group):is(.toaster) *) {
-      color: var(--color-foreground);
+      color: var(--foreground);
     }
   }
   .group-\[\.toaster\]\:shadow-lg {
@@ -3532,20 +4148,17 @@
   }
   .file\:text-foreground {
     &::file-selector-button {
-      color: var(--color-foreground);
+      color: var(--foreground);
     }
   }
-  .placeholder\:text-muted-foreground {
+  .placeholder\:text-foreground-subtle {
     &::placeholder {
-      color: var(--color-muted-foreground);
+      color: var(--foreground-subtle);
     }
   }
-  .placeholder\:text-muted-foreground\/50 {
+  .placeholder\:text-muted-foreground {
     &::placeholder {
-      color: var(--color-muted-foreground);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
-      }
+      color: var(--muted-foreground);
     }
   }
   .after\:absolute {
@@ -3579,6 +4192,34 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .first\:bg-surface-hover {
+    &:first-child {
+      background-color: var(--surface-hover);
+    }
+  }
+  .first\:text-foreground {
+    &:first-child {
+      color: var(--foreground);
+    }
+  }
+  .last\:border-0 {
+    &:last-child {
+      border-style: var(--tw-border-style);
+      border-width: 0px;
+    }
+  }
+  .last\:border-b-0 {
+    &:last-child {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+  }
+  .even\:border-l {
+    &:nth-child(even) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+  }
   .hover\:scale-105 {
     &:hover {
       @media (hover: hover) {
@@ -3602,43 +4243,47 @@
   .hover\:border-border {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border);
+        border-color: var(--border);
       }
     }
   }
-  .hover\:border-border\/60 {
+  .hover\:border-border-hover {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-border) 60%, transparent);
-        }
+        border-color: var(--border-hover);
       }
     }
   }
-  .hover\:border-border\/70 {
+  .hover\:border-brand {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border);
-        @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-border) 70%, transparent);
-        }
+        border-color: var(--brand);
       }
     }
   }
   .hover\:border-primary {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-primary);
+        border-color: var(--primary);
       }
     }
   }
   .hover\:border-primary\/50 {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-primary);
+        border-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--primary) 50%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:border-red-500\/50 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+          border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent);
         }
       }
     }
@@ -3646,16 +4291,16 @@
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-accent);
+        background-color: var(--accent);
       }
     }
   }
   .hover\:bg-accent\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-accent);
+        background-color: var(--accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
+          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
         }
       }
     }
@@ -3663,7 +4308,21 @@
   .hover\:bg-background {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-background);
+        background-color: var(--background);
+      }
+    }
+  }
+  .hover\:bg-background-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background-hover);
+      }
+    }
+  }
+  .hover\:bg-blue-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-100);
       }
     }
   }
@@ -3674,12 +4333,52 @@
       }
     }
   }
+  .hover\:bg-brand\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--brand) 10%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-brand\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--brand) 20%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-brand\/40 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--brand) 40%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-brand\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--brand) 90%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-destructive\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-destructive);
+        background-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-destructive) 80%, transparent);
+          background-color: color-mix(in oklab, var(--destructive) 80%, transparent);
         }
       }
     }
@@ -3687,9 +4386,9 @@
   .hover\:bg-destructive\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-destructive);
+        background-color: var(--destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
+          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
         }
       }
     }
@@ -3701,19 +4400,36 @@
       }
     }
   }
+  .hover\:bg-green-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-green-50);
+      }
+    }
+  }
   .hover\:bg-muted {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-muted);
+        background-color: var(--muted);
+      }
+    }
+  }
+  .hover\:bg-muted-foreground\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--muted-foreground);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--muted-foreground) 20%, transparent);
+        }
       }
     }
   }
   .hover\:bg-muted\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-muted);
+        background-color: var(--muted);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-muted) 50%, transparent);
+          background-color: color-mix(in oklab, var(--muted) 50%, transparent);
         }
       }
     }
@@ -3721,9 +4437,9 @@
   .hover\:bg-muted\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-muted);
+        background-color: var(--muted);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-muted) 80%, transparent);
+          background-color: color-mix(in oklab, var(--muted) 80%, transparent);
         }
       }
     }
@@ -3731,9 +4447,9 @@
   .hover\:bg-primary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-primary);
+        background-color: var(--primary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+          background-color: color-mix(in oklab, var(--primary) 80%, transparent);
         }
       }
     }
@@ -3741,9 +4457,9 @@
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-primary);
+        background-color: var(--primary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
         }
       }
     }
@@ -3755,6 +4471,13 @@
       }
     }
   }
+  .hover\:bg-red-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-50);
+      }
+    }
+  }
   .hover\:bg-red-500 {
     &:hover {
       @media (hover: hover) {
@@ -3765,9 +4488,40 @@
   .hover\:bg-secondary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-secondary);
+        background-color: var(--secondary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-secondary) 80%, transparent);
+          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-surface {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface);
+      }
+    }
+  }
+  .hover\:bg-surface-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface-hover);
+      }
+    }
+  }
+  .hover\:bg-surface-overlay {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface-overlay);
+      }
+    }
+  }
+  .hover\:bg-surface-raised\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--surface-raised);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--surface-raised) 20%, transparent);
         }
       }
     }
@@ -3782,41 +4536,76 @@
   .hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-accent-foreground);
+        color: var(--accent-foreground);
       }
     }
   }
   .hover\:text-destructive {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-destructive);
+        color: var(--destructive);
       }
     }
   }
   .hover\:text-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-foreground);
+        color: var(--foreground);
+      }
+    }
+  }
+  .hover\:text-foreground-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--foreground-hover);
+      }
+    }
+  }
+  .hover\:text-foreground-muted {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--foreground-muted);
+      }
+    }
+  }
+  .hover\:text-green-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-green-700);
       }
     }
   }
   .hover\:text-muted-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-muted-foreground);
+        color: var(--muted-foreground);
       }
     }
   }
   .hover\:text-primary\/80 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-primary);
+        color: var(--primary);
         @supports (color: color-mix(in lab, red, red)) {
-          color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+          color: color-mix(in oklab, var(--primary) 80%, transparent);
         }
       }
     }
   }
+  .hover\:text-red-400 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-400);
+      }
+    }
+  }
+  .hover\:text-red-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-700);
+      }
+    }
+  }
   .hover\:no-underline {
     &:hover {
       @media (hover: hover) {
@@ -3827,7 +4616,21 @@
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
-        text-decoration-line: underline;
+        text-decoration-line: underline;
+      }
+    }
+  }
+  .hover\:opacity-80 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 80%;
+      }
+    }
+  }
+  .hover\:opacity-90 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 90%;
       }
     }
   }
@@ -3846,35 +4649,47 @@
       }
     }
   }
-  .hover\:shadow-sm {
-    &:hover {
-      @media (hover: hover) {
-        --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);
-      }
-    }
-  }
   .focus\:border-primary\/50 {
     &:focus {
-      border-color: var(--color-primary);
+      border-color: var(--primary);
       @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
+        border-color: color-mix(in oklab, var(--primary) 50%, transparent);
       }
     }
   }
   .focus\:bg-accent {
     &:focus {
-      background-color: var(--color-accent);
+      background-color: var(--accent);
+    }
+  }
+  .focus\:bg-surface-hover {
+    &:focus {
+      background-color: var(--surface-hover);
     }
   }
   .focus\:text-accent-foreground {
     &:focus {
-      color: var(--color-accent-foreground);
+      color: var(--accent-foreground);
+    }
+  }
+  .focus\:text-destructive {
+    &:focus {
+      color: var(--destructive);
+    }
+  }
+  .focus\:text-foreground {
+    &:focus {
+      color: var(--foreground);
     }
   }
-  .focus\:shadow-md {
+  .focus\:text-red-300 {
     &:focus {
-      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+      color: var(--color-red-300);
+    }
+  }
+  .focus\:ring-1 {
+    &:focus {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
@@ -3884,9 +4699,14 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-brand {
+    &:focus {
+      --tw-ring-color: var(--brand);
+    }
+  }
   .focus\:ring-ring {
     &:focus {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
     }
   }
   .focus\:ring-offset-2 {
@@ -3929,14 +4749,19 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:ring-brand {
+    &:focus-visible {
+      --tw-ring-color: var(--brand);
+    }
+  }
   .focus-visible\:ring-primary {
     &:focus-visible {
-      --tw-ring-color: var(--color-primary);
+      --tw-ring-color: var(--primary);
     }
   }
   .focus-visible\:ring-ring {
     &:focus-visible {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
     }
   }
   .focus-visible\:ring-offset-0 {
@@ -3959,7 +4784,7 @@
   }
   .focus-visible\:ring-offset-background {
     &:focus-visible {
-      --tw-ring-offset-color: var(--color-background);
+      --tw-ring-offset-color: var(--background);
     }
   }
   .focus-visible\:outline-none {
@@ -3976,6 +4801,19 @@
       scale: var(--tw-scale-x) var(--tw-scale-y);
     }
   }
+  .active\:cursor-grabbing {
+    &:active {
+      cursor: grabbing;
+    }
+  }
+  .active\:bg-brand\/60 {
+    &:active {
+      background-color: var(--brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--brand) 60%, transparent);
+      }
+    }
+  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -3986,6 +4824,11 @@
       cursor: not-allowed;
     }
   }
+  .disabled\:opacity-30 {
+    &:disabled {
+      opacity: 30%;
+    }
+  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -3993,7 +4836,7 @@
   }
   .has-focus\:border-ring {
     &:has(*:focus) {
-      border-color: var(--color-ring);
+      border-color: var(--ring);
     }
   }
   .has-focus\:ring-\[3px\] {
@@ -4004,9 +4847,9 @@
   }
   .has-focus\:ring-ring\/50 {
     &:has(*:focus) {
-      --tw-ring-color: var(--color-ring);
+      --tw-ring-color: var(--ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
       }
     }
   }
@@ -4017,7 +4860,12 @@
   }
   .aria-selected\:text-muted-foreground {
     &[aria-selected="true"] {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
+    }
+  }
+  .data-\[active\=true\]\:bg-surface-overlay {
+    &[data-active="true"] {
+      background-color: var(--surface-overlay);
     }
   }
   .data-\[disabled\]\:pointer-events-none {
@@ -4099,7 +4947,7 @@
   }
   .data-\[placeholder\]\:text-muted-foreground {
     &[data-placeholder] {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
   }
   .data-\[range-end\=true\]\:rounded-md {
@@ -4109,12 +4957,12 @@
   }
   .data-\[range-end\=true\]\:bg-primary {
     &[data-range-end="true"] {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
   }
   .data-\[range-end\=true\]\:text-primary-foreground {
     &[data-range-end="true"] {
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
     }
   }
   .data-\[range-middle\=true\]\:rounded-none {
@@ -4124,12 +4972,12 @@
   }
   .data-\[range-middle\=true\]\:bg-accent {
     &[data-range-middle="true"] {
-      background-color: var(--color-accent);
+      background-color: var(--accent);
     }
   }
   .data-\[range-middle\=true\]\:text-accent-foreground {
     &[data-range-middle="true"] {
-      color: var(--color-accent-foreground);
+      color: var(--accent-foreground);
     }
   }
   .data-\[range-start\=true\]\:rounded-md {
@@ -4139,37 +4987,37 @@
   }
   .data-\[range-start\=true\]\:bg-primary {
     &[data-range-start="true"] {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
   }
   .data-\[range-start\=true\]\:text-primary-foreground {
     &[data-range-start="true"] {
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
     }
   }
   .data-\[resize-handle-state\=drag\]\:bg-primary {
     &[data-resize-handle-state="drag"] {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
   }
   .data-\[resize-handle-state\=hover\]\:bg-primary {
     &[data-resize-handle-state="hover"] {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
   }
   .data-\[selected-single\=true\]\:bg-primary {
     &[data-selected-single="true"] {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
   }
   .data-\[selected-single\=true\]\:text-primary-foreground {
     &[data-selected-single="true"] {
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
     }
   }
   .data-\[selected\=\'true\'\]\:bg-accent {
     &[data-selected='true'] {
-      background-color: var(--color-accent);
+      background-color: var(--accent);
     }
   }
   .data-\[selected\=true\]\:rounded-none {
@@ -4179,7 +5027,7 @@
   }
   .data-\[selected\=true\]\:text-accent-foreground {
     &[data-selected="true"] {
-      color: var(--color-accent-foreground);
+      color: var(--accent-foreground);
     }
   }
   .data-\[side\=bottom\]\:translate-y-1 {
@@ -4206,24 +5054,19 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .data-\[state\=active\]\:border-primary {
+  .data-\[state\=active\]\:border-b-primary {
     &[data-state="active"] {
-      border-color: var(--color-primary);
+      border-bottom-color: var(--primary);
     }
   }
   .data-\[state\=active\]\:bg-background {
     &[data-state="active"] {
-      background-color: var(--color-background);
-    }
-  }
-  .data-\[state\=active\]\:bg-transparent {
-    &[data-state="active"] {
-      background-color: transparent;
+      background-color: var(--background);
     }
   }
   .data-\[state\=active\]\:text-foreground {
     &[data-state="active"] {
-      color: var(--color-foreground);
+      color: var(--foreground);
     }
   }
   .data-\[state\=active\]\:shadow-none {
@@ -4246,12 +5089,12 @@
   }
   .data-\[state\=checked\]\:bg-primary {
     &[data-state="checked"] {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
   }
   .data-\[state\=checked\]\:text-primary-foreground {
     &[data-state="checked"] {
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
     }
   }
   .data-\[state\=closed\]\:duration-300 {
@@ -4262,22 +5105,22 @@
   }
   .data-\[state\=on\]\:bg-accent {
     &[data-state="on"] {
-      background-color: var(--color-accent);
+      background-color: var(--accent);
     }
   }
   .data-\[state\=on\]\:bg-primary {
     &[data-state="on"] {
-      background-color: var(--color-primary);
+      background-color: var(--primary);
     }
   }
   .data-\[state\=on\]\:text-accent-foreground {
     &[data-state="on"] {
-      color: var(--color-accent-foreground);
+      color: var(--accent-foreground);
     }
   }
   .data-\[state\=on\]\:text-primary-foreground {
     &[data-state="on"] {
-      color: var(--color-primary-foreground);
+      color: var(--primary-foreground);
     }
   }
   .data-\[state\=open\]\:overflow-visible {
@@ -4287,57 +5130,39 @@
   }
   .data-\[state\=open\]\:bg-accent {
     &[data-state="open"] {
-      background-color: var(--color-accent);
-    }
-  }
-  .data-\[state\=open\]\:bg-accent\/50 {
-    &[data-state="open"] {
-      background-color: var(--color-accent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
-      }
+      background-color: var(--accent);
     }
   }
   .data-\[state\=open\]\:bg-secondary {
     &[data-state="open"] {
-      background-color: var(--color-secondary);
+      background-color: var(--secondary);
     }
   }
   .data-\[state\=open\]\:text-accent-foreground {
     &[data-state="open"] {
-      color: var(--color-accent-foreground);
+      color: var(--accent-foreground);
     }
   }
   .data-\[state\=open\]\:text-muted-foreground {
     &[data-state="open"] {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
   }
-  .data-\[state\=open\]\:duration-500 {
-    &[data-state="open"] {
-      --tw-duration: 500ms;
-      transition-duration: 500ms;
-    }
-  }
-  .data-\[state\=open\]\:hover\:bg-accent {
+  .data-\[state\=open\]\:duration-300 {
     &[data-state="open"] {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-accent);
-        }
-      }
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
     }
   }
-  .data-\[state\=open\]\:focus\:bg-accent {
+  .data-\[state\=open\]\:duration-500 {
     &[data-state="open"] {
-      &:focus {
-        background-color: var(--color-accent);
-      }
+      --tw-duration: 500ms;
+      transition-duration: 500ms;
     }
   }
   .data-\[state\=selected\]\:bg-muted {
     &[data-state="selected"] {
-      background-color: var(--color-muted);
+      background-color: var(--muted);
     }
   }
   .data-\[state\=unchecked\]\:translate-x-0 {
@@ -4348,7 +5173,7 @@
   }
   .data-\[state\=unchecked\]\:bg-border {
     &[data-state="unchecked"] {
-      background-color: var(--color-border);
+      background-color: var(--border);
     }
   }
   .sm\:mt-0 {
@@ -4366,6 +5191,11 @@
       max-width: var(--container-lg);
     }
   }
+  .sm\:max-w-md {
+    @media (width >= 40rem) {
+      max-width: var(--container-md);
+    }
+  }
   .sm\:max-w-sm {
     @media (width >= 40rem) {
       max-width: var(--container-sm);
@@ -4376,6 +5206,11 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
+  .sm\:grid-cols-3 {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
   .sm\:grid-cols-6 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(6, minmax(0, 1fr));
@@ -4386,11 +5221,6 @@
       flex-direction: row;
     }
   }
-  .sm\:items-center {
-    @media (width >= 40rem) {
-      align-items: center;
-    }
-  }
   .sm\:justify-end {
     @media (width >= 40rem) {
       justify-content: flex-end;
@@ -4415,74 +5245,47 @@
       border-radius: var(--radius-lg);
     }
   }
-  .sm\:text-left {
+  .sm\:border-t-0 {
     @media (width >= 40rem) {
-      text-align: left;
-    }
-  }
-  .md\:absolute {
-    @media (width >= 48rem) {
-      position: absolute;
-    }
-  }
-  .md\:block {
-    @media (width >= 48rem) {
-      display: block;
-    }
-  }
-  .md\:flex {
-    @media (width >= 48rem) {
-      display: flex;
-    }
-  }
-  .md\:hidden {
-    @media (width >= 48rem) {
-      display: none;
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0px;
     }
   }
-  .md\:inline {
-    @media (width >= 48rem) {
-      display: inline;
-    }
-  }
-  .md\:h-4 {
-    @media (width >= 48rem) {
-      height: calc(var(--spacing) * 4);
-    }
-  }
-  .md\:h-8 {
-    @media (width >= 48rem) {
-      height: calc(var(--spacing) * 8);
+  .sm\:border-l {
+    @media (width >= 40rem) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
     }
   }
-  .md\:w-4 {
-    @media (width >= 48rem) {
-      width: calc(var(--spacing) * 4);
+  .sm\:px-8 {
+    @media (width >= 40rem) {
+      padding-inline: calc(var(--spacing) * 8);
     }
   }
-  .md\:w-8 {
-    @media (width >= 48rem) {
-      width: calc(var(--spacing) * 8);
+  .sm\:py-6 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 6);
     }
   }
-  .md\:w-\[400px\] {
-    @media (width >= 48rem) {
-      width: 400px;
+  .sm\:text-left {
+    @media (width >= 40rem) {
+      text-align: left;
     }
   }
-  .md\:w-\[500px\] {
-    @media (width >= 48rem) {
-      width: 500px;
+  .sm\:text-3xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
     }
   }
-  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
+  .md\:col-span-2 {
     @media (width >= 48rem) {
-      width: var(--radix-navigation-menu-viewport-width);
+      grid-column: span 2 / span 2;
     }
   }
-  .md\:w-auto {
+  .md\:w-1\/2 {
     @media (width >= 48rem) {
-      width: auto;
+      width: calc(1/2 * 100%);
     }
   }
   .md\:grid-cols-2 {
@@ -4515,77 +5318,15 @@
       flex-direction: row;
     }
   }
-  .md\:p-4 {
-    @media (width >= 48rem) {
-      padding: calc(var(--spacing) * 4);
-    }
-  }
-  .md\:p-6 {
-    @media (width >= 48rem) {
-      padding: calc(var(--spacing) * 6);
-    }
-  }
-  .md\:px-6 {
-    @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing) * 6);
-    }
-  }
-  .md\:px-16 {
-    @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing) * 16);
-    }
-  }
-  .md\:py-3 {
-    @media (width >= 48rem) {
-      padding-block: calc(var(--spacing) * 3);
-    }
-  }
-  .md\:py-20 {
-    @media (width >= 48rem) {
-      padding-block: calc(var(--spacing) * 20);
-    }
-  }
-  .md\:text-4xl {
-    @media (width >= 48rem) {
-      font-size: var(--text-4xl);
-      line-height: var(--tw-leading, var(--text-4xl--line-height));
-    }
-  }
-  .md\:text-lg {
-    @media (width >= 48rem) {
-      font-size: var(--text-lg);
-      line-height: var(--tw-leading, var(--text-lg--line-height));
-    }
-  }
   .md\:text-sm {
     @media (width >= 48rem) {
       font-size: var(--text-sm);
       line-height: var(--tw-leading, var(--text-sm--line-height));
     }
   }
-  .lg\:col-span-3 {
-    @media (width >= 64rem) {
-      grid-column: span 3 / span 3;
-    }
-  }
-  .lg\:col-span-4 {
-    @media (width >= 64rem) {
-      grid-column: span 4 / span 4;
-    }
-  }
-  .lg\:block {
-    @media (width >= 64rem) {
-      display: block;
-    }
-  }
-  .lg\:w-\[500px\] {
-    @media (width >= 64rem) {
-      width: 500px;
-    }
-  }
-  .lg\:w-\[600px\] {
+  .lg\:grid-cols-2 {
     @media (width >= 64rem) {
-      width: 600px;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
   .lg\:grid-cols-3 {
@@ -4603,21 +5344,11 @@
       grid-template-columns: repeat(6, minmax(0, 1fr));
     }
   }
-  .lg\:grid-cols-7 {
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(7, minmax(0, 1fr));
-    }
-  }
   .lg\:grid-cols-12 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(12, minmax(0, 1fr));
     }
   }
-  .lg\:grid-cols-\[\.75fr_1fr\] {
-    @media (width >= 64rem) {
-      grid-template-columns: .75fr 1fr;
-    }
-  }
   .lg\:grid-cols-\[2fr_3fr_3fr\] {
     @media (width >= 64rem) {
       grid-template-columns: 2fr 3fr 3fr;
@@ -4630,7 +5361,7 @@
   }
   .dark\:border-destructive {
     @media (prefers-color-scheme: dark) {
-      border-color: var(--color-destructive);
+      border-color: var(--destructive);
     }
   }
   .dark\:bg-green-900\/10 {
@@ -4651,6 +5382,84 @@
       color: var(--color-red-400);
     }
   }
+  .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground {
+    & .recharts-cartesian-axis-tick text {
+      fill: var(--muted-foreground);
+    }
+  }
+  .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 {
+    & .recharts-cartesian-grid line[stroke='#ccc'] {
+      stroke: var(--border);
+      @supports (color: color-mix(in lab, red, red)) {
+        stroke: color-mix(in oklab, var(--border) 50%, transparent);
+      }
+    }
+  }
+  .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border {
+    & .recharts-curve.recharts-tooltip-cursor {
+      stroke: var(--border);
+    }
+  }
+  .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent {
+    & .recharts-dot[stroke='#fff'] {
+      stroke: transparent;
+    }
+  }
+  .\[\&_\.recharts-layer\]\:outline-hidden {
+    & .recharts-layer {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
+  .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border {
+    & .recharts-polar-grid [stroke='#ccc'] {
+      stroke: var(--border);
+    }
+  }
+  .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted {
+    & .recharts-radial-bar-background-sector {
+      fill: var(--muted);
+    }
+  }
+  .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted {
+    & .recharts-rectangle.recharts-tooltip-cursor {
+      fill: var(--muted);
+    }
+  }
+  .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border {
+    & .recharts-reference-line [stroke='#ccc'] {
+      stroke: var(--border);
+    }
+  }
+  .\[\&_\.recharts-sector\]\:outline-hidden {
+    & .recharts-sector {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
+  .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent {
+    & .recharts-sector[stroke='#fff'] {
+      stroke: transparent;
+    }
+  }
+  .\[\&_\.recharts-surface\]\:outline-hidden {
+    & .recharts-surface {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
   .\[\&_\[cmdk-group-heading\]\]\:px-2 {
     & [cmdk-group-heading] {
       padding-inline: calc(var(--spacing) * 2);
@@ -4675,7 +5484,7 @@
   }
   .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground {
     & [cmdk-group-heading] {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
   }
   .\[\&_\[cmdk-group\]\]\:px-2 {
@@ -4739,12 +5548,24 @@
       visibility: hidden;
     }
   }
+  .\[\&_svg\]\:size-3\.5 {
+    & svg {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+    }
+  }
   .\[\&_svg\]\:size-4 {
     & svg {
       width: calc(var(--spacing) * 4);
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&_svg\]\:size-5 {
+    & svg {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+    }
+  }
   .\[\&_svg\]\:shrink-0 {
     & svg {
       flex-shrink: 0;
@@ -4803,6 +5624,27 @@
       border-bottom-right-radius: var(--radius-md);
     }
   }
+  .\[\&\:not\(\:last-child\)\]\:border-b {
+    &:not(:last-child) {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 1px;
+    }
+  }
+  .\[\&\>\*\]\:basis-1\/2 {
+    &>* {
+      flex-basis: calc(1/2 * 100%);
+    }
+  }
+  .\[\&\>\*\]\:basis-1\/4 {
+    &>* {
+      flex-basis: calc(1/4 * 100%);
+    }
+  }
+  .\[\&\>\*\]\:justify-center {
+    &>* {
+      justify-content: center;
+    }
+  }
   .\[\&\>button\]\:rounded-none {
     &>button {
       border-radius: 0;
@@ -4856,6 +5698,21 @@
       border-bottom-width: 1px;
     }
   }
+  .\[\&\>div\]\:bg-brand {
+    &>div {
+      background-color: var(--brand);
+    }
+  }
+  .\[\&\>div\]\:bg-destructive {
+    &>div {
+      background-color: var(--destructive);
+    }
+  }
+  .\[\&\>div\]\:bg-yellow-500 {
+    &>div {
+      background-color: var(--color-yellow-500);
+    }
+  }
   .\[\&\>span\]\:line-clamp-1 {
     &>span {
       overflow: hidden;
@@ -4901,11 +5758,31 @@
       height: calc(var(--spacing) * 3.5);
     }
   }
+  .\[\&\>svg\]\:h-2\.5 {
+    &>svg {
+      height: calc(var(--spacing) * 2.5);
+    }
+  }
+  .\[\&\>svg\]\:h-3 {
+    &>svg {
+      height: calc(var(--spacing) * 3);
+    }
+  }
   .\[\&\>svg\]\:h-3\.5 {
     &>svg {
       height: calc(var(--spacing) * 3.5);
     }
   }
+  .\[\&\>svg\]\:w-2\.5 {
+    &>svg {
+      width: calc(var(--spacing) * 2.5);
+    }
+  }
+  .\[\&\>svg\]\:w-3 {
+    &>svg {
+      width: calc(var(--spacing) * 3);
+    }
+  }
   .\[\&\>svg\]\:w-3\.5 {
     &>svg {
       width: calc(var(--spacing) * 3.5);
@@ -4913,17 +5790,22 @@
   }
   .\[\&\>svg\]\:text-destructive {
     &>svg {
-      color: var(--color-destructive);
+      color: var(--destructive);
     }
   }
   .\[\&\>svg\]\:text-foreground {
     &>svg {
-      color: var(--color-foreground);
+      color: var(--foreground);
+    }
+  }
+  .\[\&\>svg\]\:text-foreground-muted {
+    &>svg {
+      color: var(--foreground-muted);
     }
   }
   .\[\&\>svg\]\:text-muted-foreground {
     &>svg {
-      color: var(--color-muted-foreground);
+      color: var(--muted-foreground);
     }
   }
   .\[\&\>svg\+div\]\:translate-y-\[-3px\] {
@@ -6429,43 +7311,497 @@ body.dark-hc {
   --border: var(--border-dark-hc);
   color-scheme: dark;
 }
-body.light, body.dark, body.light-hc, body.dark-hc {
-  --color-card: var(--color-background-raised);
-  --color-card-foreground: var(--color-foreground);
-  --color-popover: var(--color-background-raised);
-  --color-popover-foreground: var(--color-foreground);
-  --color-primary-foreground: var(--color-foreground-inverse);
-  --color-secondary: var(--color-background-secondary);
-  --color-secondary-foreground: var(--color-foreground-de-emp);
-  --color-muted: var(--color-background-secondary);
-  --color-muted-foreground: var(--color-foreground-de-emp);
-  --color-accent: var(--color-background-selected);
-  --color-accent-foreground: var(--color-foreground-emp);
-  --color-destructive: var(--color-error-text);
-  --color-destructive-foreground: var(--color-error-foreground-inverse);
-  --color-input: var(--color-border-de-emp);
-  --color-ring: var(--color-focus-indicator);
-  --color-chart-1: var(--color-chart-blue-secondary);
-  --color-chart-2: var(--color-chart-pink);
-  --color-chart-3: var(--color-chart-purple);
-  --color-chart-4: var(--color-chart-green);
-  --color-chart-5: var(--color-chart-yellow);
-  --color-sidebar: var(--color-background-secondary);
-  --color-sidebar-foreground: var(--color-foreground);
-  --color-sidebar-primary: var(--color-primary);
-  --color-sidebar-primary-foreground: var(--color-foreground-inverse);
-  --color-sidebar-accent: var(--color-background-selected);
-  --color-sidebar-accent-foreground: var(--color-foreground-emp);
-  --color-sidebar-border: var(--color-border-de-emp);
-  --color-sidebar-ring: var(--color-focus-indicator);
+:root {
+  --radius: 0.75rem;
+}
+body.dark {
+  --surface: var(--color-background, #182027);
+  --surface-raised: var(--color-background-raised, #273139);
+  --surface-overlay: var(--color-background-selected, #374652);
+  --surface-hover: var(--color-background-gray, #526069);
+  --surface-muted: var(--color-background-gray-emp, #8a97a0);
+  --surface-inverse: var(--color-background-inverse, #f8f9fa);
+  --surface-disabled: var(--color-background-disabled, #273139);
+  --surface-selected: var(--color-background-selected, #374652);
+  --brand: var(--color-primary, #66adff);
+  --brand-hover: var(--color-primary-hover, #87bfff);
+  --brand-lighter: var(--color-primary-lighter, #00489d);
+  --brand-darker: var(--color-foreground-link-pressed, #badaff);
+  --foreground: var(--color-foreground, #f4f5f7);
+  --foreground-emp: var(--color-foreground-emp, #f8f9fa);
+  --foreground-muted: var(--color-foreground-de-emp, #cfd8dd);
+  --foreground-subtle: var(--color-foreground-disable, #a4b1b8);
+  --foreground-inverse: var(--color-foreground-inverse, #182027);
+  --foreground-link: var(--color-foreground-link, #66adff);
+  --foreground-on-accent: var(--color-foreground-inverse, #182027);
+  --border: var(--color-border, #8a97a0);
+  --border-subtle: var(--color-border-de-emp, #526069);
+  --border-disabled: var(--color-border-disabled, #526069);
+  --border-grid: var(--color-border-grid, #273139);
+  --error: var(--color-error-text, #ff8484);
+  --success: var(--color-success-icon, #74c94b);
+  --warning: var(--color-warning-icon, #ffbb27);
+  --info: var(--color-info-foreground, #42a1ff);
+  --ring: var(--color-primary, #66adff);
+  --logo: var(--color-logo, #ffffff);
+  --brand-subtle: var(--brand-lighter);
+  --foreground-secondary: var(--foreground-emp);
+  --foreground-hover: var(--foreground-muted);
+  --foreground-accent: var(--brand);
+  --foreground-accent-muted: var(--brand-hover);
+  --border-muted: var(--border-grid);
+  --border-deep: var(--border-grid);
+  --border-inverse: var(--border);
+  --border-hover: var(--border);
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground-muted);
+  --muted: var(--surface-raised);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-selected);
+  --accent-foreground: var(--foreground-emp);
+  --destructive: var(--error);
+  --destructive-foreground: var(--foreground-on-accent);
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border-subtle);
+  color-scheme: dark;
+}
+body.dark-hc {
+  --surface: var(--color-background, #182027);
+  --surface-raised: var(--color-background-raised, #273139);
+  --surface-overlay: var(--color-background-selected, #374652);
+  --surface-hover: var(--color-background-gray, #374652);
+  --surface-muted: var(--color-background-gray-emp, #a4b1b8);
+  --surface-inverse: var(--color-background-inverse, #f8f9fa);
+  --surface-disabled: var(--color-background-disabled, #273139);
+  --surface-selected: var(--color-background-selected, #374652);
+  --brand: var(--color-primary, #badaff);
+  --brand-hover: var(--color-primary-hover, #87bfff);
+  --brand-lighter: var(--color-primary-lighter, #00336f);
+  --brand-darker: var(--color-foreground-link-pressed, #badaff);
+  --foreground: var(--color-foreground, #f4f5f7);
+  --foreground-emp: var(--color-foreground-emp, #f8f9fa);
+  --foreground-muted: var(--color-foreground-de-emp, #cfd8dd);
+  --foreground-subtle: var(--color-foreground-disable, #a4b1b8);
+  --foreground-inverse: var(--color-foreground-inverse, #182027);
+  --foreground-link: var(--color-foreground-link, #87bfff);
+  --foreground-on-accent: var(--color-foreground-inverse, #182027);
+  --border: var(--color-border, #bbc7cd);
+  --border-subtle: var(--color-border-de-emp, #a4b1b8);
+  --border-disabled: var(--color-border-disabled, #8a97a0);
+  --border-grid: var(--color-border-grid, #273139);
+  --error: var(--color-error-text, #ffadad);
+  --success: var(--color-success-icon, #74c94b);
+  --warning: var(--color-warning-icon, #ffbb27);
+  --info: var(--color-info-foreground, #42a1ff);
+  --ring: var(--color-primary, #badaff);
+  --logo: var(--color-logo, #ffffff);
+  --brand-subtle: var(--brand-lighter);
+  --foreground-secondary: var(--foreground-emp);
+  --foreground-hover: var(--foreground-muted);
+  --foreground-accent: var(--brand);
+  --foreground-accent-muted: var(--brand-hover);
+  --border-muted: var(--border-grid);
+  --border-deep: var(--border-grid);
+  --border-inverse: var(--border);
+  --border-hover: var(--border);
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground-muted);
+  --muted: var(--surface-raised);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-selected);
+  --accent-foreground: var(--foreground-emp);
+  --destructive: var(--error);
+  --destructive-foreground: var(--foreground-on-accent);
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border-subtle);
+  color-scheme: dark;
+}
+body.light {
+  --surface: var(--color-background, #ffffff);
+  --surface-raised: var(--color-background-raised, #ffffff);
+  --surface-overlay: var(--color-background-secondary, #f4f5f7);
+  --surface-hover: var(--color-background-selected, #e9f1fa);
+  --surface-muted: var(--color-background-gray, #cfd8dd);
+  --surface-inverse: var(--color-background-inverse, #182027);
+  --surface-disabled: var(--color-background-disabled, #ecedee);
+  --surface-selected: var(--color-background-selected, #e9f1fa);
+  --brand: var(--color-primary, #0067df);
+  --brand-hover: var(--color-primary-hover, #0056ba);
+  --brand-lighter: var(--color-primary-lighter, #badaff);
+  --brand-darker: var(--color-foreground-link-pressed, #00489d);
+  --foreground: var(--color-foreground, #273139);
+  --foreground-emp: var(--color-foreground-emp, #182027);
+  --foreground-muted: var(--color-foreground-de-emp, #526069);
+  --foreground-subtle: var(--color-foreground-disable, #8a97a0);
+  --foreground-inverse: var(--color-foreground-inverse, #f8f9fa);
+  --foreground-link: var(--color-foreground-link, #0067df);
+  --foreground-on-accent: var(--color-foreground-inverse, #f8f9fa);
+  --border: var(--color-border, #a4b1b8);
+  --border-subtle: var(--color-border-de-emp, #cfd8dd);
+  --border-disabled: var(--color-border-disabled, #cfd8dd);
+  --border-grid: var(--color-border-grid, #f4f5f7);
+  --error: var(--color-error-text, #a6040a);
+  --success: var(--color-success-icon, #038108);
+  --warning: var(--color-warning-text, #9e6100);
+  --info: var(--color-info-foreground, #1665b3);
+  --ring: var(--color-primary, #0067df);
+  --logo: var(--color-logo, #fa4616);
+  --brand-subtle: var(--brand-lighter);
+  --foreground-secondary: var(--foreground-emp);
+  --foreground-hover: var(--foreground-muted);
+  --foreground-accent: var(--brand);
+  --foreground-accent-muted: var(--brand-hover);
+  --border-muted: var(--border-grid);
+  --border-deep: var(--border-grid);
+  --border-inverse: var(--border);
+  --border-hover: var(--border);
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground-muted);
+  --muted: var(--surface-raised);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-selected);
+  --accent-foreground: var(--foreground-emp);
+  --destructive: var(--error);
+  --destructive-foreground: var(--foreground-on-accent);
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border-subtle);
+  color-scheme: light;
+}
+body.light-hc {
+  --surface: var(--color-background, #ffffff);
+  --surface-raised: var(--color-background-raised, #ffffff);
+  --surface-overlay: var(--color-background-secondary, #f4f5f7);
+  --surface-hover: var(--color-background-selected, #e9f1fa);
+  --surface-muted: var(--color-background-gray, #cfd8dd);
+  --surface-inverse: var(--color-background-inverse, #182027);
+  --surface-disabled: var(--color-background-disabled, #ecedee);
+  --surface-selected: var(--color-background-selected, #e9f1fa);
+  --brand: var(--color-primary, #00489d);
+  --brand-hover: var(--color-primary-hover, #00336f);
+  --brand-lighter: var(--color-primary-lighter, #badaff);
+  --brand-darker: var(--color-foreground-link-pressed, #00336f);
+  --foreground: var(--color-foreground, #273139);
+  --foreground-emp: var(--color-foreground-emp, #182027);
+  --foreground-muted: var(--color-foreground-de-emp, #374652);
+  --foreground-subtle: var(--color-foreground-disable, #8a97a0);
+  --foreground-inverse: var(--color-foreground-inverse, #f8f9fa);
+  --foreground-link: var(--color-foreground-link, #00489d);
+  --foreground-on-accent: var(--color-foreground-inverse, #f8f9fa);
+  --border: var(--color-border, #6b7882);
+  --border-subtle: var(--color-border-de-emp, #a4b1b8);
+  --border-disabled: var(--color-border-disabled, #cfd8dd);
+  --border-grid: var(--color-border-grid, #f4f5f7);
+  --error: var(--color-error-text, #a6040a);
+  --success: var(--color-success-icon, #005603);
+  --warning: var(--color-warning-text, #273139);
+  --info: var(--color-info-foreground, #11508d);
+  --ring: var(--color-primary, #00489d);
+  --logo: var(--color-logo, #fa4616);
+  --brand-subtle: var(--brand-lighter);
+  --foreground-secondary: var(--foreground-emp);
+  --foreground-hover: var(--foreground-muted);
+  --foreground-accent: var(--brand);
+  --foreground-accent-muted: var(--brand-hover);
+  --border-muted: var(--border-grid);
+  --border-deep: var(--border-grid);
+  --border-inverse: var(--border);
+  --border-hover: var(--border);
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground-muted);
+  --muted: var(--surface-raised);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-selected);
+  --accent-foreground: var(--foreground-emp);
+  --destructive: var(--error);
+  --destructive-foreground: var(--foreground-on-accent);
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border-subtle);
+  color-scheme: light;
+}
+.future-dark {
+  --surface: #09090b;
+  --surface-raised: #18181b;
+  --surface-overlay: #27272a;
+  --surface-hover: #3f3f46;
+  --surface-muted: #71717a;
+  --surface-inverse: #fafafa;
+  --brand: #0891b2;
+  --brand-subtle: #083344;
+  --foreground: #fafafa;
+  --foreground-secondary: #f4f4f5;
+  --foreground-hover: #d4d4d8;
+  --foreground-muted: #a1a1aa;
+  --foreground-subtle: #71717a;
+  --foreground-inverse: #09090b;
+  --foreground-on-accent: #fafafa;
+  --foreground-accent: #0891b2;
+  --foreground-accent-muted: #22d3ee;
+  --border: #3f3f46;
+  --border-subtle: #27272a;
+  --border-muted: #18181b;
+  --border-deep: #09090b;
+  --border-inverse: #e4e4e7;
+  --border-hover: #52525b;
+  --ring: #52525b;
+  --gradient-1: linear-gradient(127deg, #3f3f47 25.94%, #27272a 74.06%);
+  --gradient-2: linear-gradient(128deg, #09090b 1.26%, #18181b 52.69%);
+  --gradient-3: linear-gradient(128deg, #3f3f47 1.26%, #18181b 52.69%);
+  --gradient-4: linear-gradient(180deg, #18181b 0%, #27272a 100%);
+  --gradient-5: linear-gradient(180deg, #09090b 0%, #18181b 100%);
+  --gradient-6: linear-gradient(106deg, #0092b8 28.08%, #053345 71.92%);
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
+  --destructive: #ef4444;
+  --destructive-foreground: #fafafa;
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border);
+}
+.future-light {
+  --surface: #fafafa;
+  --surface-raised: #f4f4f5;
+  --surface-overlay: #e4e4e7;
+  --surface-hover: #d4d4d8;
+  --surface-muted: #a1a1aa;
+  --surface-inverse: #09090b;
+  --brand: #0891b2;
+  --brand-subtle: #ecfeff;
+  --foreground: #09090b;
+  --foreground-secondary: #18181b;
+  --foreground-hover: #52525b;
+  --foreground-muted: #71717a;
+  --foreground-subtle: #a1a1aa;
+  --foreground-inverse: #fafafa;
+  --foreground-on-accent: #fafafa;
+  --foreground-accent: #0891b2;
+  --foreground-accent-muted: #0891b2;
+  --border: #d4d4d8;
+  --border-subtle: #e4e4e7;
+  --border-muted: #f4f4f5;
+  --border-deep: #fafafa;
+  --border-inverse: #3f3f46;
+  --border-hover: #a1a1aa;
+  --ring: #a1a1aa;
+  --gradient-1: linear-gradient(127deg, #e4e4e7 25.94%, #f4f4f5 74.06%);
+  --gradient-2: linear-gradient(128deg, #fafafa 1.26%, #fafafa 52.69%);
+  --gradient-3: linear-gradient(128deg, #e4e4e7 1.26%, #fafafa 52.69%);
+  --gradient-4: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
+  --gradient-5: linear-gradient(180deg, #fafafa 0%, #fafafa 100%);
+  --gradient-6: linear-gradient(106deg, #22d3ee 28.08%, #cffafe 71.92%);
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
+  --destructive: #ef4444;
+  --destructive-foreground: #fafafa;
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border);
+}
+.wireframe {
+  --surface: #ffffff;
+  --surface-raised: #f9fafb;
+  --surface-overlay: #f3f4f6;
+  --surface-hover: #e5e7eb;
+  --surface-muted: #d1d5db;
+  --surface-inverse: #374151;
+  --brand: #6b7280;
+  --brand-subtle: #f3f4f6;
+  --foreground: #1f2937;
+  --foreground-secondary: #374151;
+  --foreground-hover: #4b5563;
+  --foreground-muted: #6b7280;
+  --foreground-subtle: #9ca3af;
+  --foreground-inverse: #ffffff;
+  --foreground-on-accent: #ffffff;
+  --foreground-accent: #4b5563;
+  --foreground-accent-muted: #6b7280;
+  --border: #d1d5db;
+  --border-subtle: #e5e7eb;
+  --border-muted: #f3f4f6;
+  --border-deep: #f9fafb;
+  --border-inverse: #4b5563;
+  --border-hover: #9ca3af;
+  --ring: #9ca3af;
+  --gradient-1: none;
+  --gradient-2: none;
+  --gradient-3: none;
+  --gradient-4: none;
+  --gradient-5: none;
+  --gradient-6: none;
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
+  --destructive: #9ca3af;
+  --destructive-foreground: #ffffff;
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border);
+}
+.wireframe *, .wireframe *::before, .wireframe *::after {
+  border-style: dashed !important;
+  box-shadow: none !important;
+}
+.vertex {
+  --surface: oklch(0.21 0.03 258.5);
+  --surface-raised: oklch(0.233 0.036 254.7);
+  --surface-overlay: oklch(0.2648 0.0329 254.38);
+  --surface-hover: oklch(0.3927 0.0289 240.86);
+  --surface-muted: oklch(0.72 0.03 254.38);
+  --surface-inverse: oklch(0.985 0 0);
+  --brand: oklch(0.692 0.1119 207.06);
+  --brand-subtle: oklch(0.166 0.0283 203.34);
+  --foreground: oklch(0.985 0 0);
+  --foreground-secondary: oklch(0.9525 0.011 225.98);
+  --foreground-hover: oklch(0.9416 0.0145 244.72);
+  --foreground-muted: oklch(0.72 0.03 254.38);
+  --foreground-subtle: oklch(0.4594 0.028 264.25);
+  --foreground-inverse: oklch(0.21 0.03 258.5);
+  --foreground-on-accent: oklch(0.166 0.0283 203.34);
+  --foreground-accent: oklch(0.692 0.1119 207.06);
+  --foreground-accent-muted: oklch(0.573 0.114 211.4);
+  --border: oklch(0.3068 0.0426 258.29);
+  --border-subtle: oklch(0.2648 0.0329 254.38);
+  --border-muted: oklch(0.233 0.036 254.7);
+  --border-deep: oklch(0.21 0.03 258.5);
+  --border-inverse: oklch(0.9229 0.0065 252.13);
+  --border-hover: oklch(0.3927 0.0289 240.86);
+  --ring: oklch(0.692 0.1119 207.06);
+  --gradient-1: linear-gradient(127deg, oklch(0.3927 0.0289 240.86) 25.94%, oklch(0.2648 0.0329 254.38) 74.06%);
+  --gradient-2: linear-gradient(128deg, oklch(0.21 0.03 258.5) 1.26%, oklch(0.233 0.036 254.7) 52.69%);
+  --gradient-3: linear-gradient(128deg, oklch(0.3927 0.0289 240.86) 1.26%, oklch(0.233 0.036 254.7) 52.69%);
+  --gradient-4: linear-gradient(180deg, oklch(0.233 0.036 254.7) 0%, oklch(0.2648 0.0329 254.38) 100%);
+  --gradient-5: linear-gradient(180deg, oklch(0.21 0.03 258.5) 0%, oklch(0.233 0.036 254.7) 100%);
+  --gradient-6: linear-gradient(106deg, oklch(0.692 0.1119 207.06) 28.08%, oklch(0.166 0.0283 203.34) 71.92%);
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
+  --destructive: oklch(0.6542 0.2321 28.66);
+  --destructive-foreground: oklch(1 0 89.88);
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border);
+}
+.canvas {
+  --surface: #182027;
+  --surface-raised: #273139;
+  --surface-overlay: #334049;
+  --surface-hover: #3e4e58;
+  --surface-muted: #8a97a0;
+  --surface-inverse: #f8f9fa;
+  --brand: #fa4616;
+  --brand-subtle: #3c2a1e;
+  --foreground: #f8f9fa;
+  --foreground-secondary: #f4f5f7;
+  --foreground-hover: #cfd8dd;
+  --foreground-muted: #a4b1b8;
+  --foreground-subtle: #8a97a0;
+  --foreground-inverse: #182027;
+  --foreground-on-accent: #ffffff;
+  --foreground-accent: #fa4616;
+  --foreground-accent-muted: #ff8f70;
+  --border: #526069;
+  --border-subtle: #3e4e58;
+  --border-muted: #273139;
+  --border-deep: #182027;
+  --border-inverse: #cfd8dd;
+  --border-hover: #8a97a0;
+  --ring: #fa4616;
+  --gradient-1: linear-gradient(127deg, #3e4e58 25.94%, #334049 74.06%);
+  --gradient-2: linear-gradient(128deg, #182027 1.26%, #273139 52.69%);
+  --gradient-3: linear-gradient(128deg, #3e4e58 1.26%, #273139 52.69%);
+  --gradient-4: linear-gradient(180deg, #273139 0%, #334049 100%);
+  --gradient-5: linear-gradient(180deg, #182027 0%, #273139 100%);
+  --gradient-6: linear-gradient(106deg, #fa4616 28.08%, #3c2a1e 71.92%);
+  --background: var(--surface);
+  --card: var(--surface-raised);
+  --card-foreground: var(--foreground);
+  --popover: var(--surface-raised);
+  --popover-foreground: var(--foreground);
+  --primary: var(--brand);
+  --primary-foreground: var(--foreground-on-accent);
+  --secondary: var(--surface-overlay);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--surface-overlay);
+  --muted-foreground: var(--foreground-muted);
+  --accent: var(--surface-hover);
+  --accent-foreground: var(--foreground);
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+  --border-de-emp: var(--border-subtle);
+  --input: var(--border);
 }
 @layer base {
   * {
     border-color: var(--color-border-de-emp);
   }
   body {
-    background-color: var(--color-background);
-    color: var(--color-foreground);
+    background-color: var(--background);
+    color: var(--foreground);
   }
 }
 @property --tw-translate-x {