swarm-ui: respect prefers-color-scheme for a light theme default

colors.css shipped one fixed dark (Catppuccin Mocha) palette with no
light variant and no OS/browser-preference detection, so anyone
without a stylix-managed session (a phone browser, a future PWA
install) got the dark palette regardless of their light-mode
preference. This is an accessibility gap, not a cosmetic one - some
people need light for low-vision/contrast reasons, others need dark
for photosensitivity, the same reasoning that already gates
prefers-reduced-motion elsewhere.

Add a Catppuccin Latte row behind `@media (prefers-color-scheme:
light)`, ported through the identical base16 slot mapping (including
the existing sky-over-teal base0C substitution) so a swap between the
two rows never changes what a slot means. A stylix-generated
colors.css replaces the file wholesale with a single unconditional
:root block and has no media query in it, so a themed deployment is
unaffected either way.

Verified with headless chromium screenshots forcing both
prefers-color-scheme values against the built swarm-ui bundle - both
render with correct contrast, and the default (no forced preference)
render matches the light row.

docs/web-ui/css-vars.md

@@ -17,6 +17,14 @@ reference the **semantic** names and must **not** redeclare them or reach
 for the raw `--baseNN` slots directly. (`base.css` holds only the shared
 `body` typography — it references the palette but no longer defines it.)
 
+`colors.css` ships two rows of the same 16 slots: an unconditional
+Catppuccin Mocha (dark) default, and a Catppuccin Latte (light) row gated
+behind `@media (prefers-color-scheme: light)` — both ported through the
+identical slot mapping, so which row is active never changes what a slot
+means. This is the OS/browser-level default only; it's what a client with
+no more specific theme decision gets (see "Theme swapping" below for how a
+stylix deployment or a future per-user override supersede it).
+
 Both are deliberately standalone, not `@import`ed into the page bundles:
 each package re-exports them (`src/{colors,theme}.css` →
 `@import "@hive/shared/…"`) so esbuild emits its own
@@ -114,7 +122,14 @@ to `theme.css` (the "Derives from" column above) — a generator never
 needs to know our var names, and `theme.css` + the page bundles stay
 untouched.
 
-`colors.css` base16 slot defaults (Catppuccin Mocha):
+**Two rows, one contract.** `colors.css` ships both a dark default
+(Catppuccin Mocha, unconditional) and a light default (Catppuccin Latte,
+behind `@media (prefers-color-scheme: light)`) — a theme generator that
+overrides the file wholesale (e.g. the stylix path, which writes a single
+unconditional `:root` block with no media query) supersedes both rows at
+once, same as today.
+
+`colors.css` base16 slot defaults (Catppuccin Mocha, dark default):
 
 | Slot     | Default   | Standard base16 role | Mapped to                                           |
 | -------- | --------- | -------------------- | --------------------------------------------------- |

frontend/packages/shared/src/colors.css

@@ -29,3 +29,43 @@
   --base0E: #cba6f7; /* magenta / mauve */
   --base0F: #f5c2e7; /* extra accent — pink */
 }
+
+/* Light-mode default — Catppuccin Latte, the standard light complement
+   to the Mocha defaults above, ported through the identical base16
+   slot mapping (down to the same base0C sky-over-teal substitution) so
+   a swap between the two rows never changes which semantic role a slot
+   plays. This is a *default*, not a user preference store: it only
+   applies when nothing more specific has already decided the palette.
+   A stylix-generated colors.css (nix/host-modules/hive-c0re/theme.nix)
+   replaces this entire file wholesale — a fixed, unconditional `:root`
+   block with no media query in it at all — so a stylix-themed
+   deployment is naturally unaffected by, and never fights, this block.
+   Some people need light for low-vision/contrast reasons, others need
+   dark for photosensitivity, so respect the OS/browser signal by
+   default the same way `prefers-reduced-motion` already is elsewhere —
+   rather than always forcing the bundled dark palette on a client with
+   no stylix session of its own (e.g. a phone browser hitting swarm-ui
+   directly). A future per-user override takes precedence over this
+   media query by simply setting the vars later in the cascade (e.g.
+   via an inline `style` on `:root`, which always outranks a
+   stylesheet rule). */
+@media (prefers-color-scheme: light) {
+  :root {
+    --base00: #eff1f5; /* default bg */
+    --base01: #e6e9ef; /* lighter bg (elevated surfaces) */
+    --base02: #ccd0da; /* selection / surface — borders */
+    --base03: #bcc0cc; /* comments / dim surface */
+    --base04: #acb0be; /* dark foreground */
+    --base05: #4c4f69; /* default foreground */
+    --base06: #dc8a78; /* light foreground */
+    --base07: #7287fd; /* lightest */
+    --base08: #d20f39; /* red */
+    --base09: #fe640b; /* orange / peach */
+    --base0A: #df8e1d; /* yellow */
+    --base0B: #40a02b; /* green */
+    --base0C: #04a5e5; /* cyan (our sky — note: Catppuccin's base0C is teal) */
+    --base0D: #1e66f5; /* blue */
+    --base0E: #8839ef; /* magenta / mauve */
+    --base0F: #ea76cb; /* extra accent — pink */
+  }
+}