zabi-components 7.0.2 → 8.0.0

package/dist/util/cn.js

@@ -0,0 +1,48 @@
+import { extendTailwindMerge } from "tailwind-merge";
+/**
+ * Class merger for every component's final `class` value.
+ *
+ * The library promises that a call-site utility wins over the component's own.
+ * Plain concatenation does not deliver that: `rounded-control` and
+ * `rounded-container` are equal-specificity utilities, so the winner is
+ * whichever Tailwind emits later in the stylesheet, not whichever the caller
+ * passed. The sidebar's search field asked for `rounded-container` and rendered
+ * at 8px, because `rounded-control` happened to come later.
+ *
+ * tailwind-merge resolves conflicts by class group and keeps the last one, so
+ * the promise holds for real.
+ *
+ * Almost all of this repo's semantic utilities already work with the stock
+ * config — `bg-card` vs `bg-surface-overlay`, `text-headline` vs
+ * `text-description`, `border-border` vs `border-input-border` all resolve,
+ * because tailwind-merge treats an unrecognised colour-ish value as a colour.
+ * The radii are the exception: `control`, `container`, `overlay` and `pill` are
+ * role names, not scale values, so they have to be declared or tailwind-merge
+ * keeps both and we are back to stylesheet order deciding.
+ */
+const RADIUS_ROLES = ["control", "container", "overlay", "pill"];
+/**
+ * Every corner group tailwind-merge knows about, so `rounded-t-overlay` on a
+ * sheet is still beaten by a call-site `rounded-t-control`. Declaring only the
+ * base `rounded` group silently leaves the per-side ones unmerged.
+ */
+const RADIUS_GROUPS = [
+    "rounded",
+    "rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l",
+    "rounded-ss", "rounded-se", "rounded-ee", "rounded-es",
+    "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl",
+];
+const twMerge = extendTailwindMerge({
+    extend: {
+        classGroups: Object.fromEntries(RADIUS_GROUPS.map((group) => [group, [{ [group]: RADIUS_ROLES }]])),
+    },
+});
+/**
+ * Merge class values, last conflicting utility wins.
+ *
+ * Falsy entries are dropped, so `cn(base, isActive && activeClasses, className)`
+ * is safe.
+ */
+export function cn(...classes) {
+    return twMerge(classes.filter(Boolean).join(" "));
+}

package/dist/util/ssr-safe.d.ts

@@ -9,8 +9,8 @@ export declare function safeDocument(): Document | undefined;
 export declare function safeLocalStorage(): Storage | undefined;
 export declare function safeSessionStorage(): Storage | undefined;
 export declare function safeRequestAnimationFrame(callback: FrameRequestCallback): number | undefined;
-export declare function safeSetTimeout(callback: () => void, delay: number): NodeJS.Timeout | undefined;
-export declare function safeClearTimeout(id: NodeJS.Timeout | undefined): void;
-export declare function safeSetInterval(callback: () => void, delay: number): NodeJS.Timeout | undefined;
-export declare function safeClearInterval(id: NodeJS.Timeout | undefined): void;
+export declare function safeSetTimeout(callback: () => void, delay: number): ReturnType<typeof setTimeout> | undefined;
+export declare function safeClearTimeout(id: ReturnType<typeof setTimeout> | undefined): void;
+export declare function safeSetInterval(callback: () => void, delay: number): ReturnType<typeof setInterval> | undefined;
+export declare function safeClearInterval(id: ReturnType<typeof setInterval> | undefined): void;
 export declare function generateId(prefix?: string): string;

package/dist/zabi-components-colors.css

@@ -1,3 +1,3 @@
 /* zabi-components-colors — generated from src/app.css; edit app.css */
