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/social/AddAccountDialog.tsx

@@ -28,29 +28,29 @@ export function AddAccountDialog({ onAdd, onClose }: AddAccountDialogProps) {
         initial={{ scale: 0.95, opacity: 0 }}
         animate={{ scale: 1, opacity: 1 }}
         exit={{ scale: 0.95, opacity: 0 }}
-        className="w-full max-w-[420px] rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel)] p-6 shadow-xl"
+        className="w-full max-w-[420px] rounded-lg border border-border bg-card p-6 shadow-xl"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="mb-5 flex items-center justify-between">
-          <h3 className="text-[16px] font-bold text-[color:var(--text)]">Add Social Account</h3>
-          <button type="button" onClick={onClose} className="rounded-[6px] p-1 text-[color:var(--muted)] hover:bg-[color:var(--panel-soft)]">
+          <h3 className="text-[16px] font-bold text-foreground">Add Social Account</h3>
+          <button type="button" onClick={onClose} className="rounded-lg p-1 text-muted-foreground hover:bg-muted">
             <X size={18} />
           </button>
         </div>
 
         <div className="space-y-4">
           <div>
-            <label className="mb-1.5 block text-[12px] font-medium text-[color:var(--muted-strong)]">Platform</label>
+            <label className="mb-1.5 block text-[12px] font-medium text-muted-foreground">Platform</label>
             <div className="grid grid-cols-3 gap-1.5">
               {(Object.entries(platformConfig) as [SocialPlatform, typeof platformConfig.twitter][]).map(([key, config]) => (
                 <button
                   key={key}
                   type="button"
                   onClick={() => setPlatform(key)}
-                  className={`flex items-center gap-2 rounded-[8px] border px-3 py-2 text-[11px] font-medium transition ${
+                  className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-[11px] font-medium transition ${
                     platform === key
-                      ? "border-[color:var(--accent)] bg-[color:var(--accent-soft)] text-[color:var(--accent)]"
-                      : "border-[color:var(--line)] text-[color:var(--muted)] hover:border-[color:var(--line-strong)]"
+                      ? "border-[color:var(--primary)] bg-accent text-primary"
+                      : "border-border text-muted-foreground hover:border-border"
                   }`}
                 >
                   <span style={{ color: config.color }}>
@@ -76,17 +76,17 @@ export function AddAccountDialog({ onAdd, onClose }: AddAccountDialogProps) {
             placeholder="Your display name"
           />
 
-          <div className="rounded-[8px] border border-[color:var(--line)] bg-[color:var(--panel-soft)] px-4 py-3">
+          <div className="rounded-lg border border-border bg-muted px-4 py-3">
             <label className="flex items-center gap-3">
               <input
                 type="checkbox"
                 checked={requireApproval}
                 onChange={(e) => setRequireApproval(e.target.checked)}
-                className="h-4 w-4 rounded border-[color:var(--line)] accent-[color:var(--accent)]"
+                className="h-4 w-4 rounded border-border accent-[color:var(--primary)]"
               />
               <div>
-                <div className="text-[12px] font-medium text-[color:var(--text)]">Require Board Approval for Posts</div>
-                <div className="mt-0.5 text-[10px] text-[color:var(--muted)]">
+                <div className="text-[12px] font-medium text-foreground">Require Board Approval for Posts</div>
+                <div className="mt-0.5 text-[10px] text-muted-foreground">
                   Agents must get approval before publishing content to this account
                 </div>
               </div>
@@ -98,7 +98,7 @@ export function AddAccountDialog({ onAdd, onClose }: AddAccountDialogProps) {
           <button
             type="button"
             onClick={onClose}
-            className="rounded-[8px] px-4 py-2 text-[12px] font-medium text-[color:var(--muted)] transition hover:bg-[color:var(--panel-soft)]"
+            className="rounded-lg px-4 py-2 text-[12px] font-medium text-muted-foreground transition hover:bg-muted"
           >
             Cancel
           </button>