zabi-components 8.0.0 → 9.0.0

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

@@ -2,292 +2,904 @@
 
 /* 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: #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
+[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: #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-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: #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-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: #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-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: #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-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: #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-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 */
-/* 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).
+/* Surface elevation — shadows don't read on dark, so the surfaces carry it by tone, in two
+   * steps: page L 21.0, card L 24.1, elevated and overlay L 27.4 (D133/D134).
    *
    * GENERATED by scripts/generate-surfaces.js from tokens/surface-ladder.js — do not hand-edit.
-   * Each level is #fafafa (the same light as the dark hover tint) washed over the page at
-   * 6.4% / 13.1% / 19.7%, so every level is the one below it with more light on it. Baked to
-   * opaque hex so the static checks can still resolve them and a modal stays opaque.
-   * Enforced by scripts/check-surface-elevation.js (strictly increasing, 5–8 points). */
---color-surface-base: #18181b
---color-surface-raised: #262629
---color-surface-elevated: #363638
---color-surface-overlay: #454547
---color-surface-overlay-hover: #52525b
+   * Every role is a plain step of the neutral ramp (--zabi-base-N), so hue and chroma are the
+   * ramp's own, and a --zabi-base-* override or a tinted neutral carries all of them. An overlay
+   * (sheet, menu, modal) is the same tone as elevated: it is told apart by its edge
+   * (--color-material-rim) and its shadow, not by being greyer. The hover on an overlay is one
+   * ramp step lighter; the inset is the page step, told apart by its 3:1 edge.
+   * With the default greys: #18181b / #1f1f22 / #27272a / #27272a, hover #333338, inset #18181b.
+   * Enforced by scripts/check-surface-elevation.js (ramp steps, never lighter downwards, at most
+   * two tone steps of 2–5 points, the overlay edge and the card edge). */
+--color-surface-base: var(--zabi-base-900);
+--color-surface-raised: var(--zabi-base-850);
+--color-surface-elevated: var(--zabi-base-800);
+--color-surface-overlay: var(--zabi-base-800);
+--color-surface-overlay-hover: var(--zabi-base-750);
+/* Inset — the page step, 3 points below the card (L 24.1). A field on the page is told apart
+   * by its 3:1 edge, as a white field on the near-white light page is. */
+--color-surface-inset: var(--zabi-base-900);
+/* Chrome and the bar tokens — restated so a light-only override of the page
+   * or the raised surface does not reach dark. */
+--color-surface-chrome: var(--color-surface-base);
+--color-bar: var(--color-surface-chrome);
+--color-bar-border: color-mix(in srgb, var(--color-headline) 10%, transparent);
+--color-bar-brand: var(--color-action-primary);
+--color-tabbar-active: var(--color-nav-menu-active);
 /* Distinct from base, raised AND elevated — a neutral chip has no hue to
-   * separate it, so it has to separate on lightness wherever it lands. */
---color-neutral-subtle: var(--color-base-300)
---color-border-overlay: var(--color-base-450)
+   * separate it, so it has to separate on lightness wherever it lands:
+   * base-300 is 1.70:1 on the page, 1.57:1 on the card, 1.43:1 on elevated. */
+--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: var(--color-surface-base);
+--color-background-tertiary: var(--color-base-100);
+/* Page Colors — the dark page (base-100 here is --zabi-base-900, the same value as before) */
+--color-page: var(--color-surface-base);
 /* Card Colors — aliases of the surface levels */
---color-card: var(--color-surface-raised)
---color-card-hover: var(--color-surface-elevated)
---color-card-active: var(--color-surface-overlay)
---color-card-elevated: var(--color-surface-elevated)
+--color-card: var(--color-surface-raised);
+--color-card-hover: var(--color-surface-elevated);
+--color-card-active: var(--color-surface-overlay-hover);
+--color-card-elevated: var(--color-surface-elevated);
+/* Card tint, dark: the brand at 8% over the card (as the status tints of D136,
+   * which are 16%: here the field edge sets the ceiling, base-500 is 3.07:1 on
+   * this and 2.90:1 at 12%). 8% is #252733: 1.11:1 on the card and 1.20:1 on the
+   * page; headline 13.49, body 11.68, label and description 10.03, caption 7.68,
+   * link 8.81, ring 6.59:1. */
+--color-card-tint: color-mix(in srgb, var(--zabi-brand-500) 8%, var(--color-surface-raised));
+/* Card variant="flat", dark: a translucent step of the neutral ramp (base-50 at 7%), so a flat card
+   * is lighter than whatever it sits on, and a flat card inside a flat card is lighter again. Shadows
+   * do not carry layers on a dark page; alpha does. Hover and pressed are the same step at 11% and 15%.
+   * Restore the opaque fill: overrides: { dark: { '--color-card-flat': 'var(--color-card)' } }. */
+--color-card-flat: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+--color-card-flat-hover: color-mix(in srgb, var(--zabi-base-50) 11%, transparent);
+--color-card-flat-active: color-mix(in srgb, var(--zabi-base-50) 15%, transparent);
 /* 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)
+--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-surface-overlay-hover);
 /*
-   * 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.
+   * Secondary text keeps ≥ 4.5:1 on every surface level, including overlays (L27).
+   * Caption takes base-650 and description base-700 to stay visibly stronger than it.
    */
