Feat v0.6.11 CSS deduplication (#46)

Retire old primitives.css button/toast/popup-menu/dropdown/tabs systems.
sw-primitives.css is now the single source of truth.

- Migrate 29 files from .btn-* to .sw-btn .sw-btn--{variant} .sw-btn--{size}
- Delete old toast, popup-menu, dropdown, tabs CSS (no JS references)
- Resolve .sw-dropdown and .sw-tabs class name collisions
- Resolve .settings-section duplicate (modals.css removed, surfaces.css authoritative)
- Add .sw-btn--success variant, --bg-active CSS variable
- Fix sdk-test-runner wrong variable names, icd-test-runner button fallbacks
- Add scripts/audit-css-collisions.sh

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/css/primitives.css

@@ -1,27 +1,11 @@
 /* ── primitives.css ──────────────────────────
-   Buttons, forms, toasts, popups, toggles, badges
+   Forms, toggles, badges, mode selector, REPL, SDK primitives.
+   Buttons/toasts/popup-menus migrated to sw-primitives.css (v0.6.11).
    ──────────────────────────────────────────── */
 
 /* ── Buttons ─────────────────────────────── */
 
 button { font-family: var(--font); cursor: pointer; }
-.btn-primary {
-    background: var(--accent); color: var(--text-on-color); border: none;
-    padding: 8px 16px; border-radius: var(--radius);
-    font-weight: 500; font-size: 13px;
-    transition: background var(--transition);
-}
-.btn-primary:hover { background: var(--accent-hover); }
-.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
-.btn-full { width: 100%; }
-.btn-small {
-    background: var(--bg-raised); border: 1px solid var(--border);
-    color: var(--text-2); padding: 6px 12px; border-radius: var(--radius);
-    font-size: 12px; transition: all var(--transition);
-}
-.btn-small:hover { background: var(--bg-hover); color: var(--text); }
-.btn-small.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-color); }
-.btn-danger { background: var(--danger); color: var(--text-on-color); border: none; border-radius: var(--radius); }
 
 
 /* ── Forms ────────────────────────────────── */
@@ -61,20 +45,7 @@ select option { background: var(--bg-surface); color: var(--text); }
 .checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin: 0.5rem 0; color: var(--text-2); }
 
 
-/* ── Toast ────────────────────────────────── */
-
-.toast-container { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: 0.5rem; }
-.toast {
-    background: var(--bg-surface); border: 1px solid var(--border);
-    border-radius: var(--radius); padding: 8px 16px; font-size: 13px;
-    display: flex; align-items: center; gap: 8px;
-    animation: toast-in 0.25s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-}
-.toast.error { border-color: var(--danger); }
-.toast.warning { border-color: var(--warning); }
-.toast.success { border-color: var(--success); }
-.toast button { background: none; border: none; color: var(--text-3); cursor: pointer; }
-@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
+/* Toast system — see sw-primitives.css (.sw-toast) */
 
 
 /* ── Mode Selector (v0.21.3) ───────────── */
@@ -170,29 +141,7 @@ select option { background: var(--bg-surface); color: var(--text); }
 .repl-json-toggle:hover { color: var(--accent); }
 
 
-/* ── Popup Menu (shared base) ───────────── */
-
-.popup-menu {
-    display: none; position: absolute; z-index: 200;
-    background: var(--bg-raised); border: 1px solid var(--border-light);
-    border-radius: var(--radius); padding: 4px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-    min-width: 160px;
-}
-.popup-menu.open { display: block; }
-.popup-menu-item {
-    display: flex; align-items: center; gap: 10px;
-    padding: 8px 12px; border-radius: var(--radius);
-    background: none; border: none; color: var(--text-2);
-    cursor: pointer; font-size: 13px; width: 100%;
-    transition: background var(--transition), color var(--transition);
-}
-.popup-menu-item:hover { background: var(--bg-hover); color: var(--text); }
-.popup-menu-item.disabled { opacity: 0.4; pointer-events: none; }
-.popup-menu-danger:hover { color: var(--danger); }
-.popup-menu-icon { flex-shrink: 0; display: flex; align-items: center; }
-.popup-menu-hint { margin-left: auto; font-size: 11px; color: var(--text-3); }
-.popup-menu-divider { height: 1px; background: var(--border); margin: 4px 8px; }
+/* Popup menu — see sw-primitives.css (.sw-menu) */
 
 /* ── Tools Toggle ────────────────────────── */
 
@@ -354,11 +303,7 @@ select option { background: var(--bg-surface); color: var(--text); }
 .toggle-btn.active { background: var(--bg-raised); color: var(--text); }
 .toggle-btn:hover { color: var(--text-2); }
 
-.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
-.btn-ghost:hover { background: var(--bg-hover); }
-.btn-subtle { background: var(--accent-dim); color: var(--accent); border: none; }
-.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 6px; cursor: pointer; font-weight: 500; font-family: inherit; }
-.btn-md { padding: 7px 15px; font-size: 13px; border-radius: var(--radius); cursor: pointer; font-weight: 500; font-family: inherit; }
+/* Button variants — see sw-primitives.css (.sw-btn--*) */
 
 /* ── Badge ───────────────────────────────── */
 .badge {
@@ -439,15 +384,7 @@ select option { background: var(--bg-surface); color: var(--text); }
     border: none; height: 1px; background: var(--border, #2a2a2e); margin: 4px 0;
 }
 
-/* Dropdown — styled native select */
-.sw-dropdown {
-    background: var(--bg-raised, #222); color: var(--text, #eee);
-    border: 1px solid var(--border, #2e2e35); border-radius: var(--radius, 6px);
-    padding: 6px 10px; font-size: 13px; font-family: inherit;
-    cursor: pointer; min-width: 100px;
-}
-.sw-dropdown:hover { border-color: var(--border-light, #444); }
-.sw-dropdown:focus { outline: none; border-color: var(--accent, #b38a4e); }
+/* Dropdown — see sw-primitives.css (.sw-dropdown) */
 
 /* Toolbar — horizontal button row */
 .sw-toolbar {
@@ -455,22 +392,7 @@ select option { background: var(--bg-surface); color: var(--text); }
     padding: 4px 0;
 }
 
-/* Tabs — tabbed content container */
-.sw-tabs { display: flex; flex-direction: column; height: 100%; }
-.sw-tabs-bar {
-    display: flex; gap: 0; border-bottom: 1px solid var(--border, #2e2e35);
-    flex-shrink: 0;
-}
-.sw-tab-btn {
-    padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent;
-    color: var(--text-2, #999); cursor: pointer; font-size: 12px; font-weight: 600;
-    font-family: inherit; text-transform: uppercase; letter-spacing: 0.5px;
-    transition: color 0.15s, border-color 0.15s;
-}
-.sw-tab-btn:hover { color: var(--text, #eee); }
-.sw-tab-btn--active { color: var(--accent, #b38a4e); border-bottom-color: var(--accent, #b38a4e); }
-.sw-tabs-content { flex: 1; min-height: 0; overflow: hidden; }
-.sw-tab-panel { height: 100%; overflow-y: auto; }
+/* Tabs — see sw-primitives.css (.sw-tabs) */
 
 /* ── Responsive: Mobile ───────────────────── */