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

src/app/components/Button.module.css

@@ -0,0 +1,107 @@
+/*
+ * Button — shared look for every textual action button (arch 09 §4). Owned here,
+ * once. Heights come from the control scale in tokens.css; no other button
+ * heights exist in the app.
+ */
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  height: var(--control-height);
+  padding: 0 var(--space-3);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background var(--dur-fast) var(--ease),
+    color var(--dur-fast) var(--ease);
+}
+
+.lg {
+  height: var(--control-height-lg);
+  padding: 0 var(--space-4);
+}
+
+.button:disabled {
+  cursor: default;
+  opacity: 0.45;
+}
+
+/* --- primary: filled accent; darkens on hover (filled buttons darken, they
+       don't fill — arch 09 §4) --- */
+.primary {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.primary:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+/* --- secondary: bordered with a --bg fill — the same field-on-layer treatment
+       as inputs/selects (arch 09 §4: a bordered control on a gray panel goes
+       white, never a darker gray); hover steps one elevation above the surface
+       (see --control-hover-fill in Button.tsx header) --- */
+.secondary {
+  border-color: var(--border-strong);
+  background: var(--bg);
+}
+
+.secondary:hover:not(:disabled) {
+  background: var(--control-hover-fill, var(--layer-01));
+}
+
+/* --- ghost: borderless utility; recedes until hover --- */
+.ghost:hover:not(:disabled) {
+  background: var(--control-hover-fill, var(--layer-01));
+}
+
+/* A ghost acting as an open disclosure trigger holds the pressed fill. */
+.ghost[aria-expanded='true'] {
+  background: var(--layer-02);
+}
+
+/* --- soft-accent: tinted-but-quiet solicitation (e.g. Donate) --- */
+.softAccent {
+  background: var(--accent-soft);
+  color: var(--accent-hover);
+}
+
+.softAccent:hover:not(:disabled) {
+  background: var(--accent-soft-hover);
+  color: var(--accent-hover);
+}
+
+/* --- danger: filled error for destructive confirm actions --- */
+.danger {
+  background: var(--support-error);
+  color: var(--on-status);
+}
+
+.danger:hover:not(:disabled) {
+  filter: brightness(0.92);
+}
+
+/* --- danger-outline: secondary geometry, red label; fills solid red on
+       hover/focus so the destructive intent is signalled before it acts --- */
+.dangerOutline {
+  border-color: var(--border-strong);
+  background: var(--bg);
+  color: var(--support-error);
+}
+
+.dangerOutline:hover:not(:disabled),
+.dangerOutline:focus-visible {
+  background: var(--support-error);
+  border-color: transparent;
+  color: var(--on-status);
+}