refactor: replace hardcoded colours with semantic tokens

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
-			? 'ring-2 ring-yellow-300'
+		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-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'
 				: ''}"
 		/>
+
+		<!-- 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}
+			<span class="absolute inset-x-0 bottom-0 h-1 bg-black/30">
+				<span
+					class="block h-full {book.progress.completed ? 'bg-success' : 'bg-flag'}"
+					style="width: {Math.min(100, Math.round(book.progress.percentage * 100))}%;"
+				></span>
+			</span>
+		{/if}
 	</a>
-	{#if book.progress?.percentage && !selected && !darkened}
-		<Progress
-			value={book.progress.percentage}
-			max={1}
-			class="mt-[-8px] h-1 rounded {book.progress.completed
-				? '[&>div]:bg-green-600'
-				: '[&>div]:bg-yellow-500'}"
-		/>
-	{/if}
 
 	<!-- 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
 	>