@cat-factory/app 0.302.1 → 0.303.0

package/README.md

@@ -288,6 +288,22 @@ it has nothing to do at mount, and running it there would announce a close that
 
 A status → chip map feeding a `<UBadge :color="…">` types its values as `BadgeColor` (`utils/badge.ts`), which is derived from `UBadge`'s own prop type rather than restated as a literal union. Typed `string`, the binding does not compile and the reflex is `as any` at each call site: seven of them had accumulated. That cast also accepts a colour Nuxt UI does not define, which renders as an unstyled badge with nothing failing.
 
+### Colour through theme tokens, never a fixed palette shade
+
+Every colour in the SPA is a token that follows the THEME and the colour MODE. Three kinds exist:
+
+- **Nuxt UI role tokens** for greys (`bg-default`, `bg-elevated`, `bg-accented`, `text-default`, `text-toned`, `text-muted`, `text-dimmed`, `text-highlighted`, `border-default`, `border-muted`) and the **bare aliases** for an accent at Nuxt UI's own shade (`text-primary`, `bg-warning/10`, `ring-error/25`).
+- **The app's mirrored numbered tokens** (`app/assets/css/tokens.css`) for a STATUS surface painted in a specific ramp shade: `bg-app-950` / `text-app-100` / `text-app-600` / `bg-app-500` / `ring-app-400` for the five grey shades with no role token, `bg-app-canvas` for the board canvas (the one surface below the page background; in light the page surface `app-950` sits at neutral-100 rather than the mirror's 50 and the canvas at 200, so the ~350 translucent `bg-default/NN` panels keep an edge), and `text-app-warning-300` / `bg-app-error-950/40` / `border-app-success-800` for the five status ramps (`secondary`, `success`, `info`, `warning`, `error`). Each token's dark value is the exact ramp shade and its light value is the MIRRORED shade (`50↔950`, `100↔900`, `200↔800`, `300↔700`, `400↔600`, `500` its own midpoint), so a `300` text on a `950/40` fill reads on both surfaces from one class list. Every value is a reference into the `--ui-color-<alias>-<n>` ramps, so a theme that remaps `warning` recolours every warning surface. `primary` has NO numbered token: brand accents use the bare alias, which is what the editor's primary slider and `blackAsPrimary` address.
+- **Category hues** (`text-app-hue-pink`, `var(--app-hue-teal)` in an inline style) for an IDENTITY colour: an agent kind, a task type, a pipeline step kind (`utils/catalog.ts`). One token per Tailwind hue, `400` in dark and `600` in light (Nuxt UI's own alias convention), referencing Tailwind's ramps because a category is not a status. A STATUS (task status, step state, test verdict, finding severity) is not a category and takes the alias directly (`var(--ui-warning)`, `var(--ui-success)`, `var(--ui-text-muted)` for planned / done / skipped), so the halo, the badge and the dot recolour together. A translucent tile behind a category glyph goes through `tint()` (`utils/colorTint.ts`), which also accepts the hex a deployment-registered kind may send. A theme recolours a hue through its `tokens` block.
+- **Never** a raw Tailwind hue (`bg-slate-900`, `text-amber-300`, `text-pink-300`) nor a fixed numbered alias (`text-primary-400`, `bg-warning-950/40`): the first is welded to one palette and one mode, the second follows the palette but not the mode. `scripts/check-frontend-palette.mjs` (CI) bans both. `red` and `rose` both mean `error`.
+- **Never** a fixed `white` / `black` utility (`bg-white`, `text-black`, `border-white/5`, `bg-white/[0.02]`): invisible or wrong in light mode. Use `border-inverted` (a selection ring), `border-default` / `bg-muted` (faint chrome) or `text-inverted` (text over a filled surface). A line that genuinely needs a fixed value says why with a `fixed-colour-ok:` comment, on that line or the one above it.
+
+### Themes and colour mode
+
+A **theme** is a Nuxt UI theme editor document (https://ui.nuxt.com/theme): the sparse `ThemeDoc` the editor edits and shares as a `?doc=` link, decoded by `utils/theme/link.ts` and typed in `utils/theme/doc.ts` (a port of the editor engine's tables). The app speaks THAT format rather than one of its own, so a theme built in the editor imports as-is and a built-in theme is a document a user could have exported. `utils/theme/builtins.ts` ships `Cat Factory` (the default; its `colors` MUST equal `app.config.ts`'s `ui.colors`, which paints the first frame) and the editor's own `Mono` preset, referenced from the preset table rather than copied. The `theme` store persists the pick and the user's imported documents in this browser; `plugins/theme.client.ts` applies the active document at runtime: aliases onto `appConfig.ui.colors` (Nuxt UI's own colours plugin re-emits the ramps), default variants and component overrides onto `appConfig.ui.<component>` merged INTO the layer's own overrides, and tokens / radius / fonts onto one `<style id="app-theme">` whose selectors anchor on the `data-theme` attribute on `<html>` (`utils/theme/css.ts`, which is also the write boundary for untrusted values). The faces the built-in themes name (Geist, Geist Mono) are self-hosted through `@nuxt/fonts` (`fonts.families` in `nuxt.config.ts`, pinned by `builtins.spec.ts`); a font an IMPORTED theme names is applied as a family name only, so it renders when the device or the deployment provides it. A editor link whose document equals one of the editor's presets collapses to `{ preset: 'mono' }`; `utils/theme/presets.ts` is a copy of the editor's preset table so such a link rebuilds (a decode table, not menu entries).
+
+**Colour mode** (system / light / dark) is `@nuxtjs/color-mode`'s, registered by Nuxt UI, with its own persistence; `nuxt.config.ts` follows the system preference and falls back to dark. `AppearanceSwitcher` at the sidebar bottom is the one control for both axes. The pre-JS loading shell (`spa-loading-template.html`) cannot resolve a token (no stylesheet is loaded yet), so the plugin caches the computed colours of the four tokens the shell paints with, per colour mode, in `localStorage` (`utils/theme/bootPalette.ts`), and a two-line inline script in the shell applies the entry for the mode the `<head>` colour-mode script has already put on `<html>`. The hardcoded defaults are the default theme's, used only until a theme has been seen in that mode.
+
 ## Task swimlanes
 
 A service frame lays its tasks out in **status lanes**, not at coordinates. Three lanes a reader

package/app/app.config.ts

@@ -1,25 +1,34 @@
 export default defineAppConfig({
   ui: {
+    // The default theme's alias map. It MUST equal `CAT_FACTORY_THEME.doc.colors`
+    // (`utils/theme/builtins.ts`): this is what the first paint renders from, before the theme
+    // plugin applies the active document over it (`theme.builtins.spec.ts` pins the equality).
     colors: {
       primary: 'indigo',
+      secondary: 'violet',
+      success: 'emerald',
+      info: 'sky',
+      warning: 'amber',
+      error: 'rose',
       neutral: 'slate',
     },
-    // Give every overlay the same layered dark palette the agent-run-details
-    // reader uses: a deep slate-950 surface so the slate-900 panels/cards inside
-    // pop, with slate-800 chrome. Applies to all UModal/USlideover instances so
-    // overlays stay consistent without per-instance `:ui` overrides.
+    // Give every overlay the same layered surface the agent-run-details reader uses: the deep
+    // `app-950` surface (below `bg-default`) so the `bg-default` panels/cards inside pop, with
+    // `border-default` chrome. All tokens are theme role tokens (`app-950` is the hand-defined
+    // flipping token for the deep shade), so overlays track dark/light. Applies to all
+    // UModal/USlideover instances so they stay consistent without per-instance `:ui` overrides.
     modal: {
       slots: {
-        content: 'bg-slate-950 ring-slate-800 divide-slate-800',
-        header: 'border-b border-slate-800',
-        title: 'text-white',
+        content: 'bg-app-950 ring-default divide-default',
+        header: 'border-b border-default',
+        title: 'text-highlighted',
       },
     },
     slideover: {
       slots: {
-        content: 'bg-slate-950 ring-slate-800 divide-slate-800',
-        header: 'border-b border-slate-800',
-        title: 'text-white',
+        content: 'bg-app-950 ring-default divide-default',
+        header: 'border-b border-default',
+        title: 'text-highlighted',
       },
     },
     // The toaster's scroll region is the ONE `[data-slot='viewport']` the app's own

package/app/assets/css/main.css

@@ -3,6 +3,9 @@
 /* The shared rendered-markdown reader presentation (see prose.css). */
 @import './prose.css';
 
+/* The app's own mode-adaptive colour tokens (`app-*`), layered on Nuxt UI's. */
+@import './tokens.css';
+
 /* The two toaster rules below are scoped by the `app-toaster` marker class that
  * `app.config.ts` puts on the toaster's viewport slot, NOT by `[data-slot='viewport']`.
  * That attribute is Nuxt UI's name for the scroll region of ELEVEN components
@@ -53,10 +56,6 @@
 
 /* ---- Agent Architecture Board: shared visual language ---------------------- */
 
-:root {
-  --board-bg: #0b1020;
-}
-
 html,
 body,
 #__nuxt {
@@ -68,9 +67,9 @@ body {
   overflow: hidden;
 }
 
-/* Vue Flow surface tuned to a dark "design board" look */
+/* The Vue Flow surface is the board canvas: one step below the page background in both modes. */
 .vue-flow__background {
-  background-color: var(--board-bg);
+  background-color: var(--app-bg-canvas);
 }
 
 /* Touch: let the pane own one-finger pan + pinch-zoom rather than the browser
@@ -83,14 +82,15 @@ body {
   touch-action: none;
 }
 
-/* Status-pulse used by blocked / decision-needed blocks */
+/* Status-pulse used by blocked / decision-needed blocks: the warning alias, so a theme that
+ * recolours `warning` recolours the halo. `color-mix` is how a custom property gets an alpha. */
 @keyframes board-pulse {
   0%,
   100% {
-    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-warning) 55%, transparent);
   }
   50% {
-    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
+    box-shadow: 0 0 0 10px transparent;
   }
 }
 
@@ -98,14 +98,14 @@ body {
   animation: board-pulse 1.4s ease-in-out infinite;
 }
 
-/* Green pulse used when a block reaches the "PR ready" state */
+/* Success pulse used when a block reaches the "PR ready" state */
 @keyframes board-pulse-green {
   0%,
   100% {
-    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-success) 60%, transparent);
   }
   50% {
-    box-shadow: 0 0 0 12px rgba(34, 197, 94, 0);
+    box-shadow: 0 0 0 12px transparent;
   }
 }
 
@@ -121,7 +121,7 @@ body {
 
 /* A selected edge: highlight it so the user knows what Delete/Backspace removes */
 .vue-flow__edge.selected .vue-flow__edge-path {
-  stroke: #f43f5e !important;
+  stroke: var(--ui-error) !important;
   stroke-width: 2.5 !important;
 }
 

package/app/assets/css/prose.css

@@ -21,8 +21,8 @@
   transition: background 0.12s ease;
 }
 .reader-prose.review-mode [data-src-start]:hover {
-  background: rgb(99 102 241 / 0.08);
-  box-shadow: inset 2px 0 0 rgb(99 102 241 / 0.5);
+  background: color-mix(in srgb, var(--ui-primary) 8%, transparent);
+  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-primary) 50%, transparent);
 }
 .reader-prose.review-mode [data-src-start]::before {
   content: '+';
@@ -35,23 +35,23 @@
   align-items: center;
   justify-content: center;
   border-radius: 0.25rem;
-  background: rgb(99 102 241);
-  color: white;
+  background: var(--ui-primary);
+  color: var(--ui-text-inverted);
   font-size: 0.8rem;
   line-height: 1;
 }
 .reader-prose.review-mode [data-src-start]:hover::before {
   display: flex;
 }
