zabi-components 5.0.15 → 5.0.18

package/dist/zabi-components.css

@@ -48,23 +48,11 @@
     --color-purple-700: oklch(49.6% 0.265 301.924);
     --color-purple-800: oklch(43.8% 0.218 303.724);
     --color-gray-50: oklch(98.5% 0.002 247.839);
-    --color-gray-100: oklch(96.7% 0.003 264.542);
-    --color-gray-200: oklch(92.8% 0.006 264.531);
-    --color-gray-300: oklch(87.2% 0.01 258.338);
-    --color-gray-400: oklch(70.7% 0.022 261.325);
-    --color-gray-500: oklch(55.1% 0.027 264.364);
-    --color-gray-600: oklch(44.6% 0.03 256.802);
-    --color-gray-700: oklch(37.3% 0.034 259.733);
-    --color-gray-800: oklch(27.8% 0.033 256.848);
-    --color-gray-900: oklch(21% 0.034 264.665);
-    --color-stone-200: oklch(92.3% 0.003 48.717);
-    --color-stone-300: oklch(86.9% 0.005 56.366);
-    --color-stone-400: oklch(70.9% 0.01 56.259);
-    --color-stone-500: oklch(55.3% 0.013 58.071);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
     --container-4xl: 56rem;
+    --container-6xl: 72rem;
     --container-7xl: 80rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -86,20 +74,20 @@
     --text-5xl--line-height: 1;
     --text-6xl: 3.75rem;
     --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-tight: -0.025em;
     --tracking-normal: 0em;
     --leading-relaxed: 1.625;
-    --radius-sm: 0.25rem;
+    --radius-xs: 0.125rem;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
-    --radius-2xl: 1rem;
+    --radius-xl: 0.75rem;
     --radius-3xl: 1.5rem;
-    --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
-    --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
-    --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
@@ -124,41 +112,49 @@
     --color-iris-300: #bdbde6;
     --color-iris-500: #6969B3;
     --color-iris-900: #2a2a56;
-    --color-surface-level-0: oklch(98.5% 0.001 106.423);
-    --color-surface-level-1: oklch(97% 0.001 106.424);
-    --color-surface-level-2: oklch(92.3% 0.003 48.717);
-    --color-surface-elevated: #fff;
-    --color-surface-hover: oklch(97% 0.001 106.424);
-    --color-surface-active: oklch(92.3% 0.003 48.717);
-    --color-surface-disabled: oklch(92.3% 0.003 48.717);
-    --color-surface-container-high: #ece6f0;
-    --color-background: #fff;
-    --color-background-secondary: oklch(98.5% 0.001 106.423);
-    --color-background-tertiary: oklch(97% 0.001 106.424);
-    --color-page: oklch(97% 0.001 106.424);
+    --color-base-50: oklch(98.5% 0 0);
+    --color-base-100: oklch(97% 0 0);
+    --color-base-200: oklch(92.2% 0 0);
+    --color-base-300: oklch(87% 0 0);
+    --color-base-400: oklch(70.8% 0 0);
+    --color-base-500: oklch(55.6% 0 0);
+    --color-base-600: oklch(43.9% 0 0);
+    --color-base-700: oklch(37.1% 0 0);
+    --color-base-800: oklch(26.9% 0 0);
+    --color-base-900: oklch(20.5% 0 0);
+    --color-base-950: oklch(14.5% 0 0);
+    --color-background: var(--color-base-100);
+    --color-background-secondary: var(--color-base-50);
+    --color-background-tertiary: var(--color-base-100);
+    --color-page: var(--color-base-100);
     --color-card: #fff;
-    --color-card-hover: oklch(97% 0.001 106.424);
-    --color-card-active: oklch(97% 0.001 106.424);
+    --color-card-hover: var(--color-base-100);
+    --color-card-active: var(--color-base-100);
     --color-card-elevated: #fff;
-    --color-headline: oklch(21.6% 0.006 56.043);
-    --color-body: oklch(26.8% 0.007 34.298);
-    --color-description: oklch(44.4% 0.011 73.639);
-    --color-caption: oklch(55.3% 0.013 58.071);
-    --color-input-placeholder: oklch(70.9% 0.01 56.259);
-    --color-label: oklch(37.4% 0.01 67.558);
+    --color-overlay: rgba(0, 0, 0, 0.5);
+    --color-input: var(--color-base-200);
+    --color-input-hover: var(--color-base-100);
+    --color-input-focus: var(--color-base-100);
+    --color-input-disabled: var(--color-base-100);
+    --color-headline: var(--color-base-900);
+    --color-body: var(--color-base-800);
+    --color-description: var(--color-base-600);
+    --color-caption: var(--color-base-500);
+    --color-input-placeholder: var(--color-base-400);
+    --color-label: var(--color-base-700);
     --color-link: #6e84fa;
     --color-link-hover: #5366e2;
-    --color-success-text: #084532;
+    --color-success-text: var(--color-success);
     --color-warning-text: oklch(55.5% 0.163 48.998);
-    --color-neutral-text: oklch(37.4% 0.01 67.558);
+    --color-neutral-text: var(--color-base-700);
     --color-energetic-text: #848a43;
     --color-error-text: oklch(50.5% 0.213 27.518);
     --color-inverse: #fff;
