From e83ba9b6819719c749bc9cbef5c106987c397e33 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 25 Mar 2026 11:42:52 +0100
Subject: [PATCH] style(frontend): apply Prettier formatting to 26 pre-existing
 files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

No logic changes — whitespace and indentation only. These were flagged
by the pre-commit hook when running lint after layout.css was modified.

Refs #64
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/AnnotationCommentPanel.svelte  |  10 +-
 .../lib/components/AnnotationSidePanel.svelte |   6 +-
 .../src/lib/components/CommentThread.svelte   |  14 +-
 .../lib/components/DocumentBottomPanel.svelte |   6 +-
 .../src/lib/components/DocumentTopBar.svelte  |   6 +-
 .../src/lib/components/ExpandableText.svelte  |   2 +-
 .../src/lib/components/PanelHistory.svelte    |  18 +-
 .../src/lib/components/PanelMetadata.svelte   |  10 +-
 .../lib/components/PersonMultiSelect.svelte   |   4 +-
 frontend/src/lib/components/TagInput.svelte   |   4 +-
 frontend/src/routes/+layout.svelte            |  16 +-
 frontend/src/routes/+page.svelte              |  10 +-
 frontend/src/routes/admin/+page.svelte        |  12 +-
 .../src/routes/admin/users/[id]/+page.svelte  |  22 +--
 .../src/routes/admin/users/new/+page.svelte   |  18 +-
 .../src/routes/conversations/+page.svelte     |  22 +--
 .../routes/documents/[id]/edit/+page.svelte   |  24 +--
 .../src/routes/documents/new/+page.svelte     |  22 +--
 .../src/routes/forgot-password/+page.svelte   |   2 +-
 frontend/src/routes/layout.css                | 154 ++++++++++++++++--
 frontend/src/routes/login/+page.svelte        |   2 +-
 frontend/src/routes/persons/+page.svelte      |   6 +-
 frontend/src/routes/persons/[id]/+page.svelte |  20 +--
 frontend/src/routes/persons/new/+page.svelte  |   4 +-
 frontend/src/routes/profile/+page.svelte      |  20 +--
 .../src/routes/reset-password/+page.svelte    |   2 +-
 frontend/src/routes/users/[id]/+page.svelte   |   2 +-
 27 files changed, 282 insertions(+), 156 deletions(-)

