feat(theme): dark/light mode with a Radix Colors-based palette

Adds a working Dark/Light toggle (next to the language switcher, same row
as EN/VI) and re-themes the whole dashboard, not just the handful of
components that already used semantic tokens.

- Tailwind darkMode:"class" + CSS-variable color tokens (client/src/index.css,
  tailwind.config.js): surface.0-5, border/border-light, accent/accent-hover,
  fg.primary/secondary/muted, status.success/danger/warning. One class flip
  on <html> re-themes everything — no per-element dark: variant pairs.
- useTheme() hook: localStorage-persisted, defaults to dark, no
  prefers-color-scheme fallback (client/src/hooks/useTheme.ts).
- Mechanical, table-driven migration (scripts/migrate-color-tokens.mjs,
  scripts/tokenize-status-colors.mjs, scripts/darken-status-colors.mjs) of
  every raw neutral/gray/slate + emerald/red/amber Tailwind utility across
  client/src onto the new tokens, so every badge/button/component pulls the
  same shade per status/role instead of each picking its own.
- Palette values are the literal Radix Colors (radix-ui.com/colors) scale
  constants — slate/blue/green/red/amber steps 1-12 — adopted after three
  rounds of hand-picked values that kept overshooting (flat, then too dark,
  then glaring); see docs/superpowers/specs/2026-07-31-color-redesign-
  dark-light-mode-design.md for the full history and role mapping.
- PipelineMap: done/current/failed/passed-no-evidence/detected share one
  visual language (border + text + translucent wash of the same status
  color); `current` alone stays a solid accent fill, the one state that
  gets to look bolder ("you are here").
- LaneCard: removed the stage/kind/auto-stage chips that duplicated the
  Workspace lane-detail header already showing them.

Categorical/decorative hues (violet, indigo, cyan, teal, sky, rose, pink,
orange, yellow, and blue where it plays a role-coloring part e.g. message
bubbles) are deliberately out of scope — collapsing those onto shared
tokens would erase the distinction between different kinds of thing, not
a status.

client/src/components/conversation/MarkdownContent.tsx

