zabi-components 7.0.2 → 8.1.0

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

@@ -2,245 +2,594 @@
 
 /* Dark Mode Theme - CSS Custom Properties */
 /* Import this file after the main theme to enable dark mode support */
-.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
-/* Mirror @theme --zabi-brand-* ramp (same physical hex; required for standalone dark import) */
---zabi-brand-50: #f7faff
---zabi-brand-100: #edf2fb
---zabi-brand-200: #dfe7fb
---zabi-brand-300: #ccdbfd
---zabi-brand-400: #abc4ff
---zabi-brand-500: #8fa8ff
---zabi-brand-600: #6e84fa
---zabi-brand-700: #5366e2
---zabi-brand-800: #3f4fc0
---zabi-brand-900: #2f3c99
---zabi-brand-950: #1f2866
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+[data-theme="auto"] {
+  color-scheme: light dark;
+}
+
+.dark,
+[data-theme="dark"] {
 /* Brand Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
---color-brand-50: var(--zabi-brand-950)
---color-brand-100: var(--zabi-brand-900)
---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)
-/* Mirror @theme --zabi-citron-* ramp (same physical hex; required for standalone dark import) */
---zabi-citron-50: #f9faeb
---zabi-citron-100: #f1f5cf
---zabi-citron-200: #e4ecaa
---zabi-citron-300: #d5e184
---zabi-citron-400: #c7d460
---zabi-citron-500: #bbbe64
---zabi-citron-600: #a3a852
---zabi-citron-700: #848a43
---zabi-citron-800: #666c35
---zabi-citron-900: #4d5229
---zabi-citron-950: #323518
+--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);
 /* Citron Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
---color-citron-50: var(--zabi-citron-950)
---color-citron-100: var(--zabi-citron-900)
---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)
-/* Mirror @theme --zabi-pine-* ramp (same physical hex; required for standalone dark import) */
---zabi-pine-50: #e9f6f2
---zabi-pine-100: #d2ece4
---zabi-pine-200: #a7d9c9
---zabi-pine-300: #78c4ad
---zabi-pine-400: #49ad91
---zabi-pine-500: #0c5d43
---zabi-pine-600: #0a513a
---zabi-pine-700: #084532
---zabi-pine-800: #063a2a
---zabi-pine-900: #04231a
---zabi-pine-950: #02160f
+--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);
+/* Accent Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+--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);
 /* Pine Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
---color-pine-50: var(--zabi-pine-950)
---color-pine-100: var(--zabi-pine-900)
---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)
-/* Mirror @theme --zabi-iris-* ramp (same physical hex; required for standalone dark import) */
---zabi-iris-50: #f4f4fa
---zabi-iris-100: #e9e9f7
---zabi-iris-200: #d6d6f0
---zabi-iris-300: #bdbde6
---zabi-iris-400: #a3a3d8
---zabi-iris-500: #6969b3
---zabi-iris-600: #58589e
---zabi-iris-700: #474788
---zabi-iris-800: #38386f
---zabi-iris-900: #2a2a56
---zabi-iris-950: #1b1b37
+--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);
 /* Iris Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
---color-iris-50: var(--zabi-iris-950)
---color-iris-100: var(--zabi-iris-900)
---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)
-/* Mirror @theme --zabi-warning-* ramp (same physical hex; required for standalone dark import) */
---zabi-warning-50: #fffbeb
---zabi-warning-100: #fef3c7
---zabi-warning-200: #fde68a
---zabi-warning-300: #fcd34d
---zabi-warning-400: #fbbf24
---zabi-warning-500: #f59e0b
---zabi-warning-600: #d97706
---zabi-warning-700: #b45309
---zabi-warning-800: #92400e
---zabi-warning-900: #78350f
---zabi-warning-950: #451a03
+--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);
 /* Warning Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
---color-warning-50: var(--zabi-warning-950)
---color-warning-100: var(--zabi-warning-900)
---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)
-/* Mirror @theme --zabi-error-* ramp (same physical hex; required for standalone dark import) */
---zabi-error-50: #fef2f2
---zabi-error-100: #fee2e2
---zabi-error-200: #fecaca
---zabi-error-300: #fca5a5
---zabi-error-400: #f87171
---zabi-error-500: #ef4444
---zabi-error-600: #dc2626
---zabi-error-700: #b91c1c
---zabi-error-800: #991b1b
---zabi-error-900: #7f1d1d
---zabi-error-950: #450a0a
+--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);
 /* Error Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
---color-error-50: var(--zabi-error-950)
---color-error-100: var(--zabi-error-900)
---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-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);
 /* 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
+--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);
 /* 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)
+/* Surface elevation — shadows don't read on dark, so each level steps up +6 OKLCH lightness
+   * from the page background (L 21 → 27 → 33 → 39).
+   *
+   * GENERATED by scripts/generate-surfaces.js from tokens/surface-ladder.js — do not hand-edit.
+   * The page is --zabi-base-900. Each level above it is --zabi-base-50 (the same light as the
+   * dark hover tint) washed over the page at 6.4% / 13.1% / 19.7%, so every level is the one
+   * below it with more light on it, and a --zabi-base-* override carries the whole ladder.
+   * Mixing two opaque colours stays opaque, so a modal never lets the page through. With the
+   * default greys these resolve to #18181b / #262629 / #363638 / #454547.
+   * Enforced by scripts/check-surface-elevation.js (strictly increasing, 5–8 points). */
+--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));
+/* base-400 mirrors to --zabi-base-600 (#52525b), one step lighter than the overlay. */
+--color-surface-overlay-hover: var(--color-base-400);
+/* Inset — the step between the page and the raised surface (L 24). The input
+   * field is the library's own inset; see --color-input below. */
+--color-surface-inset: var(--color-base-150);
+/* Distinct from base, raised AND elevated — a neutral chip has no hue to
+   * separate it, so it has to separate on lightness wherever it lands. */
+--color-neutral-subtle: var(--color-base-300);
+--color-neutral-border: var(--color-base-200);
+--color-border-overlay: var(--color-base-450);
+/* Background Colors */
+--color-background: var(--color-surface-base);
+--color-background-tertiary: var(--color-base-100);
+/* Page Colors — pinned: light moved the page to base-150, dark stays on base-100 */
+--color-page: var(--color-base-100);
+/* Card Colors — aliases of the surface levels */
+--color-card: var(--color-surface-raised);
+--color-card-hover: var(--color-surface-elevated);
+--color-card-active: var(--color-surface-overlay);
+--color-card-elevated: var(--color-surface-elevated);
+/* Surfaces — numbered aliases of the surface levels */
+--color-surface-1: var(--color-surface-raised);
+--color-surface-2: var(--color-surface-elevated);
+--color-surface-3: var(--color-surface-overlay);
+--color-surface-4: var(--color-base-400);
+/*
+   * Secondary text keeps ≥ 4.5:1 on every surface level, including overlays (L39).
+   * Only base-650 and lighter pass on the overlay, so caption takes base-650 and description
+   * moves one step up to base-700 to stay visibly stronger than caption.
+   */
+--color-description: var(--color-base-700);
+--color-caption: var(--color-base-650);
+/* Interaction fills — light tint on dark, mirroring the light-mode rule.
+   * Alpha keeps these one step away from every surface level, which a fixed
+   * ramp step cannot guarantee (base-100 in dark IS the page background). */
+--color-surface-hover: rgba(250, 250, 250, 0.08);
+--color-surface-active: rgba(250, 250, 250, 0.14);
 /* Overlay Colors */
