zabi-components 8.0.0 → 9.0.0

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

@@ -1,299 +1,496 @@
+@source "./**/*.{svelte,js}";
+
 @theme {
 /*
    * Custom base (gray) ramp — single physical scale for --color-base-*.
-   * 21 stops: 50 … 950 (lightest → darkest). Edit hex here; mirror the same block in .dark for standalone imports.
+   * 21 stops: 50 … 950 (lightest → darkest). Declared ONCE, here: .dark holds no raw palette,
+   * so an app that overrides --zabi-base-* on :root restyles both themes.
    * Dark: semantic step S maps to physical (1000 − S), e.g. 50↔950, 75↔925; 500 stays fixed.
    * Midpoints are frozen hex values (default mode: fixed).
    */
---zabi-base-50: #fafafa
---zabi-base-75: #f7f7f7
---zabi-base-100: #f4f4f5
---zabi-base-150: #ececee
---zabi-base-200: #e4e4e7
---zabi-base-250: #dcdcdf
---zabi-base-300: #d4d4d8
---zabi-base-350: #babac1
---zabi-base-400: #a1a1aa
---zabi-base-450: #898992
---zabi-base-500: #71717a
---zabi-base-550: #61616a
---zabi-base-600: #52525b
---zabi-base-650: #484850
---zabi-base-700: #3f3f46
---zabi-base-750: #333338
---zabi-base-800: #27272a
---zabi-base-850: #1f1f22
---zabi-base-900: #18181b
---zabi-base-925: #101013
---zabi-base-950: #09090b
-/* Typography - Nunito Sans font family */
---font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif
+--zabi-base-50: #fafafa;
+--zabi-base-75: #f7f7f7;
+--zabi-base-100: #f4f4f5;
+--zabi-base-150: #ececee;
+--zabi-base-200: #e4e4e7;
+--zabi-base-250: #dcdcdf;
+--zabi-base-300: #d4d4d8;
+--zabi-base-350: #babac1;
+--zabi-base-400: #a1a1aa;
+--zabi-base-450: #898992;
+--zabi-base-500: #71717a;
+--zabi-base-550: #61616a;
+--zabi-base-600: #52525b;
+--zabi-base-650: #484850;
+--zabi-base-700: #3f3f46;
+--zabi-base-750: #333338;
+--zabi-base-800: #27272a;
+--zabi-base-850: #1f1f22;
+--zabi-base-900: #18181b;
+--zabi-base-925: #101013;
+--zabi-base-950: #09090b;
+/* Typography - the platform UI face, no font is downloaded */
+--font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+/* Headings follow the body face until an app sets this to a display font
+   * on :root. Applied to h1–h6 in the base layer below and by the Heading
+   * component. */
+--font-family-heading: var(--font-family-sans);
+/* A second face for a display line (Heading variant="display", `font-display`):
+   * a hero, a score, a big number. Follows the heading face until an app sets
+   * it, so a second typeface is one token and not a CSS rule. */
+--font-family-display: var(--font-family-heading);
+/* Code. CodeBlock reads it. */
+--font-family-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+/* Tailwind's own names for the same three faces. Its `font-sans` and
+   * `font-mono` utilities read --font-sans and --font-mono, which were its
+   * system stacks: `class="font-sans"` on a heading left the brand face, and
+   * nothing said so. They follow the tokens above now, and `font-heading` is
+   * the utility for the heading face. An app sets --font-family-*; these
+   * follow. */
+--font-sans: var(--font-family-sans);
+--font-mono: var(--font-family-mono);
+--font-heading: var(--font-family-heading);
+--font-display: var(--font-family-display);
+/* Font weights. These are the variables Tailwind's `font-normal`,
+   * `font-medium`, `font-semibold` and `font-bold` read, so every component
+   * weight follows an override here. `regular` is the name a brand uses for
+   * 400; `font-normal` resolves through it. */
+--font-weight-regular: 400;
+--font-weight-normal: var(--font-weight-regular);
+--font-weight-medium: 500;
+--font-weight-semibold: 600;
+--font-weight-bold: 700;
 /* Brand Color Scale — physical ramp + semantic aliases (same mirror pattern as pine / base) */
---zabi-brand-50: #f4f6ff
---zabi-brand-100: #e9eeff
---zabi-brand-200: #d3dcff
---zabi-brand-300: #b5c6ff
---zabi-brand-400: #92a9ff
---zabi-brand-500: #6d87f1
---zabi-brand-600: #4f68da
---zabi-brand-700: #3c52ba
---zabi-brand-800: #2b3e95
---zabi-brand-900: #1c2c6d
---zabi-brand-950: #111d49
---color-brand-50: var(--zabi-brand-50)
---color-brand-100: var(--zabi-brand-100)
---color-brand-200: var(--zabi-brand-200)
---color-brand-300: var(--zabi-brand-300)
---color-brand-400: var(--zabi-brand-400)
---color-brand-500: var(--zabi-brand-500)
---color-brand-600: var(--zabi-brand-600)
---color-brand-700: var(--zabi-brand-700)
---color-brand-800: var(--zabi-brand-800)
---color-brand-900: var(--zabi-brand-900)
---color-brand-950: var(--zabi-brand-950)
+--zabi-brand-50: #f4f6ff;
+--zabi-brand-100: #e9eeff;
+--zabi-brand-200: #d3dcff;
+--zabi-brand-300: #b5c6ff;
+--zabi-brand-400: #92a9ff;
+--zabi-brand-500: #6d87f1;
+--zabi-brand-600: #4f68da;
+--zabi-brand-700: #3c52ba;
+--zabi-brand-800: #2b3e95;
+--zabi-brand-900: #1c2c6d;
+--zabi-brand-950: #111d49;
+--color-brand-50: var(--zabi-brand-50);
+--color-brand-100: var(--zabi-brand-100);
+--color-brand-200: var(--zabi-brand-200);
+--color-brand-300: var(--zabi-brand-300);
+--color-brand-400: var(--zabi-brand-400);
+--color-brand-500: var(--zabi-brand-500);
+--color-brand-600: var(--zabi-brand-600);
+--color-brand-700: var(--zabi-brand-700);
+--color-brand-800: var(--zabi-brand-800);
+--color-brand-900: var(--zabi-brand-900);
+--color-brand-950: var(--zabi-brand-950);
 /* Citron Color Scale — physical ramp + semantic aliases (same mirror pattern as pine / base) */
---zabi-citron-50: #f6f7ef
---zabi-citron-100: #edefdf
---zabi-citron-200: #dcdfbf
---zabi-citron-300: #c5ca95
---zabi-citron-400: #aab063
---zabi-citron-500: #8c9027
---zabi-citron-600: #707400
---zabi-citron-700: #5a5d00
---zabi-citron-800: #454700
---zabi-citron-900: #313200
---zabi-citron-950: #202100
---color-citron-50: var(--zabi-citron-50)
---color-citron-100: var(--zabi-citron-100)
---color-citron-200: var(--zabi-citron-200)
---color-citron-300: var(--zabi-citron-300)
---color-citron-400: var(--zabi-citron-400)
---color-citron-500: var(--zabi-citron-500)
---color-citron-600: var(--zabi-citron-600)
---color-citron-700: var(--zabi-citron-700)
---color-citron-800: var(--zabi-citron-800)
---color-citron-900: var(--zabi-citron-900)
---color-citron-950: var(--zabi-citron-950)
+--zabi-citron-50: #f4f8ee;
+--zabi-citron-100: #e9f0de;
+--zabi-citron-200: #d4e2bd;
+--zabi-citron-300: #b9ce92;
+--zabi-citron-400: #99b55e;
+--zabi-citron-500: #769619;
+--zabi-citron-600: #5d7900;
+--zabi-citron-700: #4a6100;
+--zabi-citron-800: #384a00;
+--zabi-citron-900: #273500;
+--zabi-citron-950: #192300;
+--color-citron-50: var(--zabi-citron-50);
+--color-citron-100: var(--zabi-citron-100);
+--color-citron-200: var(--zabi-citron-200);
+--color-citron-300: var(--zabi-citron-300);
+--color-citron-400: var(--zabi-citron-400);
+--color-citron-500: var(--zabi-citron-500);
+--color-citron-600: var(--zabi-citron-600);
+--color-citron-700: var(--zabi-citron-700);
+--color-citron-800: var(--zabi-citron-800);
+--color-citron-900: var(--zabi-citron-900);
+--color-citron-950: var(--zabi-citron-950);
+/* Accent Color Scale — the second brand colour (highlights, badges,
+   * celebrations). Defaults to the citron ramp; an app overrides
+   * --zabi-accent-50 … 950 on :root, once, and both themes follow. */
+--zabi-accent-50: var(--zabi-citron-50);
+--zabi-accent-100: var(--zabi-citron-100);
+--zabi-accent-200: var(--zabi-citron-200);
+--zabi-accent-300: var(--zabi-citron-300);
+--zabi-accent-400: var(--zabi-citron-400);
+--zabi-accent-500: var(--zabi-citron-500);
+--zabi-accent-600: var(--zabi-citron-600);
+--zabi-accent-700: var(--zabi-citron-700);
+--zabi-accent-800: var(--zabi-citron-800);
+--zabi-accent-900: var(--zabi-citron-900);
+--zabi-accent-950: var(--zabi-citron-950);
+--color-accent-50: var(--zabi-accent-50);
+--color-accent-100: var(--zabi-accent-100);
+--color-accent-200: var(--zabi-accent-200);
+--color-accent-300: var(--zabi-accent-300);
+--color-accent-400: var(--zabi-accent-400);
+--color-accent-500: var(--zabi-accent-500);
+--color-accent-600: var(--zabi-accent-600);
+--color-accent-700: var(--zabi-accent-700);
+--color-accent-800: var(--zabi-accent-800);
+--color-accent-900: var(--zabi-accent-900);
+--color-accent-950: var(--zabi-accent-950);
 /* Pine Color Scale — physical ramp + semantic aliases (mirror pattern matches --zabi-base-* / --color-base-*) */
---zabi-pine-50: #f0f8f5
---zabi-pine-100: #e2f1eb
---zabi-pine-200: #c5e4d7
---zabi-pine-300: #9fd1bd
---zabi-pine-400: #70ba9e
---zabi-pine-500: #399c7a
---zabi-pine-600: #00805e
---zabi-pine-700: #00674a
---zabi-pine-800: #004f37
---zabi-pine-900: #003826
---zabi-pine-950: #002518
---color-pine-50: var(--zabi-pine-50)
---color-pine-100: var(--zabi-pine-100)
---color-pine-200: var(--zabi-pine-200)
---color-pine-300: var(--zabi-pine-300)
---color-pine-400: var(--zabi-pine-400)
---color-pine-500: var(--zabi-pine-500)
---color-pine-600: var(--zabi-pine-600)
---color-pine-700: var(--zabi-pine-700)
---color-pine-800: var(--zabi-pine-800)
---color-pine-900: var(--zabi-pine-900)
---color-pine-950: var(--zabi-pine-950)
+--zabi-pine-50: #f0f9f3;
+--zabi-pine-100: #e1f2e8;
+--zabi-pine-200: #c3e5d0;
+--zabi-pine-300: #9cd3b2;
+--zabi-pine-400: #6cbb8e;
+--zabi-pine-500: #319e67;
+--zabi-pine-600: #00804b;
+--zabi-pine-700: #00683b;
+--zabi-pine-800: #00502b;
+--zabi-pine-900: #00391c;
+--zabi-pine-950: #002610;
+--color-pine-50: var(--zabi-pine-50);
+--color-pine-100: var(--zabi-pine-100);
+--color-pine-200: var(--zabi-pine-200);
+--color-pine-300: var(--zabi-pine-300);
+--color-pine-400: var(--zabi-pine-400);
+--color-pine-500: var(--zabi-pine-500);
+--color-pine-600: var(--zabi-pine-600);
+--color-pine-700: var(--zabi-pine-700);
+--color-pine-800: var(--zabi-pine-800);
+--color-pine-900: var(--zabi-pine-900);
+--color-pine-950: var(--zabi-pine-950);
 /* Iris Color Scale — physical ramp + semantic aliases (same mirror pattern as pine / base) */
---zabi-iris-50: #f6f6fd
---zabi-iris-100: #ecedfb
---zabi-iris-200: #dadbf6
---zabi-iris-300: #c1c4ef
---zabi-iris-400: #a5a7e2
---zabi-iris-500: #8486cd
---zabi-iris-600: #6969b4
---zabi-iris-700: #535397
---zabi-iris-800: #3f3f78
---zabi-iris-900: #2c2c58
---zabi-iris-950: #1d1d3a
---color-iris-50: var(--zabi-iris-50)
---color-iris-100: var(--zabi-iris-100)
---color-iris-200: var(--zabi-iris-200)
---color-iris-300: var(--zabi-iris-300)
---color-iris-400: var(--zabi-iris-400)
---color-iris-500: var(--zabi-iris-500)
---color-iris-600: var(--zabi-iris-600)
---color-iris-700: var(--zabi-iris-700)
---color-iris-800: var(--zabi-iris-800)
---color-iris-900: var(--zabi-iris-900)
---color-iris-950: var(--zabi-iris-950)
+--zabi-iris-50: #f6f6fd;
+--zabi-iris-100: #ecedfb;
+--zabi-iris-200: #dadbf6;
+--zabi-iris-300: #c1c4ef;
+--zabi-iris-400: #a5a7e2;
+--zabi-iris-500: #8486cd;
+--zabi-iris-600: #6969b4;
+--zabi-iris-700: #535397;
+--zabi-iris-800: #3f3f78;
+--zabi-iris-900: #2c2c58;
+--zabi-iris-950: #1d1d3a;
+--color-iris-50: var(--zabi-iris-50);
+--color-iris-100: var(--zabi-iris-100);
+--color-iris-200: var(--zabi-iris-200);
+--color-iris-300: var(--zabi-iris-300);
+--color-iris-400: var(--zabi-iris-400);
+--color-iris-500: var(--zabi-iris-500);
+--color-iris-600: var(--zabi-iris-600);
+--color-iris-700: var(--zabi-iris-700);
+--color-iris-800: var(--zabi-iris-800);
+--color-iris-900: var(--zabi-iris-900);
+--color-iris-950: var(--zabi-iris-950);
 /* Warning Color Scale — physical ramp + semantic aliases (Tailwind amber) */
---zabi-warning-50: #fbf6ed
---zabi-warning-100: #f7ecda
---zabi-warning-200: #f1d9b6
---zabi-warning-300: #e8bf87
---zabi-warning-400: #db9e4c
---zabi-warning-500: #c17b00
---zabi-warning-600: #9e6000
---zabi-warning-700: #824c00
---zabi-warning-800: #663800
---zabi-warning-900: #4b2600
---zabi-warning-950: #341800
---color-warning-50: var(--zabi-warning-50)
---color-warning-100: var(--zabi-warning-100)
---color-warning-200: var(--zabi-warning-200)
---color-warning-300: var(--zabi-warning-300)
---color-warning-400: var(--zabi-warning-400)
---color-warning-500: var(--zabi-warning-500)
---color-warning-600: var(--zabi-warning-600)
---color-warning-700: var(--zabi-warning-700)
---color-warning-800: var(--zabi-warning-800)
---color-warning-900: var(--zabi-warning-900)
---color-warning-950: var(--zabi-warning-950)
+--zabi-warning-50: #fdf5ec;
+--zabi-warning-100: #fbebda;
+--zabi-warning-200: #f6d7b4;
+--zabi-warning-300: #efbc84;
+--zabi-warning-400: #e49a44;
+--zabi-warning-500: #c67800;
+--zabi-warning-600: #a05f00;
+--zabi-warning-700: #834b00;
+--zabi-warning-800: #663800;
+--zabi-warning-900: #4b2700;
+--zabi-warning-950: #331800;
+--color-warning-50: var(--zabi-warning-50);
+--color-warning-100: var(--zabi-warning-100);
+--color-warning-200: var(--zabi-warning-200);
+--color-warning-300: var(--zabi-warning-300);
+--color-warning-400: var(--zabi-warning-400);
+--color-warning-500: var(--zabi-warning-500);
+--color-warning-600: var(--zabi-warning-600);
+--color-warning-700: var(--zabi-warning-700);
+--color-warning-800: var(--zabi-warning-800);
+--color-warning-900: var(--zabi-warning-900);
+--color-warning-950: var(--zabi-warning-950);
 /* Error Color Scale — physical ramp + semantic aliases (Tailwind red) */
---zabi-error-50: #fff4f3
---zabi-error-100: #ffe9e6
---zabi-error-200: #ffd2cd
---zabi-error-300: #ffb2ab
---zabi-error-400: #ff877d
---zabi-error-500: #ed564e
---zabi-error-600: #d22828
---zabi-error-700: #b20912
---zabi-error-800: #8c0006
---zabi-error-900: #660002
---zabi-error-950: #460202
---color-error-50: var(--zabi-error-50)
---color-error-100: var(--zabi-error-100)
---color-error-200: var(--zabi-error-200)
---color-error-300: var(--zabi-error-300)
---color-error-400: var(--zabi-error-400)
---color-error-500: var(--zabi-error-500)
---color-error-600: var(--zabi-error-600)
---color-error-700: var(--zabi-error-700)
---color-error-800: var(--zabi-error-800)
---color-error-900: var(--zabi-error-900)
---color-error-950: var(--zabi-error-950)
+--zabi-error-50: #fff4f3;
+--zabi-error-100: #ffe9e6;
+--zabi-error-200: #ffd2cd;
+--zabi-error-300: #ffb2ab;
+--zabi-error-400: #ff877d;
+--zabi-error-500: #ed564e;
+--zabi-error-600: #d22828;
+--zabi-error-700: #b20912;
+--zabi-error-800: #8c0006;
+--zabi-error-900: #660002;
+--zabi-error-950: #460202;
+--color-error-50: var(--zabi-error-50);
+--color-error-100: var(--zabi-error-100);
+--color-error-200: var(--zabi-error-200);
+--color-error-300: var(--zabi-error-300);
+--color-error-400: var(--zabi-error-400);
+--color-error-500: var(--zabi-error-500);
+--color-error-600: var(--zabi-error-600);
+--color-error-700: var(--zabi-error-700);
+--color-error-800: var(--zabi-error-800);
+--color-error-900: var(--zabi-error-900);
+--color-error-950: var(--zabi-error-950);
 /* Base Color Scale — semantic tokens alias the physical ramp (light: 1:1) */
---color-base-50: var(--zabi-base-50)
---color-base-75: var(--zabi-base-75)
---color-base-100: var(--zabi-base-100)
---color-base-150: var(--zabi-base-150)
---color-base-200: var(--zabi-base-200)
---color-base-250: var(--zabi-base-250)
---color-base-300: var(--zabi-base-300)
---color-base-350: var(--zabi-base-350)
---color-base-400: var(--zabi-base-400)
---color-base-450: var(--zabi-base-450)
---color-base-500: var(--zabi-base-500)
---color-base-550: var(--zabi-base-550)
---color-base-600: var(--zabi-base-600)
---color-base-650: var(--zabi-base-650)
---color-base-700: var(--zabi-base-700)
---color-base-750: var(--zabi-base-750)
---color-base-800: var(--zabi-base-800)
---color-base-850: var(--zabi-base-850)
---color-base-900: var(--zabi-base-900)
---color-base-925: var(--zabi-base-925)
---color-base-950: var(--zabi-base-950)
+--color-base-50: var(--zabi-base-50);
+--color-base-75: var(--zabi-base-75);
+--color-base-100: var(--zabi-base-100);
+--color-base-150: var(--zabi-base-150);
+--color-base-200: var(--zabi-base-200);
+--color-base-250: var(--zabi-base-250);
+--color-base-300: var(--zabi-base-300);
+--color-base-350: var(--zabi-base-350);
+--color-base-400: var(--zabi-base-400);
+--color-base-450: var(--zabi-base-450);
+--color-base-500: var(--zabi-base-500);
+--color-base-550: var(--zabi-base-550);
+--color-base-600: var(--zabi-base-600);
+--color-base-650: var(--zabi-base-650);
+--color-base-700: var(--zabi-base-700);
+--color-base-750: var(--zabi-base-750);
+--color-base-800: var(--zabi-base-800);
+--color-base-850: var(--zabi-base-850);
+--color-base-900: var(--zabi-base-900);
+--color-base-925: var(--zabi-base-925);
+--color-base-950: var(--zabi-base-950);
 /* Background Colors */
 /* Surface elevation — four semantic levels, lowest → highest.
    * base: page/app shell · raised: cards, panels, sidebars · elevated: nested cards, hover/active fills
    * overlay: modals, sheets, menus, popovers, toasts. Light mode keeps white surfaces + shadows;
    * dark mode (see .dark) steps each level up in OKLCH lightness because shadows don't read on dark.
+   *
+   * Light cannot go lighter than white, so the page is a near-white (base-50)
+   * and the card, white, is told apart from it by its 1px --color-border edge,
+   * not by lightness or a shadow. Nested surfaces step down from the card:
+   * elevated and inset (base-100). Enforced by scripts/check-surface-elevation.js:
+   * raised and overlay no darker than the page, elevated and inset at least 2
+   * points below raised, and the card edge at least 1.2:1 on the page and the card.
+   * (Until 8.1 the page was base-150 and the card carried a shadow.)
    * Keep this block BELOW the "Background Colors" marker: scripts/sync-theme-tokens.js regenerates
    * everything between the base-scale aliases and that marker. */
---color-surface-base: var(--color-base-100)
---color-surface-raised: #ffffff
---color-surface-elevated: var(--color-base-50)
---color-surface-overlay: #ffffff
+--color-surface-base: var(--color-base-50);
+--color-surface-raised: #ffffff;
+--color-surface-elevated: var(--color-base-100);
+--color-surface-overlay: #ffffff;
+/* Chrome — the surface of bars and sidebars (AppBar, TopNavbar, BottomTabBar,
+   * the sidebars). One token so a theme can retint all of them at once. Equal to
+   * the page colour in both themes (D108): a bar is flush with the page at
+   * rest and takes the material over it once content scrolls under it. Point it
+   * at --color-surface-raised for a raised bar fill. */
+--color-surface-chrome: var(--color-surface-base);
+/* Bars (D124), read by .material-bar. The fill at rest, the hairline shown
+   * once content is under the bar (decorative, not a guarded edge: the same
+   * idea as the material rim), the fill of an on-brand AppBar, and the active
+   * tab's pill in the BottomTabBar. */
+--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);
+/* Inset — a recessed area ON a raised surface (a well, a code sample, a stat
+   * strip inside a card). It is the ramp step between the page and the raised
+   * surface in both themes, so it always reads as cut into the card, never as
+   * floating above it. In dark this is the step the input field already used;
+   * --color-input points here. In light it shares base-100 with `elevated`,
+   * because below a white card the only direction left is down. */
+--color-surface-inset: var(--color-base-100);
 /* Hover/active fill for rows and icon buttons inside an overlay (must read above the overlay) */
