zabi-components 7.0.2 → 8.1.0

package/dist/util/zabi-strings.d.ts

@@ -0,0 +1,132 @@
+import type { AvatarGroupStrings } from "./avatar.js";
+import type { CalendarStrings } from "./calendar.js";
+import type { MediaGridStrings } from "./media-grid.js";
+import type { PhotoGridStrings, PhotoViewerStrings } from "./photo.js";
+import type { PullToRefreshStrings } from "./pull-to-refresh.js";
+import type { RatingStrings } from "./rating.js";
+import type { ColorPickerStrings, ComponentDemoStrings, ContactFormStrings, PropsTableStrings } from "./ready-made-strings.js";
+import type { SelectStrings } from "./select.js";
+import type { SidebarAccountPanelStrings, SidebarBrandHeaderStrings, SidebarFooterStrings, SidebarNavigationStrings } from "./sidebar.js";
+import type { SortableListStrings } from "./sortable-list.js";
+import type { StepperStrings } from "./stepper.js";
+import type { SwipeableListItemStrings } from "./swipeable-list-item.js";
+import type { ThemeToggleLabels } from "./theme-mode.js";
+import type { ToasterStrings } from "./toaster.js";
+import type { TopNavbarStrings } from "./top-navbar.js";
+/**
+ * The few words that many components' single-text props default to. A
+ * component whose prop is not given says the one here.
+ */
+export interface ZabiCommonStrings {
+    /** The close button of a dialog, a drawer or a sheet (`closeLabel`). */
+    close: string;
+    /** AppBar's back control (`backLabel`). */
+    back: string;
+    /** A sheet's grip while it takes the sheet up a step (`expandLabel`). */
+    expand: string;
+    /** The same, while it takes it down (`collapseLabel`). */
+    collapse: string;
+    /** Read after the label of a required field (FormField's `requiredLabel`). */
+    required: string;
+    /** The button in a password field that shows what was typed (Input's `revealLabel`). */
+    showPassword: string;
+    /** Placeholder of a search field in a sidebar (`searchPlaceholder`). */
+    search: string;
+    /** ConfirmDialog's confirming button (`confirmLabel`). */
+    confirm: string;
+    /** ConfirmDialog's other button (`cancelLabel`). */
+    cancel: string;
+}
+export declare const DEFAULT_ZABI_COMMON_STRINGS: ZabiCommonStrings;
+/** Toast's own text: `closeLabel`. */
+export interface ToastTexts {
+    closeLabel: string;
+}
+export declare const DEFAULT_TOAST_TEXTS: ToastTexts;
+/** Alert's own text: `closeLabel`. */
+export interface AlertTexts {
+    closeLabel: string;
+}
+export declare const DEFAULT_ALERT_TEXTS: AlertTexts;
+/** CodeBlock's own texts: the copy button's name, and what is announced once copied. */
+export interface CodeBlockTexts {
+    copyLabel: string;
+    copiedLabel: string;
+}
+export declare const DEFAULT_CODE_BLOCK_TEXTS: CodeBlockTexts;
+/** ImageUpload's own texts, by the name of the prop each one is. */
+export interface ImageUploadTexts {
+    placeholder: string;
+    browseText: string;
+    changeText: string;
+    removeText: string;
+    selectedText: string;
+    removedText: string;
+    errorTitle: string;
+    errorRecovery: string;
+}
+export declare const DEFAULT_IMAGE_UPLOAD_TEXTS: ImageUploadTexts;
+/** UnsavedChangesBar's own texts, by the name of the prop each one is. */
+export interface UnsavedChangesBarTexts {
+    message: string;
+    label: string;
+    saveLabel: string;
+    discardLabel: string;
+}
+export declare const DEFAULT_UNSAVED_CHANGES_BAR_TEXTS: UnsavedChangesBarTexts;
+/** One optional entry per component that has words of its own, and `common`. */
+export interface ZabiStrings {
+    common?: Partial<ZabiCommonStrings>;
+    alert?: Partial<AlertTexts>;
+    avatarGroup?: Partial<AvatarGroupStrings>;
+    calendar?: Partial<CalendarStrings>;
+    codeBlock?: Partial<CodeBlockTexts>;
+    colorPicker?: Partial<ColorPickerStrings>;
+    componentDemo?: Partial<ComponentDemoStrings>;
+    contactForm?: Partial<ContactFormStrings>;
+    imageUpload?: Partial<ImageUploadTexts>;
+    mediaGrid?: Partial<MediaGridStrings>;
+    photoGrid?: Partial<PhotoGridStrings>;
+    photoViewer?: Partial<PhotoViewerStrings>;
+    propsTable?: Partial<PropsTableStrings>;
+    pullToRefresh?: Partial<PullToRefreshStrings>;
+    rating?: Partial<RatingStrings>;
+    select?: Partial<SelectStrings>;
+    sidebarAccountPanel?: Partial<SidebarAccountPanelStrings>;
+    sidebarBrandHeader?: Partial<SidebarBrandHeaderStrings>;
+    sidebarFooter?: Partial<SidebarFooterStrings>;
+    sidebarNavigation?: Partial<SidebarNavigationStrings>;
+    sortableList?: Partial<SortableListStrings>;
+    stepper?: Partial<StepperStrings>;
+    swipeableListItem?: Partial<SwipeableListItemStrings>;
+    themeToggle?: Partial<ThemeToggleLabels>;
+    toast?: Partial<ToastTexts>;
+    toaster?: Partial<ToasterStrings>;
+    topNavbar?: Partial<TopNavbarStrings>;
+    unsavedChangesBar?: Partial<UnsavedChangesBarTexts>;
+}
+/** What the context holds: an object whose `current` is read when it is needed, so a change reaches every reader. */
+export interface ZabiStringsContext {
+    readonly current: ZabiStrings;
+}
+/** `over` on top of `under`, entry by entry: an inner provider only replaces the words it gives. */
+export declare function mergeZabiStrings(under: ZabiStrings | undefined, over: ZabiStrings | undefined): ZabiStrings;
+/** For `ZabiStringsProvider`: the provider above this one, if any. Call while the component initialises. */
+export declare function outerZabiStrings(): ZabiStringsContext | undefined;
+/** For `ZabiStringsProvider`: makes `context` what everything below reads. */
+export declare function provideZabiStrings(context: ZabiStringsContext): void;
+/**
+ * The words of the provider this component is under, for app code that wants
+ * the same words elsewhere. Call it while the component initialises, and read
+ * `current` where the words are used (in the markup, or a `$derived`), so a
+ * change of language is followed. Outside a provider `current` is empty.
+ */
+export declare function getZabiStrings(): ZabiStringsContext;
+/**
+ * A component's own entry: `zabiStringsFor("select")` returns a function that
+ * gives the provider's words for Select now, or undefined. Call it while the
+ * component initialises; call what it returns inside a `$derived`.
+ */
+export declare function zabiStringsFor<K extends Exclude<keyof ZabiStrings, "common">>(key: K): () => ZabiStrings[K];
+/** The common words with their defaults filled in, the same way. */
+export declare function zabiCommonStrings(): () => ZabiCommonStrings;