diff --git a/frontend/src/lib/components/AnnotationCommentPanel.svelte b/frontend/src/lib/components/AnnotationCommentPanel.svelte
index b1bb59fe..8e6d6548 100644
--- a/frontend/src/lib/components/AnnotationCommentPanel.svelte
+++ b/frontend/src/lib/components/AnnotationCommentPanel.svelte
@@ -25,16 +25,16 @@ let {
 
 <!-- Desktop / tablet panel (≥ sm): absolute overlay on the right side -->
 <div
-	class="absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l border-brand-sand bg-white shadow-2xl sm:flex"
+	class="border-brand-sand absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l bg-white shadow-2xl sm:flex"
 >
-	<div class="flex shrink-0 items-center justify-between border-b border-brand-sand px-4 py-3">
+	<div class="border-brand-sand flex shrink-0 items-center justify-between border-b px-4 py-3">
 		<h3 class="font-sans text-xs font-bold tracking-widest text-brand-navy uppercase">
 			{m.comment_panel_title()}
 		</h3>
 		<button
 			onclick={onClose}
 			aria-label={m.comment_panel_close()}
-			class="rounded p-1 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
+			class="hover:bg-brand-sand/50 rounded p-1 text-gray-400 transition-colors hover:text-brand-navy"
 		>
 			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -61,14 +61,14 @@ let {
 
 	<!-- Slide-up panel -->
 	<div class="flex max-h-[80vh] flex-col rounded-t-2xl bg-white shadow-2xl">
-		<div class="flex shrink-0 items-center justify-between border-b border-brand-sand px-4 py-3">
+		<div class="border-brand-sand flex shrink-0 items-center justify-between border-b px-4 py-3">
 			<h3 class="font-sans text-xs font-bold tracking-widest text-brand-navy uppercase">
 				{m.comment_panel_title()}
 			</h3>
 			<button
 				onclick={onClose}
 				aria-label={m.comment_panel_close()}
-				class="rounded p-1 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
+				class="hover:bg-brand-sand/50 rounded p-1 text-gray-400 transition-colors hover:text-brand-navy"
 			>
 				<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
diff --git a/frontend/src/lib/components/AnnotationSidePanel.svelte b/frontend/src/lib/components/AnnotationSidePanel.svelte
index 0b264414..648015da 100644
--- a/frontend/src/lib/components/AnnotationSidePanel.svelte
+++ b/frontend/src/lib/components/AnnotationSidePanel.svelte
@@ -26,20 +26,20 @@ const visible = $derived(activeAnnotationId !== null);
 </script>
 
 <div
-	class="absolute inset-y-0 right-0 z-10 flex w-80 flex-col border-l border-brand-sand bg-white shadow-[-4px_0_16px_rgba(0,0,0,0.08)] transition-transform duration-200 {visible
+	class="border-brand-sand absolute inset-y-0 right-0 z-10 flex w-80 flex-col border-l bg-white shadow-[-4px_0_16px_rgba(0,0,0,0.08)] transition-transform duration-200 {visible
 		? 'translate-x-0'
 		: 'pointer-events-none translate-x-full'}"
 	data-testid="annotation-side-panel"
 >
 	<!-- Header -->
-	<div class="flex shrink-0 items-center justify-between border-b border-brand-sand px-4 py-3">
+	<div class="border-brand-sand flex shrink-0 items-center justify-between border-b px-4 py-3">
 		<span class="font-sans text-xs font-medium text-brand-navy">
 			{m.doc_panel_discussion_annotation_tab({ page: String(activeAnnotationPage ?? '?') })}
 		</span>
 		<button
 			onclick={onClose}
 			aria-label={m.comment_panel_close()}
-			class="rounded p-1 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
+			class="hover:bg-brand-sand/50 rounded p-1 text-gray-400 transition-colors hover:text-brand-navy"
 		>
 			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
diff --git a/frontend/src/lib/components/CommentThread.svelte b/frontend/src/lib/components/CommentThread.svelte
index 0e3afd7a..d600350a 100644
--- a/frontend/src/lib/components/CommentThread.svelte
+++ b/frontend/src/lib/components/CommentThread.svelte
@@ -191,13 +191,13 @@ onMount(() => {
 
 <div class="space-y-4">
 	{#each comments as thread, ti (thread.id)}
-		<div class={ti > 0 ? 'border-t border-brand-sand pt-4' : ''}>
+		<div class={ti > 0 ? 'border-brand-sand border-t pt-4' : ''}>
 			<!-- Root comment -->
 			<div>
 				{#if editingId === thread.id}
 					<div class="flex flex-col gap-2">
 						<textarea
-							class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
+							class="border-brand-sand w-full resize-none rounded border px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
 							rows={3}
 							bind:value={editText}
 						></textarea>
@@ -267,11 +267,11 @@ onMount(() => {
 
 			<!-- Replies -->
 			{#each thread.replies as reply, ri (reply.id)}
-				<div class="mt-3 ml-6 border-l-2 border-brand-sand pl-4">
+				<div class="border-brand-sand mt-3 ml-6 border-l-2 pl-4">
 					{#if editingId === reply.id}
 						<div class="flex flex-col gap-2">
 							<textarea
-								class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
+								class="border-brand-sand w-full resize-none rounded border px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
 								rows={3}
 								bind:value={editText}
 							></textarea>
@@ -344,7 +344,7 @@ onMount(() => {
 			{#if replyingTo === thread.id}
 				<div class="mt-3 ml-6 flex flex-col gap-2">
 					<textarea
-						class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
+						class="border-brand-sand w-full resize-none rounded border px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
 						rows={3}
 						placeholder={m.comment_placeholder()}
 						bind:value={replyText}
@@ -371,10 +371,10 @@ onMount(() => {
 
 	<!-- New top-level comment textarea -->
 	{#if canComment}
-		<div class={comments.length > 0 ? 'border-t border-brand-sand pt-4' : ''}>
+		<div class={comments.length > 0 ? 'border-brand-sand border-t pt-4' : ''}>
 			<div class="flex flex-col gap-2">
 				<textarea
-					class="w-full resize-none rounded border border-brand-sand px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
+					class="border-brand-sand w-full resize-none rounded border px-3 py-2 font-serif text-sm text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
 					rows={3}
 					placeholder={m.comment_placeholder()}
 					bind:value={newText}
diff --git a/frontend/src/lib/components/DocumentBottomPanel.svelte b/frontend/src/lib/components/DocumentBottomPanel.svelte
index 33de26e6..7b8f22f2 100644
--- a/frontend/src/lib/components/DocumentBottomPanel.svelte
+++ b/frontend/src/lib/components/DocumentBottomPanel.svelte
@@ -121,7 +121,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
 </script>
 
 <div
-	class="fixed right-0 bottom-0 left-0 z-30 flex flex-col border-t border-brand-sand bg-white shadow-[0_-4px_16px_rgba(0,0,0,0.08)]"
+	class="border-brand-sand fixed right-0 bottom-0 left-0 z-30 flex flex-col border-t bg-white shadow-[0_-4px_16px_rgba(0,0,0,0.08)]"
 	style="height: {panelHeight}px"
 	data-testid="bottom-panel"
 >
@@ -141,7 +141,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
 	</div>
 
 	<!-- Tab bar -->
-	<div class="flex shrink-0 items-center border-b border-brand-sand bg-white px-4">
+	<div class="border-brand-sand flex shrink-0 items-center border-b bg-white px-4">
 		{#each tabs as tab (tab.id)}
 			<button
 				onclick={() => openTab(tab.id)}
@@ -162,7 +162,7 @@ const panelHeight = $derived(open ? height : MIN_HEIGHT);
 				onclick={closePanel}
 				data-testid="panel-close-btn"
 				aria-label="Panel schließen"
-				class="rounded p-1.5 text-gray-400 transition-colors hover:bg-brand-sand/50 hover:text-brand-navy"
+				class="hover:bg-brand-sand/50 rounded p-1.5 text-gray-400 transition-colors hover:text-brand-navy"
 			>
 				<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
diff --git a/frontend/src/lib/components/DocumentTopBar.svelte b/frontend/src/lib/components/DocumentTopBar.svelte
index 06bc3a17..4638ebde 100644
--- a/frontend/src/lib/components/DocumentTopBar.svelte
+++ b/frontend/src/lib/components/DocumentTopBar.svelte
@@ -58,7 +58,7 @@ const compactMeta = $derived.by(() => {
 </script>
 
 <div
-	class="z-20 flex shrink-0 items-center justify-between border-b border-brand-sand bg-white px-6 py-3 shadow-sm"
+	class="border-brand-sand z-20 flex shrink-0 items-center justify-between border-b bg-white px-6 py-3 shadow-sm"
 	data-topbar
 >
 	<!-- Left: back + title -->
@@ -68,7 +68,7 @@ const compactMeta = $derived.by(() => {
 			class="group flex shrink-0 items-center gap-2 font-sans text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
 		>
 			<div
-				class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-sand transition-colors group-hover:bg-brand-mint"
+				class="bg-brand-sand flex h-8 w-8 items-center justify-center rounded-full transition-colors group-hover:bg-brand-mint"
 			>
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
@@ -134,7 +134,7 @@ const compactMeta = $derived.by(() => {
 			<a
 				href={fileUrl}
 				download={doc.originalFilename}
-				class="rounded border border-transparent bg-brand-sand/50 p-1.5 text-brand-navy transition hover:bg-brand-mint"
+				class="bg-brand-sand/50 rounded border border-transparent p-1.5 text-brand-navy transition hover:bg-brand-mint"
 				title={m.doc_download_title()}
 			>
 				<img
diff --git a/frontend/src/lib/components/ExpandableText.svelte b/frontend/src/lib/components/ExpandableText.svelte
index a87b13b5..f4c17dea 100644
--- a/frontend/src/lib/components/ExpandableText.svelte
+++ b/frontend/src/lib/components/ExpandableText.svelte
@@ -18,7 +18,7 @@ $effect(() => {
 	<div
 		bind:this={el}
 		style={!expanded ? `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${maxLines}` : ''}
-		class="rounded border border-brand-sand bg-brand-sand/30 p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
+		class="border-brand-sand bg-brand-sand/30 rounded border p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-brand-navy"
 	>
 		{text}
 	</div>
diff --git a/frontend/src/lib/components/PanelHistory.svelte b/frontend/src/lib/components/PanelHistory.svelte
index 2124be49..6721196f 100644
--- a/frontend/src/lib/components/PanelHistory.svelte
+++ b/frontend/src/lib/components/PanelHistory.svelte
@@ -302,7 +302,7 @@ $effect(() => {
 					<select
 						id="compare-a"
 						bind:value={compareA}
-						class="w-full rounded border border-brand-sand bg-white px-2 py-1 font-sans text-xs text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
+						class="border-brand-sand w-full rounded border bg-white px-2 py-1 font-sans text-xs text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
 					>
 						<option value="">—</option>
 						{#each versions as v, i (v.id)}
@@ -317,7 +317,7 @@ $effect(() => {
 					<select
 						id="compare-b"
 						bind:value={compareB}
-						class="w-full rounded border border-brand-sand bg-white px-2 py-1 font-sans text-xs text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
+						class="border-brand-sand w-full rounded border bg-white px-2 py-1 font-sans text-xs text-brand-navy focus:ring-1 focus:ring-brand-mint focus:outline-none"
 					>
 						<option value="">—</option>
 						{#each versions as v, i (v.id)}
@@ -340,14 +340,14 @@ $effect(() => {
 			{:else if noDiff}
 				<div
 					data-testid="history-diff"
-					class="rounded-sm border border-brand-sand bg-white p-4 font-serif text-sm text-gray-400 italic"
+					class="border-brand-sand rounded-sm border bg-white p-4 font-serif text-sm text-gray-400 italic"
 				>
 					{m.history_diff_no_changes()}
 				</div>
 			{:else if diffEntries.length > 0}
 				<div
 					data-testid="history-diff"
-					class="space-y-4 rounded-sm border border-brand-sand bg-white p-4"
+					class="border-brand-sand space-y-4 rounded-sm border bg-white p-4"
 				>
 					{#each diffEntries as entry (entry.field)}
 						<div>
@@ -406,13 +406,13 @@ $effect(() => {
 			{/if}
 		{:else}
 			<!-- Version list with inline diff below each selected item -->
-			<ul class="divide-y divide-brand-sand">
+			<ul class="divide-brand-sand divide-y">
 				{#each versions as v, i (v.id)}
 					<li>
 						<button
 							onclick={() => selectVersion(v.id)}
 							data-testid="history-version"
-							class="w-full py-2 text-left transition hover:bg-brand-sand/30 {selectedVersionId ===
+							class="hover:bg-brand-sand/30 w-full py-2 text-left transition {selectedVersionId ===
 							v.id
 								? 'border-l-2 border-brand-mint pl-2'
 								: 'pl-0'}"
@@ -430,7 +430,7 @@ $effect(() => {
 								<div class="mt-1 flex flex-wrap gap-1">
 									{#each v.changedFields as field (field)}
 										<span
-											class="rounded bg-brand-sand/50 px-1.5 py-0.5 font-sans text-[10px] tracking-wide text-gray-500 uppercase"
+											class="bg-brand-sand/50 rounded px-1.5 py-0.5 font-sans text-[10px] tracking-wide text-gray-500 uppercase"
 										>
 											{fieldLabels[field] ? fieldLabels[field]() : field}
 										</span>
@@ -446,14 +446,14 @@ $effect(() => {
 							{:else if noDiff}
 								<div
 									data-testid="history-diff"
-									class="mb-2 rounded-sm border border-brand-sand bg-white p-4 font-serif text-sm text-gray-400 italic"
+									class="border-brand-sand mb-2 rounded-sm border bg-white p-4 font-serif text-sm text-gray-400 italic"
 								>
 									{m.history_diff_no_changes()}
 								</div>
 							{:else if diffEntries.length > 0}
 								<div
 									data-testid="history-diff"
-									class="mb-2 space-y-4 rounded-sm border border-brand-sand bg-white p-4"
+									class="border-brand-sand mb-2 space-y-4 rounded-sm border bg-white p-4"
 								>
 									{#each diffEntries as entry (entry.field)}
 										<div>
diff --git a/frontend/src/lib/components/PanelMetadata.svelte b/frontend/src/lib/components/PanelMetadata.svelte
index 25a8219c..d934a502 100644
--- a/frontend/src/lib/components/PanelMetadata.svelte
+++ b/frontend/src/lib/components/PanelMetadata.svelte
@@ -21,7 +21,7 @@ let { doc }: { doc: Doc } = $props();
 	<!-- DETAILS GROUP -->
 	<div>
 		<h3
-			class="mb-4 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
+			class="border-brand-sand mb-4 border-b pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
 		>
 			{m.doc_section_details()}
 		</h3>
@@ -100,7 +100,7 @@ let { doc }: { doc: Doc } = $props();
 							{#each doc.tags as tag (tag.id)}
 								<a
 									href="/?tag={encodeURIComponent(tag.name)}"
-									class="inline-flex items-center rounded bg-brand-sand/50 px-2 py-0.5 text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
+									class="bg-brand-sand/50 inline-flex items-center rounded px-2 py-0.5 text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
 									title={m.doc_tag_filter_title({ name: tag.name })}
 								>
 									{tag.name}
@@ -117,7 +117,7 @@ let { doc }: { doc: Doc } = $props();
 	<!-- PERSONEN GROUP -->
 	<div>
 		<h3
-			class="mb-4 border-b border-brand-sand pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
+			class="border-brand-sand mb-4 border-b pb-2 font-sans text-xs font-bold tracking-widest text-brand-navy uppercase"
 		>
 			{m.doc_section_persons()}
 		</h3>
@@ -129,7 +129,7 @@ let { doc }: { doc: Doc } = $props();
 			{#if doc.sender}
 				<a
 					href="/persons/{doc.sender.id}"
-					class="group block rounded border border-brand-sand bg-brand-sand/20 p-3 transition hover:border-brand-mint hover:bg-brand-mint/10"
+					class="group border-brand-sand bg-brand-sand/20 block rounded border p-3 transition hover:border-brand-mint hover:bg-brand-mint/10"
 				>
 					<div class="flex items-center gap-3">
 						<div
@@ -163,7 +163,7 @@ let { doc }: { doc: Doc } = $props();
 				<div class="space-y-2">
 					{#each doc.receivers as receiver (receiver.id)}
 						<div
-							class="group flex items-center justify-between rounded border border-brand-sand bg-white p-3 transition hover:border-brand-navy"
+							class="group border-brand-sand flex items-center justify-between rounded border bg-white p-3 transition hover:border-brand-navy"
 						>
 							<a href="/persons/{receiver.id}" class="flex min-w-0 flex-1 items-center gap-3">
 								<div
diff --git a/frontend/src/lib/components/PersonMultiSelect.svelte b/frontend/src/lib/components/PersonMultiSelect.svelte
index 70a0ca32..91989855 100644
--- a/frontend/src/lib/components/PersonMultiSelect.svelte
+++ b/frontend/src/lib/components/PersonMultiSelect.svelte
@@ -84,7 +84,7 @@ function clickOutside(node: HTMLElement) {
 	>
 		{#each selectedPersons as person (person.id)}
 			<span
-				class="inline-flex items-center gap-1 rounded bg-brand-sand/40 px-2 py-1 text-sm font-medium text-brand-navy"
+				class="bg-brand-sand/40 inline-flex items-center gap-1 rounded px-2 py-1 text-sm font-medium text-brand-navy"
 			>
 				{person.firstName}
 				{person.lastName}
@@ -128,7 +128,7 @@ function clickOutside(node: HTMLElement) {
 			{:else}
 				{#each results as person (person.id)}
 					<div
-						class="cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-brand-sand/30"
+						class="hover:bg-brand-sand/30 cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none"
 						onclick={() => selectPerson(person)}
 						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
 						role="button"
diff --git a/frontend/src/lib/components/TagInput.svelte b/frontend/src/lib/components/TagInput.svelte
index 9e19e13b..dcabdc8d 100644
--- a/frontend/src/lib/components/TagInput.svelte
+++ b/frontend/src/lib/components/TagInput.svelte
@@ -90,7 +90,7 @@ function clickOutside(node: HTMLElement) {
 		<!-- Render Selected Tags -->
 		{#each tags as tag, i (i)}
 			<span
-				class="flex items-center gap-1 rounded bg-brand-sand/30 px-2 py-1 text-sm font-medium text-brand-navy"
+				class="bg-brand-sand/30 flex items-center gap-1 rounded px-2 py-1 text-sm font-medium text-brand-navy"
 			>
 				{tag}
 				<button
@@ -137,7 +137,7 @@ function clickOutside(node: HTMLElement) {
 							role="option"
 							aria-selected={i === activeIndex}
 							tabindex="0"
-							class="cursor-pointer px-3 py-2 text-sm hover:bg-brand-sand/20 {i === activeIndex
+							class="hover:bg-brand-sand/20 cursor-pointer px-3 py-2 text-sm {i === activeIndex
                                 ? 'bg-brand-sand/20 font-bold text-brand-navy'
                                 : 'text-gray-700'}"
 							onclick={() => addTag(suggestion)}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 536ab4d6..1c1de04f 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -69,7 +69,7 @@ function clickOutside(node: HTMLElement) {
 								class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                                    {page.url.pathname === '/' || page.url.pathname.startsWith('/documents')
                                     ? 'rounded bg-brand-purple/15 text-brand-navy'
-                                    : 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
+                                    : 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
 							>
 								{m.nav_documents()}
 							</a>
@@ -79,7 +79,7 @@ function clickOutside(node: HTMLElement) {
 								class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                                    {page.url.pathname.startsWith('/persons')
                                     ? 'rounded bg-brand-purple/15 text-brand-navy'
-                                    : 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
+                                    : 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
 							>
 								{m.nav_persons()}
 							</a>
@@ -89,7 +89,7 @@ function clickOutside(node: HTMLElement) {
 								class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                                    {page.url.pathname.startsWith('/conversations')
                                     ? 'rounded bg-brand-purple/15 text-brand-navy'
-                                    : 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
+                                    : 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
 							>
 								{m.nav_conversations()}
 							</a>
@@ -99,7 +99,7 @@ function clickOutside(node: HTMLElement) {
 									class="inline-flex items-center px-3 py-1.5 font-sans text-xs font-bold tracking-widest uppercase transition-colors
                                    {page.url.pathname.startsWith('/admin')
                                         ? 'rounded bg-brand-purple/15 text-brand-navy'
-                                        : 'rounded text-gray-500 hover:bg-brand-sand/60 hover:text-brand-navy'}"
+                                        : 'hover:bg-brand-sand/60 rounded text-gray-500 hover:text-brand-navy'}"
 								>
 									{m.nav_admin()}
 								</a>
@@ -162,20 +162,20 @@ function clickOutside(node: HTMLElement) {
 
 							{#if userMenuOpen}
 								<div
-									class="absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border border-brand-sand bg-white shadow-md"
+									class="border-brand-sand absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border bg-white shadow-md"
 								>
 									<a
 										href="/profile"
 										onclick={() => (userMenuOpen = false)}
-										class="block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-brand-sand/40 hover:text-brand-navy"
+										class="hover:bg-brand-sand/40 block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:text-brand-navy"
 									>
 										{m.nav_profile()}
 									</a>
-									<div class="border-t border-brand-sand">
+									<div class="border-brand-sand border-t">
 										<form action="/logout" method="POST" use:enhance>
 											<button
 												type="submit"
-												class="w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:bg-brand-sand/40 hover:text-brand-navy"
+												class="hover:bg-brand-sand/40 w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
 											>
 												{m.nav_logout()}
 											</button>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 50ed1b5e..f7e6ce3a 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -78,7 +78,7 @@ $effect(() => {
 <!-- Outer Container: Matches the 'Sand' background of the layout -->
 <main class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
 	<!-- SEARCH & FILTER CARD -->
-	<div class="mb-8 rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+	<div class="border-brand-sand mb-8 rounded-sm border bg-white p-6 shadow-sm">
 		<!-- ROW 1: Main Search (One Line) -->
 		<div class="flex items-center gap-4">
 			<!-- Full Text Search -->
@@ -229,7 +229,7 @@ $effect(() => {
 	</div>
 
 	<!-- DOCUMENT LIST -->
-	<div class="border border-brand-sand bg-white shadow-sm">
+	<div class="border-brand-sand border bg-white shadow-sm">
 		{#if data.error}
 			<div class="bg-red-50 p-8 text-center text-red-600">
 				{data.error}
@@ -237,7 +237,7 @@ $effect(() => {
 		{:else if data.documents && data.documents.length > 0}
 			<ul class="divide-y divide-gray-100">
 				{#each data.documents as doc (doc.id)}
-					<li class="group transition-colors duration-200 hover:bg-brand-sand/10">
+					<li class="group hover:bg-brand-sand/10 transition-colors duration-200">
 						<!-- LINK TO DETAIL PAGE -->
 						<a href="/documents/{doc.id}" class="block p-6">
 							<div class="flex flex-col gap-6 sm:flex-row">
@@ -312,7 +312,7 @@ $effect(() => {
 											{#each doc.tags as tag (tag.id)}
 												<button
 													type="button"
-													class="relative z-10 inline-flex cursor-pointer items-center rounded bg-brand-sand/30 px-2 py-1 text-[10px] font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
+													class="bg-brand-sand/30 relative z-10 inline-flex cursor-pointer items-center rounded px-2 py-1 text-[10px] font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
 													onclick={(e) => { e.preventDefault(); e.stopPropagation(); goto(`/?tag=${encodeURIComponent(tag.name)}`); }}
 												>
 													{tag.name}
@@ -342,7 +342,7 @@ $effect(() => {
 			<!-- Empty State -->
 			<div class="p-16 text-center">
 				<div
-					class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30"
+					class="bg-brand-sand/30 mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full"
 				>
 					<img
 						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 89ec4cff..b000c280 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -107,7 +107,7 @@ async function backfillFileHashes() {
 	{/if}
 
 	{#if activeTab === 'users'}
-		<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
+		<div class="border-brand-sand overflow-hidden rounded-lg border bg-white shadow-sm" in:slide>
 			<div class="flex items-center justify-between border-b border-gray-100 p-6">
 				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_users()}</h2>
 				<a
@@ -217,7 +217,7 @@ async function backfillFileHashes() {
 			</table>
 		</div>
 	{:else if activeTab === 'tags'}
-		<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
+		<div class="border-brand-sand overflow-hidden rounded-lg border bg-white shadow-sm" in:slide>
 			<div class="border-b border-gray-100 bg-yellow-50/50 p-6">
 				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_tags()}</h2>
 				<p class="mt-1 text-xs text-yellow-800">
@@ -272,7 +272,7 @@ async function backfillFileHashes() {
 								>
 							</form>
 						{:else}
-							<span class="rounded bg-brand-sand/30 px-2 py-1 text-sm font-medium text-brand-navy">
+							<span class="bg-brand-sand/30 rounded px-2 py-1 text-sm font-medium text-brand-navy">
 								{tag.name}
 							</span>
 							<div
@@ -329,7 +329,7 @@ async function backfillFileHashes() {
 			</ul>
 		</div>
 	{:else if activeTab === 'groups'}
-		<div class="overflow-hidden rounded-lg border border-brand-sand bg-white shadow-sm" in:slide>
+		<div class="border-brand-sand overflow-hidden rounded-lg border bg-white shadow-sm" in:slide>
 			<div class="flex items-center justify-between border-b border-gray-100 p-6">
 				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_groups()}</h2>
 			</div>
@@ -535,7 +535,7 @@ async function backfillFileHashes() {
 			</div>
 		</div>
 	{:else if activeTab === 'system'}
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-1 text-lg font-bold text-gray-700">{m.admin_system_backfill_heading()}</h2>
 			<p class="mb-4 text-sm text-gray-500">{m.admin_system_backfill_description()}</p>
 			<button
@@ -552,7 +552,7 @@ async function backfillFileHashes() {
 			{/if}
 		</div>
 
-		<div class="mt-4 rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand mt-4 rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-1 text-lg font-bold text-gray-700">
 				{m.admin_system_backfill_hashes_heading()}
 			</h2>
diff --git a/frontend/src/routes/admin/users/[id]/+page.svelte b/frontend/src/routes/admin/users/[id]/+page.svelte
index 1dd717fc..62ea84a4 100644
--- a/frontend/src/routes/admin/users/[id]/+page.svelte
+++ b/frontend/src/routes/admin/users/[id]/+page.svelte
@@ -72,7 +72,7 @@ function handleBirthDateInput(e: Event) {
 
 	<form method="POST" use:enhance class="space-y-6">
 		<!-- Profile card -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.profile_section_personal()}
 			</h2>
@@ -89,7 +89,7 @@ function handleBirthDateInput(e: Event) {
 							type="text"
 							name="firstName"
 							value={data.editUser.firstName ?? ''}
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						/>
 					</label>
 
@@ -103,7 +103,7 @@ function handleBirthDateInput(e: Event) {
 							type="text"
 							name="lastName"
 							value={data.editUser.lastName ?? ''}
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						/>
 					</label>
 				</div>
@@ -119,7 +119,7 @@ function handleBirthDateInput(e: Event) {
 						placeholder="TT.MM.JJJJ"
 						value={birthDateDisplay}
 						oninput={handleBirthDateInput}
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 					/>
 					<input type="hidden" name="birthDate" value={birthDateIso} />
 				</label>
@@ -134,7 +134,7 @@ function handleBirthDateInput(e: Event) {
 						type="email"
 						name="email"
 						value={data.editUser.email ?? ''}
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 					/>
 				</label>
 
@@ -148,7 +148,7 @@ function handleBirthDateInput(e: Event) {
 						name="contact"
 						rows="3"
 						placeholder={m.profile_contact_placeholder()}
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						>{data.editUser.contact ?? ''}</textarea
 					>
 				</label>
@@ -156,7 +156,7 @@ function handleBirthDateInput(e: Event) {
 		</div>
 
 		<!-- Groups card -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.admin_col_groups()}
 			</h2>
@@ -178,7 +178,7 @@ function handleBirthDateInput(e: Event) {
 		</div>
 
 		<!-- Password card -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.admin_label_new_password_optional()}
 			</h2>
@@ -193,7 +193,7 @@ function handleBirthDateInput(e: Event) {
 					<input
 						type="password"
 						name="newPassword"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 					/>
 				</label>
 
@@ -206,7 +206,7 @@ function handleBirthDateInput(e: Event) {
 					<input
 						type="password"
 						name="confirmPassword"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 					/>
 				</label>
 			</div>
@@ -214,7 +214,7 @@ function handleBirthDateInput(e: Event) {
 
 		<!-- Save bar -->
 		<div
-			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+			class="border-brand-sand sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
 		>
 			<a
 				href="/admin"
diff --git a/frontend/src/routes/admin/users/new/+page.svelte b/frontend/src/routes/admin/users/new/+page.svelte
index 8567ffd6..4fd4b7c2 100644
--- a/frontend/src/routes/admin/users/new/+page.svelte
+++ b/frontend/src/routes/admin/users/new/+page.svelte
@@ -53,7 +53,7 @@ function handleBirthDateInput(e: Event) {
 		</div>
 	{/if}
 
-	<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+	<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 		<form method="POST" use:enhance class="space-y-5">
 			<!-- Account -->
 			<h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase">
@@ -70,7 +70,7 @@ function handleBirthDateInput(e: Event) {
 					type="text"
 					name="username"
 					required
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 				/>
 			</label>
 
@@ -84,7 +84,7 @@ function handleBirthDateInput(e: Event) {
 					type="password"
 					name="password"
 					required
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 				/>
 			</label>
 
@@ -103,7 +103,7 @@ function handleBirthDateInput(e: Event) {
 					<input
 						type="text"
 						name="firstName"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 					/>
 				</label>
 
@@ -116,7 +116,7 @@ function handleBirthDateInput(e: Event) {
 					<input
 						type="text"
 						name="lastName"
-						class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+						class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 					/>
 				</label>
 			</div>
@@ -131,7 +131,7 @@ function handleBirthDateInput(e: Event) {
 					type="text"
 					placeholder="TT.MM.JJJJ"
 					oninput={handleBirthDateInput}
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 				/>
 				<input type="hidden" name="birthDate" value={birthDateIso} />
 			</label>
@@ -145,7 +145,7 @@ function handleBirthDateInput(e: Event) {
 				<input
 					type="email"
 					name="email"
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 				/>
 			</label>
 
@@ -159,7 +159,7 @@ function handleBirthDateInput(e: Event) {
 					name="contact"
 					rows="3"
 					placeholder={m.profile_contact_placeholder()}
-					class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+					class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 				></textarea>
 			</label>
 
@@ -184,7 +184,7 @@ function handleBirthDateInput(e: Event) {
 
 			<!-- Save bar -->
 			<div
-				class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm"
+				class="border-brand-sand mt-4 flex items-center justify-between rounded-sm border bg-white px-6 py-4 shadow-sm"
 			>
 				<a
 					href="/admin"
diff --git a/frontend/src/routes/conversations/+page.svelte b/frontend/src/routes/conversations/+page.svelte
index 8467a3b2..baa82a10 100644
--- a/frontend/src/routes/conversations/+page.svelte
+++ b/frontend/src/routes/conversations/+page.svelte
@@ -75,7 +75,7 @@ const enrichedDocuments = $derived(
 	</div>
 
 	<!-- FILTER BAR -->
-	<div class="relative z-20 mb-10 border border-brand-sand bg-white p-8 shadow-sm">
+	<div class="border-brand-sand relative z-20 mb-10 border bg-white p-8 shadow-sm">
 		<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
 			<!-- Sender -->
 			<div
@@ -98,7 +98,7 @@ const enrichedDocuments = $derived(
 				<button
 					data-testid="conv-swap-btn"
 					onclick={swapPersons}
-					class="flex w-full items-center justify-center gap-2 border border-brand-sand px-3 py-2.5 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white md:w-auto {senderId &&
+					class="border-brand-sand flex w-full items-center justify-center gap-2 border px-3 py-2.5 text-xs font-bold tracking-widest text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white md:w-auto {senderId &&
 					receiverId
 						? ''
 						: 'invisible'}"
@@ -173,7 +173,7 @@ const enrichedDocuments = $derived(
 			<div>
 				<button
 					onclick={toggleSort}
-					class="flex h-[42px] w-full items-center justify-center border border-brand-sand text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
+					class="border-brand-sand flex h-[42px] w-full items-center justify-center border text-xs font-bold tracking-wide text-brand-navy uppercase transition-colors hover:bg-brand-navy hover:text-white"
 				>
 					<span class="mr-2">{m.conv_sort_label()}</span>
 					<span>{sortDir === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}</span>
@@ -196,9 +196,9 @@ const enrichedDocuments = $derived(
 	<!-- RESULTS LIST SECTION -->
 	{#if !senderId || !receiverId}
 		<div
-			class="flex flex-col items-center justify-center rounded-sm border border-dashed border-brand-sand bg-white py-24 text-center"
+			class="border-brand-sand flex flex-col items-center justify-center rounded-sm border border-dashed bg-white py-24 text-center"
 		>
-			<div class="mb-4 rounded-full bg-brand-sand/30 p-4 text-brand-navy">
+			<div class="bg-brand-sand/30 mb-4 rounded-full p-4 text-brand-navy">
 				<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 					><path
 						stroke-linecap="round"
@@ -213,7 +213,7 @@ const enrichedDocuments = $derived(
 		</div>
 	{:else if data.documents.length === 0}
 		<div
-			class="flex flex-col items-center justify-center rounded-sm border border-brand-sand bg-white py-24 text-center shadow-sm"
+			class="border-brand-sand flex flex-col items-center justify-center rounded-sm border bg-white py-24 text-center shadow-sm"
 		>
 			<p class="font-serif text-brand-navy">{m.conv_no_results_heading()}</p>
 			<p class="mt-2 text-sm text-gray-400">{m.conv_no_results_text()}</p>
@@ -246,10 +246,10 @@ const enrichedDocuments = $derived(
 		</div>
 
 		<!-- CHAT CONTAINER -->
-		<div class="relative overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
+		<div class="border-brand-sand relative overflow-hidden rounded-sm border bg-white shadow-sm">
 			<!-- Decoration: Central Timeline Line -->
 			<div
-				class="absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform bg-brand-sand/30 md:block"
+				class="bg-brand-sand/30 absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform md:block"
 			></div>
 
 			<div class="p-6 md:p-8">
@@ -257,12 +257,12 @@ const enrichedDocuments = $derived(
 					{#each enrichedDocuments as { doc, year, showYearDivider } (doc.id)}
 						{#if showYearDivider}
 							<div data-testid="year-divider" class="relative flex items-center py-2 text-center">
-								<div class="flex-grow border-t border-brand-sand"></div>
+								<div class="border-brand-sand flex-grow border-t"></div>
 								<span
 									class="mx-4 font-sans text-xs font-bold tracking-widest text-brand-navy/40 uppercase"
 									>{year}</span
 								>
-								<div class="flex-grow border-t border-brand-sand"></div>
+								<div class="border-brand-sand flex-grow border-t"></div>
 							</div>
 						{/if}
 						{@const isRight = doc.sender?.id === senderId}
@@ -297,7 +297,7 @@ const enrichedDocuments = $derived(
 									class="group block transform rounded border p-4 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md
                                {isRight
 										? 'rounded-br-none border-brand-navy bg-brand-navy text-white'
-										: 'rounded-bl-none border-brand-sand bg-brand-sand/10 text-brand-navy'}"
+										: 'border-brand-sand bg-brand-sand/10 rounded-bl-none text-brand-navy'}"
 								>
 									<!-- Header -->
 									<div class="mb-2 flex items-start justify-between gap-4">
diff --git a/frontend/src/routes/documents/[id]/edit/+page.svelte b/frontend/src/routes/documents/[id]/edit/+page.svelte
index b1f8d5c6..afd14700 100644
--- a/frontend/src/routes/documents/[id]/edit/+page.svelte
+++ b/frontend/src/routes/documents/[id]/edit/+page.svelte
@@ -65,7 +65,7 @@ function handleDateInput(e: Event) {
 
 	<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
 		<!-- ── Section 1: Wer & Wann ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.doc_section_who_when()}
 			</h2>
@@ -128,7 +128,7 @@ function handleDateInput(e: Event) {
 		</div>
 
 		<!-- ── Section 2: Beschreibung ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.doc_section_description()}
 			</h2>
@@ -190,7 +190,7 @@ function handleDateInput(e: Event) {
 		</div>
 
 		<!-- ── Section 3: Transkription ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.form_label_transcription()}
 			</h2>
@@ -205,13 +205,13 @@ function handleDateInput(e: Event) {
 		</div>
 
 		<!-- ── Section 4: Datei ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.doc_section_file()}
 			</h2>
 
 			<div
-				class="mb-4 flex items-center gap-3 rounded bg-brand-sand/20 px-3 py-2 text-sm text-gray-600"
+				class="bg-brand-sand/20 mb-4 flex items-center gap-3 rounded px-3 py-2 text-sm text-gray-600"
 			>
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -233,18 +233,18 @@ function handleDateInput(e: Event) {
 				id="file-upload"
 				type="file"
 				name="file"
-				class="block w-full cursor-pointer text-sm
-                       text-gray-500 file:mr-4 file:rounded
-                       file:border-0 file:bg-brand-sand/40
-                       file:px-4 file:py-2
-                       file:text-sm file:font-semibold
-                       file:text-brand-navy hover:file:bg-brand-sand/60"
+				class="file:bg-brand-sand/40 hover:file:bg-brand-sand/60 block w-full
+                       cursor-pointer text-sm text-gray-500
+                       file:mr-4 file:rounded
+                       file:border-0 file:px-4
+                       file:py-2 file:text-sm
+                       file:font-semibold file:text-brand-navy"
 			/>
 		</div>
 
 		<!-- ── Sticky Save Bar ── -->
 		<div
-			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+			class="border-brand-sand sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
 		>
 			<a
 				href="/documents/{doc.id}"
diff --git a/frontend/src/routes/documents/new/+page.svelte b/frontend/src/routes/documents/new/+page.svelte
index f6808de6..f16fdc3b 100644
--- a/frontend/src/routes/documents/new/+page.svelte
+++ b/frontend/src/routes/documents/new/+page.svelte
@@ -76,7 +76,7 @@ function handleDateInput(e: Event) {
 
 	<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
 		<!-- ── Section 1: Wer & Wann ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.doc_section_who_when()}
 			</h2>
@@ -140,7 +140,7 @@ function handleDateInput(e: Event) {
 		</div>
 
 		<!-- ── Section 2: Beschreibung ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.doc_section_description()}
 			</h2>
@@ -199,7 +199,7 @@ function handleDateInput(e: Event) {
 		</div>
 
 		<!-- ── Section 3: Transkription ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.form_label_transcription()}
 			</h2>
@@ -213,7 +213,7 @@ function handleDateInput(e: Event) {
 		</div>
 
 		<!-- ── Section 4: Datei ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.doc_section_file()}
 			</h2>
@@ -226,18 +226,18 @@ function handleDateInput(e: Event) {
 				id="file-upload"
 				type="file"
 				name="file"
-				class="block w-full cursor-pointer text-sm
-                       text-gray-500 file:mr-4 file:rounded
-                       file:border-0 file:bg-brand-sand/40
-                       file:px-4 file:py-2
-                       file:text-sm file:font-semibold
-                       file:text-brand-navy hover:file:bg-brand-sand/60"
+				class="file:bg-brand-sand/40 hover:file:bg-brand-sand/60 block w-full
+                       cursor-pointer text-sm text-gray-500
+                       file:mr-4 file:rounded
+                       file:border-0 file:px-4
+                       file:py-2 file:text-sm
+                       file:font-semibold file:text-brand-navy"
 			/>
 		</div>
 
 		<!-- ── Sticky Save Bar ── -->
 		<div
-			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-brand-sand bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
+			class="border-brand-sand sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
 		>
 			<a href="/" class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy">
 				{m.btn_cancel()}
diff --git a/frontend/src/routes/forgot-password/+page.svelte b/frontend/src/routes/forgot-password/+page.svelte
index 2f9e3258..181f9547 100644
--- a/frontend/src/routes/forgot-password/+page.svelte
+++ b/frontend/src/routes/forgot-password/+page.svelte
@@ -20,7 +20,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 			</div>
 
 			<!-- Card -->
-			<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
+			<div class="border-brand-sand rounded-sm border bg-white p-8 shadow-sm">
 				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
 					{m.forgot_password_heading()}
 				</h1>
diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index 1f5d360d..d74b6652 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -1,34 +1,160 @@
-/* 1. Import Tailwind (replaces @tailwind base/components/utilities) */
-/* Fonts: Montserrat = Gotham substitute | Tinos = Times substitute (De Gruyter Brill CI) */
+/* ─── 1. Fonts & Tailwind ──────────────────────────────────────────────────── */
+/* Tinos = Times substitute | Montserrat = Gotham substitute (De Gruyter Brill CI) */
 @import url('https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:wght@400;500;600;700&display=swap');
 @import 'tailwindcss';
 
-/* 2. Define Custom Theme Variables — De Gruyter Brill CI */
+/* ─── 2. Raw palette — never used directly in components ──────────────────── */
 @theme {
-	/* COLORS — exact De Gruyter Brill brand palette */
-	--color-brand-navy: #012851; /* Prussian Blue */
-	--color-brand-mint: #a1dcd8; /* Aqua Island */
-	--color-brand-purple: #b4b9ff; /* Melrose */
-	--color-brand-sand: #f0efe9; /* Neutral paper tone */
-	--color-brand-white: #ffffff;
-	--color-brand-dark: #0d0d0d;
+	/* Brand palette constants */
+	--palette-navy: #012851;
+	--palette-mint: #a1dcd8;
+	--palette-turquoise: #00c7b1;
+	--palette-sand: #f0efe9;
+	--palette-purple: #b4b9ff;
 
-	/* FONTS */
+	/* Typography */
 	--font-sans: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
 	--font-serif: 'Tinos', 'Times New Roman', Georgia, serif;
 
 	--text-huge: 4rem;
 }
 
-/* 3. Base Styles */
+/* ─── 3. Semantic tokens — Tailwind utilities backed by CSS variables ──────── */
+/*
+   @theme inline makes Tailwind generate utility classes (bg-surface, text-ink,
+   border-line, etc.) whose values are CSS custom properties, not hardcoded hex.
+   Changing --c-surface on :root is all it takes to retheme the whole UI.
+*/
+@theme inline {
+	/* Surfaces */
+	--color-canvas: var(--c-canvas);
+	--color-surface: var(--c-surface);
+	--color-overlay: var(--c-overlay);
+	--color-muted: var(--c-muted);
+
+	/* Borders */
+	--color-line: var(--c-line);
+	--color-line-2: var(--c-line-2);
+
+	/* Text */
+	--color-ink: var(--c-ink);
+	--color-ink-2: var(--c-ink-2);
+	--color-ink-3: var(--c-ink-3);
+
+	/* Accent (mint ↔ turquoise) */
+	--color-accent: var(--c-accent);
+	--color-accent-bg: var(--c-accent-bg);
+
+	/* Primary interactive (navy ↔ mint) */
+	--color-primary: var(--c-primary);
+	--color-primary-fg: var(--c-primary-fg);
+
+	/* Nav active state */
+	--color-nav-active: var(--c-nav-active);
+
+	/* PDF viewer */
+	--color-pdf-bg: var(--c-pdf-bg);
+	--color-pdf-ctrl: var(--c-pdf-ctrl);
+	--color-pdf-text: var(--c-pdf-text);
+
+	/* Static brand tokens (not themed) */
+	--color-brand-purple: var(--palette-purple);
+	--color-brand-navy: var(--palette-navy);
+	--color-brand-mint: var(--palette-mint);
+}
+
+/* ─── 4. Light mode (default) ─────────────────────────────────────────────── */
+:root {
+	--c-canvas: #f0efe9;
+	--c-surface: #ffffff;
+	--c-overlay: #ffffff;
+	--c-muted: #f5f4ef;
+
+	--c-line: #e4e2d7;
+	--c-line-2: #eeede8;
+
+	--c-ink: #012851;
+	--c-ink-2: #6b7280;
+	--c-ink-3: #9ca3af;
+
+	--c-accent: #a1dcd8;
+	--c-accent-bg: rgba(161, 220, 216, 0.15);
+
+	--c-primary: #012851;
+	--c-primary-fg: #ffffff;
+
+	--c-nav-active: rgba(180, 185, 255, 0.15);
+
+	--c-pdf-bg: #ebebeb;
+	--c-pdf-ctrl: #d8d8d8;
+	--c-pdf-text: #333333;
+}
+
+/* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) {
+		--c-canvas: #0d0d0d;
+		--c-surface: #1a1a1a;
+		--c-overlay: #242424;
+		--c-muted: #252525;
+
+		--c-line: #2e2e2e;
+		--c-line-2: #222222;
+
+		--c-ink: #f0efe9;
+		--c-ink-2: #9ca3af;
+		--c-ink-3: #6b7280;
+
+		--c-accent: #00c7b1;
+		--c-accent-bg: rgba(0, 199, 177, 0.12);
+
+		--c-primary: #a1dcd8;
+		--c-primary-fg: #012851;
+
+		--c-nav-active: rgba(180, 185, 255, 0.12);
+
+		--c-pdf-bg: #1e1e1e;
+		--c-pdf-ctrl: #2a2a2a;
+		--c-pdf-text: #d1d1d1;
+	}
+}
+
+/* Manual dark override — takes precedence over media query */
+:root[data-theme='dark'] {
+	--c-canvas: #0d0d0d;
+	--c-surface: #1a1a1a;
+	--c-overlay: #242424;
+	--c-muted: #252525;
+
+	--c-line: #2e2e2e;
+	--c-line-2: #222222;
+
+	--c-ink: #f0efe9;
+	--c-ink-2: #9ca3af;
+	--c-ink-3: #6b7280;
+
+	--c-accent: #00c7b1;
+	--c-accent-bg: rgba(0, 199, 177, 0.12);
+
+	--c-primary: #a1dcd8;
+	--c-primary-fg: #012851;
+
+	--c-nav-active: rgba(180, 185, 255, 0.12);
+
+	--c-pdf-bg: #1e1e1e;
+	--c-pdf-ctrl: #2a2a2a;
+	--c-pdf-text: #d1d1d1;
+}
+
+/* ─── 6. Base styles ───────────────────────────────────────────────────────── */
 @layer base {
 	html {
 		overscroll-behavior: none;
 	}
 
 	body {
-		background-color: #ffffff;
-		color: var(--color-brand-navy);
+		background-color: var(--c-canvas);
+		color: var(--c-ink);
 		font-family: var(--font-serif);
 	}
 
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index bb6e6f92..2221f9d5 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -41,7 +41,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 			</div>
 
 			<!-- Card -->
-			<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
+			<div class="border-brand-sand rounded-sm border bg-white p-8 shadow-sm">
 				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
 					{m.login_heading()}
 				</h1>
diff --git a/frontend/src/routes/persons/+page.svelte b/frontend/src/routes/persons/+page.svelte
index 4a389e23..6fd83f73 100644
--- a/frontend/src/routes/persons/+page.svelte
+++ b/frontend/src/routes/persons/+page.svelte
@@ -79,10 +79,10 @@ function handleSearch() {
 
 	{#if data.persons.length === 0}
 		<div
-			class="flex flex-col items-center justify-center rounded-lg border border-dashed border-brand-sand bg-white py-16 text-center"
+			class="border-brand-sand flex flex-col items-center justify-center rounded-lg border border-dashed bg-white py-16 text-center"
 		>
 			<div
-				class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-brand-sand/30 text-brand-navy"
+				class="bg-brand-sand/30 mb-3 flex h-12 w-12 items-center justify-center rounded-full text-brand-navy"
 			>
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
@@ -99,7 +99,7 @@ function handleSearch() {
 			{#each data.persons as person (person.id)}
 				<a href="/persons/{person.id}" class="group block h-full">
 					<div
-						class="relative flex h-full items-center gap-4 overflow-hidden rounded border border-brand-sand bg-white p-6 shadow-sm transition-all duration-200 hover:border-brand-navy hover:shadow-md"
+						class="border-brand-sand relative flex h-full items-center gap-4 overflow-hidden rounded border bg-white p-6 shadow-sm transition-all duration-200 hover:border-brand-navy hover:shadow-md"
 					>
 						<!-- Decorative Accent on Hover -->
 						<div
diff --git a/frontend/src/routes/persons/[id]/+page.svelte b/frontend/src/routes/persons/[id]/+page.svelte
index 9ebf3140..fed60849 100644
--- a/frontend/src/routes/persons/[id]/+page.svelte
+++ b/frontend/src/routes/persons/[id]/+page.svelte
@@ -111,7 +111,7 @@ $effect(() => {
 	</div>
 
 	<!-- Header / Metadata Card -->
-	<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
+	<div class="border-brand-sand mb-10 overflow-hidden rounded-sm border bg-white shadow-sm">
 		<div class="h-2 w-full bg-brand-navy"></div>
 
 		<div class="p-8 md:p-10">
@@ -247,7 +247,7 @@ $effect(() => {
 				<div class="flex flex-col items-start gap-8 md:flex-row">
 					<div class="flex-shrink-0">
 						<div
-							class="flex h-24 w-24 items-center justify-center rounded-full border border-brand-sand bg-brand-sand/30 text-brand-navy"
+							class="border-brand-sand bg-brand-sand/30 flex h-24 w-24 items-center justify-center rounded-full border text-brand-navy"
 						>
 							<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
 						</div>
@@ -335,7 +335,7 @@ $effect(() => {
 	<!-- Merge Section -->
 	{#if data.canWrite}
 		{#key person.id}
-			<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
+			<div class="border-brand-sand mb-10 overflow-hidden rounded-sm border bg-white shadow-sm">
 				<div class="p-6 md:p-8">
 					<h2 class="mb-1 font-serif text-lg text-brand-navy">{m.person_merge_heading()}</h2>
 					<p class="mb-5 font-sans text-sm text-gray-500">
@@ -413,7 +413,7 @@ $effect(() => {
 				{#each coCorrespondents as c (c.id)}
 					<a
 						href="/conversations?senderId={person.id}&receiverId={c.id}"
-						class="inline-flex items-center gap-1.5 rounded-full border border-brand-sand px-3 py-1 font-serif text-sm text-brand-navy transition-colors hover:border-brand-navy"
+						class="border-brand-sand inline-flex items-center gap-1.5 rounded-full border px-3 py-1 font-serif text-sm text-brand-navy transition-colors hover:border-brand-navy"
 					>
 						{c.name}
 						<span class="font-sans text-xs text-gray-400">({c.count})</span>
@@ -444,7 +444,7 @@ $effect(() => {
 		</div>
 
 		{#if sentDocuments.length === 0}
-			<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
+			<div class="border-brand-sand rounded-sm border border-dashed bg-white p-12 text-center">
 				<p class="font-sans text-gray-500">{m.person_no_docs()}</p>
 			</div>
 		{:else}
@@ -453,12 +453,12 @@ $effect(() => {
 					<li class="group">
 						<a
 							href="/documents/{doc.id}"
-							class="block border border-brand-sand bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
+							class="border-brand-sand block border bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
 						>
 							<div class="flex items-center justify-between">
 								<div class="flex items-center gap-4 overflow-hidden">
 									<div
-										class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-brand-sand/20 text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
+										class="bg-brand-sand/20 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
 									>
 										<img
 											src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -537,7 +537,7 @@ $effect(() => {
 		</div>
 
 		{#if receivedDocuments.length === 0}
-			<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
+			<div class="border-brand-sand rounded-sm border border-dashed bg-white p-12 text-center">
 				<p class="font-sans text-gray-500">{m.person_no_received_docs()}</p>
 			</div>
 		{:else}
@@ -546,12 +546,12 @@ $effect(() => {
 					<li class="group">
 						<a
 							href="/documents/{doc.id}"
-							class="block border border-brand-sand bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
+							class="border-brand-sand block border bg-white p-4 transition-all duration-200 hover:border-brand-navy hover:shadow-md"
 						>
 							<div class="flex items-center justify-between">
 								<div class="flex items-center gap-4 overflow-hidden">
 									<div
-										class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-brand-sand/20 text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
+										class="bg-brand-sand/20 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded text-brand-navy transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
 									>
 										<img
 											src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
diff --git a/frontend/src/routes/persons/new/+page.svelte b/frontend/src/routes/persons/new/+page.svelte
index dd11e9ed..f5fbc05b 100644
--- a/frontend/src/routes/persons/new/+page.svelte
+++ b/frontend/src/routes/persons/new/+page.svelte
@@ -33,7 +33,7 @@ let { form } = $props();
 	{/if}
 
 	<form method="POST">
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.persons_section_details()}
 			</h2>
@@ -82,7 +82,7 @@ let { form } = $props();
 
 		<!-- Save Bar -->
 		<div
-			class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm"
+			class="border-brand-sand mt-4 flex items-center justify-between rounded-sm border bg-white px-6 py-4 shadow-sm"
 		>
 			<a
 				href="/persons"
diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte
index 6cb15754..b07906a7 100644
--- a/frontend/src/routes/profile/+page.svelte
+++ b/frontend/src/routes/profile/+page.svelte
@@ -60,7 +60,7 @@ function handleBirthDateInput(e: Event) {
 
 	<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
 		<!-- Personal info card -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.profile_section_personal()}
 			</h2>
@@ -88,7 +88,7 @@ function handleBirthDateInput(e: Event) {
 							type="text"
 							name="firstName"
 							value={data.user?.firstName ?? ''}
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						/>
 					</label>
 
@@ -102,7 +102,7 @@ function handleBirthDateInput(e: Event) {
 							type="text"
 							name="lastName"
 							value={data.user?.lastName ?? ''}
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						/>
 					</label>
 
@@ -117,7 +117,7 @@ function handleBirthDateInput(e: Event) {
 							placeholder="TT.MM.JJJJ"
 							value={birthDateDisplay}
 							oninput={handleBirthDateInput}
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						/>
 						<input type="hidden" name="birthDate" value={birthDateIso} />
 					</label>
@@ -132,7 +132,7 @@ function handleBirthDateInput(e: Event) {
 							type="email"
 							name="email"
 							value={data.user?.email ?? ''}
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						/>
 					</label>
 
@@ -146,7 +146,7 @@ function handleBirthDateInput(e: Event) {
 							name="contact"
 							rows="3"
 							placeholder={m.profile_contact_placeholder()}
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 							>{data.user?.contact ?? ''}</textarea
 						>
 					</label>
@@ -162,7 +162,7 @@ function handleBirthDateInput(e: Event) {
 		</div>
 
 		<!-- Password change card -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
 				{m.profile_section_password()}
 			</h2>
@@ -194,7 +194,7 @@ function handleBirthDateInput(e: Event) {
 							type="password"
 							name="currentPassword"
 							required
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						/>
 					</label>
 
@@ -208,7 +208,7 @@ function handleBirthDateInput(e: Event) {
 							type="password"
 							name="newPassword"
 							required
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						/>
 					</label>
 
@@ -222,7 +222,7 @@ function handleBirthDateInput(e: Event) {
 							type="password"
 							name="confirmPassword"
 							required
-							class="w-full rounded-sm border border-brand-sand px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
+							class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
 						/>
 					</label>
 				</div>
diff --git a/frontend/src/routes/reset-password/+page.svelte b/frontend/src/routes/reset-password/+page.svelte
index 9e209c9d..f1d0454e 100644
--- a/frontend/src/routes/reset-password/+page.svelte
+++ b/frontend/src/routes/reset-password/+page.svelte
@@ -27,7 +27,7 @@ let {
 			</div>
 
 			<!-- Card -->
-			<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
+			<div class="border-brand-sand rounded-sm border bg-white p-8 shadow-sm">
 				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
 					{m.reset_password_heading()}
 				</h1>
diff --git a/frontend/src/routes/users/[id]/+page.svelte b/frontend/src/routes/users/[id]/+page.svelte
index c33a459d..0ac82023 100644
--- a/frontend/src/routes/users/[id]/+page.svelte
+++ b/frontend/src/routes/users/[id]/+page.svelte
@@ -40,7 +40,7 @@ const initials = $derived.by(() => {
 	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.user_profile_heading()}</h1>
 
 	<div class="max-w-md">
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+		<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
 			<!-- Avatar -->
 			<div class="mb-5 flex justify-center">
 				{#if initials}