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

docs/architecture/visual-specimen.html

@@ -44,6 +44,12 @@
         --radius: 0px;
         --border-width: 1px;
 
+        /* Control scale — every interactive control is one of exactly two
+           heights (arch 09 §4): 32px standard, 40px for standalone primary
+           CTAs and modal footers. */
+        --control-height: 32px;
+        --control-height-lg: 40px;
+
         /* Motion — productive only */
         --dur-fast: 70ms;
         --dur-fast-2: 110ms;
@@ -399,26 +405,25 @@
         padding: var(--space-5);
       }
 
-      /* ----- Buttons ----- */
+      /* ----- Buttons (mirrors src/app/components/Button.module.css) ----- */
       .btn {
         font: inherit;
         font-weight: 600;
-        font-size: 14px;
+        font-size: 13px;
         cursor: pointer;
         display: inline-flex;
         align-items: center;
-        gap: var(--space-3);
-        height: 40px;
-        padding: 0 var(--space-5);
+        gap: var(--space-2);
+        height: var(--control-height);
+        padding: 0 var(--space-3);
         border: var(--border-width) solid transparent;
         border-radius: var(--radius);
         transition:
           background var(--dur-fast) var(--ease),
           border-color var(--dur-fast) var(--ease);
       }
-      .btn.sm {
-        height: 32px;
-        font-size: 13px;
+      .btn.lg {
+        height: var(--control-height-lg);
         padding: 0 var(--space-4);
       }
       .btn-primary {
@@ -429,7 +434,7 @@
         background: var(--accent-hover);
       }
       .btn-secondary {
-        background: transparent;
+        background: var(--bg);
         color: var(--text);
         border-color: var(--border-strong);
       }
@@ -947,7 +952,7 @@
 
       <!-- BUTTONS -->
       <section>
-        <h2>Buttons — square, 600 weight</h2>
+        <h2>Buttons — square, 600 weight, 32px standard / 40px lg</h2>
         <div class="row">
           <button class="btn btn-primary">Create snippet</button>
           <button class="btn btn-secondary">Duplicate</button>
@@ -956,9 +961,8 @@
           <button class="btn btn-primary" disabled>Disabled</button>
         </div>
         <div class="row" style="margin-top: var(--space-5)">
-          <button class="btn btn-primary sm">Compact</button>
-          <button class="btn btn-secondary sm">Compact</button>
-          <button class="btn btn-ghost sm">Compact</button>
+          <button class="btn btn-primary lg">Build Chart</button>
+          <button class="btn btn-secondary lg">Cancel</button>
         </div>
         <p class="cap" style="margin-top: var(--space-4)">
           Tab through to see the focus ring (2px accent outline).
@@ -972,7 +976,7 @@
           emphasis.)
         </p>
         <div class="row" style="align-items: center">
-          <button class="btn btn-ghost-util sm">
+          <button class="btn btn-ghost-util">
             <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
               <rect x="8" y="18" width="4" height="2" />
               <rect x="14" y="18" width="4" height="2" />
@@ -985,19 +989,19 @@
               /></svg
             >Datasets
           </button>
-          <button class="btn btn-ghost-util sm">
+          <button class="btn btn-ghost-util">
             <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
               <path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z" />
               <path d="M6,12l1.41,1.41L15,5.83V24h2V5.83l7.59,7.59L26,12,16,2Z" /></svg
             >Import
           </button>
-          <button class="btn btn-ghost-util sm">
+          <button class="btn btn-ghost-util">
             <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
               <path d="M26,24v4H6V24H4v4a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V24Z" />
               <path d="M26,14l-1.41-1.41L17,20.17V2H15V20.17l-7.59-7.58L6,14l10,10Z" /></svg
             >Export
           </button>
-          <button class="btn btn-ghost-util sm">
+          <button class="btn btn-ghost-util">
             <svg width="16" height="16" viewBox="0 0 32 32" style="fill: currentColor">
               <path d="M17,22V14H13v2h2v6H12v2h8V22Z" />
               <path d="M16,8a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,8Z" />
@@ -1007,7 +1011,7 @@
             >About
           </button>
           <span class="hdr-divider"></span>
-          <button class="btn btn-soft sm">Donate</button>
+          <button class="btn btn-soft">Donate</button>
         </div>
       </section>
 
@@ -1495,8 +1499,8 @@
               ><span><span class="dot draft"></span> Draft changes</span>
             </div>
             <div class="row" style="margin-top: var(--space-5)">
-              <button class="btn btn-primary sm">Publish</button>
-              <button class="btn btn-ghost sm">Revert</button>
+              <button class="btn btn-primary">Publish</button>
+              <button class="btn btn-ghost">Revert</button>
             </div>
           </div>
         </div>
@@ -1611,7 +1615,7 @@
           <div class="motion-box"></div>
         </div>
         <div class="row" style="margin-top: var(--space-5)">
-          <button class="btn btn-secondary sm" id="motionBtn">Play transition</button>
+          <button class="btn btn-secondary" id="motionBtn">Play transition</button>
           <span class="cap"
             >Neutralized automatically under <code>prefers-reduced-motion</code>.</span
           >