---color-surface-overlay-hover: var(--color-base-100)
-/* 1px edge for overlays: invisible in light (shadow carries elevation), visible in dark */
---color-border-overlay: transparent
---color-background: var(--color-surface-base)
---color-background-secondary: var(--color-base-50)
---color-background-tertiary: var(--color-base-100)
+--color-surface-overlay-hover: var(--color-base-150);
+/* 1px edge for overlays. An ink tint in light, so a white menu on a white
+   * card still has an outline where its shadow is thinnest; a solid step in dark. */
+--color-border-overlay: rgba(9, 9, 11, 0.1);
+--color-background: var(--color-surface-base);
+--color-background-secondary: var(--color-base-100);
+/* was base-50, which is now the page itself */
+--color-background-tertiary: var(--color-base-150);
 /* Page Colors */
---color-page: var(--color-base-100)
---color-page-secondary: var(--color-base-200)
+--color-page: var(--color-surface-base);
+--color-page-secondary: var(--color-base-200);
 /* Card Colors — aliases of the surface levels (kept for compatibility) */
---color-card: var(--color-surface-raised)
---color-card-hover: var(--color-base-100)
---color-card-active: var(--color-base-100)
---color-card-elevated: var(--color-surface-overlay)
+--color-card: var(--color-surface-raised);
+/* Hover must not read as the page: the page is base-50 now, so base-100 was
+   * only ΔE 2.1 from it (the guard wants 2.5). Hover is base-150 (1.18:1 on the
+   * white card, ΔE 4.6 from the page), active one step further. */
+--color-card-hover: var(--color-base-150);
+--color-card-active: var(--color-base-200);
+--color-card-elevated: var(--color-surface-overlay);
+/* Card tint — the brand tint as a surface for content (Card tone="tint"): the
+   * subtle fill's own step (brand-100), as its own token so an app can move one
+   * and not the other. Headline, body, label, description, caption and link
+   * hold 4.5:1 on it, and the ring, the field edge and the outline Button's
+   * edge 3:1 (a form can sit on it): 15.30, 12.87, 9.02, 6.68, 5.29 and 5.84:1;
+   * ring 4.19, field edge 4.17. */
+--color-card-tint: var(--color-brand-100);
+/* Card variant="flat": today's flat fill (the card), opaque. Dark restates it as a translucent step. */
+--color-card-flat: var(--color-card);
+--color-card-flat-hover: var(--color-card-hover);
+--color-card-flat-active: var(--color-card-active);
 /* Surfaces — numbered aliases (kept for compatibility; prefer surface-base/raised/elevated/overlay) */
---color-surface-1: var(--color-surface-raised)
---color-surface-2: var(--color-surface-elevated)
---color-surface-3: var(--color-base-75)
---color-surface-4: var(--color-base-100)
+--color-surface-1: var(--color-surface-raised);
+--color-surface-2: var(--color-surface-elevated);
+--color-surface-3: var(--color-base-75);
+--color-surface-4: var(--color-base-100);
 /* Control track — the unselected rail of a Toggle or switch. A real token
    * rather than a raw ramp step, so the hover/active direction is defined once
    * and inverts correctly with the theme. */
---color-control-track: var(--color-base-400)
---color-control-track-hover: var(--color-base-450)
---color-control-track-active: var(--color-base-500)
+--color-control-track: var(--color-base-400);
+--color-control-track-hover: var(--color-base-450);
+--color-control-track-active: var(--color-base-500);
+/* Toggle track — the off switch. The shared control track above is a mid
+   * grey (base-400) that reads as disabled, so the switch has its own: a light
+   * tint, with its edge doing the 3:1 work (WCAG 1.4.11), which a fill this
+   * light cannot. The edge is the field edge, 4.63:1 on the page and 4.83:1 on
+   * a card. Slider and Progress keep the shared track. */
+--color-toggle-track: var(--color-base-200);
+--color-toggle-track-hover: var(--color-base-250);
+--color-toggle-track-active: var(--color-base-300);
+--color-toggle-track-border: var(--color-input-border);
+/* Toggle knob, by default 3:1 or more on every track fill it sits on (WCAG
+   * 1.4.11). Off, a dark knob on the light track: base-500 is 3.81:1 on the
+   * resting track, 3.53:1 hovered and 3.27:1 pressed. On, the label colour of
+   * the primary fill: 4.86:1 at rest, 6.76:1 hovered and 9.44:1 pressed. The consumer's
+   * own `--color-toggle-thumb` and `--color-toggle-thumb-checked` (declared
+   * nowhere) come first; see `.bg-toggle-thumb`. */
+--color-toggle-knob: var(--color-base-500);
+--color-toggle-knob-checked: var(--color-action-primary-text);
+/* Progress — the bar of Progress. The fill is the primary action, so it
+   * follows a pinned primary; the track is the field fill it always was. */
+--color-progress-fill: var(--color-action-primary);
+--color-progress-track: var(--color-input);
+/* The edge of the track. The default track is the field fill (white on the
+   * white card), 1.00:1 on the card and 1.04:1 on the page, so its edge is the
+   * field edge, 3:1 on both (the guard holds it). An app whose own track
+   * already reaches 3:1 sets this to `transparent`; createTheme does that when
+   * it overrides the track. */
+--color-progress-track-border: var(--color-input-border);
 /* Interaction fills — surface-relative on purpose.
    * A hard-coded ramp step (e.g. base-100) can coincide exactly with the
    * surface it sits on, which is how ghost hover became invisible: in dark
    * mode --color-base-100 IS --color-surface-base. An alpha tint is always
    * one step away from whatever is underneath it. */
