fix(dark-mode): sync tokens and fix black-on-black text

- global.css: dark muted #888 → #a3a3a3, dark faint #555 → #737373
  (in sync with aichatbackup token set)
- VaultDashboard: add text-foreground to root div so CSS vars
  re-resolve inside .dark scope (fixes inherited black-on-black)
- PopupApp: add initialDark prop, dark state, and
  bg-background text-foreground on root div
- StatusIndicator: replace hardcoded #fbfbfb / #000 / #e2e2e2 with
  var(--color-surface) / var(--color-foreground) / var(--color-grid)

Author: vchan-in

.memory/decisions.md

@@ -2,3 +2,5 @@
 
 Architectural commitments made in this project.
 
+
+- [dark-mode-tokens] Dark mode uses semantic CSS tokens. Never use dark:bg-[#hex] or dark:text-[#hex]. Use: text-foreground, bg-surface, bg-surface-hover, bg-surface-raised, bg-code, bg-background. FloatingDial uses CSS var() in inline styles (e.g. var(--color-surface)) since it can't use Tailwind for inline styles.

src/components/feedback/StatusIndicator.tsx

@@ -25,7 +25,7 @@ const defaultLabels: Record<SaveStatus, string> = {
 };
 
 const statusColors: Record<SaveStatus, string> = {
-  idle:   "#fbfbfb",
+  idle:   "var(--color-surface)",
   saving: "#fb631b",
   done:   "#27ae60",
   error:  "#ef4444",
@@ -38,7 +38,7 @@ export function StatusIndicator({
   labels,
 }: StatusIndicatorProps) {
   const bg = statusColors[status];
-  const textColor = status === "idle" ? "#000" : "#fff";
+  const textColor = status === "idle" ? "var(--color-foreground)" : "#fff";
   const label = { ...defaultLabels, ...labels }[status];
 
   return (
@@ -51,7 +51,7 @@ export function StatusIndicator({
           height: size,
           borderRadius: "50%",
           background: bg,
-          border: "1px solid #e2e2e2",
+          border: "1px solid var(--color-grid)",
           color: textColor,
           display: "flex",
           alignItems: "center",

src/components/views/PopupApp.tsx

@@ -16,18 +16,21 @@ interface PopupAppProps {
   loading?: boolean;
   version?: string;
   onOpenDashboard?: () => void;
+  initialDark?: boolean;
 }
 
 export function PopupApp({
   threads = [],
   loading = false,
   version = "0.1.0",
   onOpenDashboard,
+  initialDark = false,
 }: PopupAppProps) {
+  const [dark, setDark] = React.useState(initialDark);
   const countFor = (p: Provider) => threads.filter((t) => t.provider === p).length;
 
   return (
-    <div className="p-4 flex flex-col gap-4" style={{ width: 360 }}>
+    <div className={`p-4 flex flex-col gap-4 bg-background text-foreground${dark ? " dark" : ""}`} style={{ width: 360 }}>
       {/* Header */}
       <div className="flex items-center justify-between pb-3 border-b border-grid">
         <HacklmLogo size={28} />

src/components/views/VaultDashboard.tsx

@@ -59,7 +59,7 @@ export function VaultDashboard({
   const providersWithThreads = ALL_PROVIDERS.filter((p) => threads.some((t) => t.provider === p));
 
   return (
-    <div className={`flex h-screen bg-background${dark ? " dark" : ""}`}>
+    <div className={`flex h-screen bg-background text-foreground${dark ? " dark" : ""}`}>
 
       {/* ── Sidebar ─────────────────────────────────────────┤ */}
       <aside className="w-64 shrink-0 bg-surface border-r border-grid p-4 flex flex-col gap-4">

src/styles/global.css

@@ -65,8 +65,8 @@
     --color-code:           #242424;
     --color-grid:           #2a2a2a;
     --color-foreground:     #e8e8e8;
-    --color-muted:          #888888;
-    --color-faint:          #555555;
+    --color-muted:          #a3a3a3;
+    --color-faint:          #737373;
     color-scheme: dark;
   }
 }