Add in-app confirmation dialog replacing window.confirm

docs/architecture/09-visual-design.md

@@ -140,6 +140,13 @@ UI by swapping one set of values. Borrowed from Carbon's layering model:
   (filled `--accent`), **secondary** (bordered), **ghost** (text-only),
   **danger** (filled `--support-error`). 600-weight label. Clear hover/active and
   a visible focus ring.
+- **Hover is variant-specific:** filled buttons (primary/danger) **darken**
+  (`--accent-hover` / a slight brightness drop); outlined/ghost buttons **gain a
+  fill one elevation step above their surface** — on `--bg` → `--layer-01`, on a
+  `--layer-01` surface (dialogs, panels) → `--layer-02`. Filling to the _same_
+  layer as the surface reads as no hover at all (the collision that left the
+  confirm dialog's Cancel looking dead). Any button placed on an elevated surface
+  must step its hover fill up to match.
 - **Focus ring:** a 2px `--focus` outline (offset 1–2px). Always visible on
   keyboard focus — accessibility is non-negotiable (principle 4).
 - **Fields** (text, textarea, select, search): square, 1px `--border`, `--layer-01`
@@ -150,6 +157,15 @@ UI by swapping one set of values. Borrowed from Carbon's layering model:
 - **Status indicators:** a small dot/tag for draft vs. published; a dataset glyph
   when references exist. Status colors only.
 - **Toasts:** `--layer-02`, 1px border in the support color, square, brief.
+- **Dialogs (confirm / alert):** centered card on a dimmed backdrop
+  (`rgb(0 0 0 / 0.5)`), `--layer-01` fill, 1px `--border`, minimal overlay shadow,
+  square. A title, a `--text-secondary` message, and a right-aligned action row:
+  **Cancel** (secondary) + the primary, which is a **danger** button (filled
+  `--support-error`, `--on-status` label) for destructive intent. The in-app
+  replacement for `window.confirm`; see [arch 03 → Confirmation & alert dialogs](03-modal-system.md#confirmation--alert-dialogs)
+  for behavior (Carbon transactional rule: backdrop does **not** dismiss; Cancel
+  takes focus for danger). Use a dialog only when a decision is required —
+  non-blocking outcomes are **toasts**.
 - **Code / editor surfaces:** `--font-mono`, `--layer-01`, generous line-height.
 
 ---
@@ -182,6 +198,17 @@ The chart `Config` is themed to match the app, per theme:
 Plex in `base.css` → restyle existing M1 components against the tokens → align
 `vega-themes.ts`. Verify by rendering the real app, not just the specimen.
 
+**What the specimen is (and isn't).** It is the **token sandbox** (try accents,
+ramps, themes before touching `tokens.css`) and a **catalog of reusable
+primitives** in both themes — buttons, fields, tabs/status/tags, the library-row
+pattern, toasts, the overlay dialog, the code surface. It is **kept in sync** with
+those primitives: when a primitive's canonical look changes or a new one lands
+(e.g. the confirm dialog), add/update its specimen entry. It does **not** mirror
+**feature surfaces** — the Datasets / Settings / Chart Builder modals, the editor,
+the full shell — those are app screens, verified in the running app (headless
+Chrome, both themes), not catalogued here. That primitive-vs-feature line is what
+keeps the specimen finite, honest, and worth trusting.
+
 ---
 
 ## 7. Inspiration sources — where to look for more