refactor(components): replace all hardcoded colors with semantic tokens

Replaces bg-white, text-brand-navy, border-brand-sand, text-gray-*, bg-[#2A2A2A],
bg-brand-purple/15, hover:bg-brand-sand, etc. across all 35 .svelte files with
semantic token utilities (bg-surface, text-ink, border-line, bg-pdf-bg, bg-nav-active,
bg-muted, text-accent, bg-primary, ...).

Also adds CSS filter: invert(1) in layout.css for De Gruyter <img> icons in dark mode,
excluding icons that carry .invert already (to prevent double-inversion).

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

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

@@ -120,7 +120,7 @@ $effect(() => {
 </svelte:head>
 
 <div
-	class="fixed right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden bg-white"
+	class="fixed right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden bg-surface"
 	style="top: {navHeight}px"
 	data-hydrated
 >