refactor(frontend): base16 theme contract in a swappable colors.css

Split the palette into two standalone stylesheets:
- colors.css — the 16 base16 slots (--base00..--base0F). This is the
  entire theme swap contract; a generator (e.g. a stylix base16 scheme,
  which is natively base00-base0F) replaces only this file.
- theme.css — the semantic layer (--bg, --purple, …) derived from the
  base16 slots via var()/color-mix. Never changes on a swap.

Every page links colors.css then theme.css; theme.css does NOT @import
colors.css (that would re-bake the slots into it) — they're separate
dist outputs so a swap touches just colors.css. Pixel-identical refactor:
base16 defaults are Catppuccin Mocha and the three off-slot vars
(--crust, --muted, --subtext0) derive via color-mix reproducing their
exact prior hexes.

Wires colors.css through both build.mjs CSS entry lists, the
@hive/shared exports map, and all 7 page templates. css-vars.md + the
frontend.nix output-list comment updated.

frontend/packages/shared/src/colors.css

@@ -0,0 +1,31 @@
+/* base16 palette — THE THEME CONTRACT.
+
+   These 16 slots are the entire swap interface. A theme generator (e.g.
+   one fed a stylix base16 scheme, which is natively base00–base0F)
+   overrides *only this file*; `theme.css` derives every semantic var
+   (`--bg`, `--purple`, …) from these slots, so the whole UI re-themes
+   with nothing else to regenerate.
+
+   Kept as its own standalone stylesheet (not @import-ed into theme.css)
+   so a swap replaces just this ~16-line file — `theme.css` and the page
+   bundles stay untouched. Every page links this BEFORE `theme.css`. The
+   hex defaults are Catppuccin Mocha. Standard base16 slot meanings are
+   in the trailing comments. See docs/web-ui/css-vars.md. */
+:root {
+  --base00: #1e1e2e; /* default bg */
+  --base01: #181825; /* lighter bg (elevated surfaces) */
+  --base02: #313244; /* selection / surface — borders */
+  --base03: #45475a; /* comments / dim surface */
+  --base04: #585b70; /* dark foreground */
+  --base05: #cdd6f4; /* default foreground */
+  --base06: #f5e0dc; /* light foreground */
+  --base07: #b4befe; /* lightest */
+  --base08: #f38ba8; /* red */
+  --base09: #fab387; /* orange / peach */
+  --base0A: #f9e2af; /* yellow */
+  --base0B: #a6e3a1; /* green */
+  --base0C: #89dceb; /* cyan (our sky — note: Catppuccin's base0C is teal) */
+  --base0D: #89b4fa; /* blue */
+  --base0E: #cba6f7; /* magenta / mauve */
+  --base0F: #f5c2e7; /* extra accent — pink */
+}

frontend/packages/shared/src/theme.css

@@ -1,30 +1,35 @@
-/* Theme colour variables (Catppuccin Mocha) — the single source of
-   truth for the hive UI palette. Kept in a standalone file, linked as
-   its own `<link rel="stylesheet" href=".../theme.css">` by every page
-   BEFORE the page CSS, so the `:root` vars are defined for everything
-   that references them (base typography, terminal, dashboard, agent).
+/* Semantic theme layer — derived from the base16 contract in
+   `colors.css`. This is what the app references (`--bg`, `--fg`,
+   `--purple`, …); page CSS must use these names, never literal colours
+   and never the raw `--baseNN` slots.
 
-   Why standalone rather than `@import`ed into the page bundles: esbuild
-   inlines `@import` at build time, which would bake the palette into
-   every CSS bundle. Emitting `theme.css` as its own output file lets a
-   theme swap (e.g. a stylix-generated variant carrying the same var
-   names) replace just this one file without rebuilding the rest of the
-   frontend. See docs/web-ui/css-vars.md. */
+   Standalone stylesheet, linked by every page right AFTER `colors.css`
+   (which defines the `--baseNN` slots these rules resolve against). Kept
+   separate from the page bundles — esbuild would otherwise inline an
+   `@import` and bake the palette into every CSS bundle.
+
+   A theme swap touches only `colors.css` (the 16 base16 slots); this
+   derivation layer never changes. See docs/web-ui/css-vars.md. */
 :root {
-  --bg: #1e1e2e;        /* base */
-  --bg-elev: #181825;   /* mantle */
-  --crust: #11111b;     /* crust — terminal background */
-  --fg: #cdd6f4;        /* text */
-  --muted: #7f849c;     /* overlay1 */
-  --purple: #cba6f7;    /* mauve */
-  --purple-dim: #45475a;/* surface1 */
-  --cyan: #89dceb;      /* sky */
-  --blue: #89b4fa;      /* blue */
-  --pink: #f5c2e7;      /* pink */
-  --amber: #fab387;     /* peach */
-  --yellow: #f9e2af;    /* yellow */
-  --green: #a6e3a1;     /* green */
-  --red: #f38ba8;       /* red */
-  --border: #313244;    /* surface0 */
-  --subtext0: #a6adc8;  /* subtext0 — secondary/toolbar text, dimmer than --fg but lighter than --muted */
+  --bg: var(--base00);
+  --bg-elev: var(--base01); /* elevated surfaces: dropdowns, popovers */
+  --border: var(--base02); /* general borders, hover/active backgrounds */
+  --purple-dim: var(--base03); /* subtle borders, terminal chrome, badge bg */
+  --fg: var(--base05);
+  --red: var(--base08); /* errors, fail state */
+  --amber: var(--base09); /* warnings, pending / running state */
+  --yellow: var(--base0A); /* flash messages, mild warnings */
+  --green: var(--base0B); /* success, ok state */
+  --cyan: var(--base0C); /* tool-use events, info accents */
+  --blue: var(--base0D); /* links, interactive accent (distinct from cyan) */
+  --purple: var(--base0E); /* accent — active tabs, links, highlights */
+  --pink: var(--base0F); /* thinking events */
+
+  /* Off-base16 (no exact slot) — derived from base16 so they still track
+     a swap. Each is pixel-identical to its prior literal under the
+     default palette: --crust is a darkened bg; --muted / --subtext0 are
+     foreground↔background blends (two levels of dimmed text). */
+  --crust: color-mix(in srgb, var(--base00) 58%, #000); /* terminal / code bg, below --bg */
+  --muted: color-mix(in srgb, var(--base05) 55.5%, var(--base00)); /* secondary / dimmed text */
+  --subtext0: color-mix(in srgb, var(--base05) 77.7%, var(--base00)); /* toolbar/status text; dimmer than --fg, lighter than --muted */
 }