-    --color-disabled: oklch(70.9% 0.01 56.259);
-    --color-border: oklch(92.3% 0.003 48.717);
-    --color-border-weak: oklch(86.9% 0.005 56.366);
-    --color-border-medium: oklch(70.9% 0.01 56.259);
-    --color-border-strong: oklch(55.3% 0.013 58.071);
+    --color-disabled: var(--color-base-400);
+    --color-border: var(--color-base-200);
+    --color-border-weak: var(--color-base-300);
+    --color-border-medium: var(--color-base-400);
+    --color-border-strong: var(--color-base-500);
     --color-focus: #8fa8ff;
     --color-focus-weak: #6e84fa;
     --color-focus-medium: #5366e2;
@@ -167,29 +163,30 @@
     --color-primary-weak: #5366e2;
     --color-primary-medium: #3f4fc0;
     --color-primary-strong: #2f3c99;
-    --color-secondary: oklch(44.4% 0.011 73.639);
-    --color-secondary-weak: oklch(37.4% 0.01 67.558);
-    --color-secondary-medium: oklch(26.8% 0.007 34.298);
-    --color-secondary-strong: oklch(21.6% 0.006 56.043);
+    --color-secondary: var(--color-base-600);
+    --color-secondary-weak: var(--color-base-700);
+    --color-secondary-medium: var(--color-base-800);
+    --color-secondary-strong: var(--color-base-900);
     --color-success: #0a513a;
     --color-warning: oklch(76.9% 0.188 70.08);
     --color-error: oklch(63.7% 0.237 25.331);
     --color-energetic: #bbbe64;
-    --color-neutral: oklch(44.4% 0.011 73.639);
+    --color-neutral: var(--color-base-600);
     --color-info: #58589e;
     --color-info-text: var(--color-info);
-    --color-action-primary: #6e84fa;
-    --color-action-primary-hover: #5366e2;
-    --color-action-primary-active: #3f4fc0;
-    --color-action-primary-disabled: #ccdbfd;
-    --color-action-primary-subtle: #f7faff;
-    --color-action-primary-subtle-hover: #edf2fb;
-    --color-action-secondary: oklch(44.4% 0.011 73.639);
-    --color-action-secondary-hover: oklch(37.4% 0.01 67.558);
-    --color-action-secondary-active: oklch(26.8% 0.007 34.298);
-    --color-action-secondary-disabled: oklch(86.9% 0.005 56.366);
-    --color-action-secondary-subtle: oklch(97% 0.001 106.424);
-    --color-action-secondary-subtle-hover: oklch(92.3% 0.003 48.717);
+    --color-action-primary: var(--color-brand-950);
+    --color-action-primary-hover: var(--color-brand-900);
+    --color-action-primary-active: var(--color-brand-400);
+    --color-action-primary-disabled: var(--color-brand-500);
+    --color-action-primary-subtle: var(--color-brand-100);
+    --color-action-primary-subtle-hover: var(--color-brand-200);
+    --color-action-primary-text: var(--color-brand-50);
+    --color-action-secondary: var(--color-brand-200);
+    --color-action-secondary-hover: var(--color-brand-100);
+    --color-action-secondary-active: var(--color-brand-400);
+    --color-action-secondary-disabled: var(--color-brand-500);
+    --color-action-secondary-subtle: var(--color-brand-600);
+    --color-action-secondary-subtle-hover: var(--color-brand-700);
     --color-action-danger: oklch(57.7% 0.245 27.325);
     --color-action-danger-hover: oklch(50.5% 0.213 27.518);
     --color-action-danger-active: oklch(44.4% 0.177 26.899);
@@ -425,6 +422,9 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-8 {
+    top: calc(var(--spacing) * 8);
+  }
   .top-full {
     top: 100%;
   }
