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/dashboard/MetricsGrid.tsx

@@ -16,41 +16,41 @@ export function MetricCard({
   subtitle?: string;
 }) {
   const toneMap = {
-    default: "text-[color:var(--text)]",
-    success: "text-[color:var(--success)]",
-    warn: "text-[color:var(--warn)]",
-    danger: "text-[color:var(--danger)]",
-    accent: "text-[color:var(--accent)]",
+    default: "text-foreground",
+    success: "text-green-600 dark:text-green-400",
+    warn: "text-yellow-600 dark:text-yellow-400",
+    danger: "text-destructive",
+    accent: "text-primary",
   };
   const bgMap = {
-    default: "bg-[color:var(--panel-soft)]",
-    success: "bg-[color:var(--success-soft)]",
-    warn: "bg-[color:var(--warn-soft)]",
-    danger: "bg-[color:var(--danger-soft)]",
-    accent: "bg-[color:var(--accent-soft)]",
+    default: "bg-muted",
+    success: "bg-green-100 dark:bg-green-900/50",
+    warn: "bg-yellow-100 dark:bg-yellow-900/50",
+    danger: "bg-red-100 dark:bg-red-900/50",
+    accent: "bg-accent",
   };
 
   const borderMap = {
     default: "border-l-transparent",
-    success: "border-l-[color:var(--success)]",
-    warn: "border-l-[color:var(--warn)]",
-    danger: "border-l-[color:var(--danger)]",
-    accent: "border-l-[color:var(--accent)]",
+    success: "border-l-[color:var(--primary)]",
+    warn: "border-l-[color:var(--destructive)]",
+    danger: "border-l-[color:var(--destructive)]",
+    accent: "border-l-[color:var(--primary)]",
   };
 
   return (
     <button
       type="button"
       onClick={onClick}
-      className={`focus-ring flex items-center gap-4 rounded-[8px] border border-l-[3px] border-[color:var(--line)] bg-[color:var(--panel)] px-4 py-4 text-left transition duration-150 hover:border-[color:var(--line-strong)] hover:shadow-sm ${borderMap[tone]}`}
+      className={`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 flex items-center gap-4 rounded-lg border border-l-[3px] border-border bg-card px-4 py-4 text-left transition duration-150 hover:border-border hover:shadow-sm ${borderMap[tone]}`}
     >
-      <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-[8px] ${bgMap[tone]}`}>
+      <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-lg ${bgMap[tone]}`}>
         <Icon size={24} weight="fill" className={toneMap[tone]} />
       </div>
       <div className="min-w-0 flex-1">
-        <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-[color:var(--muted)]">{label}</div>
+        <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">{label}</div>
         <div className={`text-[28px] font-bold tracking-[-0.02em] leading-none ${toneMap[tone]}`} style={{ fontVariantNumeric: "tabular-nums" }}>{value}</div>
-        {subtitle ? <div className="mt-1.5 truncate text-[11px] font-medium text-[color:var(--muted)]">{subtitle}</div> : null}
+        {subtitle ? <div className="mt-1.5 truncate text-[11px] font-medium text-muted-foreground">{subtitle}</div> : null}
       </div>
     </button>
   );