refactor: replace hardcoded colours with semantic tokens

frontend/src/lib/components/ui/button/button.svelte

@@ -15,7 +15,8 @@
 				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
 				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
 				link: 'text-primary underline-offset-4 hover:underline',
-				accent: 'bg-green-500 hover:bg-green-500/90 dark:text-primary dark:bg-green-500/90'
+				accent:
+					'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90'
 			},
 			size: {
 				default: 'h-9 px-4 py-2 has-[>svg]:px-3',

frontend/src/lib/components/ui/tags-input/tags-input.svelte

@@ -206,6 +206,6 @@
 		{placeholder}
 		data-invalid={invalid}
 		onkeydown={keydown}
-		class="min-w-16 shrink grow basis-0 border-none bg-transparent px-2 outline-hidden placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed data-[invalid=true]:text-red-500 md:text-sm"
+		class="min-w-16 shrink grow basis-0 border-none bg-transparent px-2 outline-hidden placeholder:text-muted-foreground focus:outline-hidden disabled:cursor-not-allowed data-[invalid=true]:text-destructive md:text-sm"
 	/>
 </div>

frontend/src/lib/components/view/book-grid.svelte

@@ -31,8 +31,8 @@
 						selectedState.toggleSelection(book);
 					}}
 					class="{selectedState.isSelected(book.id)
-						? 'scale-110 text-yellow-300'
+						? 'scale-110 text-star'
-						: 'scale-75 text-white'} transition-all hover:scale-110 hover:cursor-pointer hover:text-yellow-300"
+						: 'scale-75 text-white'} transition-all hover:scale-110 hover:cursor-pointer hover:text-star"
 				/>
 			</div>
 			{#if selectedState.isSelected(book.id)}
@@ -42,7 +42,7 @@
 						: 'opacity-0'} transition-opacity group-hover:opacity-100"
 				>
 					<Circle
-						class="yellow-300 scale-50 fill-yellow-300 text-yellow-300 transition-all hover:scale-75 hover:cursor-pointer hover:text-yellow-300"
+						class="scale-50 fill-star text-star transition-all hover:scale-75 hover:cursor-pointer hover:text-star"
 					/>
 				</div>
 			{/if}
@@ -54,7 +54,7 @@
 					<DropdownMenu.Root>
 						<DropdownMenu.Trigger>
 							<EllipsisVertical
-								class="scale-75 text-white transition-all hover:scale-110 hover:cursor-pointer hover:text-yellow-300"
+								class="scale-75 text-white transition-all hover:scale-110 hover:cursor-pointer hover:text-star"
 							/>
 						</DropdownMenu.Trigger>
 						<DropdownMenu.Content>
@@ -89,7 +89,7 @@
 					class="absolute right-2 bottom-20 z-50 inline-flex items-center opacity-0 transition-opacity group-hover:opacity-100"
 				>
 					<Pencil
-						class="scale-75 text-white transition-all hover:scale-110 hover:cursor-pointer hover:text-yellow-300"
+						class="scale-75 text-white transition-all hover:scale-110 hover:cursor-pointer hover:text-star"
 						onclick={() => {
 							bookOps.bookToEdit = book;
 							bookOps.editDialogOpen = true;

frontend/src/lib/components/view/book-thumbnail.svelte

@@ -25,31 +25,33 @@
 	<!-- Book Cover -->
 	<a
 		href="/book/{book.id}"
-		class="group relative aspect-9/12 w-full overflow-hidden rounded shadow-lg drop-shadow-lg transition-all duration-200 {selected
+		class="group relative aspect-9/12 w-full overflow-hidden rounded-sm shadow-lg drop-shadow-lg transition-all duration-200 {selected
-			? 'ring-2 ring-yellow-300'
+			? 'ring-2 ring-star'
 			: ''}"
 		onclick={handleClick}
 	>
 		<BookImage
 			src="/api/{book.cover_image}"
-			class="h-full w-full rounded object-cover transition-all duration-200 group-hover:brightness-50 {selected ||
+			class="h-full w-full rounded-sm object-cover transition-all duration-200 group-hover:brightness-50 {selected ||
 			darkened
 				? 'brightness-50'
 				: ''}"
 		/>
-	</a>
+
+		<!-- Inside the anchor, which already clips to rounded-sm, so the bar
+		     follows the cover's corners instead of floating below it -->
 		{#if book.progress?.percentage && !selected && !darkened}
-		<Progress
+			<span class="absolute inset-x-0 bottom-0 h-1 bg-black/30">
-			value={book.progress.percentage}
+				<span
-			max={1}
+					class="block h-full {book.progress.completed ? 'bg-success' : 'bg-flag'}"
-			class="mt-[-8px] h-1 rounded {book.progress.completed
+					style="width: {Math.min(100, Math.round(book.progress.percentage * 100))}%;"
-				? '[&>div]:bg-green-600'
+				></span>
-				: '[&>div]:bg-yellow-500'}"
+			</span>
-		/>
 		{/if}
+	</a>
 
 	<!-- Book Title -->
-	<a href="/book/{book.id}" class="text-base-content mt-1 line-clamp-2 w-full text-sm hover:underline"
+	<a href="/book/{book.id}" class="text-base-content mt-1 line-clamp-2 w-full font-serif text-sm hover:underline"
 		>{book.title}</a
 	>
 

frontend/src/lib/components/view/filter-button.svelte

@@ -20,7 +20,7 @@
 		>
 			<Funnel />
 			{#if bookCollection.hasActiveFilters}
-				<div class="absolute top-[5px] right-[5px] h-1.5 w-1.5 rounded-full bg-yellow-500"></div>
+				<div class="absolute top-[5px] right-[5px] h-1.5 w-1.5 rounded-full bg-flag"></div>
 			{/if}
 		</Tooltip.Trigger>
 		<Tooltip.Content>

frontend/src/lib/components/view/filters.svelte

@@ -19,7 +19,7 @@
 					<Collapsible.Trigger {...props}>
 						{filter.name}
 						{#if bookCollection.filters[filter.value].length !== 0}
-							<div class="ml-2 h-[6px] w-[6px] rounded-full bg-yellow-500"></div>
+							<div class="ml-2 h-[6px] w-[6px] rounded-full bg-flag"></div>
 						{/if}
 						<ChevronRightIcon
 							class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90"

frontend/src/lib/components/view/sort-button.svelte

@@ -20,7 +20,7 @@
 					>
 						{#if bookCollection.hasActiveSort}
 							<div
-								class="absolute top-[5px] right-[5px] h-1.5 w-1.5 rounded-full bg-yellow-500"
+								class="absolute top-[5px] right-[5px] h-1.5 w-1.5 rounded-full bg-flag"
 							></div>
 						{/if}
 						<ArrowUpDown />