package/dist/util/zabi-strings.js

@@ -0,0 +1,105 @@
+/**
+ * The library's words, set once for a whole app.
+ *
+ * Every component says its English defaults unless it is told otherwise, one
+ * `strings` object or one prop at a time. An app in another language then has
+ * to remember every one of them, and a forgotten prop paints English. With
+ * `<ZabiStringsProvider strings={…}>` at the root, every component under it
+ * falls back to the app's words instead:
+ *
+ *   1. the built-in English default,
+ *   2. the provider's entry for the component (or `common`, for a
+ *      single-text prop),
+ *   3. the instance's own `strings`,
+ *   4. the instance's single-text props.
+ *
+ * Later wins. Outside a provider nothing changes.
+ *
+ * It is Svelte context, not a module-level store: on a server it belongs to
+ * the request being rendered, so two languages can be served at once, and a
+ * provider inside another merges over it for its own part of the page. An
+ * overlay rendered in `<body>` still reads the provider it was written under:
+ * context follows the component tree, not the DOM.
+ */
+import { getContext, setContext } from "svelte";
+export const DEFAULT_ZABI_COMMON_STRINGS = {
+    close: "Close",
+    back: "Back",
+    expand: "Expand",
+    collapse: "Collapse",
+    required: "(required)",
+    showPassword: "Show password",
+    search: "Search...",
+    confirm: "Confirm",
+    cancel: "Cancel",
+};
+export const DEFAULT_TOAST_TEXTS = { closeLabel: "Close notification" };
+export const DEFAULT_ALERT_TEXTS = { closeLabel: "Dismiss alert" };
+export const DEFAULT_CODE_BLOCK_TEXTS = {
+    copyLabel: "Copy code to clipboard",
+    copiedLabel: "Code copied to clipboard",
+};
+export const DEFAULT_IMAGE_UPLOAD_TEXTS = {
+    placeholder: "No image selected",
+    browseText: "Click to choose a file",
+    changeText: "Change",
+    removeText: "Remove",
+    selectedText: "Image selected",
+    removedText: "Image removed",
+    errorTitle: "Image upload failed",
+    errorRecovery: "Recovery action: try another file or retry upload.",
+};
+export const DEFAULT_UNSAVED_CHANGES_BAR_TEXTS = {
+    message: "You have unsaved changes",
+    label: "Unsaved changes",
+    saveLabel: "Save",
+    discardLabel: "Discard",
+};
+const KEY = Symbol("zabi-strings");
+const NONE = {};
+/** `over` on top of `under`, entry by entry: an inner provider only replaces the words it gives. */
+export function mergeZabiStrings(under, over) {
+    if (!under)
+        return over ?? NONE;
+    if (!over)
+        return under;
+    const merged = { ...under };
+    for (const [key, words] of Object.entries(over)) {
+        if (words)
+            merged[key] = { ...(merged[key] ?? {}), ...words };
+    }
+    return merged;
+}
+/** For `ZabiStringsProvider`: the provider above this one, if any. Call while the component initialises. */
+export function outerZabiStrings() {
+    return getContext(KEY);
+}
+/** For `ZabiStringsProvider`: makes `context` what everything below reads. */
+export function provideZabiStrings(context) {
+    setContext(KEY, context);
+}
+/**
+ * The words of the provider this component is under, for app code that wants
+ * the same words elsewhere. Call it while the component initialises, and read
+ * `current` where the words are used (in the markup, or a `$derived`), so a
+ * change of language is followed. Outside a provider `current` is empty.
+ */
+export function getZabiStrings() {
+    return outerZabiStrings() ?? { current: NONE };
+}
+/**
+ * A component's own entry: `zabiStringsFor("select")` returns a function that
+ * gives the provider's words for Select now, or undefined. Call it while the
+ * component initialises; call what it returns inside a `$derived`.
+ */
+export function zabiStringsFor(key) {
+    const context = outerZabiStrings();
+    return () => context?.current[key];
+}
+/** The common words with their defaults filled in, the same way. */
+export function zabiCommonStrings() {
+    const context = outerZabiStrings();
+    return () => context?.current.common
+        ? { ...DEFAULT_ZABI_COMMON_STRINGS, ...context.current.common }
+        : DEFAULT_ZABI_COMMON_STRINGS;
+}

