feat: design system with light/dark themes and icon-first UI

Adds a real design system to replace the per-route ad-hoc styling:

- docs/design-system.md is the contract. Semantic CSS custom-property
  tokens (color/type/spacing/radii/shadows/z-index) with verified WCAG
  AA/AAA contrast ratios for both themes.
- frontend/src/lib/styles/tokens.css defines :root tokens + a
  [data-theme="dark"] override + base element resets, a .form-field
  helper, and a global prefers-reduced-motion rule.
- frontend/src/lib/theme.svelte.ts is a Svelte 5 runes store backing
  the theme state machine (system | light | dark). localStorage key
  'mangalord-theme'; matchMedia subscription that re-resolves on OS
  theme change while in 'system' mode; init() / destroy() lifecycle
  wired from +layout.svelte.
- frontend/src/app.html runs a synchronous inline script before
  %sveltekit.head% to set [data-theme] before first paint. No FOUC.
- /settings gains a System / Light / Dark radiogroup (real fieldset +
  legend + radios with lucide icons).
- Every route's <style> block is rewritten to consume tokens — home,
  auth, upload (drop-zone + page list), bookmarks, manga overview,
  reader.
- @lucide/svelte icons replace ad-hoc text controls per the spec:
  Search (icon-only primary), LogOut (icon-only muted), Upload /
  Bookmarks / Settings nav inline icons, ChevronLeft/Right for the
  reader, ArrowUp/Down/Trash2 for the upload page list. The bookmark
  toggle keeps its '☆ Bookmark' / '★ Bookmarked' text verbatim.
- Home search controls split into two rows: input + Search CTA on
  row 1, Sort (and future filters) on row 2.

Accessibility: every icon-only button carries aria-label, every
decorative SVG aria-hidden; existing image alt text preserved;
focus-visible rings reach every interactive element including the
visually-hidden theme radios; color is never the sole conveyor.

Version bump 0.12.0 → 0.13.0 across backend/Cargo.toml and
frontend/package.json (feat: → minor per CLAUDE.md).

Bars: svelte-check 0/0, vitest 51/51, playwright 18/18, cargo test
88/88, clippy -D warnings clean. Two rounds of independent review;
verdict ship-ready.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/src/lib/theme.svelte.ts

@@ -0,0 +1,67 @@
+export type Theme = 'system' | 'light' | 'dark';
+export type ResolvedTheme = 'light' | 'dark';
+
+const STORAGE_KEY = 'mangalord-theme';
+
+function readStored(): Theme {
+    if (typeof localStorage === 'undefined') return 'system';
+    const v = localStorage.getItem(STORAGE_KEY);
+    return v === 'light' || v === 'dark' ? v : 'system';
+}
+
+function systemPref(): ResolvedTheme {
+    if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined') return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function resolve(value: Theme): ResolvedTheme {
+    return value === 'system' ? systemPref() : value;
+}
+
+function apply(resolved: ResolvedTheme) {
+    if (typeof document === 'undefined') return;
+    document.documentElement.setAttribute('data-theme', resolved);
+}
+
+class ThemeStore {
+    value: Theme = $state('system');
+    resolved: ResolvedTheme = $state('light');
+    private mql: MediaQueryList | null = null;
+    private mqlListener: ((e: MediaQueryListEvent) => void) | null = null;
+
+    init() {
+        if (typeof window === 'undefined') return;
+        this.value = readStored();
+        this.resolved = resolve(this.value);
+        apply(this.resolved);
+        this.mql = window.matchMedia('(prefers-color-scheme: dark)');
+        this.mqlListener = () => {
+            if (this.value === 'system') {
+                this.resolved = systemPref();
+                apply(this.resolved);
+            }
+        };
+        this.mql.addEventListener('change', this.mqlListener);
+    }
+
+    set(next: Theme) {
+        this.value = next;
+        if (next === 'system') {
+            if (typeof localStorage !== 'undefined') localStorage.removeItem(STORAGE_KEY);
+        } else if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(STORAGE_KEY, next);
+        }
+        this.resolved = resolve(next);
+        apply(this.resolved);
+    }
+
+    destroy() {
+        if (this.mql && this.mqlListener) {
+            this.mql.removeEventListener('change', this.mqlListener);
+        }
+        this.mql = null;
+        this.mqlListener = null;
+    }
+}
+
+export const theme = new ThemeStore();