-/* Persistent markers: amber for a block that already has a comment, indigo for
-   the block whose composer is currently open. */
+/* Persistent markers: the warning alias for a block that already has a comment, the primary
+   alias for the block whose composer is currently open. */
 .reader-prose .cf-commented {
-  background: rgb(234 179 8 / 0.1);
-  box-shadow: inset 2px 0 0 rgb(234 179 8 / 0.6);
+  background: color-mix(in srgb, var(--ui-warning) 10%, transparent);
+  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-warning) 60%, transparent);
 }
 .reader-prose .cf-selected {
-  background: rgb(99 102 241 / 0.12);
-  box-shadow: inset 2px 0 0 rgb(99 102 241 / 0.8);
+  background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
+  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--ui-primary) 80%, transparent);
 }
 
 /* Styling for the markdown HTML injected via v-html (out of scoped reach without
@@ -75,36 +75,36 @@
 }
 .reader-prose strong {
   font-weight: 600;
-  color: rgb(226 232 240);
+  color: var(--ui-text-highlighted);
 }
 .reader-prose em {
   font-style: italic;
 }
 .reader-prose code {
   border-radius: 0.25rem;
-  background: rgb(30 41 59 / 0.8);
+  background: var(--ui-bg-elevated);
   padding: 0.1rem 0.3rem;
-  font-family: ui-monospace, monospace;
+  font-family: var(--font-mono);
   font-size: 0.85em;
-  color: rgb(199 210 254);
+  color: var(--ui-primary);
 }
 .reader-prose pre {
   margin: 0.6rem 0;
   overflow: auto;
   border-radius: 0.5rem;
-  background: rgb(2 6 23 / 0.6);
+  background: var(--app-bg-canvas);
   padding: 0.75rem 0.9rem;
 }
 .reader-prose pre code {
   background: transparent;
   padding: 0;
-  color: rgb(203 213 225);
+  color: var(--ui-text-toned);
 }
 .reader-prose blockquote {
   margin: 0.6rem 0;
-  border-left: 3px solid rgb(99 102 241 / 0.5);
+  border-left: 3px solid color-mix(in srgb, var(--ui-primary) 50%, transparent);
   padding-left: 0.75rem;
-  color: rgb(148 163 184);
+  color: var(--ui-text-muted);
 }
 .reader-prose table {
   margin: 0.6rem 0;
@@ -113,17 +113,17 @@
 }
 .reader-prose th,
 .reader-prose td {
-  border: 1px solid rgb(51 65 85);
+  border: 1px solid var(--ui-border-muted);
   padding: 0.3rem 0.6rem;
 }
 .reader-prose th {
-  background: rgb(30 41 59 / 0.6);
+  background: var(--ui-bg-elevated);
   font-weight: 600;
 }
 .reader-prose hr {
   margin: 1rem 0;
   border: none;
-  border-top: 1px solid rgb(51 65 85);
+  border-top: 1px solid var(--ui-border-muted);
 }
 .reader-prose h1,
 .reader-prose h2,
@@ -131,5 +131,5 @@
 .reader-prose h4 {
   margin: 0.6rem 0 0.3rem;
   font-weight: 600;
-  color: rgb(226 232 240);
+  color: var(--ui-text-highlighted);
 }

package/app/assets/css/tokens.css

@@ -0,0 +1,298 @@
+/* The app's own colour tokens, layered on Nuxt UI's (issue #2239).
+ *
+ * Nuxt UI gives every alias ONE mode-adaptive token (`--ui-primary`, `--ui-warning`: shade 500 in
+ * light, 400 in dark) plus the fixed numbered ramp (`--ui-color-warning-300`), and gives the
+ * neutral ramp the role tokens (`--ui-bg`, `--ui-text-muted`, ...). The SPA's status and accent
+ * surfaces are painted in SPECIFIC ramp shades (a `300` text on a `950/40` fill inside an `800`
+ * border), and a fixed shade cannot serve both modes: what reads on a dark surface vanishes on a
+ * light one. These tokens give each numbered shade a light twin by MIRRORING the ramp (`50↔950`,
+ * `100↔900`, `200↔800`, `300↔700`, `400↔600`, `500` is its own midpoint): the dark value is the
+ * exact shade the raw class used, so dark mode is unchanged, and the light value is the shade the
+ * same intent lands on against a light surface.
+ *
+ * Every value is a reference into Nuxt UI's `--ui-color-<alias>-<n>` ramps, never a literal, so a
+ * theme that maps `warning` to another palette recolours every warning surface, and a theme
+ * document can override any single token here through its `tokens` block (the theme stylesheet's
+ * selectors outrank these; see `utils/theme/css.ts`).
+ *
+ * `@theme inline` binds each to a Tailwind colour so the `bg-app-warning-950/40` /
+ * `text-app-error-300` utilities exist (with opacity modifiers). Five NEUTRAL shades ride the same
+ * scheme under the shorter `app-<n>` name because the role tokens cover the rest of that ramp.
+ * PRIMARY has no numbered tokens: brand accents use Nuxt UI's bare alias (`text-primary`,
+ * `bg-primary/10`), the idiom the editor's primary slider and `blackAsPrimary` address directly.
+ *
+ * CATEGORY hues (`--app-hue-<h>`) are identity colours for agent kinds, task types and pipeline
+ * step kinds: one per Tailwind hue, mode-adaptive on Nuxt UI's own convention (`400` in dark,
+ * `600` in light), consumed as `text-app-hue-pink` or as `var(--app-hue-pink)` in an inline style.
+ * They reference Tailwind's ramps, not an alias, because a category is not a status; a theme
+ * document recolours one through its `tokens` block (`'--app-hue-pink': 'var(--color-rose-400)'`).
+ *
+ * `scripts/check-frontend-palette.mjs` bans the raw and the fixed-alias forms these replace, and
+ * `palette-token-parity.spec.ts` pins the dark values. */
+
+/* ---- Neutral: the five shades with no role token ------------------------------------------- */
+:root,
+.dark {
+  --app-950: var(--ui-color-neutral-950);
+  --app-100: var(--ui-color-neutral-100);
+  --app-600: var(--ui-color-neutral-600);
+  --app-500: var(--ui-color-neutral-500);
+  --app-400: var(--ui-color-neutral-400);
+  /* The board canvas: one step BELOW `bg-default` (900), so panels and cards lift off it. The
+   * only surface in the app below the page background, hence its own token. */
+  --app-bg-canvas: var(--ui-color-neutral-950);
+}
+.light {
+  /* The one deliberate break in the mirror: 950 lands on 100, not 50. Some 350 panels are painted
+   * `bg-default/60` / `bg-elevated/40` over this surface; in dark that is two distinct dark greys, in
+   * light white-at-60% over neutral-50 composites to within 1% of it and every panel edge vanishes.
+   * One step deeper keeps the translucent-panel idiom legible without re-tuning 350 alphas. */
+  --app-950: var(--ui-color-neutral-100);
+  --app-100: var(--ui-color-neutral-900);
+  --app-600: var(--ui-color-neutral-400);
+  --app-500: var(--ui-color-neutral-500);
+  --app-400: var(--ui-color-neutral-600);
+  --app-bg-canvas: var(--ui-color-neutral-200);
+}
+
+/* ---- The five status ramps, every shade mirrored -------------------------------------------- */
+:root,
+.dark {
+  --app-secondary-50: var(--ui-color-secondary-50);
+  --app-secondary-100: var(--ui-color-secondary-100);
+  --app-secondary-200: var(--ui-color-secondary-200);
+  --app-secondary-300: var(--ui-color-secondary-300);
+  --app-secondary-400: var(--ui-color-secondary-400);
+  --app-secondary-500: var(--ui-color-secondary-500);
+  --app-secondary-600: var(--ui-color-secondary-600);
+  --app-secondary-700: var(--ui-color-secondary-700);
+  --app-secondary-800: var(--ui-color-secondary-800);
+  --app-secondary-900: var(--ui-color-secondary-900);
+  --app-secondary-950: var(--ui-color-secondary-950);
+  --app-success-50: var(--ui-color-success-50);
+  --app-success-100: var(--ui-color-success-100);
+  --app-success-200: var(--ui-color-success-200);
+  --app-success-300: var(--ui-color-success-300);
+  --app-success-400: var(--ui-color-success-400);
+  --app-success-500: var(--ui-color-success-500);
+  --app-success-600: var(--ui-color-success-600);
+  --app-success-700: var(--ui-color-success-700);
+  --app-success-800: var(--ui-color-success-800);
+  --app-success-900: var(--ui-color-success-900);
+  --app-success-950: var(--ui-color-success-950);
+  --app-info-50: var(--ui-color-info-50);
+  --app-info-100: var(--ui-color-info-100);
+  --app-info-200: var(--ui-color-info-200);
+  --app-info-300: var(--ui-color-info-300);
+  --app-info-400: var(--ui-color-info-400);
+  --app-info-500: var(--ui-color-info-500);
+  --app-info-600: var(--ui-color-info-600);
+  --app-info-700: var(--ui-color-info-700);
+  --app-info-800: var(--ui-color-info-800);
+  --app-info-900: var(--ui-color-info-900);
+  --app-info-950: var(--ui-color-info-950);
+  --app-warning-50: var(--ui-color-warning-50);
+  --app-warning-100: var(--ui-color-warning-100);
+  --app-warning-200: var(--ui-color-warning-200);
+  --app-warning-300: var(--ui-color-warning-300);
+  --app-warning-400: var(--ui-color-warning-400);
+  --app-warning-500: var(--ui-color-warning-500);
+  --app-warning-600: var(--ui-color-warning-600);
+  --app-warning-700: var(--ui-color-warning-700);
+  --app-warning-800: var(--ui-color-warning-800);
+  --app-warning-900: var(--ui-color-warning-900);
+  --app-warning-950: var(--ui-color-warning-950);
+  --app-error-50: var(--ui-color-error-50);
+  --app-error-100: var(--ui-color-error-100);
+  --app-error-200: var(--ui-color-error-200);
+  --app-error-300: var(--ui-color-error-300);
+  --app-error-400: var(--ui-color-error-400);
+  --app-error-500: var(--ui-color-error-500);
+  --app-error-600: var(--ui-color-error-600);
+  --app-error-700: var(--ui-color-error-700);
+  --app-error-800: var(--ui-color-error-800);
+  --app-error-900: var(--ui-color-error-900);
+  --app-error-950: var(--ui-color-error-950);
+}
+.light {
+  --app-secondary-50: var(--ui-color-secondary-950);
+  --app-secondary-100: var(--ui-color-secondary-900);
+  --app-secondary-200: var(--ui-color-secondary-800);
+  --app-secondary-300: var(--ui-color-secondary-700);
+  --app-secondary-400: var(--ui-color-secondary-600);
+  --app-secondary-500: var(--ui-color-secondary-500);
+  --app-secondary-600: var(--ui-color-secondary-400);
+  --app-secondary-700: var(--ui-color-secondary-300);
+  --app-secondary-800: var(--ui-color-secondary-200);
+  --app-secondary-900: var(--ui-color-secondary-100);
+  --app-secondary-950: var(--ui-color-secondary-50);
+  --app-success-50: var(--ui-color-success-950);
+  --app-success-100: var(--ui-color-success-900);
+  --app-success-200: var(--ui-color-success-800);
+  --app-success-300: var(--ui-color-success-700);
+  --app-success-400: var(--ui-color-success-600);
+  --app-success-500: var(--ui-color-success-500);
+  --app-success-600: var(--ui-color-success-400);
+  --app-success-700: var(--ui-color-success-300);
+  --app-success-800: var(--ui-color-success-200);
+  --app-success-900: var(--ui-color-success-100);
+  --app-success-950: var(--ui-color-success-50);
+  --app-info-50: var(--ui-color-info-950);
+  --app-info-100: var(--ui-color-info-900);
+  --app-info-200: var(--ui-color-info-800);
+  --app-info-300: var(--ui-color-info-700);
+  --app-info-400: var(--ui-color-info-600);
+  --app-info-500: var(--ui-color-info-500);
+  --app-info-600: var(--ui-color-info-400);
+  --app-info-700: var(--ui-color-info-300);
+  --app-info-800: var(--ui-color-info-200);
+  --app-info-900: var(--ui-color-info-100);
+  --app-info-950: var(--ui-color-info-50);
+  --app-warning-50: var(--ui-color-warning-950);
+  --app-warning-100: var(--ui-color-warning-900);
+  --app-warning-200: var(--ui-color-warning-800);
+  --app-warning-300: var(--ui-color-warning-700);
+  --app-warning-400: var(--ui-color-warning-600);
+  --app-warning-500: var(--ui-color-warning-500);
+  --app-warning-600: var(--ui-color-warning-400);
+  --app-warning-700: var(--ui-color-warning-300);
+  --app-warning-800: var(--ui-color-warning-200);
+  --app-warning-900: var(--ui-color-warning-100);
+  --app-warning-950: var(--ui-color-warning-50);
+  --app-error-50: var(--ui-color-error-950);
+  --app-error-100: var(--ui-color-error-900);
+  --app-error-200: var(--ui-color-error-800);
+  --app-error-300: var(--ui-color-error-700);
+  --app-error-400: var(--ui-color-error-600);
+  --app-error-500: var(--ui-color-error-500);
+  --app-error-600: var(--ui-color-error-400);
+  --app-error-700: var(--ui-color-error-300);
+  --app-error-800: var(--ui-color-error-200);
+  --app-error-900: var(--ui-color-error-100);
+  --app-error-950: var(--ui-color-error-50);
+}
+
+/* ---- Category hues: one mode-adaptive value per Tailwind hue ---------------------------------- */
+:root,
+.dark {
+  --app-hue-slate: var(--color-slate-400);
+  --app-hue-red: var(--color-red-400);
+  --app-hue-orange: var(--color-orange-400);
+  --app-hue-amber: var(--color-amber-400);
+  --app-hue-yellow: var(--color-yellow-400);
+  --app-hue-lime: var(--color-lime-400);
+  --app-hue-green: var(--color-green-400);
+  --app-hue-emerald: var(--color-emerald-400);
+  --app-hue-teal: var(--color-teal-400);
+  --app-hue-cyan: var(--color-cyan-400);
+  --app-hue-sky: var(--color-sky-400);
+  --app-hue-blue: var(--color-blue-400);
+  --app-hue-indigo: var(--color-indigo-400);
+  --app-hue-violet: var(--color-violet-400);
+  --app-hue-purple: var(--color-purple-400);
+  --app-hue-fuchsia: var(--color-fuchsia-400);
+  --app-hue-pink: var(--color-pink-400);
+  --app-hue-rose: var(--color-rose-400);
+}
+.light {
+  --app-hue-slate: var(--color-slate-600);
+  --app-hue-red: var(--color-red-600);
+  --app-hue-orange: var(--color-orange-600);
+  --app-hue-amber: var(--color-amber-600);
+  --app-hue-yellow: var(--color-yellow-600);
+  --app-hue-lime: var(--color-lime-600);
+  --app-hue-green: var(--color-green-600);
+  --app-hue-emerald: var(--color-emerald-600);
+  --app-hue-teal: var(--color-teal-600);
+  --app-hue-cyan: var(--color-cyan-600);
+  --app-hue-sky: var(--color-sky-600);
+  --app-hue-blue: var(--color-blue-600);
+  --app-hue-indigo: var(--color-indigo-600);
+  --app-hue-violet: var(--color-violet-600);
+  --app-hue-purple: var(--color-purple-600);
+  --app-hue-fuchsia: var(--color-fuchsia-600);
+  --app-hue-pink: var(--color-pink-600);
+  --app-hue-rose: var(--color-rose-600);
+}
+
+@theme inline {
+  --color-app-hue-slate: var(--app-hue-slate);
+  --color-app-hue-red: var(--app-hue-red);
+  --color-app-hue-orange: var(--app-hue-orange);
+  --color-app-hue-amber: var(--app-hue-amber);
+  --color-app-hue-yellow: var(--app-hue-yellow);
+  --color-app-hue-lime: var(--app-hue-lime);
+  --color-app-hue-green: var(--app-hue-green);
+  --color-app-hue-emerald: var(--app-hue-emerald);
+  --color-app-hue-teal: var(--app-hue-teal);
+  --color-app-hue-cyan: var(--app-hue-cyan);
+  --color-app-hue-sky: var(--app-hue-sky);
+  --color-app-hue-blue: var(--app-hue-blue);
+  --color-app-hue-indigo: var(--app-hue-indigo);
+  --color-app-hue-violet: var(--app-hue-violet);
+  --color-app-hue-purple: var(--app-hue-purple);
+  --color-app-hue-fuchsia: var(--app-hue-fuchsia);
+  --color-app-hue-pink: var(--app-hue-pink);
+  --color-app-hue-rose: var(--app-hue-rose);
+  --color-app-950: var(--app-950);
+  --color-app-100: var(--app-100);
+  --color-app-600: var(--app-600);
+  --color-app-500: var(--app-500);
+  --color-app-400: var(--app-400);
+  --color-app-canvas: var(--app-bg-canvas);
+  --color-app-secondary-50: var(--app-secondary-50);
+  --color-app-secondary-100: var(--app-secondary-100);
+  --color-app-secondary-200: var(--app-secondary-200);
+  --color-app-secondary-300: var(--app-secondary-300);
+  --color-app-secondary-400: var(--app-secondary-400);
+  --color-app-secondary-500: var(--app-secondary-500);
+  --color-app-secondary-600: var(--app-secondary-600);
+  --color-app-secondary-700: var(--app-secondary-700);
+  --color-app-secondary-800: var(--app-secondary-800);
+  --color-app-secondary-900: var(--app-secondary-900);
+  --color-app-secondary-950: var(--app-secondary-950);
+  --color-app-success-50: var(--app-success-50);
+  --color-app-success-100: var(--app-success-100);
+  --color-app-success-200: var(--app-success-200);
+  --color-app-success-300: var(--app-success-300);
+  --color-app-success-400: var(--app-success-400);
+  --color-app-success-500: var(--app-success-500);
+  --color-app-success-600: var(--app-success-600);
+  --color-app-success-700: var(--app-success-700);
+  --color-app-success-800: var(--app-success-800);
+  --color-app-success-900: var(--app-success-900);
+  --color-app-success-950: var(--app-success-950);
+  --color-app-info-50: var(--app-info-50);
+  --color-app-info-100: var(--app-info-100);
+  --color-app-info-200: var(--app-info-200);
+  --color-app-info-300: var(--app-info-300);
+  --color-app-info-400: var(--app-info-400);
+  --color-app-info-500: var(--app-info-500);
+  --color-app-info-600: var(--app-info-600);
+  --color-app-info-700: var(--app-info-700);
+  --color-app-info-800: var(--app-info-800);
+  --color-app-info-900: var(--app-info-900);
+  --color-app-info-950: var(--app-info-950);
+  --color-app-warning-50: var(--app-warning-50);
+  --color-app-warning-100: var(--app-warning-100);
+  --color-app-warning-200: var(--app-warning-200);
+  --color-app-warning-300: var(--app-warning-300);
+  --color-app-warning-400: var(--app-warning-400);
+  --color-app-warning-500: var(--app-warning-500);
+  --color-app-warning-600: var(--app-warning-600);
+  --color-app-warning-700: var(--app-warning-700);
+  --color-app-warning-800: var(--app-warning-800);
+  --color-app-warning-900: var(--app-warning-900);
+  --color-app-warning-950: var(--app-warning-950);
+  --color-app-error-50: var(--app-error-50);
+  --color-app-error-100: var(--app-error-100);
+  --color-app-error-200: var(--app-error-200);
+  --color-app-error-300: var(--app-error-300);
+  --color-app-error-400: var(--app-error-400);
+  --color-app-error-500: var(--app-error-500);
+  --color-app-error-600: var(--app-error-600);
+  --color-app-error-700: var(--app-error-700);
+  --color-app-error-800: var(--app-error-800);
+  --color-app-error-900: var(--app-error-900);
+  --color-app-error-950: var(--app-error-950);
+}