@@ -437,6 +437,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .right-8 {
+    right: calc(var(--spacing) * 8);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -491,12 +494,18 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
   .mt-12 {
     margin-top: calc(var(--spacing) * 12);
   }
+  .mt-16 {
+    margin-top: calc(var(--spacing) * 16);
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -663,6 +672,9 @@
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
@@ -681,6 +693,9 @@
   .min-w-\[12rem\] {
     min-width: 12rem;
   }
+  .min-w-\[250px\] {
+    min-width: 250px;
+  }
   .min-w-\[320px\] {
     min-width: 320px;
   }
@@ -794,6 +809,9 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .space-y-0 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -808,6 +826,13 @@
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-1\.5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -843,13 +868,6 @@
       margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-16 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -879,9 +897,6 @@
   .rounded {
     border-radius: 0.25rem;
   }
-  .rounded-2xl {
-    border-radius: var(--radius-2xl);
-  }
   .rounded-\[20px\] {
     border-radius: 20px;
   }
@@ -894,6 +909,12 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .rounded-xs {
+    border-radius: var(--radius-xs);
+  }
   .rounded-t-3xl {
     border-top-left-radius: var(--radius-3xl);
     border-top-right-radius: var(--radius-3xl);
@@ -934,9 +955,28 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
   .border-\[var\(--color-success\)\] {
     border-color: var(--color-success);
   }
+  .border-action-primary {
+    border-color: var(--color-action-primary);
+  }
+  .border-base-200 {
+    border-color: var(--color-base-200);
+  }
+  .border-base-300 {
+    border-color: var(--color-base-300);
+  }
+  .border-base-400 {
+    border-color: var(--color-base-400);
+  }
+  .border-base-700 {
+    border-color: var(--color-base-700);
+  }
   .border-blue-200 {
     border-color: var(--color-blue-200);
   }
@@ -955,15 +995,6 @@
   .border-error {
     border-color: var(--color-error);
   }
-  .border-gray-200 {
-    border-color: var(--color-gray-200);
-  }
-  .border-gray-300 {
-    border-color: var(--color-gray-300);
-  }
-  .border-gray-700 {
-    border-color: var(--color-gray-700);
-  }
   .border-green-200 {
     border-color: var(--color-green-200);
   }
@@ -994,12 +1025,6 @@
   .border-secondary {
     border-color: var(--color-secondary);
   }
-  .border-stone-200 {
-    border-color: var(--color-stone-200);
-  }
-  .border-stone-400 {
-    border-color: var(--color-stone-400);
-  }
   .border-success {
     border-color: var(--color-success);
   }
@@ -1021,12 +1046,47 @@
   .bg-action-primary {
     background-color: var(--color-action-primary);
   }
+  .bg-action-primary-subtle {
+    background-color: var(--color-action-primary-subtle);
+  }
   .bg-action-primary-subtle-hover {
     background-color: var(--color-action-primary-subtle-hover);
   }
+  .bg-action-secondary {
+    background-color: var(--color-action-secondary);
+  }
   .bg-background {
     background-color: var(--color-background);
   }
+  .bg-background\/95 {
+    background-color: color-mix(in srgb, theme(colors.neutral.100) 95%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        background-color: color-mix(in oklab, var(--color-background) 95%, transparent);
+      }
+    }
+  }
+  .bg-base-50 {
+    background-color: var(--color-base-50);
+  }
+  .bg-base-100 {
+    background-color: var(--color-base-100);
+  }
+  .bg-base-200 {
+    background-color: var(--color-base-200);
+  }
+  .bg-base-400 {
+    background-color: var(--color-base-400);
+  }
+  .bg-base-600 {
+    background-color: var(--color-base-600);
+  }
+  .bg-base-800 {
+    background-color: var(--color-base-800);
+  }
+  .bg-base-900 {
+    background-color: var(--color-base-900);
+  }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1041,18 +1101,18 @@
   .bg-blue-100 {
     background-color: var(--color-blue-100);
   }
-  .bg-brand-50 {
-    background-color: var(--color-brand-50);
-  }
   .bg-brand-100 {
     background-color: var(--color-brand-100);
   }
-  .bg-brand-300 {
-    background-color: var(--color-brand-300);
+  .bg-brand-500 {
+    background-color: var(--color-brand-500);
   }
   .bg-brand-600 {
     background-color: var(--color-brand-600);
   }
+  .bg-card {
+    background-color: var(--color-card);
+  }
   .bg-energetic {
     background-color: var(--color-energetic);
   }
@@ -1062,21 +1122,6 @@
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
-  .bg-gray-100 {
-    background-color: var(--color-gray-100);
-  }
-  .bg-gray-200 {
-    background-color: var(--color-gray-200);
-  }
-  .bg-gray-600 {
-    background-color: var(--color-gray-600);
-  }
-  .bg-gray-800 {
-    background-color: var(--color-gray-800);
-  }
-  .bg-gray-900 {
-    background-color: var(--color-gray-900);
-  }
   .bg-green-50 {
     background-color: var(--color-green-50);
   }
@@ -1092,6 +1137,9 @@
   .bg-info {
     background-color: var(--color-info);
   }
+  .bg-input {
+    background-color: var(--color-input);
+  }
   .bg-iris-50 {
     background-color: var(--color-iris-50);
   }
@@ -1101,17 +1149,12 @@
   .bg-neutral {
     background-color: var(--color-neutral);
   }
+  .bg-overlay {
+    background-color: var(--color-overlay);
+  }
   .bg-primary {
     background-color: var(--color-primary);
   }
-  .bg-primary\/10 {
-    background-color: color-mix(in srgb, theme(colors.brand.600) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      & {
-        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
-      }
-    }
-  }
   .bg-purple-600 {
     background-color: var(--color-purple-600);
   }
@@ -1130,24 +1173,9 @@
   .bg-secondary {
     background-color: var(--color-secondary);
   }
-  .bg-stone-300 {
-    background-color: var(--color-stone-300);
-  }
   .bg-success {
     background-color: var(--color-success);
   }
-  .bg-surface-disabled {
-    background-color: var(--color-surface-disabled);
-  }
-  .bg-surface-elevated {
-    background-color: var(--color-surface-elevated);
-  }
-  .bg-surface-level-0 {
-    background-color: var(--color-surface-level-0);
-  }
-  .bg-surface-level-1 {
-    background-color: var(--color-surface-level-1);
-  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1206,8 +1234,8 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .px-12 {
-    padding-inline: calc(var(--spacing) * 12);
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
   }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
@@ -1233,11 +1261,14 @@
   .py-8 {
     padding-block: calc(var(--spacing) * 8);
   }
-  .py-16 {
-    padding-block: calc(var(--spacing) * 16);
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+  .py-24 {
+    padding-block: calc(var(--spacing) * 24);
   }
-  .py-20 {
-    padding-block: calc(var(--spacing) * 20);
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
   }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
@@ -1321,6 +1352,10 @@
     --tw-leading: calc(var(--spacing) * 8);
     line-height: calc(var(--spacing) * 8);
   }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -1357,18 +1392,52 @@
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
   }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
   .text-nowrap {
     text-wrap: nowrap;
   }
   .whitespace-pre {
     white-space: pre;
   }
+  .text-action-primary {
+    color: var(--color-action-primary);
+  }
+  .text-base-50 {
+    color: var(--color-base-50);
+  }
+  .text-base-100 {
+    color: var(--color-base-100);
+  }
+  .text-base-300 {
+    color: var(--color-base-300);
+  }
+  .text-base-400 {
+    color: var(--color-base-400);
+  }
+  .text-base-600 {
+    color: var(--color-base-600);
+  }
+  .text-base-700 {
+    color: var(--color-base-700);
+  }
+  .text-base-800 {
+    color: var(--color-base-800);
+  }
+  .text-base-900 {
+    color: var(--color-base-900);
+  }
   .text-blue-800 {
     color: var(--color-blue-800);
   }
   .text-body {
     color: var(--color-body);
   }
+  .text-brand-600 {
+    color: var(--color-brand-600);
+  }
   .text-brand-700 {
     color: var(--color-brand-700);
   }
@@ -1378,39 +1447,37 @@
   .text-caption {
     color: var(--color-caption);
   }
+  .text-card {
+    color: var(--color-card);
+  }
   .text-current {
     color: currentcolor;
   }
   .text-description {
     color: var(--color-description);
   }
+  .text-description\/60 {
+    color: color-mix(in srgb, theme(colors.neutral.600) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        color: color-mix(in oklab, var(--color-description) 60%, transparent);
+      }
+    }
+  }
+  .text-description\/80 {
+    color: color-mix(in srgb, theme(colors.neutral.600) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        color: color-mix(in oklab, var(--color-description) 80%, transparent);
+      }
+    }
+  }
   .text-energetic {
     color: var(--color-energetic);
   }
   .text-error {
     color: var(--color-error);
   }
-  .text-gray-100 {
-    color: var(--color-gray-100);
-  }
-  .text-gray-300 {
-    color: var(--color-gray-300);
-  }
-  .text-gray-400 {
-    color: var(--color-gray-400);
-  }
-  .text-gray-600 {
-    color: var(--color-gray-600);
-  }
-  .text-gray-700 {
-    color: var(--color-gray-700);
-  }
-  .text-gray-800 {
-    color: var(--color-gray-800);
-  }
-  .text-gray-900 {
-    color: var(--color-gray-900);
-  }
   .text-green-800 {
     color: var(--color-green-800);
   }
@@ -1441,9 +1508,6 @@
   .text-primary {
     color: var(--color-primary);
   }
-  .text-red-500 {
-    color: var(--color-red-500);
-  }
   .text-red-800 {
     color: var(--color-red-800);
   }
@@ -1471,22 +1535,30 @@
   .underline {
     text-decoration-line: underline;
   }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
   .opacity-0 {
     opacity: 0%;
   }
   .opacity-50 {
     opacity: 50%;
   }
-  .opacity-75 {
-    opacity: 75%;
-  }
   .opacity-100 {
     opacity: 100%;
   }
+  .shadow {
+    --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-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 4px 6px -4px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity))), 0 1px 2px -1px var(--tw-shadow-color, rgb(var(--shadow-color) / var(--shadow-opacity)));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1507,6 +1579,10 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .backdrop-blur {
+    --tw-backdrop-blur: blur(8px);
+    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, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1540,23 +1616,6 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
-  .group-focus-within\:visible {
-    &:is(:where(.group):focus-within *) {
-      visibility: visible;
-    }
-  }
-  .group-focus-within\:opacity-100 {
-    &:is(:where(.group):focus-within *) {
-      opacity: 100%;
-    }
-  }
-  .group-hover\:visible {
-    &:is(:where(.group):hover *) {
-      @media (hover: hover) {
-        visibility: visible;
-      }
-    }
-  }
   .group-hover\:scale-110 {
     &:is(:where(.group):hover *) {
       @media (hover: hover) {
@@ -1605,24 +1664,24 @@
       }
     }
   }
-  .hover\:border-brand-500 {
+  .hover\:border-base-300 {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-brand-500);
+        border-color: var(--color-base-300);
       }
     }
   }
