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/layout.css

@@ -146,7 +146,23 @@
 	--c-pdf-text: #d1d1d1;
 }
 
-/* ─── 6. Base styles ───────────────────────────────────────────────────────── */
+/* ─── 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;