package/dist/zabi-components-colors.css

@@ -1,3 +1,6 @@
 /* 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;--font-family-heading:var(--font-family-sans);--font-family-mono:"Monaco", "Menlo", "Ubuntu Mono", monospace;--font-sans:var(--font-family-sans);--font-mono:var(--font-family-mono);--font-heading:var(--font-family-heading);--font-weight-regular:400;--font-weight-normal:var(--font-weight-regular);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--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-accent-50:var(--zabi-citron-50);--zabi-accent-100:var(--zabi-citron-100);--zabi-accent-200:var(--zabi-citron-200);--zabi-accent-300:var(--zabi-citron-300);--zabi-accent-400:var(--zabi-citron-400);--zabi-accent-500:var(--zabi-citron-500);--zabi-accent-600:var(--zabi-citron-600);--zabi-accent-700:var(--zabi-citron-700);--zabi-accent-800:var(--zabi-citron-800);--zabi-accent-900:var(--zabi-citron-900);--zabi-accent-950:var(--zabi-citron-950);--color-accent-50:var(--zabi-accent-50);--color-accent-100:var(--zabi-accent-100);--color-accent-200:var(--zabi-accent-200);--color-accent-300:var(--zabi-accent-300);--color-accent-400:var(--zabi-accent-400);--color-accent-500:var(--zabi-accent-500);--color-accent-600:var(--zabi-accent-600);--color-accent-700:var(--zabi-accent-700);--color-accent-800:var(--zabi-accent-800);--color-accent-900:var(--zabi-accent-900);--color-accent-950:var(--zabi-accent-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-150);--color-surface-raised:#ffffff;--color-surface-elevated:var(--color-base-100);--color-surface-overlay:#ffffff;--color-surface-inset:var(--color-base-100);--color-surface-overlay-hover:var(--color-base-150);--color-border-overlay:rgba(9, 9, 11, 0.1);--color-background:var(--color-surface-base);--color-background-secondary:var(--color-base-50);--color-background-tertiary:var(--color-base-150);--color-page:var(--color-base-150);--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-150);--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-progress-fill:var(--color-action-primary);--color-progress-track:var(--color-input);--color-surface-hover:rgba(9, 9, 11, 0.09);--color-surface-active:rgba(9, 9, 11, 0.15);--color-overlay:rgba(0, 0, 0, 0.5);--color-input:var(--color-surface-raised);--color-input-border:var(--color-base-500);--color-input-border-hover:var(--color-base-550);--color-input-hover:var(--color-base-100);--color-input-active:var(--color-base-200);--color-input-focus:var(--color-surface-raised);--color-input-disabled:var(--color-surface-base);--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-550);--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-focus);--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-control-border:var(--color-base-500);--color-focus:var(--color-brand-600);--color-focus-weak:var(--color-brand-700);--color-focus-medium:var(--color-brand-800);--color-focus-strong:var(--color-brand-900);--color-focus-ring:var(--color-focus);--color-focus-ring-offset:var(--color-card);--color-focus-ring-muted:var(--color-base-500);--color-focus-ring-danger:var(--color-error);--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-200);--color-success-border:var(--color-pine-300);--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-200);--color-warning-border:var(--color-warning-300);--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-200);--color-error-border:var(--color-error-300);--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-200);--color-energetic-border:var(--color-citron-300);--color-accent:var(--color-accent-600);--color-accent-hover:var(--color-accent-700);--color-accent-active:var(--color-accent-800);--color-accent-subtle:var(--color-accent-200);--color-accent-border:var(--color-accent-300);--color-accent-text:var(--color-accent-700);--zabi-on-accent:#ffffff;--zabi-on-accent-dark:var(--zabi-accent-950);--color-on-accent:var(--zabi-on-accent);--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-250);--color-neutral-border:var(--color-base-300);--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-200);--color-info-border:var(--color-iris-300);--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-200);--color-action-primary-subtle-hover:var(--color-brand-300);--color-action-primary-subtle-active:color-mix(in srgb, var(--color-brand-400) 50%, var(--color-brand-300));--zabi-on-brand:#ffffff;--zabi-on-brand-dark:var(--zabi-brand-950);--color-on-brand:var(--zabi-on-brand);--color-action-primary-text:var(--color-on-brand);--color-action-secondary:rgba(9, 9, 11, 0.1);--color-action-secondary-hover:rgba(9, 9, 11, 0.15);--color-action-secondary-active:rgba(9, 9, 11, 0.2);--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-250);--color-action-disabled-text:var(--color-base-500);--color-action-disabled-border:var(--color-base-300);--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-subtle-active:color-mix(in srgb, var(--color-error-300) 50%, var(--color-error-200));--color-action-danger-text:var(--color-error-50);--shadow-color:24 24 27;--shadow-opacity:0.14;--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);}
+:root,[data-theme="light"]{color-scheme:light}
+[data-theme="light"]{color-scheme:light}[data-theme="dark"]{color-scheme:dark}[data-theme="auto"]{color-scheme:light dark}
+.dark,[data-theme="dark"]{--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);--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);--color-accent-50:var(--zabi-accent-950);--color-accent-100:var(--zabi-accent-900);--color-accent-200:var(--zabi-accent-800);--color-accent-300:var(--zabi-accent-700);--color-accent-400:var(--zabi-accent-600);--color-accent-500:var(--zabi-accent-500);--color-accent-600:var(--zabi-accent-400);--color-accent-700:var(--zabi-accent-300);--color-accent-800:var(--zabi-accent-200);--color-accent-900:var(--zabi-accent-100);--color-accent-950:var(--zabi-accent-50);--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);--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);--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);--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:var(--zabi-base-950);--color-base-75:var(--zabi-base-925);--color-base-100:var(--zabi-base-900);--color-base-150:var(--zabi-base-850);--color-base-200:var(--zabi-base-800);--color-base-250:var(--zabi-base-750);--color-base-300:var(--zabi-base-700);--color-base-350:var(--zabi-base-650);--color-base-400:var(--zabi-base-600);--color-base-450:var(--zabi-base-550);--color-base-500:var(--zabi-base-500);--color-base-550:var(--zabi-base-450);--color-base-600:var(--zabi-base-400);--color-base-650:var(--zabi-base-350);--color-base-700:var(--zabi-base-300);--color-base-750:var(--zabi-base-250);--color-base-800:var(--zabi-base-200);--color-base-850:var(--zabi-base-150);--color-base-900:var(--zabi-base-100);--color-base-925:var(--zabi-base-75);--color-base-950:var(--zabi-base-50);--color-surface-base:var(--zabi-base-900);--color-surface-raised:color-mix(in srgb, var(--zabi-base-50) 6.4%, var(--zabi-base-900));--color-surface-elevated:color-mix(in srgb, var(--zabi-base-50) 13.1%, var(--zabi-base-900));--color-surface-overlay:color-mix(in srgb, var(--zabi-base-50) 19.7%, var(--zabi-base-900));--color-surface-overlay-hover:var(--color-base-400);--color-surface-inset:var(--color-base-150);--color-neutral-subtle:var(--color-base-300);--color-neutral-border:var(--color-base-200);--color-border-overlay:var(--color-base-450);--color-background:var(--color-surface-base);--color-background-tertiary:var(--color-base-100);--color-page:var(--color-base-100);--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-surface-inset);--color-progress-fill:var(--color-action-primary);--color-progress-track:var(--color-input);--color-input-border:var(--color-base-500);--color-input-border-hover:var(--color-input-border);--color-input-hover:var(--color-base-200);--color-input-active:var(--color-base-250);--color-input-focus:var(--color-base-150);--color-input-disabled:var(--color-base-100);--color-input-placeholder:var(--color-base-600);--color-control-border:var(--color-base-600);--color-focus:var(--color-brand-600);--color-focus-weak:var(--color-brand-700);--color-focus-medium:var(--color-brand-800);--color-focus-strong:var(--color-brand-900);--color-focus-ring-muted:var(--color-base-600);--color-success-subtle:var(--color-pine-100);--color-success-border:var(--color-pine-200);--color-warning-subtle:var(--color-warning-100);--color-warning-border:var(--color-warning-200);--color-error-subtle:var(--color-error-100);--color-error-border:var(--color-error-200);--color-energetic-subtle:var(--color-citron-100);--color-energetic-border:var(--color-citron-200);--color-accent-subtle:var(--color-accent-100);--color-accent-border:var(--color-accent-200);--color-on-accent:var(--zabi-on-accent-dark);--color-info-subtle:var(--color-iris-100);--color-info-border:var(--color-iris-200);--color-neutral:var(--color-base-600);--color-on-brand:var(--zabi-on-brand-dark);--color-action-primary-text:var(--color-on-brand);--color-action-primary-subtle:var(--color-brand-100);--color-action-primary-subtle-hover:var(--color-brand-200);--color-action-primary-subtle-active:color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));--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-disabled:var(--color-base-200);--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.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));color-scheme:dark;}
+@media (prefers-color-scheme: dark){[data-theme="auto"]{--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);--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);--color-accent-50:var(--zabi-accent-950);--color-accent-100:var(--zabi-accent-900);--color-accent-200:var(--zabi-accent-800);--color-accent-300:var(--zabi-accent-700);--color-accent-400:var(--zabi-accent-600);--color-accent-500:var(--zabi-accent-500);--color-accent-600:var(--zabi-accent-400);--color-accent-700:var(--zabi-accent-300);--color-accent-800:var(--zabi-accent-200);--color-accent-900:var(--zabi-accent-100);--color-accent-950:var(--zabi-accent-50);--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);--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);--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);--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:var(--zabi-base-950);--color-base-75:var(--zabi-base-925);--color-base-100:var(--zabi-base-900);--color-base-150:var(--zabi-base-850);--color-base-200:var(--zabi-base-800);--color-base-250:var(--zabi-base-750);--color-base-300:var(--zabi-base-700);--color-base-350:var(--zabi-base-650);--color-base-400:var(--zabi-base-600);--color-base-450:var(--zabi-base-550);--color-base-500:var(--zabi-base-500);--color-base-550:var(--zabi-base-450);--color-base-600:var(--zabi-base-400);--color-base-650:var(--zabi-base-350);--color-base-700:var(--zabi-base-300);--color-base-750:var(--zabi-base-250);--color-base-800:var(--zabi-base-200);--color-base-850:var(--zabi-base-150);--color-base-900:var(--zabi-base-100);--color-base-925:var(--zabi-base-75);--color-base-950:var(--zabi-base-50);--color-surface-base:var(--zabi-base-900);--color-surface-raised:color-mix(in srgb, var(--zabi-base-50) 6.4%, var(--zabi-base-900));--color-surface-elevated:color-mix(in srgb, var(--zabi-base-50) 13.1%, var(--zabi-base-900));--color-surface-overlay:color-mix(in srgb, var(--zabi-base-50) 19.7%, var(--zabi-base-900));--color-surface-overlay-hover:var(--color-base-400);--color-surface-inset:var(--color-base-150);--color-neutral-subtle:var(--color-base-300);--color-neutral-border:var(--color-base-200);--color-border-overlay:var(--color-base-450);--color-background:var(--color-surface-base);--color-background-tertiary:var(--color-base-100);--color-page:var(--color-base-100);--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-surface-inset);--color-progress-fill:var(--color-action-primary);--color-progress-track:var(--color-input);--color-input-border:var(--color-base-500);--color-input-border-hover:var(--color-input-border);--color-input-hover:var(--color-base-200);--color-input-active:var(--color-base-250);--color-input-focus:var(--color-base-150);--color-input-disabled:var(--color-base-100);--color-input-placeholder:var(--color-base-600);--color-control-border:var(--color-base-600);--color-focus:var(--color-brand-600);--color-focus-weak:var(--color-brand-700);--color-focus-medium:var(--color-brand-800);--color-focus-strong:var(--color-brand-900);--color-focus-ring-muted:var(--color-base-600);--color-success-subtle:var(--color-pine-100);--color-success-border:var(--color-pine-200);--color-warning-subtle:var(--color-warning-100);--color-warning-border:var(--color-warning-200);--color-error-subtle:var(--color-error-100);--color-error-border:var(--color-error-200);--color-energetic-subtle:var(--color-citron-100);--color-energetic-border:var(--color-citron-200);--color-accent-subtle:var(--color-accent-100);--color-accent-border:var(--color-accent-200);--color-on-accent:var(--zabi-on-accent-dark);--color-info-subtle:var(--color-iris-100);--color-info-border:var(--color-iris-200);--color-neutral:var(--color-base-600);--color-on-brand:var(--zabi-on-brand-dark);--color-action-primary-text:var(--color-on-brand);--color-action-primary-subtle:var(--color-brand-100);--color-action-primary-subtle-hover:var(--color-brand-200);--color-action-primary-subtle-active:color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));--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-disabled:var(--color-base-200);--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.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));color-scheme:dark;}}