zabi-components 5.0.15 → 5.0.17

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);
@@ -95,7 +83,7 @@
     --radius-sm: 0.25rem;
     --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));
@@ -118,47 +106,66 @@
     --color-brand-800: #3f4fc0;
     --color-brand-900: #2f3c99;
     --color-brand-950: #1f2866;
+    --color-citron-300: #d5e184;
+    --color-citron-400: #c7d460;
+    --color-citron-500: #bbbe64;
+    --color-citron-600: #a3a852;
+    --color-citron-700: #848a43;
+    --color-pine-600: #0a513a;
+    --color-pine-700: #084532;
+    --color-pine-800: #063a2a;
+    --color-pine-900: #04231a;
     --color-iris-50: #f4f4fa;
     --color-iris-100: #e9e9f7;
     --color-iris-200: #d6d6f0;
     --color-iris-300: #bdbde6;
     --color-iris-500: #6969B3;
+    --color-iris-600: #58589e;
+    --color-iris-700: #474788;
+    --color-iris-800: #38386f;
     --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-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 +174,29 @@
     --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: #3f4fc0;
+    --color-action-primary-hover: #2f3c99;
+    --color-action-primary-active: #6e84fa;
+    --color-action-primary-disabled: #abc4ff;
+    --color-action-primary-subtle: #edf2fb;
+    --color-action-primary-subtle-hover: #dfe7fb;
+    --color-action-secondary: var(--color-base-600);
+    --color-action-secondary-hover: var(--color-base-700);
+    --color-action-secondary-active: var(--color-base-800);
+    --color-action-secondary-disabled: var(--color-base-300);
+    --color-action-secondary-subtle: var(--color-base-100);
+    --color-action-secondary-subtle-hover: var(--color-base-200);
     --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 +432,12 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-6 {
+    top: calc(var(--spacing) * 6);
+  }
+  .top-8 {
+    top: calc(var(--spacing) * 8);
+  }
   .top-full {
     top: 100%;
   }
@@ -437,6 +450,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .right-8 {
+    right: calc(var(--spacing) * 8);
+  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -449,6 +465,9 @@
   .left-0\.5 {
     left: calc(var(--spacing) * 0.5);
   }
+  .left-6 {
+    left: calc(var(--spacing) * 6);
+  }
   .z-10 {
     z-index: 10;
   }
@@ -663,6 +682,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 +703,9 @@
   .min-w-\[12rem\] {
     min-width: 12rem;
   }
+  .min-w-\[250px\] {
+    min-width: 250px;
+  }
   .min-w-\[320px\] {
     min-width: 320px;
   }
@@ -879,9 +904,6 @@
   .rounded {
     border-radius: 0.25rem;
   }
-  .rounded-2xl {
-    border-radius: var(--radius-2xl);
-  }
   .rounded-\[20px\] {
     border-radius: 20px;
   }
@@ -894,6 +916,9 @@
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
   .rounded-t-3xl {
     border-top-left-radius: var(--radius-3xl);
     border-top-right-radius: var(--radius-3xl);
@@ -937,6 +962,18 @@
   .border-\[var\(--color-success\)\] {
     border-color: var(--color-success);
   }
+  .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 +992,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 +1022,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);
   }
@@ -1027,6 +1049,27 @@
   .bg-background {
     background-color: var(--color-background);
   }
+  .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 +1084,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 +1105,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 +1120,9 @@
   .bg-info {
     background-color: var(--color-info);
   }
+  .bg-input {
+    background-color: var(--color-input);
+  }
   .bg-iris-50 {
     background-color: var(--color-iris-50);
   }
@@ -1130,24 +1161,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 +1222,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);
@@ -1260,6 +1276,9 @@
   .pb-6 {
     padding-bottom: calc(var(--spacing) * 6);
   }
+  .pl-14 {
+    padding-left: calc(var(--spacing) * 14);
+  }
   .text-center {
     text-align: center;
   }
@@ -1363,6 +1382,30 @@
   .whitespace-pre {
     white-space: pre;
   }
+  .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);
   }
@@ -1378,39 +1421,29 @@
   .text-caption {
     color: var(--color-caption);
   }
+  .text-card {
+    color: var(--color-card);
+  }
   .text-current {
     color: currentcolor;
   }
   .text-description {
     color: var(--color-description);
   }
+  .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);
   }
@@ -1540,23 +1573,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 +1621,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,87 +1668,87 @@
       }
     }
   }
-  .hover\:bg-blue-700 {
+  .hover\:bg-base-50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-blue-700);
+        background-color: var(--color-base-50);
       }
     }
   }
-  .hover\:bg-brand-50 {
+  .hover\:bg-base-100 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-brand-50);
+        background-color: var(--color-base-100);
       }
     }
   }
-  .hover\:bg-brand-200 {
+  .hover\:bg-base-200 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-brand-200);
+        background-color: var(--color-base-200);
       }
     }
   }
