zabi-components 8.1.0 → 9.0.0

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

@@ -122,49 +122,70 @@
 --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.
-   * 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). */
+   * 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: 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);
+--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. */
+   * 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 — pinned: light moved the page to base-150, dark stays on base-100 */
---color-page: 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-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-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);
@@ -176,28 +197,87 @@
 /* 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);
+   * 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);
---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. */
+/* 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);
---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);
+/* 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. */
---color-input-placeholder: var(--color-base-600);
+   * 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
@@ -206,6 +286,14 @@
    * 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.
@@ -223,25 +311,28 @@
 --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);
+/* 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: var(--color-iris-100);
---color-info-border: var(--color-iris-200);
+--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);
@@ -249,48 +340,112 @@
 /* ========================================
      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. */
+/* 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.
+/* 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 — 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 */
+/* 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.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));
+--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:
@@ -412,49 +567,70 @@ color-scheme: dark;
   --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.
-     * 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). */
+     * 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: 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);
+  --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. */
+     * 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 — pinned: light moved the page to base-150, dark stays on base-100 */
-  --color-page: 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-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-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);
@@ -466,28 +642,87 @@ color-scheme: dark;
   /* 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);
+     * 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);
-  --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. */
+  /* 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);
-  --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);
+  /* 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. */
-  --color-input-placeholder: var(--color-base-600);
+     * 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
@@ -496,6 +731,14 @@ color-scheme: dark;
      * 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.
@@ -513,25 +756,28 @@ color-scheme: dark;
   --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);
+  /* 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: var(--color-iris-100);
-  --color-info-border: var(--color-iris-200);
+  --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);
@@ -539,48 +785,112 @@ color-scheme: dark;
   /* ========================================
        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. */
+  /* 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.
+  /* 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 — 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 */
+  /* 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.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));
+  --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: