Control scale: Button/IconButton primitives, two-height tokens, app-wide migration

src/app/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react';
+import { Button } from './components/Button';
 import { ConfirmDialog } from './components/ConfirmDialog';
 import { LivePreview } from './components/LivePreview';
 import { ModalShell } from './components/ModalShell';
@@ -80,52 +81,46 @@ export function App() {
             better at low emphasis). The utilities are ghost (borderless) buttons
             with a leading icon for scanning; a divider then sets off Donate — the
             one solicitation, given a soft-accent wash — and the theme toggle. */}
-        <button
-          type="button"
-          className={styles.headerButton}
+        <Button
+          variant="ghost"
           onClick={() => openModal('datasets')}
           aria-keyshortcuts="Meta+K Control+K"
           title="Datasets (⌘/Ctrl+K)"
         >
           <Icon name="dataset" />
           Datasets
-        </button>
-        <button
-          type="button"
-          className={styles.headerButton}
+        </Button>
+        <Button
+          variant="ghost"
           onClick={() => fileInputRef.current?.click()}
           title="Import a workspace JSON file"
         >
           <Icon name="import" />
           Import
-        </button>
-        <button
-          type="button"
-          className={styles.headerButton}
+        </Button>
+        {/* TODO: two controls labelled "Export" are visible at once (this
+            workspace export + the preview pane's per-chart export) — rename or
+            differentiate (docs/ux-second-pass.md). */}
+        <Button
+          variant="ghost"
           onClick={() => exportWorkspace()}
           title="Export your workspace to a JSON file"
         >
           <Icon name="export" />
           Export
-        </button>
-        <button
-          type="button"
-          className={styles.headerButton}
+        </Button>
+        <Button
+          variant="ghost"
           onClick={() => openModal('about')}
           title="About, keyboard shortcuts, and privacy information"
         >
           <Icon name="info" />
           About
-        </button>
+        </Button>
         <span className={styles.headerDivider} aria-hidden="true" />
-        <button
-          type="button"
-          className={`${styles.headerButton} ${styles.donate}`}
-          onClick={() => openModal('donate')}
-          title="Support Astrolabe"
-        >
+        <Button variant="soft-accent" onClick={() => openModal('donate')} title="Support Astrolabe">
           Donate
-        </button>
+        </Button>
         <ThemeToggle />
         {/* Hidden picker for Import; restricted to JSON (spec §08). */}
         <input