-  .hover\:bg-gray-100 {
+  .hover\:bg-base-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-gray-100);
+        background-color: var(--color-base-700);
       }
     }
   }
-  .hover\:bg-gray-700 {
+  .hover\:bg-blue-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-gray-700);
+        background-color: var(--color-blue-700);
       }
     }
   }
-  .hover\:bg-green-700 {
+  .hover\:bg-brand-200 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-green-700);
+        background-color: var(--color-brand-200);
       }
     }
   }
-  .hover\:bg-purple-700 {
+  .hover\:bg-card-hover {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-purple-700);
+        background-color: var(--color-card-hover);
       }
     }
   }
-  .hover\:bg-red-700 {
+  .hover\:bg-green-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-red-700);
+        background-color: var(--color-green-700);
       }
     }
   }
-  .hover\:bg-surface-hover {
+  .hover\:bg-input-hover {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-surface-hover);
+        background-color: var(--color-input-hover);
       }
     }
   }
-  .hover\:bg-surface-level-0 {
+  .hover\:bg-purple-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-surface-level-0);
+        background-color: var(--color-purple-700);
       }
     }
   }
-  .hover\:bg-surface-level-1 {
+  .hover\:bg-red-700 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-surface-level-1);
+        background-color: var(--color-red-700);
       }
     }
   }
-  .hover\:bg-surface-level-2 {
+  .hover\:text-base-600 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-surface-level-2);
+        color: var(--color-base-600);
       }
     }
   }
@@ -1743,13 +1759,6 @@
       }
     }
   }
-  .hover\:text-gray-600 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-gray-600);
-      }
-    }
-  }
   .hover\:text-headline {
     &:hover {
       @media (hover: hover) {
@@ -1848,20 +1857,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 +1888,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 +1903,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 +1935,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 +1964,24 @@
       background-color: var(--color-action-primary-active);
     }
   }
-  .active\:bg-blue-800 {
+  .active\:bg-base-200 {
     &:active {
-      background-color: var(--color-blue-800);
+      background-color: var(--color-base-200);
     }
   }
-  .active\:bg-brand-300 {
+  .active\:bg-base-800 {
     &:active {
-      background-color: var(--color-brand-300);
+      background-color: var(--color-base-800);
     }
   }
-  .active\:bg-gray-200 {
+  .active\:bg-blue-800 {
     &:active {
-      background-color: var(--color-gray-200);
+      background-color: var(--color-blue-800);
     }
   }
-  .active\:bg-gray-800 {
+  .active\:bg-brand-300 {
     &:active {
-      background-color: var(--color-gray-800);
+      background-color: var(--color-brand-300);
     }
   }
   .active\:bg-green-800 {
@@ -1995,11 +1999,6 @@
       background-color: var(--color-red-800);
     }
   }
-  .active\:bg-surface-active {
-    &:active {
-      background-color: var(--color-surface-active);
-    }
-  }
   .disabled\:pointer-events-none {
     &:disabled {
       pointer-events: none;
@@ -2010,14 +2009,19 @@
       cursor: not-allowed;
     }
   }
-  .disabled\:bg-blue-400 {
+  .disabled\:bg-base-200 {
     &:disabled {
-      background-color: var(--color-blue-400);
+      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 +2029,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 +2044,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,11 +2054,6 @@
       color: var(--color-disabled);
     }
   }
-  .disabled\:text-gray-400 {
-    &:disabled {
-      color: var(--color-gray-400);
-    }
-  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;
@@ -2172,98 +2176,91 @@ 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-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-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 +2273,68 @@ 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);
+}
+.hover\:bg-base-100:hover {
+  background-color: var(--color-base-100);
+}
+.hover\:bg-base-200:hover {
+  background-color: var(--color-base-200);
+}
+.hover\:bg-base-300:hover {
+  background-color: var(--color-base-300);
 }
-.bg-surface-level-1 {
-  background-color: var(--color-surface-level-1);
+.bg-card {
+  background-color: var(--color-card);
 }
-.bg-surface-level-2 {
-  background-color: var(--color-surface-level-2);
+.hover\:bg-card-hover:hover {
+  background-color: var(--color-card-hover);
 }
-.bg-surface-elevated {
-  background-color: var(--color-surface-elevated);
+.bg-input {
+  background-color: var(--color-input);
 }
-.bg-surface-hover {
-  background-color: var(--color-surface-hover);
+.hover\:bg-input-hover:hover {
+  background-color: var(--color-input-hover);
 }
-.bg-surface-active {
-  background-color: var(--color-surface-active);
+.focus\:bg-input-focus:focus {
+  background-color: var(--color-input-focus);
 }
-.bg-surface-container-high {
-  background-color: var(--color-surface-container-high);
+.disabled\:bg-input-disabled:disabled {
+  background-color: var(--color-input-disabled);
 }
 .bg-page {
   background-color: var(--color-page);