-:root{--zabi-base-50:#fafafa;--zabi-base-75:#f7f7f7;--zabi-base-100:#f4f4f5;--zabi-base-150:#ececee;--zabi-base-200:#e4e4e7;--zabi-base-250:#dcdcdf;--zabi-base-300:#d4d4d8;--zabi-base-350:#babac1;--zabi-base-400:#a1a1aa;--zabi-base-450:#898992;--zabi-base-500:#71717a;--zabi-base-550:#61616a;--zabi-base-600:#52525b;--zabi-base-650:#484850;--zabi-base-700:#3f3f46;--zabi-base-750:#333338;--zabi-base-800:#27272a;--zabi-base-850:#1f1f22;--zabi-base-900:#18181b;--zabi-base-925:#101013;--zabi-base-950:#09090b;--font-family-sans:'Nunito Sans', ui-sans-serif, system-ui, sans-serif;--zabi-brand-50:#f7faff;--zabi-brand-100:#edf2fb;--zabi-brand-200:#dfe7fb;--zabi-brand-300:#ccdbfd;--zabi-brand-400:#abc4ff;--zabi-brand-500:#8fa8ff;--zabi-brand-600:#6e84fa;--zabi-brand-700:#5366e2;--zabi-brand-800:#3f4fc0;--zabi-brand-900:#2f3c99;--zabi-brand-950:#1f2866;--color-brand-50:var(--zabi-brand-50);--color-brand-100:var(--zabi-brand-100);--color-brand-200:var(--zabi-brand-200);--color-brand-300:var(--zabi-brand-300);--color-brand-400:var(--zabi-brand-400);--color-brand-500:var(--zabi-brand-500);--color-brand-600:var(--zabi-brand-600);--color-brand-700:var(--zabi-brand-700);--color-brand-800:var(--zabi-brand-800);--color-brand-900:var(--zabi-brand-900);--color-brand-950:var(--zabi-brand-950);--zabi-citron-50:#f9faeb;--zabi-citron-100:#f1f5cf;--zabi-citron-200:#e4ecaa;--zabi-citron-300:#d5e184;--zabi-citron-400:#c7d460;--zabi-citron-500:#bbbe64;--zabi-citron-600:#a3a852;--zabi-citron-700:#848a43;--zabi-citron-800:#666c35;--zabi-citron-900:#4d5229;--zabi-citron-950:#323518;--color-citron-50:var(--zabi-citron-50);--color-citron-100:var(--zabi-citron-100);--color-citron-200:var(--zabi-citron-200);--color-citron-300:var(--zabi-citron-300);--color-citron-400:var(--zabi-citron-400);--color-citron-500:var(--zabi-citron-500);--color-citron-600:var(--zabi-citron-600);--color-citron-700:var(--zabi-citron-700);--color-citron-800:var(--zabi-citron-800);--color-citron-900:var(--zabi-citron-900);--color-citron-950:var(--zabi-citron-950);--zabi-pine-50:#e9f6f2;--zabi-pine-100:#d2ece4;--zabi-pine-200:#a7d9c9;--zabi-pine-300:#78c4ad;--zabi-pine-400:#49ad91;--zabi-pine-500:#0c5d43;--zabi-pine-600:#0a513a;--zabi-pine-700:#084532;--zabi-pine-800:#063a2a;--zabi-pine-900:#04231a;--zabi-pine-950:#02160f;--color-pine-50:var(--zabi-pine-50);--color-pine-100:var(--zabi-pine-100);--color-pine-200:var(--zabi-pine-200);--color-pine-300:var(--zabi-pine-300);--color-pine-400:var(--zabi-pine-400);--color-pine-500:var(--zabi-pine-500);--color-pine-600:var(--zabi-pine-600);--color-pine-700:var(--zabi-pine-700);--color-pine-800:var(--zabi-pine-800);--color-pine-900:var(--zabi-pine-900);--color-pine-950:var(--zabi-pine-950);--zabi-iris-50:#f4f4fa;--zabi-iris-100:#e9e9f7;--zabi-iris-200:#d6d6f0;--zabi-iris-300:#bdbde6;--zabi-iris-400:#a3a3d8;--zabi-iris-500:#6969b3;--zabi-iris-600:#58589e;--zabi-iris-700:#474788;--zabi-iris-800:#38386f;--zabi-iris-900:#2a2a56;--zabi-iris-950:#1b1b37;--color-iris-50:var(--zabi-iris-50);--color-iris-100:var(--zabi-iris-100);--color-iris-200:var(--zabi-iris-200);--color-iris-300:var(--zabi-iris-300);--color-iris-400:var(--zabi-iris-400);--color-iris-500:var(--zabi-iris-500);--color-iris-600:var(--zabi-iris-600);--color-iris-700:var(--zabi-iris-700);--color-iris-800:var(--zabi-iris-800);--color-iris-900:var(--zabi-iris-900);--color-iris-950:var(--zabi-iris-950);--zabi-warning-50:#fffbeb;--zabi-warning-100:#fef3c7;--zabi-warning-200:#fde68a;--zabi-warning-300:#fcd34d;--zabi-warning-400:#fbbf24;--zabi-warning-500:#f59e0b;--zabi-warning-600:#d97706;--zabi-warning-700:#b45309;--zabi-warning-800:#92400e;--zabi-warning-900:#78350f;--zabi-warning-950:#451a03;--color-warning-50:var(--zabi-warning-50);--color-warning-100:var(--zabi-warning-100);--color-warning-200:var(--zabi-warning-200);--color-warning-300:var(--zabi-warning-300);--color-warning-400:var(--zabi-warning-400);--color-warning-500:var(--zabi-warning-500);--color-warning-600:var(--zabi-warning-600);--color-warning-700:var(--zabi-warning-700);--color-warning-800:var(--zabi-warning-800);--color-warning-900:var(--zabi-warning-900);--color-warning-950:var(--zabi-warning-950);--zabi-error-50:#fef2f2;--zabi-error-100:#fee2e2;--zabi-error-200:#fecaca;--zabi-error-300:#fca5a5;--zabi-error-400:#f87171;--zabi-error-500:#ef4444;--zabi-error-600:#dc2626;--zabi-error-700:#b91c1c;--zabi-error-800:#991b1b;--zabi-error-900:#7f1d1d;--zabi-error-950:#450a0a;--color-error-50:var(--zabi-error-50);--color-error-100:var(--zabi-error-100);--color-error-200:var(--zabi-error-200);--color-error-300:var(--zabi-error-300);--color-error-400:var(--zabi-error-400);--color-error-500:var(--zabi-error-500);--color-error-600:var(--zabi-error-600);--color-error-700:var(--zabi-error-700);--color-error-800:var(--zabi-error-800);--color-error-900:var(--zabi-error-900);--color-error-950:var(--zabi-error-950);--color-base-50:var(--zabi-base-50);--color-base-75:var(--zabi-base-75);--color-base-100:var(--zabi-base-100);--color-base-150:var(--zabi-base-150);--color-base-200:var(--zabi-base-200);--color-base-250:var(--zabi-base-250);--color-base-300:var(--zabi-base-300);--color-base-350:var(--zabi-base-350);--color-base-400:var(--zabi-base-400);--color-base-450:var(--zabi-base-450);--color-base-500:var(--zabi-base-500);--color-base-550:var(--zabi-base-550);--color-base-600:var(--zabi-base-600);--color-base-650:var(--zabi-base-650);--color-base-700:var(--zabi-base-700);--color-base-750:var(--zabi-base-750);--color-base-800:var(--zabi-base-800);--color-base-850:var(--zabi-base-850);--color-base-900:var(--zabi-base-900);--color-base-925:var(--zabi-base-925);--color-base-950:var(--zabi-base-950);--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-page-secondary:var(--color-base-200);--color-card:#ffffff;--color-card-hover:var(--color-base-100);--color-card-active:var(--color-base-100);--color-card-elevated:#ffffff;--color-surface-1:#ffffff;--color-surface-2:var(--color-base-50);--color-surface-3:var(--color-base-75);--color-surface-4:var(--color-base-100);--color-overlay:rgba(0, 0, 0, 0.5);--color-input:var(--color-base-250);--color-input-border:var(--color-base-350);--color-input-hover:var(--color-base-300);--color-input-focus:var(--color-base-300);--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:var(--color-brand-600);--color-link-hover:var(--color-brand-700);--color-nav-menu-item:var(--color-body);--color-nav-menu-item-hover:var(--color-headline);--color-nav-menu-item-active:var(--color-link);--color-nav-menu-hover:var(--color-base-100);--color-nav-menu-active:var(--color-action-primary-subtle);--color-nav-menu-focus:var(--color-brand-500);--color-success-text:var(--color-success);--color-warning-text:var(--color-warning-700);--color-neutral-text:var(--color-base-700);--color-energetic-text:var(--color-citron-700);--color-error-text:var(--color-error-700);--color-inverse:var(--color-base-100);--color-disabled:var(--color-base-400);--color-border:var(--color-base-300);--color-border-weak:var(--color-base-300);--color-border-medium:var(--color-base-400);--color-border-strong:var(--color-base-500);--color-focus:var(--color-brand-500);--color-focus-weak:var(--color-brand-600);--color-focus-medium:var(--color-brand-700);--color-focus-strong:var(--color-brand-800);--color-focus-ring:var(--color-focus);--color-focus-ring-offset:var(--color-card);--color-primary:var(--color-brand-600);--color-primary-weak:var(--color-brand-700);--color-primary-medium:var(--color-brand-800);--color-primary-strong:var(--color-brand-900);--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:var(--color-pine-600);--color-success-weak:var(--color-pine-700);--color-success-medium:var(--color-pine-800);--color-success-strong:var(--color-pine-900);--color-warning:var(--color-warning-500);--color-warning-weak:var(--color-warning-600);--color-warning-medium:var(--color-warning-400);--color-warning-strong:var(--color-warning-300);--color-error:var(--color-error-500);--color-error-weak:var(--color-error-600);--color-error-medium:var(--color-error-400);--color-error-strong:var(--color-error-300);--color-energetic:var(--color-citron-500);--color-energetic-weak:var(--color-citron-600);--color-energetic-medium:var(--color-citron-400);--color-energetic-strong:var(--color-citron-300);--color-neutral:var(--color-base-600);--color-neutral-weak:var(--color-base-700);--color-neutral-medium:var(--color-base-800);--color-neutral-strong:var(--color-base-900);--color-info:var(--color-iris-600);--color-info-weak:var(--color-iris-700);--color-info-medium:var(--color-iris-800);--color-info-strong:var(--color-iris-900);--color-info-active:var(--color-iris-400);--color-info-text:var(--color-info);--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:color-mix(in srgb, var(--color-brand-800) 10%, transparent);--color-action-secondary-hover:color-mix(in srgb, var(--color-brand-800) 20%, transparent);--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:#dc2626;--color-action-danger-hover:#b91c1c;--color-action-danger-active:#991b1b;--color-action-danger-disabled:#fca5a5;--color-action-danger-subtle:#fef2f2;--color-action-danger-subtle-hover:#fee2e2;--shadow-color:0 0 0;--shadow-opacity:0.1;--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));--shadow-xl:0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--z-toast:1080;--color-tooltip-bg:var(--color-base-800);--color-tooltip-fg:var(--color-base-50);}
-.dark{--zabi-base-50:#fafafa;--zabi-base-75:#f7f7f7;--zabi-base-100:#f4f4f5;--zabi-base-150:#ececee;--zabi-base-200:#e4e4e7;--zabi-base-250:#dcdcdf;--zabi-base-300:#d4d4d8;--zabi-base-350:#babac1;--zabi-base-400:#a1a1aa;--zabi-base-450:#898992;--zabi-base-500:#71717a;--zabi-base-550:#61616a;--zabi-base-600:#52525b;--zabi-base-650:#484850;--zabi-base-700:#3f3f46;--zabi-base-750:#333338;--zabi-base-800:#27272a;--zabi-base-850:#1f1f22;--zabi-base-900:#18181b;--zabi-base-925:#101013;--zabi-base-950:#09090b;--zabi-brand-50:#f7faff;--zabi-brand-100:#edf2fb;--zabi-brand-200:#dfe7fb;--zabi-brand-300:#ccdbfd;--zabi-brand-400:#abc4ff;--zabi-brand-500:#8fa8ff;--zabi-brand-600:#6e84fa;--zabi-brand-700:#5366e2;--zabi-brand-800:#3f4fc0;--zabi-brand-900:#2f3c99;--zabi-brand-950:#1f2866;--color-brand-50:var(--zabi-brand-950);--color-brand-100:var(--zabi-brand-900);--color-brand-200:var(--zabi-brand-800);--color-brand-300:var(--zabi-brand-700);--color-brand-400:var(--zabi-brand-600);--color-brand-500:var(--zabi-brand-500);--color-brand-600:var(--zabi-brand-400);--color-brand-700:var(--zabi-brand-300);--color-brand-800:var(--zabi-brand-200);--color-brand-900:var(--zabi-brand-100);--color-brand-950:var(--zabi-brand-50);--zabi-citron-50:#f9faeb;--zabi-citron-100:#f1f5cf;--zabi-citron-200:#e4ecaa;--zabi-citron-300:#d5e184;--zabi-citron-400:#c7d460;--zabi-citron-500:#bbbe64;--zabi-citron-600:#a3a852;--zabi-citron-700:#848a43;--zabi-citron-800:#666c35;--zabi-citron-900:#4d5229;--zabi-citron-950:#323518;--color-citron-50:var(--zabi-citron-950);--color-citron-100:var(--zabi-citron-900);--color-citron-200:var(--zabi-citron-800);--color-citron-300:var(--zabi-citron-700);--color-citron-400:var(--zabi-citron-600);--color-citron-500:var(--zabi-citron-500);--color-citron-600:var(--zabi-citron-400);--color-citron-700:var(--zabi-citron-300);--color-citron-800:var(--zabi-citron-200);--color-citron-900:var(--zabi-citron-100);--color-citron-950:var(--zabi-citron-50);--zabi-pine-50:#e9f6f2;--zabi-pine-100:#d2ece4;--zabi-pine-200:#a7d9c9;--zabi-pine-300:#78c4ad;--zabi-pine-400:#49ad91;--zabi-pine-500:#0c5d43;--zabi-pine-600:#0a513a;--zabi-pine-700:#084532;--zabi-pine-800:#063a2a;--zabi-pine-900:#04231a;--zabi-pine-950:#02160f;--color-pine-50:var(--zabi-pine-950);--color-pine-100:var(--zabi-pine-900);--color-pine-200:var(--zabi-pine-800);--color-pine-300:var(--zabi-pine-700);--color-pine-400:var(--zabi-pine-600);--color-pine-500:var(--zabi-pine-500);--color-pine-600:var(--zabi-pine-400);--color-pine-700:var(--zabi-pine-300);--color-pine-800:var(--zabi-pine-200);--color-pine-900:var(--zabi-pine-100);--color-pine-950:var(--zabi-pine-50);--zabi-iris-50:#f4f4fa;--zabi-iris-100:#e9e9f7;--zabi-iris-200:#d6d6f0;--zabi-iris-300:#bdbde6;--zabi-iris-400:#a3a3d8;--zabi-iris-500:#6969b3;--zabi-iris-600:#58589e;--zabi-iris-700:#474788;--zabi-iris-800:#38386f;--zabi-iris-900:#2a2a56;--zabi-iris-950:#1b1b37;--color-iris-50:var(--zabi-iris-950);--color-iris-100:var(--zabi-iris-900);--color-iris-200:var(--zabi-iris-800);--color-iris-300:var(--zabi-iris-700);--color-iris-400:var(--zabi-iris-600);--color-iris-500:var(--zabi-iris-500);--color-iris-600:var(--zabi-iris-400);--color-iris-700:var(--zabi-iris-300);--color-iris-800:var(--zabi-iris-200);--color-iris-900:var(--zabi-iris-100);--color-iris-950:var(--zabi-iris-50);--zabi-warning-50:#fffbeb;--zabi-warning-100:#fef3c7;--zabi-warning-200:#fde68a;--zabi-warning-300:#fcd34d;--zabi-warning-400:#fbbf24;--zabi-warning-500:#f59e0b;--zabi-warning-600:#d97706;--zabi-warning-700:#b45309;--zabi-warning-800:#92400e;--zabi-warning-900:#78350f;--zabi-warning-950:#451a03;--color-warning-50:var(--zabi-warning-950);--color-warning-100:var(--zabi-warning-900);--color-warning-200:var(--zabi-warning-800);--color-warning-300:var(--zabi-warning-700);--color-warning-400:var(--zabi-warning-600);--color-warning-500:var(--zabi-warning-500);--color-warning-600:var(--zabi-warning-400);--color-warning-700:var(--zabi-warning-300);--color-warning-800:var(--zabi-warning-200);--color-warning-900:var(--zabi-warning-100);--color-warning-950:var(--zabi-warning-50);--zabi-error-50:#fef2f2;--zabi-error-100:#fee2e2;--zabi-error-200:#fecaca;--zabi-error-300:#fca5a5;--zabi-error-400:#f87171;--zabi-error-500:#ef4444;--zabi-error-600:#dc2626;--zabi-error-700:#b91c1c;--zabi-error-800:#991b1b;--zabi-error-900:#7f1d1d;--zabi-error-950:#450a0a;--color-error-50:var(--zabi-error-950);--color-error-100:var(--zabi-error-900);--color-error-200:var(--zabi-error-800);--color-error-300:var(--zabi-error-700);--color-error-400:var(--zabi-error-600);--color-error-500:var(--zabi-error-500);--color-error-600:var(--zabi-error-400);--color-error-700:var(--zabi-error-300);--color-error-800:var(--zabi-error-200);--color-error-900:var(--zabi-error-100);--color-error-950:var(--zabi-error-50);--color-base-50:#09090b;--color-base-75:#101013;--color-base-100:#18181b;--color-base-150:#1f1f22;--color-base-200:#27272a;--color-base-250:#333338;--color-base-300:#3f3f46;--color-base-350:#484850;--color-base-400:#52525b;--color-base-450:#61616a;--color-base-500:#71717a;--color-base-550:#898992;--color-base-600:#a1a1aa;--color-base-650:#babac1;--color-base-700:#d4d4d8;--color-base-750:#dcdcdf;--color-base-800:#e4e4e7;--color-base-850:#ececee;--color-base-900:#f4f4f5;--color-base-925:#f7f7f7;--color-base-950:#fafafa;--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-surface-1:var(--color-base-250);--color-surface-2:var(--color-base-300);--color-surface-3:var(--color-base-350);--color-surface-4:var(--color-base-400);--color-overlay:rgba(0, 0, 0, 0.7);--color-input:var(--color-base-250);--color-input-border:var(--color-base-350);--color-input-hover:var(--color-base-300);--color-input-focus:var(--color-base-300);--color-input-disabled:var(--color-base-300);--color-action-primary-text:var(--color-brand-50);--color-action-danger:#ef4444;--color-action-danger-hover:#dc2626;--color-action-danger-active:#b91c1c;--color-action-danger-disabled:#b91c1c;--color-action-danger-subtle:#450a0a;--color-action-danger-subtle-hover:#7f1d1d;--shadow-opacity:0.3;--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));--shadow-xl:0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));}
+:root{--zabi-base-50:#fafafa;--zabi-base-75:#f7f7f7;--zabi-base-100:#f4f4f5;--zabi-base-150:#ececee;--zabi-base-200:#e4e4e7;--zabi-base-250:#dcdcdf;--zabi-base-300:#d4d4d8;--zabi-base-350:#babac1;--zabi-base-400:#a1a1aa;--zabi-base-450:#898992;--zabi-base-500:#71717a;--zabi-base-550:#61616a;--zabi-base-600:#52525b;--zabi-base-650:#484850;--zabi-base-700:#3f3f46;--zabi-base-750:#333338;--zabi-base-800:#27272a;--zabi-base-850:#1f1f22;--zabi-base-900:#18181b;--zabi-base-925:#101013;--zabi-base-950:#09090b;--font-family-sans:'Nunito Sans', ui-sans-serif, system-ui, sans-serif;--zabi-brand-50:#f4f6ff;--zabi-brand-100:#e9eeff;--zabi-brand-200:#d3dcff;--zabi-brand-300:#b5c6ff;--zabi-brand-400:#92a9ff;--zabi-brand-500:#6d87f1;--zabi-brand-600:#4f68da;--zabi-brand-700:#3c52ba;--zabi-brand-800:#2b3e95;--zabi-brand-900:#1c2c6d;--zabi-brand-950:#111d49;--color-brand-50:var(--zabi-brand-50);--color-brand-100:var(--zabi-brand-100);--color-brand-200:var(--zabi-brand-200);--color-brand-300:var(--zabi-brand-300);--color-brand-400:var(--zabi-brand-400);--color-brand-500:var(--zabi-brand-500);--color-brand-600:var(--zabi-brand-600);--color-brand-700:var(--zabi-brand-700);--color-brand-800:var(--zabi-brand-800);--color-brand-900:var(--zabi-brand-900);--color-brand-950:var(--zabi-brand-950);--zabi-citron-50:#f6f7ef;--zabi-citron-100:#edefdf;--zabi-citron-200:#dcdfbf;--zabi-citron-300:#c5ca95;--zabi-citron-400:#aab063;--zabi-citron-500:#8c9027;--zabi-citron-600:#707400;--zabi-citron-700:#5a5d00;--zabi-citron-800:#454700;--zabi-citron-900:#313200;--zabi-citron-950:#202100;--color-citron-50:var(--zabi-citron-50);--color-citron-100:var(--zabi-citron-100);--color-citron-200:var(--zabi-citron-200);--color-citron-300:var(--zabi-citron-300);--color-citron-400:var(--zabi-citron-400);--color-citron-500:var(--zabi-citron-500);--color-citron-600:var(--zabi-citron-600);--color-citron-700:var(--zabi-citron-700);--color-citron-800:var(--zabi-citron-800);--color-citron-900:var(--zabi-citron-900);--color-citron-950:var(--zabi-citron-950);--zabi-pine-50:#f0f8f5;--zabi-pine-100:#e2f1eb;--zabi-pine-200:#c5e4d7;--zabi-pine-300:#9fd1bd;--zabi-pine-400:#70ba9e;--zabi-pine-500:#399c7a;--zabi-pine-600:#00805e;--zabi-pine-700:#00674a;--zabi-pine-800:#004f37;--zabi-pine-900:#003826;--zabi-pine-950:#002518;--color-pine-50:var(--zabi-pine-50);--color-pine-100:var(--zabi-pine-100);--color-pine-200:var(--zabi-pine-200);--color-pine-300:var(--zabi-pine-300);--color-pine-400:var(--zabi-pine-400);--color-pine-500:var(--zabi-pine-500);--color-pine-600:var(--zabi-pine-600);--color-pine-700:var(--zabi-pine-700);--color-pine-800:var(--zabi-pine-800);--color-pine-900:var(--zabi-pine-900);--color-pine-950:var(--zabi-pine-950);--zabi-iris-50:#f6f6fd;--zabi-iris-100:#ecedfb;--zabi-iris-200:#dadbf6;--zabi-iris-300:#c1c4ef;--zabi-iris-400:#a5a7e2;--zabi-iris-500:#8486cd;--zabi-iris-600:#6969b4;--zabi-iris-700:#535397;--zabi-iris-800:#3f3f78;--zabi-iris-900:#2c2c58;--zabi-iris-950:#1d1d3a;--color-iris-50:var(--zabi-iris-50);--color-iris-100:var(--zabi-iris-100);--color-iris-200:var(--zabi-iris-200);--color-iris-300:var(--zabi-iris-300);--color-iris-400:var(--zabi-iris-400);--color-iris-500:var(--zabi-iris-500);--color-iris-600:var(--zabi-iris-600);--color-iris-700:var(--zabi-iris-700);--color-iris-800:var(--zabi-iris-800);--color-iris-900:var(--zabi-iris-900);--color-iris-950:var(--zabi-iris-950);--zabi-warning-50:#fbf6ed;--zabi-warning-100:#f7ecda;--zabi-warning-200:#f1d9b6;--zabi-warning-300:#e8bf87;--zabi-warning-400:#db9e4c;--zabi-warning-500:#c17b00;--zabi-warning-600:#9e6000;--zabi-warning-700:#824c00;--zabi-warning-800:#663800;--zabi-warning-900:#4b2600;--zabi-warning-950:#341800;--color-warning-50:var(--zabi-warning-50);--color-warning-100:var(--zabi-warning-100);--color-warning-200:var(--zabi-warning-200);--color-warning-300:var(--zabi-warning-300);--color-warning-400:var(--zabi-warning-400);--color-warning-500:var(--zabi-warning-500);--color-warning-600:var(--zabi-warning-600);--color-warning-700:var(--zabi-warning-700);--color-warning-800:var(--zabi-warning-800);--color-warning-900:var(--zabi-warning-900);--color-warning-950:var(--zabi-warning-950);--zabi-error-50:#fff4f3;--zabi-error-100:#ffe9e6;--zabi-error-200:#ffd2cd;--zabi-error-300:#ffb2ab;--zabi-error-400:#ff877d;--zabi-error-500:#ed564e;--zabi-error-600:#d22828;--zabi-error-700:#b20912;--zabi-error-800:#8c0006;--zabi-error-900:#660002;--zabi-error-950:#460202;--color-error-50:var(--zabi-error-50);--color-error-100:var(--zabi-error-100);--color-error-200:var(--zabi-error-200);--color-error-300:var(--zabi-error-300);--color-error-400:var(--zabi-error-400);--color-error-500:var(--zabi-error-500);--color-error-600:var(--zabi-error-600);--color-error-700:var(--zabi-error-700);--color-error-800:var(--zabi-error-800);--color-error-900:var(--zabi-error-900);--color-error-950:var(--zabi-error-950);--color-base-50:var(--zabi-base-50);--color-base-75:var(--zabi-base-75);--color-base-100:var(--zabi-base-100);--color-base-150:var(--zabi-base-150);--color-base-200:var(--zabi-base-200);--color-base-250:var(--zabi-base-250);--color-base-300:var(--zabi-base-300);--color-base-350:var(--zabi-base-350);--color-base-400:var(--zabi-base-400);--color-base-450:var(--zabi-base-450);--color-base-500:var(--zabi-base-500);--color-base-550:var(--zabi-base-550);--color-base-600:var(--zabi-base-600);--color-base-650:var(--zabi-base-650);--color-base-700:var(--zabi-base-700);--color-base-750:var(--zabi-base-750);--color-base-800:var(--zabi-base-800);--color-base-850:var(--zabi-base-850);--color-base-900:var(--zabi-base-900);--color-base-925:var(--zabi-base-925);--color-base-950:var(--zabi-base-950);--color-surface-base:var(--color-base-100);--color-surface-raised:#ffffff;--color-surface-elevated:var(--color-base-50);--color-surface-overlay:#ffffff;--color-surface-overlay-hover:var(--color-base-100);--color-border-overlay:transparent;--color-background:var(--color-surface-base);--color-background-secondary:var(--color-base-50);--color-background-tertiary:var(--color-base-100);--color-page:var(--color-base-100);--color-page-secondary:var(--color-base-200);--color-card:var(--color-surface-raised);--color-card-hover:var(--color-base-100);--color-card-active:var(--color-base-100);--color-card-elevated:var(--color-surface-overlay);--color-surface-1:var(--color-surface-raised);--color-surface-2:var(--color-surface-elevated);--color-surface-3:var(--color-base-75);--color-surface-4:var(--color-base-100);--color-control-track:var(--color-base-400);--color-control-track-hover:var(--color-base-450);--color-control-track-active:var(--color-base-500);--color-surface-hover:rgba(9, 9, 11, 0.06);--color-surface-active:rgba(9, 9, 11, 0.11);--color-overlay:rgba(0, 0, 0, 0.5);--color-input:var(--color-surface-raised);--color-input-border:var(--color-base-350);--color-input-hover:var(--color-base-150);--color-input-focus:var(--color-surface-raised);--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-550);--color-input-placeholder:var(--color-base-500);--color-label:var(--color-base-700);--color-link:var(--color-brand-700);--color-link-hover:var(--color-brand-800);--color-nav-menu-item:var(--color-body);--color-nav-menu-item-hover:var(--color-headline);--color-nav-menu-item-active:var(--color-link);--color-nav-menu-hover:var(--color-surface-hover);--color-nav-menu-active:var(--color-action-primary-subtle);--color-nav-menu-active-hover:var(--color-action-primary-subtle-hover);--color-nav-menu-focus:var(--color-brand-500);--color-success-text:var(--color-pine-700);--color-warning-text:var(--color-warning-700);--color-neutral-text:var(--color-base-700);--color-energetic-text:var(--color-citron-700);--color-error-text:var(--color-error-700);--color-inverse:var(--color-base-100);--color-disabled:var(--color-base-400);--color-border:var(--color-base-300);--color-border-weak:var(--color-base-300);--color-border-medium:var(--color-base-400);--color-border-strong:var(--color-base-500);--color-focus:var(--color-brand-500);--color-focus-weak:var(--color-brand-600);--color-focus-medium:var(--color-brand-700);--color-focus-strong:var(--color-brand-800);--color-focus-ring:var(--color-focus);--color-focus-ring-offset:var(--color-card);--color-primary:var(--color-brand-600);--color-primary-weak:var(--color-brand-700);--color-primary-medium:var(--color-brand-800);--color-primary-strong:var(--color-brand-900);--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:var(--color-pine-600);--color-success-weak:var(--color-pine-700);--color-success-medium:var(--color-pine-800);--color-success-strong:var(--color-pine-900);--color-success-subtle:var(--color-pine-100);--color-success-border:var(--color-pine-200);--color-warning:var(--color-warning-600);--color-warning-weak:var(--color-warning-700);--color-warning-medium:var(--color-warning-800);--color-warning-strong:var(--color-warning-900);--color-warning-subtle:var(--color-warning-100);--color-warning-border:var(--color-warning-200);--color-error:var(--color-error-600);--color-error-weak:var(--color-error-700);--color-error-medium:var(--color-error-800);--color-error-strong:var(--color-error-900);--color-error-subtle:var(--color-error-100);--color-error-border:var(--color-error-200);--color-energetic:var(--color-citron-600);--color-energetic-weak:var(--color-citron-700);--color-energetic-medium:var(--color-citron-800);--color-energetic-strong:var(--color-citron-900);--color-energetic-subtle:var(--color-citron-100);--color-energetic-border:var(--color-citron-200);--color-neutral:var(--color-base-550);--color-neutral-weak:var(--color-base-600);--color-neutral-medium:var(--color-base-700);--color-neutral-strong:var(--color-base-900);--color-neutral-subtle:var(--color-base-200);--color-neutral-border:var(--color-base-200);--color-info:var(--color-iris-600);--color-info-weak:var(--color-iris-700);--color-info-medium:var(--color-iris-800);--color-info-strong:var(--color-iris-900);--color-info-active:var(--color-iris-400);--color-info-subtle:var(--color-iris-100);--color-info-border:var(--color-iris-200);--color-info-text:var(--color-iris-700);--color-action-primary:var(--color-brand-600);--color-action-primary-hover:var(--color-brand-700);--color-action-primary-active:var(--color-brand-800);--color-action-primary-subtle:var(--color-brand-100);--color-action-primary-subtle-hover:var(--color-brand-200);--color-action-primary-text:#ffffff;--color-action-secondary:rgba(9, 9, 11, 0.07);--color-action-secondary-hover:rgba(9, 9, 11, 0.12);--color-action-secondary-active:rgba(9, 9, 11, 0.17);--color-action-secondary-subtle:var(--color-base-100);--color-action-secondary-subtle-hover:var(--color-base-200);--color-action-secondary-text:var(--color-headline);--color-action-disabled:var(--color-base-200);--color-action-disabled-text:var(--color-base-500);--color-action-disabled-border:var(--color-base-250);--color-action-danger:var(--color-error-600);--color-action-danger-hover:var(--color-error-700);--color-action-danger-active:var(--color-error-800);--color-action-danger-subtle:var(--color-error-100);--color-action-danger-subtle-hover:var(--color-error-200);--color-action-danger-text:var(--color-error-50);--shadow-color:0 0 0;--shadow-opacity:0.1;--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));--shadow-xl:0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--max-width-xs:20rem;--max-width-sm:24rem;--max-width-md:28rem;--max-width-lg:32rem;--max-width-xl:36rem;--max-width-2xl:42rem;--width-xs:20rem;--width-sm:24rem;--width-md:28rem;--width-lg:32rem;--width-xl:36rem;--width-2xl:42rem;--min-width-xs:20rem;--min-width-sm:24rem;--min-width-md:28rem;--min-width-lg:32rem;--min-width-xl:36rem;--min-width-2xl:42rem;--radius-control:0.5rem;--radius-container:0.75rem;--radius-overlay:1rem;--radius-pill:9999px;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--control-height-sm:2rem;--control-height-md:2.5rem;--control-height-lg:3rem;--z-dropdown:1000;--z-sticky:1020;--z-fixed:1030;--z-modal-backdrop:1040;--z-modal:1050;--z-popover:1060;--z-tooltip:1070;--z-toast:1080;--color-tooltip-bg:var(--color-base-800);--color-tooltip-fg:var(--color-base-50);}
+.dark{--zabi-base-50:#fafafa;--zabi-base-75:#f7f7f7;--zabi-base-100:#f4f4f5;--zabi-base-150:#ececee;--zabi-base-200:#e4e4e7;--zabi-base-250:#dcdcdf;--zabi-base-300:#d4d4d8;--zabi-base-350:#babac1;--zabi-base-400:#a1a1aa;--zabi-base-450:#898992;--zabi-base-500:#71717a;--zabi-base-550:#61616a;--zabi-base-600:#52525b;--zabi-base-650:#484850;--zabi-base-700:#3f3f46;--zabi-base-750:#333338;--zabi-base-800:#27272a;--zabi-base-850:#1f1f22;--zabi-base-900:#18181b;--zabi-base-925:#101013;--zabi-base-950:#09090b;--zabi-brand-50:#f4f6ff;--zabi-brand-100:#e9eeff;--zabi-brand-200:#d3dcff;--zabi-brand-300:#b5c6ff;--zabi-brand-400:#92a9ff;--zabi-brand-500:#6d87f1;--zabi-brand-600:#4f68da;--zabi-brand-700:#3c52ba;--zabi-brand-800:#2b3e95;--zabi-brand-900:#1c2c6d;--zabi-brand-950:#111d49;--color-brand-50:var(--zabi-brand-950);--color-brand-100:var(--zabi-brand-900);--color-brand-200:var(--zabi-brand-800);--color-brand-300:var(--zabi-brand-700);--color-brand-400:var(--zabi-brand-600);--color-brand-500:var(--zabi-brand-500);--color-brand-600:var(--zabi-brand-400);--color-brand-700:var(--zabi-brand-300);--color-brand-800:var(--zabi-brand-200);--color-brand-900:var(--zabi-brand-100);--color-brand-950:var(--zabi-brand-50);--zabi-citron-50:#f6f7ef;--zabi-citron-100:#edefdf;--zabi-citron-200:#dcdfbf;--zabi-citron-300:#c5ca95;--zabi-citron-400:#aab063;--zabi-citron-500:#8c9027;--zabi-citron-600:#707400;--zabi-citron-700:#5a5d00;--zabi-citron-800:#454700;--zabi-citron-900:#313200;--zabi-citron-950:#202100;--color-citron-50:var(--zabi-citron-950);--color-citron-100:var(--zabi-citron-900);--color-citron-200:var(--zabi-citron-800);--color-citron-300:var(--zabi-citron-700);--color-citron-400:var(--zabi-citron-600);--color-citron-500:var(--zabi-citron-500);--color-citron-600:var(--zabi-citron-400);--color-citron-700:var(--zabi-citron-300);--color-citron-800:var(--zabi-citron-200);--color-citron-900:var(--zabi-citron-100);--color-citron-950:var(--zabi-citron-50);--zabi-pine-50:#f0f8f5;--zabi-pine-100:#e2f1eb;--zabi-pine-200:#c5e4d7;--zabi-pine-300:#9fd1bd;--zabi-pine-400:#70ba9e;--zabi-pine-500:#399c7a;--zabi-pine-600:#00805e;--zabi-pine-700:#00674a;--zabi-pine-800:#004f37;--zabi-pine-900:#003826;--zabi-pine-950:#002518;--color-pine-50:var(--zabi-pine-950);--color-pine-100:var(--zabi-pine-900);--color-pine-200:var(--zabi-pine-800);--color-pine-300:var(--zabi-pine-700);--color-pine-400:var(--zabi-pine-600);--color-pine-500:var(--zabi-pine-500);--color-pine-600:var(--zabi-pine-400);--color-pine-700:var(--zabi-pine-300);--color-pine-800:var(--zabi-pine-200);--color-pine-900:var(--zabi-pine-100);--color-pine-950:var(--zabi-pine-50);--zabi-iris-50:#f6f6fd;--zabi-iris-100:#ecedfb;--zabi-iris-200:#dadbf6;--zabi-iris-300:#c1c4ef;--zabi-iris-400:#a5a7e2;--zabi-iris-500:#8486cd;--zabi-iris-600:#6969b4;--zabi-iris-700:#535397;--zabi-iris-800:#3f3f78;--zabi-iris-900:#2c2c58;--zabi-iris-950:#1d1d3a;--color-iris-50:var(--zabi-iris-950);--color-iris-100:var(--zabi-iris-900);--color-iris-200:var(--zabi-iris-800);--color-iris-300:var(--zabi-iris-700);--color-iris-400:var(--zabi-iris-600);--color-iris-500:var(--zabi-iris-500);--color-iris-600:var(--zabi-iris-400);--color-iris-700:var(--zabi-iris-300);--color-iris-800:var(--zabi-iris-200);--color-iris-900:var(--zabi-iris-100);--color-iris-950:var(--zabi-iris-50);--zabi-warning-50:#fbf6ed;--zabi-warning-100:#f7ecda;--zabi-warning-200:#f1d9b6;--zabi-warning-300:#e8bf87;--zabi-warning-400:#db9e4c;--zabi-warning-500:#c17b00;--zabi-warning-600:#9e6000;--zabi-warning-700:#824c00;--zabi-warning-800:#663800;--zabi-warning-900:#4b2600;--zabi-warning-950:#341800;--color-warning-50:var(--zabi-warning-950);--color-warning-100:var(--zabi-warning-900);--color-warning-200:var(--zabi-warning-800);--color-warning-300:var(--zabi-warning-700);--color-warning-400:var(--zabi-warning-600);--color-warning-500:var(--zabi-warning-500);--color-warning-600:var(--zabi-warning-400);--color-warning-700:var(--zabi-warning-300);--color-warning-800:var(--zabi-warning-200);--color-warning-900:var(--zabi-warning-100);--color-warning-950:var(--zabi-warning-50);--zabi-error-50:#fff4f3;--zabi-error-100:#ffe9e6;--zabi-error-200:#ffd2cd;--zabi-error-300:#ffb2ab;--zabi-error-400:#ff877d;--zabi-error-500:#ed564e;--zabi-error-600:#d22828;--zabi-error-700:#b20912;--zabi-error-800:#8c0006;--zabi-error-900:#660002;--zabi-error-950:#460202;--color-error-50:var(--zabi-error-950);--color-error-100:var(--zabi-error-900);--color-error-200:var(--zabi-error-800);--color-error-300:var(--zabi-error-700);--color-error-400:var(--zabi-error-600);--color-error-500:var(--zabi-error-500);--color-error-600:var(--zabi-error-400);--color-error-700:var(--zabi-error-300);--color-error-800:var(--zabi-error-200);--color-error-900:var(--zabi-error-100);--color-error-950:var(--zabi-error-50);--color-base-50:#09090b;--color-base-75:#101013;--color-base-100:#18181b;--color-base-150:#1f1f22;--color-base-200:#27272a;--color-base-250:#333338;--color-base-300:#3f3f46;--color-base-350:#484850;--color-base-400:#52525b;--color-base-450:#61616a;--color-base-500:#71717a;--color-base-550:#898992;--color-base-600:#a1a1aa;--color-base-650:#babac1;--color-base-700:#d4d4d8;--color-base-750:#dcdcdf;--color-base-800:#e4e4e7;--color-base-850:#ececee;--color-base-900:#f4f4f5;--color-base-925:#f7f7f7;--color-base-950:#fafafa;--color-surface-base:#18181b;--color-surface-raised:#262629;--color-surface-elevated:#363638;--color-surface-overlay:#454547;--color-surface-overlay-hover:#52525b;--color-neutral-subtle:var(--color-base-300);--color-border-overlay:var(--color-base-450);--color-background:var(--color-surface-base);--color-card:var(--color-surface-raised);--color-card-hover:var(--color-surface-elevated);--color-card-active:var(--color-surface-overlay);--color-card-elevated:var(--color-surface-elevated);--color-surface-1:var(--color-surface-raised);--color-surface-2:var(--color-surface-elevated);--color-surface-3:var(--color-surface-overlay);--color-surface-4:var(--color-base-400);--color-description:var(--color-base-700);--color-caption:var(--color-base-650);--color-surface-hover:rgba(250, 250, 250, 0.08);--color-surface-active:rgba(250, 250, 250, 0.14);--color-overlay:rgba(0, 0, 0, 0.7);--color-input:var(--color-base-150);--color-input-border:var(--color-base-300);--color-input-hover:var(--color-base-200);--color-input-focus:var(--color-base-150);--color-input-disabled:var(--color-base-100);--color-input-placeholder:var(--color-base-500);--color-neutral:var(--color-base-600);--color-action-primary-text:var(--zabi-brand-950);--color-action-secondary:rgba(250, 250, 250, 0.09);--color-action-secondary-hover:rgba(250, 250, 250, 0.15);--color-action-secondary-active:rgba(250, 250, 250, 0.21);--color-action-danger:var(--color-error-600);--color-action-danger-hover:var(--color-error-700);--color-action-danger-active:var(--color-error-800);--color-action-danger-subtle:var(--color-error-100);--color-action-danger-subtle-hover:var(--color-error-200);--color-action-danger-text:var(--color-error-50);--shadow-opacity:0.3;--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));--shadow-xl:0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));}

package/dist/zabi-components-theme-dark-only.css

@@ -24,17 +24,17 @@
 --zabi-base-925: #101013
 --zabi-base-950: #09090b
 /* Mirror @theme --zabi-brand-* ramp (same physical hex; required for standalone dark import) */
---zabi-brand-50: #f7faff
---zabi-brand-100: #edf2fb
---zabi-brand-200: #dfe7fb
---zabi-brand-300: #ccdbfd
---zabi-brand-400: #abc4ff
---zabi-brand-500: #8fa8ff
---zabi-brand-600: #6e84fa
---zabi-brand-700: #5366e2
---zabi-brand-800: #3f4fc0
---zabi-brand-900: #2f3c99
---zabi-brand-950: #1f2866
+--zabi-brand-50: #f4f6ff
+--zabi-brand-100: #e9eeff
+--zabi-brand-200: #d3dcff
+--zabi-brand-300: #b5c6ff
+--zabi-brand-400: #92a9ff
+--zabi-brand-500: #6d87f1
+--zabi-brand-600: #4f68da
+--zabi-brand-700: #3c52ba
+--zabi-brand-800: #2b3e95
+--zabi-brand-900: #1c2c6d
+--zabi-brand-950: #111d49
 /* Brand Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
 --color-brand-50: var(--zabi-brand-950)
 --color-brand-100: var(--zabi-brand-900)
@@ -48,17 +48,17 @@
 --color-brand-900: var(--zabi-brand-100)
 --color-brand-950: var(--zabi-brand-50)
 /* Mirror @theme --zabi-citron-* ramp (same physical hex; required for standalone dark import) */
---zabi-citron-50: #f9faeb
---zabi-citron-100: #f1f5cf
---zabi-citron-200: #e4ecaa
---zabi-citron-300: #d5e184
---zabi-citron-400: #c7d460
---zabi-citron-500: #bbbe64
---zabi-citron-600: #a3a852
---zabi-citron-700: #848a43
---zabi-citron-800: #666c35
---zabi-citron-900: #4d5229
---zabi-citron-950: #323518
+--zabi-citron-50: #f6f7ef
+--zabi-citron-100: #edefdf
+--zabi-citron-200: #dcdfbf
+--zabi-citron-300: #c5ca95
+--zabi-citron-400: #aab063
+--zabi-citron-500: #8c9027
+--zabi-citron-600: #707400
+--zabi-citron-700: #5a5d00
+--zabi-citron-800: #454700
+--zabi-citron-900: #313200
+--zabi-citron-950: #202100
 /* Citron Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
 --color-citron-50: var(--zabi-citron-950)
 --color-citron-100: var(--zabi-citron-900)
@@ -72,17 +72,17 @@
 --color-citron-900: var(--zabi-citron-100)
 --color-citron-950: var(--zabi-citron-50)
 /* Mirror @theme --zabi-pine-* ramp (same physical hex; required for standalone dark import) */
---zabi-pine-50: #e9f6f2
---zabi-pine-100: #d2ece4
---zabi-pine-200: #a7d9c9
---zabi-pine-300: #78c4ad
---zabi-pine-400: #49ad91
---zabi-pine-500: #0c5d43
---zabi-pine-600: #0a513a
---zabi-pine-700: #084532
---zabi-pine-800: #063a2a
---zabi-pine-900: #04231a
---zabi-pine-950: #02160f
+--zabi-pine-50: #f0f8f5
+--zabi-pine-100: #e2f1eb
+--zabi-pine-200: #c5e4d7
+--zabi-pine-300: #9fd1bd
+--zabi-pine-400: #70ba9e
+--zabi-pine-500: #399c7a
+--zabi-pine-600: #00805e
+--zabi-pine-700: #00674a
+--zabi-pine-800: #004f37
+--zabi-pine-900: #003826
+--zabi-pine-950: #002518
 /* Pine Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
 --color-pine-50: var(--zabi-pine-950)
 --color-pine-100: var(--zabi-pine-900)
@@ -96,17 +96,17 @@
 --color-pine-900: var(--zabi-pine-100)
 --color-pine-950: var(--zabi-pine-50)
 /* Mirror @theme --zabi-iris-* ramp (same physical hex; required for standalone dark import) */
---zabi-iris-50: #f4f4fa
---zabi-iris-100: #e9e9f7
---zabi-iris-200: #d6d6f0
---zabi-iris-300: #bdbde6
---zabi-iris-400: #a3a3d8
---zabi-iris-500: #6969b3
---zabi-iris-600: #58589e
---zabi-iris-700: #474788
---zabi-iris-800: #38386f
---zabi-iris-900: #2a2a56
---zabi-iris-950: #1b1b37
+--zabi-iris-50: #f6f6fd
+--zabi-iris-100: #ecedfb
+--zabi-iris-200: #dadbf6
+--zabi-iris-300: #c1c4ef
+--zabi-iris-400: #a5a7e2
+--zabi-iris-500: #8486cd
+--zabi-iris-600: #6969b4
+--zabi-iris-700: #535397
+--zabi-iris-800: #3f3f78
+--zabi-iris-900: #2c2c58
+--zabi-iris-950: #1d1d3a
 /* Iris Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
 --color-iris-50: var(--zabi-iris-950)
 --color-iris-100: var(--zabi-iris-900)
@@ -120,17 +120,17 @@
 --color-iris-900: var(--zabi-iris-100)
 --color-iris-950: var(--zabi-iris-50)
 /* Mirror @theme --zabi-warning-* ramp (same physical hex; required for standalone dark import) */
---zabi-warning-50: #fffbeb
---zabi-warning-100: #fef3c7
---zabi-warning-200: #fde68a
---zabi-warning-300: #fcd34d
---zabi-warning-400: #fbbf24
---zabi-warning-500: #f59e0b
---zabi-warning-600: #d97706
---zabi-warning-700: #b45309
---zabi-warning-800: #92400e
---zabi-warning-900: #78350f
---zabi-warning-950: #451a03
+--zabi-warning-50: #fbf6ed
+--zabi-warning-100: #f7ecda
+--zabi-warning-200: #f1d9b6
+--zabi-warning-300: #e8bf87
+--zabi-warning-400: #db9e4c
+--zabi-warning-500: #c17b00
+--zabi-warning-600: #9e6000
+--zabi-warning-700: #824c00
+--zabi-warning-800: #663800
+--zabi-warning-900: #4b2600
+--zabi-warning-950: #341800
 /* Warning Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
 --color-warning-50: var(--zabi-warning-950)
 --color-warning-100: var(--zabi-warning-900)
@@ -144,17 +144,17 @@
 --color-warning-900: var(--zabi-warning-100)
 --color-warning-950: var(--zabi-warning-50)
 /* Mirror @theme --zabi-error-* ramp (same physical hex; required for standalone dark import) */
---zabi-error-50: #fef2f2
---zabi-error-100: #fee2e2
---zabi-error-200: #fecaca
---zabi-error-300: #fca5a5
---zabi-error-400: #f87171
---zabi-error-500: #ef4444
---zabi-error-600: #dc2626
---zabi-error-700: #b91c1c
---zabi-error-800: #991b1b
---zabi-error-900: #7f1d1d
---zabi-error-950: #450a0a
+--zabi-error-50: #fff4f3
+--zabi-error-100: #ffe9e6
+--zabi-error-200: #ffd2cd
+--zabi-error-300: #ffb2ab
+--zabi-error-400: #ff877d
+--zabi-error-500: #ed564e
+--zabi-error-600: #d22828
+--zabi-error-700: #b20912
+--zabi-error-800: #8c0006
+--zabi-error-900: #660002
+--zabi-error-950: #460202
 /* Error Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
 --color-error-50: var(--zabi-error-950)
 --color-error-100: var(--zabi-error-900)
@@ -191,24 +191,58 @@
 --color-base-950: #fafafa
 /* Background Colors - No dark mode overrides needed, base colors are already inverted */
 /* Page Colors - No dark mode overrides needed, base colors are already inverted */
-/* Card Colors */
---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)
-/* Surfaces — layered UI (each step is lighter than the previous to read as "elevated") */
---color-surface-1: var(--color-base-250)
---color-surface-2: var(--color-base-300)
---color-surface-3: var(--color-base-350)
+/* Surface elevation — shadows don't read on dark, so each level steps up +6 OKLCH lightness
+   * from the page background (L 21 → 27 → 33 → 39).
+   *
+   * GENERATED by scripts/generate-surfaces.js from tokens/surface-ladder.js — do not hand-edit.
+   * Each level is #fafafa (the same light as the dark hover tint) washed over the page at
+   * 6.4% / 13.1% / 19.7%, so every level is the one below it with more light on it. Baked to
+   * opaque hex so the static checks can still resolve them and a modal stays opaque.
+   * Enforced by scripts/check-surface-elevation.js (strictly increasing, 5–8 points). */
+--color-surface-base: #18181b
+--color-surface-raised: #262629
+--color-surface-elevated: #363638
+--color-surface-overlay: #454547
+--color-surface-overlay-hover: #52525b
+/* Distinct from base, raised AND elevated — a neutral chip has no hue to
+   * separate it, so it has to separate on lightness wherever it lands. */
+--color-neutral-subtle: var(--color-base-300)
+--color-border-overlay: var(--color-base-450)
+/* Background Colors */
+--color-background: var(--color-surface-base)
+/* Card Colors — aliases of the surface levels */
+--color-card: var(--color-surface-raised)
+--color-card-hover: var(--color-surface-elevated)
+--color-card-active: var(--color-surface-overlay)
+--color-card-elevated: var(--color-surface-elevated)
+/* Surfaces — numbered aliases of the surface levels */
+--color-surface-1: var(--color-surface-raised)
+--color-surface-2: var(--color-surface-elevated)
+--color-surface-3: var(--color-surface-overlay)
 --color-surface-4: var(--color-base-400)
+/*
+   * Secondary text keeps ≥ 4.5:1 on every surface level, including overlays (L39).
+   * Only base-650 and lighter pass on the overlay, so caption takes base-650 and description
+   * moves one step up to base-700 to stay visibly stronger than caption.
+   */
+--color-description: var(--color-base-700)
+--color-caption: var(--color-base-650)
+/* Interaction fills — light tint on dark, mirroring the light-mode rule.
+   * Alpha keeps these one step away from every surface level, which a fixed
+   * ramp step cannot guarantee (base-100 in dark IS the page background). */
+--color-surface-hover: rgba(250, 250, 250, 0.08)
+--color-surface-active: rgba(250, 250, 250, 0.14)
 /* Overlay Colors */
 --color-overlay: rgba(0, 0, 0, 0.7)
-/* Input Colors */
---color-input: var(--color-base-250)
---color-input-border: var(--color-base-350)
---color-input-hover: var(--color-base-300)
---color-input-focus: var(--color-base-300)
---color-input-disabled: var(--color-base-300)
+/* Input Colors
+   * Dark fields are INSET: one step below the raised surface they sit on,
+   * which is the dark-mode equivalent of a white field on a grey page. */
+--color-input: var(--color-base-150)
+--color-input-border: var(--color-base-300)
+--color-input-hover: var(--color-base-200)
+--color-input-focus: var(--color-base-150)
+--color-input-disabled: var(--color-base-100)
+--color-input-placeholder: var(--color-base-500)
 /* Text Colors - No dark mode overrides needed, base colors are already inverted */
 /* Border Colors - No dark mode overrides needed, base colors are already inverted */
 /* Focus Colors - No dark mode overrides needed, brand colors are already inverted */
@@ -218,23 +252,36 @@
 /* Warning Colors — no overrides: @theme uses --color-warning-* scale; it mirrors in .dark via --zabi-warning-* */
 /* Error Colors — no overrides: @theme uses --color-error-* scale; it mirrors in .dark via --zabi-error-* */
 /* Energetic Colors — no overrides: @theme uses --color-citron-*; citron mirrors in .dark via --zabi-citron-* */
-/* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
+/* Neutral Colors — base-550 mirrors to L* 57, which is only 4.35:1 on a
+   * raised surface. One step lighter clears AA on every dark surface level. */
+--color-neutral: var(--color-base-600)
 /* Info Colors — no overrides: @theme uses --color-iris-* (incl. --color-info-active); iris mirrors in .dark via --zabi-iris-* */
 /* ========================================
      ACTION COLORS - Dark Mode Overrides
      ======================================== */
 /* Primary Actions - Background adapts automatically via brand color inversion */
 /* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --zabi-brand-* physical ramp above (semantic --color-brand-* follows mirror) */
-/* Text color - Use brand-50 (semantic; maps across light/dark via --zabi-brand-*) for proper contrast */
---color-action-primary-text: var(--color-brand-50)
-/* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
-/* Danger Actions */
---color-action-danger: #ef4444
---color-action-danger-hover: #dc2626
---color-action-danger-active: #b91c1c
---color-action-danger-disabled: #b91c1c
---color-action-danger-subtle: #450a0a
---color-action-danger-subtle-hover: #7f1d1d
+/* Text color - the physical dark end of the brand ramp, on the physical
+   * light end used as the dark-mode primary fill. 7.21:1. */
+--color-action-primary-text: var(--zabi-brand-950)
+/* Secondary Actions - light alpha tint instead of the light-mode dark tint */
+--color-action-secondary: rgba(250, 250, 250, 0.09)
+--color-action-secondary-hover: rgba(250, 250, 250, 0.15)
+--color-action-secondary-active: rgba(250, 250, 250, 0.21)
+/* Disabled Actions - base-200 in dark is #27272a, still the quietest fill */
+/* Danger Actions — restated as aliases, not re-pointed.
+   * These resolve through the mirrored --color-error-* scale, so dark danger
+   * is the same step of the same ramp as light danger. They are repeated here
+   * only because `zabi-components/theme-dark-only` has to stand alone as a
+   * complete import (validate-theme.js enforces that). The raw hex this
+   * replaced pinned dark danger brighter than light, which is why the
+   * destructive action was the loudest element on a dark page. */
+--color-action-danger: var(--color-error-600)
+--color-action-danger-hover: var(--color-error-700)
+--color-action-danger-active: var(--color-error-800)
+--color-action-danger-subtle: var(--color-error-100)
+--color-action-danger-subtle-hover: var(--color-error-200)
+--color-action-danger-text: var(--color-error-50)
 /* Shadow Colors */
 --shadow-opacity: 0.3
 --shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))