zabi-components 8.0.0 → 8.1.0

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

@@ -1,299 +1,419 @@
+@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
+--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
+--font-family-sans: 'Nunito Sans', ui-sans-serif, system-ui, sans-serif;
+/* 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);
+/* Code. The stack CodeBlock has always used, now a token. */
+--font-family-mono: "Monaco", "Menlo", "Ubuntu 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 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: #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);
+/* 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: #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);
 /* 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: #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);
 /* 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 its ladder runs the other way below
+   * the card: page (base-150) → elevated (base-100) → raised and overlay (white).
+   * Each grey sits a visible step from its neighbour; the page used to be
+   * base-100 with elevated at base-50, which left 1.04:1 between a card and the
+   * card nested in it. Enforced by scripts/check-surface-elevation.js.
    * 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-150);
+--color-surface-raised: #ffffff;
+--color-surface-elevated: var(--color-base-100);
+--color-surface-overlay: #ffffff;
+/* 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-50);
+--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-base-150);
+--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 stays one step off the white card and is no longer the page colour
+   * (a hovered card used to turn exactly into the page). Active goes one further. */
+--color-card-hover: var(--color-base-100);
+--color-card-active: var(--color-base-150);
+--color-card-elevated: var(--color-surface-overlay);
 /* 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);
+/* 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);
 /* 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. It was base-150, which is now the page itself, and was
+   * already greyer than the disabled fill. */
+--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. base-200 is 1.27:1 on the
+   * white field and a visible step past hover (1.15:1); body text is 11.7:1
+   * on it. */
+--color-input-active: var(--color-base-200);
+--color-input-focus: var(--color-surface-raised);
+/* The page colour: a disabled field stops being a raised surface. Dark does
+   * the same (base-100 is the dark page). */
+--color-input-disabled: var(--color-surface-base);
 /* 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);
+/* 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 +424,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 200  tinted fill (badges, alerts); .dark pins step 100
+   *   <family>-border   step 300  tinted edge; .dark pins 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 +434,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-200);
+--color-success-border: var(--color-pine-300);
 /* 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-200);
+--color-warning-border: var(--color-warning-300);
 /* 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-200);
+--color-error-border: var(--color-error-300);
 /* 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-200);
+--color-energetic-border: var(--color-citron-300);
+/* 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-200);
+--color-accent-border: var(--color-accent-300);
+--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);
+/* One visible step past the page (base-150) and two past a card. It was
+   * base-100 once, which IS the dark page and made a neutral badge measure
+   * 1.00:1 and read as bare text. The border is a step darker than the fill,
+   * like every other family. */
+--color-neutral-subtle: var(--color-base-250);
+--color-neutral-border: var(--color-base-300);
 /* 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-200);
+--color-info-border: var(--color-iris-300);
 /* 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 +514,80 @@
    * 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-200);
+--color-action-primary-subtle-hover: var(--color-brand-300);
+/* 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-400) 50%, var(--color-brand-300));
+/* "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 uses the dark end of the ramp on the light fill (7.21:1).
+   *
+   * 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
+   * --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-brand-950);
+--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);
 /* 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) at a strength that still reads on the top and side edges. */
+--shadow-color: 24 24 27;
+--shadow-opacity: 0.14;
+--shadow-sm: 0 1px 3px 0 rgb(var(--shadow-color) / var(--shadow-opacity)), 0 1px 2px -1px rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 2px 4px -2px rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 4px 6px -4px rgb(var(--shadow-color) / var(--shadow-opacity));
+--shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / var(--shadow-opacity)), 0 8px 10px -6px rgb(var(--shadow-color) / var(--shadow-opacity));
 /* Spacing */
---spacing-xs: 0.25rem
---spacing-sm: 0.5rem
---spacing-md: 1rem
---spacing-lg: 1.5rem
---spacing-xl: 2rem
---spacing-2xl: 3rem
+--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 +595,1121 @@
    * 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;
+}
+
+.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);
+}
+
+@media (hover: hover) {
+.hover\:bg-card-hover:hover {
+  background-color: var(--color-card-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);
+}
+
+.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);
+}
+
+.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):not(.on-brand, .on-accent, .on-brand *, .on-accent *)) {
+    --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-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);
+  }
+
+  .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);
+  }
+  :where(.on-brand, .on-accent)
+    :where(
+      .bg-card, .bg-card-elevated, .bg-background, .bg-surface-base,
+      .bg-surface-raised, .bg-surface-elevated, .bg-surface-overlay, .bg-surface-overlay-hover,
+      .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-energetic-subtle, .bg-error-subtle,
+      .bg-info-subtle, .bg-neutral-subtle, .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);
+  }
+  :where(.on-brand, .on-accent)
+    :where(
+      .bg-card, .bg-card-elevated, .bg-background, .bg-surface-base,
+      .bg-surface-raised, .bg-surface-elevated, .bg-surface-overlay, .bg-surface-overlay-hover,
+      .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-energetic-subtle, .bg-error-subtle,
+      .bg-info-subtle, .bg-neutral-subtle, .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-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);
+  }
+  .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);
+  }
+}
+
+@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;
+  }
+}
+
+.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-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-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);
+}