---color-surface-hover: rgba(9, 9, 11, 0.06)
---color-surface-active: rgba(9, 9, 11, 0.11)
+--color-surface-hover: rgba(9, 9, 11, 0.09);
+--color-surface-active: rgba(9, 9, 11, 0.15);
 /* Overlay Colors */
---color-overlay: rgba(0, 0, 0, 0.5)
+--color-overlay: rgba(0, 0, 0, 0.5);
 /* Input Colors
    * The field is a RAISED surface, not a grey well — a grey fill on a grey
    * page reads as disabled. The disabled state is the only grey field. */
---color-input: var(--color-surface-raised)
---color-input-border: var(--color-base-350)
---color-input-hover: var(--color-base-150)
---color-input-focus: var(--color-surface-raised)
---color-input-disabled: var(--color-base-100)
+--color-input: var(--color-surface-raised);
+/* The edge of a form field (WCAG 1.4.11): 3:1 on the field fill, the page and
+   * the card, held by the contrast guard. base-500 is 4.83:1 on white and
+   * 4.10:1 on the page; base-450 was 2.94:1 on the page, base-350 1.93:1. */
+--color-input-border: var(--color-base-500);
+/* Hover edge for a field. Light-mode hover is meant to be carried by the
+   * border, not by greying the fill; dark keeps its fill step and leaves this
+   * equal to the resting border. One step past the resting edge. */
+--color-input-border-hover: var(--color-base-550);
+/* One step off white, and the same step the card hover uses. */
+--color-input-hover: var(--color-base-100);
+/* Pressed, for a field that is pressed rather than typed in: the Select
+   * trigger. It borrowed the hover step, 1.10:1 against the resting field,
+   * when every other pressed fill is 1.26:1 or more. Derived from the field,
+   * not a fixed ramp step: an app that sets the card (and so the field) to
+   * another colour through createTheme overrides would otherwise land its
+   * field on top of a fixed step (base-200 was 1.21:1 against a base-50 field
+   * of #f8faff, below the 1.25 the generator holds). 12% of the ink into the
+   * field is the smallest whole percent that keeps the three pairs: 1.25:1
+   * against the field (11% is the floor), body and placeholder 4.5:1 on it.
+   * Default theme: #e3e3e4 (was #e4e4e7); on a #f8faff field with the
+   * ink at 12%: 1.28:1 against it. */
+--color-input-active: color-mix(in srgb, var(--zabi-base-900) 12%, var(--color-input));
+--color-input-focus: var(--color-surface-raised);
+/* The only grey field. It was the page colour; the page is now near white
+   * (1.04:1 against the white field), so it takes base-150, 1.18:1 on the field
+   * as before. Dark still uses the dark page (base-100). */
+--color-input-disabled: var(--color-base-150);
+/* Light fields are opaque already: inside a colour block they stay as they are. The dark
+   * theme restates these as opaque steps (see there). */
+--color-input-solid: var(--color-input);
+--color-input-solid-hover: var(--color-input-hover);
+--color-input-solid-focus: var(--color-input-focus);
+--color-input-solid-active: var(--color-input-active);
 /* Text Colors */
---color-headline: var(--color-base-900)
---color-body: var(--color-base-800)
---color-description: var(--color-base-600)
---color-caption: var(--color-base-550)
+--color-headline: var(--color-base-900);
+--color-body: var(--color-base-800);
+--color-description: var(--color-base-600);
+--color-caption: var(--color-base-550);
 /* ≥ 4.5:1 on every surface level (base-500 was 4.40 on surface-base) */
---color-input-placeholder: var(--color-base-500)
---color-label: var(--color-base-700)
+/* Placeholder text, and the format hint of an empty DateField or TimeField.
+   * It is text someone has to read, so it is held to 4.5:1 on every fill a
+   * field can show: resting, hover, focus and pressed. base-500 was 4.83:1 on
+   * the white field but 4.40:1 on the hover fill and 3.81:1 on the pressed
+   * one; base-550 is 6.13, 5.58 and 4.83. The value text (--color-body) stays
+   * 2.4:1 stronger, so an empty field still reads as empty. */
+--color-input-placeholder: var(--color-base-550);
+--color-label: var(--color-base-700);
 /* brand-600 clears 4.5:1 on a card but only 4.42:1 on the page surface, so
    * links sit one step darker. */
---color-link: var(--color-brand-700)
---color-link-hover: var(--color-brand-800)
+--color-link: var(--color-brand-700);
+--color-link-hover: var(--color-brand-800);
 /* Navigation menu item — menubar triggers, menu links, inline/sidebar nav rows */
---color-nav-menu-item: var(--color-body)
---color-nav-menu-item-hover: var(--color-headline)
---color-nav-menu-item-active: var(--color-link)
+--color-nav-menu-item: var(--color-body);
+--color-nav-menu-item-hover: var(--color-headline);
+--color-nav-menu-item-active: var(--color-link);
 /* Surface-relative on purpose: base-100 IS surface-base in both themes,
    * so the old value made sidebar row hover do nothing at all. */
---color-nav-menu-hover: var(--color-surface-hover)
---color-nav-menu-active: var(--color-action-primary-subtle)
---color-nav-menu-active-hover: var(--color-action-primary-subtle-hover)
---color-nav-menu-focus: var(--color-brand-500)
---color-success-text: var(--color-pine-700)
---color-warning-text: var(--color-warning-700)
---color-neutral-text: var(--color-base-700)
---color-energetic-text: var(--color-citron-700)
---color-error-text: var(--color-error-700)
---color-inverse: var(--color-base-100)
---color-disabled: var(--color-base-400)
+--color-nav-menu-hover: var(--color-surface-hover);
+--color-nav-menu-active: var(--color-action-primary-subtle);
+--color-nav-menu-active-hover: var(--color-action-primary-subtle-hover);
+--color-nav-menu-focus: var(--color-focus);
+--color-success-text: var(--color-pine-700);
+--color-warning-text: var(--color-warning-700);
+--color-neutral-text: var(--color-base-700);
+--color-energetic-text: var(--color-citron-700);
+--color-error-text: var(--color-error-700);
+--color-inverse: var(--color-base-100);
+--color-disabled: var(--color-base-400);
 /* Border Colors */
---color-border: var(--color-base-300)
---color-border-weak: var(--color-base-300)
---color-border-medium: var(--color-base-400)
---color-border-strong: var(--color-base-500)
-/* Focus Colors */
---color-focus: var(--color-brand-500)
---color-focus-weak: var(--color-brand-600)
---color-focus-medium: var(--color-brand-700)
---color-focus-strong: var(--color-brand-800)
+--color-border: var(--color-base-300);
+--color-border-weak: var(--color-base-300);
+--color-border-medium: var(--color-base-400);
+--color-border-strong: var(--color-base-500);
+/* Control boundary — the edge of a control that has nothing else to be seen
+   * by, such as the outline of an empty Rating star (its first user).
+   * WCAG 1.4.11 asks 3:1 for it against whatever it sits on, so it is held to
+   * 3:1 on every surface level in both themes (scripts/check-contrast.js).
+   * The decorative edges above are not: --color-border-strong is the mirror's
+   * fixed point, the same grey in both themes, and is 2.49:1 on the dark
+   * elevated surface and 1.98:1 on the dark overlay. .dark pins this one step
+   * lighter for that reason. */
+--color-control-border: var(--color-base-500);
+/* Segmented control thumb (tone neutral): the selected segment, a card-coloured
+   * piece on the tinted track. The edge is what identifies it (WCAG 1.4.11), as
+   * the 1.1:1 fill step alone would not. It is the control boundary, which dark
+   * lifts a step (base-600) because the input edge is only 2.4:1 on this track; it is held to 3:1 against the track
+   * over the page and over a card (scripts/contrast-pairs.js). */
+--color-segment-thumb: var(--color-surface-raised);
+--color-segment-thumb-text: var(--color-headline);
+--color-segment-thumb-border: var(--color-control-border);
+/* Focus Colors
+   * brand-600, not brand-500: a focus indicator needs 3:1 against what is
+   * around it, and brand-500 was 2.99:1 on the page. brand-600 is also the
+   * primary button fill, so on a primary button the ring is separated by its
+   * 2px offset gap (--color-focus-ring-offset), which .focus-ring always draws.
+   * .dark restates the same steps; the mirror makes them --zabi-brand-400 and up. */
+--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);
 /* Aliases for `ring-focus-ring`, `.focus-ring`, and form utils */
---color-focus-ring: var(--color-focus)
---color-focus-ring-offset: var(--color-card)
+--color-focus-ring: var(--color-focus);
+--color-focus-ring-offset: var(--color-card);
+/* `.focus-ring--muted`: the neutral ring of a ghost or link control, quiet
+   * by having no hue, not by having less contrast. The rule used to read
+   * --color-base-500 directly, which does not move between themes: 4.1:1 or
+   * more in light, 2.49:1 on the dark elevated surface. .dark pins it one step
+   * lighter; it is held to 3:1 on every surface level in both themes. */
+--color-focus-ring-muted: var(--color-base-500);
+/* `.focus-ring--danger`: the ring of a destructive control. It is the error
+   * colour; a role of its own so that a brand or accent block can re-point
+   * it with the other rings (the error colour is about 1:1 on a brand fill,
+   * and a focused danger Button there showed no ring). */
+--color-focus-ring-danger: var(--color-error);
 /* Primary Colors */
---color-primary: var(--color-brand-600)
---color-primary-weak: var(--color-brand-700)
---color-primary-medium: var(--color-brand-800)
---color-primary-strong: var(--color-brand-900)
+--color-primary: var(--color-brand-600);
+--color-primary-weak: var(--color-brand-700);
+--color-primary-medium: var(--color-brand-800);
+--color-primary-strong: var(--color-brand-900);
 /* Secondary Colors */
---color-secondary: var(--color-base-600)
---color-secondary-weak: var(--color-base-700)
---color-secondary-medium: var(--color-base-800)
---color-secondary-strong: var(--color-base-900)
+--color-secondary: var(--color-base-600);
+--color-secondary-weak: var(--color-base-700);
+--color-secondary-medium: var(--color-base-800);
+--color-secondary-strong: var(--color-base-900);
 /* ----------------------------------------------------------------
    * SEMANTIC FAMILIES
    * Every family resolves to the SAME step on the shared lightness curve, so
@@ -304,8 +501,8 @@
    *   <family>-weak     step 700  pressed / emphasis
    *   <family>-medium   step 800  strongest fill
    *   <family>-strong   step 900  darkest
-   *   <family>-subtle   step 100  tinted fill (badges, alerts)
-   *   <family>-border   step 200  tinted edge
+   *   <family>-subtle   step 100  tinted fill (badges, alerts); .dark restates step 100
+   *   <family>-border   step 200  tinted edge; .dark restates step 200
    *   <family>-text     step 700  text on a subtle fill or a page surface
    *
    * Warning, error and energetic previously sat at step 500 — the mirror's
@@ -314,57 +511,74 @@
    * and fine in dark.
    * ---------------------------------------------------------------- */
 /* Success Colors */
---color-success: var(--color-pine-600)
---color-success-weak: var(--color-pine-700)
---color-success-medium: var(--color-pine-800)
---color-success-strong: var(--color-pine-900)
---color-success-subtle: var(--color-pine-100)
---color-success-border: var(--color-pine-200)
+--color-success: var(--color-pine-600);
+--color-success-weak: var(--color-pine-700);
+--color-success-medium: var(--color-pine-800);
+--color-success-strong: var(--color-pine-900);
+--color-success-subtle: var(--color-pine-100);
+--color-success-border: var(--color-pine-200);
 /* Warning Colors */
---color-warning: var(--color-warning-600)
---color-warning-weak: var(--color-warning-700)
---color-warning-medium: var(--color-warning-800)
---color-warning-strong: var(--color-warning-900)
---color-warning-subtle: var(--color-warning-100)
---color-warning-border: var(--color-warning-200)
+--color-warning: var(--color-warning-600);
+--color-warning-weak: var(--color-warning-700);
+--color-warning-medium: var(--color-warning-800);
+--color-warning-strong: var(--color-warning-900);
+--color-warning-subtle: var(--color-warning-100);
+--color-warning-border: var(--color-warning-200);
 /* Error Colors */
---color-error: var(--color-error-600)
---color-error-weak: var(--color-error-700)
---color-error-medium: var(--color-error-800)
---color-error-strong: var(--color-error-900)
---color-error-subtle: var(--color-error-100)
---color-error-border: var(--color-error-200)
+--color-error: var(--color-error-600);
+--color-error-weak: var(--color-error-700);
+--color-error-medium: var(--color-error-800);
+--color-error-strong: var(--color-error-900);
+--color-error-subtle: var(--color-error-100);
+--color-error-border: var(--color-error-200);
 /* Energetic Colors (Citron) */
