Merge branch 'refactor/icon-button-outliers' into chore/reconcile-ui-review

# Conflicts:
#	frontend/src/routes/collections/[id]/+page.svelte

frontend/src/routes/+page.svelte

@@ -27,6 +27,7 @@
     import Pager from '$lib/components/Pager.svelte';
     import SegmentedControl from '$lib/components/SegmentedControl.svelte';
     import Sheet from '$lib/components/Sheet.svelte';
+    import IconButton from '$lib/components/IconButton.svelte';
     import Search from '@lucide/svelte/icons/search';
     import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
     import ArrowUpDown from '@lucide/svelte/icons/arrow-up-down';
@@ -467,9 +468,16 @@
             placeholder="Search by title or author"
             data-testid="search-input"
         />
-        <button class="icon-btn primary" type="submit" aria-label="Search" title="Search">
+        <IconButton
+            variant="primary"
+            size={36}
+            radius="md"
+            type="submit"
+            aria-label="Search"
+            title="Search"
+        >
             <Search size={18} aria-hidden="true" />
-        </button>
+        </IconButton>
         <button
             type="button"
             class="filters-toggle"
@@ -923,26 +931,6 @@
         border-color: var(--primary-hover);
     }
 
-    .icon-btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 36px;
-        height: 36px;
-        padding: 0;
-    }
-
-    .icon-btn.primary {
-        background: var(--primary);
-        color: var(--primary-contrast);
-        border: 1px solid var(--primary);
-    }
-
-    .icon-btn.primary:hover:not(:disabled) {
-        background: var(--primary-hover);
-        border-color: var(--primary-hover);
-    }
-
     .status {
         color: var(--text-muted);
     }