-  .hover\:border-gray-300 {
+  .hover\:border-base-400 {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-gray-300);
+        border-color: var(--color-base-400);
       }
     }
   }
-  .hover\:border-gray-400 {
+  .hover\:border-brand-500 {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-gray-400);
+        border-color: var(--color-brand-500);
       }
     }
   }
@@ -1652,101 +1711,108 @@
       }
     }
   }
-  .hover\:bg-blue-700 {
+  .hover\:bg-action-secondary {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-blue-700);
+        background-color: var(--color-action-secondary);
       }
     }
   }
-  .hover\:bg-brand-50 {
+  .hover\:bg-action-secondary-hover {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-brand-50);
+        background-color: var(--color-action-secondary-hover);
       }
     }
   }
-  .hover\:bg-brand-200 {
+  .hover\:bg-base-50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-brand-200);
+        background-color: var(--color-base-50);
       }
     }
   }
-  .hover\:bg-gray-100 {
+  .hover\:bg-base-100 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-gray-100);
+        background-color: var(--color-base-100);
       }
     }
   }
-  .hover\:bg-gray-700 {
+  .hover\:bg-base-200 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-gray-700);
+        background-color: var(--color-base-200);
       }
     }
   }
-  .hover\:bg-green-700 {
+  .hover\:bg-base-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-green-700);
+        background-color: var(--color-base-700);
       }
     }
   }