---color-overlay: rgba(0, 0, 0, 0.7)
-/* Input Colors */
---color-input: var(--color-base-250)
---color-input-border: var(--color-base-350)
---color-input-hover: var(--color-base-300)
---color-input-focus: var(--color-base-300)
---color-input-disabled: var(--color-base-300)
+--color-overlay: rgba(0, 0, 0, 0.7);
+/* Input Colors
+   * Dark fields are INSET: one step below the raised surface they sit on,
+   * which is the dark-mode equivalent of a white field on a grey page. */
+--color-input: var(--color-surface-inset);
+/* Restated here: the root value of a var() alias is resolved at :root. */
+--color-progress-fill: var(--color-action-primary);
+--color-progress-track: var(--color-input);
+/* base-500 (the mirror's fixed point): 3.40:1 on the dark field, 3.67:1 on
+   * the page and 3.12:1 on the card. base-300 was 1.57, 1.70 and 1.44. */
+--color-input-border: var(--color-base-500);
+--color-input-border-hover: var(--color-input-border);
+--color-input-hover: var(--color-base-200);
+/* One step past hover, and one short of the border (base-300), so the
+   * pressed field keeps its edge: 1.31:1 against the resting field. */
+--color-input-active: var(--color-base-250);
+--color-input-focus: var(--color-base-150);
+--color-input-disabled: var(--color-base-100);
+/* base-500 is the mirror's fixed point, the same grey as it was in light,
+   * and a dark field is a far lighter ground for it than a white one is dark:
+   * 3.40:1 at rest, 3.08:1 on hover, 2.60:1 pressed. base-600 mirrors to
+   * --zabi-base-400 (#a1a1aa): 6.41, 5.81 and 4.90. base-550 would be 4.74
+   * at rest but under 4.5 on hover. The value text is 2.0:1 stronger. */
+--color-input-placeholder: var(--color-base-600);
 /* 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 */
