From 82df10f80b3c71f67de647c155a5eb56c4f1d9b6 Mon Sep 17 00:00:00 2001
From: Elias Schneider <git@eliasschneider.com>
Date: Sun, 18 Oct 2026 21:18:27 +0200
Subject: [PATCH] feat(frontend): restyle ui primitives for v3

---
 .../lib/components/formatted-message.svelte   |   7 +-
 .../alert-dialog/alert-dialog-action.svelte   |   2 +-
 .../alert-dialog/alert-dialog-cancel.svelte   |   4 +-
 .../alert-dialog/alert-dialog-content.svelte  |   3 +-
 .../alert-dialog-description.svelte           |   5 +-
 .../alert-dialog/alert-dialog-footer.svelte   |   2 +-
 .../alert-dialog/alert-dialog-header.svelte   |   5 +-
 .../ui/alert-dialog/alert-dialog-media.svelte |   2 +-
 .../alert-dialog/alert-dialog-overlay.svelte  |   2 +-
 .../ui/alert-dialog/alert-dialog-title.svelte |   5 +-
 .../components/ui/alert/alert-action.svelte   |   2 +-
 .../ui/alert/alert-description.svelte         |   2 +-
 .../components/ui/alert/alert-title.svelte    |   2 +-
 .../src/lib/components/ui/alert/alert.svelte  |  31 +++--
 .../ui/avatar/avatar-fallback.svelte          |   2 +-
 .../ui/avatar/avatar-group-count.svelte       |   2 +-
 .../components/ui/avatar/avatar-group.svelte  |   2 +-
 .../lib/components/ui/avatar/avatar.svelte    |   2 +-
 .../src/lib/components/ui/badge/badge.svelte  |  22 ++--
 .../button-group-separator.svelte             |   2 +-
 .../ui/button-group/button-group-text.svelte  |   2 +-
 .../ui/button-group/button-group.svelte       |   6 +-
 .../lib/components/ui/button/button.svelte    |  65 ++++++----
 .../ui/calendar/calendar-cell.svelte          |   2 +-
 .../ui/calendar/calendar-day.svelte           |  16 +--
 .../ui/calendar/calendar-head-cell.svelte     |   5 +-
 .../ui/calendar/calendar-header.svelte        |   2 +-
 .../ui/calendar/calendar-heading.svelte       |   2 +-
 .../ui/calendar/calendar-month-select.svelte  |   4 +-
 .../ui/calendar/calendar-year-select.svelte   |   4 +-
 .../components/ui/calendar/calendar.svelte    |   2 +-
 .../lib/components/ui/card/card-action.svelte |  23 ----
 .../components/ui/card/card-content.svelte    |  20 ----
 .../ui/card/card-description.svelte           |  20 ----
 .../lib/components/ui/card/card-footer.svelte |  23 ----
 .../lib/components/ui/card/card-header.svelte |  23 ----
 .../lib/components/ui/card/card-title.svelte  |  20 ----
 .../src/lib/components/ui/card/card.svelte    |  25 ----
 frontend/src/lib/components/ui/card/index.ts  |  25 ----
 .../components/ui/checkbox/checkbox.svelte    |  19 ++-
 .../ui/command/command-dialog.svelte          |   5 +-
 .../ui/command/command-empty.svelte           |   2 +-
 .../ui/command/command-group.svelte           |   7 +-
 .../ui/command/command-input.svelte           |   7 +-
 .../components/ui/command/command-item.svelte |   4 +-
 .../ui/command/command-link-item.svelte       |   2 +-
 .../components/ui/command/command-list.svelte |   2 +-
 .../ui/command/command-separator.svelte       |   2 +-
 .../ui/command/command-shortcut.svelte        |   5 +-
 .../lib/components/ui/command/command.svelte  |   5 +-
 .../ui/dialog/dialog-content.svelte           |  13 +-
 .../ui/dialog/dialog-description.svelte       |   5 +-
 .../components/ui/dialog/dialog-footer.svelte |   5 +-
 .../components/ui/dialog/dialog-header.svelte |   2 +-
 .../ui/dialog/dialog-overlay.svelte           |   2 +-
 .../components/ui/dialog/dialog-title.svelte  |   2 +-
 .../dropdown-menu-checkbox-item.svelte        |   8 +-
 .../dropdown-menu-content.svelte              |   2 +-
 .../dropdown-menu-group-heading.svelte        |   2 +-
 .../dropdown-menu/dropdown-menu-item.svelte   |   2 +-
 .../dropdown-menu/dropdown-menu-label.svelte  |   5 +-
 .../dropdown-menu-radio-item.svelte           |   6 +-
 .../dropdown-menu-separator.svelte            |   2 +-
 .../dropdown-menu-shortcut.svelte             |   5 +-
 .../dropdown-menu-sub-content.svelte          |  22 ++--
 .../dropdown-menu-sub-trigger.svelte          |   2 +-
 .../components/ui/empty/empty-content.svelte  |   5 +-
 .../ui/empty/empty-description.svelte         |   5 +-
 .../components/ui/empty/empty-header.svelte   |   2 +-
 .../components/ui/empty/empty-media.svelte    |   4 +-
 .../components/ui/empty/empty-title.svelte    |   2 +-
 .../src/lib/components/ui/empty/empty.svelte  |   2 +-
 .../components/ui/field/field-content.svelte  |   2 +-
 .../ui/field/field-description.svelte         |   5 +-
 .../components/ui/field/field-error.svelte    |   4 +-
 .../components/ui/field/field-group.svelte    |   2 +-
 .../components/ui/field/field-label.svelte    |  13 +-
 .../components/ui/field/field-legend.svelte   |   2 +-
 .../ui/field/field-separator.svelte           |   7 +-
 .../components/ui/field/field-title.svelte    |   2 +-
 .../src/lib/components/ui/field/field.svelte  |   8 +-
 .../ui/input-group/input-group-addon.svelte   |  12 +-
 .../ui/input-group/input-group-button.svelte  |  10 +-
 .../ui/input-group/input-group-input.svelte   |  19 ++-
 .../ui/input-group/input-group-text.svelte    |   2 +-
 .../input-group/input-group-textarea.svelte   |  20 ++--
 .../ui/input-group/input-group.svelte         |   2 +-
 .../ui/input-otp/input-otp-group.svelte       |   2 +-
 .../ui/input-otp/input-otp-separator.svelte   |   5 +-
 .../ui/input-otp/input-otp-slot.svelte        |   8 +-
 .../components/ui/input-otp/input-otp.svelte  |   2 +-
 frontend/src/lib/components/ui/input/index.ts |   4 +-
 .../src/lib/components/ui/input/input.svelte  |  38 +++---
 .../components/ui/item/item-content.svelte    |   2 +-
 .../ui/item/item-description.svelte           |   2 +-
 .../lib/components/ui/item/item-media.svelte  |   2 +-
 .../lib/components/ui/item/item-title.svelte  |   2 +-
 .../src/lib/components/ui/item/item.svelte    |  15 ++-
 .../src/lib/components/ui/label/label.svelte  |   2 +-
 .../ui/pagination/pagination-ellipsis.svelte  |   2 +-
 .../ui/pagination/pagination-link.svelte      |   6 +-
 .../pagination/pagination-next-button.svelte  |   6 +-
 .../ui/pagination/pagination-next.svelte      |   4 +-
 .../pagination/pagination-prev-button.svelte  |   6 +-
 .../ui/pagination/pagination-previous.svelte  |   4 +-
 .../ui/pagination/pagination.svelte           |   2 +-
 .../ui/popover/popover-content.svelte         |   2 +-
 .../ui/popover/popover-description.svelte     |   2 +-
 .../ui/popover/popover-header.svelte          |   2 +-
 .../ui/popover/popover-title.svelte           |   2 +-
 .../ui/radio-group/radio-group-item.svelte    |  17 ++-
 .../scroll-area/scroll-area-scrollbar.svelte  |   2 +-
 .../ui/scroll-area/scroll-area.svelte         |   2 +-
 .../ui/select/select-content.svelte           |   4 +-
 .../ui/select/select-group-heading.svelte     |   2 +-
 .../components/ui/select/select-group.svelte  |   2 +-
 .../components/ui/select/select-item.svelte   |  10 +-
 .../components/ui/select/select-label.svelte  |   2 +-
 .../select/select-scroll-down-button.svelte   |   2 +-
 .../ui/select/select-scroll-up-button.svelte  |   2 +-
 .../ui/select/select-separator.svelte         |   2 +-
 .../ui/select/select-trigger.svelte           |   6 +-
 .../components/ui/skeleton/skeleton.svelte    |   5 +-
 .../lib/components/ui/sonner/sonner.svelte    |  32 +++--
 .../lib/components/ui/spinner/spinner.svelte  |  28 +++--
 .../lib/components/ui/switch/switch.svelte    |  11 +-
 .../lib/components/ui/table/table-body.svelte |   9 +-
 .../components/ui/table/table-caption.svelte  |   2 +-
 .../lib/components/ui/table/table-cell.svelte |   5 +-
 .../components/ui/table/table-footer.svelte   |   2 +-
 .../lib/components/ui/table/table-head.svelte |   2 +-
 .../components/ui/table/table-header.svelte   |   9 +-
 .../lib/components/ui/table/table-row.svelte  |   2 +-
 .../src/lib/components/ui/table/table.svelte  |   5 +-
 .../components/ui/tabs/tabs-content.svelte    |   2 +-
 .../lib/components/ui/tabs/tabs-list.svelte   | 111 ++++++++++--------
 .../components/ui/tabs/tabs-trigger.svelte    |  23 +++-
 .../src/lib/components/ui/tabs/tabs.svelte    |   6 +-
 .../components/ui/textarea/textarea.svelte    |   6 +-
 .../lib/components/ui/toggle/toggle.svelte    |  13 +-
 .../ui/tooltip/tooltip-content.svelte         |  35 +-----
 .../ui/tooltip/tooltip-provider.svelte        |   2 +-
 frontend/src/lib/utils/style.ts               |  42 ++++++-
 frontend/src/routes/+layout.svelte            |  12 +-
 144 files changed, 550 insertions(+), 659 deletions(-)
 delete mode 100644 frontend/src/lib/components/ui/card/card-action.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/card-content.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/card-description.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/card-footer.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/card-header.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/card-title.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/card.svelte
 delete mode 100644 frontend/src/lib/components/ui/card/index.ts

