feat(11-02): replace 1113 old CSS variable references with Paperclip design tokens

- Replace all bg-[color:var(--old)] with bg-background/bg-card/bg-muted/bg-primary etc.
- Replace all text-[color:var(--old)] with text-foreground/text-muted-foreground/text-primary etc.
- Replace all border-[color:var(--line)] with border-border
- Replace all inline var(--old) with var(--new) equivalents
- Replace all rounded-[6px]/rounded-[8px] with rounded-lg
- Replace .surface class with bg-card border border-border shadow-sm
- Replace .focus-ring class with focus-visible Tailwind utilities
- Replace .mono class with font-mono
- Replace data-theme attribute with class-based dark mode
- 99 files updated, ~1265 lines changed, zero old references remaining

src/renderer/components/execution/ActivityList.tsx

@@ -43,15 +43,15 @@ export function ActivityList({ activity }: { activity: ActivityRecord[] }) {
     <div className="space-y-3">
       <div className="flex items-center gap-3">
         <div className="relative flex-1">
-          <MagnifyingGlass size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-[color:var(--muted)]" />
-          <input type="text" className="focus-ring w-full rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] py-2.5 pl-8 pr-3.5 text-[13px] text-[color:var(--text)] placeholder:text-[color:var(--muted)]" value={search} onChange={(e) => setSearch(e.target.value)} placeholder={t("exec.searchActivity")} />
+          <MagnifyingGlass size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <input type="text" className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 w-full rounded-lg border border-border bg-card py-2.5 pl-8 pr-3.5 text-[13px] text-foreground placeholder:text-muted-foreground" value={search} onChange={(e) => setSearch(e.target.value)} placeholder={t("exec.searchActivity")} />
         </div>
         <Select value={entityFilter} onChange={setEntityFilter} options={ENTITY_TYPE_OPTIONS.map((v) => ({ value: v, label: v === "all" ? t("exec.allTypes") : v }))} />
       </div>
       {filtered.length === 0 ? <EmptyState title={t("exec.noMatchingActivity")} /> : (
         <div
           ref={parentRef}
-          className="h-full max-h-[600px] overflow-auto border-y border-[color:var(--line)]"
+          className="h-full max-h-[600px] overflow-auto border-y border-border"
           role="listbox"
           aria-label="Activity log"
           onKeyDown={handleKeyDown}
@@ -81,17 +81,17 @@ export function ActivityList({ activity }: { activity: ActivityRecord[] }) {
                     width: "100%",
                     transform: `translateY(${virtualRow.start}px)`,
                   }}
-                  className={`focus-ring outline-none border-b border-[color:var(--line)] px-4 py-3 last:border-b-0 ${virtualRow.index === focusedIndex ? "ring-1 ring-[color:var(--accent)] ring-inset" : ""}`}
+                  className={`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 outline-none border-b border-border px-4 py-3 last:border-b-0 ${virtualRow.index === focusedIndex ? "ring-1 ring-[color:var(--primary)] ring-inset" : ""}`}
                 >
                   <div className="mb-2 flex items-center justify-between gap-3">
                     <div className="flex min-w-0 items-center gap-2">
-                      <EntityIcon size={14} weight="duotone" className="shrink-0 text-[color:var(--muted)]" />
-                      <div className="truncate text-[13px] text-[color:var(--text)]">{entry.action}</div>
+                      <EntityIcon size={14} weight="duotone" className="shrink-0 text-muted-foreground" />
+                      <div className="truncate text-[13px] text-foreground">{entry.action}</div>
                     </div>
-                    <div className="mono text-[11px] text-[color:var(--muted)]">{formatTime(entry.createdAt)}</div>
+                    <div className="font-mono text-[11px] text-muted-foreground">{formatTime(entry.createdAt)}</div>
                   </div>
-                  <div className="flex items-center gap-2 text-[13px] text-[color:var(--muted)]">
-                    <span className="font-medium text-[color:var(--muted-strong)]">{entry.actor}</span>
+                  <div className="flex items-center gap-2 text-[13px] text-muted-foreground">
+                    <span className="font-medium text-muted-foreground">{entry.actor}</span>
                     <span>·</span>
                     <span className="truncate">{entry.detail || `${entry.entityType}:${entry.entityId}`}</span>
                   </div>