+/* Border Colors - the decorative edges need no override, base colors are
+   * already inverted. The control boundary does: base-500 is the mirror's
+   * fixed point (#71717a in both themes), and the dark surfaces above the card
+   * are too light for it (2.49:1 on elevated, 1.98:1 on the overlay). base-600
+   * mirrors to --zabi-base-400 (#a1a1aa): 3.73:1 on the overlay, the lightest
+   * surface, and more on every level below it. base-550 is 2.76:1 there. */
+--color-control-border: var(--color-base-600);
+/* Focus Colors — the same steps as light, through the mirror: brand-600 is
+   * --zabi-brand-400 here, which is also the dark primary fill, so on a
+   * primary button the ring is separated by its offset gap exactly as in light.
+   * Dark used to stay one step back, on brand-500, the mirror's fixed point.
+   * That is 5.4:1 on the dark page but only 2.91:1 on the overlay, the
+   * lightest surface (2.78:1 for an amber brand), and a ring in a modal or a
+   * menu needs 3:1 too. Restated rather than left to inherit, so an app's
+   * light-only override of --color-focus does not reach dark. */
+--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);
+/* The muted ring, for the same reason as the control boundary above: one
+   * step lighter than the fixed point, 3.73:1 on the overlay. */
+--color-focus-ring-muted: var(--color-base-600);
 /* 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 — no overrides: @theme uses --color-pine-*; semantic pine resolves to mirrored physical ramp inside .dark */
-/* Warning Colors — no overrides: @theme uses --color-warning-* scale; it mirrors in .dark via --zabi-warning-* */
-/* Error Colors — no overrides: @theme uses --color-error-* scale; it mirrors in .dark via --zabi-error-* */
-/* Energetic Colors — no overrides: @theme uses --color-citron-*; citron mirrors in .dark via --zabi-citron-* */
-/* Neutral Colors - No dark mode overrides needed, base colors are already inverted */
-/* Info Colors — no overrides: @theme uses --color-iris-* (incl. --color-info-active); iris mirrors in .dark via --zabi-iris-* */
+/* Tinted fills and edges — pinned at steps 100 and 200.
+   * The solid, weak, medium, strong and text steps need no override: they
+   * resolve through the mirrored ramps. The tints do, because light moved them
+   * to steps 200 and 300 to read on a white card, and the mirror of those is
+   * too heavy on a dark surface. */
+--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);
+/* Label on a solid accent fill: the dark end of the ramp on its light end. */
+--color-on-accent: var(--zabi-on-accent-dark);
+--color-info-subtle: var(--color-iris-100);
+--color-info-border: var(--color-iris-200);
+/* Neutral Colors — base-550 mirrors to L* 57, which is only 4.35:1 on a
+   * raised surface. One step lighter clears AA on every dark surface level. */
+--color-neutral: var(--color-base-600);
+/* Info Colors — no further overrides: @theme uses --color-iris-* (incl. --color-info-active); iris mirrors in .dark via --zabi-iris-* */
 /* ========================================
      ACTION COLORS - Dark Mode Overrides
      ======================================== */
 /* Primary Actions - Background adapts automatically via brand color inversion */