---color-energetic: var(--color-citron-600)
---color-energetic-weak: var(--color-citron-700)
---color-energetic-medium: var(--color-citron-800)
---color-energetic-strong: var(--color-citron-900)
---color-energetic-subtle: var(--color-citron-100)
---color-energetic-border: var(--color-citron-200)
+--color-energetic: var(--color-citron-600);
+--color-energetic-weak: var(--color-citron-700);
+--color-energetic-medium: var(--color-citron-800);
+--color-energetic-strong: var(--color-citron-900);
+--color-energetic-subtle: var(--color-citron-100);
+--color-energetic-border: var(--color-citron-200);
+/* Accent Colors — the second brand colour, on --zabi-accent-* (citron by
+   * default). The same recipe as the primary action: fill at 600, hover 700,
+   * active 800, so "more pressed" is "more contrast" in both themes; tint,
+   * edge and text as in the families above. `energetic` keeps pointing at
+   * citron itself and does not move when an app re-colours the accent. */
+--color-accent: var(--color-accent-600);
+--color-accent-hover: var(--color-accent-700);
+--color-accent-active: var(--color-accent-800);
+--color-accent-subtle: var(--color-accent-100);
+--color-accent-border: var(--color-accent-200);
+--color-accent-text: var(--color-accent-700);
+/* Label on a solid accent fill — see "on brand" below for the two knobs. */
+--zabi-on-accent: #ffffff;
+--zabi-on-accent-dark: var(--zabi-accent-950);
+--color-on-accent: var(--zabi-on-accent);
 /* Neutral Colors
    * The base ramp is wider than the chromatic ones on purpose (it also drives
    * text, borders and surfaces), so neutral cannot sit on exactly the same
    * step. base-550 is the closest match to the chromatic 600s that still
    * clears AA; .dark pins base-600, because base-500 is the mirror's fixed
    * point and would not invert at all. */
---color-neutral: var(--color-base-550)
---color-neutral-weak: var(--color-base-600)
---color-neutral-medium: var(--color-base-700)
---color-neutral-strong: var(--color-base-900)
-/* base-200, not base-100: base-100 IS surface-base, which made a neutral
-   * badge measure 1.00:1 against the page and read as bare text. */
---color-neutral-subtle: var(--color-base-200)
---color-neutral-border: var(--color-base-200)
+--color-neutral: var(--color-base-550);
+--color-neutral-weak: var(--color-base-600);
+--color-neutral-medium: var(--color-base-700);
+--color-neutral-strong: var(--color-base-900);
+/* Visibly past the page (base-50, 1.20:1) and the card (1.27:1). It was
+   * base-100 once, which IS the dark page and made a neutral badge measure
+   * 1.00:1 and read as bare text; base-150 is only 1.13:1 on the page. The
+   * border is a step darker than the fill, like every other family. */
+--color-neutral-subtle: var(--color-base-200);
+--color-neutral-border: var(--color-base-250);
 /* Info Colors */
---color-info: var(--color-iris-600)
---color-info-weak: var(--color-iris-700)
---color-info-medium: var(--color-iris-800)
---color-info-strong: var(--color-iris-900)
---color-info-active: var(--color-iris-400)
---color-info-subtle: var(--color-iris-100)
---color-info-border: var(--color-iris-200)
+--color-info: var(--color-iris-600);
+--color-info-weak: var(--color-iris-700);
+--color-info-medium: var(--color-iris-800);
+--color-info-strong: var(--color-iris-900);
+--color-info-active: var(--color-iris-400);
+--color-info-subtle: var(--color-iris-100);
+--color-info-border: var(--color-iris-200);
 /* Text alias */
---color-info-text: var(--color-iris-700)
+--color-info-text: var(--color-iris-700);
 /* ========================================
      ACTION COLORS - For interactive elements (buttons, links, etc.)
      ======================================== */
@@ -377,56 +591,234 @@
    * contrast against the page" in both themes. Never point active at a step on
    * the far side of the ramp: active used to be brand-400 against a brand-50
    * label, which is 1.66:1 — the label vanished while the button was held. */
---color-action-primary: var(--color-brand-600)
---color-action-primary-hover: var(--color-brand-700)
---color-action-primary-active: var(--color-brand-800)
---color-action-primary-subtle: var(--color-brand-100)
---color-action-primary-subtle-hover: var(--color-brand-200)
-/* Pinned rather than aliased to brand-50: the ramp's lightest tint lands at
-   * exactly 4.50:1 on brand-600 — passing, but with no margin. Pure white
-   * gives 4.86:1. The .dark block pins the inverse. */
---color-action-primary-text: #ffffff
+--color-action-primary: var(--color-brand-600);
+--color-action-primary-hover: var(--color-brand-700);
+--color-action-primary-active: var(--color-brand-800);
+--color-action-primary-subtle: var(--color-brand-100);
+--color-action-primary-subtle-hover: var(--color-brand-200);
+/* Edge of a subtle brand badge when `bordered`; the tint's own darker step. */
+--color-action-primary-border: var(--color-brand-200);
+/* Held down, on a control whose resting fill is the subtle one: a toggled-on
+   * ghost IconButton. It used the hover step, which is 1.24:1 against the
+   * resting fill and, with a mouse, is what the button already shows. Half a
+   * step past hover is 1.42:1 against resting, and the icon (--color-link)
+   * keeps 3.50:1 on it; a whole step would leave the icon at 3.01:1. */
+--color-action-primary-subtle-active: color-mix(in srgb, var(--color-brand-300) 50%, var(--color-brand-200));
+/* "On brand" — the label on a primary fill.
+   * White rather than brand-50: the ramp's lightest tint lands at exactly
+   * 4.50:1 on brand-600 — passing, but with no margin. Pure white gives 4.86:1.
+   * Dark has the same fill (step 600, physical) and the same label: white on
+   * it is 4.76:1 on any ramp, since every ramp is on one lightness curve.
+   *
+   * A light brand (amber, yellow) cannot carry white text, so both values are
+   * knobs an app sets once on :root, like the ramps:
+   *   --zabi-on-brand        label in light mode
+   *   --zabi-on-brand-dark   label in dark mode: follows the light label (white),
+   *                          since the dark fill is the same step; set it to a dark
+   *                          one for a pale dark primary
+   * --color-on-brand is the role, remapped by .dark; components keep using
+   * --color-action-primary-text, which follows it. */
+--zabi-on-brand: #ffffff;
+--zabi-on-brand-dark: var(--zabi-on-brand);
+--color-on-brand: var(--zabi-on-brand);
+--color-action-primary-text: var(--color-on-brand);
 /* Secondary Actions - Used by bg-action-secondary utility class
    * A neutral alpha tint: reads as a real button on any surface level, and
    * cannot collide with the background the way a fixed ramp step can. The old
    * 10%-brand wash was so pale it barely registered as a control. */
---color-action-secondary: rgba(9, 9, 11, 0.07)
---color-action-secondary-hover: rgba(9, 9, 11, 0.12)
---color-action-secondary-active: rgba(9, 9, 11, 0.17)
---color-action-secondary-subtle: var(--color-base-100)
---color-action-secondary-subtle-hover: var(--color-base-200)
---color-action-secondary-text: var(--color-headline)
+--color-action-secondary: rgba(9, 9, 11, 0.1);
+--color-action-secondary-hover: rgba(9, 9, 11, 0.15);
+--color-action-secondary-active: rgba(9, 9, 11, 0.2);
+--color-action-secondary-subtle: var(--color-base-100);
+--color-action-secondary-subtle-hover: var(--color-base-200);
+--color-action-secondary-text: var(--color-headline);
+/* Tonal Actions - Used by bg-action-tonal utility class.
+   * A brand-tinted fill with the brand as its label: the quieter action beside
+   * a primary, and a chosen answer. It is the subtle tint (brand-100) and its
+   * own hover (brand-200) and pressed steps (halfway to brand-300, like the
+   * toggled-on ghost button; 1.30:1 against the resting fill). The label is
+   * brand-800, the lightest step that holds 4.5:1 on all three fills for any
+   * brand, not only the default: step 700 does on the default brand (5.84,
+   * 4.97, 4.48:1) but fails the pressed fill by 0.02, and by more on a
+   * saturated blue (4.39:1 for #0026EA). 800 gives 8.15, 6.94 and 6.25:1. */
+--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 - the filter and choice pill (Chip). At rest a quiet neutral fill that
+   * shows on the page and on a card without an edge: base-200 is 1.22:1 on the
+   * page and 1.27:1 on the card, hover base-300 and pressed base-350 (1.42 and
+   * 1.85 on the page). The label is the headline, 4.5:1 or more on all three
+   * (13.96, 11.99 and 9.18:1). */
+--color-chip: var(--color-base-200);
+--color-chip-hover: var(--color-base-300);
+--color-chip-active: var(--color-base-350);
+--color-chip-text: var(--color-headline);
+/* A selected chip is tonal, in both modes (never solid): its own tokens,
+   * pointing at the tonal role, so an app that themes tonal gets matching chips
+   * and one that wants another selected look sets these. */
+--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 edge of an outline Button. The border role was the
+   * card edge, 1.25:1 on the page: a label in a ghost box. This is the field
+   * edge (base-500), already held to 3:1 on the field, the page and a card. */
+--color-action-outline-border: var(--color-input-border);
+--color-action-outline-border-hover: var(--color-input-border-hover);
 /* Disabled Actions - shared by every variant.
    * Disabled must be the QUIETEST state, never a brighter colour than the
    * enabled secondary. It used to be brand-500 plus opacity-50, which made a
    * disabled primary lighter and more colourful than an enabled secondary. */
---color-action-disabled: var(--color-base-200)
---color-action-disabled-text: var(--color-base-500)
---color-action-disabled-border: var(--color-base-250)
+--color-action-disabled: var(--color-base-250);
+--color-action-disabled-text: var(--color-base-500);
+--color-action-disabled-border: var(--color-base-300);
 /* Danger Actions - Used by bg-action-danger utility class.
    * Same ramp step as every other family, so the destructive action no longer
    * out-shouts the primary one. The bright red is spent on hover, where the
    * user is already committing. */
---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-color: 0 0 0
---shadow-opacity: 0.1
---shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity))
---shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity))
---shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity))
---shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity))
+--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);
+/* The same for a toggled-on danger-tone IconButton: hover was 1.18:1 against
+   * the resting fill. Half a step past it is 1.32:1, and the icon
+   * (--color-error) keeps 3.36:1; on the whole step it is exactly 3.00. Dark needs no override:
+   * the same expression resolves through the mirrored steps. */
+--color-action-danger-subtle-active: color-mix(in srgb, var(--color-error-300) 50%, var(--color-error-200));
+--color-action-danger-text: var(--color-error-50);
+/* Shadow Colors
+   * Light elevation is carried by the shadow, so it is the ramp's own ink
+   * (base-900). Every step is two layers: a tight contact shadow
+   * (--shadow-opacity-contact) that grounds the edge and a wider, softer
+   * ambient one (--shadow-opacity) that carries the distance. Until 8.1 both
+   * layers shared one flat 14%; the 8.1 values are in CHANGELOG.md. */
+--shadow-color: 24 24 27;
+--shadow-opacity: 0.1;
+--shadow-opacity-contact: 0.06;
+--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));
+/* What a material (glass) casts: the lg step. Its own name so a theme can
+   * retune glass without moving every floating surface. */
+--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));
+/* Motion
+   * Four durations and three curves. Tailwind's default transition reads
+   * --duration-base and --ease-standard, so every `transition-*` class that
+   * sets no duration of its own follows them (150ms, as before; the curve is
+   * new). `ease-standard`, `ease-out` and `ease-spring` are utilities;
+   * durations are used as `duration-(--duration-moderate)`. --ease-out is
+   * Tailwind's own name and value. --ease-spring is a lightly damped spring
+   * (one overshoot of about 5%, settled by the end): the cubic-bezier is the
+   * fallback, and the @supports block after @theme upgrades it to linear().
+   * prefers-reduced-motion re-points all of them (see @motion-reduced). */
+--duration-fast: 100ms;
+--duration-base: 150ms;
+--duration-moderate: 200ms;
+--duration-slow: 300ms;
+--ease-standard: cubic-bezier(0.2, 0, 0, 1);
+--ease-out: cubic-bezier(0, 0, 0.2, 1);
+--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+--default-transition-duration: var(--duration-base);
+--default-transition-timing-function: var(--ease-standard);
+/* Materials — the frosted layer for what floats over content (bars, sheets,
+   * menus). Used through .material-thin|regular|thick (below), never a raw
+   * backdrop-blur. A material is a surface at partial alpha, so it is judged
+   * over the worst backdrop of the mode, not alone: the alpha floors are
+   * enforced by scripts/check-contrast.js (see scripts/contrast-pairs.js,
+   * MATERIALS) and by createTheme for an app's own theme. Each alpha is the
+   * smallest whole 2% that passes every pair its level carries, plus a little
+   * margin (floors against the page-colour chrome: thin 50 / 30, regular 82 / 47,
+   * thick 84 / 68, light / dark; light thick has 4 points because a tinted neutral (neutralChroma 0.08) needs 87; dark is judged on the dimmed backdrop, below):
+   *   thin    headline                 (a control on a bar: an icon, a short label;
+   *                                    its focus ring is drawn outside it)
+   *   regular + body, label, focus ring (bars, the tab bar, a floating sidebar)
+   *   thick   + description, caption   (sheets, menus, modals, toasts, tooltips)
+   * Dark's worst backdrop is near-white, which its surfaces are close to. The
+   * dark filter therefore also dims the backdrop (--material-backdrop-brightness,
+   * 0.6: brightness() multiplies the sRGB channels), so the brightest thing
+   * that can be behind dark glass is near-white times 0.6, and the guard measures
+   * that. It is true to the rendering because the dimming and the translucent
+   * fill are switched together: every fallback below drops the filter and makes
+   * the fill opaque. Light is brightness(1), an identity.
+   * The fallbacks (reduced transparency, more contrast, forced colors, no
+   * backdrop-filter, data-materials="opaque") are below the .dark rule. */
+--material-alpha-thin: 58%;
+--material-alpha-regular: 84%;
+--material-alpha-thick: 88%;
+--color-material-thin: color-mix(in srgb, var(--color-surface-chrome) var(--material-alpha-thin), transparent);
+--color-material-regular: color-mix(in srgb, var(--color-surface-chrome) var(--material-alpha-regular), transparent);
+--color-material-thick: color-mix(in srgb, var(--color-surface-overlay) var(--material-alpha-thick), transparent);
+--material-blur-thin: 16px;
+--material-blur-regular: 24px;
+--material-blur-thick: 32px;
+--material-saturate: 180%;
+/* What the filter does to the backdrop's brightness (a number): 1 in light,
+   * where it is an identity; below 1 in dark, which dims what shows through the
+   * glass. The alpha floors are measured on the dimmed backdrop. */
+--material-backdrop-brightness: 1;
+--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));
+/* The light top edge and the 1px outline, from the neutral ramp so a
+   * neutral override tints them. */
+--color-material-highlight: color-mix(in srgb, var(--zabi-base-50) 60%, transparent);
+--color-material-rim: color-mix(in srgb, var(--zabi-base-900) 9%, transparent);
+/* Gradients (D99). Contrast is never measured against a gradient: each one
+   * is built from named stops, and scripts/contrast-pairs.js holds the worst
+   * stop of each to the pairs that sit on it. The strengths are the strongest
+   * whole 5% (canvas) and whole percent (control veils) at which every pair
+   * passes, capped at the prototype (canvas 85 / 45, top veil 22, bottom 14).
+   * Light canvas 55 (caption and link on the wash), dark canvas 25 (field edge
+   * on the wash).
+   *
+   * Control veils, light: darken-only. The top is 0%, so the fill at the top
+   * is the control's own colour: the label keeps its full contrast and an
+   * app's brand colour is not altered. Lightening the top of the brand-600
+   * fill took the white label (about 4.6:1) under 4.5:1, which is why it was
+   * 4% before. The bottom is 14% of base-950, the strongest whole percent that
+   * passes every pair (the label only gains from a darker fill); it is the
+   * depth. Dark is the same darken-only veil (the fill is a mid step with a white
+   * label, as in light); only the accent, whose dark fill is light under a dark
+   * label, keeps the lighter top, 22 / 6, in its own strengths.
+   *
+   * Canvas: two soft radial washes from brand 300 and accent 300 for glass to
+   * show something. A background-image only; .bg-canvas adds the page colour.
+   * The library does not paint it on body. */
+--gradient-canvas-strength: 55%;
+--color-canvas-wash-brand: color-mix(in srgb, var(--color-brand-300) var(--gradient-canvas-strength), transparent);
+--color-canvas-wash-accent: color-mix(in srgb, var(--color-accent-300) var(--gradient-canvas-strength), transparent);
+--gradient-canvas:
+    radial-gradient(90% 46% at 8% 0%, var(--color-canvas-wash-brand), transparent 70%),
+    radial-gradient(80% 40% at 100% 4%, var(--color-canvas-wash-accent), transparent 70%);
+/* Solid controls: a veil laid over the control's own background-color, so
+   * hover and pressed fills keep working. The start and end tokens are the veil
+   * colours (translucent neutral, from the ramp so a neutral override tints
+   * them): a light one on top, a slight dark one at the bottom. It serves the
+   * three solid fills: primary, accent and danger (the veil is neutral, so
+   * `bg-control-gradient` is the danger one too). The accent has strengths of
+   * its own, which follow the shared ones, so an app whose accent carries a
+   * dark label can differ (createTheme does that when the pairs need it). */
+--gradient-control-top-strength: 0%;
+--gradient-control-bottom-strength: 14%;
+--gradient-control-accent-top-strength: var(--gradient-control-top-strength);
+--gradient-control-accent-bottom-strength: var(--gradient-control-bottom-strength);
+--color-control-gradient-start: color-mix(in srgb, var(--zabi-base-50) var(--gradient-control-top-strength), transparent);
+--color-control-gradient-end: color-mix(in srgb, var(--zabi-base-950) var(--gradient-control-bottom-strength), transparent);
+--gradient-control: linear-gradient(to bottom, var(--color-control-gradient-start), var(--color-control-gradient-end));
+--color-control-gradient-accent-start: color-mix(in srgb, var(--zabi-base-50) var(--gradient-control-accent-top-strength), transparent);
+--color-control-gradient-accent-end: color-mix(in srgb, var(--zabi-base-950) var(--gradient-control-accent-bottom-strength), transparent);
+--gradient-control-accent: linear-gradient(to bottom, var(--color-control-gradient-accent-start), var(--color-control-gradient-accent-end));
+--shadow-control-highlight: inset 0 1px 0 color-mix(in srgb, var(--zabi-base-50) 40%, transparent);
 /* Spacing */
