feat(upload): show progress bar in drop zone during upload

Replaces fetch with XMLHttpRequest to get upload progress events.
The drop zone shows a filling progress bar and percentage while
files are uploading, then reverts to the normal hint when done.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

backend/src/main/java/org/raddatz/familienarchiv/config/DataInitializer.java

@@ -84,6 +84,14 @@ public class DataInitializer {
             TagRepository tagRepo,
             PasswordEncoder passwordEncoder) {
         return args -> {
+            // Always reset the admin password to the configured value so a failed password-reset
+            // test from a previous run can never leave the account locked out.
+            userRepository.findByUsername(adminUsername).ifPresent(admin -> {
+                admin.setPassword(passwordEncoder.encode(adminPassword));
+                userRepository.save(admin);
+                log.info("E2E seed: Admin-Passwort auf konfigurierten Wert zurückgesetzt.");
+            });
+
             // Always ensure the read-only test user exists, even when seed data was already loaded.
             if (userRepository.findByUsername("reader").isEmpty()) {
                 log.info("E2E seed: Erstelle 'reader'-Testbenutzer...");

backend/src/main/java/org/raddatz/familienarchiv/controller/DocumentController.java

@@ -2,7 +2,9 @@ package org.raddatz.familienarchiv.controller;
 
 import java.io.IOException;
 import java.time.LocalDate;
+import java.util.ArrayList;
 import java.util.List;
+import java.util.Set;
 import java.util.UUID;
 
 
@@ -23,6 +25,7 @@ import org.springframework.http.HttpHeaders;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.core.io.InputStreamResource;
+import org.springframework.web.bind.annotation.DeleteMapping;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.ModelAttribute;
 import org.springframework.web.bind.annotation.PathVariable;
@@ -103,6 +106,56 @@ public class DocumentController {
         }
     }
 
+    // --- DELETE ---
+
+    @DeleteMapping("/{id}")
+    @RequirePermission(Permission.WRITE_ALL)
+    public ResponseEntity<Void> deleteDocument(@PathVariable UUID id) {
+        documentService.deleteDocument(id);
+        return ResponseEntity.noContent().build();
+    }
+
+    // --- QUICK UPLOAD ---
+
+    private static final Set<String> ALLOWED_CONTENT_TYPES = Set.of(
+            "application/pdf", "image/jpeg", "image/png", "image/tiff");
+
+    public record UploadError(String filename, String code) {}
+    public record QuickUploadResult(List<Document> created, List<Document> updated, List<UploadError> errors) {}
+
+    @PostMapping(value = "/quick-upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
+    @RequirePermission(Permission.WRITE_ALL)
+    public QuickUploadResult quickUpload(
+            @RequestPart(value = "files", required = false) List<MultipartFile> files) {
+        List<Document> created = new ArrayList<>();
+        List<Document> updated = new ArrayList<>();
+        List<UploadError> errors = new ArrayList<>();
+
+        if (files == null || files.isEmpty()) {
+            return new QuickUploadResult(created, updated, errors);
+        }
+
+        for (MultipartFile file : files) {
+            if (!ALLOWED_CONTENT_TYPES.contains(file.getContentType())) {
+                errors.add(new UploadError(file.getOriginalFilename(), "UNSUPPORTED_FILE_TYPE"));
+                continue;
+            }
+            try {
+                DocumentService.StoreResult result = documentService.storeDocument(file);
+                if (result.isNew()) {
+                    created.add(result.document());
+                } else {
+                    updated.add(result.document());
+                }
+            } catch (Exception e) {
+                errors.add(new UploadError(file.getOriginalFilename(), "FILE_UPLOAD_FAILED"));
+                log.warn("Quick upload failed for file {}: {}", file.getOriginalFilename(), e.getMessage());
+            }
+        }
+
+        return new QuickUploadResult(created, updated, errors);
+    }
+
     @GetMapping("/search")
     public ResponseEntity<List<Document>> search(
             @RequestParam(required = false) String q,

backend/src/main/java/org/raddatz/familienarchiv/exception/ErrorCode.java

@@ -17,6 +17,8 @@ public enum ErrorCode {
     FILE_NOT_FOUND,
     /** An error occurred while uploading a file to object storage. 500 */
     FILE_UPLOAD_FAILED,
+    /** The uploaded file's content type is not supported (PDF/JPEG/PNG/TIFF only). 400 */
+    UNSUPPORTED_FILE_TYPE,
 
     // --- Users ---
     /** A user with the given ID or username does not exist. 404 */

backend/src/main/java/org/raddatz/familienarchiv/repository/DocumentRepository.java

@@ -21,6 +21,9 @@ public interface DocumentRepository extends JpaRepository<Document, UUID>, JpaSp
     // Wichtig für den Abgleich beim Excel-Import & Datei-Upload
     Optional<Document> findByOriginalFilename(String originalFilename);
 
+    // Wie oben, gibt aber nur das erste Ergebnis zurück — sicher wenn doppelte Dateinamen existieren
+    Optional<Document> findFirstByOriginalFilename(String originalFilename);
+
     // Findet alle Dokumente mit einem bestimmten Status
     // z.B. um alle offenen "PLACEHOLDER" zu finden
     List<Document> findByStatus(DocumentStatus status);

backend/src/main/java/org/raddatz/familienarchiv/service/DocumentService.java

@@ -42,18 +42,21 @@ public class DocumentService {
     private final DocumentVersionService documentVersionService;
     private final AnnotationService annotationService;
 
+    public record StoreResult(Document document, boolean isNew) {}
+
     /**
      * Lädt eine Datei hoch.
      * - Prüft, ob ein Eintrag (aus Excel) schon existiert.
-     * - Wenn JA: Aktualisiert Status und verknüpft Datei.
-     * - Wenn NEIN: Erstellt neuen Eintrag (wartet auf Metadaten).
+     * - Wenn JA: Aktualisiert Status und verknüpft Datei — isNew = false.
+     * - Wenn NEIN: Erstellt neuen Eintrag — isNew = true.
      */
     @Transactional
-    public Document storeDocument(MultipartFile file) throws IOException {
+    public StoreResult storeDocument(MultipartFile file) throws IOException {
         String originalFilename = file.getOriginalFilename();
 
-        // 1. Check for existing record
-        Optional<Document> existingDoc = documentRepository.findByOriginalFilename(originalFilename);
+        // 1. Check for existing record (findFirst to survive duplicate filenames in the DB)
+        Optional<Document> existingDoc = documentRepository.findFirstByOriginalFilename(originalFilename);
+        boolean isNew = existingDoc.isEmpty();
         Document document;
 
         if (existingDoc.isPresent()) {
@@ -61,7 +64,7 @@ public class DocumentService {
         } else {
             document = Document.builder()
                     .originalFilename(originalFilename)
-                    .title(originalFilename)
+                    .title(stripExtension(originalFilename))
                     .status(DocumentStatus.UPLOADED)
                     .build();
         }
@@ -77,7 +80,7 @@ public class DocumentService {
             document.setStatus(DocumentStatus.UPLOADED);
         }
 
-        return documentRepository.save(document);
+        return new StoreResult(documentRepository.save(document), isNew);
     }
 
     @Transactional
@@ -234,8 +237,8 @@ public class DocumentService {
                 .and(hasReceiver(receiver))
                 .and(hasTags(tags));
 
-        // Immer sortiert nach Datum
-        return documentRepository.findAll(spec, Sort.by(Sort.Direction.ASC, "documentDate"));
+        // Neueste zuerst (nach Erstellungsdatum)
+        return documentRepository.findAll(spec, Sort.by(Sort.Direction.DESC, "createdAt"));
     }
 
     // 2. SPEZIALITÄT: Der Schriftwechsel
@@ -277,6 +280,14 @@ public class DocumentService {
         return documentRepository.findConversation(senderId, receiverId, dateFrom, dateTo, sort);
     }
 
+    @Transactional
+    public void deleteDocument(UUID id) {
+        if (!documentRepository.existsById(id)) {
+            throw DomainException.notFound(ErrorCode.DOCUMENT_NOT_FOUND, "Document not found: " + id);
+        }
+        documentRepository.deleteById(id);
+    }
+
     @Transactional
     public void deleteTagCascading(UUID tagId) {
         documentRepository.findByTags_Id(tagId).forEach(doc -> {
@@ -307,6 +318,12 @@ public class DocumentService {
 
     // ─── private helpers ──────────────────────────────────────────────────────
 
+    private static String stripExtension(String filename) {
+        if (filename == null) return null;
+        int dot = filename.lastIndexOf('.');
+        return dot > 0 ? filename.substring(0, dot) : filename;
+    }
+
     private static String sha256Hex(byte[] bytes) {
         try {
             MessageDigest digest = MessageDigest.getInstance("SHA-256");

backend/src/main/resources/db/migration/V14__add_cascade_delete_to_document_join_tables.sql

@@ -0,0 +1,12 @@
+-- Add ON DELETE CASCADE to document_tags and document_receivers so that
+-- deleting a document automatically removes its tag and receiver associations.
+
+ALTER TABLE public.document_tags
+    DROP CONSTRAINT fkc99c5qjulwx9gru07yrhicgd2,
+    ADD CONSTRAINT fkc99c5qjulwx9gru07yrhicgd2
+        FOREIGN KEY (document_id) REFERENCES public.documents(id) ON DELETE CASCADE;
+
+ALTER TABLE public.document_receivers
+    DROP CONSTRAINT fks7t60twjgfmpeqcuc3g0fvjpm,
+    ADD CONSTRAINT fks7t60twjgfmpeqcuc3g0fvjpm
+        FOREIGN KEY (document_id) REFERENCES public.documents(id) ON DELETE CASCADE;

backend/src/test/java/org/raddatz/familienarchiv/controller/DocumentControllerTest.java

@@ -121,6 +121,97 @@ class DocumentControllerTest {
                 .andExpect(status().isOk());
     }
 
+    // ─── DELETE /api/documents/{id} ──────────────────────────────────────────
+
+    @Test
+    void deleteDocument_returns401_whenUnauthenticated() throws Exception {
+        mockMvc.perform(org.springframework.test.web.servlet.request.MockMvcRequestBuilders
+                        .delete("/api/documents/" + UUID.randomUUID()))
+                .andExpect(status().isUnauthorized());
+    }
+
+    @Test
+    @WithMockUser
+    void deleteDocument_returns403_whenMissingWritePermission() throws Exception {
+        mockMvc.perform(org.springframework.test.web.servlet.request.MockMvcRequestBuilders
+                        .delete("/api/documents/" + UUID.randomUUID()))
+                .andExpect(status().isForbidden());
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void deleteDocument_returns204_whenHasWritePermission() throws Exception {
+        UUID id = UUID.randomUUID();
+        mockMvc.perform(org.springframework.test.web.servlet.request.MockMvcRequestBuilders
+                        .delete("/api/documents/" + id))
+                .andExpect(status().isNoContent());
+    }
+
+    // ─── POST /api/documents/quick-upload ────────────────────────────────────
+
+    @Test
+    void quickUpload_returns401_whenUnauthenticated() throws Exception {
+        mockMvc.perform(multipart("/api/documents/quick-upload"))
+                .andExpect(status().isUnauthorized());
+    }
+
+    @Test
+    @WithMockUser
+    void quickUpload_returns403_whenMissingWritePermission() throws Exception {
+        mockMvc.perform(multipart("/api/documents/quick-upload"))
+                .andExpect(status().isForbidden());
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void quickUpload_returns200_withValidPdfFile() throws Exception {
+        Document doc = Document.builder()
+                .id(UUID.randomUUID()).title("scan001").originalFilename("scan001.pdf").build();
+        when(documentService.storeDocument(any()))
+                .thenReturn(new DocumentService.StoreResult(doc, true));
+
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("files", "scan001.pdf", "application/pdf", new byte[]{1});
+
+        mockMvc.perform(multipart("/api/documents/quick-upload").file(file))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.created[0].title").value("scan001"))
+                .andExpect(jsonPath("$.updated").isEmpty())
+                .andExpect(jsonPath("$.errors").isEmpty());
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void quickUpload_placesDocumentInUpdated_whenFilenameAlreadyExists() throws Exception {
+        Document existing = Document.builder()
+                .id(UUID.randomUUID()).title("Alter Brief").originalFilename("scan001.pdf").build();
+        when(documentService.storeDocument(any()))
+                .thenReturn(new DocumentService.StoreResult(existing, false));
+
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("files", "scan001.pdf", "application/pdf", new byte[]{1});
+
+        mockMvc.perform(multipart("/api/documents/quick-upload").file(file))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.created").isEmpty())
+                .andExpect(jsonPath("$.updated[0].title").value("Alter Brief"))
+                .andExpect(jsonPath("$.errors").isEmpty());
+    }
+
+    @Test
+    @WithMockUser(authorities = "WRITE_ALL")
+    void quickUpload_skipsUnsupportedFileType_andReturnsError() throws Exception {
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("files", "report.docx",
+                        "application/vnd.openxmlformats-officedocument.wordprocessingml.document", new byte[]{1});
+
+        mockMvc.perform(multipart("/api/documents/quick-upload").file(file))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.created").isEmpty())
+                .andExpect(jsonPath("$.errors[0].filename").value("report.docx"))
+                .andExpect(jsonPath("$.errors[0].code").value("UNSUPPORTED_FILE_TYPE"));
+    }
+
     // ─── GET /api/documents/{id}/versions ────────────────────────────────────
 
     @Test

backend/src/test/java/org/raddatz/familienarchiv/service/DocumentServiceTest.java

@@ -35,6 +35,29 @@ class DocumentServiceTest {
     @Mock AnnotationService annotationService;
     @InjectMocks DocumentService documentService;
 
+    // ─── deleteDocument ───────────────────────────────────────────────────────
+
+    @Test
+    void deleteDocument_deletesById_whenExists() {
+        UUID id = UUID.randomUUID();
+        when(documentRepository.existsById(id)).thenReturn(true);
+
+        documentService.deleteDocument(id);
+
+        verify(documentRepository).deleteById(id);
+    }
+
+    @Test
+    void deleteDocument_throwsNotFound_whenMissing() {
+        UUID id = UUID.randomUUID();
+        when(documentRepository.existsById(id)).thenReturn(false);
+
+        assertThatThrownBy(() -> documentService.deleteDocument(id))
+                .isInstanceOf(DomainException.class)
+                .hasMessageContaining(id.toString());
+        verify(documentRepository, never()).deleteById(any());
+    }
+
     // ─── getDocumentById ──────────────────────────────────────────────────────
 
     @Test
@@ -212,6 +235,75 @@ class DocumentServiceTest {
         verify(documentVersionService).recordVersion(any(Document.class));
     }
 
+    // ─── storeDocument ───────────────────────────────────────────────────────
+
+    @Test
+    void storeDocument_setsTitle_withoutFileExtension_forNewDocument() throws Exception {
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("file", "scan001.pdf", "application/pdf", new byte[]{1});
+        FileService.UploadResult uploadResult = new FileService.UploadResult("documents/uuid_scan001.pdf", "abc123");
+        Document saved = Document.builder().id(UUID.randomUUID()).title("scan001").originalFilename("scan001.pdf").build();
+
+        when(documentRepository.findFirstByOriginalFilename("scan001.pdf")).thenReturn(Optional.empty());
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(fileService.uploadFile(any(), any())).thenReturn(uploadResult);
+
+        org.mockito.ArgumentCaptor<Document> captor = org.mockito.ArgumentCaptor.forClass(Document.class);
+        documentService.storeDocument(file);
+
+        verify(documentRepository).save(captor.capture());
+        assertThat(captor.getValue().getTitle()).isEqualTo("scan001");
+    }
+
+    @Test
+    void storeDocument_preservesExistingTitle_whenPlaceholderAlreadyExists() throws Exception {
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("file", "scan001.pdf", "application/pdf", new byte[]{1});
+        FileService.UploadResult uploadResult = new FileService.UploadResult("documents/uuid_scan001.pdf", "abc123");
+        Document placeholder = Document.builder()
+                .id(UUID.randomUUID()).title("Brief an Oma").originalFilename("scan001.pdf")
+                .status(DocumentStatus.PLACEHOLDER).build();
+
+        when(documentRepository.findFirstByOriginalFilename("scan001.pdf")).thenReturn(Optional.of(placeholder));
+        when(documentRepository.save(any())).thenReturn(placeholder);
+        when(fileService.uploadFile(any(), any())).thenReturn(uploadResult);
+
+        documentService.storeDocument(file);
+
+        assertThat(placeholder.getTitle()).isEqualTo("Brief an Oma");
+    }
+
+    @Test
+    void storeDocument_marksResultAsNew_whenNoExistingDocument() throws Exception {
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("file", "new.pdf", "application/pdf", new byte[]{1});
+        Document saved = Document.builder().id(UUID.randomUUID()).originalFilename("new.pdf").build();
+
+        when(documentRepository.findFirstByOriginalFilename("new.pdf")).thenReturn(Optional.empty());
+        when(documentRepository.save(any())).thenReturn(saved);
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("documents/new.pdf", "hash"));
+
+        DocumentService.StoreResult result = documentService.storeDocument(file);
+
+        assertThat(result.isNew()).isTrue();
+    }
+
+    @Test
+    void storeDocument_marksResultAsNotNew_whenDocumentWithSameFilenameExists() throws Exception {
+        org.springframework.mock.web.MockMultipartFile file =
+                new org.springframework.mock.web.MockMultipartFile("file", "existing.pdf", "application/pdf", new byte[]{1});
+        Document existing = Document.builder().id(UUID.randomUUID()).originalFilename("existing.pdf")
+                .status(DocumentStatus.UPLOADED).build();
+
+        when(documentRepository.findFirstByOriginalFilename("existing.pdf")).thenReturn(Optional.of(existing));
+        when(documentRepository.save(any())).thenReturn(existing);
+        when(fileService.uploadFile(any(), any())).thenReturn(new FileService.UploadResult("documents/existing.pdf", "hash"));
+
+        DocumentService.StoreResult result = documentService.storeDocument(file);
+
+        assertThat(result.isNew()).isFalse();
+    }
+
     // ─── backfillFileHashes ───────────────────────────────────────────────────
 
     @Test

frontend/e2e/bottom-panel.spec.ts

@@ -0,0 +1,180 @@
+import { test, expect } from '@playwright/test';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const PDF_FIXTURE = path.resolve(__dirname, 'fixtures/minimal.pdf');
+
+/**
+ * Bottom panel E2E tests — issue #62.
+ * Verifies the new document detail layout: full-viewport viewer + floating bottom panel.
+ */
+
+let pdfDocHref: string;
+let noFileDocHref: string;
+
+test.describe('Document bottom panel', () => {
+	test.beforeAll(async ({ request }) => {
+		const baseURL = process.env.E2E_BASE_URL ?? 'http://localhost:3000';
+
+		// Create a document with a PDF and a date for metadata tests.
+		const createRes = await request.post('/api/documents', {
+			multipart: { title: 'E2E Bottom Panel Test', documentDate: '1945-05-08' }
+		});
+		if (!createRes.ok()) throw new Error(`Create document failed: ${createRes.status()}`);
+		const doc = await createRes.json();
+
+		const uploadRes = await request.put(`/api/documents/${doc.id}`, {
+			multipart: {
+				title: doc.title,
+				documentDate: '1945-05-08',
+				transcription: 'Dies ist eine vollständige Transkription des Dokuments für den E2E-Test.',
+				file: {
+					name: 'minimal.pdf',
+					mimeType: 'application/pdf',
+					buffer: fs.readFileSync(PDF_FIXTURE)
+				}
+			}
+		});
+		if (!uploadRes.ok()) throw new Error(`Upload PDF failed: ${uploadRes.status()}`);
+		pdfDocHref = `${baseURL}/documents/${doc.id}`;
+
+		// Create a document WITHOUT a file — panel should open to Metadaten by default.
+		const noFileRes = await request.post('/api/documents', {
+			multipart: { title: 'E2E Bottom Panel No-File Test' }
+		});
+		if (!noFileRes.ok()) throw new Error(`Create no-file document failed: ${noFileRes.status()}`);
+		noFileDocHref = `${baseURL}/documents/${noFileRes.json().then ? (await noFileRes.json()).id : ''}`;
+		const noFileDoc = await noFileRes.json();
+		noFileDocHref = `${baseURL}/documents/${noFileDoc.id}`;
+	});
+
+	test('bottom panel tab bar is visible and panel content is closed by default on a PDF document', async ({
+		page
+	}) => {
+		test.setTimeout(30_000);
+		// Clear localStorage to ensure no previous panel state.
+		await page.goto(pdfDocHref);
+		await page.evaluate(() => localStorage.clear());
+		await page.reload();
+		await page.waitForSelector('[data-hydrated]');
+
+		// Tab bar must always be visible.
+		await expect(page.getByRole('button', { name: 'Metadaten' })).toBeVisible();
+		await expect(page.getByRole('button', { name: 'Transkription' })).toBeVisible();
+		await expect(page.getByRole('button', { name: 'Diskussion' })).toBeVisible();
+		await expect(page.getByRole('button', { name: 'Verlauf' })).toBeVisible();
+
+		// Panel content must NOT be visible when closed.
+		await expect(page.locator('[data-testid="bottom-panel-content"]')).not.toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/bottom-panel-closed-default.png' });
+	});
+
+	test('clicking Metadaten tab opens the panel and shows metadata content', async ({ page }) => {
+		test.setTimeout(30_000);
+		await page.goto(pdfDocHref);
+		await page.evaluate(() => localStorage.clear());
+		await page.reload();
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.getByRole('button', { name: 'Metadaten' }).click();
+
+		// Panel content becomes visible.
+		await expect(page.locator('[data-testid="bottom-panel-content"]')).toBeVisible();
+
+		// Metadata section heading should be present.
+		await expect(page.getByText('Details', { exact: false })).toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/bottom-panel-metadata.png' });
+	});
+
+	test('clicking Transkription tab shows transcription text', async ({ page }) => {
+		test.setTimeout(30_000);
+		await page.goto(pdfDocHref);
+		await page.evaluate(() => localStorage.clear());
+		await page.reload();
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.getByRole('button', { name: 'Transkription' }).click();
+
+		await expect(page.locator('[data-testid="bottom-panel-content"]')).toBeVisible();
+		await expect(
+			page.getByText('Dies ist eine vollständige Transkription', { exact: false })
+		).toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/bottom-panel-transcription.png' });
+	});
+
+	test('clicking Diskussion tab shows the comment input', async ({ page }) => {
+		test.setTimeout(30_000);
+		await page.goto(pdfDocHref);
+		await page.evaluate(() => localStorage.clear());
+		await page.reload();
+		await page.waitForSelector('[data-hydrated]');
+
+		await page.getByRole('button', { name: 'Diskussion' }).click();
+
+		await expect(page.locator('[data-testid="bottom-panel-content"]')).toBeVisible();
+		await expect(page.getByPlaceholder('Kommentar schreiben…')).toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/bottom-panel-discussion.png' });
+	});
+
+	test('clicking × close button collapses the panel content', async ({ page }) => {
+		test.setTimeout(30_000);
+		await page.goto(pdfDocHref);
+		await page.evaluate(() => localStorage.clear());
+		await page.reload();
+		await page.waitForSelector('[data-hydrated]');
+
+		// Open the panel first.
+		await page.getByRole('button', { name: 'Metadaten' }).click();
+		await expect(page.locator('[data-testid="bottom-panel-content"]')).toBeVisible();
+
+		// Close it.
+		await page.locator('[data-testid="panel-close-btn"]').click();
+		await expect(page.locator('[data-testid="bottom-panel-content"]')).not.toBeVisible();
+
+		// Tab bar still visible after closing.
+		await expect(page.getByRole('button', { name: 'Metadaten' })).toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/bottom-panel-closed-after-x.png' });
+	});
+
+	test('panel open state persists after page reload', async ({ page }) => {
+		test.setTimeout(30_000);
+		await page.goto(pdfDocHref);
+		await page.evaluate(() => localStorage.clear());
+		await page.reload();
+		await page.waitForSelector('[data-hydrated]');
+
+		// Open the panel to Diskussion.
+		await page.getByRole('button', { name: 'Diskussion' }).click();
+		await expect(page.locator('[data-testid="bottom-panel-content"]')).toBeVisible();
+
+		// Reload — panel should re-open on the same tab.
+		await page.reload();
+		await page.waitForSelector('[data-hydrated]');
+
+		await expect(page.locator('[data-testid="bottom-panel-content"]')).toBeVisible();
+		await expect(page.getByPlaceholder('Kommentar schreiben…')).toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/bottom-panel-persisted.png' });
+	});
+
+	test('document without a file opens panel to Metadaten by default', async ({ page }) => {
+		test.setTimeout(30_000);
+		await page.goto(noFileDocHref);
+		await page.evaluate(() => localStorage.clear());
+		await page.reload();
+		await page.waitForSelector('[data-hydrated]');
+
+		// Panel should be open to Metadaten by default when there is no file.
+		await expect(page.locator('[data-testid="bottom-panel-content"]')).toBeVisible();
+		await expect(page.getByText('Details', { exact: false })).toBeVisible();
+
+		await page.screenshot({ path: 'test-results/e2e/bottom-panel-no-file-default.png' });
+	});
+});

frontend/e2e/theme.spec.ts

@@ -0,0 +1,73 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Theme toggle', () => {
+	test.beforeEach(async ({ page }) => {
+		// Clear any saved theme preference before each test
+		await page.goto('/');
+		await page.evaluate(() => localStorage.removeItem('theme'));
+	});
+
+	test('toggle button is visible in the header', async ({ page }) => {
+		await page.goto('/');
+		await expect(
+			page.getByRole('banner').getByRole('button', { name: /dark mode|light mode/i })
+		).toBeVisible();
+	});
+
+	test('clicking the toggle switches to dark mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		const html = page.locator('html');
+		await expect(html).not.toHaveAttribute('data-theme', 'dark');
+
+		await page
+			.getByRole('banner')
+			.getByRole('button', { name: /dark mode/i })
+			.click();
+
+		await expect(html).toHaveAttribute('data-theme', 'dark');
+	});
+
+	test('clicking the toggle again switches back to light mode', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page
+			.getByRole('banner')
+			.getByRole('button', { name: /dark mode/i })
+			.click();
+		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+
+		await page
+			.getByRole('banner')
+			.getByRole('button', { name: /light mode/i })
+			.click();
+		await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+	});
+
+	test('theme persists after page reload', async ({ page }) => {
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		await page
+			.getByRole('banner')
+			.getByRole('button', { name: /dark mode/i })
+			.click();
+		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+
+		await page.reload();
+		await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+	});
+
+	test('saved theme is applied before first paint (no flash)', async ({ page }) => {
+		// Set dark theme in localStorage before navigating
+		await page.goto('/');
+		await page.evaluate(() => localStorage.setItem('theme', 'dark'));
+
+		// Intercept the initial HTML to verify data-theme is set immediately
+		await page.goto('/');
+		const theme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+		expect(theme).toBe('dark');
+	});
+});

frontend/messages/de.json

@@ -7,6 +7,7 @@
 	"error_document_no_file": "Diesem Dokument ist noch keine Datei zugeordnet.",
 	"error_file_not_found": "Die Datei konnte im Speicher nicht gefunden werden.",
 	"error_file_upload_failed": "Die Datei konnte nicht hochgeladen werden.",
+	"error_unsupported_file_type": "Dieses Dateiformat wird nicht unterstützt.",
 	"error_user_not_found": "Der Benutzer wurde nicht gefunden.",
 	"error_import_already_running": "Ein Import läuft bereits. Bitte warten Sie, bis dieser abgeschlossen ist.",
 	"error_unauthorized": "Sie sind nicht angemeldet.",
@@ -23,6 +24,7 @@
 	"btn_edit": "Bearbeiten",
 	"btn_create": "Erstellen",
 	"btn_delete": "Löschen",
+	"doc_delete_confirm": "Dokument wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.",
 	"btn_back_to_overview": "Zurück zur Übersicht",
 	"btn_back": "Zurück",
 	"btn_back_to_document": "Zurück zum Dokument",
@@ -255,5 +257,22 @@
 	"comment_btn_reply": "Antworten",
 	"comment_edited_label": "· bearbeitet",
 	"comment_panel_title": "Kommentare",
-	"comment_panel_close": "Schließen"
+	"comment_panel_close": "Schließen",
+	"doc_panel_tab_metadata": "Metadaten",
+	"doc_panel_tab_transcription": "Transkription",
+	"doc_panel_tab_discussion": "Diskussion",
+	"doc_panel_tab_history": "Verlauf",
+	"doc_panel_annotate": "Annotieren",
+	"doc_panel_annotate_stop": "Fertig",
+	"doc_panel_annotation_thread_title": "Annotation",
+	"doc_panel_discussion_annotation_tab": "Annotation · Seite {page}",
+	"pdf_annotations_show": "Annotierungen anzeigen",
+	"pdf_annotations_hide": "Annotierungen verbergen",
+	"upload_drop_hint": "Dateien ablegen oder auswählen",
+	"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
+	"upload_success": "{count} Dokument(e) erstellt",
+	"upload_duplicate": "{filename} existiert bereits —",
+	"upload_duplicate_link": "Zum Dokument",
+	"upload_invalid_type": "{filename}: Dateiformat nicht unterstützt",
+	"upload_error": "Fehler beim Hochladen von {filename}"
 }

frontend/messages/en.json

@@ -7,6 +7,7 @@
 	"error_document_no_file": "No file is associated with this document.",
 	"error_file_not_found": "The file could not be found in storage.",
 	"error_file_upload_failed": "The file could not be uploaded.",
+	"error_unsupported_file_type": "This file format is not supported.",
 	"error_user_not_found": "User not found.",
 	"error_import_already_running": "An import is already running. Please wait for it to finish.",
 	"error_unauthorized": "You are not logged in.",
@@ -23,6 +24,7 @@
 	"btn_edit": "Edit",
 	"btn_create": "Create",
 	"btn_delete": "Delete",
+	"doc_delete_confirm": "Really delete this document? This action cannot be undone.",
 	"btn_back_to_overview": "Back to overview",
 	"btn_back": "Back",
 	"btn_back_to_document": "Back to document",
@@ -255,5 +257,22 @@
 	"comment_btn_reply": "Reply",
 	"comment_edited_label": "· edited",
 	"comment_panel_title": "Comments",
-	"comment_panel_close": "Close"
+	"comment_panel_close": "Close",
+	"doc_panel_tab_metadata": "Metadata",
+	"doc_panel_tab_transcription": "Transcription",
+	"doc_panel_tab_discussion": "Discussion",
+	"doc_panel_tab_history": "History",
+	"doc_panel_annotate": "Annotate",
+	"doc_panel_annotate_stop": "Done",
+	"doc_panel_annotation_thread_title": "Annotation",
+	"doc_panel_discussion_annotation_tab": "Annotation · Page {page}",
+	"pdf_annotations_show": "Show annotations",
+	"pdf_annotations_hide": "Hide annotations",
+	"upload_drop_hint": "Drop files or click to select",
+	"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
+	"upload_success": "{count} document(s) created",
+	"upload_duplicate": "{filename} already exists —",
+	"upload_duplicate_link": "View document",
+	"upload_invalid_type": "{filename}: unsupported file format",
+	"upload_error": "Error uploading {filename}"
 }

frontend/messages/es.json

@@ -7,6 +7,7 @@
 	"error_document_no_file": "No hay ningún archivo asociado a este documento.",
 	"error_file_not_found": "El archivo no pudo encontrarse en el almacenamiento.",
 	"error_file_upload_failed": "No se pudo subir el archivo.",
+	"error_unsupported_file_type": "Este formato de archivo no está admitido.",
 	"error_user_not_found": "Usuario no encontrado.",
 	"error_import_already_running": "Ya hay una importación en curso. Por favor, espere a que finalice.",
 	"error_unauthorized": "No ha iniciado sesión.",
@@ -23,6 +24,7 @@
 	"btn_edit": "Editar",
 	"btn_create": "Crear",
 	"btn_delete": "Eliminar",
+	"doc_delete_confirm": "¿Realmente eliminar este documento? Esta acción no se puede deshacer.",
 	"btn_back_to_overview": "Volver al resumen",
 	"btn_back": "Volver",
 	"btn_back_to_document": "Volver al documento",
@@ -255,5 +257,22 @@
 	"comment_btn_reply": "Responder",
 	"comment_edited_label": "· editado",
 	"comment_panel_title": "Comentarios",
-	"comment_panel_close": "Cerrar"
+	"comment_panel_close": "Cerrar",
+	"doc_panel_tab_metadata": "Metadatos",
+	"doc_panel_tab_transcription": "Transcripción",
+	"doc_panel_tab_discussion": "Discusión",
+	"doc_panel_tab_history": "Historial",
+	"doc_panel_annotate": "Anotar",
+	"doc_panel_annotate_stop": "Listo",
+	"doc_panel_annotation_thread_title": "Anotación",
+	"doc_panel_discussion_annotation_tab": "Anotación · Página {page}",
+	"pdf_annotations_show": "Mostrar anotaciones",
+	"pdf_annotations_hide": "Ocultar anotaciones",
+	"upload_drop_hint": "Soltar archivos o hacer clic para seleccionar",
+	"upload_accepted_types": "PDF, JPEG, PNG, TIFF",
+	"upload_success": "{count} documento(s) creado(s)",
+	"upload_duplicate": "{filename} ya existe —",
+	"upload_duplicate_link": "Ver documento",
+	"upload_invalid_type": "{filename}: formato de archivo no admitido",
+	"upload_error": "Error al subir {filename}"
 }

frontend/src/app.html

@@ -3,6 +3,12 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script>
+			(function () {
+				var t = localStorage.getItem('theme');
+				if (t === 'dark' || t === 'light') document.documentElement.setAttribute('data-theme', t);
+			})();
+		</script>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

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="absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l border-line bg-surface shadow-2xl sm:flex"
 >
-	<div class="flex shrink-0 items-center justify-between border-b border-brand-sand px-4 py-3">
-		<h3 class="font-sans text-xs font-bold tracking-widest text-brand-navy uppercase">
+	<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
+		<h3 class="font-sans text-xs font-bold tracking-widest text-ink 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="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
 		>
 			<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" />
@@ -60,15 +60,15 @@ let {
 	<div class="flex-1 bg-black/40" onclick={onClose} role="presentation"></div>
 
 	<!-- 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">
-			<h3 class="font-sans text-xs font-bold tracking-widest text-brand-navy uppercase">
+	<div class="flex max-h-[80vh] flex-col rounded-t-2xl bg-surface shadow-2xl">
+		<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
+			<h3 class="font-sans text-xs font-bold tracking-widest text-ink 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="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
 			>
 				<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" />

frontend/src/lib/components/AnnotationSidePanel.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import CommentThread from './CommentThread.svelte';
+
+type Props = {
+	documentId: string;
+	activeAnnotationId: string | null;
+	activeAnnotationPage: number | null;
+	canComment: boolean;
+	currentUserId: string | null;
+	canAdmin: boolean;
+	onClose: () => void;
+};
+
+let {
+	documentId,
+	activeAnnotationId,
+	activeAnnotationPage,
+	canComment,
+	currentUserId,
+	canAdmin,
+	onClose
+}: Props = $props();
+
+const visible = $derived(activeAnnotationId !== null);
+</script>
+
+<div
+	class="absolute inset-y-0 right-0 z-10 flex w-80 flex-col border-l border-line bg-surface 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-line px-4 py-3">
+		<span class="font-sans text-xs font-medium text-ink">
+			{m.doc_panel_discussion_annotation_tab({ page: String(activeAnnotationPage ?? '?') })}
+		</span>
+		<button
+			onclick={onClose}
+			aria-label={m.comment_panel_close()}
+			class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
+		>
+			<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" />
+			</svg>
+		</button>
+	</div>
+
+	<!-- Comment thread -->
+	<div class="flex-1 overflow-y-auto p-4">
+		{#if activeAnnotationId}
+			{#key activeAnnotationId}
+				<CommentThread
+					documentId={documentId}
+					annotationId={activeAnnotationId}
+					canComment={canComment}
+					currentUserId={currentUserId}
+					canAdmin={canAdmin}
+					loadOnMount={true}
+				/>
+			{/key}
+		{/if}
+	</div>
+</div>

frontend/src/lib/components/CommentThread.svelte

@@ -191,26 +191,26 @@ 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-t border-line 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="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:ring-1 focus:ring-accent focus:outline-none"
 							rows={3}
 							bind:value={editText}
 						></textarea>
 						<div class="flex items-center gap-3">
 							<button
-								class="rounded bg-brand-navy px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-brand-navy/80 disabled:opacity-40"
+								class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-primary/80 disabled:opacity-40"
 								disabled={posting}
 								onclick={() => saveEdit(thread.id)}
 							>
 								{m.btn_save()}
 							</button>
 							<button
-								class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+								class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 								onclick={cancelEdit}
 							>
 								{m.btn_cancel()}
@@ -221,29 +221,27 @@ onMount(() => {
 					<div class="flex items-start justify-between gap-2">
 						<div class="min-w-0 flex-1">
 							<div class="flex flex-wrap items-center gap-2">
-								<span class="font-sans text-xs font-semibold text-brand-navy"
-									>{thread.authorName}</span
-								>
-								<span class="font-sans text-xs text-gray-400">{timeAgo(thread.createdAt)}</span>
+								<span class="font-sans text-xs font-semibold text-ink">{thread.authorName}</span>
+								<span class="font-sans text-xs text-ink-3">{timeAgo(thread.createdAt)}</span>
 								{#if wasEdited(thread)}
-									<span class="font-sans text-xs text-gray-400">
+									<span class="font-sans text-xs text-ink-3">
 										{m.comment_edited_label()}
 										{timeAgo(thread.updatedAt)}
 									</span>
 								{/if}
 							</div>
-							<p class="mt-1 font-serif text-sm leading-relaxed text-gray-700">{thread.content}</p>
+							<p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{thread.content}</p>
 						</div>
 						{#if canModify(thread)}
 							<div class="flex shrink-0 items-center gap-2">
 								<button
-									class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+									class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 									onclick={() => startEdit(thread)}
 								>
 									{m.btn_edit()}
 								</button>
 								<button
-									class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+									class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 									onclick={() => deleteComment(thread.id)}
 								>
 									{m.btn_delete()}
@@ -255,7 +253,7 @@ onMount(() => {
 					{#if thread.replies.length === 0 && canComment}
 						<div class="mt-1">
 							<button
-								class="font-sans text-xs font-medium text-brand-mint transition-colors hover:text-brand-navy"
+								class="font-sans text-xs font-medium text-accent transition-colors hover:text-ink"
 								onclick={() => startReply(thread.id)}
 							>
 								{m.comment_btn_reply()}
@@ -267,24 +265,24 @@ 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="mt-3 ml-6 border-l-2 border-line 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="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:ring-1 focus:ring-accent focus:outline-none"
 								rows={3}
 								bind:value={editText}
 							></textarea>
 							<div class="flex items-center gap-3">
 								<button
-									class="rounded bg-brand-navy px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-brand-navy/80 disabled:opacity-40"
+									class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-primary/80 disabled:opacity-40"
 									disabled={posting}
 									onclick={() => saveEdit(reply.id)}
 								>
 									{m.btn_save()}
 								</button>
 								<button
-									class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+									class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 									onclick={cancelEdit}
 								>
 									{m.btn_cancel()}
@@ -295,29 +293,27 @@ onMount(() => {
 						<div class="flex items-start justify-between gap-2">
 							<div class="min-w-0 flex-1">
 								<div class="flex flex-wrap items-center gap-2">
-									<span class="font-sans text-xs font-semibold text-brand-navy"
-										>{reply.authorName}</span
-									>
-									<span class="font-sans text-xs text-gray-400">{timeAgo(reply.createdAt)}</span>
+									<span class="font-sans text-xs font-semibold text-ink">{reply.authorName}</span>
+									<span class="font-sans text-xs text-ink-3">{timeAgo(reply.createdAt)}</span>
 									{#if wasEdited(reply)}
-										<span class="font-sans text-xs text-gray-400">
+										<span class="font-sans text-xs text-ink-3">
 											{m.comment_edited_label()}
 											{timeAgo(reply.updatedAt)}
 										</span>
 									{/if}
 								</div>
-								<p class="mt-1 font-serif text-sm leading-relaxed text-gray-700">{reply.content}</p>
+								<p class="mt-1 font-serif text-sm leading-relaxed text-ink-2">{reply.content}</p>
 							</div>
 							{#if canModify(reply)}
 								<div class="flex shrink-0 items-center gap-2">
 									<button
-										class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+										class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 										onclick={() => startEdit(reply)}
 									>
 										{m.btn_edit()}
 									</button>
 									<button
-										class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+										class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 										onclick={() => deleteComment(reply.id)}
 									>
 										{m.btn_delete()}
@@ -329,7 +325,7 @@ onMount(() => {
 						{#if ri === thread.replies.length - 1 && canComment}
 							<div class="mt-1">
 								<button
-									class="font-sans text-xs font-medium text-brand-mint transition-colors hover:text-brand-navy"
+									class="font-sans text-xs font-medium text-accent transition-colors hover:text-ink"
 									onclick={() => startReply(thread.id)}
 								>
 									{m.comment_btn_reply()}
@@ -344,21 +340,21 @@ 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="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:ring-1 focus:ring-accent focus:outline-none"
 						rows={3}
 						placeholder={m.comment_placeholder()}
 						bind:value={replyText}
 					></textarea>
 					<div class="flex items-center gap-3">
 						<button
-							class="rounded bg-brand-navy px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-brand-navy/80 disabled:opacity-40"
+							class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-primary/80 disabled:opacity-40"
 							disabled={posting}
 							onclick={() => postReply(thread.id)}
 						>
 							{m.comment_btn_post()}
 						</button>
 						<button
-							class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+							class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 							onclick={cancelReply}
 						>
 							{m.btn_cancel()}
@@ -371,17 +367,17 @@ 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-t border-line 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="w-full resize-none rounded border border-line px-3 py-2 font-serif text-sm text-ink focus:ring-1 focus:ring-accent focus:outline-none"
 					rows={3}
 					placeholder={m.comment_placeholder()}
 					bind:value={newText}
 				></textarea>
 				<div>
 					<button
-						class="rounded bg-brand-navy px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-brand-navy/80 disabled:opacity-40"
+						class="rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white hover:bg-primary/80 disabled:opacity-40"
 						disabled={posting || !newText.trim()}
 						onclick={postComment}
 					>

frontend/src/lib/components/DocumentBottomPanel.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import PanelMetadata from './PanelMetadata.svelte';
+import PanelTranscription from './PanelTranscription.svelte';
+import PanelDiscussion from './PanelDiscussion.svelte';
+import PanelHistory from './PanelHistory.svelte';
+
+type Tab = 'metadata' | 'transcription' | 'discussion' | 'history';
+
+type CommentReply = {
+	id: string;
+	authorId: string | null;
+	authorName: string;
+	content: string;
+	createdAt: string;
+	updatedAt: string;
+};
+
+type Comment = {
+	id: string;
+	authorId: string | null;
+	authorName: string;
+	content: string;
+	createdAt: string;
+	updatedAt: string;
+	replies: CommentReply[];
+};
+
+type Doc = {
+	id: string;
+	title?: string | null;
+	documentDate?: string | null;
+	location?: string | null;
+	documentLocation?: string | null;
+	tags?: { id: string; name: string }[] | null;
+	sender?: { id: string; firstName: string; lastName: string; alias?: string | null } | null;
+	receivers?: { id: string; firstName: string; lastName: string }[] | null;
+	summary?: string | null;
+	transcription?: string | null;
+};
+
+type Props = {
+	doc: Doc;
+	comments: Comment[];
+	canComment: boolean;
+	currentUserId: string | null;
+	canAdmin: boolean;
+	open: boolean;
+	height: number;
+	activeTab: Tab;
+};
+
+let {
+	doc,
+	comments,
+	canComment,
+	currentUserId,
+	canAdmin,
+	open = $bindable(),
+	height = $bindable(),
+	activeTab = $bindable()
+}: Props = $props();
+
+const MIN_HEIGHT = 52; // drag handle (8px) + tab bar (~44px)
+
+let isDragging = $state(false);
+let dragStartY = 0;
+let dragStartHeight = 0;
+
+function fullHeight() {
+	const topbar = document.querySelector('[data-topbar]');
+	return window.innerHeight - (topbar?.getBoundingClientRect().bottom ?? 0);
+}
+
+function openTab(tab: Tab) {
+	activeTab = tab;
+	if (!open) {
+		open = true;
+		if (height <= MIN_HEIGHT) height = fullHeight();
+	}
+}
+
+function closePanel() {
+	open = false;
+}
+
+function onDragStart(e: PointerEvent) {
+	isDragging = true;
+	dragStartY = e.clientY;
+	dragStartHeight = open ? height : MIN_HEIGHT;
+	(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+}
+
+function onDragMove(e: PointerEvent) {
+	if (!isDragging) return;
+	const delta = dragStartY - e.clientY; // positive = dragging up = bigger panel
+	const newHeight = dragStartHeight + delta;
+	const maxHeight = fullHeight();
+
+	if (newHeight <= MIN_HEIGHT + 20) {
+		// collapsed past threshold → close
+		open = false;
+	} else {
+		open = true;
+		height = Math.max(80, Math.min(newHeight, maxHeight));
+	}
+}
+
+function onDragEnd() {
+	isDragging = false;
+}
+
+const tabs: { id: Tab; label: () => string }[] = [
+	{ id: 'metadata', label: m.doc_panel_tab_metadata },
+	{ id: 'transcription', label: m.doc_panel_tab_transcription },
+	{ id: 'discussion', label: m.doc_panel_tab_discussion },
+	{ id: 'history', label: m.doc_panel_tab_history }
+];
+
+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-line bg-surface shadow-[0_-4px_16px_rgba(0,0,0,0.08)]"
+	style="height: {panelHeight}px"
+	data-testid="bottom-panel"
+>
+	<!-- Drag handle -->
+	<div
+		class="flex h-2 shrink-0 cursor-ns-resize items-center justify-center bg-surface"
+		style="touch-action: none"
+		role="separator"
+		aria-orientation="horizontal"
+		aria-label="Panel resize"
+		onpointerdown={onDragStart}
+		onpointermove={onDragMove}
+		onpointerup={onDragEnd}
+		onpointercancel={onDragEnd}
+	>
+		<div class="h-1 w-12 rounded-full bg-line"></div>
+	</div>
+
+	<!-- Tab bar -->
+	<div class="flex shrink-0 items-center border-b border-line bg-surface px-4">
+		{#each tabs as tab (tab.id)}
+			<button
+				onclick={() => openTab(tab.id)}
+				class="mr-1 px-3 py-2.5 font-sans text-xs font-medium transition-colors {activeTab === tab.id && open
+					? 'border-b-2 border-primary text-ink'
+					: 'text-ink-3 hover:text-ink'}"
+				aria-pressed={activeTab === tab.id && open}
+			>
+				{tab.label()}
+			</button>
+		{/each}
+
+		<!-- spacer -->
+		<div class="flex-1"></div>
+
+		{#if open}
+			<button
+				onclick={closePanel}
+				data-testid="panel-close-btn"
+				aria-label="Panel schließen"
+				class="rounded p-1.5 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
+			>
+				<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" />
+				</svg>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Tab content -->
+	{#if open}
+		<div class="flex-1 overflow-y-auto" data-testid="bottom-panel-content">
+			{#if activeTab === 'metadata'}
+				<PanelMetadata doc={doc} />
+			{:else if activeTab === 'transcription'}
+				<PanelTranscription doc={doc} />
+			{:else if activeTab === 'discussion'}
+				<PanelDiscussion
+					documentId={doc.id}
+					initialComments={comments}
+					canComment={canComment}
+					currentUserId={currentUserId}
+					canAdmin={canAdmin}
+				/>
+			{:else if activeTab === 'history'}
+				<PanelHistory documentId={doc.id} />
+			{/if}
+		</div>
+	{/if}
+</div>

frontend/src/lib/components/DocumentTopBar.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+type Person = { id: string; firstName: string; lastName: string };
+
+type Doc = {
+	id: string;
+	title?: string | null;
+	originalFilename?: string | null;
+	documentDate?: string | null;
+	sender?: Person | null;
+	receivers?: Person[] | null;
+	filePath?: string | null;
+	contentType?: string | null;
+};
+
+type Props = {
+	doc: Doc;
+	canWrite: boolean;
+	canAnnotate: boolean;
+	fileUrl: string;
+	annotateMode: boolean;
+};
+
+let { doc, canWrite, canAnnotate, fileUrl, annotateMode = $bindable() }: Props = $props();
+
+const isPdf = $derived(!!doc.filePath && doc.contentType?.startsWith('application/pdf'));
+
+const receiverDisplay = $derived.by(() => {
+	const receivers = doc.receivers ?? [];
+	if (receivers.length === 0) return null;
+	const shown = receivers.slice(0, 2);
+	const extra = receivers.length - shown.length;
+	const names = shown.map((r) => `${r.firstName} ${r.lastName}`).join(', ');
+	return extra > 0 ? `${names} +${extra}` : names;
+});
+
+const compactMeta = $derived.by(() => {
+	const parts: string[] = [];
+	if (doc.documentDate) {
+		parts.push(
+			new Intl.DateTimeFormat('de-DE', {
+				day: 'numeric',
+				month: 'numeric',
+				year: 'numeric'
+			}).format(new Date(doc.documentDate + 'T12:00:00'))
+		);
+	}
+	if (doc.sender) {
+		const senderName = `${doc.sender.firstName} ${doc.sender.lastName}`;
+		const receiver = receiverDisplay;
+		parts.push(receiver ? `${senderName} → ${receiver}` : senderName);
+	} else if (receiverDisplay) {
+		parts.push(`→ ${receiverDisplay}`);
+	}
+	return parts.join(' · ');
+});
+</script>
+
+<div
+	class="z-20 flex shrink-0 items-center justify-between border-b border-line bg-surface px-6 py-3 shadow-sm"
+	data-topbar
+>
+	<!-- Left: back + title -->
+	<div class="flex min-w-0 items-center gap-4 overflow-hidden">
+		<a
+			href="/"
+			class="group flex shrink-0 items-center gap-2 font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
+		>
+			<div
+				class="flex h-8 w-8 items-center justify-center rounded-full bg-canvas transition-colors group-hover:bg-accent"
+			>
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-4 w-4"
+				/>
+			</div>
+			<span class="hidden sm:inline">{m.btn_back()}</span>
+		</a>
+
+		<div class="min-w-0 border-l border-line pl-4">
+			<h1
+				class="truncate font-serif text-base leading-tight text-ink"
+				title={doc.title ?? doc.originalFilename ?? ''}
+			>
+				{doc.title || doc.originalFilename}
+			</h1>
+			{#if compactMeta}
+				<p class="truncate font-sans text-xs text-ink-2" title={compactMeta}>
+					{compactMeta}
+				</p>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Right: actions -->
+	<div class="ml-4 flex shrink-0 items-center gap-2 font-sans">
+		{#if canAnnotate && isPdf}
+			<button
+				onclick={() => (annotateMode = !annotateMode)}
+				aria-label={annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
+				class="flex items-center gap-1.5 rounded px-3 py-1.5 font-sans text-xs font-medium transition {annotateMode
+					? 'bg-primary text-white'
+					: 'border border-primary text-ink hover:bg-primary hover:text-white'}"
+			>
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Note/Note-Add-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-4 w-4 {annotateMode ? 'invert' : ''}"
+				/>
+				{annotateMode ? m.doc_panel_annotate_stop() : m.doc_panel_annotate()}
+			</button>
+		{/if}
+
+		{#if canWrite}
+			<a
+				href="/documents/{doc.id}/edit"
+				class="flex items-center gap-2 rounded border border-primary bg-transparent px-3 py-1.5 text-xs font-medium text-ink transition hover:bg-primary hover:text-white"
+			>
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Edit-Content-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-4 w-4"
+				/>
+				{m.btn_edit()}
+			</a>
+		{/if}
+
+		{#if doc.filePath}
+			<a
+				href={fileUrl}
+				download={doc.originalFilename}
+				class="rounded border border-transparent bg-muted p-1.5 text-ink transition hover:bg-accent"
+				title={m.doc_download_title()}
+			>
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Download-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-5 w-5"
+				/>
+			</a>
+		{/if}
+	</div>
+</div>

frontend/src/lib/components/DocumentViewer.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import PdfViewer from './PdfViewer.svelte';
+
+type Doc = {
+	id: string;
+	filePath?: string | null;
+	contentType?: string | null;
+	fileHash?: string | null;
+};
+
+type Props = {
+	doc: Doc;
+	fileUrl: string;
+	isLoading: boolean;
+	error: string;
+	annotateMode: boolean;
+	activeAnnotationId: string | null;
+	activeAnnotationPage: number | null;
+	onAnnotationClick: (id: string) => void;
+};
+
+let {
+	doc,
+	fileUrl,
+	isLoading,
+	error,
+	annotateMode = $bindable(),
+	activeAnnotationId = $bindable(),
+	activeAnnotationPage = $bindable(),
+	onAnnotationClick
+}: Props = $props();
+</script>
+
+<div class="absolute inset-0 bg-pdf-bg">
+	{#if isLoading}
+		<div class="flex h-full flex-col items-center justify-center text-accent">
+			<svg
+				class="mb-4 h-8 w-8 animate-spin"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
+				></circle>
+				<path
+					class="opacity-75"
+					fill="currentColor"
+					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+				></path>
+			</svg>
+			<span class="font-sans text-sm tracking-wide">{m.doc_loading()}</span>
+		</div>
+	{:else if error}
+		<div class="flex h-full flex-col items-center justify-center px-4 text-center text-ink-3">
+			<p class="mb-2 font-serif">{error}</p>
+			{#if doc.filePath}
+				<a
+					href="/api/documents/{doc.id}/file"
+					target="_blank"
+					class="text-sm underline hover:text-white"
+				>
+					{m.doc_download_link()}
+				</a>
+			{/if}
+		</div>
+	{:else if !doc.filePath}
+		<div class="flex h-full flex-col items-center justify-center text-ink-3">
+			<div class="mb-6 rounded-full bg-surface/5 p-8">
+				<img
+					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
+					alt=""
+					aria-hidden="true"
+					class="h-12 w-12 opacity-50 invert"
+				/>
+			</div>
+			<p class="font-sans text-sm tracking-wide uppercase">{m.doc_no_scan()}</p>
+		</div>
+	{:else if fileUrl && doc.contentType?.startsWith('application/pdf')}
+		<PdfViewer
+			url={fileUrl}
+			documentId={doc.id}
+			bind:annotateMode={annotateMode}
+			bind:activeAnnotationId={activeAnnotationId}
+			bind:activeAnnotationPage={activeAnnotationPage}
+			onAnnotationClick={onAnnotationClick}
+			documentFileHash={doc.fileHash ?? null}
+		/>
+	{:else if fileUrl}
+		<div class="flex h-full w-full items-center justify-center overflow-auto p-8">
+			<img
+				src={fileUrl}
+				alt={m.doc_image_alt()}
+				class="max-h-full max-w-full object-contain shadow-2xl"
+			/>
+		</div>
+	{/if}
+</div>

frontend/src/lib/components/ExpandableText.svelte

@@ -18,14 +18,14 @@ $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="rounded border border-line bg-muted p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-ink"
 	>
 		{text}
 	</div>
 	{#if isClamped || expanded}
 		<button
 			onclick={() => (expanded = !expanded)}
-			class="mt-2 font-sans text-xs text-gray-400 transition hover:text-brand-navy"
+			class="mt-2 font-sans text-xs text-ink-3 transition hover:text-ink"
 		>
 			{expanded ? m.comp_expandable_show_less() : m.comp_expandable_show_more()}
 		</button>

frontend/src/lib/components/PanelDiscussion.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+import CommentThread from './CommentThread.svelte';
+
+type CommentReply = {
+	id: string;
+	authorId: string | null;
+	authorName: string;
+	content: string;
+	createdAt: string;
+	updatedAt: string;
+};
+
+type Comment = {
+	id: string;
+	authorId: string | null;
+	authorName: string;
+	content: string;
+	createdAt: string;
+	updatedAt: string;
+	replies: CommentReply[];
+};
+
+type Props = {
+	documentId: string;
+	initialComments: Comment[];
+	canComment: boolean;
+	currentUserId: string | null;
+	canAdmin: boolean;
+};
+
+let { documentId, initialComments, canComment, currentUserId, canAdmin }: Props = $props();
+</script>
+
+<div class="flex-1 overflow-y-auto p-6">
+	<CommentThread
+		documentId={documentId}
+		initialComments={initialComments}
+		canComment={canComment}
+		currentUserId={currentUserId}
+		canAdmin={canAdmin}
+	/>
+</div>

frontend/src/lib/components/PanelHistory.svelte

@@ -0,0 +1,519 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import { diffWords } from 'diff';
+
+let { documentId }: { documentId: string } = $props();
+
+type VersionSummary = {
+	id: string;
+	savedAt: string;
+	editorName: string;
+	changedFields: string[];
+};
+
+type SnapshotDoc = {
+	title?: string;
+	documentDate?: string;
+	location?: string;
+	documentLocation?: string;
+	transcription?: string;
+	summary?: string;
+	sender?: { id: string; firstName: string; lastName: string } | null;
+	receivers?: { id: string; firstName: string; lastName: string }[];
+	tags?: { id: string; name: string }[];
+};
+
+type DiffEntry =
+	| {
+			kind: 'text';
+			field: string;
+			label: string;
+			parts: { value: string; added?: boolean; removed?: boolean }[];
+	  }
+	| { kind: 'scalar'; field: string; label: string; oldVal: string; newVal: string }
+	| { kind: 'relation'; field: string; label: string; removed: string[]; added: string[] };
+
+let historyLoaded = $state(false);
+let historyLoading = $state(false);
+let versions = $state<VersionSummary[]>([]);
+
+let compareMode = $state(false);
+let compareA = $state('');
+let compareB = $state('');
+
+let selectedVersionId = $state<string | null>(null);
+let diffEntries = $state<DiffEntry[]>([]);
+let diffLoading = $state(false);
+let noDiff = $state(false);
+
+const fieldLabels: Record<string, () => string> = {
+	title: m.history_field_title,
+	documentDate: m.history_field_document_date,
+	location: m.history_field_location,
+	documentLocation: m.history_field_document_location,
+	transcription: m.history_field_transcription,
+	summary: m.history_field_summary,
+	sender: m.history_field_sender,
+	receivers: m.history_field_receivers,
+	tags: m.history_field_tags
+};
+
+const TEXT_FIELDS = ['title', 'summary', 'transcription'] as const;
+const SCALAR_FIELDS = ['documentDate', 'location', 'documentLocation'] as const;
+
+function parseSnapshot(raw: string): SnapshotDoc {
+	try {
+		return JSON.parse(raw) as SnapshotDoc;
+	} catch {
+		return {};
+	}
+}
+
+function personLabel(p: { firstName: string; lastName: string }): string {
+	return `${p.firstName} ${p.lastName}`.trim();
+}
+
+const DIFF_CONTEXT_WORDS = 4;
+
+type DiffPart = { value: string; added?: boolean; removed?: boolean };
+
+function trimContextParts(parts: DiffPart[]): DiffPart[] {
+	return parts.flatMap((part, i) => {
+		if (part.added || part.removed) return [part];
+		const tokens = part.value.split(/(\s+)/).filter(Boolean);
+		const wordCount = tokens.filter((t) => /\S/.test(t)).length;
+		if (wordCount <= DIFF_CONTEXT_WORDS * 2) return [part];
+
+		function keepFirst(n: number): string {
+			let count = 0;
+			const out: string[] = [];
+			for (const t of tokens) {
+				out.push(t);
+				if (/\S/.test(t) && ++count >= n) break;
+			}
+			return out.join('');
+		}
+		function keepLast(n: number): string {
+			let count = 0;
+			const out: string[] = [];
+			for (const t of [...tokens].reverse()) {
+				out.unshift(t);
+				if (/\S/.test(t) && ++count >= n) break;
+			}
+			return out.join('');
+		}
+
+		const isFirst = i === 0;
+		const isLast = i === parts.length - 1;
+		if (isFirst) return [{ value: '… ' + keepLast(DIFF_CONTEXT_WORDS) }];
+		if (isLast) return [{ value: keepFirst(DIFF_CONTEXT_WORDS) + ' …' }];
+		return [{ value: keepFirst(DIFF_CONTEXT_WORDS) + ' … ' + keepLast(DIFF_CONTEXT_WORDS) }];
+	});
+}
+
+function buildDiff(older: SnapshotDoc | null, newer: SnapshotDoc): DiffEntry[] {
+	const entries: DiffEntry[] = [];
+
+	for (const field of TEXT_FIELDS) {
+		const a = older?.[field] ?? '';
+		const b = newer[field] ?? '';
+		if (a === b) continue;
+		const parts = trimContextParts(diffWords(a, b));
+		entries.push({ kind: 'text', field, label: fieldLabels[field](), parts });
+	}
+
+	for (const field of SCALAR_FIELDS) {
+		const a = older?.[field] ?? '';
+		const b = newer[field] ?? '';
+		if (a === b) continue;
+		entries.push({ kind: 'scalar', field, label: fieldLabels[field](), oldVal: a, newVal: b });
+	}
+
+	const senderA = older?.sender ? personLabel(older.sender) : '';
+	const senderB = newer.sender ? personLabel(newer.sender) : '';
+	if (senderA !== senderB) {
+		entries.push({
+			kind: 'relation',
+			field: 'sender',
+			label: fieldLabels['sender'](),
+			removed: senderA ? [senderA] : [],
+			added: senderB ? [senderB] : []
+		});
+	}
+
+	const receiversA = new Set((older?.receivers ?? []).map(personLabel));
+	const receiversB = new Set((newer.receivers ?? []).map(personLabel));
+	const removedReceivers = [...receiversA].filter((r) => !receiversB.has(r));
+	const addedReceivers = [...receiversB].filter((r) => !receiversA.has(r));
+	if (removedReceivers.length > 0 || addedReceivers.length > 0) {
+		entries.push({
+			kind: 'relation',
+			field: 'receivers',
+			label: fieldLabels['receivers'](),
+			removed: removedReceivers,
+			added: addedReceivers
+		});
+	}
+
+	const tagsA = new Set((older?.tags ?? []).map((t) => t.name));
+	const tagsB = new Set((newer.tags ?? []).map((t) => t.name));
+	const removedTags = [...tagsA].filter((t) => !tagsB.has(t));
+	const addedTags = [...tagsB].filter((t) => !tagsA.has(t));
+	if (removedTags.length > 0 || addedTags.length > 0) {
+		entries.push({
+			kind: 'relation',
+			field: 'tags',
+			label: fieldLabels['tags'](),
+			removed: removedTags,
+			added: addedTags
+		});
+	}
+
+	return entries;
+}
+
+async function fetchSnapshot(versionId: string): Promise<SnapshotDoc> {
+	const res = await fetch(`/api/documents/${documentId}/versions/${versionId}`);
+	if (!res.ok) throw new Error('Failed to fetch version');
+	const v = await res.json();
+	return parseSnapshot(v.snapshot);
+}
+
+async function loadHistory() {
+	if (historyLoaded) return;
+	historyLoading = true;
+	try {
+		const res = await fetch(`/api/documents/${documentId}/versions`);
+		if (res.ok) {
+			versions = await res.json();
+		}
+		historyLoaded = true;
+	} catch {
+		// ignore
+	} finally {
+		historyLoading = false;
+	}
+}
+
+async function selectVersion(versionId: string) {
+	if (selectedVersionId === versionId) {
+		selectedVersionId = null;
+		diffEntries = [];
+		noDiff = false;
+		return;
+	}
+	selectedVersionId = versionId;
+	diffEntries = [];
+	noDiff = false;
+	diffLoading = true;
+	try {
+		const idx = versions.findIndex((v) => v.id === versionId);
+		const newerSnap = await fetchSnapshot(versionId);
+		const olderSnap = idx > 0 ? await fetchSnapshot(versions[idx - 1].id) : null;
+		const entries = buildDiff(olderSnap, newerSnap);
+		if (entries.length === 0) {
+			noDiff = true;
+		} else {
+			diffEntries = entries;
+		}
+	} catch {
+		// ignore
+	} finally {
+		diffLoading = false;
+	}
+}
+
+async function applyCompare() {
+	if (!compareA || !compareB || compareA === compareB) return;
+	selectedVersionId = null;
+	diffEntries = [];
+	noDiff = false;
+	diffLoading = true;
+	try {
+		const [snapA, snapB] = await Promise.all([fetchSnapshot(compareA), fetchSnapshot(compareB)]);
+		const entries = buildDiff(snapA, snapB);
+		if (entries.length === 0) {
+			noDiff = true;
+		} else {
+			diffEntries = entries;
+		}
+	} catch {
+		// ignore
+	} finally {
+		diffLoading = false;
+	}
+}
+
+function formatDateTime(iso: string): string {
+	try {
+		return new Intl.DateTimeFormat('de-DE', {
+			day: 'numeric',
+			month: 'short',
+			year: 'numeric',
+			hour: '2-digit',
+			minute: '2-digit'
+		}).format(new Date(iso));
+	} catch {
+		return iso;
+	}
+}
+
+function versionLabel(v: VersionSummary, index: number): string {
+	return `Version ${index + 1} — ${v.editorName} — ${formatDateTime(v.savedAt)}`;
+}
+
+// Load history when this panel mounts.
+$effect(() => {
+	loadHistory();
+});
+</script>
+
+<div class="space-y-4 p-6">
+	{#if historyLoading}
+		<p class="font-sans text-xs text-ink-3">{m.history_loading()}</p>
+	{:else if !historyLoaded}
+		<!-- initial state before effect runs — show nothing -->
+	{:else if versions.length === 0}
+		<p class="font-serif text-sm text-ink-3 italic">{m.history_empty()}</p>
+	{:else}
+		<!-- Compare mode toggle -->
+		<div class="flex justify-end">
+			<button
+				onclick={() => {
+					compareMode = !compareMode;
+					diffEntries = [];
+					noDiff = false;
+					selectedVersionId = null;
+				}}
+				class="font-sans text-xs font-medium transition {compareMode
+					? 'text-ink underline'
+					: 'text-ink-3 hover:text-ink'}"
+			>
+				{m.history_compare_mode()}
+			</button>
+		</div>
+
+		{#if compareMode}
+			<div class="space-y-2">
+				<div>
+					<label for="compare-a" class="mb-1 block font-sans text-[10px] text-ink-3 uppercase"
+						>{m.history_compare_select_a()}</label
+					>
+					<select
+						id="compare-a"
+						bind:value={compareA}
+						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:ring-1 focus:ring-accent focus:outline-none"
+					>
+						<option value="">—</option>
+						{#each versions as v, i (v.id)}
+							<option value={v.id}>{versionLabel(v, i)}</option>
+						{/each}
+					</select>
+				</div>
+				<div>
+					<label for="compare-b" class="mb-1 block font-sans text-[10px] text-ink-3 uppercase"
+						>{m.history_compare_select_b()}</label
+					>
+					<select
+						id="compare-b"
+						bind:value={compareB}
+						class="w-full rounded border border-line bg-surface px-2 py-1 font-sans text-xs text-ink focus:ring-1 focus:ring-accent focus:outline-none"
+					>
+						<option value="">—</option>
+						{#each versions as v, i (v.id)}
+							<option value={v.id}>{versionLabel(v, i)}</option>
+						{/each}
+					</select>
+				</div>
+				<button
+					onclick={applyCompare}
+					disabled={!compareA || !compareB || compareA === compareB}
+					class="w-full rounded bg-primary px-3 py-1.5 font-sans text-xs font-medium text-white transition hover:bg-primary/80 disabled:cursor-not-allowed disabled:opacity-40"
+				>
+					{m.history_compare_apply()}
+				</button>
+			</div>
+
+			<!-- Diff panel for compare mode -->
+			{#if diffLoading}
+				<p class="font-sans text-xs text-ink-3">{m.history_loading()}</p>
+			{:else if noDiff}
+				<div
+					data-testid="history-diff"
+					class="rounded-sm border border-line bg-surface p-4 font-serif text-sm text-ink-3 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-line bg-surface p-4"
+				>
+					{#each diffEntries as entry (entry.field)}
+						<div>
+							<span
+								class="mb-1.5 block font-sans text-[10px] font-bold tracking-wide text-ink-3 uppercase"
+								>{entry.label}</span
+							>
+							{#if entry.kind === 'text'}
+								<p class="font-serif text-sm leading-relaxed">
+									{#each entry.parts as part, partIdx (partIdx)}
+										{#if part.added}
+											<span class="bg-green-50 text-green-700">{part.value}</span>
+										{:else if part.removed}
+											<span class="bg-red-50 text-red-600 line-through">{part.value}</span>
+										{:else}
+											<span>{part.value}</span>
+										{/if}
+									{/each}
+								</p>
+							{:else if entry.kind === 'scalar'}
+								<div class="flex items-center gap-2 font-serif text-sm">
+									<span class="text-red-600 line-through">{entry.oldVal || '—'}</span>
+									<svg
+										class="h-3 w-3 flex-shrink-0 text-ink-3"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										aria-hidden="true"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+									<span class="text-green-700">{entry.newVal || '—'}</span>
+								</div>
+							{:else if entry.kind === 'relation'}
+								<div class="flex flex-wrap gap-1.5">
+									{#each entry.removed as item (item)}
+										<span
+											class="rounded bg-red-50 px-1.5 py-0.5 font-sans text-[11px] text-red-600 line-through"
+											>{item}</span
+										>
+									{/each}
+									{#each entry.added as item (item)}
+										<span
+											class="rounded bg-green-50 px-1.5 py-0.5 font-sans text-[11px] text-green-700"
+											>{item}</span
+										>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
+		{:else}
+			<!-- Version list with inline diff below each selected item -->
+			<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-muted {selectedVersionId ===
+							v.id
+								? 'border-l-2 border-accent pl-2'
+								: 'pl-0'}"
+						>
+							<div class="flex items-baseline justify-between gap-2">
+								<span class="font-sans text-xs font-medium text-ink">
+									Version {i + 1}
+								</span>
+								<span class="font-sans text-[10px] text-ink-3">
+									{formatDateTime(v.savedAt)}
+								</span>
+							</div>
+							<span class="font-sans text-[11px] text-ink-2">{v.editorName}</span>
+							{#if v.changedFields && v.changedFields.length > 0}
+								<div class="mt-1 flex flex-wrap gap-1">
+									{#each v.changedFields as field (field)}
+										<span
+											class="rounded bg-muted px-1.5 py-0.5 font-sans text-[10px] tracking-wide text-ink-2 uppercase"
+										>
+											{fieldLabels[field] ? fieldLabels[field]() : field}
+										</span>
+									{/each}
+								</div>
+							{/if}
+						</button>
+
+						<!-- Diff shown inline below the selected version -->
+						{#if selectedVersionId === v.id}
+							{#if diffLoading}
+								<p class="pb-3 pl-2 font-sans text-xs text-ink-3">{m.history_loading()}</p>
+							{:else if noDiff}
+								<div
+									data-testid="history-diff"
+									class="mb-2 rounded-sm border border-line bg-surface p-4 font-serif text-sm text-ink-3 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-line bg-surface p-4"
+								>
+									{#each diffEntries as entry (entry.field)}
+										<div>
+											<span
+												class="mb-1.5 block font-sans text-[10px] font-bold tracking-wide text-ink-3 uppercase"
+												>{entry.label}</span
+											>
+											{#if entry.kind === 'text'}
+												<p class="font-serif text-sm leading-relaxed">
+													{#each entry.parts as part, partIdx (partIdx)}
+														{#if part.added}
+															<span class="bg-green-50 text-green-700">{part.value}</span>
+														{:else if part.removed}
+															<span class="bg-red-50 text-red-600 line-through">{part.value}</span>
+														{:else}
+															<span>{part.value}</span>
+														{/if}
+													{/each}
+												</p>
+											{:else if entry.kind === 'scalar'}
+												<div class="flex items-center gap-2 font-serif text-sm">
+													<span class="text-red-600 line-through">{entry.oldVal || '—'}</span>
+													<svg
+														class="h-3 w-3 flex-shrink-0 text-ink-3"
+														viewBox="0 0 20 20"
+														fill="currentColor"
+														aria-hidden="true"
+													>
+														<path
+															fill-rule="evenodd"
+															d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
+															clip-rule="evenodd"
+														/>
+													</svg>
+													<span class="text-green-700">{entry.newVal || '—'}</span>
+												</div>
+											{:else if entry.kind === 'relation'}
+												<div class="flex flex-wrap gap-1.5">
+													{#each entry.removed as item (item)}
+														<span
+															class="rounded bg-red-50 px-1.5 py-0.5 font-sans text-[11px] text-red-600 line-through"
+															>{item}</span
+														>
+													{/each}
+													{#each entry.added as item (item)}
+														<span
+															class="rounded bg-green-50 px-1.5 py-0.5 font-sans text-[11px] text-green-700"
+															>{item}</span
+														>
+													{/each}
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							{/if}
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	{/if}
+</div>

frontend/src/lib/components/PanelMetadata.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+import { formatDate } from '$lib/utils/date';
+
+type Person = { id: string; firstName: string; lastName: string; alias?: string | null };
+type Tag = { id: string; name: string };
+
+type Doc = {
+	documentDate?: string | null;
+	location?: string | null;
+	documentLocation?: string | null;
+	tags?: Tag[] | null;
+	sender?: Person | null;
+	receivers?: Person[] | null;
+};
+
+let { doc }: { doc: Doc } = $props();
+</script>
+
+<div class="space-y-10 p-6">
+	<!-- DETAILS GROUP -->
+	<div>
+		<h3
+			class="mb-4 border-b border-line pb-2 font-sans text-xs font-bold tracking-widest text-ink uppercase"
+		>
+			{m.doc_section_details()}
+		</h3>
+		<div class="space-y-5">
+			<!-- Date -->
+			<div class="flex items-start">
+				<span class="mt-0.5 w-8 text-accent">
+					<img
+						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
+						alt=""
+						aria-hidden="true"
+						class="h-5 w-5"
+					/>
+				</span>
+				<div>
+					<span class="block font-serif text-lg text-ink">
+						{doc.documentDate ? formatDate(doc.documentDate) : '—'}
+					</span>
+					<span class="font-sans text-xs text-ink-2">{m.doc_label_document_date()}</span>
+				</div>
+			</div>
+
+			<!-- Creation Location -->
+			<div class="flex items-start">
+				<span class="mt-0.5 w-8 text-accent">
+					<img
+						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Location-MD.svg"
+						alt=""
+						aria-hidden="true"
+						class="h-5 w-5"
+					/>
+				</span>
+				<div>
+					<span class="block font-serif text-lg text-ink">
+						{doc.location ? doc.location : '—'}
+					</span>
+					<span class="font-sans text-xs text-ink-2">{m.doc_label_creation_location()}</span>
+				</div>
+			</div>
+
+			<!-- Physical Archive Location -->
+			{#if doc.documentLocation}
+				<div class="flex items-start">
+					<span class="mt-0.5 w-8 text-accent">
+						<img
+							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Folder-MD.svg"
+							alt=""
+							aria-hidden="true"
+							class="h-5 w-5"
+						/>
+					</span>
+					<div>
+						<span class="block font-serif text-lg text-ink">
+							{doc.documentLocation}
+						</span>
+						<span class="font-sans text-xs text-ink-2"
+							>{m.doc_label_archive_location_original()}</span
+						>
+					</div>
+				</div>
+			{/if}
+
+			<!-- Tags -->
+			{#if doc.tags && doc.tags.length > 0}
+				<div class="flex items-start">
+					<span class="mt-0.5 w-8 text-accent">
+						<img
+							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Bookmark/Bookmark-Outline-MD.svg"
+							alt=""
+							aria-hidden="true"
+							class="h-5 w-5"
+						/>
+					</span>
+					<div class="flex-1">
+						<div class="mb-1 flex flex-wrap gap-2">
+							{#each doc.tags as tag (tag.id)}
+								<a
+									href="/?tag={encodeURIComponent(tag.name)}"
+									class="inline-flex items-center rounded bg-muted px-2 py-0.5 text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-primary hover:text-white"
+									title={m.doc_tag_filter_title({ name: tag.name })}
+								>
+									{tag.name}
+								</a>
+							{/each}
+						</div>
+						<span class="font-sans text-xs text-ink-2">{m.form_label_tags()}</span>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	<!-- PERSONEN GROUP -->
+	<div>
+		<h3
+			class="mb-4 border-b border-line pb-2 font-sans text-xs font-bold tracking-widest text-ink uppercase"
+		>
+			{m.doc_section_persons()}
+		</h3>
+
+		<div class="mb-6">
+			<span class="mb-2 block font-sans text-xs text-ink-3 uppercase">{m.form_label_sender()}</span>
+			{#if doc.sender}
+				<a
+					href="/persons/{doc.sender.id}"
+					class="group block rounded border border-line bg-muted p-3 transition hover:border-accent hover:bg-accent/10"
+				>
+					<div class="flex items-center gap-3">
+						<div
+							class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-serif text-sm text-white"
+						>
+							{doc.sender.firstName[0]}{doc.sender.lastName[0]}
+						</div>
+						<div>
+							<p
+								class="font-serif text-ink decoration-brand-mint underline-offset-2 group-hover:underline"
+							>
+								{doc.sender.firstName}
+								{doc.sender.lastName}
+							</p>
+							{#if doc.sender.alias}
+								<p class="font-sans text-xs text-ink-2">{doc.sender.alias}</p>
+							{/if}
+						</div>
+					</div>
+				</a>
+			{:else}
+				<span class="font-serif text-sm text-ink-3 italic">{m.doc_sender_not_specified()}</span>
+			{/if}
+		</div>
+
+		<div>
+			<span class="mb-2 block font-sans text-xs text-ink-3 uppercase"
+				>{m.form_label_receivers()}</span
+			>
+			{#if doc.receivers && doc.receivers.length > 0}
+				<div class="space-y-2">
+					{#each doc.receivers as receiver (receiver.id)}
+						<div
+							class="group flex items-center justify-between rounded border border-line bg-surface p-3 transition hover:border-primary"
+						>
+							<a href="/persons/{receiver.id}" class="flex min-w-0 flex-1 items-center gap-3">
+								<div
+									class="flex h-6 w-6 items-center justify-center rounded-full bg-muted font-serif text-xs text-ink-2"
+								>
+									{receiver.firstName[0]}{receiver.lastName[0]}
+								</div>
+								<span class="truncate font-serif text-sm text-ink">
+									{receiver.firstName}
+									{receiver.lastName}
+								</span>
+							</a>
+
+							{#if doc.sender}
+								<a
+									href="/conversations?senderId={doc.sender.id}&receiverId={receiver.id}"
+									class="text-ink-3 transition hover:text-accent"
+									title={m.doc_conversation_title()}
+								>
+									<img
+										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Chat-MD.svg"
+										alt=""
+										aria-hidden="true"
+										class="h-5 w-5"
+									/>
+								</a>
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<span class="font-serif text-sm text-ink-3 italic">{m.doc_no_receivers()}</span>
+			{/if}
+		</div>
+	</div>
+</div>

frontend/src/lib/components/PanelTranscription.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+
+type Doc = {
+	summary?: string | null;
+	transcription?: string | null;
+};
+
+let { doc }: { doc: Doc } = $props();
+</script>
+
+<div class="flex justify-center px-6 py-8">
+	<div class="w-full max-w-prose space-y-8">
+		{#if !doc.summary && !doc.transcription}
+			<p class="font-serif text-sm text-ink-3 italic">—</p>
+		{/if}
+
+		{#if doc.summary}
+			<div>
+				<span class="mb-3 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.doc_label_summary()}
+				</span>
+				<p class="font-serif text-base leading-relaxed text-ink">{doc.summary}</p>
+			</div>
+		{/if}
+
+		{#if doc.transcription}
+			<div>
+				<span class="mb-3 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.form_label_transcription()}
+				</span>
+				<p class="font-serif text-base leading-relaxed whitespace-pre-wrap text-ink">
+					{doc.transcription}
+				</p>
+			</div>
+		{/if}
+	</div>
+</div>

frontend/src/lib/components/PdfViewer.svelte

@@ -3,24 +3,23 @@ import { onMount } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import type { PDFDocumentProxy, PDFPageProxy, RenderTask } from 'pdfjs-dist';
 import AnnotationLayer from './AnnotationLayer.svelte';
-import AnnotationCommentPanel from './AnnotationCommentPanel.svelte';
 import { m } from '$lib/paraglide/messages.js';
 
 let {
 	url,
 	documentId = '',
-	canAnnotate = false,
-	canComment,
-	currentUserId,
-	canAdmin,
+	annotateMode = $bindable(false),
+	activeAnnotationId = $bindable<string | null>(null),
+	activeAnnotationPage = $bindable<number | null>(null),
+	onAnnotationClick,
 	documentFileHash
 }: {
 	url: string;
 	documentId?: string;
-	canAnnotate?: boolean;
-	canComment?: boolean;
-	currentUserId?: string | null;
-	canAdmin?: boolean;
+	annotateMode?: boolean;
+	activeAnnotationId?: string | null;
+	activeAnnotationPage?: number | null;
+	onAnnotationClick?: (id: string) => void;
 	documentFileHash?: string | null;
 } = $props();
 
@@ -58,10 +57,9 @@ type Annotation = {
 };
 
 let annotations = $state<Annotation[]>([]);
-let annotateMode = $state(false);
 let annotateColor = $state('#ffff00');
 let commentCounts = new SvelteMap<string, number>();
-let activeAnnotationId = $state<string | null>(null);
+let showAnnotations = $state(true);
 
 const visibleAnnotations = $derived(
 	annotations.filter((a) => !a.fileHash || !documentFileHash || a.fileHash === documentFileHash)
@@ -227,6 +225,8 @@ async function handleAnnotationDraw(rect: { x: number; y: number; width: number;
 			const created: Annotation = await res.json();
 			annotations = [...annotations, created];
 			activeAnnotationId = created.id;
+			activeAnnotationPage = created.pageNumber;
+			onAnnotationClick?.(created.id);
 		}
 	} catch {
 		// ignore
@@ -247,6 +247,13 @@ async function handleAnnotationDelete(annotationId: string) {
 	}
 }
 
+function handleAnnotationClick(id: string) {
+	activeAnnotationId = id;
+	const ann = annotations.find((a) => a.id === id);
+	activeAnnotationPage = ann?.pageNumber ?? null;
+	onAnnotationClick?.(id);
+}
+
 $effect(() => {
 	if (pdfjsReady && url) {
 		loadDocument(url);
@@ -270,6 +277,10 @@ $effect(() => {
 	}
 });
 
+$effect(() => {
+	if (annotateMode) showAnnotations = true;
+});
+
 function prevPage() {
 	if (currentPage > 1) currentPage -= 1;
 }
@@ -288,25 +299,23 @@ function zoomOut() {
 </script>
 
 {#if !url}
-	<div class="flex h-full w-full items-center justify-center bg-[#2A2A2A] text-gray-400">
+	<div class="flex h-full w-full items-center justify-center bg-pdf-bg text-ink-3">
 		<p class="font-sans text-sm">Keine Datei vorhanden</p>
 	</div>
 {:else if error}
-	<div
-		class="flex h-full w-full flex-col items-center justify-center gap-3 bg-[#2A2A2A] text-gray-300"
-	>
+	<div class="flex h-full w-full flex-col items-center justify-center gap-3 bg-pdf-bg text-ink-3">
 		<p class="font-sans text-sm text-red-400">Fehler beim Laden der PDF</p>
 		<a
 			href={url}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="font-sans text-xs text-brand-mint underline hover:opacity-80"
+			class="font-sans text-xs text-accent underline hover:opacity-80"
 		>
 			Direkt öffnen
 		</a>
 	</div>
 {:else}
-	<div class="flex h-full w-full flex-col bg-[#2A2A2A]">
+	<div class="flex h-full w-full flex-col bg-pdf-bg">
 		{#if outdatedCount > 0}
 			<div
 				class="flex shrink-0 items-center gap-2 border-b border-amber-500/30 bg-amber-500/10 px-4 py-2"
@@ -330,7 +339,7 @@ function zoomOut() {
 		{/if}
 		<!-- Controls -->
 		<div
-			class="flex shrink-0 items-center justify-between gap-2 border-b border-white/10 px-4 py-2"
+			class="flex shrink-0 items-center justify-between gap-2 border-b border-pdf-ctrl px-4 py-2"
 		>
 			<!-- Page navigation -->
 			<div class="flex items-center gap-2">
@@ -338,7 +347,7 @@ function zoomOut() {
 					onclick={prevPage}
 					disabled={currentPage <= 1}
 					aria-label="Zurück"
-					class="rounded p-1 text-gray-300 transition hover:bg-white/10 disabled:opacity-40"
+					class="rounded p-1 text-ink-3 transition hover:bg-surface/10 disabled:opacity-40"
 				>
 					<svg
 						class="h-4 w-4"
@@ -352,7 +361,7 @@ function zoomOut() {
 				</button>
 
 				{#if totalPages > 0}
-					<span class="font-sans text-xs text-gray-300 tabular-nums">
+					<span class="font-sans text-xs text-ink-3 tabular-nums">
 						{currentPage} / {totalPages}
 					</span>
 				{/if}
@@ -361,7 +370,7 @@ function zoomOut() {
 					onclick={nextPage}
 					disabled={!pdfDoc || currentPage >= totalPages}
 					aria-label="Weiter"
-					class="rounded p-1 text-gray-300 transition hover:bg-white/10 disabled:opacity-40"
+					class="rounded p-1 text-ink-3 transition hover:bg-surface/10 disabled:opacity-40"
 				>
 					<svg
 						class="h-4 w-4"
@@ -380,7 +389,7 @@ function zoomOut() {
 				<button
 					onclick={zoomOut}
 					aria-label="Verkleinern"
-					class="rounded p-1 text-gray-300 transition hover:bg-white/10"
+					class="rounded p-1 text-ink-3 transition hover:bg-surface/10"
 				>
 					<svg
 						class="h-4 w-4"
@@ -398,7 +407,7 @@ function zoomOut() {
 				<button
 					onclick={zoomIn}
 					aria-label="Vergrößern"
-					class="rounded p-1 text-gray-300 transition hover:bg-white/10"
+					class="rounded p-1 text-ink-3 transition hover:bg-surface/10"
 				>
 					<svg
 						class="h-4 w-4"
@@ -415,34 +424,52 @@ function zoomOut() {
 				</button>
 			</div>
 
-			<!-- Annotate controls -->
-			{#if canAnnotate}
-				<div class="flex items-center gap-1">
-					<button
-						onclick={() => (annotateMode = !annotateMode)}
-						aria-label={annotateMode ? 'Annotieren beenden' : 'Annotieren'}
-						class="rounded px-2 py-1 font-sans text-xs text-gray-300 transition hover:bg-white/10 {annotateMode ? 'bg-white/20' : ''}"
-					>
-						{annotateMode ? 'Fertig' : 'Annotieren'}
-					</button>
-					{#if annotateMode}
-						<input
-							type="color"
-							bind:value={annotateColor}
-							aria-label="Farbe wählen"
-							class="h-6 w-6 cursor-pointer rounded border-0 bg-transparent p-0"
-							title="Farbe wählen"
-						/>
-					{/if}
-				</div>
-			{:else}
+			<!-- Color picker (shown in annotate mode) -->
+			{#if annotateMode}
+				<input
+					type="color"
+					bind:value={annotateColor}
+					aria-label="Farbe wählen"
+					class="h-6 w-6 cursor-pointer rounded border-0 bg-transparent p-0"
+					title="Farbe wählen"
+				/>
+			{/if}
+			<!-- Annotation visibility toggle (shown when annotations exist) -->
+			{#if annotations.length > 0}
 				<button
-					disabled
-					title="Sie benötigen die Berechtigung ANNOTATE_ALL zum Annotieren"
-					class="cursor-not-allowed rounded px-2 py-1 font-sans text-xs text-gray-500"
-					aria-label="Annotieren (keine Berechtigung)"
+					onclick={() => (showAnnotations = !showAnnotations)}
+					aria-label={showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
+					class="flex items-center gap-1.5 rounded px-2 py-1 font-sans text-xs transition {showAnnotations
+						? 'text-ink-3 hover:bg-surface/10'
+						: 'bg-surface/10 text-accent'}"
 				>
-					Annotieren
+					<svg
+						class="h-3.5 w-3.5 shrink-0"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="2"
+					>
+						{#if showAnnotations}
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+							/>
+						{:else}
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						{/if}
+					</svg>
+					{showAnnotations ? m.pdf_annotations_hide() : m.pdf_annotations_show()}
 				</button>
 			{/if}
 		</div>
@@ -468,34 +495,20 @@ function zoomOut() {
 							class="textLayer"
 							style="position: absolute; top: 0; left: 0; overflow: hidden; pointer-events: none; line-height: 1;"
 						></div>
-						<AnnotationLayer
-							annotations={visibleAnnotations.filter((a) => a.pageNumber === currentPage)}
-							canAnnotate={annotateMode}
-							color={annotateColor}
-							onDraw={handleAnnotationDraw}
-							onDelete={handleAnnotationDelete}
-							commentCounts={Object.fromEntries(commentCounts)}
-							onAnnotationClick={(id) => (activeAnnotationId = id)}
-						/>
+						{#if showAnnotations}
+							<AnnotationLayer
+								annotations={visibleAnnotations.filter((a) => a.pageNumber === currentPage)}
+								canAnnotate={annotateMode}
+								color={annotateColor}
+								onDraw={handleAnnotationDraw}
+								onDelete={handleAnnotationDelete}
+								commentCounts={Object.fromEntries(commentCounts)}
+								onAnnotationClick={handleAnnotationClick}
+							/>
+						{/if}
 					</div>
 				</div>
 			{/if}
 		</div>
-
-		{#key activeAnnotationId}
-			{#if activeAnnotationId}
-				<AnnotationCommentPanel
-					documentId={documentId}
-					annotationId={activeAnnotationId}
-					canComment={canComment ?? false}
-					currentUserId={currentUserId ?? null}
-					canAdmin={canAdmin ?? false}
-					onClose={() => (activeAnnotationId = null)}
-					onCountChange={(count) => {
-						if (activeAnnotationId) commentCounts.set(activeAnnotationId, count);
-					}}
-				/>
-			{/if}
-		{/key}
 	</div>
 {/if}

frontend/src/lib/components/PersonMultiSelect.svelte

@@ -80,18 +80,18 @@ function clickOutside(node: HTMLElement) {
 
 <div class="relative" use:clickOutside>
 	<div
-		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-white p-2 focus-within:border-brand-navy focus-within:ring-1 focus-within:ring-brand-navy"
+		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
 	>
 		{#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="inline-flex items-center gap-1 rounded bg-muted px-2 py-1 text-sm font-medium text-ink"
 			>
 				{person.firstName}
 				{person.lastName}
 				<button
 					type="button"
 					onclick={() => removePerson(person.id)}
-					class="ml-0.5 text-brand-navy/50 hover:text-red-500 focus:outline-none"
+					class="ml-0.5 text-ink/50 hover:text-red-500 focus:outline-none"
 					aria-label={m.comp_multiselect_remove()}
 				>
 					<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -121,14 +121,14 @@ function clickOutside(node: HTMLElement) {
 	{#if showDropdown && (results.length > 0 || loading)}
 		<div
 			style={dropdownStyle}
-			class="ring-opacity-5 z-50 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black sm:text-sm"
+			class="ring-opacity-5 z-50 max-h-60 overflow-auto rounded-md bg-surface py-1 text-base shadow-lg ring-1 ring-black sm:text-sm"
 		>
 			{#if loading}
-				<div class="p-2 text-sm text-gray-500">{m.comp_multiselect_loading()}</div>
+				<div class="p-2 text-sm text-ink-2">{m.comp_multiselect_loading()}</div>
 			{: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="cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-muted"
 						onclick={() => selectPerson(person)}
 						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
 						role="button"

frontend/src/lib/components/PersonTypeahead.svelte

@@ -111,7 +111,7 @@ function clickOutside(node: HTMLElement) {
 </script>
 
 <div class="relative" use:clickOutside>
-	<label for={name} class="block text-sm font-medium text-gray-700">{label}</label>
+	<label for={name} class="block text-sm font-medium text-ink-2">{label}</label>
 
 	<input type="hidden" name={name} bind:value={value} />
 
@@ -123,19 +123,19 @@ function clickOutside(node: HTMLElement) {
 		oninput={handleInput}
 		onfocus={handleFocus}
 		placeholder={m.comp_typeahead_placeholder()}
-		class="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-blue-500 focus:ring-blue-500"
+		class="mt-1 block w-full rounded-md border border-line p-2 shadow-sm focus:border-accent focus:ring-accent"
 	/>
 
 	{#if showDropdown && (results.length > 0 || loading)}
 		<div
-			class="ring-opacity-5 absolute top-full left-0 z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black focus:outline-none sm:text-sm"
+			class="ring-opacity-5 absolute top-full left-0 z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-surface py-1 text-base shadow-lg ring-1 ring-black focus:outline-none sm:text-sm"
 		>
 			{#if loading}
-				<div class="p-2 text-sm text-gray-500">{m.comp_typeahead_loading()}</div>
+				<div class="p-2 text-sm text-ink-2">{m.comp_typeahead_loading()}</div>
 			{:else}
 				{#each results as person (person.id)}
 					<div
-						class="relative cursor-pointer py-2 pr-9 pl-3 text-gray-900 select-none hover:bg-blue-100"
+						class="relative cursor-pointer py-2 pr-9 pl-3 text-ink select-none hover:bg-accent-bg"
 						onclick={() => selectPerson(person)}
 						onkeydown={(e) => e.key === 'Enter' && selectPerson(person)}
 						role="button"

frontend/src/lib/components/TagInput.svelte

@@ -85,19 +85,17 @@ function clickOutside(node: HTMLElement) {
 <div class="w-full" use:clickOutside>
 	<!-- Tag Container -->
 	<div
-		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-gray-300 bg-white p-2 focus-within:border-brand-navy focus-within:ring-1 focus-within:ring-brand-navy"
+		class="flex min-h-[42px] flex-wrap gap-2 rounded border border-line bg-surface p-2 focus-within:border-ink focus-within:ring-1 focus-within:ring-ink"
 	>
 		<!-- 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"
-			>
+			<span class="flex items-center gap-1 rounded bg-muted px-2 py-1 text-sm font-medium text-ink">
 				{tag}
 				<button
 					type="button"
 					onclick={() => removeTag(i)}
 					aria-label={m.comp_taginput_remove()}
-					class="text-brand-navy/50 hover:text-red-500 focus:outline-none"
+					class="text-ink/50 hover:text-red-500 focus:outline-none"
 				>
 					<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 						><path
@@ -130,16 +128,16 @@ function clickOutside(node: HTMLElement) {
 			<!-- Typeahead Dropdown -->
 			{#if showSuggestions && suggestions.length > 0}
 				<ul
-					class="absolute top-full left-0 z-50 mt-1 max-h-48 w-full overflow-y-auto rounded border border-gray-200 bg-white shadow-lg"
+					class="absolute top-full left-0 z-50 mt-1 max-h-48 w-full overflow-y-auto rounded border border-line bg-surface shadow-lg"
 				>
 					{#each suggestions as suggestion, i (i)}
 						<li
 							role="option"
 							aria-selected={i === activeIndex}
 							tabindex="0"
-							class="cursor-pointer px-3 py-2 text-sm hover:bg-brand-sand/20 {i === activeIndex
-                                ? 'bg-brand-sand/20 font-bold text-brand-navy'
-                                : 'text-gray-700'}"
+							class="cursor-pointer px-3 py-2 text-sm hover:bg-muted {i === activeIndex
+                                ? 'bg-muted font-bold text-ink'
+                                : 'text-ink-2'}"
 							onclick={() => addTag(suggestion)}
 							onkeydown={(e) => e.key === 'Enter' && addTag(suggestion)}
 						>
@@ -151,6 +149,6 @@ function clickOutside(node: HTMLElement) {
 		</div>
 	</div>
 	{#if allowCreation}
-		<p class="mt-1 text-xs text-gray-400">{m.comp_taginput_create_hint()}</p>
+		<p class="mt-1 text-xs text-ink-3">{m.comp_taginput_create_hint()}</p>
 	{/if}
 </div>

frontend/src/lib/components/ThemeToggle.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+import { onMount } from 'svelte';
+
+type Theme = 'light' | 'dark';
+
+function systemPrefersDark(): boolean {
+	return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+function resolveInitialTheme(): Theme {
+	const saved = localStorage.getItem('theme');
+	if (saved === 'light' || saved === 'dark') return saved;
+	return systemPrefersDark() ? 'dark' : 'light';
+}
+
+let theme = $state<Theme>('light');
+
+onMount(() => {
+	theme = resolveInitialTheme();
+});
+
+function toggle() {
+	theme = theme === 'dark' ? 'light' : 'dark';
+	localStorage.setItem('theme', theme);
+	document.documentElement.setAttribute('data-theme', theme);
+}
+</script>
+
+<button
+	type="button"
+	onclick={toggle}
+	aria-label={theme === 'dark' ? 'light mode' : 'dark mode'}
+	title={theme === 'dark' ? 'light mode' : 'dark mode'}
+	class="rounded p-1.5 text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+>
+	{#if theme === 'dark'}
+		<!-- Sun icon — click to go light -->
+		<svg
+			class="h-4 w-4"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			aria-hidden="true"
+		>
+			<circle cx="12" cy="12" r="4" />
+			<path
+				stroke-linecap="round"
+				d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+			/>
+		</svg>
+	{:else}
+		<!-- Moon icon — click to go dark -->
+		<svg
+			class="h-4 w-4"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			aria-hidden="true"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"
+			/>
+		</svg>
+	{/if}
+</button>

frontend/src/lib/errors.ts

@@ -9,6 +9,7 @@ export type ErrorCode =
 	| 'DOCUMENT_NO_FILE'
 	| 'FILE_NOT_FOUND'
 	| 'FILE_UPLOAD_FAILED'
+	| 'UNSUPPORTED_FILE_TYPE'
 	| 'USER_NOT_FOUND'
 	| 'EMAIL_ALREADY_IN_USE'
 	| 'WRONG_CURRENT_PASSWORD'
@@ -54,6 +55,8 @@ export function getErrorMessage(code: ErrorCode | string | undefined): string {
 			return m.error_file_not_found();
 		case 'FILE_UPLOAD_FAILED':
 			return m.error_file_upload_failed();
+		case 'UNSUPPORTED_FILE_TYPE':
+			return m.error_unsupported_file_type();
 		case 'USER_NOT_FOUND':
 			return m.error_user_not_found();
 		case 'EMAIL_ALREADY_IN_USE':

frontend/src/routes/+layout.svelte

@@ -5,6 +5,7 @@ import { page } from '$app/state';
 import { onMount } from 'svelte';
 import { m } from '$lib/paraglide/messages.js';
 import { setLocale, getLocale } from '$lib/paraglide/runtime';
+import ThemeToggle from '$lib/components/ThemeToggle.svelte';
 
 let { children, data } = $props();
 
@@ -23,6 +24,10 @@ onMount(() => {
 	hydrated = true;
 });
 
+const isAuthPage = $derived(
+	['/login', '/forgot-password', '/reset-password'].some((p) => page.url.pathname.startsWith(p))
+);
+
 let userMenuOpen = $state(false);
 
 const userInitials = $derived.by(() => {
@@ -45,9 +50,9 @@ function clickOutside(node: HTMLElement) {
 }
 </script>
 
-<div class="min-h-screen bg-white" data-hydrated={hydrated || undefined}>
-	{#if !['/login', '/forgot-password', '/reset-password'].some((p) => page.url.pathname.startsWith(p))}
-		<header class="sticky top-0 z-50 border-b border-gray-100 bg-white">
+<div class="min-h-screen bg-canvas" data-hydrated={hydrated || undefined}>
+	{#if !isAuthPage}
+		<header class="sticky top-0 z-50 border-b border-line-2 bg-surface">
 			<!-- De Gruyter Brill purple accent strip -->
 			<div class="h-1 bg-brand-purple"></div>
 
@@ -57,7 +62,7 @@ function clickOutside(node: HTMLElement) {
 					<div class="flex">
 						<div class="mr-10 flex flex-shrink-0 items-center">
 							<a href="/" class="flex items-center" aria-label="Familienarchiv">
-								<span class="font-sans text-xl font-bold tracking-widest text-brand-navy uppercase"
+								<span class="font-sans text-xl font-bold tracking-widest text-ink uppercase"
 									>Familienarchiv</span
 								>
 							</a>
@@ -68,8 +73,8 @@ function clickOutside(node: HTMLElement) {
 								href="/"
 								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'}"
+                                    ? 'rounded bg-nav-active text-ink'
+                                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 							>
 								{m.nav_documents()}
 							</a>
@@ -78,8 +83,8 @@ function clickOutside(node: HTMLElement) {
 								href="/persons"
 								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'}"
+                                    ? 'rounded bg-nav-active text-ink'
+                                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 							>
 								{m.nav_persons()}
 							</a>
@@ -88,8 +93,8 @@ function clickOutside(node: HTMLElement) {
 								href="/conversations"
 								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'}"
+                                    ? 'rounded bg-nav-active text-ink'
+                                    : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 							>
 								{m.nav_conversations()}
 							</a>
@@ -98,8 +103,8 @@ function clickOutside(node: HTMLElement) {
 									href="/admin"
 									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'}"
+                                        ? 'rounded bg-nav-active text-ink'
+                                        : 'rounded text-ink-2 hover:bg-muted hover:text-ink'}"
 								>
 									{m.nav_admin()}
 								</a>
@@ -110,21 +115,24 @@ function clickOutside(node: HTMLElement) {
 					<!-- Right Side -->
 					<div class="flex items-center gap-3">
 						<!-- Language selector -->
-						<div class="flex items-center gap-1 border-r border-gray-200 pr-3">
+						<div class="flex items-center gap-1 border-r border-line pr-3">
 							{#each locales as locale (locale)}
 								<button
 									type="button"
 									onclick={() => setLocale(localeMap[locale])}
 									class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors
                                         {activeLocale === locale
-                                            ? 'font-bold text-brand-navy'
-                                            : 'font-normal text-gray-400 hover:text-brand-navy'}"
+                                            ? 'font-bold text-ink'
+                                            : 'font-normal text-ink-3 hover:text-ink'}"
 								>
 									{locale}
 								</button>
 							{/each}
 						</div>
 
+						<!-- Theme toggle -->
+						<ThemeToggle />
+
 						<!-- User menu -->
 						<div
 							class="relative"
@@ -138,7 +146,7 @@ function clickOutside(node: HTMLElement) {
 									aria-expanded={userMenuOpen}
 									aria-haspopup="true"
 									onclick={() => (userMenuOpen = !userMenuOpen)}
-									class="flex h-8 w-8 items-center justify-center rounded-full bg-brand-navy font-sans text-xs font-bold text-white transition-opacity hover:opacity-80"
+									class="flex h-8 w-8 items-center justify-center rounded-full bg-primary font-sans text-xs font-bold text-white transition-opacity hover:opacity-80"
 								>
 									{userInitials}
 								</button>
@@ -149,7 +157,7 @@ function clickOutside(node: HTMLElement) {
 									aria-expanded={userMenuOpen}
 									aria-haspopup="true"
 									onclick={() => (userMenuOpen = !userMenuOpen)}
-									class="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
+									class="inline-flex items-center gap-1.5 px-3 py-2 font-sans text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
 								>
 									<img
 										src="/degruyter-icons/Simple/Small-16px/SVG/Action/Account-SM.svg"
@@ -162,20 +170,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="absolute top-full right-0 z-50 mt-1 min-w-[10rem] rounded-sm border border-line bg-overlay 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="block px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted hover:text-ink"
 									>
 										{m.nav_profile()}
 									</a>
-									<div class="border-t border-brand-sand">
+									<div class="border-t border-line">
 										<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="w-full px-4 py-2.5 text-left font-sans text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:bg-muted hover:text-ink"
 											>
 												{m.nav_logout()}
 											</button>
@@ -190,7 +198,7 @@ function clickOutside(node: HTMLElement) {
 		</header>
 	{/if}
 
-	<main class="py-6">
+	<main class={isAuthPage ? '' : 'py-6'}>
 		{@render children()}
 	</main>
 </div>

frontend/src/routes/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
-import { goto } from '$app/navigation';
+import { goto, invalidateAll } from '$app/navigation';
 import TagInput from '$lib/components/TagInput.svelte';
 import { slide } from 'svelte/transition';
 import { untrack } from 'svelte';
 import { SvelteURLSearchParams } from 'svelte/reactivity';
 import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/date';
+import { getErrorMessage } from '$lib/errors';
 
 let { data } = $props();
 
@@ -18,6 +19,16 @@ let senderId = $state(untrack(() => data.filters?.senderId || ''));
 let receiverId = $state(untrack(() => data.filters?.receiverId || ''));
 let tagNames = $state<string[]>(untrack(() => data.filters?.tags || []));
 
+const ACCEPTED_TYPES = ['application/pdf', 'image/jpeg', 'image/png', 'image/tiff'];
+
+let isDragging = $state(false);
+let windowDragging = $state(false);
+let dragCounter = 0;
+let isUploading = $state(false);
+let uploadProgress = $state(0);
+let uploadMessages = $state<{ text: string; isError: boolean; link?: string }[]>([]);
+let fileInput: HTMLInputElement;
+
 let searchTimer: ReturnType<typeof setTimeout>;
 
 const hasAdvancedFilters = (filters: typeof data.filters) =>
@@ -29,6 +40,101 @@ const hasAdvancedFilters = (filters: typeof data.filters) =>
 
 let showAdvanced = $state(untrack(() => hasAdvancedFilters(data.filters)));
 
+function handleDragOver(e: DragEvent) {
+	e.preventDefault();
+	isDragging = true;
+}
+
+function handleDragLeave() {
+	isDragging = false;
+}
+
+async function handleDrop(e: DragEvent) {
+	e.preventDefault();
+	isDragging = false;
+	windowDragging = false;
+	dragCounter = 0;
+	const files = Array.from(e.dataTransfer?.files ?? []);
+	await uploadFiles(files);
+}
+
+async function handleFileSelect(e: Event) {
+	const input = e.target as HTMLInputElement;
+	const files = Array.from(input.files ?? []);
+	input.value = '';
+	await uploadFiles(files);
+}
+
+async function uploadFiles(files: File[]) {
+	if (files.length === 0) return;
+
+	const messages: { text: string; isError: boolean; link?: string }[] = [];
+
+	// Client-side type validation
+	const valid: File[] = [];
+	for (const file of files) {
+		if (!ACCEPTED_TYPES.includes(file.type)) {
+			messages.push({ text: m.upload_invalid_type({ filename: file.name }), isError: true });
+		} else {
+			valid.push(file);
+		}
+	}
+
+	if (valid.length === 0) {
+		uploadMessages = messages;
+		return;
+	}
+
+	isUploading = true;
+	uploadProgress = 0;
+	try {
+		const formData = new FormData();
+		for (const file of valid) {
+			formData.append('files', file);
+		}
+
+		const { ok, body } = await new Promise<{ ok: boolean; body: string }>((resolve, reject) => {
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', '/api/documents/quick-upload');
+			xhr.upload.addEventListener('progress', (e) => {
+				if (e.lengthComputable) uploadProgress = Math.round((e.loaded / e.total) * 100);
+			});
+			xhr.addEventListener('load', () => resolve({ ok: xhr.status < 300, body: xhr.responseText }));
+			xhr.addEventListener('error', () => reject(new Error('Network error')));
+			xhr.send(formData);
+		});
+
+		if (ok) {
+			const result = JSON.parse(body);
+			if (result.created?.length > 0) {
+				messages.push({ text: m.upload_success({ count: result.created.length }), isError: false });
+			}
+			for (const doc of result.updated ?? []) {
+				messages.push({
+					text: m.upload_duplicate({ filename: doc.originalFilename }),
+					isError: false,
+					link: `/documents/${doc.id}`
+				});
+			}
+			for (const err of result.errors ?? []) {
+				messages.push({
+					text: `${err.filename}: ${getErrorMessage(err.code)}`,
+					isError: true
+				});
+			}
+			await invalidateAll();
+		} else {
+			for (const file of valid) {
+				messages.push({ text: m.upload_error({ filename: file.name }), isError: true });
+			}
+		}
+	} finally {
+		isUploading = false;
+		uploadProgress = 0;
+		uploadMessages = messages;
+	}
+}
+
 function triggerSearch() {
 	const params = new SvelteURLSearchParams();
 
@@ -62,6 +168,40 @@ $effect(() => {
 	}
 });
 
+// Expand drop zone whenever a file is dragged anywhere over the browser window
+$effect(() => {
+	if (!data.canWrite) return;
+
+	function onWindowDragEnter(e: DragEvent) {
+		if (!e.dataTransfer?.types.includes('Files')) return;
+		dragCounter++;
+		windowDragging = true;
+	}
+
+	function onWindowDragLeave() {
+		dragCounter--;
+		if (dragCounter <= 0) {
+			dragCounter = 0;
+			windowDragging = false;
+		}
+	}
+
+	function onWindowDrop() {
+		dragCounter = 0;
+		windowDragging = false;
+	}
+
+	window.addEventListener('dragenter', onWindowDragEnter);
+	window.addEventListener('dragleave', onWindowDragLeave);
+	window.addEventListener('drop', onWindowDrop);
+
+	return () => {
+		window.removeEventListener('dragenter', onWindowDragEnter);
+		window.removeEventListener('dragleave', onWindowDragLeave);
+		window.removeEventListener('drop', onWindowDrop);
+	};
+});
+
 // Sync local state with server data after navigation.
 // Guard q: skip overwrite while the user is actively typing in the search field.
 $effect(() => {
@@ -78,7 +218,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="mb-8 rounded-sm border border-line bg-surface p-6 shadow-sm">
 		<!-- ROW 1: Main Search (One Line) -->
 		<div class="flex items-center gap-4">
 			<!-- Full Text Search -->
@@ -90,7 +230,7 @@ $effect(() => {
 					onfocus={() => (qFocused = true)}
 					onblur={() => (qFocused = false)}
 					placeholder={m.docs_search_placeholder()}
-					class="block w-full border-gray-300 py-2.5 pr-10 pl-3 placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					class="block w-full border-line py-2.5 pr-10 pl-3 placeholder-ink-3 shadow-sm focus:border-ink focus:ring-ink"
 				/>
 				<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
 					<img
@@ -105,7 +245,7 @@ $effect(() => {
 			<!-- Toggle Advanced Button -->
 			<button
 				onclick={() => (showAdvanced = !showAdvanced)}
-				class="flex items-center gap-2 border border-gray-300 bg-gray-50 px-4 py-2.5 text-sm font-bold tracking-wide text-gray-600 uppercase transition hover:bg-gray-100 hover:text-brand-navy"
+				class="flex items-center gap-2 border border-line bg-muted px-4 py-2.5 text-sm font-bold tracking-wide text-ink-2 uppercase transition hover:bg-muted hover:text-ink"
 			>
 				<img
 					src="/degruyter-icons/Simple/Small-16px/SVG/Action/Chevron/Chevron-Down-SM.svg"
@@ -119,7 +259,7 @@ $effect(() => {
 			<!-- Reset Button -->
 			<a
 				href="/"
-				class="flex items-center justify-center border border-transparent px-3 py-2.5 text-gray-400 transition hover:text-red-500"
+				class="flex items-center justify-center border border-transparent px-3 py-2.5 text-ink-3 transition hover:text-red-500"
 				title={m.docs_btn_reset_title()}
 			>
 				<img
@@ -135,11 +275,11 @@ $effect(() => {
 		{#if showAdvanced}
 			<div
 				transition:slide
-				class="mt-6 grid grid-cols-1 gap-6 border-t border-gray-100 pt-6 md:grid-cols-12"
+				class="mt-6 grid grid-cols-1 gap-6 border-t border-line-2 pt-6 md:grid-cols-12"
 			>
 				<!-- Tag Filter -->
 				<div class="md:col-span-12">
-					<p class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase">
+					<p class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase">
 						{m.docs_filter_label_tags()}
 					</p>
 					<TagInput bind:tags={tagNames} allowCreation={false} />
@@ -148,7 +288,7 @@ $effect(() => {
 				<!-- Sender -->
 				<div class="md:col-span-3">
 					<div
-						class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
+						class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 					>
 						<PersonTypeahead
 							name="senderId"
@@ -163,7 +303,7 @@ $effect(() => {
 				<!-- Receiver -->
 				<div class="md:col-span-3">
 					<div
-						class="[&_input]:border-gray-300 [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
+						class="[&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 					>
 						<PersonTypeahead
 							name="receiverId"
@@ -180,7 +320,7 @@ $effect(() => {
 					<div>
 						<label
 							for="from"
-							class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
+							class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 							>{m.docs_filter_label_from()}</label
 						>
 						<input
@@ -188,13 +328,13 @@ $effect(() => {
 							id="from"
 							bind:value={from}
 							onchange={triggerSearch}
-							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
+							class="block w-full border-line py-2.5 text-sm shadow-sm"
 						/>
 					</div>
 					<div>
 						<label
 							for="to"
-							class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
+							class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 							>{m.docs_filter_label_to()}</label
 						>
 						<input
@@ -202,7 +342,7 @@ $effect(() => {
 							id="to"
 							bind:value={to}
 							onchange={triggerSearch}
-							class="block w-full border-gray-300 py-2.5 text-sm shadow-sm"
+							class="block w-full border-line py-2.5 text-sm shadow-sm"
 						/>
 					</div>
 				</div>
@@ -210,12 +350,80 @@ $effect(() => {
 		{/if}
 	</div>
 
+	{#if data.canWrite}
+		<!-- UPLOAD DROP ZONE -->
+		<div
+			role="button"
+			tabindex="0"
+			class="mb-4 flex cursor-pointer items-center justify-center gap-3 border border-dashed px-6 text-sm transition-all duration-200 {isDragging
+				? 'border-primary bg-accent-bg py-10 text-primary'
+				: windowDragging
+					? 'border-primary/60 bg-accent-bg/50 py-10 text-primary/80'
+					: 'border-ink/20 py-3 text-ink-3 hover:border-primary hover:text-primary'}"
+			ondragover={handleDragOver}
+			ondragleave={handleDragLeave}
+			ondrop={handleDrop}
+			onclick={() => fileInput.click()}
+			onkeydown={(e) => e.key === 'Enter' && fileInput.click()}
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-4 w-4 shrink-0 opacity-50"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				aria-hidden="true"
+			>
+				<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+				<polyline points="17 8 12 3 7 8" />
+				<line x1="12" y1="3" x2="12" y2="15" />
+			</svg>
+			{#if isUploading}
+				<div class="flex w-48 flex-col items-center gap-1">
+					<div class="h-1.5 w-full overflow-hidden rounded-full bg-ink/10">
+						<div
+							class="h-full rounded-full bg-primary transition-all duration-200"
+							style="width: {uploadProgress}%"
+						></div>
+					</div>
+					<span class="font-sans text-xs text-ink-3">{uploadProgress}%</span>
+				</div>
+			{:else}
+				<span class="font-sans font-medium">{m.upload_drop_hint()}</span>
+				<span class="font-sans text-xs text-ink-3">{m.upload_accepted_types()}</span>
+			{/if}
+		</div>
+
+		{#if uploadMessages.length > 0}
+			<div class="mb-4 flex flex-col gap-1">
+				{#each uploadMessages as msg, i (i)}
+					<p
+						class="font-sans text-sm {msg.isError
+							? 'text-red-600'
+							: msg.link
+								? 'text-amber-700'
+								: 'text-green-700'}"
+					>
+						{msg.text}
+						{#if msg.link}
+							<a href={msg.link} class="underline hover:no-underline">{m.upload_duplicate_link()}</a
+							>
+						{/if}
+					</p>
+				{/each}
+			</div>
+		{/if}
+	{/if}
+
 	<!-- DOCUMENT LIST HEADER -->
 	<div class="mb-2 flex justify-end">
 		{#if data.canWrite}
 			<a
 				href="/documents/new"
-				class="inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
+				class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
 			>
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
@@ -229,15 +437,15 @@ $effect(() => {
 	</div>
 
 	<!-- DOCUMENT LIST -->
-	<div class="border border-brand-sand bg-white shadow-sm">
+	<div class="border border-line bg-surface shadow-sm">
 		{#if data.error}
 			<div class="bg-red-50 p-8 text-center text-red-600">
 				{data.error}
 			</div>
 		{:else if data.documents && data.documents.length > 0}
-			<ul class="divide-y divide-gray-100">
+			<ul class="divide-y divide-line-2">
 				{#each data.documents as doc (doc.id)}
-					<li class="group transition-colors duration-200 hover:bg-brand-sand/10">
+					<li class="group transition-colors duration-200 hover:bg-muted/50">
 						<!-- LINK TO DETAIL PAGE -->
 						<a href="/documents/{doc.id}" class="block p-6">
 							<div class="flex flex-col gap-6 sm:flex-row">
@@ -246,14 +454,14 @@ $effect(() => {
 									<div class="mb-2 flex items-baseline justify-between">
 										<!-- Title: Serif & Brand Navy -->
 										<h3
-											class="font-serif text-xl font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
+											class="font-serif text-xl font-medium text-ink decoration-brand-mint decoration-2 underline-offset-4 group-hover:underline"
 										>
 											{doc.title || doc.originalFilename}
 										</h3>
 									</div>
 
 									<!-- Metadata Row -->
-									<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-gray-500">
+									<div class="mb-4 flex flex-wrap gap-6 font-sans text-sm text-ink-2">
 										<div class="flex items-center">
 											<img
 												src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Calendar/Calendar-Add-MD.svg"
@@ -280,28 +488,26 @@ $effect(() => {
 									<div class="grid grid-cols-1 gap-4 font-serif text-sm sm:grid-cols-2">
 										<div class="flex items-baseline">
 											<span
-												class="w-10 font-sans text-xs font-bold tracking-wide text-gray-400 uppercase"
+												class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
 												>{m.docs_list_from()}</span
 											>
 											{#if doc.sender}
-												<span class="text-gray-900"
-													>{doc.sender.firstName} {doc.sender.lastName}</span
-												>
+												<span class="text-ink">{doc.sender.firstName} {doc.sender.lastName}</span>
 											{:else}
-												<span class="text-gray-400 italic">{m.docs_list_unknown()}</span>
+												<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
 											{/if}
 										</div>
 										<div class="flex items-baseline">
 											<span
-												class="w-10 font-sans text-xs font-bold tracking-wide text-gray-400 uppercase"
+												class="w-10 font-sans text-xs font-bold tracking-wide text-ink-3 uppercase"
 												>{m.docs_list_to()}</span
 											>
 											{#if doc.receivers && doc.receivers.length > 0}
-												<span class="text-gray-900">
+												<span class="text-ink">
 													{doc.receivers.map((p) => p.firstName + ' ' + p.lastName).join(', ')}
 												</span>
 											{:else}
-												<span class="text-gray-400 italic">{m.docs_list_unknown()}</span>
+												<span class="text-ink-3 italic">{m.docs_list_unknown()}</span>
 											{/if}
 										</div>
 									</div>
@@ -312,7 +518,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="relative z-10 inline-flex cursor-pointer items-center rounded bg-muted px-2 py-1 text-[10px] font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-white"
 													onclick={(e) => { e.preventDefault(); e.stopPropagation(); goto(`/?tag=${encodeURIComponent(tag.name)}`); }}
 												>
 													{tag.name}
@@ -324,7 +530,7 @@ $effect(() => {
 
 								<!-- Arrow Icon -->
 								<div
-									class="hidden items-center text-gray-300 transition-colors group-hover:text-brand-mint sm:flex"
+									class="hidden items-center text-ink-3 transition-colors group-hover:text-accent sm:flex"
 								>
 									<img
 										src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Right-MD.svg"
@@ -341,9 +547,7 @@ $effect(() => {
 		{:else}
 			<!-- 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"
-				>
+				<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted">
 					<img
 						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
 						alt=""
@@ -351,17 +555,25 @@ $effect(() => {
 						class="h-6 w-6"
 					/>
 				</div>
-				<h3 class="font-serif text-lg font-medium text-brand-navy">{m.docs_empty_heading()}</h3>
-				<p class="mt-1 font-sans text-sm text-gray-500">
+				<h3 class="font-serif text-lg font-medium text-ink">{m.docs_empty_heading()}</h3>
+				<p class="mt-1 font-sans text-sm text-ink-2">
 					{m.docs_empty_text()}
 				</p>
 				<button
 					onclick={() => goto('/')}
-					class="mt-6 text-sm font-bold tracking-wide text-brand-mint uppercase transition hover:text-brand-navy"
+					class="mt-6 text-sm font-bold tracking-wide text-accent uppercase transition hover:text-ink"
 				>
 					{m.docs_empty_btn_clear()}
 				</button>
 			</div>
 		{/if}
 	</div>
+	<input
+		bind:this={fileInput}
+		type="file"
+		multiple
+		accept=".pdf,.jpg,.jpeg,.png,.tif,.tiff"
+		class="sr-only"
+		onchange={handleFileSelect}
+	/>
 </main>

frontend/src/routes/admin/+page.svelte

@@ -65,54 +65,54 @@ async function backfillFileHashes() {
 
 <div class="mx-auto max-w-7xl py-8 font-sans sm:px-6 lg:px-8">
 	<div class="mb-8 flex items-center justify-between">
-		<h1 class="font-serif text-3xl text-brand-navy">{m.admin_heading()}</h1>
+		<h1 class="font-serif text-3xl text-ink">{m.admin_heading()}</h1>
 
 		<!-- Tabs -->
-		<div class="flex rounded-lg border border-gray-200 bg-white p-1 shadow-sm">
+		<div class="flex rounded-lg border border-line bg-surface p-1 shadow-sm">
 			<button
 				class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
 				'users'
-					? 'bg-brand-navy text-white'
-					: 'text-gray-500 hover:text-brand-navy'}"
+					? 'bg-primary text-white'
+					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'users')}>{m.admin_tab_users()}</button
 			>
 			<button
 				class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
 				'groups'
-					? 'bg-brand-navy text-white'
-					: 'text-gray-500 hover:text-brand-navy'}"
+					? 'bg-primary text-white'
+					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'groups')}>{m.admin_tab_groups()}</button
 			>
 			<button
 				class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
 				'tags'
-					? 'bg-brand-navy text-white'
-					: 'text-gray-500 hover:text-brand-navy'}"
+					? 'bg-primary text-white'
+					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'tags')}>{m.admin_tab_tags()}</button
 			>
 			<button
 				class="rounded-md px-4 py-2 text-sm font-bold tracking-wide uppercase transition {activeTab ===
 				'system'
-					? 'bg-brand-navy text-white'
-					: 'text-gray-500 hover:text-brand-navy'}"
+					? 'bg-primary text-white'
+					: 'text-ink-2 hover:text-ink'}"
 				onclick={() => (activeTab = 'system')}>{m.admin_tab_system()}</button
 			>
 		</div>
 	</div>
 
 	{#if form?.message}
-		<div class="mb-6 rounded border border-brand-mint/50 bg-brand-mint/20 p-4 text-brand-navy">
+		<div class="mb-6 rounded border border-accent/50 bg-accent/20 p-4 text-ink">
 			{form.message}
 		</div>
 	{/if}
 
 	{#if activeTab === 'users'}
-		<div class="overflow-hidden rounded-lg border border-brand-sand 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>
+		<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
+			<div class="flex items-center justify-between border-b border-line-2 p-6">
+				<h2 class="text-lg font-bold text-ink-2">{m.admin_section_users()}</h2>
 				<a
 					href="/admin/users/new"
-					class="inline-flex items-center gap-1 rounded-sm bg-brand-navy px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+					class="inline-flex items-center gap-1 rounded-sm bg-primary px-4 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
 				>
 					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path
@@ -126,38 +126,37 @@ async function backfillFileHashes() {
 				</a>
 			</div>
 
-			<table class="min-w-full divide-y divide-gray-200">
-				<thead class="bg-gray-50">
+			<table class="min-w-full divide-y divide-line">
+				<thead class="bg-muted">
 					<tr>
-						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
+						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
 							>{m.admin_col_login()}</th
 						>
-						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
+						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
 							>{m.admin_col_full_name()}</th
 						>
-						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
+						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
 							>{m.admin_col_groups()}</th
 						>
-						<th
-							class="px-6 py-3 text-right text-xs font-bold tracking-wider text-gray-500 uppercase"
+						<th class="px-6 py-3 text-right text-xs font-bold tracking-wider text-ink-2 uppercase"
 							>{m.admin_col_actions()}</th
 						>
 					</tr>
 				</thead>
-				<tbody class="divide-y divide-gray-200 bg-white">
+				<tbody class="divide-y divide-line bg-surface">
 					{#each data.users as user (user.id)}
-						<tr class="group/row hover:bg-gray-50">
-							<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900">
+						<tr class="group/row hover:bg-muted">
+							<td class="px-6 py-4 text-sm font-medium whitespace-nowrap text-ink">
 								{user.username}
 							</td>
-							<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-500">
+							<td class="px-6 py-4 text-sm whitespace-nowrap text-ink-2">
 								{#if user.firstName || user.lastName}
 									{user.firstName ?? ''} {user.lastName ?? ''}
 								{:else}
-									<span class="text-gray-300 italic">–</span>
+									<span class="text-ink-3 italic">–</span>
 								{/if}
 							</td>
-							<td class="px-6 py-4 text-sm text-gray-500">
+							<td class="px-6 py-4 text-sm text-ink-2">
 								<div class="flex flex-wrap gap-1">
 									{#if user.groups && user.groups.length > 0}
 										{#each user.groups as group (group.id)}
@@ -168,7 +167,7 @@ async function backfillFileHashes() {
 											</span>
 										{/each}
 									{:else}
-										<span class="text-xs text-gray-400 italic">{m.admin_no_groups()}</span>
+										<span class="text-xs text-ink-3 italic">{m.admin_no_groups()}</span>
 									{/if}
 								</div>
 							</td>
@@ -176,7 +175,7 @@ async function backfillFileHashes() {
 								<div class="flex items-center justify-end gap-4">
 									<a
 										href="/admin/users/{user.id}"
-										class="text-sm font-bold tracking-wide text-brand-mint uppercase hover:text-brand-navy"
+										class="text-sm font-bold tracking-wide text-accent uppercase hover:text-ink"
 									>
 										{m.btn_edit()}
 									</a>
@@ -196,7 +195,7 @@ async function backfillFileHashes() {
 									>
 										<input type="hidden" name="id" value={user.id} />
 										<button
-											class="p-1 text-gray-300 transition-colors hover:text-red-600"
+											class="p-1 text-ink-3 transition-colors hover:text-red-600"
 											title={m.admin_btn_delete_user_title()}
 										>
 											<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -217,17 +216,17 @@ 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-b border-gray-100 bg-yellow-50/50 p-6">
-				<h2 class="text-lg font-bold text-gray-700">{m.admin_section_tags()}</h2>
+		<div class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
+			<div class="border-b border-line-2 bg-yellow-50/50 p-6">
+				<h2 class="text-lg font-bold text-ink-2">{m.admin_section_tags()}</h2>
 				<p class="mt-1 text-xs text-yellow-800">
 					{m.admin_tags_warning()}
 				</p>
 			</div>
 
-			<ul class="max-h-[600px] divide-y divide-gray-100 overflow-y-auto">
+			<ul class="max-h-[600px] divide-y divide-line-2 overflow-y-auto">
 				{#each data.tags as tag (tag.id)}
-					<li class="group flex items-center justify-between px-6 py-3 hover:bg-gray-50">
+					<li class="group flex items-center justify-between px-6 py-3 hover:bg-muted">
 						{#if editingTagId === tag.id}
 							<form
 								method="POST"
@@ -244,7 +243,7 @@ async function backfillFileHashes() {
 									type="text"
 									name="name"
 									bind:value={editingTagName}
-									class="flex-1 rounded border-brand-mint px-2 py-1 text-sm ring-1 ring-brand-mint"
+									class="flex-1 rounded border-accent px-2 py-1 text-sm ring-1 ring-accent"
 								/>
 								<button aria-label={m.btn_save()} class="text-green-600 hover:text-green-800"
 									><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
@@ -260,7 +259,7 @@ async function backfillFileHashes() {
 									type="button"
 									onclick={cancelEditTag}
 									aria-label={m.btn_cancel()}
-									class="text-gray-400 hover:text-gray-600"
+									class="text-ink-3 hover:text-ink-2"
 									><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 										><path
 											stroke-linecap="round"
@@ -272,7 +271,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="rounded bg-muted px-2 py-1 text-sm font-medium text-ink">
 								{tag.name}
 							</span>
 							<div
@@ -281,7 +280,7 @@ async function backfillFileHashes() {
 								<button
 									onclick={() => startEditTag(tag)}
 									aria-label={m.admin_btn_edit_tag_label()}
-									class="p-1 text-gray-400 hover:text-brand-navy"
+									class="p-1 text-ink-3 hover:text-ink"
 								>
 									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 										><path
@@ -310,7 +309,7 @@ async function backfillFileHashes() {
 									<input type="hidden" name="id" value={tag.id} />
 									<button
 										aria-label={m.admin_btn_delete_tag_label()}
-										class="p-1 text-gray-400 hover:text-red-600"
+										class="p-1 text-ink-3 hover:text-red-600"
 									>
 										<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 											><path
@@ -329,29 +328,28 @@ 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="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 class="overflow-hidden rounded-lg border border-line bg-surface shadow-sm" in:slide>
+			<div class="flex items-center justify-between border-b border-line-2 p-6">
+				<h2 class="text-lg font-bold text-ink-2">{m.admin_section_groups()}</h2>
 			</div>
 
-			<table class="min-w-full divide-y divide-gray-200">
-				<thead class="bg-gray-50">
+			<table class="min-w-full divide-y divide-line">
+				<thead class="bg-muted">
 					<tr>
-						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
+						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
 							>{m.admin_col_name()}</th
 						>
-						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-gray-500 uppercase"
+						<th class="px-6 py-3 text-left text-xs font-bold tracking-wider text-ink-2 uppercase"
 							>{m.admin_col_permissions()}</th
 						>
-						<th
-							class="px-6 py-3 text-right text-xs font-bold tracking-wider text-gray-500 uppercase"
+						<th class="px-6 py-3 text-right text-xs font-bold tracking-wider text-ink-2 uppercase"
 							>{m.admin_col_actions()}</th
 						>
 					</tr>
 				</thead>
-				<tbody class="divide-y divide-gray-200 bg-white">
+				<tbody class="divide-y divide-line bg-surface">
 					{#each data.groups as group (group.id)}
-						<tr class="group/row hover:bg-gray-50">
+						<tr class="group/row hover:bg-muted">
 							{#if editingGroupId === group.id}
 								<!-- EDIT MODE -->
 								<td colspan="3" class="px-6 py-4">
@@ -372,7 +370,7 @@ async function backfillFileHashes() {
 												type="text"
 												name="name"
 												value={group.name}
-												class="w-full rounded border-brand-mint text-sm"
+												class="w-full rounded border-accent text-sm"
 												required
 											/>
 										</div>
@@ -380,14 +378,14 @@ async function backfillFileHashes() {
 										<div class="flex h-full flex-1 flex-wrap items-center gap-4 pt-2">
 											{#each availablePermissions as perm (perm)}
 												<label
-													class="inline-flex items-center text-xs font-bold text-gray-600 uppercase"
+													class="inline-flex items-center text-xs font-bold text-ink-2 uppercase"
 												>
 													<input
 														type="checkbox"
 														name="permissions"
 														value={perm}
 														checked={group.permissions.includes(perm)}
-														class="mr-2 rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
+														class="mr-2 rounded border-line text-ink focus:ring-accent"
 													/>
 													{perm.replace('_', ' ')}
 												</label>
@@ -413,7 +411,7 @@ async function backfillFileHashes() {
 												type="button"
 												onclick={cancelEditGroup}
 												aria-label={m.btn_cancel()}
-												class="p-1 text-gray-400 hover:text-red-500"
+												class="p-1 text-ink-3 hover:text-red-500"
 											>
 												<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 													><path
@@ -429,17 +427,17 @@ async function backfillFileHashes() {
 								</td>
 							{:else}
 								<!-- VIEW MODE -->
-								<td class="px-6 py-4 text-sm font-bold whitespace-nowrap text-brand-navy">
+								<td class="px-6 py-4 text-sm font-bold whitespace-nowrap text-ink">
 									{group.name}
 								</td>
-								<td class="px-6 py-4 text-sm text-gray-500">
+								<td class="px-6 py-4 text-sm text-ink-2">
 									<div class="flex flex-wrap gap-1">
 										{#each group.permissions as perm (perm)}
 											<span
 												class="rounded-full px-2 py-0.5 text-[10px] font-bold uppercase
                                                 {perm === 'ADMIN'
 													? 'border-red-100 bg-red-50 text-red-700'
-													: 'border-gray-200 bg-gray-100 text-gray-600'}"
+													: 'border-line bg-muted text-ink-2'}"
 											>
 												{perm}
 											</span>
@@ -450,7 +448,7 @@ async function backfillFileHashes() {
 									<div class="flex items-center justify-end gap-3">
 										<button
 											onclick={() => startEditGroup(group.id)}
-											class="text-sm font-bold tracking-wide text-brand-mint uppercase hover:text-brand-navy"
+											class="text-sm font-bold tracking-wide text-accent uppercase hover:text-ink"
 										>
 											{m.btn_edit()}
 										</button>
@@ -469,7 +467,7 @@ async function backfillFileHashes() {
 										>
 											<input type="hidden" name="id" value={group.id} />
 											<button
-												class="p-1 text-gray-300 transition-colors hover:text-red-600"
+												class="p-1 text-ink-3 transition-colors hover:text-red-600"
 												title={m.btn_delete()}
 											>
 												<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -491,8 +489,8 @@ async function backfillFileHashes() {
 			</table>
 
 			<!-- CREATE GROUP FORM -->
-			<div class="border-t border-gray-200 bg-gray-50 p-6">
-				<h3 class="mb-4 text-xs font-bold tracking-wide text-gray-500 uppercase">
+			<div class="border-t border-line bg-muted p-6">
+				<h3 class="mb-4 text-xs font-bold tracking-wide text-ink-2 uppercase">
 					{m.admin_section_new_group()}
 				</h3>
 				<form
@@ -507,18 +505,18 @@ async function backfillFileHashes() {
 							name="name"
 							placeholder={m.admin_group_name_placeholder()}
 							required
-							class="w-full rounded border-gray-300 text-sm"
+							class="w-full rounded border-line text-sm"
 						/>
 					</div>
 
 					<div class="flex items-center gap-4">
 						{#each availablePermissions as perm (perm)}
-							<label class="inline-flex items-center text-xs font-bold text-gray-600 uppercase">
+							<label class="inline-flex items-center text-xs font-bold text-ink-2 uppercase">
 								<input
 									type="checkbox"
 									name="permissions"
 									value={perm}
-									class="mr-2 rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
+									class="mr-2 rounded border-line text-ink focus:ring-accent"
 								/>
 								{perm.replace('_', ' ')}
 							</label>
@@ -527,7 +525,7 @@ async function backfillFileHashes() {
 
 					<button
 						type="submit"
-						class="w-full rounded bg-brand-navy px-6 py-2 text-sm font-bold text-white uppercase hover:bg-brand-mint hover:text-brand-navy md:w-auto"
+						class="w-full rounded bg-primary px-6 py-2 text-sm font-bold text-white uppercase hover:bg-accent hover:text-ink md:w-auto"
 					>
 						{m.btn_create()}
 					</button>
@@ -535,37 +533,37 @@ async function backfillFileHashes() {
 			</div>
 		</div>
 	{:else if activeTab === 'system'}
-		<div class="rounded-sm border border-brand-sand 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>
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-1 text-lg font-bold text-ink-2">{m.admin_system_backfill_heading()}</h2>
+			<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_description()}</p>
 			<button
 				onclick={backfillVersions}
 				disabled={backfillLoading}
-				class="rounded bg-brand-navy px-6 py-2 text-sm font-bold text-white uppercase transition hover:bg-brand-mint hover:text-brand-navy disabled:cursor-not-allowed disabled:opacity-50"
+				class="rounded bg-primary px-6 py-2 text-sm font-bold text-white uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
 			>
 				{backfillLoading ? '…' : m.admin_system_backfill_btn()}
 			</button>
 			{#if backfillResult !== null}
-				<p class="mt-4 text-sm font-medium text-brand-navy">
+				<p class="mt-4 text-sm font-medium text-ink">
 					{m.admin_system_backfill_success({ count: backfillResult })}
 				</p>
 			{/if}
 		</div>
 
-		<div class="mt-4 rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-1 text-lg font-bold text-gray-700">
+		<div class="mt-4 rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-1 text-lg font-bold text-ink-2">
 				{m.admin_system_backfill_hashes_heading()}
 			</h2>
-			<p class="mb-4 text-sm text-gray-500">{m.admin_system_backfill_hashes_description()}</p>
+			<p class="mb-4 text-sm text-ink-2">{m.admin_system_backfill_hashes_description()}</p>
 			<button
 				onclick={backfillFileHashes}
 				disabled={backfillHashesLoading}
-				class="rounded bg-brand-navy px-6 py-2 text-sm font-bold text-white uppercase transition hover:bg-brand-mint hover:text-brand-navy disabled:cursor-not-allowed disabled:opacity-50"
+				class="rounded bg-primary px-6 py-2 text-sm font-bold text-white uppercase transition hover:bg-accent hover:text-ink disabled:cursor-not-allowed disabled:opacity-50"
 			>
 				{backfillHashesLoading ? '…' : m.admin_system_backfill_hashes_btn()}
 			</button>
 			{#if backfillHashesResult !== null}
-				<p class="mt-4 text-sm font-medium text-brand-navy">
+				<p class="mt-4 text-sm font-medium text-ink">
 					{m.admin_system_backfill_hashes_success({ count: backfillHashesResult })}
 				</p>
 			{/if}

frontend/src/routes/admin/users/[id]/+page.svelte

@@ -41,7 +41,7 @@ function handleBirthDateInput(e: Event) {
 <div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
 	<a
 		href="/admin"
-		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 	>
 		<svg
 			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -55,7 +55,7 @@ function handleBirthDateInput(e: Event) {
 		{m.btn_back_to_overview()}
 	</a>
 
-	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">
+	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">
 		{m.admin_user_edit_heading({ username: data.editUser.username })}
 	</h1>
 
@@ -72,8 +72,8 @@ 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">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.profile_section_personal()}
 			</h2>
 
@@ -81,7 +81,7 @@ function handleBirthDateInput(e: Event) {
 				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_first_name()}
 						</span>
@@ -89,13 +89,13 @@ 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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						/>
 					</label>
 
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_last_name()}
 						</span>
@@ -103,15 +103,13 @@ 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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						/>
 					</label>
 				</div>
 
 				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
+					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 						{m.profile_label_birth_date()}
 					</span>
 					<input
@@ -119,36 +117,32 @@ 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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 					/>
 					<input type="hidden" name="birthDate" value={birthDateIso} />
 				</label>
 
 				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
+					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 						{m.profile_label_email()}
 					</span>
 					<input
 						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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 					/>
 				</label>
 
 				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
+					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 						{m.profile_label_contact()}
 					</span>
 					<textarea
 						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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						>{data.editUser.contact ?? ''}</textarea
 					>
 				</label>
@@ -156,20 +150,20 @@ function handleBirthDateInput(e: Event) {
 		</div>
 
 		<!-- Groups card -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.admin_col_groups()}
 			</h2>
 
 			<div class="flex flex-wrap gap-3">
 				{#each data.groups as group (group.id)}
-					<label class="inline-flex items-center gap-2 text-sm text-gray-700">
+					<label class="inline-flex items-center gap-2 text-sm text-ink-2">
 						<input
 							type="checkbox"
 							name="groupIds"
 							value={group.id}
 							checked={data.editUser.groups?.some((g: { id: string }) => g.id === group.id)}
-							class="rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
+							class="rounded border-line text-ink focus:ring-accent"
 						/>
 						{group.name}
 					</label>
@@ -178,35 +172,31 @@ function handleBirthDateInput(e: Event) {
 		</div>
 
 		<!-- Password card -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.admin_label_new_password_optional()}
 			</h2>
 
 			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
 				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
+					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 						{m.profile_label_new_password()}
 					</span>
 					<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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 					/>
 				</label>
 
 				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
+					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 						{m.profile_label_new_password_confirm()}
 					</span>
 					<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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 					/>
 				</label>
 			</div>
@@ -214,17 +204,17 @@ 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="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
 		>
 			<a
 				href="/admin"
-				class="font-sans text-xs font-bold tracking-widest text-gray-500 uppercase hover:text-brand-navy"
+				class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
 			>
 				{m.btn_cancel()}
 			</a>
 			<button
 				type="submit"
-				class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+				class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
 			>
 				{m.btn_save()}
 			</button>

frontend/src/routes/admin/users/new/+page.svelte

@@ -31,7 +31,7 @@ function handleBirthDateInput(e: Event) {
 <div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
 	<a
 		href="/admin"
-		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 	>
 		<svg
 			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -45,7 +45,7 @@ function handleBirthDateInput(e: Event) {
 		{m.btn_back_to_overview()}
 	</a>
 
-	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.admin_user_new_heading()}</h1>
+	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.admin_user_new_heading()}</h1>
 
 	{#if form?.error}
 		<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
@@ -53,129 +53,115 @@ function handleBirthDateInput(e: Event) {
 		</div>
 	{/if}
 
-	<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
+	<div class="rounded-sm border border-line bg-surface 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">
+			<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.admin_section_users()}
 			</h2>
 
 			<label class="block">
-				<span
-					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 					{m.admin_col_login()}
 				</span>
 				<input
 					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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 				/>
 			</label>
 
 			<label class="block">
-				<span
-					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 					{m.admin_label_initial_password()}
 				</span>
 				<input
 					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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 				/>
 			</label>
 
 			<!-- Profile -->
-			<h2 class="pt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
+			<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.profile_section_personal()}
 			</h2>
 
 			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
 				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
+					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 						{m.profile_label_first_name()}
 					</span>
 					<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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 					/>
 				</label>
 
 				<label class="block">
-					<span
-						class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-					>
+					<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 						{m.profile_label_last_name()}
 					</span>
 					<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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 					/>
 				</label>
 			</div>
 
 			<label class="block">
-				<span
-					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 					{m.profile_label_birth_date()}
 				</span>
 				<input
 					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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 				/>
 				<input type="hidden" name="birthDate" value={birthDateIso} />
 			</label>
 
 			<label class="block">
-				<span
-					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 					{m.profile_label_email()}
 				</span>
 				<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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 				/>
 			</label>
 
 			<label class="block">
-				<span
-					class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
-				>
+				<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
 					{m.profile_label_contact()}
 				</span>
 				<textarea
 					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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 				></textarea>
 			</label>
 
 			<!-- Groups -->
-			<h2 class="pt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
+			<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.admin_col_groups()}
 			</h2>
 
 			<div class="flex flex-wrap gap-3">
 				{#each data.groups as group (group.id)}
-					<label class="inline-flex items-center gap-2 text-sm text-gray-700">
+					<label class="inline-flex items-center gap-2 text-sm text-ink-2">
 						<input
 							type="checkbox"
 							name="groupIds"
 							value={group.id}
-							class="rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
+							class="rounded border-line text-ink focus:ring-accent"
 						/>
 						{group.name}
 					</label>
@@ -184,17 +170,17 @@ 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="mt-4 flex items-center justify-between rounded-sm border border-line bg-surface px-6 py-4 shadow-sm"
 			>
 				<a
 					href="/admin"
-					class="font-sans text-xs font-bold tracking-widest text-gray-500 uppercase hover:text-brand-navy"
+					class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
 				>
 					{m.btn_cancel()}
 				</a>
 				<button
 					type="submit"
-					class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+					class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
 				>
 					{m.btn_create()}
 				</button>

frontend/src/routes/conversations/+page.svelte

@@ -67,19 +67,19 @@ const enrichedDocuments = $derived(
 
 <div class="mx-auto max-w-5xl px-4 py-10">
 	<!-- Page Header -->
-	<div class="mb-8 border-b border-brand-navy/10 pb-4">
-		<h1 class="font-serif text-3xl font-medium text-brand-navy">{m.conv_heading()}</h1>
-		<p class="mt-2 font-sans text-sm text-brand-navy/60">
+	<div class="mb-8 border-b border-ink/10 pb-4">
+		<h1 class="font-serif text-3xl font-medium text-ink">{m.conv_heading()}</h1>
+		<p class="mt-2 font-sans text-sm text-ink/60">
 			{m.conv_subtitle()}
 		</p>
 	</div>
 
 	<!-- FILTER BAR -->
-	<div class="relative z-20 mb-10 border border-brand-sand bg-white p-8 shadow-sm">
+	<div class="relative z-20 mb-10 border border-line bg-surface 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
-				class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
+				class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 			>
 				<PersonTypeahead
 					name="senderId"
@@ -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="flex w-full items-center justify-center gap-2 border border-line px-3 py-2.5 text-xs font-bold tracking-widest text-ink uppercase transition-colors hover:bg-primary hover:text-white md:w-auto {senderId &&
 					receiverId
 						? ''
 						: 'invisible'}"
@@ -123,7 +123,7 @@ const enrichedDocuments = $derived(
 
 			<!-- Receiver -->
 			<div
-				class="relative z-30 [&_input]:border-gray-300 [&_input]:py-2.5 [&_input]:focus:border-brand-navy [&_input]:focus:ring-brand-navy [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-gray-500 [&_label]:uppercase"
+				class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_input]:focus:border-ink [&_input]:focus:ring-ink [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
 			>
 				<PersonTypeahead
 					name="receiverId"
@@ -141,7 +141,7 @@ const enrichedDocuments = $derived(
 			<div>
 				<label
 					for="dateFrom"
-					class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
+					class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 					>{m.conv_label_from()}</label
 				>
 				<input
@@ -149,7 +149,7 @@ const enrichedDocuments = $derived(
 					type="date"
 					bind:value={fromDate}
 					onchange={() => applyFilters()}
-					class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
 				/>
 			</div>
 
@@ -157,7 +157,7 @@ const enrichedDocuments = $derived(
 			<div>
 				<label
 					for="dateTo"
-					class="mb-2 block text-xs font-bold tracking-widest text-gray-500 uppercase"
+					class="mb-2 block text-xs font-bold tracking-widest text-ink-2 uppercase"
 					>{m.conv_label_to()}</label
 				>
 				<input
@@ -165,7 +165,7 @@ const enrichedDocuments = $derived(
 					type="date"
 					bind:value={toDate}
 					onchange={() => applyFilters()}
-					class="block w-full border-gray-300 py-2.5 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+					class="block w-full border-line py-2.5 text-sm shadow-sm focus:border-ink focus:ring-ink"
 				/>
 			</div>
 
@@ -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="flex h-[42px] w-full items-center justify-center border border-line text-xs font-bold tracking-wide text-ink uppercase transition-colors hover:bg-primary 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="flex flex-col items-center justify-center rounded-sm border border-dashed border-line bg-surface py-24 text-center"
 		>
-			<div class="mb-4 rounded-full bg-brand-sand/30 p-4 text-brand-navy">
+			<div class="mb-4 rounded-full bg-muted p-4 text-ink">
 				<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
 					><path
 						stroke-linecap="round"
@@ -208,25 +208,25 @@ const enrichedDocuments = $derived(
 					/></svg
 				>
 			</div>
-			<p class="font-serif text-lg text-brand-navy">{m.conv_empty_heading()}</p>
-			<p class="mt-1 font-sans text-sm text-gray-500">{m.conv_empty_text()}</p>
+			<p class="font-serif text-lg text-ink">{m.conv_empty_heading()}</p>
+			<p class="mt-1 font-sans text-sm text-ink-2">{m.conv_empty_text()}</p>
 		</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="flex flex-col items-center justify-center rounded-sm border border-line bg-surface 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>
+			<p class="font-serif text-ink">{m.conv_no_results_heading()}</p>
+			<p class="mt-2 text-sm text-ink-3">{m.conv_no_results_text()}</p>
 		</div>
 	{:else}
 		<!-- Summary bar -->
 		<div class="mb-4 flex items-center justify-between">
 			{#if yearFrom !== null && yearTo !== null}
-				<p data-testid="conv-summary" class="font-sans text-sm font-medium text-brand-navy/70">
+				<p data-testid="conv-summary" class="font-sans text-sm font-medium text-ink/70">
 					{m.conv_summary({ count: data.documents.length, yearFrom, yearTo })}
 				</p>
 			{:else}
-				<p data-testid="conv-summary" class="font-sans text-sm font-medium text-brand-navy/70">
+				<p data-testid="conv-summary" class="font-sans text-sm font-medium text-ink/70">
 					{data.documents.length}
 				</p>
 			{/if}
@@ -234,7 +234,7 @@ const enrichedDocuments = $derived(
 				<a
 					data-testid="conv-new-doc-link"
 					href="/documents/new?senderId={senderId}&receiverId={receiverId}"
-					class="inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
+					class="inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
 				>
 					<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"
@@ -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="relative overflow-hidden rounded-sm border border-line bg-surface 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="absolute top-0 bottom-0 left-1/2 hidden w-px -translate-x-1/2 transform bg-muted md:block"
 			></div>
 
 			<div class="p-6 md:p-8">
@@ -257,12 +257,11 @@ 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>
-								<span
-									class="mx-4 font-sans text-xs font-bold tracking-widest text-brand-navy/40 uppercase"
+								<div class="flex-grow border-t border-line"></div>
+								<span class="mx-4 font-sans text-xs font-bold tracking-widest text-ink/40 uppercase"
 									>{year}</span
 								>
-								<div class="flex-grow border-t border-brand-sand"></div>
+								<div class="flex-grow border-t border-line"></div>
 							</div>
 						{/if}
 						{@const isRight = doc.sender?.id === senderId}
@@ -280,8 +279,8 @@ const enrichedDocuments = $derived(
 									<div
 										class="flex h-8 w-8 items-center justify-center rounded-full border font-serif text-xs shadow-sm
                                     {isRight
-											? 'border-brand-navy bg-brand-navy text-white'
-											: 'border-brand-sand bg-white text-brand-navy'}"
+											? 'border-primary bg-primary text-primary-fg'
+											: 'border-line bg-surface text-ink'}"
 									>
 										{#if doc.sender}
 											{doc.sender.firstName[0]}{doc.sender.lastName[0]}
@@ -296,15 +295,15 @@ const enrichedDocuments = $derived(
 									href="/documents/{doc.id}"
 									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'}"
+										? 'rounded-br-none border-primary bg-primary text-primary-fg'
+										: 'rounded-bl-none border-line bg-muted/50 text-ink'}"
 								>
 									<!-- Header -->
 									<div class="mb-2 flex items-start justify-between gap-4">
 										<h3
 											class="font-serif text-sm leading-snug font-medium {isRight
-												? 'text-white'
-												: 'text-brand-navy'}"
+												? 'text-primary-fg'
+												: 'text-ink'}"
 										>
 											{doc.title || doc.originalFilename}
 										</h3>
@@ -313,7 +312,7 @@ const enrichedDocuments = $derived(
 										<span
 											class="mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full
                                         {doc.status === 'UPLOADED'
-												? 'bg-brand-mint'
+												? 'bg-accent'
 												: 'bg-yellow-400'}"
 											title={doc.status}
 										>
@@ -323,8 +322,8 @@ const enrichedDocuments = $derived(
 									<!-- Metadata -->
 									<div
 										class="flex flex-wrap gap-3 font-sans text-[10px] tracking-wider uppercase opacity-80 {isRight
-											? 'text-blue-100'
-											: 'text-gray-500'}"
+											? 'text-primary-fg/70'
+											: 'text-ink-2'}"
 									>
 										<span class="flex items-center">
 											{doc.documentDate ? formatDate(doc.documentDate) : '—'}

frontend/src/routes/documents/[id]/edit/+page.server.ts

@@ -41,7 +41,7 @@ export async function load({
 }
 
 export const actions = {
-	default: async ({ request, params, fetch }) => {
+	update: async ({ request, params, fetch }) => {
 		// Raw fetch is used here because FormData multipart bodies are passed through
 		// directly from the browser without transformation.
 		const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
@@ -58,5 +58,20 @@ export const actions = {
 		}
 
 		throw redirect(303, `/documents/${params.id}`);
+	},
+
+	delete: async ({ params, fetch }) => {
+		const baseUrl = env.API_INTERNAL_URL || 'http://localhost:8080';
+
+		const res = await fetch(`${baseUrl}/api/documents/${params.id}`, {
+			method: 'DELETE'
+		});
+
+		if (!res.ok) {
+			const backendError = await parseBackendError(res);
+			return fail(res.status, { error: getErrorMessage(backendError?.code) });
+		}
+
+		throw redirect(303, '/');
 	}
 };

frontend/src/routes/documents/[id]/edit/+page.svelte

@@ -17,6 +17,7 @@ let selectedReceivers = $state(doc.receivers ?? []);
 let dateDisplay = $state(isoToGerman(doc.documentDate ?? ''));
 let dateIso = $state(doc.documentDate ?? '');
 let dateDirty = $state(false);
+let confirmDelete = $state(false);
 
 const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');
 
@@ -43,7 +44,7 @@ function handleDateInput(e: Event) {
 	<div class="mb-6">
 		<a
 			href="/documents/{doc.id}"
-			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 		>
 			<img
 				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
@@ -53,9 +54,9 @@ function handleDateInput(e: Event) {
 			/>
 			{m.btn_back_to_document()}
 		</a>
-		<h1 class="font-serif text-3xl text-brand-navy">
+		<h1 class="font-serif text-3xl text-ink">
 			{m.doc_edit_heading()} —
-			<span class="text-brand-navy/70">{doc.title || doc.originalFilename}</span>
+			<span class="text-ink/70">{doc.title || doc.originalFilename}</span>
 		</h1>
 	</div>
 
@@ -63,17 +64,23 @@ function handleDateInput(e: Event) {
 		<div class="mb-6 rounded border border-red-200 bg-red-50 p-4 text-red-700">{form.error}</div>
 	{/if}
 
-	<form method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
+	<form
+		method="POST"
+		action="?/update"
+		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">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.doc_section_who_when()}
 			</h2>
 
 			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
 				<!-- Datum -->
 				<div>
-					<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_date()}</label
 					>
 					<input
@@ -84,8 +91,8 @@ function handleDateInput(e: Event) {
 						oninput={handleDateInput}
 						placeholder={m.form_placeholder_date()}
 						maxlength="10"
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
-                               {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-brand-navy focus:ring-brand-navy'}"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm
+                               {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
 						aria-describedby={dateInvalid ? 'date-error' : undefined}
 					/>
 					<input type="hidden" name="documentDate" value={dateIso} />
@@ -96,7 +103,7 @@ function handleDateInput(e: Event) {
 
 				<!-- Ort -->
 				<div>
-					<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_location()}</label
 					>
 					<input
@@ -105,7 +112,7 @@ function handleDateInput(e: Event) {
 						name="location"
 						value={doc.location || ''}
 						placeholder={m.form_placeholder_location()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
@@ -121,22 +128,22 @@ function handleDateInput(e: Event) {
 
 				<!-- Empfänger -->
 				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
+					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
 					<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
 				</div>
 			</div>
 		</div>
 
 		<!-- ── Section 2: Beschreibung ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.doc_section_description()}
 			</h2>
 
 			<div class="space-y-5">
 				<!-- Titel -->
 				<div>
-					<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_title()} *</label
 					>
 					<input
@@ -145,13 +152,13 @@ function handleDateInput(e: Event) {
 						name="title"
 						value={doc.title || ''}
 						required
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<!-- Aufbewahrungsort -->
 				<div>
-					<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_archive_location()}</label
 					>
 					<input
@@ -160,21 +167,21 @@ function handleDateInput(e: Event) {
 						name="documentLocation"
 						value={doc.documentLocation || ''}
 						placeholder={m.form_placeholder_archive_location()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
-					<p class="mt-1 text-xs text-gray-400">{m.form_helper_archive_location()}</p>
+					<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
 				</div>
 
 				<!-- Schlagworte -->
 				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p>
+					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
 					<TagInput bind:tags={tags} />
 					<input type="hidden" name="tags" value={tags.join(',')} />
 				</div>
 
 				<!-- Inhalt -->
 				<div>
-					<label for="summary" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_content()}</label
 					>
 					<textarea
@@ -182,7 +189,7 @@ function handleDateInput(e: Event) {
 						name="summary"
 						rows="5"
 						placeholder={m.form_placeholder_content()}
-						class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 						>{doc.summary || ''}</textarea
 					>
 				</div>
@@ -190,8 +197,8 @@ function handleDateInput(e: Event) {
 		</div>
 
 		<!-- ── Section 3: Transkription ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.form_label_transcription()}
 			</h2>
 			<textarea
@@ -199,20 +206,18 @@ function handleDateInput(e: Event) {
 				name="transcription"
 				rows="12"
 				placeholder={m.form_placeholder_transcription()}
-				class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 				>{doc.transcription || ''}</textarea
 			>
 		</div>
 
 		<!-- ── Section 4: Datei ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 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"
-			>
+			<div class="mb-4 flex items-center gap-3 rounded bg-muted px-3 py-2 text-sm text-ink-2">
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
 					alt=""
@@ -221,43 +226,93 @@ function handleDateInput(e: Event) {
 				/>
 				<span
 					>{m.doc_current_file_label()}
-					<strong class="font-medium text-brand-navy">{doc.originalFilename}</strong></span
+					<strong class="font-medium text-ink">{doc.originalFilename}</strong></span
 				>
 			</div>
 
-			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
+			<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
 				{m.doc_file_replace_label()}
-				<span class="font-normal text-gray-400">({m.doc_file_replace_note()})</span>
+				<span class="font-normal text-ink-3">({m.doc_file_replace_note()})</span>
 			</label>
 			<input
 				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
+                       text-ink-2 file:mr-4 file:rounded
+                       file:border-0 file:bg-muted
                        file:px-4 file:py-2
                        file:text-sm file:font-semibold
-                       file:text-brand-navy hover:file:bg-brand-sand/60"
+                       file:text-ink hover:file:bg-muted"
 			/>
 		</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="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
 		>
-			<a
-				href="/documents/{doc.id}"
-				class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
-			>
-				{m.btn_cancel()}
-			</a>
-			<button
-				type="submit"
-				class="rounded bg-brand-navy px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
-			>
-				{m.btn_save()}
-			</button>
+			<!-- Left: delete -->
+			<div class="flex items-center gap-3">
+				{#if confirmDelete}
+					<span class="font-sans text-sm text-red-700">{m.doc_delete_confirm()}</span>
+					<button
+						type="submit"
+						form="delete-form"
+						class="rounded bg-red-600 px-4 py-1.5 text-sm font-bold text-white transition-colors hover:bg-red-700"
+					>
+						{m.btn_delete()}
+					</button>
+					<button
+						type="button"
+						onclick={() => (confirmDelete = false)}
+						class="text-sm text-ink-2 transition-colors hover:text-ink"
+					>
+						{m.btn_cancel()}
+					</button>
+				{:else}
+					<button
+						type="button"
+						onclick={() => (confirmDelete = true)}
+						class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-4 w-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							aria-hidden="true"
+						>
+							<polyline points="3 6 5 6 21 6" />
+							<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+							<path d="M10 11v6M14 11v6" />
+							<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+						</svg>
+						{m.btn_delete()}
+					</button>
+				{/if}
+			</div>
+
+			<!-- Right: cancel + save -->
+			<div class="flex items-center gap-4">
+				<a
+					href="/documents/{doc.id}"
+					class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
+				>
+					{m.btn_cancel()}
+				</a>
+				<button
+					type="submit"
+					class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
+				>
+					{m.btn_save()}
+				</button>
+			</div>
 		</div>
 	</form>
+
+	<form id="delete-form" method="POST" action="?/delete" use:enhance></form>
 </div>

frontend/src/routes/documents/new/+page.svelte

@@ -50,7 +50,7 @@ function handleDateInput(e: Event) {
 	<div class="mb-6">
 		<a
 			href="/"
-			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 		>
 			<svg
 				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -67,7 +67,7 @@ function handleDateInput(e: Event) {
 			</svg>
 			{m.btn_back_to_overview()}
 		</a>
-		<h1 class="font-serif text-3xl text-brand-navy">{m.doc_new_heading()}</h1>
+		<h1 class="font-serif text-3xl text-ink">{m.doc_new_heading()}</h1>
 	</div>
 
 	{#if form?.error}
@@ -76,15 +76,15 @@ 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">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.doc_section_who_when()}
 			</h2>
 
 			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
 				<!-- Datum -->
 				<div>
-					<label for="documentDate" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_date()}</label
 					>
 					<input
@@ -95,8 +95,8 @@ function handleDateInput(e: Event) {
 						oninput={handleDateInput}
 						placeholder={m.form_placeholder_date()}
 						maxlength="10"
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm
-                               {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-brand-navy focus:ring-brand-navy'}"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm
+                               {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
 						aria-describedby={dateInvalid ? 'date-error' : undefined}
 					/>
 					<input type="hidden" name="documentDate" value={dateIso} />
@@ -109,7 +109,7 @@ function handleDateInput(e: Event) {
 
 				<!-- Ort -->
 				<div>
-					<label for="location" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_location()}</label
 					>
 					<input
@@ -117,7 +117,7 @@ function handleDateInput(e: Event) {
 						type="text"
 						name="location"
 						placeholder={m.form_placeholder_location()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
@@ -133,22 +133,22 @@ function handleDateInput(e: Event) {
 
 				<!-- Empfänger -->
 				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_receivers()}</p>
+					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
 					<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
 				</div>
 			</div>
 		</div>
 
 		<!-- ── Section 2: Beschreibung ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.doc_section_description()}
 			</h2>
 
 			<div class="space-y-5">
 				<!-- Titel -->
 				<div>
-					<label for="title" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_title()} *</label
 					>
 					<input
@@ -156,13 +156,13 @@ function handleDateInput(e: Event) {
 						type="text"
 						name="title"
 						required
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<!-- Aufbewahrungsort -->
 				<div>
-					<label for="documentLocation" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_archive_location()}</label
 					>
 					<input
@@ -170,21 +170,21 @@ function handleDateInput(e: Event) {
 						type="text"
 						name="documentLocation"
 						placeholder={m.form_placeholder_archive_location()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
-					<p class="mt-1 text-xs text-gray-400">{m.form_helper_archive_location()}</p>
+					<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
 				</div>
 
 				<!-- Schlagworte -->
 				<div>
-					<p class="mb-1 block text-sm font-medium text-gray-700">{m.form_label_tags()}</p>
+					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
 					<TagInput bind:tags={tags} />
 					<input type="hidden" name="tags" value={tags.join(',')} />
 				</div>
 
 				<!-- Inhalt -->
 				<div>
-					<label for="summary" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_content()}</label
 					>
 					<textarea
@@ -192,15 +192,15 @@ function handleDateInput(e: Event) {
 						name="summary"
 						rows="5"
 						placeholder={m.form_placeholder_content()}
-						class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 					></textarea>
 				</div>
 			</div>
 		</div>
 
 		<!-- ── Section 3: Transkription ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.form_label_transcription()}
 			</h2>
 			<textarea
@@ -208,43 +208,43 @@ function handleDateInput(e: Event) {
 				name="transcription"
 				rows="12"
 				placeholder={m.form_placeholder_transcription()}
-				class="block w-full rounded border border-gray-300 p-2 font-serif text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
 			></textarea>
 		</div>
 
 		<!-- ── Section 4: Datei ── -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.doc_section_file()}
 			</h2>
 
-			<label for="file-upload" class="mb-1 block text-sm font-medium text-gray-700">
+			<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
 				{m.doc_file_upload_label()}
-				<span class="font-normal text-gray-400">({m.doc_file_upload_note()})</span>
+				<span class="font-normal text-ink-3">({m.doc_file_upload_note()})</span>
 			</label>
 			<input
 				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
+                       text-ink-2 file:mr-4 file:rounded
+                       file:border-0 file:bg-muted
                        file:px-4 file:py-2
                        file:text-sm file:font-semibold
-                       file:text-brand-navy hover:file:bg-brand-sand/60"
+                       file:text-ink hover:file:bg-muted"
 			/>
 		</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="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface 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">
+			<a href="/" class="text-sm font-medium text-ink-2 transition-colors hover:text-ink">
 				{m.btn_cancel()}
 			</a>
 			<button
 				type="submit"
-				class="rounded bg-brand-navy px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
+				class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
 			>
 				{m.btn_save()}
 			</button>

frontend/src/routes/forgot-password/+page.svelte

@@ -4,7 +4,7 @@ import { m } from '$lib/paraglide/messages.js';
 let { form }: { form?: { error?: string; success?: boolean } } = $props();
 </script>
 
-<div class="relative flex min-h-screen flex-col bg-white">
+<div class="relative flex min-h-screen flex-col bg-surface">
 	<!-- Accent strip -->
 	<div class="h-1 bg-brand-purple"></div>
 
@@ -13,15 +13,15 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 			<!-- Logo -->
 			<div class="mb-10 text-center">
 				<a href="/" class="inline-flex items-center" aria-label="Familienarchiv">
-					<span class="font-sans text-2xl font-bold tracking-widest text-brand-navy uppercase"
+					<span class="font-sans text-2xl font-bold tracking-widest text-ink uppercase"
 						>Familienarchiv</span
 					>
 				</a>
 			</div>
 
 			<!-- Card -->
-			<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
-				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
+			<div class="rounded-sm border border-line bg-surface p-8 shadow-sm">
+				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-ink uppercase">
 					{m.forgot_password_heading()}
 				</h1>
 
@@ -30,9 +30,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 						<p class="font-sans text-xs text-green-700">{m.forgot_password_success()}</p>
 					</div>
 
-					<a
-						href="/login"
-						class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+					<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 						>{m.forgot_password_back_to_login()}</a
 					>
 				{:else}
@@ -40,7 +38,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 						<div>
 							<label
 								for="email"
-								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
+								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
 								>{m.forgot_password_email_label()}</label
 							>
 							<input
@@ -49,7 +47,7 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 								id="email"
 								required
 								autocomplete="email"
-								class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 							/>
 						</div>
 
@@ -59,15 +57,13 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 
 						<button
 							type="submit"
-							class="mt-2 w-full bg-brand-navy py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+							class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/90"
 						>
 							{m.forgot_password_submit()}
 						</button>
 
 						<div class="mt-4 text-center">
-							<a
-								href="/login"
-								class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+							<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 								>{m.forgot_password_back_to_login()}</a
 							>
 						</div>
@@ -79,6 +75,6 @@ let { form }: { form?: { error?: string; success?: boolean } } = $props();
 
 	<!-- Footer -->
 	<div class="py-4 text-center">
-		<p class="font-sans text-xs tracking-widest text-gray-300 uppercase">Familienarchiv</p>
+		<p class="font-sans text-xs tracking-widest text-ink-3 uppercase">Familienarchiv</p>
 	</div>
 </div>

frontend/src/routes/layout.css

@@ -1,34 +1,176 @@
-/* 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. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */
+/*
+   In dark mode, invert all brand icons so they read as white on dark surfaces.
+   Exclude .invert icons (already inverted for placement on dark backgrounds)
+   so they don't get double-inverted back to black.
+*/
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) img[src*='degruyter-icons']:not(.invert) {
+		filter: invert(1);
+	}
+}
+
+:root[data-theme='dark'] img[src*='degruyter-icons']:not(.invert) {
+	filter: invert(1);
+}
+
+/* ─── 7. 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);
 	}
 
@@ -41,4 +183,12 @@
 		font-family: var(--font-sans);
 		font-weight: 600;
 	}
+
+	/* Form controls — always use surface bg and ink text so they theme correctly */
+	input,
+	textarea,
+	select {
+		background-color: var(--c-surface);
+		color: var(--c-ink);
+	}
 }

frontend/src/routes/login/+page.svelte

@@ -9,7 +9,7 @@ const localeMap = { DE: 'de', EN: 'en', ES: 'es' } as const;
 const activeLocale = $derived(getLocale().toUpperCase());
 </script>
 
-<div class="relative flex min-h-screen flex-col bg-white">
+<div class="relative flex min-h-screen flex-col bg-canvas">
 	<!-- DGB purple accent strip -->
 	<div class="h-1 bg-brand-purple"></div>
 
@@ -21,8 +21,8 @@ const activeLocale = $derived(getLocale().toUpperCase());
 				onclick={() => setLocale(localeMap[locale])}
 				class="px-1.5 py-1 font-sans text-xs tracking-widest transition-colors
                     {activeLocale === locale
-                        ? 'font-bold text-brand-navy'
-                        : 'font-normal text-gray-400 hover:text-brand-navy'}"
+                        ? 'font-bold text-ink'
+                        : 'font-normal text-ink-3 hover:text-ink'}"
 			>
 				{locale}
 			</button>
@@ -34,15 +34,15 @@ const activeLocale = $derived(getLocale().toUpperCase());
 			<!-- Logo -->
 			<div class="mb-10 text-center">
 				<a href="/" class="inline-flex items-center" aria-label="Familienarchiv">
-					<span class="font-sans text-2xl font-bold tracking-widest text-brand-navy uppercase"
+					<span class="font-sans text-2xl font-bold tracking-widest text-ink uppercase"
 						>Familienarchiv</span
 					>
 				</a>
 			</div>
 
 			<!-- Card -->
-			<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
-				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
+			<div class="rounded-sm border border-line bg-surface p-8 shadow-sm">
+				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-ink uppercase">
 					{m.login_heading()}
 				</h1>
 
@@ -50,7 +50,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 					<div>
 						<label
 							for="username"
-							class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
+							class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
 							>{m.login_label_username()}</label
 						>
 						<input
@@ -59,14 +59,14 @@ const activeLocale = $derived(getLocale().toUpperCase());
 							id="username"
 							required
 							autocomplete="username"
-							class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+							class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 						/>
 					</div>
 
 					<div>
 						<label
 							for="password"
-							class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
+							class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
 							>{m.login_label_password()}</label
 						>
 						<input
@@ -75,7 +75,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 							id="password"
 							required
 							autocomplete="current-password"
-							class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+							class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 						/>
 					</div>
 
@@ -85,7 +85,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 
 					<button
 						type="submit"
-						class="mt-2 w-full bg-brand-navy py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+						class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/90"
 					>
 						{m.login_btn_submit()}
 					</button>
@@ -93,7 +93,7 @@ const activeLocale = $derived(getLocale().toUpperCase());
 					<div class="mt-4 text-center">
 						<a
 							href="/forgot-password"
-							class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+							class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 							>{m.login_forgot_password()}</a
 						>
 					</div>
@@ -104,6 +104,6 @@ const activeLocale = $derived(getLocale().toUpperCase());
 
 	<!-- Footer -->
 	<div class="py-4 text-center">
-		<p class="font-sans text-xs tracking-widest text-gray-300 uppercase">Familienarchiv</p>
+		<p class="font-sans text-xs tracking-widest text-ink-3 uppercase">Familienarchiv</p>
 	</div>
 </div>

frontend/src/routes/page.svelte.spec.ts

@@ -5,7 +5,7 @@ import Page from './+page.svelte';
 
 const tick = () => new Promise((r) => setTimeout(r, 0));
 
-vi.mock('$app/navigation', () => ({ goto: vi.fn() }));
+vi.mock('$app/navigation', () => ({ goto: vi.fn(), invalidateAll: vi.fn() }));
 
 // Silence fetch calls from PersonTypeahead when advanced filters are open
 vi.stubGlobal(

frontend/src/routes/persons/+page.svelte

@@ -26,17 +26,17 @@ function handleSearch() {
 <div class="mx-auto max-w-7xl py-12 sm:px-6 lg:px-8">
 	<!-- Header Area -->
 	<div
-		class="mb-10 flex flex-col justify-between gap-6 border-b border-brand-navy/10 pb-6 md:flex-row md:items-end"
+		class="mb-10 flex flex-col justify-between gap-6 border-b border-ink/10 pb-6 md:flex-row md:items-end"
 	>
 		<div>
-			<h1 class="font-serif text-3xl font-medium text-brand-navy">{m.persons_heading()}</h1>
-			<p class="mt-2 max-w-xl font-sans text-sm text-brand-navy/60">
+			<h1 class="font-serif text-3xl font-medium text-ink">{m.persons_heading()}</h1>
+			<p class="mt-2 max-w-xl font-sans text-sm text-ink/60">
 				{m.persons_subtitle()}
 			</p>
 			{#if data.canWrite}
 				<a
 					href="/persons/new"
-					class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-brand-navy/60 transition-colors hover:text-brand-navy"
+					class="mt-3 inline-flex items-center gap-1 text-sm font-medium text-ink/60 transition-colors hover:text-ink"
 				>
 					<img
 						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Add/Add-General-MD.svg"
@@ -61,10 +61,10 @@ function handleSearch() {
 					oninput={handleSearch}
 					onfocus={() => (qFocused = true)}
 					onblur={() => (qFocused = false)}
-					class="block w-full rounded-sm border border-gray-300 bg-white py-2.5 pr-10 pl-4 font-sans text-sm text-brand-navy placeholder-gray-400 shadow-sm focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+					class="block w-full rounded-sm border border-line bg-surface py-2.5 pr-10 pl-4 font-sans text-sm text-ink placeholder-ink-3 shadow-sm focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 				/>
 				<div
-					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400"
+					class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-ink-3"
 				>
 					<img
 						src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Mag-Glass-MD.svg"
@@ -79,11 +79,9 @@ 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="flex flex-col items-center justify-center rounded-lg border border-dashed border-line bg-surface 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"
-			>
+			<div class="mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-muted text-ink">
 				<img
 					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Account-MD.svg"
 					alt=""
@@ -91,25 +89,25 @@ function handleSearch() {
 					class="h-6 w-6"
 				/>
 			</div>
-			<p class="font-serif text-lg text-brand-navy">{m.persons_empty_heading()}</p>
-			<p class="mt-1 font-sans text-sm text-gray-500">{m.persons_empty_text()}</p>
+			<p class="font-serif text-lg text-ink">{m.persons_empty_heading()}</p>
+			<p class="mt-1 font-sans text-sm text-ink-2">{m.persons_empty_text()}</p>
 		</div>
 	{:else}
 		<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
 			{#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="relative flex h-full items-center gap-4 overflow-hidden rounded border border-line bg-surface p-6 shadow-sm transition-all duration-200 hover:border-primary hover:shadow-md"
 					>
 						<!-- Decorative Accent on Hover -->
 						<div
-							class="absolute top-0 bottom-0 left-0 w-1 bg-brand-navy opacity-0 transition-opacity group-hover:opacity-100"
+							class="absolute top-0 bottom-0 left-0 w-1 bg-primary opacity-0 transition-opacity group-hover:opacity-100"
 						></div>
 
 						<!-- Avatar -->
 						<div class="flex-shrink-0">
 							<div
-								class="flex h-12 w-12 items-center justify-center rounded-full bg-brand-navy font-serif text-lg text-white transition-colors group-hover:bg-brand-mint group-hover:text-brand-navy"
+								class="flex h-12 w-12 items-center justify-center rounded-full bg-primary font-serif text-lg text-white transition-colors group-hover:bg-accent group-hover:text-ink"
 							>
 								{person.firstName[0]}{person.lastName[0]}
 							</div>
@@ -118,13 +116,13 @@ function handleSearch() {
 						<!-- Info -->
 						<div class="min-w-0 flex-1">
 							<p
-								class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
+								class="truncate font-serif text-base font-medium text-ink decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
 							>
 								{person.firstName}
 								{person.lastName}
 							</p>
 							{#if person.alias}
-								<p class="mt-0.5 truncate font-sans text-xs text-gray-500">"{person.alias}"</p>
+								<p class="mt-0.5 truncate font-sans text-xs text-ink-2">"{person.alias}"</p>
 							{/if}
 						</div>
 					</div>

frontend/src/routes/persons/[id]/+page.svelte

@@ -98,7 +98,7 @@ $effect(() => {
 	<div class="mb-6">
 		<a
 			href="/persons"
-			class="group inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+			class="group inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 		>
 			<img
 				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
@@ -111,15 +111,15 @@ $effect(() => {
 	</div>
 
 	<!-- Header / Metadata Card -->
-	<div class="mb-10 overflow-hidden rounded-sm border border-brand-sand bg-white shadow-sm">
-		<div class="h-2 w-full bg-brand-navy"></div>
+	<div class="mb-10 overflow-hidden rounded-sm border border-line bg-surface shadow-sm">
+		<div class="h-2 w-full bg-primary"></div>
 
 		<div class="p-8 md:p-10">
 			{#if editMode && data.canWrite}
 				<!-- Edit Form -->
 				<form method="POST" action="?/update" use:enhance>
 					<div class="flex flex-col gap-6">
-						<h2 class="border-b border-gray-100 pb-3 font-serif text-xl text-brand-navy">
+						<h2 class="border-b border-line-2 pb-3 font-serif text-xl text-ink">
 							{m.person_edit_heading()}
 						</h2>
 
@@ -133,7 +133,7 @@ $effect(() => {
 							<div>
 								<label
 									for="firstName"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.form_label_first_name()} *</label
 								>
 								<input
@@ -142,13 +142,13 @@ $effect(() => {
 									type="text"
 									required
 									value={person.firstName}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div>
 								<label
 									for="lastName"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.form_label_last_name()} *</label
 								>
 								<input
@@ -157,13 +157,13 @@ $effect(() => {
 									type="text"
 									required
 									value={person.lastName}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div class="md:col-span-2">
 								<label
 									for="alias"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.form_label_alias()}</label
 								>
 								<input
@@ -171,13 +171,13 @@ $effect(() => {
 									name="alias"
 									type="text"
 									value={person.alias ?? ''}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div>
 								<label
 									for="birthYear"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.person_label_birth_year()}</label
 								>
 								<input
@@ -188,13 +188,13 @@ $effect(() => {
 									max="2100"
 									placeholder={m.person_placeholder_year()}
 									value={person.birthYear ?? ''}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div>
 								<label
 									for="deathYear"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.person_label_death_year()}</label
 								>
 								<input
@@ -205,13 +205,13 @@ $effect(() => {
 									max="2100"
 									placeholder={m.person_placeholder_year()}
 									value={person.deathYear ?? ''}
-									class="block w-full rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 								/>
 							</div>
 							<div class="md:col-span-2">
 								<label
 									for="notes"
-									class="mb-1 block text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.person_label_notes()}</label
 								>
 								<textarea
@@ -219,7 +219,7 @@ $effect(() => {
 									name="notes"
 									rows="4"
 									placeholder={m.person_placeholder_notes()}
-									class="block w-full resize-y rounded border border-gray-300 px-3 py-2 font-serif text-brand-navy focus:border-brand-navy focus:outline-none"
+									class="block w-full resize-y rounded border border-line px-3 py-2 font-serif text-ink focus:border-ink focus:outline-none"
 									>{person.notes ?? ''}</textarea
 								>
 							</div>
@@ -228,14 +228,14 @@ $effect(() => {
 						<div class="flex gap-3">
 							<button
 								type="submit"
-								class="rounded bg-brand-navy px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
+								class="rounded bg-primary px-5 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
 							>
 								{m.btn_save()}
 							</button>
 							<button
 								type="button"
 								onclick={() => (editMode = false)}
-								class="rounded border border-gray-300 px-5 py-2 text-sm font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
+								class="rounded border border-line px-5 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
 							>
 								{m.btn_cancel()}
 							</button>
@@ -247,15 +247,15 @@ $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="flex h-24 w-24 items-center justify-center rounded-full border border-line bg-muted text-ink"
 						>
 							<span class="font-serif text-3xl">{person.firstName[0]}{person.lastName[0]}</span>
 						</div>
 					</div>
 
 					<div class="w-full flex-1">
-						<div class="mb-8 flex items-start justify-between border-b border-gray-100 pb-4">
-							<h1 class="font-serif text-4xl text-brand-navy">
+						<div class="mb-8 flex items-start justify-between border-b border-line-2 pb-4">
+							<h1 class="font-serif text-4xl text-ink">
 								{person.firstName}
 								{person.lastName}
 							</h1>
@@ -263,7 +263,7 @@ $effect(() => {
 								{#if data.canWrite}
 									<button
 										onclick={() => (editMode = true)}
-										class="inline-flex items-center gap-1.5 rounded border border-gray-300 px-3 py-1.5 text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:border-brand-navy hover:text-brand-navy"
+										class="inline-flex items-center gap-1.5 rounded border border-line px-3 py-1.5 text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:border-primary hover:text-ink"
 									>
 										<img
 											src="/degruyter-icons/Simple/Small-16px/SVG/Action/Edit-Content-SM.svg"
@@ -280,10 +280,10 @@ $effect(() => {
 						<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
 							<div>
 								<span
-									class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+									class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>{m.person_label_full_name()}</span
 								>
-								<span class="block font-serif text-lg text-brand-navy"
+								<span class="block font-serif text-lg text-ink"
 									>{person.firstName} {person.lastName}</span
 								>
 							</div>
@@ -291,23 +291,21 @@ $effect(() => {
 							{#if person.alias}
 								<div>
 									<span
-										class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+										class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 										>{m.form_label_alias()}</span
 									>
-									<span class="block font-serif text-lg text-brand-navy italic"
-										>"{person.alias}"</span
-									>
+									<span class="block font-serif text-lg text-ink italic">"{person.alias}"</span>
 								</div>
 							{/if}
 
 							{#if person.birthYear || person.deathYear}
 								<div>
 									<span
-										class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+										class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 									>
 										{#if person.birthYear && person.deathYear}{m.person_label_birth_year()} / {m.person_label_death_year()}{:else if person.birthYear}{m.person_label_birth_year()}{:else}{m.person_label_death_year()}{/if}
 									</span>
-									<span class="block font-serif text-lg text-brand-navy">
+									<span class="block font-serif text-lg text-ink">
 										{#if person.birthYear}* {person.birthYear}{/if}{#if person.birthYear && person.deathYear}
 											&nbsp;{/if}{#if person.deathYear}† {person.deathYear}{/if}
 									</span>
@@ -317,10 +315,10 @@ $effect(() => {
 							{#if person.notes}
 								<div class="md:col-span-2">
 									<span
-										class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+										class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 										>{m.person_label_notes()}</span
 									>
-									<p class="font-serif text-base whitespace-pre-wrap text-brand-navy">
+									<p class="font-serif text-base whitespace-pre-wrap text-ink">
 										{person.notes}
 									</p>
 								</div>
@@ -335,10 +333,10 @@ $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="mb-10 overflow-hidden rounded-sm border border-line bg-surface 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">
+					<h2 class="mb-1 font-serif text-lg text-ink">{m.person_merge_heading()}</h2>
+					<p class="mb-5 font-sans text-sm text-ink-2">
 						{m.person_merge_description()}
 					</p>
 
@@ -381,7 +379,7 @@ $effect(() => {
 									<button
 										type="button"
 										onclick={() => (showMergeConfirm = false)}
-										class="rounded border border-gray-300 px-4 py-2 text-sm font-bold tracking-widest text-gray-500 uppercase transition-colors hover:bg-gray-50"
+										class="rounded border border-line px-4 py-2 text-sm font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted"
 									>
 										{m.btn_cancel()}
 									</button>
@@ -406,17 +404,17 @@ $effect(() => {
 	<!-- Co-Correspondents Section -->
 	{#if coCorrespondents.length > 0}
 		<div class="mb-6">
-			<h3 class="mb-3 text-xs font-bold tracking-widest text-gray-400 uppercase">
+			<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.person_co_correspondents_heading()}
 			</h3>
 			<div class="flex flex-wrap gap-2">
 				{#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="inline-flex items-center gap-1.5 rounded-full border border-line px-3 py-1 font-serif text-sm text-ink transition-colors hover:border-primary"
 					>
 						{c.name}
-						<span class="font-sans text-xs text-gray-400">({c.count})</span>
+						<span class="font-sans text-xs text-ink-3">({c.count})</span>
 					</a>
 				{/each}
 			</div>
@@ -425,18 +423,18 @@ $effect(() => {
 
 	<!-- Sent Documents Section -->
 	<div class="mb-10">
-		<div class="mb-6 flex items-center gap-3 border-b border-brand-navy/10 pb-2">
-			<h2 class="font-serif text-xl text-brand-navy">{m.person_docs_heading()}</h2>
-			<span class="rounded-full bg-brand-navy px-2 py-1 text-xs font-bold text-white">
+		<div class="mb-6 flex items-center gap-3 border-b border-ink/10 pb-2">
+			<h2 class="font-serif text-xl text-ink">{m.person_docs_heading()}</h2>
+			<span class="rounded-full bg-primary px-2 py-1 text-xs font-bold text-white">
 				{sentDocuments.length}
 			</span>
 			{#if sentYearRange}
-				<span class="font-sans text-xs text-gray-400">{sentYearRange}</span>
+				<span class="font-sans text-xs text-ink-3">{sentYearRange}</span>
 			{/if}
 			{#if sentDocuments.length > 1}
 				<button
 					onclick={() => (sortDirSent = sortDirSent === 'DESC' ? 'ASC' : 'DESC')}
-					class="ml-auto text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
+					class="ml-auto text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
 				>
 					{sortDirSent === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
 				</button>
@@ -444,8 +442,8 @@ $effect(() => {
 		</div>
 
 		{#if sentDocuments.length === 0}
-			<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
-				<p class="font-sans text-gray-500">{m.person_no_docs()}</p>
+			<div class="rounded-sm border border-dashed border-line bg-surface p-12 text-center">
+				<p class="font-sans text-ink-2">{m.person_no_docs()}</p>
 			</div>
 		{:else}
 			<ul class="space-y-3">
@@ -453,12 +451,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="block border border-line bg-surface p-4 transition-all duration-200 hover:border-primary 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="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-muted text-ink transition-colors group-hover:bg-accent group-hover:text-ink"
 									>
 										<img
 											src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -469,16 +467,16 @@ $effect(() => {
 									</div>
 									<div class="min-w-0">
 										<div
-											class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
+											class="truncate font-serif text-base font-medium text-ink decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
 										>
 											{doc.title || doc.originalFilename}
 										</div>
-										<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-gray-500">
+										<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-ink-2">
 											<span
 												>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span
 											>
 											{#if doc.location}
-												<span class="text-brand-mint">•</span>
+												<span class="text-accent">•</span>
 												<span>{doc.location}</span>
 											{/if}
 										</div>
@@ -488,7 +486,7 @@ $effect(() => {
 									<span
 										class="hidden items-center rounded-full border px-2 py-0.5 text-[10px] font-bold tracking-wide uppercase sm:inline-flex
                                         {doc.status === 'UPLOADED'
-                                            ? 'border-brand-mint/50 bg-brand-mint/20 text-brand-navy'
+                                            ? 'border-accent/50 bg-accent/20 text-ink'
                                             : 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
 									>
 										{doc.status}
@@ -508,7 +506,7 @@ $effect(() => {
 			{#if sentDocuments.length > DOCS_PREVIEW_LIMIT && !showAllSent}
 				<button
 					onclick={() => (showAllSent = true)}
-					class="mt-3 text-xs font-bold tracking-widest text-brand-navy/50 uppercase transition-colors hover:text-brand-navy"
+					class="mt-3 text-xs font-bold tracking-widest text-ink/50 uppercase transition-colors hover:text-ink"
 				>
 					{m.person_show_more({ count: sentDocuments.length - DOCS_PREVIEW_LIMIT })}
 				</button>
@@ -518,18 +516,18 @@ $effect(() => {
 
 	<!-- Received Documents Section -->
 	<div>
-		<div class="mb-6 flex items-center gap-3 border-b border-brand-navy/10 pb-2">
-			<h2 class="font-serif text-xl text-brand-navy">{m.person_received_docs_heading()}</h2>
-			<span class="rounded-full bg-brand-navy px-2 py-1 text-xs font-bold text-white">
+		<div class="mb-6 flex items-center gap-3 border-b border-ink/10 pb-2">
+			<h2 class="font-serif text-xl text-ink">{m.person_received_docs_heading()}</h2>
+			<span class="rounded-full bg-primary px-2 py-1 text-xs font-bold text-white">
 				{receivedDocuments.length}
 			</span>
 			{#if receivedYearRange}
-				<span class="font-sans text-xs text-gray-400">{receivedYearRange}</span>
+				<span class="font-sans text-xs text-ink-3">{receivedYearRange}</span>
 			{/if}
 			{#if receivedDocuments.length > 1}
 				<button
 					onclick={() => (sortDirReceived = sortDirReceived === 'DESC' ? 'ASC' : 'DESC')}
-					class="ml-auto text-xs font-bold tracking-widest text-gray-400 uppercase transition-colors hover:text-brand-navy"
+					class="ml-auto text-xs font-bold tracking-widest text-ink-3 uppercase transition-colors hover:text-ink"
 				>
 					{sortDirReceived === 'DESC' ? m.conv_sort_newest() : m.conv_sort_oldest()}
 				</button>
@@ -537,8 +535,8 @@ $effect(() => {
 		</div>
 
 		{#if receivedDocuments.length === 0}
-			<div class="rounded-sm border border-dashed border-brand-sand bg-white p-12 text-center">
-				<p class="font-sans text-gray-500">{m.person_no_received_docs()}</p>
+			<div class="rounded-sm border border-dashed border-line bg-surface p-12 text-center">
+				<p class="font-sans text-ink-2">{m.person_no_received_docs()}</p>
 			</div>
 		{:else}
 			<ul class="space-y-3">
@@ -546,12 +544,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="block border border-line bg-surface p-4 transition-all duration-200 hover:border-primary 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="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded bg-muted text-ink transition-colors group-hover:bg-accent group-hover:text-ink"
 									>
 										<img
 											src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
@@ -562,16 +560,16 @@ $effect(() => {
 									</div>
 									<div class="min-w-0">
 										<div
-											class="truncate font-serif text-base font-medium text-brand-navy decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
+											class="truncate font-serif text-base font-medium text-ink decoration-brand-mint decoration-2 underline-offset-2 group-hover:underline"
 										>
 											{doc.title || doc.originalFilename}
 										</div>
-										<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-gray-500">
+										<div class="mt-0.5 flex items-center space-x-2 font-sans text-xs text-ink-2">
 											<span
 												>{doc.documentDate ? formatDate(doc.documentDate) : m.doc_no_date()}</span
 											>
 											{#if doc.location}
-												<span class="text-brand-mint">•</span>
+												<span class="text-accent">•</span>
 												<span>{doc.location}</span>
 											{/if}
 										</div>
@@ -581,7 +579,7 @@ $effect(() => {
 									<span
 										class="hidden items-center rounded-full border px-2 py-0.5 text-[10px] font-bold tracking-wide uppercase sm:inline-flex
                                         {doc.status === 'UPLOADED'
-                                            ? 'border-brand-mint/50 bg-brand-mint/20 text-brand-navy'
+                                            ? 'border-accent/50 bg-accent/20 text-ink'
                                             : 'border-yellow-200 bg-yellow-50 text-yellow-800'}"
 									>
 										{doc.status}
@@ -601,7 +599,7 @@ $effect(() => {
 			{#if receivedDocuments.length > DOCS_PREVIEW_LIMIT && !showAllReceived}
 				<button
 					onclick={() => (showAllReceived = true)}
-					class="mt-3 text-xs font-bold tracking-widest text-brand-navy/50 uppercase transition-colors hover:text-brand-navy"
+					class="mt-3 text-xs font-bold tracking-widest text-ink/50 uppercase transition-colors hover:text-ink"
 				>
 					{m.person_show_more({ count: receivedDocuments.length - DOCS_PREVIEW_LIMIT })}
 				</button>

frontend/src/routes/persons/new/+page.svelte

@@ -8,7 +8,7 @@ let { form } = $props();
 	<div class="mb-6">
 		<a
 			href="/persons"
-			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 		>
 			<svg
 				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -25,7 +25,7 @@ let { form } = $props();
 			</svg>
 			{m.btn_back_to_overview()}
 		</a>
-		<h1 class="font-serif text-3xl text-brand-navy">{m.persons_new_heading()}</h1>
+		<h1 class="font-serif text-3xl text-ink">{m.persons_new_heading()}</h1>
 	</div>
 
 	{#if form?.error}
@@ -33,14 +33,14 @@ let { form } = $props();
 	{/if}
 
 	<form method="POST">
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.persons_section_details()}
 			</h2>
 
 			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
 				<div>
-					<label for="firstName" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="firstName" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_first_name()} *</label
 					>
 					<input
@@ -48,12 +48,12 @@ let { form } = $props();
 						name="firstName"
 						type="text"
 						required
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<div>
-					<label for="lastName" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="lastName" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_last_name()} *</label
 					>
 					<input
@@ -61,12 +61,12 @@ let { form } = $props();
 						name="lastName"
 						type="text"
 						required
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 
 				<div class="md:col-span-2">
-					<label for="alias" class="mb-1 block text-sm font-medium text-gray-700"
+					<label for="alias" class="mb-1 block text-sm font-medium text-ink-2"
 						>{m.form_label_alias()}</label
 					>
 					<input
@@ -74,7 +74,7 @@ let { form } = $props();
 						name="alias"
 						type="text"
 						placeholder={m.form_placeholder_alias()}
-						class="block w-full rounded border border-gray-300 p-2 text-sm shadow-sm focus:border-brand-navy focus:ring-brand-navy"
+						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
 					/>
 				</div>
 			</div>
@@ -82,17 +82,14 @@ 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="mt-4 flex items-center justify-between rounded-sm border border-line bg-surface px-6 py-4 shadow-sm"
 		>
-			<a
-				href="/persons"
-				class="text-sm font-medium text-gray-500 transition-colors hover:text-brand-navy"
-			>
+			<a href="/persons" class="text-sm font-medium text-ink-2 transition-colors hover:text-ink">
 				{m.btn_cancel()}
 			</a>
 			<button
 				type="submit"
-				class="rounded bg-brand-navy px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/80"
+				class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
 			>
 				{m.btn_create()}
 			</button>

frontend/src/routes/profile/+page.svelte

@@ -42,7 +42,7 @@ function handleBirthDateInput(e: Event) {
 	<!-- Back link -->
 	<a
 		href="/"
-		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 	>
 		<svg
 			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -56,12 +56,12 @@ function handleBirthDateInput(e: Event) {
 		{m.btn_back_to_overview()}
 	</a>
 
-	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.profile_heading()}</h1>
+	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.profile_heading()}</h1>
 
 	<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">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.profile_section_personal()}
 			</h2>
 
@@ -80,7 +80,7 @@ function handleBirthDateInput(e: Event) {
 				<div class="space-y-4">
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_first_name()}
 						</span>
@@ -88,13 +88,13 @@ 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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						/>
 					</label>
 
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_last_name()}
 						</span>
@@ -102,13 +102,13 @@ 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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						/>
 					</label>
 
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_birth_date()}
 						</span>
@@ -117,14 +117,14 @@ 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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						/>
 						<input type="hidden" name="birthDate" value={birthDateIso} />
 					</label>
 
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_email()}
 						</span>
@@ -132,13 +132,13 @@ 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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						/>
 					</label>
 
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_contact()}
 						</span>
@@ -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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 							>{data.user?.contact ?? ''}</textarea
 						>
 					</label>
@@ -154,7 +154,7 @@ function handleBirthDateInput(e: Event) {
 
 				<button
 					type="submit"
-					class="mt-5 rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+					class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
 				>
 					{m.btn_save()}
 				</button>
@@ -162,8 +162,8 @@ function handleBirthDateInput(e: Event) {
 		</div>
 
 		<!-- Password change card -->
-		<div class="rounded-sm border border-brand-sand bg-white p-6 shadow-sm">
-			<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
+		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
+			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
 				{m.profile_section_password()}
 			</h2>
 
@@ -186,7 +186,7 @@ function handleBirthDateInput(e: Event) {
 				<div class="space-y-4">
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_current_password()}
 						</span>
@@ -194,13 +194,13 @@ 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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						/>
 					</label>
 
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_new_password()}
 						</span>
@@ -208,13 +208,13 @@ 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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						/>
 					</label>
 
 					<label class="block">
 						<span
-							class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+							class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 						>
 							{m.profile_label_new_password_confirm()}
 						</span>
@@ -222,14 +222,14 @@ 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="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
 						/>
 					</label>
 				</div>
 
 				<button
 					type="submit"
-					class="mt-5 rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
+					class="mt-5 rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
 				>
 					{m.btn_save()}
 				</button>

frontend/src/routes/reset-password/+page.svelte

@@ -11,7 +11,7 @@ let {
 } = $props();
 </script>
 
-<div class="relative flex min-h-screen flex-col bg-white">
+<div class="relative flex min-h-screen flex-col bg-surface">
 	<!-- Accent strip -->
 	<div class="h-1 bg-brand-purple"></div>
 
@@ -20,15 +20,15 @@ let {
 			<!-- Logo -->
 			<div class="mb-10 text-center">
 				<a href="/" class="inline-flex items-center" aria-label="Familienarchiv">
-					<span class="font-sans text-2xl font-bold tracking-widest text-brand-navy uppercase"
+					<span class="font-sans text-2xl font-bold tracking-widest text-ink uppercase"
 						>Familienarchiv</span
 					>
 				</a>
 			</div>
 
 			<!-- Card -->
-			<div class="rounded-sm border border-brand-sand bg-white p-8 shadow-sm">
-				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-brand-navy uppercase">
+			<div class="rounded-sm border border-line bg-surface p-8 shadow-sm">
+				<h1 class="mb-6 font-sans text-sm font-bold tracking-widest text-ink uppercase">
 					{m.reset_password_heading()}
 				</h1>
 
@@ -37,9 +37,7 @@ let {
 						<p class="font-sans text-xs text-green-700">{m.reset_password_success()}</p>
 					</div>
 
-					<a
-						href="/login"
-						class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+					<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 						>{m.forgot_password_back_to_login()}</a
 					>
 				{:else}
@@ -49,7 +47,7 @@ let {
 						<div>
 							<label
 								for="newPassword"
-								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
+								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
 								>{m.reset_password_label()}</label
 							>
 							<input
@@ -58,14 +56,14 @@ let {
 								id="newPassword"
 								required
 								autocomplete="new-password"
-								class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 							/>
 						</div>
 
 						<div>
 							<label
 								for="confirmPassword"
-								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-gray-500 uppercase"
+								class="mb-1.5 block font-sans text-xs font-bold tracking-widest text-ink-2 uppercase"
 								>{m.reset_password_confirm_label()}</label
 							>
 							<input
@@ -74,7 +72,7 @@ let {
 								id="confirmPassword"
 								required
 								autocomplete="new-password"
-								class="block w-full border border-gray-300 px-3 py-2.5 font-serif text-sm text-brand-navy placeholder-gray-400 focus:border-brand-navy focus:ring-1 focus:ring-brand-navy focus:outline-none"
+								class="block w-full border border-line px-3 py-2.5 font-serif text-sm text-ink placeholder-ink-3 focus:border-ink focus:ring-1 focus:ring-ink focus:outline-none"
 							/>
 						</div>
 
@@ -88,15 +86,13 @@ let {
 
 						<button
 							type="submit"
-							class="mt-2 w-full bg-brand-navy py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
+							class="mt-2 w-full bg-primary py-2.5 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/90"
 						>
 							{m.reset_password_submit()}
 						</button>
 
 						<div class="mt-4 text-center">
-							<a
-								href="/login"
-								class="font-sans text-xs text-gray-400 transition-colors hover:text-brand-navy"
+							<a href="/login" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
 								>{m.forgot_password_back_to_login()}</a
 							>
 						</div>
@@ -108,6 +104,6 @@ let {
 
 	<!-- Footer -->
 	<div class="py-4 text-center">
-		<p class="font-sans text-xs tracking-widest text-gray-300 uppercase">Familienarchiv</p>
+		<p class="font-sans text-xs tracking-widest text-ink-3 uppercase">Familienarchiv</p>
 	</div>
 </div>

frontend/src/routes/users/[id]/+page.svelte

@@ -23,7 +23,7 @@ const initials = $derived.by(() => {
 	<!-- Back link -->
 	<a
 		href="/"
-		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
+		class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
 	>
 		<svg
 			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
@@ -37,21 +37,21 @@ const initials = $derived.by(() => {
 		Zurück
 	</a>
 
-	<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.user_profile_heading()}</h1>
+	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{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="rounded-sm border border-line bg-surface p-6 shadow-sm">
 			<!-- Avatar -->
 			<div class="mb-5 flex justify-center">
 				{#if initials}
 					<div
-						class="flex h-16 w-16 items-center justify-center rounded-full bg-brand-navy text-white"
+						class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-white"
 					>
 						<span class="font-serif text-xl font-bold">{initials}</span>
 					</div>
 				{:else}
 					<div
-						class="flex h-16 w-16 items-center justify-center rounded-full bg-brand-navy text-white"
+						class="flex h-16 w-16 items-center justify-center rounded-full bg-primary text-white"
 					>
 						<svg
 							class="h-8 w-8"
@@ -72,9 +72,9 @@ const initials = $derived.by(() => {
 
 			<!-- Name and username -->
 			<div class="mb-5 text-center">
-				<h2 class="font-serif text-xl font-bold text-brand-navy">{fullName}</h2>
+				<h2 class="font-serif text-xl font-bold text-ink">{fullName}</h2>
 				{#if data.profileUser.firstName || data.profileUser.lastName}
-					<p class="mt-0.5 font-sans text-sm text-gray-400">@{data.profileUser.username}</p>
+					<p class="mt-0.5 font-sans text-sm text-ink-3">@{data.profileUser.username}</p>
 				{/if}
 			</div>
 
@@ -82,19 +82,19 @@ const initials = $derived.by(() => {
 			<div class="flex flex-col gap-4">
 				{#if data.profileUser.email}
 					<div class="flex flex-col gap-0.5">
-						<span class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 							>E-Mail</span
 						>
-						<span class="font-serif text-sm text-brand-navy">{data.profileUser.email}</span>
+						<span class="font-serif text-sm text-ink">{data.profileUser.email}</span>
 					</div>
 				{/if}
 
 				{#if data.profileUser.contact}
 					<div class="flex flex-col gap-0.5">
-						<span class="font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
+						<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
 							>Kontakt</span
 						>
-						<span class="font-serif text-sm text-brand-navy">{data.profileUser.contact}</span>
+						<span class="font-serif text-sm text-ink">{data.profileUser.contact}</span>
 					</div>
 				{/if}
 			</div>

frontend/tailwind.config.js

@@ -1,25 +1,4 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/**/*.{html,js,svelte,ts}'],
-	theme: {
-		extend: {
-			colors: {
-				brand: {
-					navy: '#002850', // Header & Hero background
-					mint: '#A6DAD8', // The Comma accent color
-					sand: '#E4E2D7', // Content background
-					white: '#ffffff'
-				}
-			},
-			fontFamily: {
-				// Montserrat for UI/Headers, Merriweather for Body text (as established previously)
-				sans: ['Montserrat', 'sans-serif'],
-				serif: ['Merriweather', 'serif']
-			},
-			fontSize: {
-				huge: '4rem' // For the large stats numbers (e.g., "29", "5000+")
-			}
-		}
-	},
-	plugins: []
+	content: ['./src/**/*.{html,js,svelte,ts}']
 };