-/* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit --zabi-brand-* physical ramp above (semantic --color-brand-* follows mirror) */
-/* Text color - Use brand-50 (semantic; maps across light/dark via --zabi-brand-*) for proper contrast */
---color-action-primary-text: var(--color-brand-50)
-/* Secondary Actions - No dark mode overrides needed, base colors are already inverted */
-/* Danger Actions */
---color-action-danger: #ef4444
---color-action-danger-hover: #dc2626
---color-action-danger-active: #b91c1c
---color-action-danger-disabled: #b91c1c
---color-action-danger-subtle: #450a0a
---color-action-danger-subtle-hover: #7f1d1d
-/* 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))
-}
+/* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit the --zabi-brand-* physical ramp in @theme (semantic --color-brand-* follows the mirror) */
+/* "On brand" in dark: --zabi-on-brand-dark, by default the physical dark end
+   * of the brand ramp on the physical light end used as the dark-mode primary
+   * fill (7.21:1). --color-action-primary-text is restated, as it always
+   * was here, so that an app's light-only override of it does not carry a
+   * white label onto the light dark-mode fill. */
+--color-on-brand: var(--zabi-on-brand-dark);
+--color-action-primary-text: var(--color-on-brand);
+/* Pinned like the other tints: light moved these a step darker. */
+--color-action-primary-subtle: var(--color-brand-100);
+--color-action-primary-subtle-hover: var(--color-brand-200);
+/* Half a step past the dark hover fill, as in light. */
+--color-action-primary-subtle-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
+/* Secondary Actions - light alpha tint instead of the light-mode dark tint */
+--color-action-secondary: rgba(250, 250, 250, 0.09);
+--color-action-secondary-hover: rgba(250, 250, 250, 0.15);
+--color-action-secondary-active: rgba(250, 250, 250, 0.21);
+/* Disabled Actions - base-200 in dark is #27272a, still the quietest fill.
+   * Pinned: light moved a step darker to stay visible on its darker page. */
+--color-action-disabled: var(--color-base-200);
+--color-action-disabled-border: var(--color-base-250);
+/* Danger Actions — restated as aliases, not re-pointed.
+   * These resolve through the mirrored --color-error-* scale, so dark danger
+   * is the same step of the same ramp as light danger. They are repeated here
+   * only because `zabi-components/theme-dark-only` has to stand alone as a
+   * complete import (validate-theme.js enforces that). The raw hex this
+   * replaced pinned dark danger brighter than light, which is why the
+   * destructive action was the loudest element on a dark page. */
+--color-action-danger: var(--color-error-600);
+--color-action-danger-hover: var(--color-error-700);
+--color-action-danger-active: var(--color-error-800);
+--color-action-danger-subtle: var(--color-error-100);
+--color-action-danger-subtle-hover: var(--color-error-200);
+--color-action-danger-text: var(--color-error-50);
+/* Shadow Colors — black, not the light theme's ink tint */
+--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));
+/* Not a token: tells the browser the page is dark, so what it draws itself
+   * (date and time pickers, scrollbars, autofill, the caret of a native
+   * select) is dark too. It is the last declaration on purpose:
+   * scripts/sync-theme-tokens.js rewrites the ramp aliases at the top of this
+   * rule. The build publishes this rule under [data-theme="dark"] and, inside
+   * the dark media query, [data-theme="auto"], and every one of them carries
+   * it. Until 8.1 only the attributes set it and the class did not. */
+color-scheme: dark;
+}
+
+/* The same declarations again, for data-theme="auto" when the system is dark. */
+@media (prefers-color-scheme: dark) {
+  [data-theme="auto"] {
+  /* Brand Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+  --color-brand-50: var(--zabi-brand-950);
+  --color-brand-100: var(--zabi-brand-900);
+  --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);
+  /* Citron Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+  --color-citron-50: var(--zabi-citron-950);
+  --color-citron-100: var(--zabi-citron-900);
+  --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);
+  /* Accent Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+  --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);
+  /* Pine Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+  --color-pine-50: var(--zabi-pine-950);
+  --color-pine-100: var(--zabi-pine-900);
+  --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);
+  /* Iris Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+  --color-iris-50: var(--zabi-iris-950);
+  --color-iris-100: var(--zabi-iris-900);
+  --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);
+  /* Warning Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+  --color-warning-50: var(--zabi-warning-950);
+  --color-warning-100: var(--zabi-warning-900);
+  --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);
+  /* Error Color Scale — semantic → physical mirror (1000 − step); 500 fixed point */
+  --color-error-50: var(--zabi-error-950);
+  --color-error-100: var(--zabi-error-900);
+  --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);
+  /* Base Color Scale — semantic → physical mirror (1000 − step); 500 is fixed point */
+  --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);
+  /* Background Colors - No dark mode overrides needed, base colors are already inverted */
+  /* Page Colors - No dark mode overrides needed, base colors are already inverted */
+  /* Surface elevation — shadows don't read on dark, so each level steps up +6 OKLCH lightness
+     * from the page background (L 21 → 27 → 33 → 39).
+     *
+     * GENERATED by scripts/generate-surfaces.js from tokens/surface-ladder.js — do not hand-edit.
+     * The page is --zabi-base-900. Each level above it is --zabi-base-50 (the same light as the
+     * dark hover tint) washed over the page at 6.4% / 13.1% / 19.7%, so every level is the one
+     * below it with more light on it, and a --zabi-base-* override carries the whole ladder.
+     * Mixing two opaque colours stays opaque, so a modal never lets the page through. With the
+     * default greys these resolve to #18181b / #262629 / #363638 / #454547.
+     * Enforced by scripts/check-surface-elevation.js (strictly increasing, 5–8 points). */
+  --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));
+  /* base-400 mirrors to --zabi-base-600 (#52525b), one step lighter than the overlay. */
+  --color-surface-overlay-hover: var(--color-base-400);
+  /* Inset — the step between the page and the raised surface (L 24). The input
+     * field is the library's own inset; see --color-input below. */
+  --color-surface-inset: var(--color-base-150);
+  /* Distinct from base, raised AND elevated — a neutral chip has no hue to
+     * separate it, so it has to separate on lightness wherever it lands. */
+  --color-neutral-subtle: var(--color-base-300);
+  --color-neutral-border: var(--color-base-200);
+  --color-border-overlay: var(--color-base-450);
+  /* Background Colors */
+  --color-background: var(--color-surface-base);
+  --color-background-tertiary: var(--color-base-100);
+  /* Page Colors — pinned: light moved the page to base-150, dark stays on base-100 */
+  --color-page: var(--color-base-100);
+  /* Card Colors — aliases of the surface levels */
+  --color-card: var(--color-surface-raised);
+  --color-card-hover: var(--color-surface-elevated);
+  --color-card-active: var(--color-surface-overlay);
+  --color-card-elevated: var(--color-surface-elevated);
+  /* Surfaces — numbered aliases of the surface levels */
+  --color-surface-1: var(--color-surface-raised);
+  --color-surface-2: var(--color-surface-elevated);
+  --color-surface-3: var(--color-surface-overlay);
+  --color-surface-4: var(--color-base-400);
+  /*
+     * Secondary text keeps ≥ 4.5:1 on every surface level, including overlays (L39).
+     * Only base-650 and lighter pass on the overlay, so caption takes base-650 and description
+     * moves one step up to base-700 to stay visibly stronger than caption.
+     */
+  --color-description: var(--color-base-700);
+  --color-caption: var(--color-base-650);
+  /* Interaction fills — light tint on dark, mirroring the light-mode rule.
+     * Alpha keeps these one step away from every surface level, which a fixed
+     * ramp step cannot guarantee (base-100 in dark IS the page background). */
+  --color-surface-hover: rgba(250, 250, 250, 0.08);
+  --color-surface-active: rgba(250, 250, 250, 0.14);
+  /* Overlay Colors */
+  --color-overlay: rgba(0, 0, 0, 0.7);
+  /* Input Colors
+     * Dark fields are INSET: one step below the raised surface they sit on,
+     * which is the dark-mode equivalent of a white field on a grey page. */
+  --color-input: var(--color-surface-inset);
+  /* Restated here: the root value of a var() alias is resolved at :root. */
+  --color-progress-fill: var(--color-action-primary);
+  --color-progress-track: var(--color-input);
+  /* base-500 (the mirror's fixed point): 3.40:1 on the dark field, 3.67:1 on
+     * the page and 3.12:1 on the card. base-300 was 1.57, 1.70 and 1.44. */
+  --color-input-border: var(--color-base-500);
+  --color-input-border-hover: var(--color-input-border);
+  --color-input-hover: var(--color-base-200);
+  /* One step past hover, and one short of the border (base-300), so the
+     * pressed field keeps its edge: 1.31:1 against the resting field. */
+  --color-input-active: var(--color-base-250);
+  --color-input-focus: var(--color-base-150);
+  --color-input-disabled: var(--color-base-100);
+  /* base-500 is the mirror's fixed point, the same grey as it was in light,
+     * and a dark field is a far lighter ground for it than a white one is dark:
+     * 3.40:1 at rest, 3.08:1 on hover, 2.60:1 pressed. base-600 mirrors to
+     * --zabi-base-400 (#a1a1aa): 6.41, 5.81 and 4.90. base-550 would be 4.74
+     * at rest but under 4.5 on hover. The value text is 2.0:1 stronger. */
+  --color-input-placeholder: var(--color-base-600);
+  /* Text Colors - No dark mode overrides needed, base colors are already inverted */
+  /* Border Colors - the decorative edges need no override, base colors are
+     * already inverted. The control boundary does: base-500 is the mirror's
+     * fixed point (#71717a in both themes), and the dark surfaces above the card
+     * are too light for it (2.49:1 on elevated, 1.98:1 on the overlay). base-600
+     * mirrors to --zabi-base-400 (#a1a1aa): 3.73:1 on the overlay, the lightest
+     * surface, and more on every level below it. base-550 is 2.76:1 there. */
+  --color-control-border: var(--color-base-600);
+  /* Focus Colors — the same steps as light, through the mirror: brand-600 is
+     * --zabi-brand-400 here, which is also the dark primary fill, so on a
+     * primary button the ring is separated by its offset gap exactly as in light.
+     * Dark used to stay one step back, on brand-500, the mirror's fixed point.
+     * That is 5.4:1 on the dark page but only 2.91:1 on the overlay, the
+     * lightest surface (2.78:1 for an amber brand), and a ring in a modal or a
+     * menu needs 3:1 too. Restated rather than left to inherit, so an app's
+     * light-only override of --color-focus does not reach dark. */
+  --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);
+  /* The muted ring, for the same reason as the control boundary above: one
+     * step lighter than the fixed point, 3.73:1 on the overlay. */
+  --color-focus-ring-muted: var(--color-base-600);
+  /* Primary Colors - No dark mode overrides needed, brand colors are already inverted */
+  /* Secondary Colors - No dark mode overrides needed, base colors are already inverted */
+  /* Tinted fills and edges — pinned at steps 100 and 200.
+     * The solid, weak, medium, strong and text steps need no override: they
+     * resolve through the mirrored ramps. The tints do, because light moved them
+     * to steps 200 and 300 to read on a white card, and the mirror of those is
+     * too heavy on a dark surface. */
+  --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);
+  /* Label on a solid accent fill: the dark end of the ramp on its light end. */
+  --color-on-accent: var(--zabi-on-accent-dark);
+  --color-info-subtle: var(--color-iris-100);
+  --color-info-border: var(--color-iris-200);
+  /* Neutral Colors — base-550 mirrors to L* 57, which is only 4.35:1 on a
+     * raised surface. One step lighter clears AA on every dark surface level. */
+  --color-neutral: var(--color-base-600);
+  /* Info Colors — no further overrides: @theme uses --color-iris-* (incl. --color-info-active); iris mirrors in .dark via --zabi-iris-* */
+  /* ========================================
+       ACTION COLORS - Dark Mode Overrides
+       ======================================== */
+  /* Primary Actions - Background adapts automatically via brand color inversion */
+  /* 🎯 TO CHANGE bg-action-primary IN DARK MODE: Edit the --zabi-brand-* physical ramp in @theme (semantic --color-brand-* follows the mirror) */
+  /* "On brand" in dark: --zabi-on-brand-dark, by default the physical dark end
+     * of the brand ramp on the physical light end used as the dark-mode primary
+     * fill (7.21:1). --color-action-primary-text is restated, as it always
+     * was here, so that an app's light-only override of it does not carry a
+     * white label onto the light dark-mode fill. */
+  --color-on-brand: var(--zabi-on-brand-dark);
+  --color-action-primary-text: var(--color-on-brand);
+  /* Pinned like the other tints: light moved these a step darker. */
+  --color-action-primary-subtle: var(--color-brand-100);
+  --color-action-primary-subtle-hover: var(--color-brand-200);
+  /* Half a step past the dark hover fill, as in light. */
+  --color-action-primary-subtle-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
+  /* Secondary Actions - light alpha tint instead of the light-mode dark tint */
+  --color-action-secondary: rgba(250, 250, 250, 0.09);
+  --color-action-secondary-hover: rgba(250, 250, 250, 0.15);
+  --color-action-secondary-active: rgba(250, 250, 250, 0.21);
+  /* Disabled Actions - base-200 in dark is #27272a, still the quietest fill.
+     * Pinned: light moved a step darker to stay visible on its darker page. */
+  --color-action-disabled: var(--color-base-200);
+  --color-action-disabled-border: var(--color-base-250);
+  /* Danger Actions — restated as aliases, not re-pointed.
+     * These resolve through the mirrored --color-error-* scale, so dark danger
+     * is the same step of the same ramp as light danger. They are repeated here
+     * only because `zabi-components/theme-dark-only` has to stand alone as a
+     * complete import (validate-theme.js enforces that). The raw hex this
+     * replaced pinned dark danger brighter than light, which is why the
+     * destructive action was the loudest element on a dark page. */
+  --color-action-danger: var(--color-error-600);
+  --color-action-danger-hover: var(--color-error-700);
+  --color-action-danger-active: var(--color-error-800);
+  --color-action-danger-subtle: var(--color-error-100);
+  --color-action-danger-subtle-hover: var(--color-error-200);
+  --color-action-danger-text: var(--color-error-50);
+  /* Shadow Colors — black, not the light theme's ink tint */
+  --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));
+  /* Not a token: tells the browser the page is dark, so what it draws itself
+     * (date and time pickers, scrollbars, autofill, the caret of a native
+     * select) is dark too. It is the last declaration on purpose:
+     * scripts/sync-theme-tokens.js rewrites the ramp aliases at the top of this
+     * rule. The build publishes this rule under [data-theme="dark"] and, inside
+     * the dark media query, [data-theme="auto"], and every one of them carries
+     * it. Until 8.1 only the attributes set it and the class did not. */
+  color-scheme: dark;
+  }
+}