diff --git a/frontend/src/lib/components/formatted-message.svelte b/frontend/src/lib/components/formatted-message.svelte
index fa3eb508..0a105062 100644
--- a/frontend/src/lib/components/formatted-message.svelte
+++ b/frontend/src/lib/components/formatted-message.svelte
@@ -37,12 +37,7 @@
 		<b>{@render children?.()}</b>
 	{/snippet}
 	{#snippet link({ children, options })}
-		<a
-			class="text-black underline dark:text-white"
-			href={options.href}
-			target="_blank"
-			rel="noopener noreferrer"
-		>
+		<a class="inline-link" href={options.href} target="_blank" rel="noopener noreferrer">
 			{@render children?.()}
 		</a>
 	{/snippet}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
index d79f2be8..aaf5cdcb 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -22,6 +22,6 @@
 <AlertDialogPrimitive.Action
 	bind:ref
 	data-slot="alert-dialog-action"
-	class={cn(buttonVariants({ variant, size }), 'cn-alert-dialog-action', className)}
+	class={cn(buttonVariants({ variant, size }), className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
index 61f9f18f..208feb66 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -10,7 +10,7 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = 'outline',
+		variant = 'ghost',
 		size = 'default',
 		...restProps
 	}: AlertDialogPrimitive.CancelProps & {
@@ -22,6 +22,6 @@
 <AlertDialogPrimitive.Cancel
 	bind:ref
 	data-slot="alert-dialog-cancel"
-	class={cn(buttonVariants({ variant, size }), 'cn-alert-dialog-cancel', className)}
+	class={cn(buttonVariants({ variant, size }), className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
index 4b93db4e..b559767a 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -24,7 +24,8 @@
 		data-slot="alert-dialog-content"
 		data-size={size}
 		class={cn(
-			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl p-6 shadow-xl ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md',
+			'group/alert-dialog-content bg-popover text-popover-foreground border-border shadow-overlay transition-motion fixed top-1/2 left-1/2 z-(--z-overlay) grid max-h-[85dvh] w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border px-6 py-5 duration-(--dur-slow) outline-none data-closed:opacity-0 data-closed:duration-(--dur-base) data-closed:ease-in sm:data-[size=default]:max-w-(--dialog-sm) sm:data-[size=sm]:max-w-xs starting:scale-(--pop-scale) starting:opacity-0',
+			'max-sm:before:bg-border-strong max-sm:inset-x-0 max-sm:top-auto max-sm:bottom-0 max-sm:w-full max-sm:translate-0 max-sm:rounded-t-lg max-sm:rounded-b-none max-sm:pt-6 max-sm:pb-[calc(20px+env(safe-area-inset-bottom))] max-sm:before:absolute max-sm:before:top-2 max-sm:before:left-1/2 max-sm:before:h-1 max-sm:before:w-9 max-sm:before:-translate-x-1/2 max-sm:before:rounded-[2px] max-sm:data-closed:translate-y-full max-sm:data-closed:opacity-100 max-sm:starting:translate-y-full max-sm:starting:scale-100 max-sm:starting:opacity-100',
 			className
 		)}
 		{...restProps}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
index 3930f40f..7e534b42 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -12,9 +12,6 @@
 <AlertDialogPrimitive.Description
 	bind:ref
 	data-slot="alert-dialog-description"
-	class={cn(
-		'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
-		className
-	)}
+	class={cn('text-control text-fg-muted *:[a]:inline-link wrap-anywhere', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
index b983c818..c29a56f8 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-dialog-footer"
 	class={cn(
-		'cn-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+		'mt-1 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
index d07e8cd0..dda6d4d4 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-dialog-header"
-	class={cn(
-		'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
-		className
-	)}
+	class={cn('flex flex-col items-start gap-1', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
index 340248dd..f6db33e3 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-dialog-media"
 	class={cn(
-		"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+		"bg-fill-muted mb-2 inline-flex size-12 items-center justify-center rounded-full *:[svg:not([class*='size-'])]:size-6",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
index da8cf95c..4101c635 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="alert-dialog-overlay"
 	class={cn(
-		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm',
+		'bg-scrim transition-motion fixed inset-0 isolate z-(--z-overlay) backdrop-blur-[4px] duration-(--dur-slow) data-closed:opacity-0 data-closed:duration-(--dur-base) data-closed:ease-in starting:opacity-0 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
index a51382fa..2d1f8e2f 100644
--- a/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
+++ b/frontend/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -12,9 +12,6 @@
 <AlertDialogPrimitive.Title
 	bind:ref
 	data-slot="alert-dialog-title"
-	class={cn(
-		'text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
-		className
-	)}
+	class={cn('font-display text-display-s text-fg wrap-anywhere', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/alert/alert-action.svelte b/frontend/src/lib/components/ui/alert/alert-action.svelte
index 97158caf..e386dba0 100644
--- a/frontend/src/lib/components/ui/alert/alert-action.svelte
+++ b/frontend/src/lib/components/ui/alert/alert-action.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="alert-action"
-	class={cn('absolute top-2.5 right-3', className)}
+	class={cn('absolute top-2 right-2', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/alert/alert-description.svelte b/frontend/src/lib/components/ui/alert/alert-description.svelte
index a2b85ce1..f135ce52 100644
--- a/frontend/src/lib/components/ui/alert/alert-description.svelte
+++ b/frontend/src/lib/components/ui/alert/alert-description.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-description"
 	class={cn(
-		'text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
+		'text-fg [&_a]:inline-link text-pretty group-has-[>svg]/alert:col-start-2 [&_p:not(:last-child)]:mb-2',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/alert/alert-title.svelte b/frontend/src/lib/components/ui/alert/alert-title.svelte
index 0bffdde0..6257c2c0 100644
--- a/frontend/src/lib/components/ui/alert/alert-title.svelte
+++ b/frontend/src/lib/components/ui/alert/alert-title.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="alert-title"
 	class={cn(
-		'[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3',
+		'[&_a]:inline-link font-medium text-(--tone-fg) group-has-[>svg]/alert:col-start-2',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/alert/alert.svelte b/frontend/src/lib/components/ui/alert/alert.svelte
index 774cd18d..a297bdca 100644
--- a/frontend/src/lib/components/ui/alert/alert.svelte
+++ b/frontend/src/lib/components/ui/alert/alert.svelte
@@ -2,20 +2,20 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const alertVariants = tv({
-		base: "grid gap-0.5 rounded-2xl border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+		base: 'group/alert relative grid w-full gap-0.5 rounded-sm border border-(--tone-border) bg-(--tone-soft) px-3 py-2.5 text-left text-control text-fg has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:size-3.5 *:[svg]:translate-y-0.75 *:[svg]:text-(--tone-solid)',
 		variants: {
 			variant: {
-				default: 'bg-card text-card-foreground',
-				destructive:
-					'bg-red-200 text-red-900 dark:bg-red-900 dark:text-red-100 *:[svg]:text-current',
+				info: '[--tone-border:var(--info-border)] [--tone-fg:var(--info-fg)] [--tone-soft:var(--info-soft)] [--tone-solid:var(--info-solid)]',
 				success:
-					'bg-green-100 text-green-900 dark:bg-green-900 dark:text-green-100 *:[svg]:text-current',
-				info: 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100 *:[svg]:text-current',
-				warning: 'bg-warning text-warning-foreground border-warning/40 *:[svg]:text-current'
+					'[--tone-border:var(--success-border)] [--tone-fg:var(--success-fg)] [--tone-soft:var(--success-soft)] [--tone-solid:var(--success-solid)]',
+				warning:
+					'[--tone-border:var(--warning-border)] [--tone-fg:var(--warning-fg)] [--tone-soft:var(--warning-soft)] [--tone-solid:var(--warning-solid)]',
+				destructive:
+					'[--tone-border:var(--danger-border)] [--tone-fg:var(--danger-fg)] [--tone-soft:var(--danger-soft)] [--tone-solid:var(--danger-solid)]'
 			}
 		},
 		defaultVariants: {
-			variant: 'default'
+			variant: 'info'
 		}
 	});
 
@@ -24,6 +24,7 @@
 
 <script lang="ts">
 	import { cn, type WithElementRef } from '#lib/utils/style.js';
+	import { m } from '#lib/paraglide/messages.js';
 	import { LucideX } from '@lucide/svelte';
 	import { onMount } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -31,7 +32,7 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		variant = 'default',
+		variant = 'info',
 		children,
 		onDismiss,
 		dismissibleId = undefined,
@@ -68,14 +69,18 @@
 	<div
 		bind:this={ref}
 		data-slot="alert"
-		role="alert"
-		class={cn(alertVariants({ variant }), className)}
+		role={variant === 'destructive' ? 'alert' : 'status'}
+		class={cn(alertVariants({ variant }), (dismissibleId || onDismiss) && 'pr-10', className)}
 		{...restProps}
 	>
 		{@render children?.()}
 		{#if dismissibleId || onDismiss}
-			<button onclick={dismiss} class="absolute top-2.5 right-3 text-current">
-				<LucideX class="size-4" />
+			<button
+				onclick={dismiss}
+				aria-label={m.close()}
+				class="text-fg-muted hover:bg-fill-hover hover:text-fg focus-visible:outline-ring absolute top-2 right-2 grid size-6 place-items-center rounded-xs transition-colors focus-visible:outline-2"
+			>
+				<LucideX class="size-3.5" />
 			</button>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte b/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
index 0ffc24ac..b7223b39 100644
--- a/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
+++ b/frontend/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="avatar-fallback"
 	class={cn(
-		'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
+		'bg-fill-selected text-fg flex size-full items-center justify-center rounded-full text-[length:38cqi] leading-none font-medium',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/avatar/avatar-group-count.svelte b/frontend/src/lib/components/ui/avatar/avatar-group-count.svelte
index 2d8dee8b..7f39d104 100644
--- a/frontend/src/lib/components/ui/avatar/avatar-group-count.svelte
+++ b/frontend/src/lib/components/ui/avatar/avatar-group-count.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="avatar-group-count"
 	class={cn(
-		'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+		'bg-fill-selected text-fg ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/avatar/avatar-group.svelte b/frontend/src/lib/components/ui/avatar/avatar-group.svelte
index 5eb52755..62b31442 100644
--- a/frontend/src/lib/components/ui/avatar/avatar-group.svelte
+++ b/frontend/src/lib/components/ui/avatar/avatar-group.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="avatar-group"
 	class={cn(
-		'cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
+		'*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/avatar/avatar.svelte b/frontend/src/lib/components/ui/avatar/avatar.svelte
index f02d27d5..53050883 100644
--- a/frontend/src/lib/components/ui/avatar/avatar.svelte
+++ b/frontend/src/lib/components/ui/avatar/avatar.svelte
@@ -19,7 +19,7 @@
 	data-slot="avatar"
 	data-size={size}
 	class={cn(
-		'after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
+		'group/avatar after:inset-ring-border @container relative flex size-8 shrink-0 rounded-full select-none after:pointer-events-none after:absolute after:inset-0 after:rounded-full after:inset-ring data-[size=lg]:size-10 data-[size=sm]:size-6',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/badge/badge.svelte b/frontend/src/lib/components/ui/badge/badge.svelte
index 25e2c104..6578b098 100644
--- a/frontend/src/lib/components/ui/badge/badge.svelte
+++ b/frontend/src/lib/components/ui/badge/badge.svelte
@@ -1,17 +1,23 @@
 <script lang="ts" module>
 	import { type VariantProps, tv } from 'tailwind-variants';
 
+	const tag =
+		'h-[22px] rounded-xs border border-border px-2 text-micro [&>svg]:size-3! [a]:hover:bg-fill-hover';
+	const status =
+		"gap-1.5 text-control text-fg before:size-2 before:shrink-0 before:rounded-full before:content-['']";
+
 	export const badgeVariants = tv({
-		base: 'h-5 gap-1 rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none',
+		base: 'group/badge inline-flex w-fit shrink-0 items-center gap-1 overflow-hidden whitespace-nowrap align-middle transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&>svg]:pointer-events-none',
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-				secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-				destructive:
-					'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
-				outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
-				ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
-				link: 'text-primary underline-offset-4 hover:underline'
+				default: `${tag} bg-fill-muted text-fg`,
+				secondary: `${tag} border-transparent bg-fill-muted text-fg`,
+				outline: `${tag} bg-transparent text-fg`,
+				mono: `${tag} h-5 font-mono text-mono-s`,
+				success: `${status} before:bg-success-solid`,
+				warning: `${status} before:bg-warning-solid`,
+				destructive: `${status} before:bg-danger-solid`,
+				muted: `${status} before:bg-fg-muted`
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/button-group/button-group-separator.svelte b/frontend/src/lib/components/ui/button-group/button-group-separator.svelte
index a7781eb5..750a98ee 100644
--- a/frontend/src/lib/components/ui/button-group/button-group-separator.svelte
+++ b/frontend/src/lib/components/ui/button-group/button-group-separator.svelte
@@ -16,7 +16,7 @@
 	data-slot="button-group-separator"
 	{orientation}
 	class={cn(
-		'bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',
+		'bg-border relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/button-group/button-group-text.svelte b/frontend/src/lib/components/ui/button-group/button-group-text.svelte
index d2b88d1e..f3676063 100644
--- a/frontend/src/lib/components/ui/button-group/button-group-text.svelte
+++ b/frontend/src/lib/components/ui/button-group/button-group-text.svelte
@@ -15,7 +15,7 @@
 	const mergedProps = $derived({
 		...restProps,
 		class: cn(
-			"bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+			"flex items-center gap-2 rounded-sm bg-fill-muted px-3.5 text-control text-fg-muted dark:bg-fg/6 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
 			className
 		),
 		'data-slot': 'button-group-text'
diff --git a/frontend/src/lib/components/ui/button-group/button-group.svelte b/frontend/src/lib/components/ui/button-group/button-group.svelte
index d2f0199a..5cc56822 100644
--- a/frontend/src/lib/components/ui/button-group/button-group.svelte
+++ b/frontend/src/lib/components/ui/button-group/button-group.svelte
@@ -2,13 +2,13 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const buttonGroupVariants = tv({
-		base: "has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+		base: "flex w-fit items-stretch gap-px has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-sm [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
 		variants: {
 			orientation: {
 				horizontal:
-					'[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>[data-slot]]:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
+					'[&>[data-slot]]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-sm! [&>[data-slot]~[data-slot]]:rounded-l-none',
 				vertical:
-					'[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! flex-col [&>[data-slot]]:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0'
+					'flex-col [&>[data-slot]]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-sm! [&>[data-slot]~[data-slot]]:rounded-t-none'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/button/button.svelte b/frontend/src/lib/components/ui/button/button.svelte
index f481c4d5..401c69fb 100644
--- a/frontend/src/lib/components/ui/button/button.svelte
+++ b/frontend/src/lib/components/ui/button/button.svelte
@@ -3,33 +3,39 @@
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 	import { type VariantProps, tv } from 'tailwind-variants';
 
+	const accentWash = 'bg-primary/12 text-fg before:bg-primary/6';
+
 	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "group/button relative isolate inline-flex shrink-0 items-center justify-center gap-2 rounded-sm text-control font-medium whitespace-nowrap select-none transition-motion before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:opacity-0 before:transition-opacity before:duration-(--dur-fast) before:ease-out hover:not-disabled:before:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring active:not-disabled:scale-(--press-scale) disabled:cursor-not-allowed disabled:opacity-45 aria-disabled:pointer-events-none aria-disabled:opacity-45 aria-busy:cursor-progress aria-busy:opacity-100 aria-expanded:before:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
-				outline:
-					'border-border bg-background hover:bg-muted hover:text-foreground dark:hover:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent',
-				secondary:
-					'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-				ghost:
-					'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-				destructive:
-					'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
-				link: 'text-primary underline-offset-4 hover:underline'
+				default:
+					'bg-primary text-primary-foreground shadow-[inset_0_0_0_1px_var(--primary-edge)] before:bg-primary-hover',
+				secondary: accentWash,
+				outline: accentWash,
+				ghost: 'text-fg before:bg-fill-hover',
+				destructive: 'bg-danger-fill text-danger-fill-fg before:bg-danger-fill-hover',
+				inverse:
+					'bg-inverse-fg text-inverse before:bg-[color-mix(in_srgb,var(--inverse-fg)_88%,var(--inverse))] focus-visible:outline-inverse-fg',
+				link: 'text-fg before:hidden hover:text-fg-muted active:not-disabled:scale-100'
 			},
 			size: {
-				default:
-					'h-9.5 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
-				xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
-				sm: 'h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-				lg: 'h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
-				icon: 'size-9.5',
-				'icon-xs': "size-6 [&_svg:not([class*='size-'])]:size-3",
-				'icon-sm': 'size-8',
-				'icon-lg': 'size-10'
+				default: 'h-(--h-md) px-4',
+				sm: "h-(--h-sm) px-3 [&_svg:not([class*='size-'])]:size-3.5",
+				icon: 'size-(--h-md)',
+				'icon-sm': 'size-(--h-sm)',
+				'icon-xs': "size-(--h-xs) [&_svg:not([class*='size-'])]:size-3.5"
 			}
 		},
+		compoundVariants: [
+			{ variant: 'link', class: 'h-auto px-0' },
+			{
+				variant: 'ghost',
+				size: ['icon', 'icon-sm', 'icon-xs'],
+				class:
+					'text-fg-muted hover:text-fg aria-expanded:text-fg aria-expanded:before:bg-fill-selected'
+			}
+		],
 		defaultVariants: {
 			variant: 'default',
 			size: 'default'
@@ -112,18 +118,27 @@
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
 		disabled={disabled || isLoading}
+		aria-busy={isLoading || undefined}
 		onclick={handleOnClick}
 		{...restProps}
 	>
-		<span class="flex w-full items-center justify-center">
+		<!-- Label and spinner share one grid cell, so the width never changes while busy -->
+		<!-- Both spans may shrink below their content, so a truncating label can end at the button's edge -->
+		<span class="inline-grid max-w-full min-w-0 place-items-center">
+			<span
+				class={cn(
+					'col-start-1 row-start-1 inline-flex max-w-full min-w-0 items-center justify-center gap-2 transition-opacity duration-(--dur-fast) ease-out',
+					isLoading && 'opacity-0'
+				)}
+			>
+				{@render children?.()}
+			</span>
 			<Spinner
 				class={cn(
-					'grid overflow-hidden transition-[width,opacity,margin-right] duration-400 ease-[linear(0,0.897_14.4%,1.311_31.2%,1.338_46%,1.054_80.4%,1)]',
-					isLoading ? 'mr-2 w-4 opacity-100' : 'w-0 opacity-0'
+					'col-start-1 row-start-1 size-3.5 transition-opacity duration-(--dur-fast) ease-out',
+					isLoading ? 'delay-60' : 'opacity-0 [animation-play-state:paused]'
 				)}
-				aria-hidden={!isLoading}
 			/>
-			{@render children?.()}
 		</span>
 	</button>
 {/if}
diff --git a/frontend/src/lib/components/ui/calendar/calendar-cell.svelte b/frontend/src/lib/components/ui/calendar/calendar-cell.svelte
index 6eb65bbc..95d65354 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-cell.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -12,7 +12,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		'relative size-(--cell-size) p-0 text-center text-sm focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)',
+		'text-control relative size-(--cell-size) p-0 text-center focus-within:z-20 [&:first-child[data-selected]_[data-bits-day]]:rounded-s-(--cell-radius) [&:last-child[data-selected]_[data-bits-day]]:rounded-e-(--cell-radius)',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/calendar/calendar-day.svelte b/frontend/src/lib/components/ui/calendar/calendar-day.svelte
index 74432933..dbcd152a 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-day.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-day.svelte
@@ -14,19 +14,19 @@
 	class={cn(
 		'flex size-(--cell-size) flex-col items-center justify-center gap-1 rounded-(--cell-radius) p-0 leading-none font-normal whitespace-nowrap select-none',
 		'[&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
-		'not-data-selected:hover:bg-accent/50 not-data-selected:hover:text-accent-foreground',
-		'[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground [&[data-today][data-disabled]]:text-muted-foreground',
-		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:text-foreground',
+		'not-data-selected:hover:bg-fill-hover transition-colors duration-(--dur-fast)',
+		'[&[data-today]:not([data-selected])]:bg-fill-muted [&[data-today][data-disabled]]:text-fg-muted [&[data-today]:not([data-selected])]:font-medium',
+		'data-[selected]:bg-primary data-[selected]:text-primary-foreground',
 		// Outside months
-		'[&[data-outside-month]:not([data-selected])]:text-muted-foreground [&[data-outside-month]:not([data-selected])]:hover:text-accent-foreground',
+		'[&[data-outside-month]:not([data-selected],[data-disabled],[data-unavailable])]:text-fg-muted',
 		// Disabled
-		'data-[disabled]:text-muted-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+		'data-[disabled]:text-fg-subtle data-[disabled]:pointer-events-none',
 		// Unavailable
-		'data-[unavailable]:text-muted-foreground data-[unavailable]:line-through',
+		'data-[unavailable]:text-fg-subtle data-[unavailable]:line-through',
 		// focus
-		'focus:border-ring focus:ring-ring/50 focus:relative',
+		'focus-visible:outline-ring focus-visible:relative focus-visible:outline-2 focus-visible:outline-offset-2',
 		// inner spans
-		'[&>span]:text-xs [&>span]:opacity-70',
+		'[&>span]:text-micro [&>span]:opacity-70',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte b/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte
index 629162d6..a950a976 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -11,9 +11,6 @@
 
 <CalendarPrimitive.HeadCell
 	bind:ref
-	class={cn(
-		'text-muted-foreground w-(--cell-size) rounded-md text-[0.8rem] font-normal',
-		className
-	)}
+	class={cn('text-caption text-fg-muted w-(--cell-size)', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/calendar/calendar-header.svelte b/frontend/src/lib/components/ui/calendar/calendar-header.svelte
index 54ba2a66..a20bd887 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-header.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-header.svelte
@@ -12,7 +12,7 @@
 <CalendarPrimitive.Header
 	bind:ref
 	class={cn(
-		'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
+		'text-control flex h-(--cell-size) w-full items-center justify-center gap-1.5 font-medium',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/calendar/calendar-heading.svelte b/frontend/src/lib/components/ui/calendar/calendar-heading.svelte
index fa8dc86f..7ea1c9f8 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-heading.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -11,6 +11,6 @@
 
 <CalendarPrimitive.Heading
 	bind:ref
-	class={cn('px-(--cell-size) text-sm font-medium', className)}
+	class={cn('text-control px-(--cell-size) font-medium', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte b/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte
index 0e4f6362..b087f1e2 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-month-select.svelte
@@ -14,7 +14,7 @@
 
 <span
 	class={cn(
-		'has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]',
+		'bg-fill-muted has-focus-visible:border-ring has-focus-visible:ring-ring-halo relative flex rounded-sm border border-transparent has-focus-visible:ring-3',
 		className
 	)}
 >
@@ -37,7 +37,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				class="text-control [&>svg]:text-fg-muted flex h-(--cell-size) items-center gap-1 rounded-sm ps-2 pe-1 font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
diff --git a/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte b/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte
index 96241bbe..f8dd1d4d 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-year-select.svelte
@@ -13,7 +13,7 @@
 
 <span
 	class={cn(
-		'has-focus:border-ring border-input has-focus:ring-ring/50 relative flex rounded-md border shadow-xs has-focus:ring-[3px]',
+		'bg-fill-muted has-focus-visible:border-ring has-focus-visible:ring-ring-halo relative flex rounded-sm border border-transparent has-focus-visible:ring-3',
 		className
 	)}
 >
@@ -36,7 +36,7 @@
 				{/each}
 			</select>
 			<span
-				class="[&>svg]:text-muted-foreground flex h-(--cell-size) items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
+				class="text-control [&>svg]:text-fg-muted flex h-(--cell-size) items-center gap-1 rounded-sm ps-2 pe-1 font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
 				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
diff --git a/frontend/src/lib/components/ui/calendar/calendar.svelte b/frontend/src/lib/components/ui/calendar/calendar.svelte
index 8d6da65c..d80885c7 100644
--- a/frontend/src/lib/components/ui/calendar/calendar.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar.svelte
@@ -51,7 +51,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{weekdayFormat}
 	{disableDaysOutsideMonth}
 	class={cn(
-		'bg-background group/calendar p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
+		'bg-background group/calendar p-3 [--cell-radius:var(--radius-sm)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
 		className
 	)}
 	{locale}
diff --git a/frontend/src/lib/components/ui/card/card-action.svelte b/frontend/src/lib/components/ui/card/card-action.svelte
deleted file mode 100644
index 37b13a07..00000000
--- a/frontend/src/lib/components/ui/card/card-action.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '#lib/utils/style.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="card-action"
-	class={cn(
-		'cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/card/card-content.svelte b/frontend/src/lib/components/ui/card/card-content.svelte
deleted file mode 100644
index 483391bb..00000000
--- a/frontend/src/lib/components/ui/card/card-content.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '#lib/utils/style.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="card-content"
-	class={cn('px-6 group-data-[size=sm]/card:px-4', className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/card/card-description.svelte b/frontend/src/lib/components/ui/card/card-description.svelte
deleted file mode 100644
index ef81151e..00000000
--- a/frontend/src/lib/components/ui/card/card-description.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '#lib/utils/style.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
-</script>
-
-<p
-	bind:this={ref}
-	data-slot="card-description"
-	class={cn('text-muted-foreground mt-1 text-sm', className)}
-	{...restProps}
->
-	{@render children?.()}
-</p>
diff --git a/frontend/src/lib/components/ui/card/card-footer.svelte b/frontend/src/lib/components/ui/card/card-footer.svelte
deleted file mode 100644
index 5f149258..00000000
--- a/frontend/src/lib/components/ui/card/card-footer.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '#lib/utils/style.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="card-footer"
-	class={cn(
-		'flex items-center rounded-b-4xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/card/card-header.svelte b/frontend/src/lib/components/ui/card/card-header.svelte
deleted file mode 100644
index 82c94747..00000000
--- a/frontend/src/lib/components/ui/card/card-header.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '#lib/utils/style.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="card-header"
-	class={cn(
-		'group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-t-4xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/card/card-title.svelte b/frontend/src/lib/components/ui/card/card-title.svelte
deleted file mode 100644
index 2a6ff21e..00000000
--- a/frontend/src/lib/components/ui/card/card-title.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '#lib/utils/style.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="card-title"
-	class={cn('flex flex-row items-center gap-2 text-xl leading-none font-semibold', className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/card/card.svelte b/frontend/src/lib/components/ui/card/card.svelte
deleted file mode 100644
index 03770685..00000000
--- a/frontend/src/lib/components/ui/card/card.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '#lib/utils/style.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		size = 'default',
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: 'default' | 'sm' } = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="card"
-	data-size={size}
-	class={cn(
-		'bg-card text-card-foreground border-foreground/5 dark:border-foreground/10 group/card flex flex-col gap-6 overflow-hidden rounded-4xl border-1 py-6 text-sm shadow-sm has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-4xl *:[img:last-child]:rounded-b-4xl',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>
diff --git a/frontend/src/lib/components/ui/card/index.ts b/frontend/src/lib/components/ui/card/index.ts
deleted file mode 100644
index 77d36747..00000000
--- a/frontend/src/lib/components/ui/card/index.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import Root from './card.svelte';
-import Content from './card-content.svelte';
-import Description from './card-description.svelte';
-import Footer from './card-footer.svelte';
-import Header from './card-header.svelte';
-import Title from './card-title.svelte';
-import Action from './card-action.svelte';
-
-export {
-	Root,
-	Content,
-	Description,
-	Footer,
-	Header,
-	Title,
-	Action,
-	//
-	Root as Card,
-	Content as CardContent,
-	Description as CardDescription,
-	Footer as CardFooter,
-	Header as CardHeader,
-	Title as CardTitle,
-	Action as CardAction
-};
diff --git a/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
index e8f6977c..f98b94bf 100644
--- a/frontend/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
@@ -11,13 +11,16 @@
 		class: className,
 		...restProps
 	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+
+	const markClass =
+		'col-start-1 row-start-1 size-3 transition-[opacity,scale] duration-(--dur-base) ease-out';
 </script>
 
 <CheckboxPrimitive.Root
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		'bg-input/90 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[5px] border border-transparent transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
+		'peer bg-surface text-primary-control-foreground before:bg-primary-control focus-visible:outline-ring relative isolate grid size-4.5 shrink-0 place-items-center rounded-xs shadow-[inset_0_0_0_1px_var(--border-control)] group-has-disabled/field:opacity-45 before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:opacity-0 before:transition-opacity before:duration-(--dur-base) before:ease-out after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-45 aria-invalid:shadow-[inset_0_0_0_1px_var(--danger-solid)] data-checked:before:opacity-100 data-[state=indeterminate]:before:opacity-100',
 		className
 	)}
 	bind:checked
@@ -25,15 +28,9 @@
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<div
-			data-slot="checkbox-indicator"
-			class="grid place-content-center text-current transition-none [&>svg]:size-3.5"
-		>
-			{#if checked}
-				<CheckIcon />
-			{:else if indeterminate}
-				<MinusIcon />
-			{/if}
-		</div>
+		<span data-slot="checkbox-indicator" class="grid">
+			<CheckIcon class={cn(markClass, !checked && 'scale-60 opacity-0')} />
+			<MinusIcon class={cn(markClass, (checked || !indeterminate) && 'scale-60 opacity-0')} />
+		</span>
 	{/snippet}
 </CheckboxPrimitive.Root>
diff --git a/frontend/src/lib/components/ui/command/command-dialog.svelte b/frontend/src/lib/components/ui/command/command-dialog.svelte
index a4347cc7..0f6aacf8 100644
--- a/frontend/src/lib/components/ui/command/command-dialog.svelte
+++ b/frontend/src/lib/components/ui/command/command-dialog.svelte
@@ -33,7 +33,10 @@
 		<Dialog.Description>{description}</Dialog.Description>
 	</Dialog.Header>
 	<Dialog.Content
-		class={cn('top-1/3 translate-y-0 overflow-hidden rounded-4xl! p-0 p-0', className)}
+		class={cn(
+			'bg-popover/72 border-fg/6 dark:border-fg/10 [@media(prefers-reduced-transparency:reduce)]:bg-popover! top-[15%] max-w-(--palette-w) translate-y-0 gap-0 overflow-hidden rounded-lg p-0 backdrop-blur-[40px] backdrop-saturate-150 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!',
+			className
+		)}
 		{showCloseButton}
 		{portalProps}
 	>
diff --git a/frontend/src/lib/components/ui/command/command-empty.svelte b/frontend/src/lib/components/ui/command/command-empty.svelte
index c523e400..09575985 100644
--- a/frontend/src/lib/components/ui/command/command-empty.svelte
+++ b/frontend/src/lib/components/ui/command/command-empty.svelte
@@ -12,6 +12,6 @@
 <CommandPrimitive.Empty
 	bind:ref
 	data-slot="command-empty"
-	class={cn('py-6 text-center text-sm', className)}
+	class={cn('text-control text-fg-muted py-6 text-center', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/command/command-group.svelte b/frontend/src/lib/components/ui/command/command-group.svelte
index a137abd9..ee17a0c6 100644
--- a/frontend/src/lib/components/ui/command/command-group.svelte
+++ b/frontend/src/lib/components/ui/command/command-group.svelte
@@ -17,15 +17,12 @@
 <CommandPrimitive.Group
 	bind:ref
 	data-slot="command-group"
-	class={cn(
-		'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden px-1 py-2 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
-		className
-	)}
+	class={cn('text-fg overflow-hidden py-1', className)}
 	value={value ?? heading ?? `----${useId()}`}
 	{...restProps}
 >
 	{#if heading}
-		<CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+		<CommandPrimitive.GroupHeading class="text-caption text-fg-muted px-2.5 pt-2 pb-1 font-medium">
 			{heading}
 		</CommandPrimitive.GroupHeading>
 	{/if}
diff --git a/frontend/src/lib/components/ui/command/command-input.svelte b/frontend/src/lib/components/ui/command/command-input.svelte
index 7e002015..089db9cd 100644
--- a/frontend/src/lib/components/ui/command/command-input.svelte
+++ b/frontend/src/lib/components/ui/command/command-input.svelte
@@ -13,14 +13,11 @@
 </script>
 
 <div data-slot="command-input-wrapper" class="p-1 pb-0">
-	<InputGroup.Root class="bg-input/50 h-9">
+	<InputGroup.Root class="bg-fg/5 h-9 rounded-sm">
 		<CommandPrimitive.Input
 			{value}
 			data-slot="command-input"
-			class={cn(
-				'w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-				className
-			)}
+			class={cn('w-full outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className)}
 			{...restProps}
 		>
 			{#snippet child({ props })}
diff --git a/frontend/src/lib/components/ui/command/command-item.svelte b/frontend/src/lib/components/ui/command/command-item.svelte
index 15aa55ef..38558246 100644
--- a/frontend/src/lib/components/ui/command/command-item.svelte
+++ b/frontend/src/lib/components/ui/command/command-item.svelte
@@ -15,13 +15,13 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-full px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"group/command-item data-selected:bg-fg/6 text-control [&_svg:not([class*='text-'])]:text-fg-muted relative flex min-h-9 cursor-default items-center gap-2 rounded-sm px-2.5 outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
 	<CheckIcon
-		class="cn-command-item-indicator ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+		class="text-fg ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
 	/>
 </CommandPrimitive.Item>
diff --git a/frontend/src/lib/components/ui/command/command-link-item.svelte b/frontend/src/lib/components/ui/command/command-link-item.svelte
index 094eccfb..75fe705b 100644
--- a/frontend/src/lib/components/ui/command/command-link-item.svelte
+++ b/frontend/src/lib/components/ui/command/command-link-item.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="command-item"
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"data-selected:bg-fg/6 text-control [&_svg:not([class*='text-'])]:text-fg-muted relative flex min-h-9 cursor-default items-center gap-2 rounded-sm px-2.5 outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/command/command-list.svelte b/frontend/src/lib/components/ui/command/command-list.svelte
index c7ddbd71..739c06c9 100644
--- a/frontend/src/lib/components/ui/command/command-list.svelte
+++ b/frontend/src/lib/components/ui/command/command-list.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="command-list"
 	class={cn(
-		'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
+		'max-h-72 scroll-py-1 [scrollbar-width:thin] [scrollbar-color:color-mix(in_srgb,var(--fg)_18%,transparent)_transparent] overflow-x-hidden overflow-y-auto outline-none',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/command/command-separator.svelte b/frontend/src/lib/components/ui/command/command-separator.svelte
index 4ea36f49..4525005c 100644
--- a/frontend/src/lib/components/ui/command/command-separator.svelte
+++ b/frontend/src/lib/components/ui/command/command-separator.svelte
@@ -12,6 +12,6 @@
 <CommandPrimitive.Separator
 	bind:ref
 	data-slot="command-separator"
-	class={cn('bg-border/50 my-1.5 h-px', className)}
+	class={cn('bg-border -mx-1 my-1 h-px', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/command/command-shortcut.svelte b/frontend/src/lib/components/ui/command/command-shortcut.svelte
index daaba4fc..97dcbce2 100644
--- a/frontend/src/lib/components/ui/command/command-shortcut.svelte
+++ b/frontend/src/lib/components/ui/command/command-shortcut.svelte
@@ -13,10 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="command-shortcut"
-	class={cn(
-		'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest',
-		className
-	)}
+	class={cn('text-caption text-fg-muted ml-auto pl-2', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/command/command.svelte b/frontend/src/lib/components/ui/command/command.svelte
index 33c403a2..c8c0aaad 100644
--- a/frontend/src/lib/components/ui/command/command.svelte
+++ b/frontend/src/lib/components/ui/command/command.svelte
@@ -20,9 +20,6 @@
 	bind:value
 	bind:ref
 	data-slot="command"
-	class={cn(
-		'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-4xl p-1',
-		className
-	)}
+	class={cn('text-popover-foreground flex size-full flex-col overflow-hidden p-1', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/dialog/dialog-content.svelte b/frontend/src/lib/components/ui/dialog/dialog-content.svelte
index 58abf299..f7312fd3 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-content.svelte
@@ -7,28 +7,33 @@
 	import type { ComponentProps } from 'svelte';
 	import { Button } from '#lib/components/ui/button/index.js';
 	import XIcon from '@lucide/svelte/icons/x';
+	import { m } from '#lib/paraglide/messages.js';
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		portalProps,
+		overlayClass,
 		children,
 		showCloseButton = true,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		overlayClass?: string;
 		children: Snippet;
 		showCloseButton?: boolean;
 	} = $props();
 </script>
 
 <DialogPortal {...portalProps}>
-	<Dialog.Overlay />
+	<Dialog.Overlay class={overlayClass} />
+	<!-- The phone bottom sheet is a set of max-sm overrides, so the centered position and width callers pass in class never reach it -->
 	<DialogPrimitive.Content
 		bind:ref
 		data-slot="dialog-content"
 		class={cn(
-			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 dark:ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl p-6 text-sm shadow-xl ring-1 duration-100 outline-none sm:max-w-md',
+			'bg-popover text-popover-foreground border-border shadow-overlay transition-motion fixed top-1/2 left-1/2 z-(--z-overlay) grid max-h-[85dvh] w-[calc(100%-2rem)] max-w-(--dialog-md) -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border px-6 py-5 duration-(--dur-slow) outline-none data-closed:opacity-0 data-closed:duration-(--dur-base) data-closed:ease-in has-[>[data-slot=dialog-close]]:*:data-[slot=dialog-header]:pr-6 starting:scale-(--pop-scale) starting:opacity-0',
+			'max-sm:before:bg-border-strong max-sm:inset-x-0 max-sm:top-auto max-sm:bottom-0 max-sm:w-full max-sm:max-w-none max-sm:translate-0 max-sm:rounded-t-lg max-sm:rounded-b-none max-sm:pt-6 max-sm:pb-[calc(20px+env(safe-area-inset-bottom))] max-sm:before:absolute max-sm:before:top-2 max-sm:before:left-1/2 max-sm:before:h-1 max-sm:before:w-9 max-sm:before:-translate-x-1/2 max-sm:before:rounded-[2px] max-sm:data-closed:translate-y-full max-sm:data-closed:opacity-100 max-sm:starting:translate-y-full max-sm:starting:scale-100 max-sm:starting:opacity-100',
 			className
 		)}
 		{...restProps}
@@ -39,12 +44,12 @@
 				{#snippet child({ props })}
 					<Button
 						variant="ghost"
-						class="bg-secondary absolute top-4 right-4"
+						class="absolute top-3.5 right-3.5 size-7"
 						size="icon-sm"
 						{...props}
 					>
 						<XIcon />
-						<span class="sr-only">Close</span>
+						<span class="sr-only">{m.close()}</span>
 					</Button>
 				{/snippet}
 			</DialogPrimitive.Close>
diff --git a/frontend/src/lib/components/ui/dialog/dialog-description.svelte b/frontend/src/lib/components/ui/dialog/dialog-description.svelte
index 12014a19..3ca59646 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-description.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-description.svelte
@@ -12,9 +12,6 @@
 <DialogPrimitive.Description
 	bind:ref
 	data-slot="dialog-description"
-	class={cn(
-		'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
-		className
-	)}
+	class={cn('text-control text-fg-muted *:[a]:inline-link wrap-anywhere', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/dialog/dialog-footer.svelte b/frontend/src/lib/components/ui/dialog/dialog-footer.svelte
index c8597cd5..a5004147 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-footer.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -3,6 +3,7 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 	import { Dialog as DialogPrimitive } from 'bits-ui';
 	import { Button } from '#lib/components/ui/button/index.js';
+	import { m } from '#lib/paraglide/messages.js';
 
 	let {
 		ref = $bindable(null),
@@ -18,14 +19,14 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-footer"
-	class={cn('flex flex-col-reverse gap-2 gap-2 sm:flex-row sm:justify-end', className)}
+	class={cn('mt-1 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
 	{...restProps}
 >
 	{@render children?.()}
 	{#if showCloseButton}
 		<DialogPrimitive.Close>
 			{#snippet child({ props })}
-				<Button variant="outline" {...props}>Close</Button>
+				<Button variant="outline" {...props}>{m.close()}</Button>
 			{/snippet}
 		</DialogPrimitive.Close>
 	{/if}
diff --git a/frontend/src/lib/components/ui/dialog/dialog-header.svelte b/frontend/src/lib/components/ui/dialog/dialog-header.svelte
index b6bb2c28..54622539 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-header.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-header"
-	class={cn('flex flex-col gap-1.5', className)}
+	class={cn('flex flex-col gap-1', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte b/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
index 2d6bce03..a036e04a 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="dialog-overlay"
 	class={cn(
-		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/30 duration-100 supports-backdrop-filter:backdrop-blur-sm',
+		'bg-scrim transition-motion fixed inset-0 isolate z-(--z-overlay) backdrop-blur-[4px] duration-(--dur-slow) data-closed:opacity-0 data-closed:duration-(--dur-base) data-closed:ease-in starting:opacity-0 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/dialog/dialog-title.svelte b/frontend/src/lib/components/ui/dialog/dialog-title.svelte
index 891ff1b9..999ce334 100644
--- a/frontend/src/lib/components/ui/dialog/dialog-title.svelte
+++ b/frontend/src/lib/components/ui/dialog/dialog-title.svelte
@@ -12,6 +12,6 @@
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn('text-base leading-none font-medium', className)}
+	class={cn('font-display text-display-s text-fg wrap-anywhere', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
index a408e2e1..4d6a6576 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -23,20 +23,20 @@
 	bind:indeterminate
 	data-slot="dropdown-menu-checkbox-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none data-inset:pl-9.5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"data-highlighted:bg-fg/6 text-control [&_svg:not([class*='text-'])]:text-fg-muted relative flex min-h-9 cursor-pointer items-center gap-2 rounded-sm px-2.5 pr-8 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-45 data-inset:pl-8.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
 		<span
-			class="pointer-events-none absolute right-2 flex items-center justify-center"
+			class="pointer-events-none absolute right-2.5 flex items-center justify-center"
 			data-slot="dropdown-menu-checkbox-item-indicator"
 		>
 			{#if indeterminate}
-				<MinusIcon />
+				<MinusIcon class="text-fg" />
 			{:else if checked}
-				<CheckIcon />
+				<CheckIcon class="text-fg" />
 			{/if}
 		</span>
 		{@render childrenProp?.()}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
index c740c57e..80a09bcd 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -23,7 +23,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-popover/70 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:data-highlighted:bg-destructive/10! dark:**:data-[variant=destructive]:data-highlighted:bg-destructive/20! relative z-50 min-w-48 animate-none! overflow-x-hidden overflow-y-auto rounded-3xl p-1.5 shadow-lg ring-1 duration-100 outline-none before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150 data-closed:overflow-hidden',
+			'text-popover-foreground shadow-popover bg-popover/72 border-fg/6 dark:border-fg/10 [@media(prefers-reduced-transparency:reduce)]:bg-popover! transition-motion z-(--z-popover) max-h-(--bits-dropdown-menu-content-available-height) min-w-50 origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 backdrop-blur-[40px] backdrop-saturate-150 duration-(--dur-base) outline-none data-closed:pointer-events-none data-closed:opacity-0 data-closed:duration-(--dur-fast) data-closed:ease-in starting:scale-(--pop-scale) starting:opacity-0 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!',
 			className
 		)}
 		{...restProps}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
index 5f55d9b8..fbe7062d 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -17,6 +17,6 @@
 	bind:ref
 	data-slot="dropdown-menu-group-heading"
 	data-inset={inset}
-	class={cn('px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8', className)}
+	class={cn('text-caption text-fg-muted px-2.5 pt-2 pb-1 font-medium data-inset:pl-8.5', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
index b951aaa2..8ebeb034 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -20,7 +20,7 @@
 	data-inset={inset}
 	data-variant={variant}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-pointer items-center gap-2.5 rounded-2xl px-3 py-1.5 text-sm font-medium outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"group/dropdown-menu-item data-highlighted:bg-fg/6 text-control not-data-[variant=destructive]:[&_svg:not([class*='text-'])]:text-fg-muted data-[variant=destructive]:text-danger-fg data-[variant=destructive]:data-highlighted:bg-danger-soft data-[variant=destructive]:*:[svg]:text-danger-fg relative flex min-h-9 cursor-pointer items-center gap-2 rounded-sm px-2.5 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-45 data-inset:pl-8.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
index d38eeda9..fec53173 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -17,10 +17,7 @@
 	bind:this={ref}
 	data-slot="dropdown-menu-label"
 	data-inset={inset}
-	class={cn(
-		'text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5 data-[inset]:pl-8',
-		className
-	)}
+	class={cn('text-caption text-fg-muted px-2.5 pt-2 pb-1 font-medium data-inset:pl-8.5', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
index 33dec67e..a87dd5ac 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -15,18 +15,18 @@
 	bind:ref
 	data-slot="dropdown-menu-radio-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-2xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none data-inset:pl-9.5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"data-highlighted:bg-fg/6 text-control [&_svg:not([class*='text-'])]:text-fg-muted relative flex min-h-9 cursor-pointer items-center gap-2 rounded-sm px-2.5 pr-8 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-45 data-inset:pl-8.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
 		<span
-			class="pointer-events-none absolute right-2 flex items-center justify-center"
+			class="pointer-events-none absolute right-2.5 flex items-center justify-center"
 			data-slot="dropdown-menu-radio-item-indicator"
 		>
 			{#if checked}
-				<CheckIcon />
+				<CheckIcon class="text-fg" />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
index dd28c538..2638b87f 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -12,6 +12,6 @@
 <DropdownMenuPrimitive.Separator
 	bind:ref
 	data-slot="dropdown-menu-separator"
-	class={cn('bg-border/50 -mx-1.5 my-1.5 h-px', className)}
+	class={cn('bg-border -mx-1 my-1 h-px', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
index 34ca503a..194284f0 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -13,10 +13,7 @@
 <span
 	bind:this={ref}
 	data-slot="dropdown-menu-shortcut"
-	class={cn(
-		'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
-		className
-	)}
+	class={cn('text-caption text-fg-muted ml-auto pl-2', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
index 9637c4c2..43be2b69 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 	import { cn } from '#lib/utils/style.js';
+	import DropdownMenuPortal from './dropdown-menu-portal.svelte';
 
 	let {
 		ref = $bindable(null),
@@ -9,12 +10,15 @@
 	}: DropdownMenuPrimitive.SubContentProps = $props();
 </script>
 
-<DropdownMenuPrimitive.SubContent
-	bind:ref
-	data-slot="dropdown-menu-sub-content"
-	class={cn(
-		'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 text-popover-foreground bg-popover/70 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:data-highlighted:bg-destructive/10! dark:**:data-[variant=destructive]:data-highlighted:bg-destructive/20! relative w-auto min-w-36 animate-none! rounded-3xl p-1.5 shadow-lg ring-1 duration-100 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150',
-		className
-	)}
-	{...restProps}
-/>
+<!-- The parent menu's backdrop blur and scroll container would otherwise clip the submenu -->
+<DropdownMenuPortal>
+	<DropdownMenuPrimitive.SubContent
+		bind:ref
+		data-slot="dropdown-menu-sub-content"
+		class={cn(
+			'text-popover-foreground shadow-popover bg-popover/72 border-fg/6 dark:border-fg/10 [@media(prefers-reduced-transparency:reduce)]:bg-popover! transition-motion z-(--z-popover) w-auto min-w-50 origin-(--bits-menu-content-transform-origin) rounded-md border p-1 backdrop-blur-[40px] backdrop-saturate-150 duration-(--dur-base) outline-none data-closed:pointer-events-none data-closed:opacity-0 data-closed:duration-(--dur-fast) data-closed:ease-in starting:scale-(--pop-scale) starting:opacity-0 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!',
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>
diff --git a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
index b18d6d5b..b9f4d784 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
+++ b/frontend/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -19,7 +19,7 @@
 	data-slot="dropdown-menu-sub-trigger"
 	data-inset={inset}
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-2xl px-3 py-1.5 text-sm font-medium outline-hidden select-none data-inset:pl-9.5 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"data-highlighted:bg-fg/6 text-control [&_svg:not([class*='text-'])]:text-fg-muted data-open:bg-fg/6 relative flex min-h-9 cursor-pointer items-center gap-2 rounded-sm px-2.5 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-45 data-inset:pl-8.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/empty/empty-content.svelte b/frontend/src/lib/components/ui/empty/empty-content.svelte
index ac9a2205..bfb79369 100644
--- a/frontend/src/lib/components/ui/empty/empty-content.svelte
+++ b/frontend/src/lib/components/ui/empty/empty-content.svelte
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="empty-content"
-	class={cn(
-		'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
-		className
-	)}
+	class={cn('flex w-full min-w-0 flex-wrap items-center gap-3', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/empty/empty-description.svelte b/frontend/src/lib/components/ui/empty/empty-description.svelte
index 47579898..268845ac 100644
--- a/frontend/src/lib/components/ui/empty/empty-description.svelte
+++ b/frontend/src/lib/components/ui/empty/empty-description.svelte
@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="empty-description"
-	class={cn(
-		'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
-		className
-	)}
+	class={cn('text-body text-fg-muted [&>a]:inline-link', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/empty/empty-header.svelte b/frontend/src/lib/components/ui/empty/empty-header.svelte
index 59dc50d6..4a65ef2d 100644
--- a/frontend/src/lib/components/ui/empty/empty-header.svelte
+++ b/frontend/src/lib/components/ui/empty/empty-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="empty-header"
-	class={cn('flex max-w-sm flex-col items-center gap-2', className)}
+	class={cn('flex flex-col items-start gap-2', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/empty/empty-media.svelte b/frontend/src/lib/components/ui/empty/empty-media.svelte
index 20f677cb..e2f16f3f 100644
--- a/frontend/src/lib/components/ui/empty/empty-media.svelte
+++ b/frontend/src/lib/components/ui/empty/empty-media.svelte
@@ -2,11 +2,11 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const emptyMediaVariants = tv({
-		base: 'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+		base: 'mb-1 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
 		variants: {
 			variant: {
 				default: 'bg-transparent',
-				icon: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted text-foreground [&_svg:not([class*='size-'])]:size-5"
+				icon: "size-10 rounded-md bg-fill-muted text-fg-muted [&_svg:not([class*='size-'])]:size-4.5"
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/empty/empty-title.svelte b/frontend/src/lib/components/ui/empty/empty-title.svelte
index 9063a4ca..2552b430 100644
--- a/frontend/src/lib/components/ui/empty/empty-title.svelte
+++ b/frontend/src/lib/components/ui/empty/empty-title.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="empty-title"
-	class={cn('text-xl font-medium tracking-tight', className)}
+	class={cn('text-title font-sans', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/empty/empty.svelte b/frontend/src/lib/components/ui/empty/empty.svelte
index fc78eb12..1f545f1b 100644
--- a/frontend/src/lib/components/ui/empty/empty.svelte
+++ b/frontend/src/lib/components/ui/empty/empty.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="empty"
 	class={cn(
-		'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-2xl border-dashed p-12 text-center text-balance',
+		'flex w-full max-w-[420px] min-w-0 flex-col items-start gap-4 pt-16 pb-12 text-left',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field-content.svelte b/frontend/src/lib/components/ui/field/field-content.svelte
index 104695b8..da0918b2 100644
--- a/frontend/src/lib/components/ui/field/field-content.svelte
+++ b/frontend/src/lib/components/ui/field/field-content.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="field-content"
-	class={cn('group/field-content flex flex-1 flex-col gap-1 leading-snug', className)}
+	class={cn('group/field-content flex flex-1 flex-col gap-0.5', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/field/field-description.svelte b/frontend/src/lib/components/ui/field/field-description.svelte
index 7d474229..ce48a4d8 100644
--- a/frontend/src/lib/components/ui/field/field-description.svelte
+++ b/frontend/src/lib/components/ui/field/field-description.svelte
@@ -14,9 +14,8 @@
 	bind:this={ref}
 	data-slot="field-description"
 	class={cn(
-		'text-muted-foreground text-left text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
-		'last:mt-0 nth-last-2:-mt-1',
-		'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+		'text-caption text-fg-muted text-left [[data-variant=legend]+&]:-mt-1.5',
+		'[&>a]:inline-link',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field-error.svelte b/frontend/src/lib/components/ui/field/field-error.svelte
index 731910e0..b16f0da9 100644
--- a/frontend/src/lib/components/ui/field/field-error.svelte
+++ b/frontend/src/lib/components/ui/field/field-error.svelte
@@ -2,6 +2,7 @@
 	import { cn, type WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
+	import CircleAlertIcon from '@lucide/svelte/icons/circle-alert';
 
 	let {
 		ref = $bindable(null),
@@ -38,9 +39,10 @@
 		bind:this={ref}
 		role="alert"
 		data-slot="field-error"
-		class={cn('text-destructive text-sm font-normal', className)}
+		class={cn('text-caption text-danger-fg flex items-start gap-1', className)}
 		{...restProps}
 	>
+		<CircleAlertIcon class="mt-[3px] size-3 shrink-0" />
 		{#if children}
 			{@render children()}
 		{:else if singleErrorMessage}
diff --git a/frontend/src/lib/components/ui/field/field-group.svelte b/frontend/src/lib/components/ui/field/field-group.svelte
index a9347a77..8d68dfc8 100644
--- a/frontend/src/lib/components/ui/field/field-group.svelte
+++ b/frontend/src/lib/components/ui/field/field-group.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="field-group"
 	class={cn(
-		'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+		'group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field-label.svelte b/frontend/src/lib/components/ui/field/field-label.svelte
index 6c5c7712..2d9c3c10 100644
--- a/frontend/src/lib/components/ui/field/field-label.svelte
+++ b/frontend/src/lib/components/ui/field/field-label.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
 	import { Label } from '#lib/components/ui/label/index.js';
+	import { m } from '#lib/paraglide/messages.js';
 	import { cn } from '#lib/utils/style.js';
 	import type { ComponentProps } from 'svelte';
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		required = false,
+		optional = false,
 		children,
 		...restProps
 	}: ComponentProps<typeof Label> & {
-		required?: boolean;
+		optional?: boolean;
 	} = $props();
 </script>
 
@@ -18,12 +19,14 @@
 	bind:ref
 	data-slot="field-label"
 	class={cn(
-		'has-data-checked:bg-input/30 group/field-label peer/field-label flex w-fit gap-2 leading-snug leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-2xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4',
-		'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
-		required && "after:text-red-500 after:content-['*']",
+		'group/field-label peer/field-label flex w-fit gap-2 font-semibold group-data-[disabled=true]/field:opacity-45',
+		'has-[>[data-slot=field]]:bg-surface hover:has-[>[data-slot=field]]:bg-fill-row-hover has-data-checked:border-border-selected has-[>[data-slot=field]]:has-data-checked:bg-surface-raised hover:has-[>[data-slot=field]]:has-data-checked:bg-surface-raised has-data-checked:shadow-selected has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:font-medium has-[>[data-slot=field]]:has-disabled:cursor-not-allowed *:data-[slot=field]:px-4 *:data-[slot=field]:py-3 has-disabled:**:data-[slot=field-content]:opacity-45',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
+	{#if optional}
+		<span class="text-fg-muted -ms-1 font-normal">{m.field_optional()}</span>
+	{/if}
 </Label>
diff --git a/frontend/src/lib/components/ui/field/field-legend.svelte b/frontend/src/lib/components/ui/field/field-legend.svelte
index a81746d5..07f939ed 100644
--- a/frontend/src/lib/components/ui/field/field-legend.svelte
+++ b/frontend/src/lib/components/ui/field/field-legend.svelte
@@ -18,7 +18,7 @@
 	data-slot="field-legend"
 	data-variant={variant}
 	class={cn(
-		'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
+		'text-fg data-[variant=label]:text-control data-[variant=legend]:text-heading mb-3 data-[variant=label]:font-semibold',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field-separator.svelte b/frontend/src/lib/components/ui/field/field-separator.svelte
index 6947ef08..0947d3ab 100644
--- a/frontend/src/lib/components/ui/field/field-separator.svelte
+++ b/frontend/src/lib/components/ui/field/field-separator.svelte
@@ -20,13 +20,16 @@
 	bind:this={ref}
 	data-slot="field-separator"
 	data-content={hasContent}
-	class={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
+	class={cn(
+		'text-caption relative -my-2 h-5 group-data-[variant=outline]/field-group:-mb-2',
+		className
+	)}
 	{...restProps}
 >
 	<Separator class="absolute inset-0 top-1/2" />
 	{#if children}
 		<span
-			class="text-muted-foreground bg-background relative mx-auto block w-fit px-2"
+			class="bg-background text-fg-muted relative mx-auto block w-fit px-2"
 			data-slot="field-separator-content"
 		>
 			{@render children()}
diff --git a/frontend/src/lib/components/ui/field/field-title.svelte b/frontend/src/lib/components/ui/field/field-title.svelte
index 82821c12..ed71a410 100644
--- a/frontend/src/lib/components/ui/field/field-title.svelte
+++ b/frontend/src/lib/components/ui/field/field-title.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="field-label"
 	class={cn(
-		'flex w-fit items-center gap-2 text-sm leading-snug leading-snug font-medium group-data-[disabled=true]/field:opacity-50',
+		'text-control text-fg flex w-fit items-center gap-2 font-medium group-data-[disabled=true]/field:opacity-45',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/field/field.svelte b/frontend/src/lib/components/ui/field/field.svelte
index 59219c77..2b8d8934 100644
--- a/frontend/src/lib/components/ui/field/field.svelte
+++ b/frontend/src/lib/components/ui/field/field.svelte
@@ -2,14 +2,14 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const fieldVariants = tv({
-		base: 'data-[invalid=true]:text-destructive gap-3 group/field flex w-full',
+		base: 'group/field flex w-full',
 		variants: {
 			orientation: {
-				vertical: 'cn-field-orientation-vertical flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+				vertical: 'flex-col gap-1.5 [&>*]:w-full [&>.sr-only]:w-auto',
 				horizontal:
-					'cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+					'flex-row items-center gap-3 has-[>[data-slot=field-content]]:items-start [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
 				responsive:
-					'cn-field-orientation-responsive flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+					'flex-col gap-1.5 @md/field-group:flex-row @md/field-group:items-center @md/field-group:gap-3 @md/field-group:has-[>[data-slot=field-content]]:items-start [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/input-group/input-group-addon.svelte b/frontend/src/lib/components/ui/input-group/input-group-addon.svelte
index 466f88f6..bc111370 100644
--- a/frontend/src/lib/components/ui/input-group/input-group-addon.svelte
+++ b/frontend/src/lib/components/ui/input-group/input-group-addon.svelte
@@ -1,15 +1,13 @@
 <script lang="ts" module>
 	import { tv, type VariantProps } from 'tailwind-variants';
 	export const inputGroupAddonVariants = tv({
-		base: "text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-3xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+		base: "flex h-auto cursor-text items-center justify-center gap-2 text-control text-fg-muted select-none group-data-[disabled=true]/input-group:opacity-45 [&>svg:not([class*='size-'])]:size-4",
 		variants: {
 			align: {
-				'inline-start': 'pl-3 has-[>button]:-ml-1 has-[>kbd]:-ml-1 order-first',
-				'inline-end': 'pr-3 has-[>button]:-mr-1 has-[>kbd]:-mr-1 order-last',
-				'block-start':
-					'px-3 pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5 order-first w-full justify-start',
-				'block-end':
-					'px-3 pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5 order-last w-full justify-start'
+				'inline-start': 'order-first pl-3 has-[>button]:pl-1',
+				'inline-end': 'order-last pr-3.5 has-[>button]:pr-1',
+				'block-start': 'order-first w-full justify-start px-3.5 pt-2.5',
+				'block-end': 'order-last w-full justify-start px-3.5 pb-2.5'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/input-group/input-group-button.svelte b/frontend/src/lib/components/ui/input-group/input-group-button.svelte
index de79ebd3..42008f45 100644
--- a/frontend/src/lib/components/ui/input-group/input-group-button.svelte
+++ b/frontend/src/lib/components/ui/input-group/input-group-button.svelte
@@ -2,13 +2,13 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	const inputGroupButtonVariants = tv({
-		base: 'gap-2 rounded-4xl text-sm flex items-center shadow-none',
+		base: 'flex items-center gap-1.5',
 		variants: {
 			size: {
-				xs: "h-6 gap-1 rounded-xl px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
-				sm: 'cn-input-group-button-size-sm',
-				'icon-xs': 'size-6 rounded-xl p-0 has-[>svg]:p-0',
-				'icon-sm': 'size-8 p-0 has-[>svg]:p-0'
+				xs: "h-(--h-xs) rounded-xs px-2 [&>svg:not([class*='size-'])]:size-3.5",
+				sm: 'h-(--h-sm) px-2.5',
+				'icon-xs': 'size-(--h-xs) rounded-xs p-0',
+				'icon-sm': 'size-(--h-sm) p-0'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/input-group/input-group-input.svelte b/frontend/src/lib/components/ui/input-group/input-group-input.svelte
index 1f9a5b8a..0873b3be 100644
--- a/frontend/src/lib/components/ui/input-group/input-group-input.svelte
+++ b/frontend/src/lib/components/ui/input-group/input-group-input.svelte
@@ -1,23 +1,22 @@
 <script lang="ts">
-	import { cn } from '#lib/utils/style.js';
-	import type { ComponentProps } from 'svelte';
-	import { Input } from '#lib/components/ui/input/index.js';
+	import { cn, type WithElementRef } from '#lib/utils/style.js';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		class: className,
-		...props
-	}: ComponentProps<typeof Input> = $props();
+		...restProps
+	}: WithElementRef<HTMLInputAttributes> = $props();
 </script>
 
-<Input
-	bind:ref
+<input
+	bind:this={ref}
+	bind:value
 	data-slot="input-group-control"
 	class={cn(
-		'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+		'text-body text-fg placeholder:text-fg-muted h-full w-full min-w-0 flex-1 bg-transparent px-3.5 outline-hidden max-sm:text-[16px] [&::-webkit-search-cancel-button]:appearance-none',
 		className
 	)}
-	bind:value
-	{...props}
+	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/input-group/input-group-text.svelte b/frontend/src/lib/components/ui/input-group/input-group-text.svelte
index 7204b3f3..b2590fd9 100644
--- a/frontend/src/lib/components/ui/input-group/input-group-text.svelte
+++ b/frontend/src/lib/components/ui/input-group/input-group-text.svelte
@@ -13,7 +13,7 @@
 <span
 	bind:this={ref}
 	class={cn(
-		"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+		"text-control text-fg-muted flex items-center gap-2 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/input-group/input-group-textarea.svelte b/frontend/src/lib/components/ui/input-group/input-group-textarea.svelte
index af1b3df1..ffa94889 100644
--- a/frontend/src/lib/components/ui/input-group/input-group-textarea.svelte
+++ b/frontend/src/lib/components/ui/input-group/input-group-textarea.svelte
@@ -1,23 +1,21 @@
 <script lang="ts">
-	import { cn } from '#lib/utils/style.js';
-	import { Textarea } from '#lib/components/ui/textarea/index.js';
-	import type { ComponentProps } from 'svelte';
+	import { cn, type WithElementRef, type WithoutChildren } from '#lib/utils/style.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		class: className,
-		...props
-	}: ComponentProps<typeof Textarea> = $props();
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
 </script>
 
-<Textarea
-	bind:ref
+<textarea
+	bind:this={ref}
+	bind:value
 	data-slot="input-group-control"
 	class={cn(
-		'flex-1 resize-none rounded-none border-0 bg-transparent py-2.5 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent',
+		'text-body text-fg placeholder:text-fg-muted min-h-[86px] w-full flex-1 resize-none bg-transparent px-3.5 py-2.5 outline-hidden max-sm:text-[16px]',
 		className
 	)}
-	bind:value
-	{...props}
-/>
+	{...restProps}></textarea>
diff --git a/frontend/src/lib/components/ui/input-group/input-group.svelte b/frontend/src/lib/components/ui/input-group/input-group.svelte
index 357a89e1..e6c4618d 100644
--- a/frontend/src/lib/components/ui/input-group/input-group.svelte
+++ b/frontend/src/lib/components/ui/input-group/input-group.svelte
@@ -15,7 +15,7 @@
 	data-slot="input-group"
 	role="group"
 	class={cn(
-		'group/input-group bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-transparent transition-[color,box-shadow,background-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-3xl has-data-[align=block-start]:rounded-3xl has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[textarea]:rounded-2xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5',
+		'group/input-group bg-fill-muted text-fg ring-ring-halo hover:bg-fill-hover has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:bg-surface has-[[data-slot][aria-invalid=true]]:border-danger-solid has-[[data-slot][aria-invalid=true]]:ring-danger-solid/20 dark:border-fg/10 dark:bg-fg/6 dark:hover:bg-fg/9 dark:has-[[data-slot=input-group-control]:focus-visible]:border-ring dark:has-[[data-slot=input-group-control]:focus-visible]:bg-fg/7 dark:has-[[data-slot][aria-invalid=true]]:border-danger-solid relative flex h-(--h-md) w-full min-w-0 items-center rounded-sm border border-transparent has-[[data-slot=input-group-control]:focus-visible]:ring-(length:--halo-width) has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=inline-end]]:[&>input]:pr-2.5 has-[>[data-align=inline-start]]:[&>input]:pl-2.5',
 		className
 	)}
 	{...props}
diff --git a/frontend/src/lib/components/ui/input-otp/input-otp-group.svelte b/frontend/src/lib/components/ui/input-otp/input-otp-group.svelte
index eae49d93..64a4da18 100644
--- a/frontend/src/lib/components/ui/input-otp/input-otp-group.svelte
+++ b/frontend/src/lib/components/ui/input-otp/input-otp-group.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="input-otp-group"
 	class={cn(
-		'has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center gap-1.5 rounded-3xl has-aria-invalid:ring-3',
+		'bg-surface relative flex min-w-0 flex-1 overflow-hidden rounded-sm after:pointer-events-none after:absolute after:inset-0 after:z-1 after:rounded-[inherit] after:shadow-[inset_0_0_0_1px_var(--border-control)]',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/input-otp/input-otp-separator.svelte b/frontend/src/lib/components/ui/input-otp/input-otp-separator.svelte
index 13105c38..69b0b574 100644
--- a/frontend/src/lib/components/ui/input-otp/input-otp-separator.svelte
+++ b/frontend/src/lib/components/ui/input-otp/input-otp-separator.svelte
@@ -16,7 +16,10 @@
 	bind:this={ref}
 	data-slot="input-otp-separator"
 	role="separator"
-	class={cn("flex items-center [&_svg:not([class*='size-'])]:size-4", className)}
+	class={cn(
+		"text-fg-muted flex w-7 shrink-0 items-center justify-center [&_svg:not([class*='size-'])]:size-3",
+		className
+	)}
 	{...restProps}
 >
 	{#if children}
diff --git a/frontend/src/lib/components/ui/input-otp/input-otp-slot.svelte b/frontend/src/lib/components/ui/input-otp/input-otp-slot.svelte
index b9f553a0..19714908 100644
--- a/frontend/src/lib/components/ui/input-otp/input-otp-slot.svelte
+++ b/frontend/src/lib/components/ui/input-otp/input-otp-slot.svelte
@@ -15,17 +15,15 @@
 	bind:ref
 	data-slot="input-otp-slot"
 	class={cn(
-		'bg-input/50 border-input data-active:border-ring data-active:ring-ring/30 data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative flex h-13 w-10 items-center justify-center rounded-sm border text-sm transition-all outline-none data-active:z-10 data-active:ring-3',
+		'text-code-cell text-fg before:bg-danger-soft aria-invalid:text-danger-fg relative isolate grid h-18 max-w-14 min-w-[30px] flex-1 place-items-center font-mono uppercase tabular-nums before:absolute before:inset-0 before:-z-1 before:opacity-0 before:transition-opacity before:duration-(--dur-fast) before:ease-out after:pointer-events-none after:absolute after:inset-0 after:opacity-0 after:shadow-[inset_0_0_0_1px_var(--ring),inset_0_0_0_calc(1px+var(--halo-width))_var(--ring-halo)] first:after:rounded-l-sm last:after:rounded-r-sm aria-invalid:before:opacity-100 data-active:z-2 data-active:after:opacity-100 [&+&]:shadow-[inset_1px_0_0_var(--border-strong)]',
 		className
 	)}
 	{...restProps}
 >
 	{cell.char}
 	{#if cell.hasFakeCaret}
-		<div
-			class="cn-input-otp-caret pointer-events-none absolute inset-0 flex items-center justify-center"
-		>
-			<div class="animate-caret-blink bg-foreground bg-foreground h-4 w-px duration-1000"></div>
+		<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
+			<div class="animate-caret-blink bg-fg h-5.5 w-px [animation-duration:var(--t-caret)]"></div>
 		</div>
 	{/if}
 </InputOTPPrimitive.Cell>
diff --git a/frontend/src/lib/components/ui/input-otp/input-otp.svelte b/frontend/src/lib/components/ui/input-otp/input-otp.svelte
index 4f0c1ab7..d24ec5d3 100644
--- a/frontend/src/lib/components/ui/input-otp/input-otp.svelte
+++ b/frontend/src/lib/components/ui/input-otp/input-otp.svelte
@@ -19,7 +19,7 @@
 	data-lpignore="true"
 	data-1p-ignore="true"
 	class={cn(
-		'cn-input-otp-input flex items-center gap-2 disabled:cursor-not-allowed has-disabled:opacity-50',
+		'flex w-full items-center disabled:cursor-not-allowed has-disabled:opacity-45',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/input/index.ts b/frontend/src/lib/components/ui/input/index.ts
index ef216d22..8bf2ffa7 100644
--- a/frontend/src/lib/components/ui/input/index.ts
+++ b/frontend/src/lib/components/ui/input/index.ts
@@ -1,4 +1,4 @@
-import Root from './input.svelte';
+import Root, { filledFieldClass, readOnlyFieldClass } from './input.svelte';
 
 export type FormInputEvent<T extends Event = Event> = T & {
 	currentTarget: EventTarget & HTMLInputElement;
@@ -6,6 +6,8 @@ export type FormInputEvent<T extends Event = Event> = T & {
 
 export {
 	Root,
+	filledFieldClass,
+	readOnlyFieldClass,
 	//
 	Root as Input
 };
diff --git a/frontend/src/lib/components/ui/input/input.svelte b/frontend/src/lib/components/ui/input/input.svelte
index 00b9cc49..19838f47 100644
--- a/frontend/src/lib/components/ui/input/input.svelte
+++ b/frontend/src/lib/components/ui/input/input.svelte
@@ -1,3 +1,14 @@
+<script lang="ts" module>
+	// Shared by inputs, textareas and select triggers
+	// The dark: classes repeat the focus and invalid borders because the dark variant sorts after every state variant
+	export const filledFieldClass =
+		'border border-transparent bg-fill-muted text-fg outline-hidden hover:bg-fill-hover focus-visible:border-ring focus-visible:bg-surface focus-visible:ring-(length:--halo-width) focus-visible:ring-ring-halo aria-invalid:border-danger-solid aria-invalid:ring-danger-solid/20 disabled:cursor-not-allowed disabled:opacity-45 dark:border-fg/10 dark:bg-fg/6 dark:hover:bg-fg/9 dark:focus-visible:border-ring dark:focus-visible:bg-fg/7 dark:aria-invalid:border-danger-solid';
+
+	// Read-only fields drop the fill for a hairline so they never look editable
+	export const readOnlyFieldClass =
+		'read-only:border-border read-only:bg-transparent! dark:read-only:border-border';
+</script>
+
 <script lang="ts">
 	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
 	import { cn, type WithElementRef } from '#lib/utils/style.js';
@@ -18,31 +29,28 @@
 		'data-slot': dataSlot = 'input',
 		...restProps
 	}: Props = $props();
+
+	// Phone inputs use 16px text so iOS does not zoom on focus, and mono values elsewhere use the mono size because mono glyphs run larger than sans ones
+	const inputClass = $derived(
+		cn(
+			filledFieldClass,
+			readOnlyFieldClass,
+			'h-(--h-md) w-full min-w-0 rounded-sm px-3.5 text-body placeholder:text-fg-muted autofill:shadow-[inset_0_0_0_100px_var(--fill-muted)] autofill:[-webkit-text-fill-color:var(--fg)] max-sm:text-[16px] sm:[&.font-mono]:text-mono file:inline-flex file:h-full file:border-0 file:bg-transparent file:font-medium file:text-fg',
+			className
+		)
+	);
 </script>
 
 {#if type === 'file'}
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}
-		class={cn(
-			'bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-3xl border border-transparent px-3 py-1 text-base transition-[color,box-shadow,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
-			className
-		)}
+		class={inputClass}
 		type="file"
 		bind:files
 		bind:value
 		{...restProps}
 	/>
 {:else}
-	<input
-		bind:this={ref}
-		data-slot={dataSlot}
-		class={cn(
-			'bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-3xl border border-transparent px-3 py-1 text-base transition-[color,box-shadow,background-color] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
-			className
-		)}
-		{type}
-		bind:value
-		{...restProps}
-	/>
+	<input bind:this={ref} data-slot={dataSlot} class={inputClass} {type} bind:value {...restProps} />
 {/if}
diff --git a/frontend/src/lib/components/ui/item/item-content.svelte b/frontend/src/lib/components/ui/item/item-content.svelte
index 82203c72..f26632e3 100644
--- a/frontend/src/lib/components/ui/item/item-content.svelte
+++ b/frontend/src/lib/components/ui/item/item-content.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="item-content"
 	class={cn(
-		'flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none',
+		'flex flex-1 flex-col gap-0.5 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/item/item-description.svelte b/frontend/src/lib/components/ui/item/item-description.svelte
index caf571b9..6f830036 100644
--- a/frontend/src/lib/components/ui/item/item-description.svelte
+++ b/frontend/src/lib/components/ui/item/item-description.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="item-description"
 	class={cn(
-		'text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm font-normal [&>a]:underline [&>a]:underline-offset-4',
+		'text-caption text-fg-muted [&>a:hover]:text-fg line-clamp-2 text-left [&>a]:underline [&>a]:underline-offset-4',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/item/item-media.svelte b/frontend/src/lib/components/ui/item/item-media.svelte
index e41643c3..40664d4b 100644
--- a/frontend/src/lib/components/ui/item/item-media.svelte
+++ b/frontend/src/lib/components/ui/item/item-media.svelte
@@ -8,7 +8,7 @@
 				default: 'bg-transparent',
 				icon: "[&_svg:not([class*='size-'])]:size-4",
 				image:
-					'size-10 overflow-hidden rounded-xl group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-lg [&_img]:size-full [&_img]:object-cover'
+					'size-10 overflow-hidden rounded-md group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-xs [&_img]:size-full [&_img]:object-cover'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/item/item-title.svelte b/frontend/src/lib/components/ui/item/item-title.svelte
index a106f550..6a35161c 100644
--- a/frontend/src/lib/components/ui/item/item-title.svelte
+++ b/frontend/src/lib/components/ui/item/item-title.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="item-title"
 	class={cn(
-		'line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-semibold underline-offset-4',
+		'text-heading line-clamp-1 flex w-fit items-center gap-2 underline-offset-4',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/item/item.svelte b/frontend/src/lib/components/ui/item/item.svelte
index 950e686e..907c7b56 100644
--- a/frontend/src/lib/components/ui/item/item.svelte
+++ b/frontend/src/lib/components/ui/item/item.svelte
@@ -2,19 +2,18 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const itemVariants = tv({
-		base: '[a]:hover:bg-muted rounded-2xl border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
+		base: 'group/item flex w-full flex-wrap items-center rounded-md border text-control transition-colors duration-(--dur-fast) outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [a]:hover:bg-fill-row-hover',
 		variants: {
 			variant: {
 				default: 'border-transparent',
-				outline: 'border-border',
-				muted: 'bg-muted/50 border-transparent',
-				card: 'bg-card shadow-sm border-transparent',
-				transparent: 'bg-transparent border-transparent'
+				outline: 'border-border bg-surface',
+				card: 'border-border bg-surface',
+				transparent: 'border-transparent bg-transparent'
 			},
 			size: {
-				default: 'gap-3.5 px-4 py-3.5',
-				sm: 'gap-3.5 px-3.5 py-3',
-				xs: 'gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0'
+				default: 'gap-4 px-4 py-3',
+				sm: 'gap-3 px-3 py-2.5',
+				xs: 'gap-2.5 px-3 py-2 in-data-[slot=dropdown-menu-content]:p-0'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/label/label.svelte b/frontend/src/lib/components/ui/label/label.svelte
index a0127b53..ac87105a 100644
--- a/frontend/src/lib/components/ui/label/label.svelte
+++ b/frontend/src/lib/components/ui/label/label.svelte
@@ -14,7 +14,7 @@
 	bind:ref
 	data-slot="label"
 	class={cn(
-		'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+		'text-control text-fg flex items-center gap-2 font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-45 peer-disabled:cursor-not-allowed peer-disabled:opacity-45',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte b/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte
index b7fd5e2b..ada668ed 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-ellipsis.svelte
@@ -15,7 +15,7 @@
 	aria-hidden="true"
 	data-slot="pagination-ellipsis"
 	class={cn(
-		"flex size-9 items-center items-center justify-center justify-center [&_svg:not([class*='size-'])]:size-4",
+		"text-fg-muted flex size-(--h-sm) items-center justify-center [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/pagination/pagination-link.svelte b/frontend/src/lib/components/ui/pagination/pagination-link.svelte
index 34a004b9..3726ad04 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-link.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-link.svelte
@@ -5,7 +5,7 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		size = 'icon',
+		size = 'icon-sm',
 		isActive,
 		page,
 		children,
@@ -28,8 +28,8 @@
 	data-active={isActive}
 	data-size={size}
 	class={cn(
-		buttonVariants({ size, variant: isActive ? 'outline' : 'ghost' }),
-		'cn-pagination-link',
+		buttonVariants({ size, variant: isActive ? 'secondary' : 'ghost' }),
+		'tabular-nums',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte b/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte
index 3075ce86..b1e1a108 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-next-button.svelte
@@ -13,14 +13,14 @@
 </script>
 
 {#snippet Fallback()}
-	<span>Next</span>
-	<ChevronRightIcon class={cn('size-4', className)} />
+	<span class="max-sm:sr-only">Next</span>
+	<ChevronRightIcon class="size-4" />
 {/snippet}
 
 <PaginationPrimitive.NextButton
 	bind:ref
 	aria-label="Go to next page"
-	class={cn(buttonVariants({ variant: 'ghost' }), 'pr-2!', className)}
+	class={cn(buttonVariants({ variant: 'secondary', size: 'sm' }), 'max-sm:px-2', className)}
 	{...restProps}
 >
 	{#if children}
diff --git a/frontend/src/lib/components/ui/pagination/pagination-next.svelte b/frontend/src/lib/components/ui/pagination/pagination-next.svelte
index fa28b95c..458dbb97 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-next.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-next.svelte
@@ -14,9 +14,9 @@
 <PaginationPrimitive.NextButton
 	bind:ref
 	aria-label="Go to next page"
-	class={cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'pr-2!', className)}
+	class={cn(buttonVariants({ variant: 'secondary', size: 'sm' }), 'max-sm:px-2', className)}
 	{...restProps}
 >
-	<span class="cn-pagination-next-text hidden sm:block">Next</span>
+	<span class="max-sm:sr-only">Next</span>
 	<ChevronRightIcon data-icon="inline-end" />
 </PaginationPrimitive.NextButton>
diff --git a/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte b/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte
index 6ac5d2d2..f1f37165 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-prev-button.svelte
@@ -13,14 +13,14 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeftIcon class={cn('size-4', className)} />
-	<span>Previous</span>
+	<ChevronLeftIcon class="size-4" />
+	<span class="max-sm:sr-only">Previous</span>
 {/snippet}
 
 <PaginationPrimitive.PrevButton
 	bind:ref
 	aria-label="Go to previous page"
-	class={cn(buttonVariants({ variant: 'ghost' }), 'pl-2!', className)}
+	class={cn(buttonVariants({ variant: 'secondary', size: 'sm' }), 'max-sm:px-2', className)}
 	{...restProps}
 >
 	{#if children}
diff --git a/frontend/src/lib/components/ui/pagination/pagination-previous.svelte b/frontend/src/lib/components/ui/pagination/pagination-previous.svelte
index 681c85d0..b2049170 100644
--- a/frontend/src/lib/components/ui/pagination/pagination-previous.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination-previous.svelte
@@ -14,9 +14,9 @@
 <PaginationPrimitive.PrevButton
 	bind:ref
 	aria-label="Go to previous page"
-	class={cn(buttonVariants({ variant: 'ghost', size: 'default' }), 'pl-2!', className)}
+	class={cn(buttonVariants({ variant: 'secondary', size: 'sm' }), 'max-sm:px-2', className)}
 	{...restProps}
 >
 	<ChevronLeftIcon data-icon="inline-start" />
-	<span class="cn-pagination-previous-text hidden sm:block">Previous</span>
+	<span class="max-sm:sr-only">Previous</span>
 </PaginationPrimitive.PrevButton>
diff --git a/frontend/src/lib/components/ui/pagination/pagination.svelte b/frontend/src/lib/components/ui/pagination/pagination.svelte
index f495121d..12a02e0f 100644
--- a/frontend/src/lib/components/ui/pagination/pagination.svelte
+++ b/frontend/src/lib/components/ui/pagination/pagination.svelte
@@ -23,6 +23,6 @@
 	{count}
 	{perPage}
 	{siblingCount}
-	class={cn('cn-pagination mx-auto flex w-full justify-center', className)}
+	class={cn('mx-auto flex w-full justify-center', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/popover/popover-content.svelte b/frontend/src/lib/components/ui/popover/popover-content.svelte
index 0cc85f96..24f985dc 100644
--- a/frontend/src/lib/components/ui/popover/popover-content.svelte
+++ b/frontend/src/lib/components/ui/popover/popover-content.svelte
@@ -25,7 +25,7 @@
 		{sideOffset}
 		{align}
 		class={cn(
-			'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-3xl p-4 text-sm shadow-lg ring-1 outline-hidden duration-100',
+			'bg-popover text-popover-foreground border-border shadow-popover transition-motion has-data-[slot=command]:bg-popover/72 has-data-[slot=command]:border-fg/6 dark:has-data-[slot=command]:border-fg/10 [@media(prefers-reduced-transparency:reduce)]:bg-popover! z-(--z-popover) flex w-72 origin-(--bits-popover-content-transform-origin) flex-col gap-4 rounded-md border p-3 outline-hidden duration-(--dur-base) has-data-[slot=command]:backdrop-blur-[40px] has-data-[slot=command]:backdrop-saturate-150 data-closed:pointer-events-none data-closed:opacity-0 data-closed:duration-(--dur-fast) data-closed:ease-in starting:scale-(--pop-scale) starting:opacity-0 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!',
 			sameWidth && 'w-(--bits-popover-anchor-width)',
 			className
 		)}
diff --git a/frontend/src/lib/components/ui/popover/popover-description.svelte b/frontend/src/lib/components/ui/popover/popover-description.svelte
index a809eb85..605a533d 100644
--- a/frontend/src/lib/components/ui/popover/popover-description.svelte
+++ b/frontend/src/lib/components/ui/popover/popover-description.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="popover-description"
-	class={cn('text-muted-foreground', className)}
+	class={cn('text-control text-fg-muted', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/popover/popover-header.svelte b/frontend/src/lib/components/ui/popover/popover-header.svelte
index d7d15e0a..61c2882e 100644
--- a/frontend/src/lib/components/ui/popover/popover-header.svelte
+++ b/frontend/src/lib/components/ui/popover/popover-header.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="popover-header"
-	class={cn('flex flex-col gap-1 text-sm', className)}
+	class={cn('flex flex-col gap-1', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/popover/popover-title.svelte b/frontend/src/lib/components/ui/popover/popover-title.svelte
index b1b380c4..0fcdf00c 100644
--- a/frontend/src/lib/components/ui/popover/popover-title.svelte
+++ b/frontend/src/lib/components/ui/popover/popover-title.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="popover-title"
-	class={cn('text-base font-medium', className)}
+	class={cn('text-heading text-fg', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte b/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte
index 061e5c13..1c9223e8 100644
--- a/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte
+++ b/frontend/src/lib/components/ui/radio-group/radio-group-item.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from 'bits-ui';
-	import CircleIcon from '@lucide/svelte/icons/circle';
 	import { cn, type WithoutChildrenOrChild } from '#lib/utils/style.js';
 
 	let {
@@ -14,18 +13,18 @@
 	bind:ref
 	data-slot="radio-group-item"
 	class={cn(
-		'bg-input/90 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border border-transparent outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
+		'group/radio-group-item peer bg-surface focus-visible:outline-ring relative grid size-4.5 shrink-0 place-items-center rounded-full shadow-[inset_0_0_0_1px_var(--border-control)] before:absolute before:inset-0 before:rounded-full before:opacity-0 before:shadow-[inset_0_0_0_var(--selection-border)_var(--primary-control)] before:transition-opacity before:duration-(--dur-base) before:ease-out after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-45 aria-invalid:shadow-[inset_0_0_0_1px_var(--danger-solid)] data-checked:before:opacity-100',
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<div data-slot="radio-group-indicator" class="flex size-4 items-center justify-center">
-			{#if checked}
-				<CircleIcon
-					class="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full dark:size-2.5"
-				/>
-			{/if}
-		</div>
+		<span
+			data-slot="radio-group-indicator"
+			class={cn(
+				'bg-primary-control size-1.5 rounded-full transition-[opacity,scale] duration-(--dur-base) ease-out',
+				!checked && 'scale-60 opacity-0'
+			)}
+		></span>
 	{/snippet}
 </RadioGroupPrimitive.Item>
diff --git a/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
index 557c04a2..96df6df2 100644
--- a/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
+++ b/frontend/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -25,6 +25,6 @@
 	{@render children?.()}
 	<ScrollAreaPrimitive.Thumb
 		data-slot="scroll-area-thumb"
-		class="bg-border relative flex-1 rounded-full"
+		class="bg-border-strong/50 relative flex-1 rounded-full"
 	/>
 </ScrollAreaPrimitive.Scrollbar>
diff --git a/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte b/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte
index 2ded655c..55b76c2b 100644
--- a/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte
+++ b/frontend/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -29,7 +29,7 @@
 	<ScrollAreaPrimitive.Viewport
 		bind:ref={viewportRef}
 		data-slot="scroll-area-viewport"
-		class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+		class="focus-visible:outline-ring size-full rounded-[inherit] outline-none focus-visible:outline-2 focus-visible:-outline-offset-2"
 	>
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
diff --git a/frontend/src/lib/components/ui/select/select-content.svelte b/frontend/src/lib/components/ui/select/select-content.svelte
index 5f9fcef6..45dcd077 100644
--- a/frontend/src/lib/components/ui/select/select-content.svelte
+++ b/frontend/src/lib/components/ui/select/select-content.svelte
@@ -11,6 +11,7 @@
 		ref = $bindable(null),
 		class: className,
 		sideOffset = 4,
+		collisionPadding = 8,
 		portalProps,
 		children,
 		preventScroll = true,
@@ -24,10 +25,11 @@
 	<SelectPrimitive.Content
 		bind:ref
 		{sideOffset}
+		{collisionPadding}
 		{preventScroll}
 		data-slot="select-content"
 		class={cn(
-			'text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-popover/70 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground! relative isolate z-50 min-w-36 animate-none! overflow-x-hidden overflow-y-auto rounded-2xl p-1.5 shadow-lg ring-1 duration-100 before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150',
+			'text-popover-foreground shadow-popover bg-popover/72 border-fg/6 dark:border-fg/10 [@media(prefers-reduced-transparency:reduce)]:bg-popover! transition-motion **:data-[slot=select-item]:data-highlighted:bg-fg/6 relative z-(--z-popover) max-h-(--bits-select-content-available-height) max-w-(--bits-select-content-available-width) min-w-36 origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 backdrop-blur-[40px] backdrop-saturate-150 duration-(--dur-base) outline-none data-closed:pointer-events-none data-closed:opacity-0 data-closed:duration-(--dur-fast) data-closed:ease-in starting:scale-(--pop-scale) starting:opacity-0 [@media(prefers-reduced-transparency:reduce)]:backdrop-filter-none!',
 			className
 		)}
 		{...restProps}
diff --git a/frontend/src/lib/components/ui/select/select-group-heading.svelte b/frontend/src/lib/components/ui/select/select-group-heading.svelte
index 29023a64..e5a80921 100644
--- a/frontend/src/lib/components/ui/select/select-group-heading.svelte
+++ b/frontend/src/lib/components/ui/select/select-group-heading.svelte
@@ -14,7 +14,7 @@
 <SelectPrimitive.GroupHeading
 	bind:ref
 	data-slot="select-group-heading"
-	class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+	class={cn('text-caption text-fg-muted px-2.5 pt-2 pb-1 font-medium', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/select/select-group.svelte b/frontend/src/lib/components/ui/select/select-group.svelte
index 6850d373..c300a04f 100644
--- a/frontend/src/lib/components/ui/select/select-group.svelte
+++ b/frontend/src/lib/components/ui/select/select-group.svelte
@@ -12,6 +12,6 @@
 <SelectPrimitive.Group
 	bind:ref
 	data-slot="select-group"
-	class={cn('scroll-my-1.5', className)}
+	class={cn('scroll-my-1', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/select/select-item.svelte b/frontend/src/lib/components/ui/select/select-item.svelte
index 7c507d64..274bdfb3 100644
--- a/frontend/src/lib/components/ui/select/select-item.svelte
+++ b/frontend/src/lib/components/ui/select/select-item.svelte
@@ -18,22 +18,22 @@
 	{value}
 	data-slot="select-item"
 	class={cn(
-		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-1.5 pr-8 pl-3 text-sm font-medium outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+		"text-control text-fg data-highlighted:bg-fill-hover relative flex min-h-(--row-dense) w-full cursor-default items-center gap-2 rounded-sm px-2.5 outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ selected, highlighted })}
-		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+		<span class="flex size-4 items-center justify-center">
 			{#if selected}
-				<CheckIcon class="cn-select-item-indicator-icon" />
+				<CheckIcon />
 			{/if}
 		</span>
-		<span class="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
+		<span class="flex min-w-0 flex-1 items-center gap-2 py-1.5 whitespace-nowrap">
 			{#if childrenProp}
 				{@render childrenProp({ selected, highlighted })}
 			{:else}
-				{label || value}
+				<span class="truncate">{label || value}</span>
 			{/if}
 		</span>
 	{/snippet}
diff --git a/frontend/src/lib/components/ui/select/select-label.svelte b/frontend/src/lib/components/ui/select/select-label.svelte
index 46c1140a..52fb8b84 100644
--- a/frontend/src/lib/components/ui/select/select-label.svelte
+++ b/frontend/src/lib/components/ui/select/select-label.svelte
@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="select-label"
-	class={cn('text-muted-foreground px-3 py-2.5 text-xs', className)}
+	class={cn('text-caption text-fg-muted px-2.5 pt-2 pb-1 font-medium', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte b/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
index 86963031..c775a290 100644
--- a/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
+++ b/frontend/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -14,7 +14,7 @@
 	bind:ref
 	data-slot="select-scroll-down-button"
 	class={cn(
-		"bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+		"text-fg-muted bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte b/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
index b5ab58fe..25edb28a 100644
--- a/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
+++ b/frontend/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -14,7 +14,7 @@
 	bind:ref
 	data-slot="select-scroll-up-button"
 	class={cn(
-		"top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
+		"text-fg-muted top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/select/select-separator.svelte b/frontend/src/lib/components/ui/select/select-separator.svelte
index 10862989..14d284c4 100644
--- a/frontend/src/lib/components/ui/select/select-separator.svelte
+++ b/frontend/src/lib/components/ui/select/select-separator.svelte
@@ -13,6 +13,6 @@
 <Separator
 	bind:ref
 	data-slot="select-separator"
-	class={cn('bg-border pointer-events-none -mx-1.5 my-1.5 h-px', className)}
+	class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/select/select-trigger.svelte b/frontend/src/lib/components/ui/select/select-trigger.svelte
index d6aabc62..bf06cc47 100644
--- a/frontend/src/lib/components/ui/select/select-trigger.svelte
+++ b/frontend/src/lib/components/ui/select/select-trigger.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Select as SelectPrimitive } from 'bits-ui';
+	import { filledFieldClass } from '#lib/components/ui/input/index.js';
 	import { cn, type WithoutChild } from '#lib/utils/style.js';
 	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
 
@@ -19,11 +20,12 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={cn(
-		"bg-input/50 data-placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-3xl border border-transparent px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow,background-color] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		filledFieldClass,
+		"text-control aria-expanded:bg-fill-selected data-placeholder:text-fg-muted dark:aria-expanded:bg-fill-selected flex w-fit min-w-0 items-center justify-between gap-1.5 rounded-sm text-left whitespace-nowrap data-[size=default]:h-(--h-md) data-[size=default]:pr-2.5 data-[size=default]:pl-3.5 data-[size=sm]:h-(--h-sm) data-[size=sm]:pr-2 data-[size=sm]:pl-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDownIcon class="text-muted-foreground pointer-events-none size-4" />
+	<ChevronDownIcon class="text-fg-muted pointer-events-none size-3.5" />
 </SelectPrimitive.Trigger>
diff --git a/frontend/src/lib/components/ui/skeleton/skeleton.svelte b/frontend/src/lib/components/ui/skeleton/skeleton.svelte
index 403f95a4..312a2f5c 100644
--- a/frontend/src/lib/components/ui/skeleton/skeleton.svelte
+++ b/frontend/src/lib/components/ui/skeleton/skeleton.svelte
@@ -12,6 +12,9 @@
 <div
 	bind:this={ref}
 	data-slot="skeleton"
-	class={cn('bg-muted animate-pulse rounded-2xl', className)}
+	class={cn(
+		'bg-fill-skeleton animate-[pulse_var(--t-pulse)_ease-in-out_infinite] rounded-xs',
+		className
+	)}
 	{...restProps}
 ></div>
diff --git a/frontend/src/lib/components/ui/sonner/sonner.svelte b/frontend/src/lib/components/ui/sonner/sonner.svelte
index eee0b4d9..c8b1a449 100644
--- a/frontend/src/lib/components/ui/sonner/sonner.svelte
+++ b/frontend/src/lib/components/ui/sonner/sonner.svelte
@@ -8,27 +8,45 @@
 	import TriangleAlertIcon from '@lucide/svelte/icons/triangle-alert';
 
 	let { ...restProps }: SonnerProps = $props();
+
+	const buttonClass =
+		'h-7! rounded-xs! bg-transparent! px-2! text-caption! font-medium! text-inverse-fg! hover:bg-inverse-hover!';
 </script>
 
+<!-- svelte-sonner ships unlayered CSS, which beats layered Tailwind utilities, so overrides need the important modifier -->
 <Sonner
 	theme={mode.current}
-	class="toaster group"
-	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
+	class="toaster group z-(--z-toast)! font-sans!"
+	style="--normal-bg: var(--inverse); --normal-text: var(--inverse-fg); --normal-border: var(--inverse-border); --border-radius: var(--radius-lg);"
+	gap={8}
+	mobileOffset={{ bottom: 'calc(76px + env(safe-area-inset-bottom))' }}
+	toastOptions={{
+		classes: {
+			toast:
+				'w-full! max-w-[calc(100vw-2rem)]! sm:w-(--toast-w)! items-start! gap-2! p-3! text-caption! shadow-overlay! transition-[transform,opacity]! duration-(--dur-base)! ease-out! focus-visible:outline-2! focus-visible:-outline-offset-2! focus-visible:outline-inverse-fg! data-[swiping=true]:transition-none!',
+			icon: 'mt-px!',
+			description: 'text-micro! font-normal! text-inverse-muted!',
+			actionButton: buttonClass,
+			cancelButton: buttonClass,
+			closeButton:
+				'border-inverse-border! bg-inverse! text-inverse-muted! hover:bg-inverse-hover! hover:text-inverse-fg!'
+		}
+	}}
 	{...restProps}
 >
 	{#snippet loadingIcon()}
-		<Loader2Icon class="size-4 animate-spin" />
+		<Loader2Icon class="text-inverse-muted size-3.5 animate-spin" />
 	{/snippet}
 	{#snippet successIcon()}
-		<CircleCheckIcon class="size-4" />
+		<CircleCheckIcon class="fill-success-solid text-inverse size-3.5" />
 	{/snippet}
 	{#snippet errorIcon()}
-		<OctagonXIcon class="size-4" />
+		<OctagonXIcon class="fill-danger-solid text-inverse size-3.5" />
 	{/snippet}
 	{#snippet infoIcon()}
-		<InfoIcon class="size-4" />
+		<InfoIcon class="fill-inverse-muted text-inverse size-3.5" />
 	{/snippet}
 	{#snippet warningIcon()}
-		<TriangleAlertIcon class="size-4" />
+		<TriangleAlertIcon class="fill-warning-solid text-inverse size-3.5" />
 	{/snippet}
 </Sonner>
diff --git a/frontend/src/lib/components/ui/spinner/spinner.svelte b/frontend/src/lib/components/ui/spinner/spinner.svelte
index 09f6025e..772ea6b4 100644
--- a/frontend/src/lib/components/ui/spinner/spinner.svelte
+++ b/frontend/src/lib/components/ui/spinner/spinner.svelte
@@ -1,14 +1,26 @@
 <script lang="ts">
 	import { cn } from '#lib/utils/style.js';
-	import Loader2Icon from '@lucide/svelte/icons/loader-2';
-	import type { ComponentProps } from 'svelte';
+	import type { SVGAttributes } from 'svelte/elements';
 
-	let { class: className, ...restProps }: ComponentProps<typeof Loader2Icon> = $props();
+	let { class: className, ...restProps }: SVGAttributes<SVGSVGElement> = $props();
 </script>
 
-<Loader2Icon
-	role="status"
-	aria-label="Loading"
-	class={cn('size-4 animate-spin', className)}
+<!-- The animate-spin class is what the reduced-motion safety net in app.css exempts -->
+<svg
+	viewBox="0 0 16 16"
+	aria-hidden="true"
+	focusable="false"
+	class={cn('size-4 shrink-0 animate-spin [animation-duration:var(--t-spin)]', className)}
 	{...restProps}
-/>
+>
+	<circle
+		cx="8"
+		cy="8"
+		r="6.25"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.5"
+		stroke-linecap="round"
+		stroke-dasharray="29.45 39.27"
+	/>
+</svg>
diff --git a/frontend/src/lib/components/ui/switch/switch.svelte b/frontend/src/lib/components/ui/switch/switch.svelte
index 2d56f705..d0ff7b02 100644
--- a/frontend/src/lib/components/ui/switch/switch.svelte
+++ b/frontend/src/lib/components/ui/switch/switch.svelte
@@ -6,26 +6,23 @@
 		ref = $bindable(null),
 		class: className,
 		checked = $bindable(false),
-		size = 'default',
 		...restProps
-	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
-		size?: 'sm' | 'default';
-	} = $props();
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
 </script>
 
+<!-- The on-track and on-thumb colors are layers that crossfade, so only opacity and transform animate -->
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	data-slot="switch"
-	data-size={size}
 	class={cn(
-		'data-checked:bg-primary data-unchecked:bg-input/90 data-checked:border-primary focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 peer group/switch relative inline-flex shrink-0 items-center rounded-full border-2 transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-unchecked:border-transparent data-[size=default]:h-5 data-[size=default]:w-11 data-[size=sm]:h-4 data-[size=sm]:w-7',
+		'peer group/switch bg-fill-selected before:bg-primary-control focus-visible:outline-ring relative isolate inline-flex h-6 w-10 shrink-0 items-center rounded-full shadow-[inset_0_0_0_1px_var(--border-control)] before:absolute before:inset-0 before:rounded-full before:opacity-0 before:transition-opacity before:duration-(--dur-base) before:ease-in-out after:absolute after:-inset-x-3 after:-inset-y-2 hover:shadow-[inset_0_0_0_1px_var(--fg-muted)] focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-45 aria-invalid:shadow-[inset_0_0_0_1px_var(--danger-solid)] data-checked:before:opacity-100 data-checked:hover:shadow-[inset_0_0_0_1px_var(--primary-control)]',
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		data-slot="switch-thumb"
-		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full shadow-sm ring-0 transition-transform not-dark:bg-clip-padding group-data-[size=default]/switch:h-4 group-data-[size=default]/switch:w-6 group-data-[size=sm]/switch:h-3 group-data-[size=sm]/switch:w-4 data-checked:translate-x-[calc(100%-8px)] data-unchecked:translate-x-0 rtl:data-[state=checked]:translate-x-[calc(-100%)]"
+		class="bg-fg-muted shadow-thumb before:bg-primary-control-foreground pointer-events-none relative ms-0.5 block size-5 rounded-full transition-transform duration-(--dur-base) ease-in-out before:absolute before:inset-0 before:rounded-full before:opacity-0 before:transition-opacity before:duration-(--dur-base) before:ease-in-out data-checked:translate-x-4 data-checked:before:opacity-100 rtl:data-checked:-translate-x-4"
 	/>
 </SwitchPrimitive.Root>
diff --git a/frontend/src/lib/components/ui/table/table-body.svelte b/frontend/src/lib/components/ui/table/table-body.svelte
index dbca9db1..548733eb 100644
--- a/frontend/src/lib/components/ui/table/table-body.svelte
+++ b/frontend/src/lib/components/ui/table/table-body.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '#lib/utils/style.js';
+	import type { WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
@@ -10,11 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody
-	bind:this={ref}
-	data-slot="table-body"
-	class={cn('[&_tr:last-child]:border-0', className)}
-	{...restProps}
->
+<tbody bind:this={ref} data-slot="table-body" class={className} {...restProps}>
 	{@render children?.()}
 </tbody>
diff --git a/frontend/src/lib/components/ui/table/table-caption.svelte b/frontend/src/lib/components/ui/table/table-caption.svelte
index 5f488944..f6c922ad 100644
--- a/frontend/src/lib/components/ui/table/table-caption.svelte
+++ b/frontend/src/lib/components/ui/table/table-caption.svelte
@@ -13,7 +13,7 @@
 <caption
 	bind:this={ref}
 	data-slot="table-caption"
-	class={cn('text-muted-foreground mt-4 text-sm', className)}
+	class={cn('text-caption text-fg-muted mt-4', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/table/table-cell.svelte b/frontend/src/lib/components/ui/table/table-cell.svelte
index 810c67cc..3d2a7779 100644
--- a/frontend/src/lib/components/ui/table/table-cell.svelte
+++ b/frontend/src/lib/components/ui/table/table-cell.svelte
@@ -13,7 +13,10 @@
 <td
 	bind:this={ref}
 	data-slot="table-cell"
-	class={cn('p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}
+	class={cn(
+		'h-(--row-2line) px-4 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/table/table-footer.svelte b/frontend/src/lib/components/ui/table/table-footer.svelte
index b7472fee..44da24d8 100644
--- a/frontend/src/lib/components/ui/table/table-footer.svelte
+++ b/frontend/src/lib/components/ui/table/table-footer.svelte
@@ -13,7 +13,7 @@
 <tfoot
 	bind:this={ref}
 	data-slot="table-footer"
-	class={cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className)}
+	class={cn('bg-surface-sunken border-t font-medium [&>tr]:last:border-b-0', className)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/table/table-head.svelte b/frontend/src/lib/components/ui/table/table-head.svelte
index 7325e969..0d96ec89 100644
--- a/frontend/src/lib/components/ui/table/table-head.svelte
+++ b/frontend/src/lib/components/ui/table/table-head.svelte
@@ -15,7 +15,7 @@
 	data-slot="table-head"
 	scope="col"
 	class={cn(
-		'text-foreground h-12 px-3 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+		'bg-surface-sunken text-caption text-fg-muted h-10 px-4 text-left align-middle font-medium whitespace-nowrap first:rounded-l-sm last:rounded-r-sm [&:has([role=checkbox])]:pr-0',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/table/table-header.svelte b/frontend/src/lib/components/ui/table/table-header.svelte
index c8aeceb8..a76e5ae8 100644
--- a/frontend/src/lib/components/ui/table/table-header.svelte
+++ b/frontend/src/lib/components/ui/table/table-header.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn, type WithElementRef } from '#lib/utils/style.js';
+	import type { WithElementRef } from '#lib/utils/style.js';
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	let {
@@ -10,11 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<thead
-	bind:this={ref}
-	data-slot="table-header"
-	class={cn('[&_tr]:border-b', className)}
-	{...restProps}
->
+<thead bind:this={ref} data-slot="table-header" class={className} {...restProps}>
 	{@render children?.()}
 </thead>
diff --git a/frontend/src/lib/components/ui/table/table-row.svelte b/frontend/src/lib/components/ui/table/table-row.svelte
index 92b92238..8bcb965d 100644
--- a/frontend/src/lib/components/ui/table/table-row.svelte
+++ b/frontend/src/lib/components/ui/table/table-row.svelte
@@ -14,7 +14,7 @@
 	bind:this={ref}
 	data-slot="table-row"
 	class={cn(
-		'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+		'in-[tbody]:hover:bg-fill-row-hover in-[tbody]:has-focus-visible:bg-fill-row-hover data-[state=selected]:bg-fill-muted border-b transition-colors duration-(--dur-fast) in-[thead]:border-b-0',
 		className
 	)}
 	{...restProps}
diff --git a/frontend/src/lib/components/ui/table/table.svelte b/frontend/src/lib/components/ui/table/table.svelte
index 1ba6cd71..a4e7af4b 100644
--- a/frontend/src/lib/components/ui/table/table.svelte
+++ b/frontend/src/lib/components/ui/table/table.svelte
@@ -10,11 +10,12 @@
 	}: WithElementRef<HTMLTableAttributes> = $props();
 </script>
 
-<div data-slot="table-container" class="relative w-full overflow-x-auto">
+<!-- The block padding keeps focus rings in the header row visible inside the horizontal scroller -->
+<div data-slot="table-container" class="relative -my-1 w-full overflow-x-auto py-1">
 	<table
 		bind:this={ref}
 		data-slot="table"
-		class={cn('w-full caption-bottom text-sm', className)}
+		class={cn('text-control w-full caption-bottom', className)}
 		{...restProps}
 	>
 		{@render children?.()}
diff --git a/frontend/src/lib/components/ui/tabs/tabs-content.svelte b/frontend/src/lib/components/ui/tabs/tabs-content.svelte
index 0f592422..5397f4b3 100644
--- a/frontend/src/lib/components/ui/tabs/tabs-content.svelte
+++ b/frontend/src/lib/components/ui/tabs/tabs-content.svelte
@@ -12,6 +12,6 @@
 <TabsPrimitive.Content
 	bind:ref
 	data-slot="tabs-content"
-	class={cn('flex-1 text-sm outline-none', className)}
+	class={cn('flex-1', className)}
 	{...restProps}
 />
diff --git a/frontend/src/lib/components/ui/tabs/tabs-list.svelte b/frontend/src/lib/components/ui/tabs/tabs-list.svelte
index a00ee70a..48e57c6f 100644
--- a/frontend/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/frontend/src/lib/components/ui/tabs/tabs-list.svelte
@@ -2,11 +2,11 @@
 	import { tv, type VariantProps } from 'tailwind-variants';
 
 	export const tabsListVariants = tv({
-		base: 'rounded-full p-1 group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
+		base: 'group/tabs-list relative isolate flex w-fit items-center group-data-[orientation=vertical]/tabs:flex-col',
 		variants: {
 			variant: {
-				default: 'cn-tabs-list-variant-default bg-muted',
-				line: 'cn-tabs-list-variant-line gap-1 bg-transparent'
+				default: 'gap-1',
+				line: 'w-full gap-6 shadow-[inset_0_-1px_0_var(--border)]'
 			}
 		},
 		defaultVariants: {
@@ -18,7 +18,6 @@
 </script>
 
 <script lang="ts">
-	import appConfigStore from '#lib/stores/application-configuration-store.ts';
 	import { cn } from '#lib/utils/style.js';
 	import { Tabs as TabsPrimitive } from 'bits-ui';
 	import { onMount } from 'svelte';
@@ -33,56 +32,76 @@
 		variant?: TabsListVariant;
 	} = $props();
 
-	let indicatorOffset = $state(0);
-	let indicatorSize = $state(0);
+	let indicator = $state<HTMLElement | null>(null);
 	let indicatorVisible = $state(false);
-	let indicatorOrientation = $state<'horizontal' | 'vertical'>('horizontal');
 
-	function updateIndicator() {
-		if (!ref || variant !== 'line') {
-			indicatorVisible = false;
-			return;
-		}
-
-		const activeTrigger = ref.querySelector<HTMLElement>(
+	// Moves the indicator by FLIP so only transform animates, and never on first paint or on resize
+	function updateIndicator(animate: boolean) {
+		if (!ref || !indicator) return;
+		const active = ref.querySelector<HTMLElement>(
 			'[data-slot="tabs-trigger"][data-state="active"]'
 		);
-		if (!activeTrigger) {
+		if (!active || ref.dataset.orientation === 'vertical') {
 			indicatorVisible = false;
 			return;
 		}
 
 		const listRect = ref.getBoundingClientRect();
-		const triggerRect = activeTrigger.getBoundingClientRect();
-		indicatorOrientation = ref.dataset.orientation === 'vertical' ? 'vertical' : 'horizontal';
+		const targetRect = active.getBoundingClientRect();
+		const from = indicator.getBoundingClientRect();
 
-		if (indicatorOrientation === 'vertical') {
-			indicatorOffset = triggerRect.top - listRect.top;
-			indicatorSize = triggerRect.height;
+		indicator.style.transition = 'none';
+		indicator.style.transform = '';
+		indicator.style.left = `${targetRect.left - listRect.left}px`;
+		indicator.style.width = `${targetRect.width}px`;
+		if (variant === 'default') {
+			indicator.style.top = `${targetRect.top - listRect.top}px`;
+			indicator.style.height = `${targetRect.height}px`;
+		}
+
+		const to = indicator.getBoundingClientRect();
+		if (animate && indicatorVisible && from.width > 0 && to.width > 0) {
+			indicator.style.transform = `translateX(${from.left - to.left}px) scaleX(${from.width / to.width})`;
+			indicator.getBoundingClientRect();
+			indicator.style.transition = '';
+			indicator.style.transform = '';
 		} else {
-			const triggerStyle = getComputedStyle(activeTrigger);
-			const paddingLeft = Number.parseFloat(triggerStyle.paddingLeft);
-			const paddingRight = Number.parseFloat(triggerStyle.paddingRight);
-			indicatorOffset = triggerRect.left - listRect.left + paddingLeft;
-			indicatorSize = triggerRect.width - paddingLeft - paddingRight;
+			indicator.style.transition = '';
 		}
 		indicatorVisible = true;
 	}
 
-	onMount(() => {
-		if (!ref || variant !== 'line') return;
+	// Tab rows scroll sideways on phones, so the active tab is brought into view on load and whenever it changes
+	function scrollActiveIntoView() {
+		ref
+			?.querySelector('[data-slot="tabs-trigger"][data-state="active"]')
+			?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+	}
 
-		const resizeObserver = new ResizeObserver(updateIndicator);
+	onMount(() => {
+		if (!ref) return;
+
+		const resizeObserver = new ResizeObserver(() => updateIndicator(false));
 		const observeTriggers = () => {
 			ref
 				?.querySelectorAll<HTMLElement>('[data-slot="tabs-trigger"]')
 				.forEach((trigger) => resizeObserver.observe(trigger));
-			updateIndicator();
 		};
-		const mutationObserver = new MutationObserver(observeTriggers);
+		const mutationObserver = new MutationObserver((mutations) => {
+			observeTriggers();
+			updateIndicator(true);
+			const activated = mutations.some(
+				(mutation) =>
+					mutation.type === 'attributes' &&
+					(mutation.target as HTMLElement).dataset.state === 'active'
+			);
+			if (activated) scrollActiveIntoView();
+		});
 
 		resizeObserver.observe(ref);
 		observeTriggers();
+		updateIndicator(false);
+		scrollActiveIntoView();
 		mutationObserver.observe(ref, {
 			attributes: true,
 			attributeFilter: ['data-state'],
@@ -101,26 +120,20 @@
 	bind:ref
 	data-slot="tabs-list"
 	data-variant={variant}
-	class={cn(tabsListVariants({ variant }), variant === 'line' && 'relative', className)}
+	class={cn(tabsListVariants({ variant }), className)}
 	{...restProps}
 >
+	<span
+		bind:this={indicator}
+		aria-hidden="true"
+		data-slot="tabs-indicator"
+		class={cn(
+			'pointer-events-none absolute left-0 origin-left opacity-0 transition-transform duration-(--dur-base) ease-in-out',
+			variant === 'line'
+				? 'bg-fg bottom-0 h-0.5'
+				: 'bg-surface-raised top-0 -z-10 rounded-sm shadow-[inset_0_0_0_1px_var(--border-selected),var(--elevation-selected)]',
+			indicatorVisible && 'opacity-100'
+		)}
+	></span>
 	{@render children?.()}
-	{#if variant === 'line'}
-		<span
-			aria-hidden="true"
-			data-slot="tabs-indicator"
-			class={cn(
-				'bg-foreground pointer-events-none absolute rounded-full opacity-0',
-				!$appConfigStore?.disableAnimations &&
-					'transition-[transform,width,height,opacity] duration-300 ease-out motion-reduce:transition-none',
-				indicatorOrientation === 'horizontal' ? 'bottom-0 left-0 h-0.5' : 'top-0 right-0 w-0.5',
-				indicatorVisible && 'opacity-100'
-			)}
-			style:width={indicatorOrientation === 'horizontal' ? `${indicatorSize}px` : undefined}
-			style:height={indicatorOrientation === 'vertical' ? `${indicatorSize}px` : undefined}
-			style:transform={indicatorOrientation === 'horizontal'
-				? `translate3d(${indicatorOffset}px, 0, 0)`
-				: `translate3d(0, ${indicatorOffset}px, 0)`}
-		></span>
-	{/if}
 </TabsPrimitive.List>
diff --git a/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte b/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
index 326f3e42..4165756d 100644
--- a/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/frontend/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -5,6 +5,7 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		children,
 		...restProps
 	}: TabsPrimitive.TriggerProps = $props();
 </script>
@@ -13,10 +14,24 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 rounded-full border border-transparent! px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:rounded-2xl group-data-vertical/tabs:px-3 group-data-vertical/tabs:py-1.5 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-		'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
-		'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
+		"group/tabs-trigger text-control text-fg-muted hover:text-fg focus-visible:outline-ring data-[state=active]:text-fg relative inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-colors duration-(--dur-fast) focus-visible:outline-2 disabled:pointer-events-none disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+		'group-data-[variant=default]/tabs-list:h-(--h-sm) group-data-[variant=default]/tabs-list:rounded-sm group-data-[variant=default]/tabs-list:px-3 group-data-[variant=default]/tabs-list:focus-visible:outline-offset-2 group-data-[variant=default]/tabs-list:data-[state=active]:font-medium',
+		'group-data-[variant=line]/tabs-list:h-11 group-data-[variant=line]/tabs-list:rounded-xs group-data-[variant=line]/tabs-list:px-0.5 group-data-[variant=line]/tabs-list:font-medium group-data-[variant=line]/tabs-list:focus-visible:-outline-offset-2',
+		'group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start',
 		className
 	)}
 	{...restProps}
-/>
+>
+	<!-- The active weight is reserved in the same grid cell so selecting a tab never moves its neighbours -->
+	<span class="grid">
+		<span
+			aria-hidden="true"
+			class="invisible col-start-1 row-start-1 inline-flex items-center gap-1.5 font-medium"
+		>
+			{@render children?.()}
+		</span>
+		<span class="col-start-1 row-start-1 inline-flex items-center gap-1.5">
+			{@render children?.()}
+		</span>
+	</span>
+</TabsPrimitive.Trigger>
diff --git a/frontend/src/lib/components/ui/tabs/tabs.svelte b/frontend/src/lib/components/ui/tabs/tabs.svelte
index 3abf85f0..d5e26077 100644
--- a/frontend/src/lib/components/ui/tabs/tabs.svelte
+++ b/frontend/src/lib/components/ui/tabs/tabs.svelte
@@ -15,9 +15,11 @@
 	} = $props();
 
 	// Follows the hash on load and on later hash changes, so that links like `#credentials` elsewhere on the page can switch the tab
+	// Tab changes write the hash with a shallow goto, so when Back restores such an entry page.url has no hash and the browser's own hash is the fallback
 	$effect(() => {
-		if (useHash && page.url.hash) {
-			value = page.url.hash.substring(1);
+		const hash = page.url.hash || location.hash;
+		if (useHash && hash) {
+			value = hash.substring(1);
 		}
 	});
 
diff --git a/frontend/src/lib/components/ui/textarea/textarea.svelte b/frontend/src/lib/components/ui/textarea/textarea.svelte
index ba0f718c..8abc68fc 100644
--- a/frontend/src/lib/components/ui/textarea/textarea.svelte
+++ b/frontend/src/lib/components/ui/textarea/textarea.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { filledFieldClass, readOnlyFieldClass } from '#lib/components/ui/input/index.js';
 	import { cn, type WithElementRef, type WithoutChildren } from '#lib/utils/style.js';
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 
@@ -11,11 +12,14 @@
 	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
 </script>
 
+<!-- min-h-[86px] holds three body lines plus the vertical padding -->
 <textarea
 	bind:this={ref}
 	data-slot={dataSlot}
 	class={cn(
-		'bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full resize-none rounded-2xl border border-transparent px-3 py-3 text-base transition-[color,box-shadow,background-color] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+		filledFieldClass,
+		readOnlyFieldClass,
+		'text-body placeholder:text-fg-muted flex min-h-[86px] w-full resize-y rounded-sm px-3.5 py-2.5 max-sm:text-[16px]',
 		className
 	)}
 	bind:value
diff --git a/frontend/src/lib/components/ui/toggle/toggle.svelte b/frontend/src/lib/components/ui/toggle/toggle.svelte
index 49b48d4e..fb10d785 100644
--- a/frontend/src/lib/components/ui/toggle/toggle.svelte
+++ b/frontend/src/lib/components/ui/toggle/toggle.svelte
@@ -2,17 +2,16 @@
 	import { type VariantProps, tv } from 'tailwind-variants';
 
 	export const toggleVariants = tv({
-		base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-3xl text-sm font-medium transition-colors [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		base: "inline-flex items-center justify-center gap-2 rounded-sm text-control whitespace-nowrap text-fg-muted hover:bg-fill-hover hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-45 data-[state=on]:bg-fill-selected data-[state=on]:font-medium data-[state=on]:text-fg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		variants: {
 			variant: {
-				default: 'bg-transparent',
-				outline: 'border-input hover:bg-muted border bg-transparent'
+				default: '',
+				outline: 'border border-border'
 			},
 			size: {
-				default:
-					'h-9 min-w-9 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
-				sm: 'h-8 min-w-8 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-				lg: 'h-10 min-w-10 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3'
+				default: 'h-(--h-md) min-w-(--h-md) px-3',
+				sm: 'h-(--h-sm) min-w-(--h-sm) px-2.5',
+				lg: 'h-(--h-lg) min-w-(--h-lg) px-4'
 			}
 		},
 		defaultVariants: {
diff --git a/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
index 50fc4fe8..238e13d5 100644
--- a/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
+++ b/frontend/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -8,14 +8,11 @@
 	let {
 		ref = $bindable(null),
 		class: className,
-		sideOffset = 0,
+		sideOffset = 6,
 		side = 'top',
-		children,
-		arrowClasses,
 		portalProps,
 		...restProps
 	}: TooltipPrimitive.ContentProps & {
-		arrowClasses?: string;
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
 	} = $props();
 </script>
@@ -27,35 +24,9 @@
 		{sideOffset}
 		{side}
 		class={cn(
-			'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 text-popover-foreground relative isolate z-50 inline-flex w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin) items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs shadow-lg ring-1 has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-lg',
+			'bg-inverse text-inverse-fg inset-ring-inverse-border text-caption transition-motion z-(--z-tooltip) inline-flex w-fit max-w-60 items-center gap-1.5 rounded-sm px-2 py-1 inset-ring data-closed:opacity-0 data-closed:ease-in starting:opacity-0',
 			className
 		)}
 		{...restProps}
-	>
-		<span
-			aria-hidden="true"
-			class="tooltip-surface pointer-events-none absolute inset-0 -z-1 rounded-[inherit]"
-		></span>
-		{@render children?.()}
-		<TooltipPrimitive.Arrow>
-			{#snippet child({ props })}
-				<div class="pointer-events-none z-50 size-2.5" {...props}>
-					<div
-						class={cn(
-							'tooltip-surface border-foreground/5 dark:border-foreground/10 absolute top-[-29.14px] -left-2.5 size-7.5 rotate-45 rounded-[2px] border-r border-b [clip-path:polygon(100%_calc(100%-10px),100%_100%,calc(100%-10px)_100%)]',
-							arrowClasses
-						)}
-					></div>
-				</div>
-			{/snippet}
-		</TooltipPrimitive.Arrow>
-	</TooltipPrimitive.Content>
+	/>
 </TooltipPortal>
-
-<style>
-	.tooltip-surface {
-		background-color: color-mix(in oklab, var(--popover) 70%, transparent);
-		backdrop-filter: blur(24px) saturate(1.5);
-		-webkit-backdrop-filter: blur(24px) saturate(1.5);
-	}
-</style>
diff --git a/frontend/src/lib/components/ui/tooltip/tooltip-provider.svelte b/frontend/src/lib/components/ui/tooltip/tooltip-provider.svelte
index fde5bb28..9f2d72d8 100644
--- a/frontend/src/lib/components/ui/tooltip/tooltip-provider.svelte
+++ b/frontend/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Tooltip as TooltipPrimitive } from 'bits-ui';
 
-	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
+	let { delayDuration = 400, ...restProps }: TooltipPrimitive.ProviderProps = $props();
 </script>
 
 <TooltipPrimitive.Provider {delayDuration} {...restProps} />
diff --git a/frontend/src/lib/utils/style.ts b/frontend/src/lib/utils/style.ts
index b2ca1185..d48aa3ce 100644
--- a/frontend/src/lib/utils/style.ts
+++ b/frontend/src/lib/utils/style.ts
@@ -1,10 +1,50 @@
 import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { defaultConfig } from 'tailwind-variants';
+
+// The type scale defines text-* sizes that tailwind-merge would otherwise read as text colors and drop
+const twMergeConfig = {
+	extend: {
+		classGroups: {
+			'font-size': [
+				{
+					text: [
+						'display-l',
+						'display-m',
+						'display-s',
+						'title',
+						'heading',
+						'body-l',
+						'body',
+						'control',
+						'caption',
+						'micro',
+						'mono',
+						'mono-s',
+						'code-cell'
+					]
+				}
+			]
+		}
+	}
+};
+
+const twMerge = extendTailwindMerge(twMergeConfig);
+defaultConfig.twMergeConfig = twMergeConfig;
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
 
+export function cssVar(name: string) {
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+
+// Durations and holds come from the motion tokens, which collapse to zero under reduced motion
+export function cssMs(name: string) {
+	return parseFloat(cssVar(name)) || 0;
+}
+
 export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
 export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 14376967..03099bf4 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -42,15 +42,9 @@
 	{@render children()}
 {/if}
 <Toaster
-	toastOptions={{
-		classes: {
-			toast: 'border border-primary/30!',
-			title: 'text-foreground',
-			description: 'text-muted-foreground',
-			actionButton: 'bg-primary text-primary-foreground hover:bg-primary/90',
-			cancelButton: 'bg-muted text-muted-foreground hover:bg-muted/80',
-			closeButton: 'text-muted-foreground hover:text-foreground'
-		}
+	offset={barOpen ? { bottom: 80 } : undefined}
+	mobileOffset={{
+		bottom: `calc(${phoneClearance}px + env(safe-area-inset-bottom))`
 	}}
 />
 <NavigationProgress />