---spacing-xs: 0.25rem
---spacing-sm: 0.5rem
---spacing-md: 1rem
---spacing-lg: 1.5rem
---spacing-xl: 2rem
---spacing-2xl: 3rem
+--spacing-xs: 0.25rem;
+--spacing-sm: 0.5rem;
+--spacing-md: 1rem;
+--spacing-lg: 1.5rem;
+--spacing-xl: 2rem;
+--spacing-2xl: 3rem;
 /*
    * Sizing names for w-* / min-w-* / max-w-*.
    * Tailwind v4 resolves these utilities as --max-width-* (or --width-* / --min-width-*) → --spacing-* → --container-*.
@@ -434,65 +826,1724 @@
    * instead of Tailwind's 32rem container size. These keys are checked before --spacing-*, so they restore
    * the standard container scale while `p-lg`, `gap-md`, etc. keep using the spacing tokens.
    */
---max-width-xs: 20rem
---max-width-sm: 24rem
---max-width-md: 28rem
---max-width-lg: 32rem
---max-width-xl: 36rem
---max-width-2xl: 42rem
---width-xs: 20rem
---width-sm: 24rem
---width-md: 28rem
---width-lg: 32rem
---width-xl: 36rem
---width-2xl: 42rem
---min-width-xs: 20rem
---min-width-sm: 24rem
---min-width-md: 28rem
---min-width-lg: 32rem
---min-width-xl: 36rem
---min-width-2xl: 42rem
+--max-width-xs: 20rem;
+--max-width-sm: 24rem;
+--max-width-md: 28rem;
+--max-width-lg: 32rem;
+--max-width-xl: 36rem;
+--max-width-2xl: 42rem;
+--width-xs: 20rem;
+--width-sm: 24rem;
+--width-md: 28rem;
+--width-lg: 32rem;
+--width-xl: 36rem;
+--width-2xl: 42rem;
+--min-width-xs: 20rem;
+--min-width-sm: 24rem;
+--min-width-md: 28rem;
+--min-width-lg: 32rem;
+--min-width-xl: 36rem;
+--min-width-2xl: 42rem;
 /* ----------------------------------------------------------------
    * BORDER RADIUS — four values, chosen by ROLE, never by size.
    * A large button is a bigger box with the same corner as a small one.
    * Enforced by scripts/check-control-geometry.js.
    * ---------------------------------------------------------------- */
---radius-control: 0.5rem
+--radius-control: 0.5rem;
 /*  8px — buttons, inputs, selects, toggles */
---radius-container: 0.75rem
+--radius-container: 0.75rem;
 /* 12px — cards, alerts, panels, list items */
---radius-overlay: 1rem
+--radius-overlay: 1rem;
 /* 16px — modals, sheets, menus, popovers   */
---radius-pill: 9999px
+--radius-pill: 9999px;
 /*        badges, avatars, status dots      */
 /* Legacy t-shirt radii. Kept so existing consumer overrides keep working;
    * components must not use them. */
---radius-sm: 0.25rem
---radius-md: 0.375rem
---radius-lg: 0.5rem
---radius-xl: 0.75rem
+--radius-sm: 0.25rem;
+--radius-md: 0.375rem;
+--radius-lg: 0.5rem;
+--radius-xl: 0.75rem;
 /* ----------------------------------------------------------------
    * CONTROL GEOMETRY — one height scale shared by every form control, so a
    * Button, Input, Select and IconButton of the same size are the same height
    * and line up in a row. They previously rendered at 40/48/64, 38/46/50 and
    * 32/40/48 respectively. Grid-aligned (8px).
    * ---------------------------------------------------------------- */
---control-height-sm: 2rem
+--control-height-sm: 2rem;
 /* 32px */
---control-height-md: 2.5rem
+--control-height-md: 2.5rem;
 /* 40px */
---control-height-lg: 3rem
+--control-height-lg: 3rem;
 /* 48px */
 /* Z-index */
---z-dropdown: 1000
---z-sticky: 1020
---z-fixed: 1030
---z-modal-backdrop: 1040
---z-modal: 1050
---z-popover: 1060
---z-tooltip: 1070
---z-toast: 1080
+--z-dropdown: 1000;
+--z-sticky: 1020;
+--z-fixed: 1030;
+--z-modal-backdrop: 1040;
+--z-modal: 1050;
+--z-popover: 1060;
+--z-tooltip: 1070;
+--z-toast: 1080;
 /* Tooltip — elevated hint surface (Tooltip.svelte); arrow uses --color-tooltip-bg */
