fix(frontend): make destructive default and subtle buttons read red

Both variants were neutral until the pointer arrived, then filled solid red: nothing
marked the button as destructive until you were already on it. They now carry red text
at rest, with a faded red border on default and a light red wash on hover, which is
what the legacy red border style in the same file had always done.

Three call sites passed color="red" alongside a design-system variant. getStyleClass
returns before colour is read for accent, accent-secondary, default and subtle, so the
delete-migration control, its modal confirm and the import-database button had all been
rendering neutral. They pass destructive now.

The dropdown variant strips the button's own border, and matched border-border-light
literally -- a class the destructive style no longer contains.

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

frontend/src/lib/components/DBManagerDrawer.svelte

@@ -323,7 +323,8 @@
 			<Button
 				disabled={!importSource}
 				loading={importLoading}
-				color="red"
+				variant="default"
+				destructive
 				on:click={handleImportDatabase}
 			>
 				Import {importBehavior === 'schema_and_data' ? 'schemas and data' : 'schemas'} into current database

frontend/src/lib/components/common/button/Button.svelte

@@ -191,7 +191,9 @@
 				((typeof dropdownItems === 'function' && dropdownItems().length > 0) ||
 					dropdownItems.length > 0)
 			) {
-				style = style.replace('border border-border-light', '')
+				// The border colour differs between the plain and destructive styles, so match
+				// whichever resting border the variant declared rather than one literal class.
+				style = style.replace(/\bborder border-[^\s]+/, '')
 			}
 			return style
 		}

frontend/src/lib/components/common/button/model.ts

@@ -194,9 +194,9 @@ export namespace ButtonType {
 		accent:
 			'bg-red-500 dark:bg-red-600 hover:bg-red-600 dark:hover:bg-red-700 focus-visible:bg-red-700 text-white focus-visible:ring-red-300',
 		default:
-			'border border-border-light bg-transparent hover:bg-red-500 dark:hover:bg-red-600 hover:text-white dark:hover:bg-red-600 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300',
+			'border border-red-600/30 hover:border-red-600/60 dark:border-red-400/30 dark:hover:border-red-400/60 bg-transparent hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 focus-visible:bg-red-50 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300',
 		subtle:
-			'bg-transparent hover:bg-red-500 hover:text-white dark:hover:bg-red-600 text-primary focus-visible:bg-red-100 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300'
+			'bg-transparent hover:bg-red-50 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 focus-visible:bg-red-50 dark:focus-visible:bg-red-900/30 focus-visible:ring-red-300'
 	}
 
 	export const VariantSpacingClasses: Record<ButtonType.Size, string> = {

frontend/src/lib/components/workspaceSettings/DataTableMigrationsButton.svelte

@@ -481,7 +481,7 @@
 								variant="subtle"
 								size="xs"
 								iconOnly
-								color="red"
+								destructive
 								startIcon={{ icon: Trash2 }}
 								title="Delete migration"
 								disabled={busy}
@@ -566,7 +566,7 @@
 			</Button>
 			<Button
 				variant="default"
-				color="red"
+				destructive
 				size="sm"
 				disabled={busy}
 				on:click={() => {