refactor(design): migrate hardcoded colors to kami tokens

Purge remaining hardcoded color values from the component layer and main
process so every surface flows through the kami token system.

src/main/desktop-shell-window.ts
  - BrowserWindow.backgroundColor no longer paints pure white before the
    renderer mounts. It now picks kami parchment (#F5F4ED) or deep-dark
    (#141413) based on nativeTheme.shouldUseDarkColors so the startup
    flash respects the user's OS theme preference.

src/shared/constants.ts
  - DEPARTMENT_COLORS collapses 12 unrelated hex brand colors (violet,
    red, green, cyan, pink, ...) into six kami tokens: var(--primary),
    var(--kami-ink), var(--kami-dark-warm), var(--kami-charcoal),
    var(--kami-olive), var(--kami-stone). Departments are distinguished
    by warm-neutral ramp + ink-blue, never by second chromatic hue.

src/renderer/components/communication/{MessageItem,SearchResults}.tsx
  - Replace the string-concat tint pattern `${color}18` with
    color-mix(in oklab, ${color}, transparent 91%). The old pattern
    produced invalid CSS (e.g. `var(--primary)18`) whenever `color`
    was a CSS custom property, silently falling back to no background.
    color-mix works for both hex and var() inputs, eliminating the
    latent bug at the source.

src/renderer/components/ui/ActionButton.tsx
  - Replace hand-rolled rgba(74,93,122,0.35) and rgba(220,53,69,0.3)
    drop shadows with kami ring shadows routed through color-mix over
    var(--primary) and var(--destructive).

src/renderer/views/CommandPaletteView.tsx
  - Replace rgba(15,23,42,0.08) cold-slate shadow with a kami whisper
    shadow driven by color-mix over var(--foreground).

src/renderer/components/skills/SkillAgentToggles.tsx
src/renderer/components/execution/ModelManagementShared.tsx
  - Toggle thumbs switch from bg-white to bg-background so they
    inherit parchment in light mode and deep-dark in dark mode,
    removing the last pure-white surfaces from the renderer.

Third-party brand hex values in src/renderer/components/social/
social-config.ts are retained: they represent external brand identity
(Twitter blue, YouTube red, ...), not kami chrome, and collapsing them
to one hue would destroy recognition.

Typecheck clean. No business-logic signatures changed.

src/renderer/components/communication/MessageItem.tsx

@@ -45,7 +45,7 @@ export const AgentAvatar = memo(function AgentAvatar({
   return (
     <div
       className={`flex shrink-0 items-center justify-center rounded-full font-bold ${sizeClass}`}
-      style={{ backgroundColor: `${color}18`, color }}
+      style={{ backgroundColor: `color-mix(in oklab, ${color}, transparent 91%)`, color }}
     >
       {initials}
     </div>

src/renderer/components/communication/SearchResults.tsx

@@ -158,7 +158,7 @@ export function SearchResults({ results, query, loading, agents, onNavigateToRes
                       </span>
                       <span
                         className="inline-flex shrink-0 items-center gap-1 rounded-full px-1.5 py-0.5 text-[11px] font-medium"
-                        style={{ backgroundColor: `${config.color}18`, color: config.color }}
+                        style={{ backgroundColor: `color-mix(in oklab, ${config.color}, transparent 91%)`, color: config.color }}
                       >
                         <ChannelIcon size={10} weight="bold" />
                         {t(config.labelKey)}

src/renderer/components/execution/ModelManagementShared.tsx

@@ -77,7 +77,7 @@ export function ToggleSwitch({ checked, onChange, label }: { checked: boolean; o
       aria-label={label}
     >
       <span
-        className={`inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform ${checked ? "translate-x-[18px]" : "translate-x-[3px]"}`}
+        className={`inline-block h-3.5 w-3.5 rounded-full bg-background shadow-sm transition-transform ${checked ? "translate-x-[18px]" : "translate-x-[3px]"}`}
       />
     </button>
   );

src/renderer/components/skills/SkillAgentToggles.tsx

@@ -90,7 +90,7 @@ export function SkillAgentToggles(props: SkillAgentTogglesProps) {
               }`}
             >
               <span
-                className={`block h-[14px] w-[14px] rounded-full bg-white shadow-sm transition-transform ${
+                className={`block h-[14px] w-[14px] rounded-full bg-background shadow-sm transition-transform ${
                   isAssigned ? "translate-x-[14px]" : "translate-x-0"
                 }`}
               />

src/renderer/components/ui/ActionButton.tsx

@@ -25,9 +25,9 @@ export function ActionButton({
   const isDisabled = loading || disabled;
   const toneClass =
     tone === "accent"
-      ? "border-transparent bg-primary text-primary-foreground shadow-[0_1px_3px_rgba(74,93,122,0.35)] hover:bg-primary/90"
+      ? "border-transparent bg-primary text-primary-foreground shadow-[0_0_0_1px_color-mix(in_oklab,var(--primary)_40%,transparent)] hover:bg-primary/90"
       : tone === "danger"
-        ? "border-transparent bg-destructive text-primary-foreground shadow-[0_1px_3px_rgba(220,53,69,0.3)] hover:brightness-90"
+        ? "border-transparent bg-destructive text-primary-foreground shadow-[0_0_0_1px_color-mix(in_oklab,var(--destructive)_40%,transparent)] hover:brightness-90"
         : "border-border bg-card text-foreground hover:bg-muted";
 
   const sizing = iconOnly