Add dark/light theme toggle to the web companion

[isaacsight]

What

Add a toggle in the web companion (kernel.chat) that lets users switch between dark mode (current default) and a light mode theme.

Why

The web companion currently only supports dark mode via `[data-theme="dark"]` CSS selectors. Some users prefer light mode, especially in bright environments or for accessibility reasons. The CSS token system already defines light-compatible base values (the `:root` block uses ivory/slate palette), so the infrastructure is partially there.

Suggested approach

1. CSS: The `:root` block in `src/index.css` already defines light-mode-compatible tokens (ivory backgrounds, dark text). The `[data-theme="dark"]` block (line ~113) overrides these for dark mode. To support toggling:

   • Ensure the `:root` tokens work as a standalone light theme.
   • Audit components that hardcode dark colors (e.g., `background: #1C1A18`) and replace with CSS custom properties.

2. State: Add a `theme` field to the Zustand store (persisted via `persist` middleware, store name: `sovereign-kernel`). Values: `'light' | 'dark' | 'system'`.

3. Toggle component: Add a small toggle button (sun/moon icons) in the settings panel or sidebar. On click, update the Zustand store and set `document.documentElement.dataset.theme`.

4. System preference: For `'system'` mode, use `window.matchMedia('(prefers-color-scheme: dark)')` and listen for changes.

5. CSS prefix: All new classes should use the `ka-` prefix (project convention). No Tailwind.

Files to look at

• `src/index.css` — Design tokens; `:root` (light) and `[data-theme="dark"]` (dark) blocks
• `src/store.ts` or wherever the Zustand store is defined — Add `theme` field
• `src/components/` — Existing settings panel for placing the toggle
• `src/App.tsx` or `src/main.tsx` — Apply `data-theme` attribute on mount