---color-tooltip-bg: var(--color-base-800)
---color-tooltip-fg: var(--color-base-50)
-}
+--color-tooltip-bg: var(--color-base-800);
+--color-tooltip-fg: var(--color-base-50);
+}
+
+@layer base {
+    :root {
+        --tw-ring-offset-color: transparent;
+    }
+}
+
+@media (prefers-contrast: high) {
+  :root {
+    --color-tooltip-bg: CanvasText;
+    --color-tooltip-fg: Canvas;
+  }
+}
+
+body {
+  font-family: var(--font-family-sans);
+}
+
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-family-heading);
+  }
+}
+
+:root,
+[data-theme="light"] {
+  color-scheme: light;
+}
+
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
+  :root:root {
+    --color-material-thin: var(--color-surface-chrome);
+    --color-material-regular: var(--color-surface-chrome);
+    --color-material-thick: var(--color-surface-overlay);
+    --material-filter-thin: none;
+    --material-filter-regular: none;
+    --material-filter-thick: none;
+  }
+}
+
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  :root:root {
+    --color-material-thin: var(--color-surface-chrome);
+    --color-material-regular: var(--color-surface-chrome);
+    --color-material-thick: var(--color-surface-overlay);
+    --material-filter-thin: none;
+    --material-filter-regular: none;
+    --material-filter-thick: none;
+  }
+}
+
+[data-materials="opaque"][data-materials="opaque"] {
+  --color-material-thin: var(--color-surface-chrome);
+  --color-material-regular: var(--color-surface-chrome);
+  --color-material-thick: var(--color-surface-overlay);
+  --material-filter-thin: none;
+  --material-filter-regular: none;
+  --material-filter-thick: none;
+}
+
+@supports (transition-timing-function: linear(0, 1)) {
+  :root {
+    --ease-spring: linear(0, 0.14, 0.409, 0.668, 0.859, 0.974, 1.029, 1.046, 1.041, 1.03, 1.017, 1.008, 1.002, 0.999, 0.998, 0.998, 1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root:root {
+    --duration-fast: 0s;
+    --duration-base: 0s;
+    --duration-moderate: 0s;
+    --duration-slow: 0s;
+    --ease-spring: var(--ease-standard);
+  }
+}
+
+.material-thin,
+.material-regular,
+.material-thick {
+  --tw-shadow:
+    inset 0 1px 0 var(--color-material-highlight),
+    inset 0 0 0 1px var(--color-material-rim),
+    var(--shadow-material);
+  box-shadow:
+    var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+
+.material-thin {
+  background-color: var(--color-material-thin);
+  -webkit-backdrop-filter: var(--material-filter-thin);
+  backdrop-filter: var(--material-filter-thin);
+}
+
+.material-regular {
+  background-color: var(--color-material-regular);
+  -webkit-backdrop-filter: var(--material-filter-regular);
+  backdrop-filter: var(--material-filter-regular);
+}
+
+.material-thick {
+  background-color: var(--color-material-thick);
+  -webkit-backdrop-filter: var(--material-filter-thick);
+  backdrop-filter: var(--material-filter-thick);
+}
+
+@media (forced-colors: active) {
+  .material-thin,
+  .material-regular,
+  .material-thick {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
+.material-layer-thick {
+  isolation: isolate;
+  background-color: transparent;
+  --tw-shadow: var(--shadow-material);
+  box-shadow:
+    var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+
+.material-layer-thick::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  background-color: var(--color-material-thick);
+  -webkit-backdrop-filter: var(--material-filter-thick);
+  backdrop-filter: var(--material-filter-thick);
+  box-shadow:
+    inset 0 1px 0 var(--color-material-highlight),
+    inset 0 0 0 1px var(--color-material-rim);
+}
+
+@media (forced-colors: active) {
+  .material-layer-thick {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
+.material-layer-regular {
+  isolation: isolate;
+  background-color: transparent;
+  --tw-shadow: var(--shadow-material);
+  box-shadow:
+    var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+
+.material-layer-regular::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  background-color: var(--color-material-regular);
+  -webkit-backdrop-filter: var(--material-filter-regular);
+  backdrop-filter: var(--material-filter-regular);
+  box-shadow:
+    inset 0 1px 0 var(--color-material-highlight),
+    inset 0 0 0 1px var(--color-material-rim);
+}
+
+@media (forced-colors: active) {
+  .material-layer-regular {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
+
+.material-bar {
+  isolation: isolate;
+  background-color: transparent;
+}
+
+.material-bar::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  box-sizing: border-box;
+  pointer-events: none;
+  background-color: var(--color-bar);
+  border: 0 solid transparent;
+  border-bottom-width: 1px;
+  transition-property: background-color, border-color;
+  transition-duration: var(--duration-moderate);
+  transition-timing-function: var(--ease-standard);
+}
+
+.material-bar[data-bar-edge="bottom"]::before {
+  border-bottom-width: 0;
+  border-top-width: 1px;
+}
+
+.material-bar[data-scrolled-under="true"]::before {
+  background-color: var(--color-material-regular);
+  -webkit-backdrop-filter: var(--material-filter-regular);
+  backdrop-filter: var(--material-filter-regular);
+  border-color: var(--color-bar-border);
+}
+
+@media (forced-colors: active) {
+  .material-bar[data-scrolled-under="true"]::before {
+    border-color: CanvasText;
+  }
+}
+
+.bg-canvas {
+  background-color: var(--color-surface-base);
+  background-image: var(--gradient-canvas);
+  background-repeat: no-repeat;
+}
+
+.bg-control-gradient,
+.bg-control-gradient-accent {
+  --tw-inset-shadow: var(--shadow-control-highlight);
+  box-shadow:
+    var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow, 0 0 #0000);
+}
+
+.bg-control-gradient {
+  background-image: var(--gradient-control);
+}
+
+.bg-control-gradient-accent {
+  background-image: var(--gradient-control-accent);
+}
+
+.ring-toggle-track {
+  --tw-inset-ring-shadow: inset 0 0 0 1px var(--color-toggle-track-border);
+  box-shadow:
+    var(--tw-inset-shadow, 0 0 #0000),
+    var(--tw-inset-ring-shadow, 0 0 #0000),
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow, 0 0 #0000);
+}
+
+.rounded-button {
+  border-radius: var(--zabi-button-radius, var(--radius-control));
+}
+
+.font-button {
+  font-weight: var(--zabi-button-font-weight, 500);
+}
+
+.font-button-strong {
+  font-weight: var(--zabi-button-font-weight, 600);
+}
+
+.bg-base-50 {
+  background-color: var(--color-base-50);
+}
+
+.bg-base-75 {
+  background-color: var(--color-base-75);
+}
+
+.bg-base-100 {
+  background-color: var(--color-base-100);
+}
+
+.bg-base-150 {
+  background-color: var(--color-base-150);
+}
+
+.bg-base-200 {
+  background-color: var(--color-base-200);
+}
+
+.bg-base-250 {
+  background-color: var(--color-base-250);
+}
+
+.bg-base-300 {
+  background-color: var(--color-base-300);
+}
+
+.bg-base-350 {
+  background-color: var(--color-base-350);
+}
+
+.bg-base-400 {
+  background-color: var(--color-base-400);
+}
+
+.bg-base-450 {
+  background-color: var(--color-base-450);
+}
+
+.bg-base-500 {
+  background-color: var(--color-base-500);
+}
+
+.bg-base-550 {
+  background-color: var(--color-base-550);
+}
+
+.bg-base-600 {
+  background-color: var(--color-base-600);
+}
+
+.bg-base-650 {
+  background-color: var(--color-base-650);
+}
+
+.bg-base-700 {
+  background-color: var(--color-base-700);
+}
+
+.bg-base-750 {
+  background-color: var(--color-base-750);
+}
+
+.bg-base-800 {
+  background-color: var(--color-base-800);
+}
+
+.bg-base-850 {
+  background-color: var(--color-base-850);
+}
+
+.bg-base-900 {
+  background-color: var(--color-base-900);
+}
+
+.bg-base-925 {
+  background-color: var(--color-base-925);
+}
+
+.bg-base-950 {
+  background-color: var(--color-base-950);
+}
+
+@media (hover: hover) {
+.hover\:bg-base-50:hover {
+  background-color: var(--color-base-50);
+}
+
+.hover\:bg-base-75:hover {
+  background-color: var(--color-base-75);
+}
+
+.hover\:bg-base-100:hover {
+  background-color: var(--color-base-100);
+}
+
+.hover\:bg-base-150:hover {
+  background-color: var(--color-base-150);
+}
+
+.hover\:bg-base-200:hover {
+  background-color: var(--color-base-200);
+}
+
+.hover\:bg-base-250:hover {
+  background-color: var(--color-base-250);
+}
+
+.hover\:bg-base-300:hover {
+  background-color: var(--color-base-300);
+}
+
+.hover\:bg-base-350:hover {
+  background-color: var(--color-base-350);
+}
+
+.hover\:bg-base-400:hover {
+  background-color: var(--color-base-400);
+}
+
+.hover\:bg-base-450:hover {
+  background-color: var(--color-base-450);
+}
+
+.hover\:bg-base-500:hover {
+  background-color: var(--color-base-500);
+}
+
+.hover\:bg-base-550:hover {
+  background-color: var(--color-base-550);
+}
+
+.hover\:bg-base-600:hover {
+  background-color: var(--color-base-600);
+}
+
+.hover\:bg-base-650:hover {
+  background-color: var(--color-base-650);
+}
+
+.hover\:bg-base-700:hover {
+  background-color: var(--color-base-700);
+}
+
+.hover\:bg-base-750:hover {
+  background-color: var(--color-base-750);
+}
+
+.hover\:bg-base-800:hover {
+  background-color: var(--color-base-800);
+}
+
+.hover\:bg-base-850:hover {
+  background-color: var(--color-base-850);
+}
+
+.hover\:bg-base-900:hover {
+  background-color: var(--color-base-900);
+}
+
+.hover\:bg-base-925:hover {
+  background-color: var(--color-base-925);
+}
+
+.hover\:bg-base-950:hover {
+  background-color: var(--color-base-950);
+}
+}
+
+.bg-card {
+  background-color: var(--color-card);
+}
+
+.bg-toggle-thumb {
+  background-color: var(--color-toggle-thumb, var(--color-toggle-knob));
+}
+
+.bg-toggle-thumb-checked {
+  background-color: var(--color-toggle-thumb-checked, var(--color-toggle-thumb, var(--color-toggle-knob-checked)));
+}
+
+.bg-card-flat {
+  background-color: var(--color-card-flat);
+}
+
+@media (hover: hover) {
+.hover\:bg-card-hover:hover {
+  background-color: var(--color-card-hover);
+}
+
+.hover\:bg-card-flat-hover:hover {
+  background-color: var(--color-card-flat-hover);
+}
+}
+
+.bg-surface-1 {
+  background-color: var(--color-surface-1);
+}
+
+.bg-surface-2 {
+  background-color: var(--color-surface-2);
+}
+
+.bg-surface-3 {
+  background-color: var(--color-surface-3);
+}
+
+.bg-surface-4 {
+  background-color: var(--color-surface-4);
+}
+
+.bg-overlay {
+  background-color: var(--color-overlay);
+}
+
+.bg-input {
+  background-color: var(--color-input);
+}
+
+@media (hover: hover) {
+.hover\:bg-input-hover:hover {
+  background-color: var(--color-input-hover);
+}
+}
+
+.focus-visible\:bg-input-focus:focus-visible {
+  background-color: var(--color-input-focus);
+}
+
+.active\:bg-input-focus:active {
+  background-color: var(--color-input-focus);
+}
+
+.active\:bg-input-hover:active {
+  background-color: var(--color-input-hover);
+}
+
+.active\:bg-input-active:active {
+  background-color: var(--color-input-active, var(--color-input-hover));
+}
+
+.active\:bg-card-active:active {
+  background-color: var(--color-card-active);
+}
+
+.active\:bg-card-flat-active:active {
+  background-color: var(--color-card-flat-active);
+}
+
+.disabled\:bg-input-disabled:disabled {
+  background-color: var(--color-input-disabled);
+}
+
+.bg-page {
+  background-color: var(--color-page);
+}
+
+.bg-brand-50 {
+  background-color: var(--color-brand-50);
+}
+
+.bg-brand-100 {
+  background-color: var(--color-brand-100);
+}
+
+.bg-brand-200 {
+  background-color: var(--color-brand-200);
+}
+
+.bg-brand-300 {
+  background-color: var(--color-brand-300);
+}
+
+.bg-brand-400 {
+  background-color: var(--color-brand-400);
+}
+
+.bg-brand-500 {
+  background-color: var(--color-brand-500);
+}
+
+.bg-brand-600 {
+  background-color: var(--color-brand-600);
+}
+
+.bg-brand-700 {
+  background-color: var(--color-brand-700);
+}
+
+.bg-brand-800 {
+  background-color: var(--color-brand-800);
+}
+
+.bg-brand-900 {
+  background-color: var(--color-brand-900);
+}
+
+.bg-brand-950 {
+  background-color: var(--color-brand-950);
+}
+
+@media (hover: hover) {
+.hover\:bg-brand-50:hover {
+  background-color: var(--color-brand-50);
+}
+
+.hover\:bg-brand-100:hover {
+  background-color: var(--color-brand-100);
+}
+
+.hover\:bg-brand-200:hover {
+  background-color: var(--color-brand-200);
+}
+}
+
+.text-brand-50 {
+  color: var(--color-brand-50);
+}
+
+.text-brand-100 {
+  color: var(--color-brand-100);
+}
+
+.text-brand-200 {
+  color: var(--color-brand-200);
+}
+
+.text-brand-300 {
+  color: var(--color-brand-300);
+}
+
+.text-brand-400 {
+  color: var(--color-brand-400);
+}
+
+.text-brand-500 {
+  color: var(--color-brand-500);
+}
+
+.text-brand-600 {
+  color: var(--color-brand-600);
+}
+
+.text-brand-700 {
+  color: var(--color-brand-700);
+}
+
+.text-brand-800 {
+  color: var(--color-brand-800);
+}
+
+.text-brand-900 {
+  color: var(--color-brand-900);
+}
+
+.text-brand-950 {
+  color: var(--color-brand-950);
+}
+
+.border-brand-50 {
+  border-color: var(--color-brand-50);
+}
+
+.border-brand-100 {
+  border-color: var(--color-brand-100);
+}
+
+.border-brand-500 {
+  border-color: var(--color-brand-500);
+}
+
+.border-brand-600 {
+  border-color: var(--color-brand-600);
+}
+
+.text-headline {
+  color: var(--color-headline);
+}
+
+.text-body {
+  color: var(--color-body);
+}
+
+.text-description {
+  color: var(--color-description);
+}
+
+.text-caption {
+  color: var(--color-caption);
+}
+
+.text-input-placeholder {
+  color: var(--color-input-placeholder);
+}
+
+.placeholder\:text-input-placeholder:disabled::placeholder {
+  color: var(--color-action-disabled-text);
+}
+
+.text-label {
+  color: var(--color-label);
+}
+
+.text-link {
+  color: var(--color-link);
+}
+
+@media (hover: hover) {
+.text-link:hover {
+  color: var(--color-link-hover);
+}
+}
+
+.text-link:active {
+  color: var(--color-link-hover);
+}
+
+.text-nav-menu-item {
+  color: var(--color-nav-menu-item);
+}
+
+@media (hover: hover) {
+.hover\:text-nav-menu-item-hover:hover {
+  color: var(--color-nav-menu-item-hover);
+}
+}
+
+.text-nav-menu-item-active {
+  color: var(--color-nav-menu-item-active);
+}
+
+.bg-nav-menu-hover {
+  background-color: var(--color-nav-menu-hover);
+}
+
+.bg-nav-menu-active {
+  background-color: var(--color-nav-menu-active);
+}
+
+.active\:bg-nav-menu-active-hover:active {
+  background-color: var(--color-nav-menu-active-hover);
+}
+
+.bg-nav-menu-item-active {
+  background-color: var(--color-nav-menu-item-active);
+}
+
+.bg-tabbar-active {
+  background-color: var(--color-tabbar-active);
+}
+
+.bg-bar-brand {
+  background-color: var(--color-bar-brand);
+}
+
+.border-bar {
+  border-color: var(--color-bar-border);
+}
+
+.text-success {
+  color: var(--color-success-text);
+}
+
+.text-warning {
+  color: var(--color-warning-text);
+}
+
+.text-error {
+  color: var(--color-error-text);
+}
+
+.text-info {
+  color: var(--color-info-text);
+}
+
+.text-neutral {
+  color: var(--color-neutral-text);
+}
+
+.text-energetic {
+  color: var(--color-energetic-text);
+}
+
+.text-accent {
+  color: var(--color-accent-text);
+}
+
+.text-inverse {
+  color: var(--color-inverse);
+}
+
+.text-disabled {
+  color: var(--color-disabled);
+}
+
+.border-border {
+  border-color: var(--color-border);
+}
+
+.border-border-medium {
+  border-color: var(--color-border-medium);
+}
+
+.border-primary {
+  border-color: var(--color-border);
+}
+
+.border-secondary {
+  border-color: var(--color-border-secondary);
+}
+
+@media (hover: hover) {
+.border-hover:hover {
+  border-color: var(--color-border-hover);
+}
+}
+
+.border-disabled:disabled {
+  border-color: var(--color-border-disabled);
+}
+
+.bg-success {
+  background-color: var(--color-success);
+}
+
+.bg-warning {
+  background-color: var(--color-warning);
+}
+
+.bg-error {
+  background-color: var(--color-error);
+}
+
+.bg-info {
+  background-color: var(--color-info);
+}
+
+.bg-neutral {
+  background-color: var(--color-neutral);
+}
+
+.bg-energetic {
+  background-color: var(--color-energetic);
+}
+
+.bg-accent {
+  background-color: var(--color-accent);
+}
+
+.bg-secondary {
+  background-color: var(--color-secondary);
+}
+
+.border-success {
+  border-color: var(--color-success);
+}
+
+.border-warning {
+  border-color: var(--color-warning);
+}
+
+.border-error {
+  border-color: var(--color-error);
+}
+
+.border-info {
+  border-color: var(--color-info);
+}
+
+.border-neutral {
+  border-color: var(--color-neutral);
+}
+
+.border-energetic {
+  border-color: var(--color-energetic);
+}
+
+.border-accent {
+  border-color: var(--color-accent);
+}
+
+.border-secondary {
+  border-color: var(--color-secondary);
+}
+
+@layer components {
+  .focus-ring {
+    --zabi-focus-ring-color: var(--color-focus-ring);
+    --zabi-focus-ring-offset-color: var(--color-focus-ring-offset);
+    outline: none;
+  }
+
+  .focus-ring:focus-visible {
+    outline: none;
+    --tw-ring-offset-shadow:
+      0 0 0 2px var(--zabi-focus-ring-offset-color),
+      0 0 0 4px var(--zabi-focus-ring-color);
+    box-shadow:
+      var(--tw-inset-shadow, 0 0 #0000),
+      var(--tw-inset-ring-shadow, 0 0 #0000),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow, 0 0 #0000);
+  }
+  .focus-ring--nav {
+    --zabi-focus-ring-color: var(--color-nav-menu-focus);
+  }
+  .focus-ring--danger {
+    --zabi-focus-ring-color: var(--color-focus-ring-danger, var(--color-error));
+  }
+  .focus-ring--muted {
+    --zabi-focus-ring-color: var(--color-focus-ring-muted, var(--color-base-500));
+  }
+  :where(:has(> .on-brand, > .on-accent, > .on-fill):not(.on-brand, .on-accent, .on-fill, .on-brand *, .on-accent *, .on-fill *)) {
+    --zabi-theme-headline: var(--color-headline);
+    --zabi-theme-body: var(--color-body);
+    --zabi-theme-label: var(--color-label);
+    --zabi-theme-description: var(--color-description);
+    --zabi-theme-caption: var(--color-caption);
+    --zabi-theme-link: var(--color-link);
+    --zabi-theme-link-hover: var(--color-link-hover);
+    --zabi-theme-border: var(--color-border);
+    --zabi-theme-border-medium: var(--color-border-medium);
+    --zabi-theme-border-strong: var(--color-border-strong);
+    --zabi-theme-control-border: var(--color-control-border);
+    --zabi-theme-action-outline-border: var(--color-action-outline-border);
+    --zabi-theme-action-outline-border-hover: var(--color-action-outline-border-hover);
+    --zabi-theme-focus-ring: var(--color-focus-ring);
+    --zabi-theme-focus-ring-muted: var(--color-focus-ring-muted);
+    --zabi-theme-nav-menu-focus: var(--color-nav-menu-focus);
+    --zabi-theme-focus-ring-offset: var(--color-focus-ring-offset);
+    --zabi-theme-focus-ring-danger: var(--color-focus-ring-danger, var(--color-error));
+  }
+
+  .on-brand {
+    color: var(--color-on-brand);
+    --color-focus-ring: var(--color-on-brand);
+    --color-focus-ring-muted: var(--color-on-brand);
+    --color-nav-menu-focus: var(--color-on-brand);
+    --color-focus-ring-offset: var(--color-action-primary);
+    --color-focus-ring-danger: var(--color-on-brand);
+    --color-headline: var(--color-on-brand);
+    --color-body: var(--color-on-brand);
+    --color-label: var(--color-on-brand);
+    --color-description: var(--color-on-brand);
+    --color-caption: var(--color-on-brand);
+    --color-link: var(--color-on-brand);
+    --color-link-hover: var(--color-on-brand);
+    --color-border: var(--color-on-brand);
+    --color-border-medium: var(--color-on-brand);
+    --color-border-strong: var(--color-on-brand);
+    --color-control-border: var(--color-on-brand);
+    --color-action-outline-border: var(--color-on-brand);
+    --color-action-outline-border-hover: var(--color-on-brand);
+  }
+
+  .on-accent {
+    color: var(--color-on-accent);
+    --color-focus-ring: var(--color-on-accent);
+    --color-focus-ring-muted: var(--color-on-accent);
+    --color-nav-menu-focus: var(--color-on-accent);
+    --color-focus-ring-offset: var(--color-accent);
+    --color-focus-ring-danger: var(--color-on-accent);
+    --color-headline: var(--color-on-accent);
+    --color-body: var(--color-on-accent);
+    --color-label: var(--color-on-accent);
+    --color-description: var(--color-on-accent);
+    --color-caption: var(--color-on-accent);
+    --color-link: var(--color-on-accent);
+    --color-link-hover: var(--color-on-accent);
+    --color-border: var(--color-on-accent);
+    --color-border-medium: var(--color-on-accent);
+    --color-border-strong: var(--color-on-accent);
+    --color-control-border: var(--color-on-accent);
+    --color-action-outline-border: var(--color-on-accent);
+    --color-action-outline-border-hover: var(--color-on-accent);
+  }
+  .on-fill {
+    color: var(--zabi-on-fill, currentColor);
+    --color-focus-ring: var(--zabi-on-fill, currentColor);
+    --color-focus-ring-muted: var(--zabi-on-fill, currentColor);
+    --color-nav-menu-focus: var(--zabi-on-fill, currentColor);
+    --color-focus-ring-offset: transparent;
+    --color-focus-ring-danger: var(--zabi-on-fill, currentColor);
+    --color-headline: var(--zabi-on-fill, currentColor);
+    --color-body: var(--zabi-on-fill, currentColor);
+    --color-label: var(--zabi-on-fill, currentColor);
+    --color-description: var(--zabi-on-fill, currentColor);
+    --color-caption: var(--zabi-on-fill, currentColor);
+    --color-link: var(--zabi-on-fill, currentColor);
+    --color-link-hover: var(--zabi-on-fill, currentColor);
+    --color-border: var(--zabi-on-fill, currentColor);
+    --color-border-medium: var(--zabi-on-fill, currentColor);
+    --color-border-strong: var(--zabi-on-fill, currentColor);
+    --color-control-border: var(--zabi-on-fill, currentColor);
+    --color-action-outline-border: var(--zabi-on-fill, currentColor);
+    --color-action-outline-border-hover: var(--zabi-on-fill, currentColor);
+  }
+  :where(.on-brand, .on-accent, .on-fill) {
+    --zabi-inv-primary: var(--color-action-primary);
+    --zabi-inv-primary-hover: var(--color-action-primary-hover);
+    --zabi-inv-primary-active: var(--color-action-primary-active);
+    --zabi-inv-primary-text: var(--color-action-primary-text);
+    --zabi-inv-accent: var(--color-accent);
+    --zabi-inv-accent-hover: var(--color-accent-hover);
+    --zabi-inv-accent-active: var(--color-accent-active);
+    --zabi-inv-accent-text: var(--color-on-accent);
+    --zabi-inv-secondary: var(--color-action-secondary);
+    --zabi-inv-secondary-hover: var(--color-action-secondary-hover);
+    --zabi-inv-secondary-active: var(--color-action-secondary-active);
+  }
+  :where(.on-brand) {
+    --zabi-inv-secondary: rgba(9, 9, 11, 0.1);
+    --zabi-inv-secondary-hover: rgba(9, 9, 11, 0.15);
+    --zabi-inv-secondary-active: rgba(9, 9, 11, 0.2);
+  }
+  :where(.on-brand) {
+    --zabi-inv-primary: var(--color-on-brand);
+    --zabi-inv-primary-hover: color-mix(in srgb, var(--color-on-brand) 88%, var(--color-action-primary));
+    --zabi-inv-primary-active: color-mix(in srgb, var(--color-on-brand) 76%, var(--color-action-primary));
+    --zabi-inv-primary-text: var(--color-action-primary);
+    --zabi-inv-star: var(--color-on-brand);
+  }
+  :where(.on-accent) {
+    --zabi-inv-accent: var(--color-on-accent);
+    --zabi-inv-accent-hover: color-mix(in srgb, var(--color-on-accent) 88%, var(--color-accent));
+    --zabi-inv-accent-active: color-mix(in srgb, var(--color-on-accent) 76%, var(--color-accent));
+    --zabi-inv-accent-text: var(--color-accent);
+    --zabi-inv-star: var(--color-on-accent);
+  }
+  :where(.on-fill) {
+    --zabi-inv-primary: var(--zabi-on-fill, currentColor);
+    --zabi-inv-primary-hover: color-mix(in srgb, var(--zabi-on-fill, currentColor) 88%, var(--zabi-fill, var(--color-card)));
+    --zabi-inv-primary-active: color-mix(in srgb, var(--zabi-on-fill, currentColor) 76%, var(--zabi-fill, var(--color-card)));
+    --zabi-inv-primary-text: var(--zabi-fill, var(--color-card));
+    --zabi-inv-star: var(--zabi-on-fill, currentColor);
+  }
+  :where(.bg-action-primary:not(.on-brand, .on-accent, .on-fill)):where(.on-brand *, .on-accent *, .on-fill *) {
+    --color-action-primary: var(--zabi-inv-primary);
+    --color-action-primary-hover: var(--zabi-inv-primary-hover);
+    --color-action-primary-active: var(--zabi-inv-primary-active);
+    --color-action-primary-text: var(--zabi-inv-primary-text);
+  }
+  :where(.bg-action-secondary, .bg-action-secondary-active):where(.on-brand *, .on-accent *, .on-fill *) {
+    --color-action-secondary: var(--zabi-inv-secondary);
+    --color-action-secondary-hover: var(--zabi-inv-secondary-hover);
+    --color-action-secondary-active: var(--zabi-inv-secondary-active);
+  }
+  :where(.bg-accent:not(.on-brand, .on-accent, .on-fill)):where(.on-brand *, .on-accent *, .on-fill *) {
+    --color-accent: var(--zabi-inv-accent);
+    --color-accent-hover: var(--zabi-inv-accent-hover);
+    --color-accent-active: var(--zabi-inv-accent-active);
+    --color-on-accent: var(--zabi-inv-accent-text);
+  }
+  :where(.rating):where(.on-brand *, .on-accent *, .on-fill *) {
+    --zabi-rating-on: var(--zabi-inv-star);
+  }
+  :where(.on-brand, .on-accent, .on-fill)
+    :where(
+      .bg-card, .bg-card-flat, .bg-card-elevated, .bg-background, .bg-surface-base,
+      .bg-surface-raised, .bg-surface-elevated, .bg-surface-overlay, .bg-surface-overlay-hover,
+      .bg-surface-chrome, .bg-surface-inset, .bg-surface-1, .bg-surface-2, .bg-surface-3,
+      .bg-surface-4, .bg-input, .bg-input-disabled, .bg-accent-subtle,
+      .bg-action-danger-subtle, .bg-action-primary-subtle, .bg-action-tonal, .bg-card-tint, .bg-chip, .bg-chip-selected,
+      .bg-energetic-subtle, .bg-error-subtle,
+      .bg-info-subtle, .bg-neutral-subtle, .bg-badge-neutral, .bg-toggle-thumb, .bg-toggle-thumb-checked, .bg-success-subtle, .bg-warning-subtle,
+      .bg-nav-menu-active, .bg-action-disabled, .list-group, .on-surface
+    ) {
+    color: var(--zabi-theme-body);
+    --color-headline: var(--zabi-theme-headline);
+    --color-body: var(--zabi-theme-body);
+    --color-label: var(--zabi-theme-label);
+    --color-description: var(--zabi-theme-description);
+    --color-caption: var(--zabi-theme-caption);
+    --color-link: var(--zabi-theme-link);
+    --color-link-hover: var(--zabi-theme-link-hover);
+    --color-border: var(--zabi-theme-border);
+    --color-border-medium: var(--zabi-theme-border-medium);
+    --color-border-strong: var(--zabi-theme-border-strong);
+    --color-control-border: var(--zabi-theme-control-border);
+    --color-action-outline-border: var(--zabi-theme-action-outline-border);
+    --color-action-outline-border-hover: var(--zabi-theme-action-outline-border-hover);
+    --zabi-inv-primary: var(--color-action-primary);
+    --zabi-inv-primary-hover: var(--color-action-primary-hover);
+    --zabi-inv-primary-active: var(--color-action-primary-active);
+    --zabi-inv-primary-text: var(--color-action-primary-text);
+    --zabi-inv-accent: var(--color-accent);
+    --zabi-inv-accent-hover: var(--color-accent-hover);
+    --zabi-inv-accent-active: var(--color-accent-active);
+    --zabi-inv-accent-text: var(--color-on-accent);
+    --zabi-inv-secondary: var(--color-action-secondary);
+    --zabi-inv-secondary-hover: var(--color-action-secondary-hover);
+    --zabi-inv-secondary-active: var(--color-action-secondary-active);
+    --zabi-inv-star: initial;
+  }
+  :where(.on-brand, .on-accent, .on-fill) :where(.bg-card-flat) {
+    --color-card-flat: var(--color-card);
+    --color-card-flat-hover: var(--color-card-hover);
+    --color-card-flat-active: var(--color-card-active);
+  }
+  :where(.on-brand, .on-accent, .on-fill) :where(.bg-input) {
+    --color-input: var(--color-input-solid);
+    --color-input-hover: var(--color-input-solid-hover);
+    --color-input-focus: var(--color-input-solid-focus);
+    --color-input-active: var(--color-input-solid-active);
+  }
+  :where(.on-brand, .on-accent, .on-fill)
+    :where(
+      .bg-card, .bg-card-flat, .bg-card-elevated, .bg-background, .bg-surface-base,
+      .bg-surface-raised, .bg-surface-elevated, .bg-surface-overlay, .bg-surface-overlay-hover,
+      .bg-surface-chrome, .bg-surface-inset, .bg-surface-1, .bg-surface-2, .bg-surface-3,
+      .bg-surface-4, .bg-input, .bg-input-disabled, .bg-accent-subtle,
+      .bg-action-danger-subtle, .bg-action-primary-subtle, .bg-action-tonal, .bg-card-tint, .bg-chip, .bg-chip-selected,
+      .bg-energetic-subtle, .bg-error-subtle,
+      .bg-info-subtle, .bg-neutral-subtle, .bg-badge-neutral, .bg-toggle-thumb, .bg-toggle-thumb-checked, .bg-success-subtle, .bg-warning-subtle,
+      .bg-nav-menu-active, .bg-action-disabled, .list-group, .on-surface
+    )
+    > :where(*) {
+    --color-focus-ring: var(--zabi-theme-focus-ring);
+    --color-focus-ring-muted: var(--zabi-theme-focus-ring-muted);
+    --color-nav-menu-focus: var(--zabi-theme-nav-menu-focus);
+    --color-focus-ring-offset: var(--zabi-theme-focus-ring-offset);
+    --color-focus-ring-danger: var(--zabi-theme-focus-ring-danger);
+  }
+  .list-dividers > li + li,
+  .list-group > li + li {
+    position: relative;
+  }
+  .list-dividers > li + li::before,
+  .list-group > li + li::before {
+    content: "";
+    position: absolute;
+    inset-inline: 1rem;
+    top: calc(-0.125rem - 0.5px);
+    height: 1px;
+    background-color: var(--zabi-list-divider-color, var(--color-border));
+    pointer-events: none;
+  }
+  :is(.list-dividers, .list-group) > li:has(> [data-selected="true"])::before,
+  :is(.list-dividers, .list-group) > li:has(> [data-selected="true"]) + li::before {
+    display: none;
+  }
+  .list-group {
+    @apply space-y-1 overflow-hidden rounded-xl border border-border p-1;
+    background-color: var(--color-surface-1);
+    --zabi-list-row-radius: calc(var(--radius-container) - 0.25rem - 1px);
+  }
+  .focus-brand {
+    --zabi-focus-ring-color: var(--color-focus-ring);
+    --zabi-focus-ring-offset-color: var(--color-focus-ring-offset);
+    outline: none;
+  }
+
+  .focus-brand:focus-visible {
+    outline: none;
+    --tw-ring-offset-shadow:
+      0 0 0 2px var(--zabi-focus-ring-offset-color),
+      0 0 0 4px var(--zabi-focus-ring-color);
+    box-shadow:
+      var(--tw-inset-shadow, 0 0 #0000),
+      var(--tw-inset-ring-shadow, 0 0 #0000),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow, 0 0 #0000);
+  }
+
+  .focus-nav {
+    --zabi-focus-ring-color: var(--color-nav-menu-focus);
+    --zabi-focus-ring-offset-color: var(--color-focus-ring-offset);
+    outline: none;
+  }
+
+  .focus-nav:focus-visible {
+    outline: none;
+    --tw-ring-offset-shadow:
+      0 0 0 2px var(--zabi-focus-ring-offset-color),
+      0 0 0 4px var(--zabi-focus-ring-color);
+    box-shadow:
+      var(--tw-inset-shadow, 0 0 #0000),
+      var(--tw-inset-ring-shadow, 0 0 #0000),
+      var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow, 0 0 #0000);
+  }
+  .selection-control-label-row-interaction {
+    @apply rounded-md transition-colors outline-none cursor-pointer hover:bg-surface-hover active:bg-surface-active has-disabled:opacity-50 has-disabled:cursor-not-allowed has-disabled:hover:bg-transparent has-disabled:active:bg-transparent;
+    box-shadow: none;
+  }
+
+  .selection-control-label-row-interaction:has(:focus-visible) {
+    box-shadow:
+      0 0 0 2px var(--color-focus-ring-offset),
+      0 0 0 4px var(--color-focus-ring);
+  }
+  .select-container {
+    max-width: 100%;
+  }
+  .selection-control-option-row {
+    box-shadow: none;
+  }
+
+  .selection-control-option-row:has(:checked) {
+    box-shadow:
+      0 0 0 2px var(--color-focus-ring-offset),
+      0 0 0 4px var(--color-focus-ring);
+  }
+  .selection-control-option-row-quiet:has(:checked):not(:has(:focus-visible)) {
+    box-shadow: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .focus-ring:focus-visible,
+  .focus-brand:focus-visible,
+  .focus-nav:focus-visible,
+  .selection-control-label-row-interaction:has(:focus-visible) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+@media (forced-colors: active) {
+  .toggle-switch {
+    border: 1px solid ButtonText;
+    background-color: Canvas;
+    background-image: none;
+  }
+  .toggle-switch-thumb {
+    top: 1px;
+    left: 1px;
+    background-color: ButtonText;
+  }
+  .toggle-switch[aria-checked="true"] {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+  .toggle-switch[aria-checked="true"] .toggle-switch-thumb {
+    background-color: HighlightText;
+  }
+  .toggle-switch:disabled {
+    border-color: GrayText;
+    opacity: 1;
+  }
+  .toggle-switch:disabled[aria-checked="true"] {
+    background-color: GrayText;
+  }
+  .toggle-switch:disabled .toggle-switch-thumb {
+    background-color: GrayText;
+  }
+  .toggle-switch:disabled[aria-checked="true"] .toggle-switch-thumb,
+  .toggle-switch:disabled[aria-busy="true"] .toggle-switch-thumb {
+    background-color: Canvas;
+  }
+
+  .selection-control-shell {
+    border-color: ButtonText;
+  }
+  .selection-control-shell:has(:checked) {
+    border-color: Highlight;
+    background-color: Highlight;
+  }
+  .selection-control-shell:has(:checked) > svg {
+    color: HighlightText;
+  }
+  .selection-control-shell:has(:checked) > .selection-control-dot {
+    background-color: HighlightText;
+  }
+  .selection-control-shell:has(:disabled) {
+    border-color: GrayText;
+    opacity: 1;
+  }
+  .selection-control-shell:has(:checked):has(:disabled) {
+    background-color: GrayText;
+  }
+  .selection-control-shell:has(:checked):has(:disabled) > svg {
+    color: Canvas;
+  }
+  .selection-control-shell:has(:checked):has(:disabled) > .selection-control-dot {
+    background-color: Canvas;
+  }
+  .selection-control-label-row-interaction:has(:disabled) {
+    opacity: 1;
+    color: GrayText;
+  }
+}
+
+.bg-action-primary {
+  background-color: var(--color-action-primary);
+}
+
+@media (hover: hover) {
+.bg-action-primary:hover {
+  background-color: var(--color-action-primary-hover);
+}
+}
+
+.bg-action-primary:active {
+  background-color: var(--color-action-primary-active);
+}
+
+.bg-action-primary:disabled {
+  background-color: var(--color-action-disabled);
+  color: var(--color-action-disabled-text);
+}
+
+.bg-action-primary-subtle {
+  background-color: var(--color-action-primary-subtle);
+}
+
+@media (hover: hover) {
+.bg-action-primary-subtle:hover {
+  background-color: var(--color-action-primary-subtle-hover);
+}
+}
+
+.text-action-primary {
+  color: var(--color-action-primary-text);
+}
+
+.bg-action-secondary {
+  background-color: var(--color-action-secondary);
+}
+
+@media (hover: hover) {
+.bg-action-secondary:hover {
+  background-color: var(--color-action-secondary-hover);
+}
+}
+
+.bg-action-secondary:active {
+  background-color: var(--color-action-secondary-active);
+}
+
+.bg-action-secondary:disabled {
+  background-color: var(--color-action-disabled);
+  color: var(--color-action-disabled-text);
+}
+
+.bg-action-secondary-subtle {
+  background-color: var(--color-action-secondary-subtle);
+}
+
+@media (hover: hover) {
+.bg-action-secondary-subtle:hover {
+  background-color: var(--color-action-secondary-subtle-hover);
+}
+}
+
+.bg-action-tonal {
+  background-color: var(--color-action-tonal);
+}
+
+@media (hover: hover) {
+.bg-action-tonal:hover {
+  background-color: var(--color-action-tonal-hover);
+}
+}
+
+.bg-action-tonal:active {
+  background-color: var(--color-action-tonal-active);
+}
+
+.bg-action-tonal:disabled {
+  background-color: var(--color-action-disabled);
+  color: var(--color-action-disabled-text);
+}
+
+.text-action-tonal {
+  color: var(--color-action-tonal-text);
+}
+
+@layer utilities {
+  .bg-badge-neutral {
+    background-color: var(--zabi-badge-neutral-fill, var(--color-neutral-subtle));
+  }
+  .text-badge-neutral {
+    color: var(--zabi-badge-neutral-text, var(--color-neutral-text));
+  }
+}
+
+@layer utilities {
+  .bg-skeleton-on-color {
+    background-color: var(--zabi-skeleton-fill, color-mix(in srgb, currentColor 24%, transparent));
+  }
+}
+
+.bg-chip {
+  background-color: var(--color-chip);
+}
+
+.bg-chip-hover {
+  background-color: var(--color-chip-hover);
+}
+
+.bg-chip-active {
+  background-color: var(--color-chip-active);
+}
+
+@media (hover: hover) {
+.hover\:bg-chip-hover:hover {
+  background-color: var(--color-chip-hover);
+}
+}
+
+.active\:bg-chip-active:active {
+  background-color: var(--color-chip-active);
+}
+
+.text-chip-text {
+  color: var(--color-chip-text);
+}
+
+.bg-chip-selected {
+  background-color: var(--color-chip-selected);
+}
+
+.bg-chip-selected-hover {
+  background-color: var(--color-chip-selected-hover);
+}
+
+.bg-chip-selected-active {
+  background-color: var(--color-chip-selected-active);
+}
+
+@media (hover: hover) {
+.hover\:bg-chip-selected-hover:hover {
+  background-color: var(--color-chip-selected-hover);
+}
+}
+
+.active\:bg-chip-selected-active:active {
+  background-color: var(--color-chip-selected-active);
+}
+
+.text-chip-selected-text {
+  color: var(--color-chip-selected-text);
+}
+
+.bg-card-tint {
+  background-color: var(--color-card-tint);
+}
+
+.border-progress-track-border {
+  border-color: var(--color-progress-track-border);
+}
+
+.bg-toggle-track {
+  background-color: var(--color-toggle-track);
+}
+
+@media (hover: hover) {
+.bg-toggle-track:hover {
+  background-color: var(--color-toggle-track-hover);
+}
+}
+
+.bg-toggle-track:active {
+  background-color: var(--color-toggle-track-active);
+}
+
+.border-action-outline {
+  border-color: var(--color-action-outline-border);
+}
+
+@media (hover: hover) {
+.border-action-outline:hover,
+.hover\:border-action-outline-hover:hover {
+  border-color: var(--color-action-outline-border-hover);
+}
+}
+
+.bg-action-danger {
+  background-color: var(--color-action-danger);
+}
+
+@media (hover: hover) {
+.bg-action-danger:hover {
+  background-color: var(--color-action-danger-hover);
+}
+}
+
+.bg-action-danger:active {
+  background-color: var(--color-action-danger-active);
+}
+
+.bg-action-danger:disabled {
+  background-color: var(--color-action-disabled);
+  color: var(--color-action-disabled-text);
+}
+
+.bg-action-danger-subtle {
+  background-color: var(--color-action-danger-subtle);
+}
+
+@media (hover: hover) {
+.bg-action-danger-subtle:hover {
+  background-color: var(--color-action-danger-subtle-hover);
+}
+}
+
+@media (hover: hover) {
+.hover\:text-body:hover {
+  color: var(--color-body);
+}
+
+.hover\:text-headline:hover {
+  color: var(--color-headline);
+}
+
+.hover\:text-link:hover {
+  color: var(--color-link);
+}
+
+.enabled\:hover\:text-error-text:enabled:hover {
+  color: var(--color-error-text);
+}
+
+.group:hover .group-hover\:text-headline\/90 {
+  color: color-mix(in oklab, var(--color-headline) 90%, transparent);
+}
+}
+
+.active\:text-headline:active {
+  color: var(--color-headline);
+}
+
+.active\:text-link:active {
+  color: var(--color-link);
+}
+
+.disabled\:text-action-disabled-text:disabled {
+  color: var(--color-action-disabled-text);
+}
+
+.disabled\:hover\:text-description:disabled:hover {
+  color: var(--color-description);
+}
+
+@media (hover: hover) {
+.hover\:border-border-medium:hover {
+  border-color: var(--color-border-medium);
+}
+
+.enabled\:hover\:border-border-medium:enabled:hover {
+  border-color: var(--color-border-medium);
+}
+}
+
+.disabled\:border-transparent:disabled {
+  border-color: transparent;
+}
+
+.disabled\:hover\:border-transparent:disabled:hover {
+  border-color: transparent;
+}
+
+@media (hover: hover) {
+.hover\:bg-accent-hover:hover {
+  background-color: var(--color-accent-hover);
+}
+
+.hover\:text-accent-hover:hover {
+  color: var(--color-accent-hover);
+}
+
+.hover\:border-accent-hover:hover {
+  border-color: var(--color-accent-hover);
+}
+
+.hover\:bg-nav-menu-active-hover:hover {
+  background-color: var(--color-nav-menu-active-hover);
+}
+}
+
+.active\:bg-accent-active:active {
+  background-color: var(--color-accent-active);
+}
+
+.active\:text-accent-active:active {
+  color: var(--color-accent-active);
+}
+
+.active\:border-accent-active:active {
+  border-color: var(--color-accent-active);
+}
+
+.active\:bg-info-active:active {
+  background-color: var(--color-info-active);
+}
+
+.active\:text-info-active:active {
+  color: var(--color-info-active);
+}
+
+.active\:border-info-active:active {
+  border-color: var(--color-info-active);
+}
+
+.active\:bg-action-primary-subtle-hover:active {
+  background-color: var(--color-action-primary-subtle-hover);
+}
+
+.active\:bg-action-danger-subtle-hover:active {
+  background-color: var(--color-action-danger-subtle-hover);
+}
+
+.active\:bg-action-primary-subtle-active:active {
+  background-color: var(--color-action-primary-subtle-active, var(--color-action-primary-subtle-hover));
+}
+
+.active\:bg-action-danger-subtle-active:active {
+  background-color: var(--color-action-danger-subtle-active, var(--color-action-danger-subtle-hover));
+}
+
+.disabled\:bg-action-disabled:disabled {
+  background-color: var(--color-action-disabled);
+}
+
+.z-sticky {
+  z-index: var(--z-sticky);
+}
+
+.z-fixed {
+  z-index: var(--z-fixed);
+}
+
+.z-dropdown {
+  z-index: var(--z-dropdown);
+}
+
+.z-modal {
+  z-index: var(--z-modal);
+}
+
+.z-modal-backdrop {
+  z-index: var(--z-modal-backdrop);
+}
+
+.z-popover {
+  z-index: var(--z-popover);
+}
+
+.z-tooltip {
+  z-index: var(--z-tooltip);
+}
+
+.z-toast {
+  z-index: var(--z-toast);
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.scrollbar-semantic {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-base-400) var(--color-base-100);
+}
+
+.scrollbar-semantic::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.scrollbar-semantic::-webkit-scrollbar-track {
+  background-color: var(--color-base-100);
+}
+
+.scrollbar-semantic::-webkit-scrollbar-thumb {
+  background-color: var(--color-base-400);
+  border-radius: var(--radius-md);
+  border: 2px solid var(--color-base-100);
+}
+
+.scrollbar-semantic::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-base-500);
+}