-  .hover\:bg-purple-700 {
+  .hover\:bg-blue-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-purple-700);
+        background-color: var(--color-blue-700);
       }
     }
   }
-  .hover\:bg-red-700 {
+  .hover\:bg-card-hover {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-red-700);
+        background-color: var(--color-card-hover);
       }
     }
   }
-  .hover\:bg-surface-hover {
+  .hover\:bg-green-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-surface-hover);
+        background-color: var(--color-green-700);
       }
     }
   }
-  .hover\:bg-surface-level-0 {
+  .hover\:bg-input-hover {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-surface-level-0);
+        background-color: var(--color-input-hover);
       }
     }
   }
-  .hover\:bg-surface-level-1 {
+  .hover\:bg-purple-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-surface-level-1);
+        background-color: var(--color-purple-700);
       }
     }
   }
-  .hover\:bg-surface-level-2 {
+  .hover\:bg-red-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-surface-level-2);
+        background-color: var(--color-red-700);
       }
     }
   }
-  .hover\:text-body {
+  .hover\:text-action-primary {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-body);
+        color: var(--color-action-primary);
       }
     }
   }
-  .hover\:text-gray-600 {
+  .hover\:text-base-600 {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-gray-600);
+        color: var(--color-base-600);
+      }
+    }
+  }
+  .hover\:text-body {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-body);
       }
     }
   }
@@ -1771,6 +1837,13 @@
       }
     }
   }
+  .hover\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
   .hover\:shadow-lg {
     &:hover {
       @media (hover: hover) {
@@ -1803,6 +1876,18 @@
       }
     }
   }
+  .focus\:not-sr-only {
+    &:focus {
+      position: static;
+      width: auto;
+      height: auto;
+      padding: 0;
+      margin: 0;
+      overflow: visible;
+      clip-path: none;
+      white-space: normal;
+    }
+  }
   .focus\:border-blue-500 {
     &:focus {
       border-color: var(--color-blue-500);
@@ -1848,20 +1933,25 @@
       border-color: var(--color-yellow-500);
     }
   }