---color-description: var(--color-base-700)
---color-caption: var(--color-base-650)
+--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)
+--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)
+--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-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)
+   * Dark fields are a translucent step of the neutral ramp (base-50 at 7%), the
+   * same idea as the flat card: a well one step LIGHTER than whatever it sits on,
+   * without a rule per surface. It was the page step (--color-surface-inset), so
+   * a dark form was told from the page by its 3:1 edge alone. 7% is 1.20:1 on
+   * the page (#28282b), 1.22:1 on a card (#2e2e31) and 1.23:1 on the overlay
+   * (#363639); hover 10% and pressed 15% (1.30:1 against the resting field on
+   * all three). The edge below stays 3:1 against the surface outside it.
+   * Restore the opaque field: overrides: { dark: {
+   *   '--color-input': 'var(--color-surface-inset)', '--color-input-hover': 'var(--color-base-200)',
+   *   '--color-input-focus': 'var(--color-base-150)',
+   *   '--color-input-active': 'color-mix(in srgb, var(--zabi-base-50) 10%, var(--color-surface-inset))' } }. */
+--color-input: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+/* What a field is inside a colour block (.on-brand, .on-accent, .on-fill): the translucent
+   * well would sit on the block's fill, which the theme's text is not set for, so the field
+   * takes these opaque steps there. */
+--color-input-solid: var(--color-surface-inset);
+--color-input-solid-hover: var(--color-base-200);
+--color-input-solid-focus: var(--color-base-150);
+--color-input-solid-active: color-mix(in srgb, var(--zabi-base-50) 10%, var(--color-surface-inset));
+/* Restated here: the root value of a var() alias is resolved at :root. */
+--color-progress-fill: var(--color-action-primary);
+/* The field step is the page now, so the track takes its own: base-75
+   * (#101013), a well just below the page: 1.06:1 on the page, 1.14:1 on the
+   * card, 1.45:1 on the elevated surface. It was base-250 (#333338, 1.41:1 on
+   * the page). The fill is a mid step now (brand-600), and 3:1 on its rail
+   * needs a track this dark: 3.91:1 here with the default brand (2.59:1 on
+   * base-250, 2.94:1 for an amber brand on base-200). */
+--color-progress-track: var(--color-base-75);
+/* Restated: the root value of a var() alias is resolved at :root. The field
+   * edge, 3.67:1 on the page and 3.40:1 on the card. */
+--color-progress-track-border: var(--color-input-border);
+/* base-500 (the mirror's fixed point): 3.67:1 on the dark field and the page,
+   * 3.40:1 on the card, 3.08:1 on the elevated surface and the overlay.
+   * base-300 was 1.70, 1.57 and 1.43. */
+--color-input-border: var(--color-base-500);
+--color-input-border-hover: var(--color-input-border);
+/* The decorative hairline (Card's default variant, list dividers). Quiet, like
+   * light's: base-250 is #333338, 1.41:1 on the page and 1.31:1 on the card
+   * (base-300 was 1.70 and 1.57, base-200 only 1.10 on the card). Restated: the
+   * root value of a var() alias is resolved at :root. -medium (2.29:1) and
+   * -strong (3.67:1) keep their order above it. */
+--color-border: var(--color-base-250);
+--color-border-weak: var(--color-base-250);
+/* Toggle track, off. The thumb is the card (#1f1f22), so the track cannot
+   * be as dark as it. base-300 (#3f3f46) is 1.57:1 against the thumb, and the
+   * field edge gives the 3:1: 3.67:1 on the page, 3.40:1 on the card. */
+--color-toggle-track: var(--color-base-300);
+--color-toggle-track-hover: var(--color-base-350);
+--color-toggle-track-active: var(--color-base-400);
+--color-toggle-track-border: var(--color-input-border);
+/* Toggle knob in dark: off, a light knob on the dark track (base-700, #d4d4d8:
+   * 7.07:1 resting, 5.23:1 pressed); on, as in light (the same 4.86:1 and up). */
+--color-toggle-knob: var(--color-base-700);
+--color-toggle-knob-checked: var(--color-action-primary-text);
+/* Hover 10%: 1.10:1 above the resting well on the page, the card and the overlay, body 8.65:1
+   * or more and placeholder 4.68:1 or more on it. Was base-200. */
+--color-input-hover: color-mix(in srgb, var(--zabi-base-50) 10%, transparent);
+/* Pressed 15% of the light end of the ramp (unmirrored, --zabi-base-50): 1.30:1 against the
+   * resting well on the page (#3a3a3c), the card (#404042) and the overlay (#474749), 1.18:1
+   * past hover, body 7.34:1 or more, placeholder 4.54:1 on a card and 4.08:1 on the overlay,
+   * short of the border (2.35:1 or less). 14% is 1.254:1 on the default and under 1.25 on a tinted ramp. Was 10% into the page step (#2f2f31). */
+--color-input-active: color-mix(in srgb, var(--zabi-base-50) 15%, transparent);
+/* Focus is the resting well: the ring shows focus, and hover still reads on a focused field.
+   * Was base-150. */
+--color-input-focus: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+/* The field is the page step now, so the disabled field goes one step below
+   * the page (base-75, #101013): 1.07:1 on the page, 1.16:1 on the card. */
+--color-input-disabled: var(--color-base-75);
+/* 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.
+   * The well is lighter now (a translucent step over the surface), and the
+   * pressed one over a card held base-400 to 4.04:1: so 40% of the next step
+   * toward the value (base-350, #babac1) is mixed in, #ababb3: 6.46, 5.89 and
+   * 4.98:1 at rest, hover and pressed on the page, 5.91, 5.37 and 4.54:1 on a
+   * card, 5.30, 4.82 and 4.08:1 on the overlay (pressed there is held to 4:1,
+   * see contrast-pairs.js), and 1.80:1 under the value (1.75 is the floor; 50%
+   * would be 1.75). Was base-600 (#a1a1aa). */
+--color-input-placeholder: color-mix(in srgb, var(--zabi-base-350) 40%, var(--zabi-base-400));
 /* 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);
+/* Segmented control thumb — restated: the aliases resolve at :root, so without
+   * these dark would keep the light card colour. The track is a light tint over
+   * the page or a card (#2c2c2f / #333335), which the overlay tone now sits
+   * below, so the thumb takes base-400 (#52525b): 1.80:1 over the page track,
+   * 1.63:1 over the card track, headline text 7.03:1. */
+--color-segment-thumb: var(--color-base-400);
+--color-segment-thumb-text: var(--color-headline);
+--color-segment-thumb-border: var(--color-control-border);
+/* 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-* */
+/* Tinted fills and edges — the hue thinned into the card surface, not the
+   * mirrored step 100 / 200 (physical 900 / 800: deep, saturated, the loudest
+   * area on a dark screen). A tint here is a low-chroma tint of the card, and
+   * the hue is carried by the icon and the text. The mid step (500) is where
+   * the ramp's chroma peaks and the mirror's fixed point. The base is the card
+   * surface, so a badge or alert on a card is never darker than the card, and
+   * an app's override of the card surface carries through. The edge is the
+   * same mix, stronger. */
+--color-success-subtle: color-mix(in srgb, var(--zabi-pine-500) 16%, var(--color-surface-raised));
+--color-success-border: color-mix(in srgb, var(--zabi-pine-500) 36%, var(--color-surface-raised));
+--color-warning-subtle: color-mix(in srgb, var(--zabi-warning-500) 16%, var(--color-surface-raised));
+--color-warning-border: color-mix(in srgb, var(--zabi-warning-500) 36%, var(--color-surface-raised));
+--color-error-subtle: color-mix(in srgb, var(--zabi-error-500) 16%, var(--color-surface-raised));
+--color-error-border: color-mix(in srgb, var(--zabi-error-500) 36%, var(--color-surface-raised));
+--color-energetic-subtle: color-mix(in srgb, var(--zabi-citron-500) 16%, var(--color-surface-raised));
+--color-energetic-border: color-mix(in srgb, var(--zabi-citron-500) 36%, var(--color-surface-raised));
+--color-accent-subtle: color-mix(in srgb, var(--zabi-accent-500) 16%, var(--color-surface-raised));
+--color-accent-border: color-mix(in srgb, var(--zabi-accent-500) 36%, var(--color-surface-raised));
+/* 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: color-mix(in srgb, var(--zabi-iris-500) 16%, var(--color-surface-raised));
+--color-info-border: color-mix(in srgb, var(--zabi-iris-500) 36%, var(--color-surface-raised));
 /* Neutral Colors — base-550 mirrors to L* 57, which is only 4.35:1 on a
    * raised surface. One step lighter clears AA on every dark surface level. */
---color-neutral: var(--color-base-600)
-/* Info Colors — no overrides: @theme uses --color-iris-* (incl. --color-info-active); iris mirrors in .dark via --zabi-iris-* */
+--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 - the physical dark end of the brand ramp, on the physical
-   * light end used as the dark-mode primary fill. 7.21:1. */
---color-action-primary-text: var(--zabi-brand-950)
+/* Primary Actions - the brand hue in dark too: the same physical steps as
+   * light (600 / 700 / 800), not the mirrored ones, which would be the pale
+   * 400 / 300 / 200. White on step 600 is 4.76 to 4.86:1 (every ramp is on one
+   * lightness curve); with the default brand the fill is 3.65:1 on the page,
+   * 3.39:1 on the card and 3.07:1 on the overlay (3:1 holds on all three, WCAG
+   * 1.4.11). Hover and pressed go darker, as in light.
+   * createTheme({ darkPrimary: 'mirror' }) writes the mirrored fills instead.
+   * 🎯 TO CHANGE bg-action-primary IN DARK MODE: override --color-action-primary under `dark`. */
+--color-action-primary: var(--zabi-brand-600);
+--color-action-primary-hover: var(--zabi-brand-700);
+--color-action-primary-active: var(--zabi-brand-800);
+/* "On brand" in dark: --zabi-on-brand-dark, which follows the light label (white). If an app
+   * moves the dark primary to a pale step, it sets the knob to a dark one.
+   * --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 different label onto the
+   * dark 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);
+--color-action-primary-border: 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 */
-/* Danger Actions — restated as aliases, not re-pointed.
-   * These resolve through the mirrored --color-error-* scale, so dark danger
-   * is the same step of the same ramp as light danger. They are repeated here
-   * only because `zabi-components/theme-dark-only` has to stand alone as a
-   * complete import (validate-theme.js enforces that). The raw hex this
-   * replaced pinned dark danger brighter than light, which is why the
-   * destructive action was the loudest element on a dark page. */
---color-action-danger: var(--color-error-600)
---color-action-danger-hover: var(--color-error-700)
---color-action-danger-active: var(--color-error-800)
---color-action-danger-subtle: var(--color-error-100)
---color-action-danger-subtle-hover: var(--color-error-200)
---color-action-danger-text: var(--color-error-50)
-/* Shadow Colors */
---shadow-opacity: 0.3
---shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))
---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-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);
+/* Tonal Actions - the deep brand tint (brand-100 in dark is the deep end of
+   * the mirrored ramp) with a light brand label. Restated: the root values are
+   * var() aliases of roles that move in dark. Brand-800 is the light end of the
+   * mirrored ramp here: 9.48, 6.94 and 5.86:1 on the three fills. */
+--color-action-tonal: var(--color-action-primary-subtle);
+--color-action-tonal-hover: var(--color-action-primary-subtle-hover);
+--color-action-tonal-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
+--color-action-tonal-text: var(--color-brand-800);
+/* Chip, dark - its own steps, not the mirror of light. The ladder rises from
+   * the page (base-900, card base-850): rest base-750 is 1.41:1 on the page and
+   * 1.31:1 on the card, hover base-700 and pressed base-650 lighter again (1.70
+   * and 1.96 on the page). Headline is 11.43, 9.50 and 8.24:1 on the three.
+   * Restated, with the selected chip, because the root values are var() aliases. */
+--color-chip: var(--zabi-base-750);
+--color-chip-hover: var(--zabi-base-700);
+--color-chip-active: var(--zabi-base-650);
+--color-chip-text: var(--color-headline);
+--color-chip-selected: var(--color-action-tonal);
+--color-chip-selected-hover: var(--color-action-tonal-hover);
+--color-chip-selected-active: var(--color-action-tonal-active);
+--color-chip-selected-text: var(--color-action-tonal-text);
+/* Outline Actions - the field edge, restated for the same reason. */
+--color-action-outline-border: var(--color-input-border);
+--color-action-outline-border-hover: var(--color-input-border-hover);
+/* Disabled Actions - base-200 in dark is #27272a (the elevated tone), still
+   * the quietest fill, and the one the disabled label (base-500) reads on at 3.08:1.
+   * 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 — the same physical steps as light danger (600 / 700 / 800
+   * of --zabi-error-*) with the same label (step 50), so a destructive button
+   * is one red in both modes and shares the primary's veil. Physical, not
+   * through the mirror, which would be the pale 400 / 300 / 200. Restated
+   * because `zabi-components/theme-dark-only` has to stand alone as a complete
+   * import (validate-theme.js enforces that). The subtle tints are the thin mix below. */
+--color-action-danger: var(--zabi-error-600);
+--color-action-danger-hover: var(--zabi-error-700);
+--color-action-danger-active: var(--zabi-error-800);
+--color-action-danger-subtle: var(--color-error-subtle);
+--color-action-danger-subtle-hover: color-mix(in srgb, var(--zabi-error-500) 20%, var(--color-surface-raised));
+--color-action-danger-subtle-active: color-mix(in srgb, var(--zabi-error-500) 32%, var(--color-surface-raised));
+--color-action-danger-text: var(--zabi-error-50);
+/* Shadow Colors — black, not the light theme's ink tint. Much stronger than
+   * light (0.1 / 0.06): an overlay is the same tone as the elevated surface
+   * now, so a sheet (L 27.4) floats over a card (L 24.1) by its shadow and its
+   * edge, and the shadow has to carry it. */
+--shadow-color: 0 0 0;
+--shadow-opacity: 0.5;
+--shadow-opacity-contact: 0.4;
+--shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 2px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-md: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 6px 14px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-lg: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-xl: 0 2px 4px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 20px 50px -8px rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-material: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+/* Materials — the alphas and the backdrop brightness differ (see @theme).
+   * The fills are not restated: they follow the surface tokens above. The
+   * filters are restated, because they hold a var() that resolves where it is
+   * declared; the fallbacks below are one class more specific than this rule
+   * and set them to none, so they still win in dark. */
+--material-backdrop-brightness: 0.6;
+--material-alpha-thin: 60%;
+--material-alpha-regular: 68%;
+--material-alpha-thick: 72%;
+--material-filter-thin: blur(var(--material-blur-thin)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+--material-filter-regular: blur(var(--material-blur-regular)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+--material-filter-thick: blur(var(--material-blur-thick)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+--color-material-highlight: color-mix(in srgb, var(--zabi-base-50) 14%, transparent);
+--color-material-rim: color-mix(in srgb, var(--zabi-base-50) 14%, transparent);
+/* Gradients: the wash is quieter in dark (see @theme). The stops follow. */
+--gradient-canvas-strength: 25%;
+--gradient-control-top-strength: 0%;
+--gradient-control-bottom-strength: 14%;
+/* The accent's own strengths, no longer the shared ones: in dark its fill is
+   * the light step with a dark label, which a darkening veil would fail, so it
+   * keeps the lighter top and slight dark bottom it had (22 / 6). */
+--gradient-control-accent-top-strength: 22%;
+--gradient-control-accent-bottom-strength: 6%;
+--shadow-control-highlight: inset 0 1px 0 color-mix(in srgb, var(--zabi-base-50) 25%, transparent);
+/* 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 the surfaces carry it by tone, in two
+     * steps: page L 21.0, card L 24.1, elevated and overlay L 27.4 (D133/D134).
+     *
+     * GENERATED by scripts/generate-surfaces.js from tokens/surface-ladder.js — do not hand-edit.
+     * Every role is a plain step of the neutral ramp (--zabi-base-N), so hue and chroma are the
+     * ramp's own, and a --zabi-base-* override or a tinted neutral carries all of them. An overlay
+     * (sheet, menu, modal) is the same tone as elevated: it is told apart by its edge
+     * (--color-material-rim) and its shadow, not by being greyer. The hover on an overlay is one
+     * ramp step lighter; the inset is the page step, told apart by its 3:1 edge.
+     * With the default greys: #18181b / #1f1f22 / #27272a / #27272a, hover #333338, inset #18181b.
+     * Enforced by scripts/check-surface-elevation.js (ramp steps, never lighter downwards, at most
+     * two tone steps of 2–5 points, the overlay edge and the card edge). */
+  --color-surface-base: var(--zabi-base-900);
+  --color-surface-raised: var(--zabi-base-850);
+  --color-surface-elevated: var(--zabi-base-800);
+  --color-surface-overlay: var(--zabi-base-800);
+  --color-surface-overlay-hover: var(--zabi-base-750);
+  /* Inset — the page step, 3 points below the card (L 24.1). A field on the page is told apart
+     * by its 3:1 edge, as a white field on the near-white light page is. */
+  --color-surface-inset: var(--zabi-base-900);
+  /* Chrome and the bar tokens — restated so a light-only override of the page
+     * or the raised surface does not reach dark. */
+  --color-surface-chrome: var(--color-surface-base);
+  --color-bar: var(--color-surface-chrome);
+  --color-bar-border: color-mix(in srgb, var(--color-headline) 10%, transparent);
+  --color-bar-brand: var(--color-action-primary);
+  --color-tabbar-active: var(--color-nav-menu-active);
+  /* 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:
+     * base-300 is 1.70:1 on the page, 1.57:1 on the card, 1.43:1 on elevated. */
+  --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 — the dark page (base-100 here is --zabi-base-900, the same value as before) */
+  --color-page: var(--color-surface-base);
+  /* Card Colors — aliases of the surface levels */
+  --color-card: var(--color-surface-raised);
+  --color-card-hover: var(--color-surface-elevated);
+  --color-card-active: var(--color-surface-overlay-hover);
+  --color-card-elevated: var(--color-surface-elevated);
+  /* Card tint, dark: the brand at 8% over the card (as the status tints of D136,
+     * which are 16%: here the field edge sets the ceiling, base-500 is 3.07:1 on
+     * this and 2.90:1 at 12%). 8% is #252733: 1.11:1 on the card and 1.20:1 on the
+     * page; headline 13.49, body 11.68, label and description 10.03, caption 7.68,
+     * link 8.81, ring 6.59:1. */
+  --color-card-tint: color-mix(in srgb, var(--zabi-brand-500) 8%, var(--color-surface-raised));
+  /* Card variant="flat", dark: a translucent step of the neutral ramp (base-50 at 7%), so a flat card
+     * is lighter than whatever it sits on, and a flat card inside a flat card is lighter again. Shadows
+     * do not carry layers on a dark page; alpha does. Hover and pressed are the same step at 11% and 15%.
+     * Restore the opaque fill: overrides: { dark: { '--color-card-flat': 'var(--color-card)' } }. */
+  --color-card-flat: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+  --color-card-flat-hover: color-mix(in srgb, var(--zabi-base-50) 11%, transparent);
+  --color-card-flat-active: color-mix(in srgb, var(--zabi-base-50) 15%, transparent);
+  /* 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-surface-overlay-hover);
+  /*
+     * Secondary text keeps ≥ 4.5:1 on every surface level, including overlays (L27).
+     * Caption takes base-650 and description base-700 to stay visibly stronger than it.
+     */
+  --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 a translucent step of the neutral ramp (base-50 at 7%), the
+     * same idea as the flat card: a well one step LIGHTER than whatever it sits on,
+     * without a rule per surface. It was the page step (--color-surface-inset), so
+     * a dark form was told from the page by its 3:1 edge alone. 7% is 1.20:1 on
+     * the page (#28282b), 1.22:1 on a card (#2e2e31) and 1.23:1 on the overlay
+     * (#363639); hover 10% and pressed 15% (1.30:1 against the resting field on
+     * all three). The edge below stays 3:1 against the surface outside it.
+     * Restore the opaque field: overrides: { dark: {
+     *   '--color-input': 'var(--color-surface-inset)', '--color-input-hover': 'var(--color-base-200)',
+     *   '--color-input-focus': 'var(--color-base-150)',
+     *   '--color-input-active': 'color-mix(in srgb, var(--zabi-base-50) 10%, var(--color-surface-inset))' } }. */
+  --color-input: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+  /* What a field is inside a colour block (.on-brand, .on-accent, .on-fill): the translucent
+     * well would sit on the block's fill, which the theme's text is not set for, so the field
+     * takes these opaque steps there. */
+  --color-input-solid: var(--color-surface-inset);
+  --color-input-solid-hover: var(--color-base-200);
+  --color-input-solid-focus: var(--color-base-150);
+  --color-input-solid-active: color-mix(in srgb, var(--zabi-base-50) 10%, var(--color-surface-inset));
+  /* Restated here: the root value of a var() alias is resolved at :root. */
+  --color-progress-fill: var(--color-action-primary);
+  /* The field step is the page now, so the track takes its own: base-75
+     * (#101013), a well just below the page: 1.06:1 on the page, 1.14:1 on the
+     * card, 1.45:1 on the elevated surface. It was base-250 (#333338, 1.41:1 on
+     * the page). The fill is a mid step now (brand-600), and 3:1 on its rail
+     * needs a track this dark: 3.91:1 here with the default brand (2.59:1 on
+     * base-250, 2.94:1 for an amber brand on base-200). */
+  --color-progress-track: var(--color-base-75);
+  /* Restated: the root value of a var() alias is resolved at :root. The field
+     * edge, 3.67:1 on the page and 3.40:1 on the card. */
+  --color-progress-track-border: var(--color-input-border);
+  /* base-500 (the mirror's fixed point): 3.67:1 on the dark field and the page,
+     * 3.40:1 on the card, 3.08:1 on the elevated surface and the overlay.
+     * base-300 was 1.70, 1.57 and 1.43. */
+  --color-input-border: var(--color-base-500);
+  --color-input-border-hover: var(--color-input-border);
+  /* The decorative hairline (Card's default variant, list dividers). Quiet, like
+     * light's: base-250 is #333338, 1.41:1 on the page and 1.31:1 on the card
+     * (base-300 was 1.70 and 1.57, base-200 only 1.10 on the card). Restated: the
+     * root value of a var() alias is resolved at :root. -medium (2.29:1) and
+     * -strong (3.67:1) keep their order above it. */
+  --color-border: var(--color-base-250);
+  --color-border-weak: var(--color-base-250);
+  /* Toggle track, off. The thumb is the card (#1f1f22), so the track cannot
+     * be as dark as it. base-300 (#3f3f46) is 1.57:1 against the thumb, and the
+     * field edge gives the 3:1: 3.67:1 on the page, 3.40:1 on the card. */
+  --color-toggle-track: var(--color-base-300);
+  --color-toggle-track-hover: var(--color-base-350);
+  --color-toggle-track-active: var(--color-base-400);
+  --color-toggle-track-border: var(--color-input-border);
+  /* Toggle knob in dark: off, a light knob on the dark track (base-700, #d4d4d8:
+     * 7.07:1 resting, 5.23:1 pressed); on, as in light (the same 4.86:1 and up). */
+  --color-toggle-knob: var(--color-base-700);
+  --color-toggle-knob-checked: var(--color-action-primary-text);
+  /* Hover 10%: 1.10:1 above the resting well on the page, the card and the overlay, body 8.65:1
+     * or more and placeholder 4.68:1 or more on it. Was base-200. */
+  --color-input-hover: color-mix(in srgb, var(--zabi-base-50) 10%, transparent);
+  /* Pressed 15% of the light end of the ramp (unmirrored, --zabi-base-50): 1.30:1 against the
+     * resting well on the page (#3a3a3c), the card (#404042) and the overlay (#474749), 1.18:1
+     * past hover, body 7.34:1 or more, placeholder 4.54:1 on a card and 4.08:1 on the overlay,
+     * short of the border (2.35:1 or less). 14% is 1.254:1 on the default and under 1.25 on a tinted ramp. Was 10% into the page step (#2f2f31). */
+  --color-input-active: color-mix(in srgb, var(--zabi-base-50) 15%, transparent);
+  /* Focus is the resting well: the ring shows focus, and hover still reads on a focused field.
+     * Was base-150. */
+  --color-input-focus: color-mix(in srgb, var(--zabi-base-50) 7%, transparent);
+  /* The field is the page step now, so the disabled field goes one step below
+     * the page (base-75, #101013): 1.07:1 on the page, 1.16:1 on the card. */
+  --color-input-disabled: var(--color-base-75);
+  /* 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.
+     * The well is lighter now (a translucent step over the surface), and the
+     * pressed one over a card held base-400 to 4.04:1: so 40% of the next step
+     * toward the value (base-350, #babac1) is mixed in, #ababb3: 6.46, 5.89 and
+     * 4.98:1 at rest, hover and pressed on the page, 5.91, 5.37 and 4.54:1 on a
+     * card, 5.30, 4.82 and 4.08:1 on the overlay (pressed there is held to 4:1,
+     * see contrast-pairs.js), and 1.80:1 under the value (1.75 is the floor; 50%
+     * would be 1.75). Was base-600 (#a1a1aa). */
+  --color-input-placeholder: color-mix(in srgb, var(--zabi-base-350) 40%, var(--zabi-base-400));
+  /* 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);
+  /* Segmented control thumb — restated: the aliases resolve at :root, so without
+     * these dark would keep the light card colour. The track is a light tint over
+     * the page or a card (#2c2c2f / #333335), which the overlay tone now sits
+     * below, so the thumb takes base-400 (#52525b): 1.80:1 over the page track,
+     * 1.63:1 over the card track, headline text 7.03:1. */
+  --color-segment-thumb: var(--color-base-400);
+  --color-segment-thumb-text: var(--color-headline);
+  --color-segment-thumb-border: var(--color-control-border);
+  /* 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 — the hue thinned into the card surface, not the
+     * mirrored step 100 / 200 (physical 900 / 800: deep, saturated, the loudest
+     * area on a dark screen). A tint here is a low-chroma tint of the card, and
+     * the hue is carried by the icon and the text. The mid step (500) is where
+     * the ramp's chroma peaks and the mirror's fixed point. The base is the card
+     * surface, so a badge or alert on a card is never darker than the card, and
+     * an app's override of the card surface carries through. The edge is the
+     * same mix, stronger. */
+  --color-success-subtle: color-mix(in srgb, var(--zabi-pine-500) 16%, var(--color-surface-raised));
+  --color-success-border: color-mix(in srgb, var(--zabi-pine-500) 36%, var(--color-surface-raised));
+  --color-warning-subtle: color-mix(in srgb, var(--zabi-warning-500) 16%, var(--color-surface-raised));
+  --color-warning-border: color-mix(in srgb, var(--zabi-warning-500) 36%, var(--color-surface-raised));
+  --color-error-subtle: color-mix(in srgb, var(--zabi-error-500) 16%, var(--color-surface-raised));
+  --color-error-border: color-mix(in srgb, var(--zabi-error-500) 36%, var(--color-surface-raised));
+  --color-energetic-subtle: color-mix(in srgb, var(--zabi-citron-500) 16%, var(--color-surface-raised));
+  --color-energetic-border: color-mix(in srgb, var(--zabi-citron-500) 36%, var(--color-surface-raised));
+  --color-accent-subtle: color-mix(in srgb, var(--zabi-accent-500) 16%, var(--color-surface-raised));
+  --color-accent-border: color-mix(in srgb, var(--zabi-accent-500) 36%, var(--color-surface-raised));
+  /* 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: color-mix(in srgb, var(--zabi-iris-500) 16%, var(--color-surface-raised));
+  --color-info-border: color-mix(in srgb, var(--zabi-iris-500) 36%, var(--color-surface-raised));
+  /* 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 - the brand hue in dark too: the same physical steps as
+     * light (600 / 700 / 800), not the mirrored ones, which would be the pale
+     * 400 / 300 / 200. White on step 600 is 4.76 to 4.86:1 (every ramp is on one
+     * lightness curve); with the default brand the fill is 3.65:1 on the page,
+     * 3.39:1 on the card and 3.07:1 on the overlay (3:1 holds on all three, WCAG
+     * 1.4.11). Hover and pressed go darker, as in light.
+     * createTheme({ darkPrimary: 'mirror' }) writes the mirrored fills instead.
+     * 🎯 TO CHANGE bg-action-primary IN DARK MODE: override --color-action-primary under `dark`. */
+  --color-action-primary: var(--zabi-brand-600);
+  --color-action-primary-hover: var(--zabi-brand-700);
+  --color-action-primary-active: var(--zabi-brand-800);
+  /* "On brand" in dark: --zabi-on-brand-dark, which follows the light label (white). If an app
+     * moves the dark primary to a pale step, it sets the knob to a dark one.
+     * --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 different label onto the
+     * dark 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);
+  --color-action-primary-border: 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);
+  /* Tonal Actions - the deep brand tint (brand-100 in dark is the deep end of
+     * the mirrored ramp) with a light brand label. Restated: the root values are
+     * var() aliases of roles that move in dark. Brand-800 is the light end of the
+     * mirrored ramp here: 9.48, 6.94 and 5.86:1 on the three fills. */
+  --color-action-tonal: var(--color-action-primary-subtle);
+  --color-action-tonal-hover: var(--color-action-primary-subtle-hover);
+  --color-action-tonal-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
+  --color-action-tonal-text: var(--color-brand-800);
+  /* Chip, dark - its own steps, not the mirror of light. The ladder rises from
+     * the page (base-900, card base-850): rest base-750 is 1.41:1 on the page and
+     * 1.31:1 on the card, hover base-700 and pressed base-650 lighter again (1.70
+     * and 1.96 on the page). Headline is 11.43, 9.50 and 8.24:1 on the three.
+     * Restated, with the selected chip, because the root values are var() aliases. */
+  --color-chip: var(--zabi-base-750);
+  --color-chip-hover: var(--zabi-base-700);
+  --color-chip-active: var(--zabi-base-650);
+  --color-chip-text: var(--color-headline);
+  --color-chip-selected: var(--color-action-tonal);
+  --color-chip-selected-hover: var(--color-action-tonal-hover);
+  --color-chip-selected-active: var(--color-action-tonal-active);
+  --color-chip-selected-text: var(--color-action-tonal-text);
+  /* Outline Actions - the field edge, restated for the same reason. */
+  --color-action-outline-border: var(--color-input-border);
+  --color-action-outline-border-hover: var(--color-input-border-hover);
+  /* Disabled Actions - base-200 in dark is #27272a (the elevated tone), still
+     * the quietest fill, and the one the disabled label (base-500) reads on at 3.08:1.
+     * 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 — the same physical steps as light danger (600 / 700 / 800
+     * of --zabi-error-*) with the same label (step 50), so a destructive button
+     * is one red in both modes and shares the primary's veil. Physical, not
+     * through the mirror, which would be the pale 400 / 300 / 200. Restated
+     * because `zabi-components/theme-dark-only` has to stand alone as a complete
+     * import (validate-theme.js enforces that). The subtle tints are the thin mix below. */
+  --color-action-danger: var(--zabi-error-600);
+  --color-action-danger-hover: var(--zabi-error-700);
+  --color-action-danger-active: var(--zabi-error-800);
+  --color-action-danger-subtle: var(--color-error-subtle);
+  --color-action-danger-subtle-hover: color-mix(in srgb, var(--zabi-error-500) 20%, var(--color-surface-raised));
+  --color-action-danger-subtle-active: color-mix(in srgb, var(--zabi-error-500) 32%, var(--color-surface-raised));
+  --color-action-danger-text: var(--zabi-error-50);
+  /* Shadow Colors — black, not the light theme's ink tint. Much stronger than
+     * light (0.1 / 0.06): an overlay is the same tone as the elevated surface
+     * now, so a sheet (L 27.4) floats over a card (L 24.1) by its shadow and its
+     * edge, and the shadow has to carry it. */
+  --shadow-color: 0 0 0;
+  --shadow-opacity: 0.5;
+  --shadow-opacity-contact: 0.4;
+  --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 2px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-md: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 6px 14px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-lg: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-xl: 0 2px 4px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 20px 50px -8px rgb(var(--shadow-color) / var(--shadow-opacity));
+  --shadow-material: 0 1px 2px 0 rgb(var(--shadow-color) / var(--shadow-opacity-contact)), 0 10px 30px 0 rgb(var(--shadow-color) / var(--shadow-opacity));
+  /* Materials — the alphas and the backdrop brightness differ (see @theme).
+     * The fills are not restated: they follow the surface tokens above. The
+     * filters are restated, because they hold a var() that resolves where it is
+     * declared; the fallbacks below are one class more specific than this rule
+     * and set them to none, so they still win in dark. */
+  --material-backdrop-brightness: 0.6;
+  --material-alpha-thin: 60%;
+  --material-alpha-regular: 68%;
+  --material-alpha-thick: 72%;
+  --material-filter-thin: blur(var(--material-blur-thin)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+  --material-filter-regular: blur(var(--material-blur-regular)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+  --material-filter-thick: blur(var(--material-blur-thick)) saturate(var(--material-saturate)) brightness(var(--material-backdrop-brightness));
+  --color-material-highlight: color-mix(in srgb, var(--zabi-base-50) 14%, transparent);
+  --color-material-rim: color-mix(in srgb, var(--zabi-base-50) 14%, transparent);
+  /* Gradients: the wash is quieter in dark (see @theme). The stops follow. */
+  --gradient-canvas-strength: 25%;
+  --gradient-control-top-strength: 0%;
+  --gradient-control-bottom-strength: 14%;
+  /* The accent's own strengths, no longer the shared ones: in dark its fill is
+     * the light step with a dark label, which a darkening veil would fail, so it
+     * keeps the lighter top and slight dark bottom it had (22 / 6). */
+  --gradient-control-accent-top-strength: 22%;
+  --gradient-control-accent-bottom-strength: 6%;
+  --shadow-control-highlight: inset 0 1px 0 color-mix(in srgb, var(--zabi-base-50) 25%, transparent);
+  /* 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;
+  }
+}