zabi-components 7.0.1 → 8.0.0

package/dist/zabi-components-colors.css

@@ -1,437 +1,3 @@
-/* ========================================
-   ZABI COMPONENTS COLOR SYSTEM
-   Standalone CSS Custom Properties
-   Generated from src/app.css
-   ⚠️ DO NOT EDIT - This file is auto-generated
-   Edit src/app.css instead
-   ======================================== */
-
-:root {
-  /*
-  * Custom base (gray) ramp — single physical scale for --color-base-*.
-  * 21 stops: 50 … 950 (lightest → darkest). Edit hex here; mirror the same block in .dark for standalone imports.
-  * Dark: semantic step S maps to physical (1000 − S), e.g. 50↔950, 75↔925; 500 stays fixed.
-  * Midpoints are frozen hex values (default mode: fixed).
-  */
-  --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
-  /* Typography - Nunito Sans font family */
-  --font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif
-  /* Brand Color Scale */
-  --color-brand-50: #f7faff
-  --color-brand-100: #edf2fb
-  --color-brand-200: #dfe7fb
-  --color-brand-300: #ccdbfd
-  --color-brand-400: #abc4ff
-  --color-brand-500: #8fa8ff
-  --color-brand-600: #6e84fa
-  --color-brand-700: #5366e2
-  --color-brand-800: #3f4fc0
-  --color-brand-900: #2f3c99
-  --color-brand-950: #1f2866
-  /* Citron Color Scale */
-  --color-citron-50: #f9faeb
-  --color-citron-100: #f1f5cf
-  --color-citron-200: #e4ecaa
-  --color-citron-300: #d5e184
-  --color-citron-400: #c7d460
-  --color-citron-500: #bbbe64
-  --color-citron-600: #a3a852
-  --color-citron-700: #848a43
-  --color-citron-800: #666c35
-  --color-citron-900: #4d5229
-  --color-citron-950: #323518
-  /* Pine Color Scale */
-  --color-pine-50: #e9f6f2
-  --color-pine-100: #d2ece4
-  --color-pine-200: #a7d9c9
-  --color-pine-300: #78c4ad
-  --color-pine-400: #49ad91
-  --color-pine-500: #0C5D43
-  --color-pine-600: #0a513a
-  --color-pine-700: #084532
-  --color-pine-800: #063a2a
-  --color-pine-900: #04231a
-  --color-pine-950: #02160f
-  /* Iris Color Scale */
-  --color-iris-50: #f4f4fa
-  --color-iris-100: #e9e9f7
-  --color-iris-200: #d6d6f0
-  --color-iris-300: #bdbde6
-  --color-iris-400: #a3a3d8
-  --color-iris-500: #6969B3
-  --color-iris-600: #58589e
-  --color-iris-700: #474788
-  --color-iris-800: #38386f
-  --color-iris-900: #2a2a56
-  --color-iris-950: #1b1b37
-  /* Base Color Scale — semantic tokens alias the physical ramp (light: 1:1) */
-  --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)
-  /* Background Colors */
-  --color-background: var(--color-base-100)
-  --color-background-secondary: var(--color-base-50)
-  --color-background-tertiary: var(--color-base-100)
-  /* Page Colors */
-  --color-page: var(--color-base-100)
-  --color-page-secondary: var(--color-base-200)
-  /* Card Colors */
-  --color-card: #ffffff
-  --color-card-hover: var(--color-base-100)
-  --color-card-active: var(--color-base-100)
-  --color-card-elevated: #ffffff
-  /* Surfaces — layered UI (ascending number = higher layer / more contrast against page) */
-  --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)
-  /* Overlay Colors */
-  --color-overlay: rgba(0, 0, 0, 0.5)
-  /* 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-100)
-  /* Text Colors */
-  --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)
-  /* Navigation menu item — menubar triggers, menu links, inline/sidebar nav rows */
-  --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: #b45309
-  --color-neutral-text: var(--color-base-700)
-  --color-energetic-text: var(--color-citron-700)
-  --color-error-text: #b91c1c
-  --color-inverse: #ffffff
-  --color-disabled: var(--color-base-400)
-  /* Border Colors */
-  --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)
-  /* Focus Colors */
-  --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)
-  /* Aliases for `ring-focus-ring`, `.focus-ring`, and form utils */
-  --color-focus-ring: var(--color-focus)
-  --color-focus-ring-offset: var(--color-card)
-  /* Primary Colors */
-  --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)
-  /* Secondary Colors */
-  --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)
-  /* Success Colors */
-  --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)
-  /* Warning Colors */
-  --color-warning: #f59e0b
-  --color-warning-weak: #d97706
-  --color-warning-medium: #fbbf24
-  --color-warning-strong: #fcd34d
-  /* Error Colors */
-  --color-error: #ef4444
-  --color-error-weak: #dc2626
-  --color-error-medium: #f87171
-  --color-error-strong: #fca5a5
-  /* Energetic Colors (Citron) */
-  --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)
-  /* Neutral Colors */
-  --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)
-  /* Info Colors */
-  --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)
-  /* Text alias */
-  --color-info-text: var(--color-info)
-  /* ========================================
-  ACTION COLORS - For interactive elements (buttons, links, etc.)
-  ======================================== */
-  /* Primary Actions - Used by bg-action-primary utility class */
-  /* 🎯 TO CHANGE bg-action-primary COLOR: Edit the values below */
-  --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)
-  /* Secondary Actions - Used by bg-action-secondary utility class */
-  --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)
-  /* Danger Actions - Used by bg-action-danger utility class */
-  --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 Colors */
-  --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 */
-  --spacing-xs: 0.25rem
-  --spacing-sm: 0.5rem
-  --spacing-md: 1rem
-  --spacing-lg: 1.5rem
-  --spacing-xl: 2rem
-  --spacing-2xl: 3rem
-  /* Border Radius */
-  --radius-sm: 0.25rem
-  --radius-md: 0.375rem
-  --radius-lg: 0.5rem
-  --radius-xl: 0.75rem
-  /* Z-index */
-  --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
-}
-
-/* Dark Mode */
-.dark {
-  /* Mirror @theme --zabi-base-* ramp (same physical hex; required for standalone dark import) */
-  --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
-  /* Brand Color Scale - Dark mode variants (mirrored from light physical hex; no theme() forward refs) */
-  --color-brand-50: #1f2866
-  --color-brand-100: #2f3c99
-  --color-brand-200: #3f4fc0
-  --color-brand-300: #5366e2
-  --color-brand-400: #6e84fa
-  --color-brand-500: #8fa8ff
-  --color-brand-600: #abc4ff
-  --color-brand-700: #ccdbfd
-  --color-brand-800: #dfe7fb
-  --color-brand-900: #edf2fb
-  --color-brand-950: #f7faff
-  /* Citron Color Scale - Dark mode variants */
-  --color-citron-50: #323518
-  --color-citron-100: #4d5229
-  --color-citron-200: #666c35
-  --color-citron-300: #848a43
-  --color-citron-400: #a3a852
-  --color-citron-500: #bbbe64
-  --color-citron-600: #c7d460
-  --color-citron-700: #d5e184
-  --color-citron-800: #e4ecaa
-  --color-citron-900: #f1f5cf
-  --color-citron-950: #f9faeb
-  /* Pine Color Scale - Dark mode variants */
-  --color-pine-50: #02160f
-  --color-pine-100: #04231a
-  --color-pine-200: #063a2a
-  --color-pine-300: #084532
-  --color-pine-400: #0a513a
-  --color-pine-500: #0c5d43
-  --color-pine-600: #49ad91
-  --color-pine-700: #78c4ad
-  --color-pine-800: #a7d9c9
-  --color-pine-900: #d2ece4
-  --color-pine-950: #e9f6f2
-  /* Iris Color Scale - Dark mode variants */
-  --color-iris-50: #1b1b37
-  --color-iris-100: #2a2a56
-  --color-iris-200: #38386f
-  --color-iris-300: #474788
-  --color-iris-400: #58589e
-  --color-iris-500: #6969b3
-  --color-iris-600: #a3a3d8
-  --color-iris-700: #bdbde6
-  --color-iris-800: #d6d6f0
-  --color-iris-900: #e9e9f7
-  --color-iris-950: #f4f4fa
-  /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
-  --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
-  /* 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)
-  --color-surface-4: var(--color-base-400)
-  /* 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)
-  /* 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 */
-  /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
-  /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
-  /* Success Colors */
-  --color-success: var(--color-pine-400)
-  --color-success-weak: var(--color-pine-500)
-  --color-success-medium: var(--color-pine-300)
-  --color-success-strong: var(--color-pine-200)
-  /* Warning Colors */
-  --color-warning: #f59e0b
-  --color-warning-weak: #d97706
-  --color-warning-medium: #fbbf24
-  --color-warning-strong: #fcd34d
-  /* Error Colors */
-  --color-error: #ef4444
-  --color-error-weak: #dc2626
-  --color-error-medium: #f87171
-  --color-error-strong: #fca5a5
-  /* Energetic Colors (Citron) */
-  --color-energetic: var(--color-citron-400)
-  --color-energetic-weak: var(--color-citron-500)
-  --color-energetic-medium: var(--color-citron-300)
-  --color-energetic-strong: var(--color-citron-200)
-  /* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
-  /* Info Colors */
-  --color-info: var(--color-iris-500)
-  --color-info-weak: var(--color-iris-600)
-  --color-info-active: var(--color-iris-400)
-  --color-info-medium: var(--color-iris-400)
-  --color-info-strong: var(--color-iris-300)
-  /* Text alias */
-  --color-info-text: var(--color-info)
-  /* ========================================
-  ACTION COLORS - Dark Mode Overrides
-  ======================================== */
-  /* Primary Actions - Background adapts automatically via brand color inversion */
-  /* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --color-brand-800 in .dark block (line ~275) */
-  /* Text color - Use brand-50 (which maps to brand-950/darkest in dark mode) 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
-  /* 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))
-  --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))
-}
+/* 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:#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));}