@@ -274,7 +274,7 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
     const codeM = rest.match(/^`([^`\n]+)`/);
     if (codeM) {
       push(
-        <code className="rounded bg-surface-4 border border-surface-3 px-1.5 py-0.5 font-mono text-[12.5px] text-amber-200">
+        <code className="rounded bg-surface-4 border border-surface-3 px-1.5 py-0.5 font-mono text-[12.5px] text-status-warning">
           {codeM[1]}
         </code>
       );
@@ -286,7 +286,7 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
     const boldM = rest.match(/^(\*\*|__)(.+?)\1/);
     if (boldM) {
       push(
-        <strong className="font-semibold text-gray-50">
+        <strong className="font-semibold text-fg-primary">
           {renderInline(boldM[2]!, `${baseKey}-b${n}`)}
         </strong>
       );
@@ -298,7 +298,9 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
     const italicM = rest.match(/^(\*|_)([^*_\n]+?)\1/);
     if (italicM) {
       push(
-        <em className="italic text-gray-200">{renderInline(italicM[2]!, `${baseKey}-i${n}`)}</em>
+        <em className="italic text-fg-secondary">
+          {renderInline(italicM[2]!, `${baseKey}-i${n}`)}
+        </em>
       );
       i += italicM[0].length;
       continue;
@@ -308,7 +310,7 @@ function renderInline(text: string, baseKey = ""): React.ReactNode[] {
     const strikeM = rest.match(/^~~(.+?)~~/);
     if (strikeM) {
       push(
-        <span className="line-through text-gray-500">
+        <span className="line-through text-fg-muted">
           {renderInline(strikeM[1]!, `${baseKey}-s${n}`)}
         </span>
       );
@@ -366,11 +368,13 @@ function renderListItem(item: string, key: string): React.ReactNode {
       <span className="inline-flex items-baseline gap-2">
         <span
           className={`inline-block w-3 h-3 rounded-sm border flex-shrink-0 translate-y-0.5 ${
-            checked ? "bg-emerald-500/40 border-emerald-400/60" : "bg-surface-4 border-surface-3"
+            checked
+              ? "bg-status-success/40 border-status-success/60"
+              : "bg-surface-4 border-surface-3"
           }`}
           aria-hidden="true"
         />
-        <span className={checked ? "text-gray-500 line-through" : ""}>
+        <span className={checked ? "text-fg-muted line-through" : ""}>
           {renderInline(taskMatch[2]!, key)}
         </span>
       </span>
@@ -386,12 +390,12 @@ interface MarkdownContentProps {
 }
 
 const HEADING_STYLES = [
-  "text-[18px] font-semibold text-gray-50 mt-2 pb-1 border-b border-surface-3",
-  "text-[16px] font-semibold text-gray-50 mt-2",
-  "text-[15px] font-semibold text-gray-100",
-  "text-sm font-semibold text-gray-100",
-  "text-sm font-medium text-gray-200",
-  "text-xs font-medium text-gray-300 uppercase tracking-wider",
+  "text-[18px] font-semibold text-fg-primary mt-2 pb-1 border-b border-surface-3",
+  "text-[16px] font-semibold text-fg-primary mt-2",
+  "text-[15px] font-semibold text-fg-primary",
+  "text-sm font-semibold text-fg-primary",
+  "text-sm font-medium text-fg-secondary",
+  "text-xs font-medium text-fg-secondary uppercase tracking-wider",
 ];
 
 export function MarkdownContent({ text, dense = false }: MarkdownContentProps) {
@@ -399,7 +403,7 @@ export function MarkdownContent({ text, dense = false }: MarkdownContentProps) {
   const gap = dense ? "space-y-1.5" : "space-y-2.5";
 
   return (
-    <div className={`text-sm text-gray-300 leading-relaxed ${gap}`}>
+    <div className={`text-sm text-fg-secondary leading-relaxed ${gap}`}>
       {blocks.map((b, idx) => {
         switch (b.kind) {
           case "code":
@@ -419,10 +423,10 @@ export function MarkdownContent({ text, dense = false }: MarkdownContentProps) {
               return (
                 <ol
                   key={idx}
-                  className="list-decimal pl-5 space-y-1 marker:text-gray-500 marker:font-mono marker:text-xs"
+                  className="list-decimal pl-5 space-y-1 marker:text-fg-muted marker:font-mono marker:text-xs"
                 >
                   {b.items.map((item, i) => (
-                    <li key={i} className="text-sm text-gray-300">
+                    <li key={i} className="text-sm text-fg-secondary">
                       {renderListItem(item, `li${idx}-${i}`)}
                     </li>
                   ))}
@@ -432,7 +436,7 @@ export function MarkdownContent({ text, dense = false }: MarkdownContentProps) {
             return (
               <ul key={idx} className="list-disc pl-5 space-y-1 marker:text-violet-400/60">
                 {b.items.map((item, i) => (
-                  <li key={i} className="text-sm text-gray-300">
+                  <li key={i} className="text-sm text-fg-secondary">
                     {renderListItem(item, `li${idx}-${i}`)}
                   </li>
                 ))}
@@ -443,7 +447,7 @@ export function MarkdownContent({ text, dense = false }: MarkdownContentProps) {
             return (
               <blockquote
                 key={idx}
-                className="relative border-l-2 border-violet-400/50 pl-3 pr-2 py-1 text-gray-400 italic bg-violet-500/[0.04] rounded-r"
+                className="relative border-l-2 border-violet-400/50 pl-3 pr-2 py-1 text-fg-secondary italic bg-violet-500/[0.04] rounded-r"
               >
                 {renderInline(b.text, `q${idx}`)}
               </blockquote>
@@ -471,7 +475,7 @@ export function MarkdownContent({ text, dense = false }: MarkdownContentProps) {
                       {b.header.map((cell, i) => (
                         <th
                           key={i}
-                          className={`px-3 py-1.5 font-semibold text-gray-200 border-b border-surface-3 ${alignClass(b.aligns[i] ?? null)}`}
+                          className={`px-3 py-1.5 font-semibold text-fg-secondary border-b border-surface-3 ${alignClass(b.aligns[i] ?? null)}`}
                         >
                           {renderInline(cell, `th${idx}-${i}`)}
                         </th>
@@ -487,7 +491,7 @@ export function MarkdownContent({ text, dense = false }: MarkdownContentProps) {
                         {row.map((cell, ci) => (
                           <td
                             key={ci}
-                            className={`px-3 py-1.5 text-gray-300 align-top ${alignClass(b.aligns[ci] ?? null)}`}
+                            className={`px-3 py-1.5 text-fg-secondary align-top ${alignClass(b.aligns[ci] ?? null)}`}
                           >
                             {renderInline(cell, `td${idx}-${ri}-${ci}`)}
                           </td>
@@ -502,7 +506,7 @@ export function MarkdownContent({ text, dense = false }: MarkdownContentProps) {
 
           case "para":
             return (
-              <p key={idx} className="text-sm text-gray-300 whitespace-pre-wrap break-words">
+              <p key={idx} className="text-sm text-fg-secondary whitespace-pre-wrap break-words">
                 {renderInline(b.text, `p${idx}`)}
               </p>
             );