+  .focus\:bg-input-focus {
+    &:focus {
+      background-color: var(--color-input-focus);
+    }
+  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       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-blue-500 {
+  .focus\:ring-base-500 {
     &:focus {
-      --tw-ring-color: var(--color-blue-500);
+      --tw-ring-color: var(--color-base-500);
     }
   }
-  .focus\:ring-brand-200 {
+  .focus\:ring-blue-500 {
     &:focus {
-      --tw-ring-color: var(--color-brand-200);
+      --tw-ring-color: var(--color-blue-500);
     }
   }
   .focus\:ring-brand-500 {
@@ -1874,11 +1964,6 @@
       --tw-ring-color: var(--color-error);
     }
   }
-  .focus\:ring-gray-500 {
-    &:focus {
-      --tw-ring-color: var(--color-gray-500);
-    }
-  }
   .focus\:ring-green-500 {
     &:focus {
       --tw-ring-color: var(--color-green-500);
@@ -1894,21 +1979,11 @@
       --tw-ring-color: var(--color-purple-500);
     }
   }
-  .focus\:ring-red-200 {
-    &:focus {
-      --tw-ring-color: var(--color-red-200);
-    }
-  }
   .focus\:ring-red-500 {
     &:focus {
       --tw-ring-color: var(--color-red-500);
     }
   }
-  .focus\:ring-stone-500 {
-    &:focus {
-      --tw-ring-color: var(--color-stone-500);
-    }
-  }
   .focus\:ring-success {
     &:focus {
       --tw-ring-color: var(--color-success);
@@ -1936,6 +2011,11 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .focus\:ring-offset-base-50 {
+    &:focus {
+      --tw-ring-offset-color: var(--color-base-50);
+    }
+  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -1960,24 +2040,24 @@
       background-color: var(--color-action-primary-active);
     }
   }
-  .active\:bg-blue-800 {
+  .active\:bg-action-secondary-active {
     &:active {
-      background-color: var(--color-blue-800);
+      background-color: var(--color-action-secondary-active);
     }
   }
-  .active\:bg-brand-300 {
+  .active\:bg-base-200 {
     &:active {
-      background-color: var(--color-brand-300);
+      background-color: var(--color-base-200);
     }
   }
-  .active\:bg-gray-200 {
+  .active\:bg-base-800 {
     &:active {
-      background-color: var(--color-gray-200);
+      background-color: var(--color-base-800);
     }
   }
-  .active\:bg-gray-800 {
+  .active\:bg-blue-800 {
     &:active {
-      background-color: var(--color-gray-800);
+      background-color: var(--color-blue-800);
     }
   }
   .active\:bg-green-800 {
@@ -1995,9 +2075,14 @@
       background-color: var(--color-red-800);
     }
   }
-  .active\:bg-surface-active {
+  .active\:text-action-primary {
     &:active {
-      background-color: var(--color-surface-active);
+      color: var(--color-action-primary);
+    }
+  }
+  .active\:text-brand-700 {
+    &:active {
+      color: var(--color-brand-700);
     }
   }
   .disabled\:pointer-events-none {
@@ -2010,14 +2095,24 @@
       cursor: not-allowed;
     }
   }
-  .disabled\:bg-blue-400 {
+  .disabled\:border-disabled {
     &:disabled {
-      background-color: var(--color-blue-400);
+      border-color: var(--color-disabled);
+    }
+  }
+  .disabled\:bg-base-200 {
+    &:disabled {
+      background-color: var(--color-base-200);
     }
   }
-  .disabled\:bg-gray-400 {
+  .disabled\:bg-base-400 {
     &:disabled {
-      background-color: var(--color-gray-400);
+      background-color: var(--color-base-400);
+    }
+  }
+  .disabled\:bg-blue-400 {
+    &:disabled {
+      background-color: var(--color-blue-400);
     }
   }
   .disabled\:bg-green-400 {
@@ -2025,6 +2120,11 @@
       background-color: var(--color-green-400);
     }
   }
+  .disabled\:bg-input-disabled {
+    &:disabled {
+      background-color: var(--color-input-disabled);
+    }
+  }
   .disabled\:bg-purple-400 {
     &:disabled {
       background-color: var(--color-purple-400);
@@ -2035,9 +2135,9 @@
       background-color: var(--color-red-400);
     }
   }
-  .disabled\:bg-surface-disabled {
+  .disabled\:text-base-400 {
     &:disabled {
-      background-color: var(--color-surface-disabled);
+      color: var(--color-base-400);
     }
   }
   .disabled\:text-disabled {
@@ -2045,9 +2145,9 @@
       color: var(--color-disabled);
     }
   }
-  .disabled\:text-gray-400 {
+  .disabled\:no-underline {
     &:disabled {
-      color: var(--color-gray-400);
+      text-decoration-line: none;
     }
   }
   .disabled\:opacity-50 {
@@ -2055,6 +2155,16 @@
       opacity: 50%;
     }
   }
+  .supports-\[backdrop-filter\]\:bg-background\/60 {
+    @supports (backdrop-filter: var(--tw)) {
+      background-color: color-mix(in srgb, theme(colors.neutral.100) 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        & {
+          background-color: color-mix(in oklab, var(--color-background) 60%, transparent);
+        }
+      }
+    }
+  }
   .motion-reduce\:transition-none {
     @media (prefers-reduced-motion: reduce) {
       transition-property: none;
@@ -2075,6 +2185,29 @@
       padding-inline: calc(var(--spacing) * 6);
     }
   }
+  .sm\:py-32 {
+    @media (width >= 40rem) {
+      padding-block: calc(var(--spacing) * 32);
+    }
+  }
+  .sm\:text-2xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .sm\:text-4xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .sm\:text-6xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
+  }
   .md\:block {
     @media (width >= 48rem) {
       display: block;
@@ -2135,16 +2268,10 @@
       text-align: left;
     }
   }
-  .md\:text-2xl {
-    @media (width >= 48rem) {
-      font-size: var(--text-2xl);
-      line-height: var(--tw-leading, var(--text-2xl--line-height));
-    }
-  }
-  .md\:text-6xl {
+  .md\:text-7xl {
     @media (width >= 48rem) {
-      font-size: var(--text-6xl);
-      line-height: var(--tw-leading, var(--text-6xl--line-height));
+      font-size: var(--text-7xl);
+      line-height: var(--tw-leading, var(--text-7xl--line-height));
     }
   }
   .lg\:grid-cols-3 {
@@ -2172,98 +2299,93 @@ body {
   font-family: var(--font-family-sans);
 }
 .dark {
-  --color-surface-level-0: oklch(26.8% 0.007 34.298);
-  --color-surface-level-0-hover: oklch(37.4% 0.01 67.558);
-  --color-surface-level-1: oklch(37.4% 0.01 67.558);
-  --color-surface-level-1-hover: oklch(44.4% 0.011 73.639);
-  --color-surface-level-2: oklch(44.4% 0.011 73.639);
-  --color-surface-level-2-hover: oklch(55.3% 0.013 58.071);
-  --color-surface-elevated: oklch(26.8% 0.007 34.298);
-  --color-surface-elevated-hover: oklch(37.4% 0.01 67.558);
-  --color-surface-hover: oklch(37.4% 0.01 67.558);
-  --color-surface-active: oklch(44.4% 0.011 73.639);
-  --color-surface-inverse: oklch(97% 0.001 106.424);
-  --color-surface-disabled: oklch(37.4% 0.01 67.558);
-  --color-surface-container-high: oklch(37.4% 0.01 67.558);
-  --color-background: oklch(21.6% 0.006 56.043);
-  --color-background-secondary: oklch(26.8% 0.007 34.298);
-  --color-background-tertiary: oklch(37.4% 0.01 67.558);
-  --color-page: oklch(26.8% 0.007 34.298);
-  --color-page-secondary: oklch(26.8% 0.007 34.298);
-  --color-card: oklch(26.8% 0.007 34.298);
-  --color-card-hover: oklch(37.4% 0.01 67.558);
-  --color-card-active: oklch(44.4% 0.011 73.639);
-  --color-card-elevated: oklch(26.8% 0.007 34.298);
-  --color-headline: oklch(97% 0.001 106.424);
-  --color-body: oklch(92.3% 0.003 48.717);
-  --color-description: oklch(86.9% 0.005 56.366);
-  --color-caption: oklch(70.9% 0.01 56.259);
-  --color-input-placeholder: oklch(55.3% 0.013 58.071);
-  --color-label: oklch(92.3% 0.003 48.717);
-  --color-link: #abc4ff;
-  --color-link-hover: #ccdbfd;
-  --color-success-text: #49ad91;
-  --color-warning-text: oklch(82.8% 0.189 84.429);
-  --color-neutral-text: oklch(70.9% 0.01 56.259);
-  --color-energetic-text: #c7d460;
-  --color-error-text: oklch(70.4% 0.191 22.216);
-  --color-inverse: oklch(21.6% 0.006 56.043);
-  --color-disabled: oklch(55.3% 0.013 58.071);
-  --color-border: oklch(44.4% 0.011 73.639);
-  --color-border-weak: oklch(55.3% 0.013 58.071);
-  --color-border-medium: oklch(70.9% 0.01 56.259);
-  --color-border-strong: oklch(86.9% 0.005 56.366);
-  --color-focus: #abc4ff;
-  --color-focus-weak: #8fa8ff;
-  --color-focus-medium: #6e84fa;
-  --color-focus-strong: #5366e2;
-  --color-focus-disabled: #6e84fa;
-  --color-primary: #6e84fa;
-  --color-primary-weak: #5366e2;
-  --color-primary-medium: #3f4fc0;
-  --color-primary-strong: #2f3c99;
-  --color-secondary: oklch(44.4% 0.011 73.639);
-  --color-secondary-weak: oklch(37.4% 0.01 67.558);
-  --color-secondary-medium: oklch(26.8% 0.007 34.298);
-  --color-secondary-strong: oklch(21.6% 0.006 56.043);
-  --color-success: #0C5D43;
-  --color-success-weak: #0a513a;
-  --color-success-medium: #49ad91;
-  --color-success-strong: #78c4ad;
-  --color-warning: oklch(66.6% 0.179 58.318);
-  --color-warning-weak: oklch(55.5% 0.163 48.998);
-  --color-warning-medium: oklch(47.3% 0.137 46.201);
-  --color-warning-strong: oklch(41.4% 0.112 45.904);
-  --color-error: oklch(57.7% 0.245 27.325);
-  --color-error-weak: oklch(50.5% 0.213 27.518);
-  --color-error-medium: oklch(44.4% 0.177 26.899);
-  --color-error-strong: oklch(39.6% 0.141 25.723);
-  --color-energetic: #a3a852;
-  --color-energetic-weak: #848a43;
-  --color-energetic-medium: #666c35;
-  --color-energetic-strong: #4d5229;
-  --color-neutral: oklch(44.4% 0.011 73.639);
-  --color-neutral-weak: oklch(55.3% 0.013 58.071);
-  --color-neutral-medium: oklch(70.9% 0.01 56.259);
-  --color-neutral-strong: oklch(86.9% 0.005 56.366);
+  --color-brand-50: #1f2866;
+  --color-brand-100: #2f3c99;
+  --color-brand-200: #3f4fc0;
+  --color-brand-300: #5366e2;
+  --color-brand-400: #6e84fa;
+  --color-brand-500: #8fa8ff;
+  --color-brand-600: #abc4ff;
+  --color-brand-700: #ccdbfd;
+  --color-brand-800: #dfe7fb;
+  --color-brand-900: #edf2fb;
+  --color-brand-950: #f7faff;
+  --color-citron-50: #323518;
+  --color-citron-100: #4d5229;
+  --color-citron-200: #666c35;
+  --color-citron-300: #848a43;
+  --color-citron-400: #a3a852;
+  --color-citron-500: #bbbe64;
+  --color-citron-600: #c7d460;
+  --color-citron-700: #d5e184;
+  --color-citron-800: #e4ecaa;
+  --color-citron-900: #f1f5cf;
+  --color-citron-950: #f9faeb;
+  --color-pine-50: #02160f;
+  --color-pine-100: #04231a;
+  --color-pine-200: #063a2a;
+  --color-pine-300: #084532;
+  --color-pine-400: #0a513a;
+  --color-pine-500: #0C5D43;
+  --color-pine-600: #49ad91;
+  --color-pine-700: #78c4ad;
+  --color-pine-800: #a7d9c9;
+  --color-pine-900: #d2ece4;
+  --color-pine-950: #e9f6f2;
+  --color-iris-50: #1b1b37;
+  --color-iris-100: #2a2a56;
+  --color-iris-200: #38386f;
+  --color-iris-300: #474788;
+  --color-iris-400: #58589e;
+  --color-iris-500: #6969B3;
+  --color-iris-600: #a3a3d8;
+  --color-iris-700: #bdbde6;
+  --color-iris-800: #d6d6f0;
+  --color-iris-900: #e9e9f7;
+  --color-iris-950: #f4f4fa;
+  --color-base-50: oklch(14.5% 0 0);
+  --color-base-100: oklch(20.5% 0 0);
+  --color-base-200: oklch(26.9% 0 0);
+  --color-base-300: oklch(37.1% 0 0);
+  --color-base-400: oklch(43.9% 0 0);
+  --color-base-500: oklch(55.6% 0 0);
+  --color-base-600: oklch(70.8% 0 0);
+  --color-base-700: oklch(87% 0 0);
+  --color-base-800: oklch(92.2% 0 0);
+  --color-base-900: oklch(97% 0 0);
+  --color-base-950: oklch(98.5% 0 0);
+  --color-card: var(--color-base-200);
+  --color-card-hover: var(--color-base-300);
+  --color-card-active: var(--color-base-400);
+  --color-card-elevated: var(--color-base-200);
+  --color-overlay: rgba(0, 0, 0, 0.7);
+  --color-input: var(--color-base-300);
+  --color-input-hover: var(--color-base-400);
+  --color-input-focus: var(--color-base-300);
+  --color-input-disabled: var(--color-base-400);
+  --color-success: #49ad91;
+  --color-success-weak: #0C5D43;
+  --color-success-medium: #78c4ad;
+  --color-success-strong: #a7d9c9;
+  --color-warning: oklch(76.9% 0.188 70.08);
+  --color-warning-weak: oklch(66.6% 0.179 58.318);
+  --color-warning-medium: oklch(82.8% 0.189 84.429);
+  --color-warning-strong: oklch(87.9% 0.169 91.605);
+  --color-error: oklch(63.7% 0.237 25.331);
+  --color-error-weak: oklch(57.7% 0.245 27.325);
+  --color-error-medium: oklch(70.4% 0.191 22.216);
+  --color-error-strong: oklch(80.8% 0.114 19.571);
+  --color-energetic: #c7d460;
+  --color-energetic-weak: #bbbe64;
+  --color-energetic-medium: #d5e184;
+  --color-energetic-strong: #e4ecaa;
   --color-info: #6969B3;
   --color-info-weak: #58589e;
   --color-info-active: #a3a3d8;
   --color-info-medium: #a3a3d8;
   --color-info-strong: #bdbde6;
   --color-info-text: var(--color-info);
-  --color-action-primary: #8fa8ff;
-  --color-action-primary-hover: #6e84fa;
-  --color-action-primary-active: #5366e2;
-  --color-action-primary-disabled: #5366e2;
-  --color-action-primary-subtle: #1f2866;
-  --color-action-primary-subtle-hover: #2f3c99;
-  --color-action-secondary: oklch(55.3% 0.013 58.071);
-  --color-action-secondary-hover: oklch(44.4% 0.011 73.639);
-  --color-action-secondary-active: oklch(37.4% 0.01 67.558);
-  --color-action-secondary-disabled: oklch(37.4% 0.01 67.558);
-  --color-action-secondary-subtle: oklch(26.8% 0.007 34.298);
-  --color-action-secondary-subtle-hover: oklch(37.4% 0.01 67.558);
+  --color-action-primary-text: var(--color-brand-50);
   --color-action-danger: oklch(63.7% 0.237 25.331);
   --color-action-danger-hover: oklch(57.7% 0.245 27.325);
   --color-action-danger-active: oklch(50.5% 0.213 27.518);
@@ -2276,26 +2398,71 @@ body {
   --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
   --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
 }
-.bg-surface-level-0 {
-  background-color: var(--color-surface-level-0);
+.bg-base-50 {
+  background-color: var(--color-base-50);
+}
+.bg-base-100 {
+  background-color: var(--color-base-100);
+}
+.bg-base-200 {
+  background-color: var(--color-base-200);
+}
+.bg-base-300 {
+  background-color: var(--color-base-300);
+}
+.bg-base-400 {
+  background-color: var(--color-base-400);
+}
+.bg-base-500 {
+  background-color: var(--color-base-500);
+}
+.bg-base-600 {
+  background-color: var(--color-base-600);
+}
+.bg-base-700 {
+  background-color: var(--color-base-700);
+}
+.bg-base-800 {
+  background-color: var(--color-base-800);
+}
+.bg-base-900 {
+  background-color: var(--color-base-900);
+}
+.bg-base-950 {
+  background-color: var(--color-base-950);
+}
+.hover\:bg-base-50:hover {
+  background-color: var(--color-base-50);
 }
-.bg-surface-level-1 {
-  background-color: var(--color-surface-level-1);
+.hover\:bg-base-100:hover {
+  background-color: var(--color-base-100);
 }
-.bg-surface-level-2 {
-  background-color: var(--color-surface-level-2);
+.hover\:bg-base-200:hover {
+  background-color: var(--color-base-200);
 }
-.bg-surface-elevated {
-  background-color: var(--color-surface-elevated);
+.hover\:bg-base-300:hover {
+  background-color: var(--color-base-300);
 }
-.bg-surface-hover {
-  background-color: var(--color-surface-hover);
+.bg-card {
+  background-color: var(--color-card);
 }
-.bg-surface-active {
-  background-color: var(--color-surface-active);
+.hover\:bg-card-hover:hover {
+  background-color: var(--color-card-hover);
 }
-.bg-surface-container-high {
-  background-color: var(--color-surface-container-high);
+.bg-overlay {
+  background-color: var(--color-overlay);
+}
+.bg-input {
+  background-color: var(--color-input);
+}
+.hover\:bg-input-hover:hover {
+  background-color: var(--color-input-hover);
+}
+.focus\:bg-input-focus:focus {
+  background-color: var(--color-input-focus);
+}
+.disabled\:bg-input-disabled:disabled {
+  background-color: var(--color-input-disabled);
 }
 .bg-page {
   background-color: var(--color-page);
@@ -2531,6 +2698,9 @@ body {
 .bg-action-primary-subtle:hover {
   background-color: var(--color-action-primary-subtle-hover);
 }
+.text-action-primary {
+  color: var(--color-action-primary-text);
+}
 .bg-action-secondary {
   background-color: var(--color-action-secondary);
 }
@@ -2778,6 +2948,42 @@ body {
   syntax: "*";
   inherits: false;
 }
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -2851,6 +3057,15 @@ body {
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-scale-x: 1;