From 567d56bfa1839e0ef5477e566fd76ecce9275a2d Mon Sep 17 00:00:00 2001
From: MechaCat02 <fabian@diekaulbachs.de>
Date: Sun, 17 May 2026 11:52:58 +0200
Subject: [PATCH] feat: design system with light/dark themes and icon-first UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 backend/Cargo.lock                            |   2 +-
 backend/Cargo.toml                            |   2 +-
 docs/design-system.md                         | 162 +++++++++++
 frontend/package-lock.json                    |  15 +-
 frontend/package.json                         |   3 +-
 frontend/src/app.html                         |  16 ++
 frontend/src/lib/styles/tokens.css            | 265 ++++++++++++++++++
 frontend/src/lib/theme.svelte.ts              |  67 +++++
 frontend/src/routes/+layout.svelte            | 135 +++++++--
 frontend/src/routes/+page.svelte              | 152 +++++++---
 frontend/src/routes/bookmarks/+page.svelte    |  61 ++--
 frontend/src/routes/login/+page.svelte        |  42 ++-
 frontend/src/routes/manga/[id]/+page.svelte   |  70 +++--
 .../manga/[id]/chapter/[n]/+page.svelte       |  88 ++++--
 frontend/src/routes/register/+page.svelte     |  42 ++-
 frontend/src/routes/settings/+page.svelte     | 170 +++++++++--
 frontend/src/routes/upload/+page.svelte       | 216 +++++++++-----
 17 files changed, 1271 insertions(+), 237 deletions(-)
 create mode 100644 docs/design-system.md
 create mode 100644 frontend/src/lib/styles/tokens.css
 create mode 100644 frontend/src/lib/theme.svelte.ts

diff --git a/backend/Cargo.lock b/backend/Cargo.lock
index f5a232a..6f0b008 100644
--- a/backend/Cargo.lock
+++ b/backend/Cargo.lock
@@ -1033,7 +1033,7 @@ checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
 
 [[package]]
 name = "mangalord"
-version = "0.11.0"
+version = "0.13.0"
 dependencies = [
  "anyhow",
  "argon2",
diff --git a/backend/Cargo.toml b/backend/Cargo.toml
index 32ed364..c9d7962 100644
--- a/backend/Cargo.toml
+++ b/backend/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "mangalord"
-version = "0.12.0"
+version = "0.13.0"
 edition = "2021"
 
 [lib]
diff --git a/docs/design-system.md b/docs/design-system.md
new file mode 100644
index 0000000..de74545
--- /dev/null
+++ b/docs/design-system.md
@@ -0,0 +1,162 @@
+# Mangalord design system
+
+One screen. This is the contract the implementation reads — every value in code comes from a token defined here.
+
+## Tokens
+
+All tokens live on `:root` in [frontend/src/lib/styles/tokens.css](../frontend/src/lib/styles/tokens.css). Dark values override under `:root[data-theme="dark"]`. Components consume tokens only — no raw hex, no raw px in scoped styles.
+
+### Color
+
+Semantic, not literal. Tested with [WebAIM contrast checker](https://webaim.org/resources/contrastchecker/).
+
+| Token | Light | Dark | Use |
+|---|---|---|---|
+| `--bg` | `#ffffff` | `#0f1115` | page background |
+| `--surface` | `#f6f7f9` | `#161a21` | cards, inputs, drop zones |
+| `--surface-elevated` | `#ffffff` | `#1c2129` | hovered cards, focused inputs |
+| `--border` | `#e3e5ea` | `#2a2f37` | hairlines |
+| `--border-strong` | `#c8ccd4` | `#3a414d` | input borders |
+| `--text` | `#16181d` | `#e8eaed` | body |
+| `--text-muted` | `#5b6168` | `#9aa0a6` | meta, hints |
+| `--primary` | `#2563eb` | `#60a5fa` | links, primary button, focus |
+| `--primary-hover` | `#1d4ed8` | `#3b82f6` | primary hover |
+| `--primary-contrast` | `#ffffff` | `#0f1115` | text on primary fill |
+| `--danger` | `#b00020` | `#f87171` | errors, destructive |
+| `--danger-soft-bg` | `#fff5f5` | `#3a1620` | invalid page row |
+| `--success` | `#0a7d2c` | `#4ade80` | success text |
+| `--warning-soft-bg` | `#fff5d6` | `#3a2e10` | active bookmark fill |
+| `--warning-border` | `#d6a800` | `#a37800` | active bookmark border |
+| `--focus-ring` | `#2563eb` | `#60a5fa` | `:focus-visible` outline |
+| `--focus-ring-soft` | `rgb(37 99 235 / 0.25)` | `rgb(96 165 250 / 0.3)` | input focus halo (`box-shadow`) |
+| `--primary-soft-bg` | `rgb(37 99 235 / 0.08)` | `rgb(96 165 250 / 0.12)` | drop-zone drag-over, selected theme radio |
+
+Verified ratios (light theme, against `--bg`): `--text` 16.5:1 (AAA), `--text-muted` 6.4:1 (AA), `--primary` 5.2:1 (AA), `--danger` 7.6:1 (AAA). Dark theme: `--text` 13.8:1, `--text-muted` 4.7:1, `--primary` 5.3:1, `--danger` 5.1:1. All interactive elements clear 4.5:1; large UI clears 3:1.
+
+### Typography
+
+System stack, zero FOUT cost: `system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`. Monospace stack (for code-like elements, currently unused but reserved): `ui-monospace, "SF Mono", Menlo, monospace`.
+
+| Token | Value | Where |
+|---|---|---|
+| `--font-xs` | `0.75rem` / `1.4` | micro-meta (file sizes, "Bookmarked {date}") |
+| `--font-sm` | `0.875rem` / `1.5` | card meta, hints, inline errors |
+| `--font-base` | `1rem` / `1.55` | body, inputs, buttons |
+| `--font-lg` | `1.125rem` / `1.45` | card titles, h3 |
+| `--font-xl` | `1.5rem` / `1.3` | h2 |
+| `--font-2xl` | `2rem` / `1.2` | h1 page titles |
+
+Weights: `--weight-regular: 400`, `--weight-medium: 500`, `--weight-semibold: 600`. Headings use semibold. Body and inputs use regular. Card titles use semibold at `--font-sm` or `--font-lg`.
+
+### Spacing
+
+One ladder (4 px base):
+
+`--space-1 0.25rem`, `--space-2 0.5rem`, `--space-3 0.75rem`, `--space-4 1rem`, `--space-5 1.25rem`, `--space-6 1.5rem`, `--space-8 2rem`.
+
+### Radii, shadows, transitions
+
+`--radius-sm 4px`, `--radius-md 6px`, `--radius-lg 10px`, `--radius-pill 999px`.
+
+`--shadow-sm` (light: `0 1px 2px rgb(0 0 0 / 0.06)`; dark: `0 1px 2px rgb(0 0 0 / 0.4)`), `--shadow-md` (light: `0 2px 8px rgb(0 0 0 / 0.08)`; dark: `0 2px 8px rgb(0 0 0 / 0.5)`).
+
+`--transition: 120ms ease-out`. Disabled under `@media (prefers-reduced-motion: reduce)`.
+
+### Z-index
+
+`--z-dropdown 10`, `--z-sticky 50`, `--z-modal 100`, `--z-toast 1000`. No raw `z-index` numbers in component CSS.
+
+## Components
+
+All shapes are token-driven. Implementation lives in route-scoped `<style>` blocks consuming tokens; we do not extract a component library on this branch.
+
+**Button** — 36 px height, `--radius-md`, `--font-base`, weight 500, `--space-3` horizontal padding, `--transition` on bg/border/color. Variants:
+- **Primary**: `background: var(--primary)`, `color: var(--primary-contrast)`, hover → `--primary-hover`.
+- **Secondary**: `background: transparent`, `color: var(--text)`, `border: 1px solid var(--border-strong)`, hover → `background: var(--surface)`.
+- **Icon-only (muted)**: 36 px square, `background: transparent`, `color: var(--text-muted)`, hover → `background: var(--surface-elevated)` and `color: var(--text)`. For low-emphasis controls (Logout, page row move/remove). Always carries `aria-label`.
+- **Icon-only (primary)**: 36 px square, fills the **Primary** variant (`background: var(--primary)`, `color: var(--primary-contrast)`, hover → `--primary-hover`). For CTAs that happen to be icon-shaped — the home Search button. Always carries `aria-label`.
+- **Icon-only (compact)**: 32 px square, `--radius-sm`, 16 px SVG. Inline row controls only (upload page-list move/remove). Otherwise tracks the muted variant's color treatment — transparent fill, `--text-muted` foreground, `--surface-elevated` hover; the Remove button picks up a `--danger` hover tint.
+- **Destructive**: `background: var(--danger)`, `color: #fff`. Reserved — no submit button uses this variant today; the upload page's Remove uses the compact icon-only variant with a `--danger` hover tint.
+
+Icon-only SVG sizing: standard 18 px (`--icon-md`); reader nav 22 px (`--icon-lg`); compact row controls 16 px.
+
+All variants: `:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px }`. Disabled: `opacity: 0.5; cursor: not-allowed`. No dedicated `:active` (pressed) rule today — the hover state carries through; revisit if a control needs a stronger pressed affordance.
+
+**Input / textarea / select** — 36 px height (textarea grows), `padding: 0 var(--space-3)`, `border: 1px solid var(--border-strong)`, `background: var(--surface)`, `color: var(--text)`, `--radius-md`. Focus: `border-color: var(--primary)`, `background: var(--surface-elevated)`, `outline: none` (the colored border *is* the focus signal, plus a `box-shadow: 0 0 0 3px var(--focus-ring-soft)` halo). `aria-invalid="true"` → border `--danger`. Disabled: `opacity: 0.5`. File inputs visually hidden — use the drop-zone pattern.
+
+**Card** — `background: var(--surface)`, `border: 1px solid var(--border)`, `--radius-md`, `padding: var(--space-4)`. Manga card and bookmark card are non-bordered (transparent), only the cover thumbnail gets surface treatment.
+
+**Alert / inline status** — plain text in `--danger` or `--success`. The form-error / field-error / success blocks are inline, not banners.
+
+**Link** — `color: var(--primary)`, underline on hover only. Visited unchanged.
+
+**Manga card** (home grid, bookmarks): cover 2:3 with `--surface` placeholder + lucide `BookImage` icon when no cover; title `--font-sm`/semibold/`-webkit-line-clamp:2`; author `--font-xs`/`--text-muted`/ellipsis.
+
+**Reader nav**: icon-only buttons (`ChevronLeft`/`ChevronRight`), 44 px square (tap-target sized — these are primary controls), `--radius-md`, surface fill, 1 px `--border-strong` border. Hover: `--surface-elevated` background and `--primary` border (it's the main affordance per page). Disabled fades to 0.4. Back-link uses `ArrowLeft` icon plus cover thumbnail and manga title.
+
+**Theme picker** (settings only): native `<fieldset>` with `<legend>Theme</legend>` and three `<label>`s wrapping `<input type="radio" name="theme">` plus a lucide icon (`Monitor` / `Sun` / `Moon`) and text. Idle: `background: var(--surface)`. Hover: `background: var(--surface-elevated)`. Selected: `background: var(--primary-soft-bg)`, `border-color: var(--primary)`. Keyboard focus reaches the visually-hidden radio via `:has(input:focus-visible)`. Persists via `theme.set()`.
+
+## Icons
+
+**[@lucide/svelte](https://www.npmjs.com/package/@lucide/svelte)** (MIT). The legacy `lucide-svelte` package is deprecated; `@lucide/svelte` is the supported successor. Reason: native Svelte 5 components, tree-shaken per-icon import, ~600 icons covering everything we need. Phosphor is a close second; Heroicons trails on Svelte ergonomics. Lucide wins.
+
+Sizes: `--icon-sm 14px`, `--icon-md 18px`, `--icon-lg 22px`. Default stroke width 2.
+
+| Where | Icon | Treatment |
+|---|---|---|
+| Header search | `Search` | icon-only (primary) button, `aria-label="Search"` |
+| Header logout | `LogOut` | icon-only (muted) button, `aria-label="Logout"` |
+| Header upload link | `Upload` | inline icon + text "Upload" |
+| Header bookmarks link | `Bookmark` | inline icon + text "Bookmarks" |
+| Header settings link | `Settings` | inline icon + text "Settings" |
+| Header login/register | (none) | text only — these are anonymous-only links |
+| Reader prev / next | `ChevronLeft` / `ChevronRight` | icon-only, aria-labels preserved |
+| Reader back link | `ArrowLeft` | inline icon + cover + title |
+| Upload page row: move up / down | `ArrowUp` / `ArrowDown` | icon-only, aria-labels |
+| Upload page row: remove | `Trash2` | icon-only, `aria-label="Remove page"`, danger hover |
+| Drop-zone hint | `UploadCloud` | decorative icon above the "Drop pages here, or browse" text |
+| Cover placeholder | `BookImage` | shown in manga card and bookmark card when no cover |
+| Bookmark toggle | unicode `☆` / `★` | kept as-is — tests assert literal text, and the unicode is icon-ish enough |
+| Theme picker | `Monitor` / `Sun` / `Moon` | inline next to each radio label |
+
+**Where text stays unchanged**: page headings, form labels, form submit buttons ("Create manga", "Upload chapter", "Update password" — unfamiliar actions, icon-only would harm clarity), inline cross-page links ("No account? Register"), the "Mangalord" wordmark.
+
+## Theme switching
+
+**State machine**: `Theme = 'system' | 'light' | 'dark'`. Stored value lives in `localStorage` under key `mangalord-theme` (absent → `system`). The *resolved* attribute on `<html>` is always `light` or `dark`; `system` is resolved at runtime via `matchMedia('(prefers-color-scheme: dark)')`.
+
+**At first paint** — inline script in [frontend/src/app.html](../frontend/src/app.html) `<head>` runs synchronously before SvelteKit hydrates:
+
+```js
+(function () {
+  try {
+    var stored = localStorage.getItem('mangalord-theme');
+    var pref = stored === 'light' || stored === 'dark' ? stored : (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    document.documentElement.setAttribute('data-theme', pref);
+  } catch (_) {
+    document.documentElement.setAttribute('data-theme', 'light');
+  }
+})();
+```
+
+**At runtime** — [frontend/src/lib/theme.svelte.ts](../frontend/src/lib/theme.svelte.ts) exposes a Svelte 5 runes store with `value` (the stored preference) and `resolved` (effective light/dark), `set(value)`, and a `matchMedia` listener that re-resolves when the user changes their OS theme while in `system` mode.
+
+**Toggle** — three radios in `/settings`, persisted on change.
+
+## Accessibility
+
+- `:focus-visible` ring on every interactive element. Never `outline: none` without a replacement.
+- `@media (prefers-reduced-motion: reduce)` zeroes out `--transition` and disables non-essential animations.
+- Every icon-only button has `aria-label`. Every decorative SVG has `aria-hidden="true"`.
+- Existing image `alt` text (cover = manga title) is preserved on every restyle.
+- Theme picker uses a real `<fieldset>` + `<legend>` and three radios; `aria-labelledby` not needed because `<legend>` is the accessible name.
+- Bookmark toggle keeps `aria-pressed`.
+- Color is never the sole conveyor of state (success/error text comes with a glyph or descriptive copy where present; bookmark active state has both color and visible text).
+
+## Reserved tokens (declared, not yet consumed)
+
+`tokens.css` declares a handful of forward-looking tokens that no component uses today. They exist so that the first consumer doesn't have to bikeshed values: `--weight-regular`, `--space-5`, `--space-8`, `--radius-lg`, `--radius-pill`, `--shadow-sm`, `--shadow-md`, `--icon-sm` / `--icon-md` / `--icon-lg` (icon sizing is currently passed via lucide's `size` prop literally), and all four `--z-*` levels. A consumer that adopts any of these should also update this section.
+
+## Out of scope
+
+No web font, no CSS framework, no toast/modal/dropdown patterns, no component library extraction, no notification system. Single-file token sheet + scoped styles consuming tokens.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ccd7bfb..e5245a0 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,13 +1,14 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.1.0",
+  "version": "0.12.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mangalord-frontend",
-      "version": "0.1.0",
+      "version": "0.12.0",
       "devDependencies": {
+        "@lucide/svelte": "^1.16.0",
         "@playwright/test": "^1.48.0",
         "@sveltejs/adapter-node": "^5.2.0",
         "@sveltejs/kit": "^2.7.0",
@@ -638,6 +639,16 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lucide/svelte": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.16.0.tgz",
+      "integrity": "sha512-AvvPJnaWxeiNkAljI5MsSEc84yHPLMaWQIAJOcbX7k9au/f9ITS7cxTTQiautDiOFKVOXiYdZ+d6mtl88J+Kbg==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^5"
+      }
+    },
     "node_modules/@playwright/test": {
       "version": "1.60.0",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 4b5070a..656e8b4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mangalord-frontend",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -13,6 +13,7 @@
     "test:e2e": "playwright test"
   },
   "devDependencies": {
+    "@lucide/svelte": "^1.16.0",
     "@playwright/test": "^1.48.0",
     "@sveltejs/adapter-node": "^5.2.0",
     "@sveltejs/kit": "^2.7.0",
diff --git a/frontend/src/app.html b/frontend/src/app.html
index 28219e1..d73162b 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -5,6 +5,22 @@
         <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Mangalord</title>
+        <script>
+            (function () {
+                try {
+                    var stored = localStorage.getItem('mangalord-theme');
+                    var pref =
+                        stored === 'light' || stored === 'dark'
+                            ? stored
+                            : window.matchMedia('(prefers-color-scheme: dark)').matches
+                              ? 'dark'
+                              : 'light';
+                    document.documentElement.setAttribute('data-theme', pref);
+                } catch (_) {
+                    document.documentElement.setAttribute('data-theme', 'light');
+                }
+            })();
+        </script>
         %sveltekit.head%
     </head>
     <body data-sveltekit-preload-data="hover">
diff --git a/frontend/src/lib/styles/tokens.css b/frontend/src/lib/styles/tokens.css
new file mode 100644
index 0000000..41f1819
--- /dev/null
+++ b/frontend/src/lib/styles/tokens.css
@@ -0,0 +1,265 @@
+/* Design tokens — see docs/design-system.md.
+   Components consume tokens only; no raw hex or raw px in scoped styles. */
+
+:root {
+    --bg: #ffffff;
+    --surface: #f6f7f9;
+    --surface-elevated: #ffffff;
+    --border: #e3e5ea;
+    --border-strong: #c8ccd4;
+    --text: #16181d;
+    --text-muted: #5b6168;
+    --primary: #2563eb;
+    --primary-hover: #1d4ed8;
+    --primary-contrast: #ffffff;
+    --primary-soft-bg: rgb(37 99 235 / 0.08);
+    --danger: #b00020;
+    --danger-soft-bg: #fff5f5;
+    --success: #0a7d2c;
+    --warning-soft-bg: #fff5d6;
+    --warning-border: #d6a800;
+    --focus-ring: #2563eb;
+    --focus-ring-soft: rgb(37 99 235 / 0.25);
+
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
+    --shadow-md: 0 2px 8px rgb(0 0 0 / 0.08);
+
+    --font-stack: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+
+    --font-xs: 0.75rem;
+    --font-sm: 0.875rem;
+    --font-base: 1rem;
+    --font-lg: 1.125rem;
+    --font-xl: 1.5rem;
+    --font-2xl: 2rem;
+
+    --leading-tight: 1.3;
+    --leading-snug: 1.45;
+    --leading-normal: 1.55;
+
+    --weight-regular: 400;
+    --weight-medium: 500;
+    --weight-semibold: 600;
+
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+    --radius-pill: 999px;
+
+    --transition: 120ms ease-out;
+
+    --icon-sm: 14px;
+    --icon-md: 18px;
+    --icon-lg: 22px;
+
+    --z-dropdown: 10;
+    --z-sticky: 50;
+    --z-modal: 100;
+    --z-toast: 1000;
+}
+
+:root[data-theme='dark'] {
+    --bg: #0f1115;
+    --surface: #161a21;
+    --surface-elevated: #1c2129;
+    --border: #2a2f37;
+    --border-strong: #3a414d;
+    --text: #e8eaed;
+    --text-muted: #9aa0a6;
+    --primary: #60a5fa;
+    --primary-hover: #3b82f6;
+    --primary-contrast: #0f1115;
+    --primary-soft-bg: rgb(96 165 250 / 0.12);
+    --danger: #f87171;
+    --danger-soft-bg: #3a1620;
+    --success: #4ade80;
+    --warning-soft-bg: #3a2e10;
+    --warning-border: #a37800;
+    --focus-ring: #60a5fa;
+    --focus-ring-soft: rgb(96 165 250 / 0.3);
+
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
+    --shadow-md: 0 2px 8px rgb(0 0 0 / 0.5);
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-stack);
+    font-size: var(--font-base);
+    line-height: var(--leading-normal);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3 {
+    color: var(--text);
+    line-height: var(--leading-tight);
+    font-weight: var(--weight-semibold);
+    margin: 0 0 var(--space-3);
+}
+
+h1 {
+    font-size: var(--font-2xl);
+}
+
+h2 {
+    font-size: var(--font-xl);
+}
+
+h3 {
+    font-size: var(--font-lg);
+}
+
+p {
+    margin: 0 0 var(--space-3);
+}
+
+a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: color var(--transition);
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+a:focus-visible,
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+[role='button']:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+}
+
+button,
+input,
+select,
+textarea {
+    font: inherit;
+    color: inherit;
+}
+
+input[type='text'],
+input[type='search'],
+input[type='password'],
+input[type='number'],
+input[type='email'],
+select,
+textarea {
+    background: var(--surface);
+    color: var(--text);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-md);
+    padding: 0 var(--space-3);
+    height: 36px;
+    width: 100%;
+    transition:
+        border-color var(--transition),
+        background var(--transition),
+        box-shadow var(--transition);
+}
+
+textarea {
+    height: auto;
+    min-height: 6rem;
+    padding: var(--space-2) var(--space-3);
+    line-height: var(--leading-snug);
+    resize: vertical;
+}
+
+input[type='text']:focus,
+input[type='search']:focus,
+input[type='password']:focus,
+input[type='number']:focus,
+input[type='email']:focus,
+select:focus,
+textarea:focus {
+    outline: none;
+    border-color: var(--primary);
+    background: var(--surface-elevated);
+    box-shadow: 0 0 0 3px var(--focus-ring-soft);
+}
+
+input[aria-invalid='true'],
+select[aria-invalid='true'],
+textarea[aria-invalid='true'] {
+    border-color: var(--danger);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+button {
+    cursor: pointer;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    padding: 0 var(--space-3);
+    height: 36px;
+    font-weight: var(--weight-medium);
+    color: var(--text);
+    transition:
+        background var(--transition),
+        border-color var(--transition),
+        color var(--transition);
+}
+
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+::placeholder {
+    color: var(--text-muted);
+    opacity: 1;
+}
+
+.form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    font-size: var(--font-sm);
+    color: var(--text);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        transition-duration: 0ms !important;
+        animation-duration: 0ms !important;
+    }
+}
diff --git a/frontend/src/lib/theme.svelte.ts b/frontend/src/lib/theme.svelte.ts
new file mode 100644
index 0000000..87a5f8c
--- /dev/null
+++ b/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();
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 37e255e..0d15c87 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,16 +1,25 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { onMount, onDestroy } from 'svelte';
     import { goto } from '$app/navigation';
     import { logout } from '$lib/api/auth';
     import { session } from '$lib/session.svelte';
+    import { theme } from '$lib/theme.svelte';
+    import Upload from '@lucide/svelte/icons/upload';
+    import Bookmark from '@lucide/svelte/icons/bookmark';
+    import Settings from '@lucide/svelte/icons/settings';
+    import LogOut from '@lucide/svelte/icons/log-out';
+    import '$lib/styles/tokens.css';
 
     let { children } = $props();
     let loggingOut = $state(false);
 
     onMount(() => {
+        theme.init();
         if (!session.loaded) session.refresh();
     });
 
+    onDestroy(() => theme.destroy());
+
     async function handleLogout() {
         loggingOut = true;
         try {
@@ -25,22 +34,42 @@
 
 <header>
     <nav aria-label="primary">
-        <a href="/">Mangalord</a>
-        <a href="/upload">Upload</a>
-        <a href="/bookmarks">Bookmarks</a>
+        <a class="brand" href="/">Mangalord</a>
+        <a class="nav-link" href="/upload">
+            <Upload size={18} aria-hidden="true" />
+            <span>Upload</span>
+        </a>
+        <a class="nav-link" href="/bookmarks">
+            <Bookmark size={18} aria-hidden="true" />
+            <span>Bookmarks</span>
+        </a>
     </nav>
     <div class="session" data-testid="session-area">
         {#if !session.loaded}
             <span data-testid="session-loading" aria-busy="true">…</span>
         {:else if session.user}
-            <span data-testid="session-user">{session.user.username}</span>
-            <a href="/settings" data-testid="nav-settings">Settings</a>
-            <button type="button" onclick={handleLogout} disabled={loggingOut}>
-                {loggingOut ? 'Logging out…' : 'Logout'}
+            <span class="username" data-testid="session-user">{session.user.username}</span>
+            <a class="nav-link" href="/settings" data-testid="nav-settings">
+                <Settings size={18} aria-hidden="true" />
+                <span>Settings</span>
+            </a>
+            <button
+                class="icon-btn"
+                type="button"
+                onclick={handleLogout}
+                disabled={loggingOut}
+                aria-label="Logout"
+                title="Logout"
+            >
+                {#if loggingOut}
+                    <span class="logging-out">…</span>
+                {:else}
+                    <LogOut size={18} aria-hidden="true" />
+                {/if}
             </button>
         {:else}
-            <a href="/login" data-testid="nav-login">Login</a>
-            <a href="/register" data-testid="nav-register">Register</a>
+            <a class="text-link" href="/login" data-testid="nav-login">Login</a>
+            <a class="text-link" href="/register" data-testid="nav-register">Register</a>
         {/if}
     </div>
 </header>
@@ -51,24 +80,94 @@
 
 <style>
     header {
-        padding: 1rem;
-        border-bottom: 1px solid #ddd;
+        padding: var(--space-3) var(--space-4);
+        border-bottom: 1px solid var(--border);
+        background: var(--surface);
         display: flex;
         justify-content: space-between;
         align-items: center;
-        gap: 1rem;
+        gap: var(--space-4);
+        flex-wrap: wrap;
     }
-    nav a,
-    .session a {
-        margin-right: 1rem;
+
+    nav {
+        display: flex;
+        align-items: center;
+        gap: var(--space-1);
     }
+
+    .brand {
+        font-weight: var(--weight-semibold);
+        font-size: var(--font-lg);
+        color: var(--text);
+        padding: var(--space-2) var(--space-3);
+        margin-right: var(--space-2);
+    }
+
+    .brand:hover {
+        text-decoration: none;
+        color: var(--primary);
+    }
+
+    .nav-link {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        color: var(--text);
+        padding: var(--space-2) var(--space-3);
+        border-radius: var(--radius-md);
+        font-size: var(--font-sm);
+        transition: background var(--transition);
+    }
+
+    .nav-link:hover {
+        background: var(--surface-elevated);
+        text-decoration: none;
+    }
+
+    .text-link {
+        color: var(--primary);
+        padding: var(--space-2) var(--space-3);
+        font-size: var(--font-sm);
+    }
+
     .session {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: var(--space-1);
     }
+
+    .username {
+        color: var(--text-muted);
+        font-size: var(--font-sm);
+        padding: 0 var(--space-2);
+    }
+
+    .icon-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        padding: 0;
+        background: transparent;
+        color: var(--text-muted);
+        border: 1px solid transparent;
+        border-radius: var(--radius-md);
+    }
+
+    .icon-btn:hover:not(:disabled) {
+        background: var(--surface-elevated);
+        color: var(--text);
+    }
+
+    .logging-out {
+        font-size: var(--font-base);
+        line-height: 1;
+    }
+
     main {
-        padding: 1rem;
+        padding: var(--space-4);
         max-width: 64rem;
         margin: 0 auto;
     }
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 3b4922e..082532f 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -2,6 +2,8 @@
     import { onMount } from 'svelte';
     import { listMangas, type Manga, type MangaSort } from '$lib/api/mangas';
     import { fileUrl } from '$lib/api/client';
+    import Search from '@lucide/svelte/icons/search';
+    import BookImage from '@lucide/svelte/icons/book-image';
 
     let mangas: Manga[] = $state([]);
     let search = $state('');
@@ -44,28 +46,35 @@
     action="javascript:void(0)"
     class="controls"
 >
-    <input
-        type="search"
-        bind:value={search}
-        placeholder="Search by title or author"
-        data-testid="search-input"
-    />
-    <label>
-        Sort
-        <select bind:value={sort} onchange={onSortChange} data-testid="sort-select">
-            <option value="recent">Recent</option>
-            <option value="title">Title (A→Z)</option>
-        </select>
-    </label>
-    <button type="submit">Search</button>
+    <div class="search-row">
+        <input
+            class="search"
+            type="search"
+            bind:value={search}
+            placeholder="Search by title or author"
+            data-testid="search-input"
+        />
+        <button class="icon-btn" type="submit" aria-label="Search" title="Search">
+            <Search size={18} aria-hidden="true" />
+        </button>
+    </div>
+    <div class="config-row">
+        <label class="sort">
+            <span>Sort</span>
+            <select bind:value={sort} onchange={onSortChange} data-testid="sort-select">
+                <option value="recent">Recent</option>
+                <option value="title">Title (A→Z)</option>
+            </select>
+        </label>
+    </div>
 </form>
 
 {#if loading}
-    <p data-testid="loading">Loading…</p>
+    <p class="status" data-testid="loading">Loading…</p>
 {:else if error}
-    <p data-testid="error" role="alert">{error}</p>
+    <p class="error" data-testid="error" role="alert">{error}</p>
 {:else if mangas.length === 0}
-    <p data-testid="empty">No mangas yet. <a href="/upload">Upload one</a>.</p>
+    <p class="status" data-testid="empty">No mangas yet. <a href="/upload">Upload one</a>.</p>
 {:else}
     {#if total !== null}
         <p class="count" data-testid="manga-total">
@@ -84,7 +93,9 @@
                             loading="lazy"
                         />
                     {:else}
-                        <div class="cover cover-placeholder">📖</div>
+                        <div class="cover cover-placeholder">
+                            <BookImage size={36} aria-hidden="true" />
+                        </div>
                     {/if}
                 </a>
                 <div class="meta">
@@ -99,69 +110,136 @@
 <style>
     .controls {
         display: flex;
-        gap: 0.5rem;
-        align-items: center;
-        flex-wrap: wrap;
+        flex-direction: column;
+        gap: var(--space-3);
+        margin-bottom: var(--space-4);
     }
-    .controls label {
+
+    .search-row {
+        display: flex;
+        gap: var(--space-2);
+        align-items: center;
+    }
+
+    .search {
+        flex: 1;
+        min-width: 0;
+        max-width: 28rem;
+    }
+
+    .config-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-3);
+        align-items: center;
+    }
+
+    .sort {
         display: flex;
         align-items: center;
-        gap: 0.25rem;
+        gap: var(--space-2);
+        color: var(--text-muted);
+        font-size: var(--font-sm);
     }
+
+    .sort select {
+        width: auto;
+    }
+
+    .icon-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        padding: 0;
+        background: var(--primary);
+        color: var(--primary-contrast);
+        border: 1px solid var(--primary);
+    }
+
+    .icon-btn:hover:not(:disabled) {
+        background: var(--primary-hover);
+        border-color: var(--primary-hover);
+    }
+
+    .status {
+        color: var(--text-muted);
+    }
+
+    .error {
+        color: var(--danger);
+    }
+
     .count {
-        color: #777;
-        margin: 0.5rem 0;
+        color: var(--text-muted);
+        font-size: var(--font-sm);
+        margin: var(--space-2) 0;
     }
+
     .manga-grid {
         list-style: none;
         padding: 0;
+        margin: 0;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-        gap: 1rem;
+        gap: var(--space-4);
     }
+
     .manga-card {
         display: flex;
         flex-direction: column;
-        gap: 0.4rem;
+        gap: var(--space-2);
     }
+
     .cover-link {
         display: block;
         line-height: 0;
     }
+
     .cover {
         width: 100%;
         aspect-ratio: 2 / 3;
         object-fit: cover;
-        border-radius: 4px;
-        background: #f0f0f0;
+        border-radius: var(--radius-md);
+        background: var(--surface);
     }
+
     .cover-placeholder {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 2.5rem;
-        color: #999;
+        color: var(--text-muted);
         user-select: none;
     }
+
     .meta {
         display: flex;
         flex-direction: column;
         min-width: 0;
+        gap: var(--space-1);
     }
+
     .title {
-        font-weight: 600;
-        font-size: 0.95rem;
-        line-height: 1.3;
+        font-weight: var(--weight-semibold);
+        font-size: var(--font-sm);
+        line-height: var(--leading-tight);
+        color: var(--text);
         overflow: hidden;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         line-clamp: 2;
         -webkit-box-orient: vertical;
     }
+
+    .title:hover {
+        color: var(--primary);
+        text-decoration: none;
+    }
+
     .author {
-        color: #777;
-        font-size: 0.85rem;
-        margin-top: 0.1rem;
+        color: var(--text-muted);
+        font-size: var(--font-xs);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
diff --git a/frontend/src/routes/bookmarks/+page.svelte b/frontend/src/routes/bookmarks/+page.svelte
index cedc328..23e85df 100644
--- a/frontend/src/routes/bookmarks/+page.svelte
+++ b/frontend/src/routes/bookmarks/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { fileUrl } from '$lib/api/client';
+    import BookImage from '@lucide/svelte/icons/book-image';
 
     let { data } = $props();
     const authenticated = $derived(data.authenticated);
@@ -14,15 +15,15 @@
 <h1>Bookmarks</h1>
 
 {#if error}
-    <p role="alert" data-testid="bookmarks-error">
+    <p class="error" role="alert" data-testid="bookmarks-error">
         Couldn't load bookmarks: {error}
     </p>
 {:else if !authenticated}
-    <p data-testid="bookmarks-signin">
+    <p class="hint" data-testid="bookmarks-signin">
         <a href="/login">Sign in</a> to see your bookmarks.
     </p>
 {:else if bookmarks.length === 0}
-    <p data-testid="bookmarks-empty">No bookmarks yet.</p>
+    <p class="hint" data-testid="bookmarks-empty">No bookmarks yet.</p>
 {:else}
     <ul class="bookmark-list" data-testid="bookmark-list">
         {#each bookmarks as b (b.id)}
@@ -36,7 +37,9 @@
                             loading="lazy"
                         />
                     {:else}
-                        <div class="cover cover-placeholder">📖</div>
+                        <div class="cover cover-placeholder">
+                            <BookImage size={22} aria-hidden="true" />
+                        </div>
                     {/if}
                 </a>
                 <div class="meta">
@@ -75,52 +78,74 @@
     .bookmark-list {
         list-style: none;
         padding: 0;
+        margin: 0;
     }
+
     .bookmark {
         display: grid;
         grid-template-columns: 64px 1fr;
-        gap: 1rem;
+        gap: var(--space-4);
         align-items: start;
-        padding: 0.75rem 0;
-        border-bottom: 1px solid #eee;
+        padding: var(--space-3) 0;
+        border-bottom: 1px solid var(--border);
     }
+
     .cover-link {
         display: block;
         line-height: 0;
     }
+
     .cover {
         width: 64px;
         height: 96px;
         object-fit: cover;
-        border-radius: 4px;
-        background: #f0f0f0;
+        border-radius: var(--radius-md);
+        background: var(--surface);
     }
+
     .cover-placeholder {
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 1.5rem;
-        color: #999;
+        color: var(--text-muted);
         user-select: none;
     }
+
     .meta {
         display: flex;
         flex-direction: column;
-        gap: 0.15rem;
+        gap: var(--space-1);
         min-width: 0;
     }
+
     .title {
-        font-weight: 600;
-        font-size: 1rem;
+        font-weight: var(--weight-semibold);
+        font-size: var(--font-base);
+        color: var(--text);
     }
+
+    .title:hover {
+        color: var(--primary);
+    }
+
     .target {
-        font-size: 0.95rem;
+        font-size: var(--font-sm);
     }
+
     .muted {
-        color: #888;
+        color: var(--text-muted);
     }
+
     .created {
-        color: #888;
-        font-size: 0.85rem;
+        color: var(--text-muted);
+        font-size: var(--font-xs);
+    }
+
+    .error {
+        color: var(--danger);
+    }
+
+    .hint {
+        color: var(--text-muted);
     }
 </style>
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index 682885c..21f3394 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -26,8 +26,8 @@
 
 <h1>Log in</h1>
 <form onsubmit={submit} action="javascript:void(0)" data-testid="login-form">
-    <label>
-        Username
+    <label class="form-field">
+        <span>Username</span>
         <input
             type="text"
             bind:value={username}
@@ -36,8 +36,8 @@
             data-testid="login-username"
         />
     </label>
-    <label>
-        Password
+    <label class="form-field">
+        <span>Password</span>
         <input
             type="password"
             bind:value={password}
@@ -46,14 +46,14 @@
             data-testid="login-password"
         />
     </label>
-    <button type="submit" disabled={submitting} data-testid="login-submit">
+    <button class="primary" type="submit" disabled={submitting} data-testid="login-submit">
         {submitting ? 'Logging in…' : 'Log in'}
     </button>
     {#if error}
-        <p role="alert" data-testid="login-error">{error}</p>
+        <p class="form-error" role="alert" data-testid="login-error">{error}</p>
     {/if}
 </form>
-<p>
+<p class="hint">
     No account? <a href="/register">Register</a>.
 </p>
 
@@ -61,12 +61,30 @@
     form {
         display: flex;
         flex-direction: column;
-        gap: 0.75rem;
+        gap: var(--space-3);
         max-width: 24rem;
     }
-    label {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
+
+    .primary {
+        background: var(--primary);
+        color: var(--primary-contrast);
+        border-color: var(--primary);
+        margin-top: var(--space-1);
+    }
+
+    .primary:hover:not(:disabled) {
+        background: var(--primary-hover);
+        border-color: var(--primary-hover);
+    }
+
+    .form-error {
+        color: var(--danger);
+        font-size: var(--font-sm);
+    }
+
+    .hint {
+        margin-top: var(--space-3);
+        color: var(--text-muted);
+        font-size: var(--font-sm);
     }
 </style>
diff --git a/frontend/src/routes/manga/[id]/+page.svelte b/frontend/src/routes/manga/[id]/+page.svelte
index ee26917..5a20a68 100644
--- a/frontend/src/routes/manga/[id]/+page.svelte
+++ b/frontend/src/routes/manga/[id]/+page.svelte
@@ -105,53 +105,79 @@
     .overview {
         display: grid;
         grid-template-columns: minmax(0, 200px) 1fr;
-        gap: 1rem;
+        gap: var(--space-4);
         align-items: start;
+        margin-bottom: var(--space-6);
     }
+
     @media (max-width: 640px) {
         .overview {
             grid-template-columns: 1fr;
         }
     }
+
     .cover {
         width: 100%;
         height: auto;
-        border-radius: 4px;
-    }
-    .meta h1 {
-        margin: 0 0 0.5rem;
+        border-radius: var(--radius-md);
+        background: var(--surface);
     }
+
     .author {
-        color: #555;
-        margin: 0 0 0.75rem;
+        color: var(--text-muted);
+        margin: 0 0 var(--space-3);
     }
+
     .description {
         white-space: pre-wrap;
+        color: var(--text);
+        margin-bottom: var(--space-3);
     }
+
     .bookmark {
-        display: inline-block;
-        margin-top: 0.5rem;
-        padding: 0.4rem 0.75rem;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        background: #fafafa;
-        color: inherit;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        margin-top: var(--space-2);
+        padding: 0 var(--space-3);
+        height: 36px;
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-md);
+        background: var(--surface);
+        color: var(--text);
         text-decoration: none;
         cursor: pointer;
+        font-size: var(--font-sm);
+        font-weight: var(--weight-medium);
+        transition:
+            background var(--transition),
+            border-color var(--transition),
+            color var(--transition);
     }
-    .bookmark:focus-visible {
-        outline: 2px solid #06f;
-        outline-offset: 2px;
+
+    .bookmark:hover {
+        background: var(--surface-elevated);
+        text-decoration: none;
     }
+
     .bookmark.active {
-        background: #ffeebb;
-        border-color: #d6a800;
+        background: var(--warning-soft-bg);
+        border-color: var(--warning-border);
+        color: var(--text);
     }
+
     .chapter-list {
-        padding-left: 1.5rem;
+        padding-left: var(--space-6);
+        color: var(--text);
     }
+
+    .chapter-list li {
+        padding: var(--space-1) 0;
+    }
+
     .pages {
-        color: #777;
-        margin-left: 0.5rem;
+        color: var(--text-muted);
+        margin-left: var(--space-2);
+        font-size: var(--font-sm);
     }
 </style>
diff --git a/frontend/src/routes/manga/[id]/chapter/[n]/+page.svelte b/frontend/src/routes/manga/[id]/chapter/[n]/+page.svelte
index 13edaf9..966990c 100644
--- a/frontend/src/routes/manga/[id]/chapter/[n]/+page.svelte
+++ b/frontend/src/routes/manga/[id]/chapter/[n]/+page.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
     import { onMount, onDestroy } from 'svelte';
     import { fileUrl } from '$lib/api/client';
+    import ChevronLeft from '@lucide/svelte/icons/chevron-left';
+    import ChevronRight from '@lucide/svelte/icons/chevron-right';
+    import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+    import BookImage from '@lucide/svelte/icons/book-image';
 
     let { data } = $props();
     const manga = $derived(data.manga);
@@ -71,6 +75,7 @@
 
 <nav class="reader-nav" aria-label="reader">
     <a href="/manga/{manga.id}" class="back" data-testid="back-to-manga">
+        <ArrowLeft size={18} aria-hidden="true" />
         {#if manga.cover_image_path}
             <img
                 src={fileUrl(manga.cover_image_path)}
@@ -79,9 +84,11 @@
                 loading="lazy"
             />
         {:else}
-            <span class="back-cover back-cover-placeholder" aria-hidden="true">📖</span>
+            <span class="back-cover back-cover-placeholder" aria-hidden="true">
+                <BookImage size={14} aria-hidden="true" />
+            </span>
         {/if}
-        <span class="back-text">← {manga.title}</span>
+        <span class="back-text">{manga.title}</span>
     </a>
     <span class="indicator" data-testid="page-indicator">
         Page {index + 1} / {pages.length}
@@ -89,7 +96,7 @@
 </nav>
 
 {#if pages.length === 0}
-    <p data-testid="reader-empty">This chapter has no pages yet.</p>
+    <p class="empty" data-testid="reader-empty">This chapter has no pages yet.</p>
 {:else}
     <div class="page-wrap">
         <button
@@ -100,7 +107,7 @@
             aria-label="Previous page"
             data-testid="reader-prev"
         >
-            ‹
+            <ChevronLeft size={22} aria-hidden="true" />
         </button>
 
         <img
@@ -119,7 +126,7 @@
             aria-label="Next page"
             data-testid="reader-next"
         >
-            ›
+            <ChevronRight size={22} aria-hidden="true" />
         </button>
 
         <!-- Preload the next page in a hidden img so it's already cached
@@ -142,47 +149,65 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding-bottom: 0.5rem;
-        border-bottom: 1px solid #eee;
-        margin-bottom: 0.75rem;
-        gap: 0.75rem;
+        padding-bottom: var(--space-2);
+        border-bottom: 1px solid var(--border);
+        margin-bottom: var(--space-3);
+        gap: var(--space-3);
     }
+
     .back {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
+        gap: var(--space-2);
         min-width: 0;
+        color: var(--text);
     }
+
+    .back:hover {
+        color: var(--primary);
+        text-decoration: none;
+    }
+
     .back-cover {
         width: 28px;
         height: 42px;
         object-fit: cover;
-        border-radius: 3px;
-        background: #f0f0f0;
+        border-radius: var(--radius-sm);
+        background: var(--surface);
         flex-shrink: 0;
     }
+
     .back-cover-placeholder {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        font-size: 1rem;
-        color: #999;
+        color: var(--text-muted);
     }
+
     .back-text {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        font-weight: var(--weight-medium);
     }
+
     .indicator {
-        color: #555;
+        color: var(--text-muted);
         flex-shrink: 0;
+        font-size: var(--font-sm);
     }
+
+    .empty {
+        color: var(--text-muted);
+    }
+
     .page-wrap {
         display: grid;
         grid-template-columns: auto 1fr auto;
-        gap: 0.5rem;
+        gap: var(--space-2);
         align-items: center;
     }
+
     .page-image {
         max-width: 100%;
         max-height: 90vh;
@@ -190,25 +215,38 @@
         margin: 0 auto;
         display: block;
     }
+
     .nav {
-        font-size: 2rem;
-        padding: 0.5rem 1rem;
-        background: #f5f5f5;
-        border: 1px solid #ddd;
-        border-radius: 4px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 44px;
+        height: 44px;
+        padding: 0;
+        background: var(--surface);
+        color: var(--text);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-md);
         cursor: pointer;
+        transition:
+            background var(--transition),
+            border-color var(--transition);
     }
+
+    .nav:hover:not(:disabled) {
+        background: var(--surface-elevated);
+        border-color: var(--primary);
+    }
+
     .nav:disabled {
         opacity: 0.4;
         cursor: not-allowed;
     }
-    .nav:focus-visible {
-        outline: 2px solid #06f;
-        outline-offset: 2px;
-    }
+
     .preload {
         display: none;
     }
+
     @media (max-width: 640px) {
         .page-wrap {
             grid-template-columns: 1fr;
diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
index fb5a25f..626609f 100644
--- a/frontend/src/routes/register/+page.svelte
+++ b/frontend/src/routes/register/+page.svelte
@@ -26,8 +26,8 @@
 
 <h1>Register</h1>
 <form onsubmit={submit} action="javascript:void(0)" data-testid="register-form">
-    <label>
-        Username
+    <label class="form-field">
+        <span>Username</span>
         <input
             type="text"
             bind:value={username}
@@ -38,8 +38,8 @@
             data-testid="register-username"
         />
     </label>
-    <label>
-        Password
+    <label class="form-field">
+        <span>Password</span>
         <input
             type="password"
             bind:value={password}
@@ -49,14 +49,14 @@
             data-testid="register-password"
         />
     </label>
-    <button type="submit" disabled={submitting} data-testid="register-submit">
+    <button class="primary" type="submit" disabled={submitting} data-testid="register-submit">
         {submitting ? 'Registering…' : 'Register'}
     </button>
     {#if error}
-        <p role="alert" data-testid="register-error">{error}</p>
+        <p class="form-error" role="alert" data-testid="register-error">{error}</p>
     {/if}
 </form>
-<p>
+<p class="hint">
     Already have an account? <a href="/login">Log in</a>.
 </p>
 
@@ -64,12 +64,30 @@
     form {
         display: flex;
         flex-direction: column;
-        gap: 0.75rem;
+        gap: var(--space-3);
         max-width: 24rem;
     }
-    label {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
+
+    .primary {
+        background: var(--primary);
+        color: var(--primary-contrast);
+        border-color: var(--primary);
+        margin-top: var(--space-1);
+    }
+
+    .primary:hover:not(:disabled) {
+        background: var(--primary-hover);
+        border-color: var(--primary-hover);
+    }
+
+    .form-error {
+        color: var(--danger);
+        font-size: var(--font-sm);
+    }
+
+    .hint {
+        margin-top: var(--space-3);
+        color: var(--text-muted);
+        font-size: var(--font-sm);
     }
 </style>
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 46fc15e..c2954eb 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -3,6 +3,14 @@
     import { changePassword } from '$lib/api/auth';
     import { ApiError } from '$lib/api/client';
     import { session } from '$lib/session.svelte';
+    import { theme, type Theme } from '$lib/theme.svelte';
+    import Monitor from '@lucide/svelte/icons/monitor';
+    import Sun from '@lucide/svelte/icons/sun';
+    import Moon from '@lucide/svelte/icons/moon';
+
+    function setTheme(next: Theme) {
+        theme.set(next);
+    }
 
     let currentPassword = $state('');
     let newPassword = $state('');
@@ -57,10 +65,53 @@
 
 <h1>Settings</h1>
 
+<section class="card" aria-label="Appearance">
+    <h2>Appearance</h2>
+    <fieldset class="theme-picker">
+        <legend>Theme</legend>
+        <label class="theme-option" class:selected={theme.value === 'system'}>
+            <input
+                type="radio"
+                name="theme"
+                value="system"
+                checked={theme.value === 'system'}
+                onchange={() => setTheme('system')}
+                data-testid="theme-radio-system"
+            />
+            <Monitor size={18} aria-hidden="true" />
+            <span>System</span>
+        </label>
+        <label class="theme-option" class:selected={theme.value === 'light'}>
+            <input
+                type="radio"
+                name="theme"
+                value="light"
+                checked={theme.value === 'light'}
+                onchange={() => setTheme('light')}
+                data-testid="theme-radio-light"
+            />
+            <Sun size={18} aria-hidden="true" />
+            <span>Light</span>
+        </label>
+        <label class="theme-option" class:selected={theme.value === 'dark'}>
+            <input
+                type="radio"
+                name="theme"
+                value="dark"
+                checked={theme.value === 'dark'}
+                onchange={() => setTheme('dark')}
+                data-testid="theme-radio-dark"
+            />
+            <Moon size={18} aria-hidden="true" />
+            <span>Dark</span>
+        </label>
+    </fieldset>
+</section>
+
 {#if !session.loaded}
-    <p data-testid="settings-loading">Loading…</p>
+    <p class="status" data-testid="settings-loading">Loading…</p>
 {:else if !session.user}
-    <p data-testid="settings-signin">
+    <p class="status" data-testid="settings-signin">
         <a href="/login">Sign in</a> to change your password.
     </p>
 {:else}
@@ -72,8 +123,8 @@
             list if you want to invalidate them too.
         </p>
         <form onsubmit={submit} action="javascript:void(0)" data-testid="password-form">
-            <label>
-                Current password
+            <label class="form-field">
+                <span>Current password</span>
                 <input
                     type="password"
                     bind:value={currentPassword}
@@ -82,8 +133,8 @@
                     data-testid="current-password"
                 />
             </label>
-            <label>
-                New password
+            <label class="form-field">
+                <span>New password</span>
                 <input
                     type="password"
                     bind:value={newPassword}
@@ -93,8 +144,8 @@
                     data-testid="new-password"
                 />
             </label>
-            <label>
-                Confirm new password
+            <label class="form-field">
+                <span>Confirm new password</span>
                 <input
                     type="password"
                     bind:value={confirmPassword}
@@ -110,6 +161,7 @@
                 {/if}
             </label>
             <button
+                class="primary"
                 type="submit"
                 disabled={!canSubmit}
                 data-testid="password-submit"
@@ -127,34 +179,108 @@
 {/if}
 
 <style>
+    .status {
+        color: var(--text-muted);
+    }
+
     .card {
-        border: 1px solid #ddd;
-        border-radius: 6px;
-        padding: 1rem;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        padding: var(--space-4);
         max-width: 32rem;
+        margin-bottom: var(--space-4);
     }
+
     .hint {
-        color: #555;
-        font-size: 0.95rem;
+        color: var(--text-muted);
+        font-size: var(--font-sm);
     }
+
     form {
         display: flex;
         flex-direction: column;
-        gap: 0.75rem;
+        gap: var(--space-3);
     }
-    label {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
+
+    .primary {
+        background: var(--primary);
+        color: var(--primary-contrast);
+        border-color: var(--primary);
+        margin-top: var(--space-1);
+        align-self: flex-start;
     }
+
+    .primary:hover:not(:disabled) {
+        background: var(--primary-hover);
+        border-color: var(--primary-hover);
+    }
+
     .field-error {
-        color: #b00020;
-        font-size: 0.9rem;
+        color: var(--danger);
+        font-size: var(--font-sm);
     }
+
     .form-error {
-        color: #b00020;
+        color: var(--danger);
     }
+
     .success {
-        color: #0a7d2c;
+        color: var(--success);
+    }
+
+    .theme-picker {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-2);
+        border: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .theme-picker legend {
+        font-size: var(--font-sm);
+        color: var(--text);
+        padding: 0;
+        margin-bottom: var(--space-2);
+    }
+
+    .theme-option {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: var(--space-2) var(--space-3);
+        border: 1px solid var(--border-strong);
+        border-radius: var(--radius-md);
+        background: var(--surface);
+        color: var(--text);
+        font-size: var(--font-sm);
+        cursor: pointer;
+        transition:
+            background var(--transition),
+            border-color var(--transition);
+    }
+
+    .theme-option:hover {
+        background: var(--surface-elevated);
+    }
+
+    .theme-option input[type='radio'] {
+        position: absolute;
+        opacity: 0;
+        pointer-events: none;
+        width: 0;
+        height: 0;
+    }
+
+    .theme-option.selected {
+        background: var(--primary-soft-bg);
+        border-color: var(--primary);
+        color: var(--text);
+    }
+
+    .theme-option:has(input:focus-visible) {
+        outline: 2px solid var(--focus-ring);
+        outline-offset: 2px;
     }
 </style>
diff --git a/frontend/src/routes/upload/+page.svelte b/frontend/src/routes/upload/+page.svelte
index 90870b2..84f6efc 100644
--- a/frontend/src/routes/upload/+page.svelte
+++ b/frontend/src/routes/upload/+page.svelte
@@ -5,6 +5,11 @@
     import { request } from '$lib/api/client';
     import { session } from '$lib/session.svelte';
     import { formatBytes, validateImageFile } from '$lib/upload-validation';
+    import ArrowUp from '@lucide/svelte/icons/arrow-up';
+    import ArrowDown from '@lucide/svelte/icons/arrow-down';
+    import Trash2 from '@lucide/svelte/icons/trash-2';
+    import UploadCloud from '@lucide/svelte/icons/upload-cloud';
+    import BookImage from '@lucide/svelte/icons/book-image';
 
     let { data } = $props();
     const mangas = $derived(data.mangas);
@@ -190,17 +195,17 @@
 <h1>Upload</h1>
 
 {#if !session.loaded}
-    <p data-testid="upload-loading">Loading…</p>
+    <p class="status" data-testid="upload-loading">Loading…</p>
 {:else if !session.user}
-    <p data-testid="upload-signin">
+    <p class="status" data-testid="upload-signin">
         <a href="/login">Sign in</a> to upload mangas or chapters.
     </p>
 {:else}
     <section class="card">
         <h2>Create manga</h2>
         <form onsubmit={submitManga} action="javascript:void(0)" data-testid="manga-form">
-            <label>
-                Title <span aria-hidden="true">*</span>
+            <label class="form-field">
+                <span>Title <span aria-hidden="true">*</span></span>
                 <input
                     type="text"
                     bind:value={mangaTitle}
@@ -212,8 +217,8 @@
                     <span class="field-error" role="alert">{mangaFieldErrors.title}</span>
                 {/if}
             </label>
-            <label>
-                Author
+            <label class="form-field">
+                <span>Author</span>
                 <input
                     type="text"
                     bind:value={mangaAuthor}
@@ -221,16 +226,16 @@
                     data-testid="manga-author"
                 />
             </label>
-            <label>
-                Description
+            <label class="form-field">
+                <span>Description</span>
                 <textarea
                     bind:value={mangaDescription}
                     rows="4"
                     data-testid="manga-description"
                 ></textarea>
             </label>
-            <label>
-                Cover (optional)
+            <label class="form-field">
+                <span>Cover (optional)</span>
                 <input
                     type="file"
                     accept="image/*"
@@ -244,7 +249,7 @@
                     <span class="field-error" role="alert">{coverError}</span>
                 {/if}
             </label>
-            <button type="submit" disabled={!canSubmitManga} data-testid="manga-submit">
+            <button class="primary" type="submit" disabled={!canSubmitManga} data-testid="manga-submit">
                 {mangaSubmitting ? 'Creating…' : 'Create manga'}
             </button>
             {#if mangaSuccess}
@@ -259,7 +264,7 @@
     <section class="card">
         <h2>Upload chapter</h2>
         {#if mangas.length === 0}
-            <p data-testid="chapter-no-mangas">
+            <p class="status" data-testid="chapter-no-mangas">
                 No mangas yet — create one above first.
             </p>
         {:else}
@@ -268,8 +273,8 @@
                 action="javascript:void(0)"
                 data-testid="chapter-form"
             >
-                <label>
-                    Manga <span aria-hidden="true">*</span>
+                <label class="form-field">
+                    <span>Manga <span aria-hidden="true">*</span></span>
                     <select
                         bind:value={chapterMangaId}
                         required
@@ -293,7 +298,9 @@
                                 loading="lazy"
                             />
                         {:else}
-                            <span class="preview-cover preview-cover-placeholder" aria-hidden="true">📖</span>
+                            <span class="preview-cover preview-cover-placeholder" aria-hidden="true">
+                                <BookImage size={22} aria-hidden="true" />
+                            </span>
                         {/if}
                         <div class="preview-meta">
                             <span class="preview-title">{selectedManga.title}</span>
@@ -303,8 +310,8 @@
                         </div>
                     </div>
                 {/if}
-                <label>
-                    Chapter number <span aria-hidden="true">*</span>
+                <label class="form-field">
+                    <span>Chapter number <span aria-hidden="true">*</span></span>
                     <input
                         type="number"
                         min="1"
@@ -314,8 +321,8 @@
                         data-testid="chapter-number"
                     />
                 </label>
-                <label>
-                    Title (optional)
+                <label class="form-field">
+                    <span>Title (optional)</span>
                     <input
                         type="text"
                         bind:value={chapterTitle}
@@ -334,6 +341,7 @@
                     aria-label="page upload"
                     data-testid="drop-zone"
                 >
+                    <UploadCloud size={32} aria-hidden="true" class="drop-icon" />
                     <p>
                         Drop pages here, or
                         <label class="file-link">
@@ -356,28 +364,34 @@
                                 <span class="page-name">{p.file.name}</span>
                                 <span class="page-size">{formatBytes(p.file.size)}</span>
                                 <button
+                                    class="icon-btn"
                                     type="button"
                                     onclick={() => movePage(p.id, -1)}
                                     disabled={i === 0}
                                     aria-label="Move up"
+                                    title="Move up"
                                 >
-                                    ↑
+                                    <ArrowUp size={16} aria-hidden="true" />
                                 </button>
                                 <button
+                                    class="icon-btn"
                                     type="button"
                                     onclick={() => movePage(p.id, 1)}
                                     disabled={i === chapterPages.length - 1}
                                     aria-label="Move down"
+                                    title="Move down"
                                 >
-                                    ↓
+                                    <ArrowDown size={16} aria-hidden="true" />
                                 </button>
                                 <button
+                                    class="icon-btn danger"
                                     type="button"
                                     onclick={() => removePage(p.id)}
-                                    aria-label="Remove"
+                                    aria-label="Remove page"
+                                    title="Remove page"
                                     data-testid="page-remove"
                                 >
-                                    Remove
+                                    <Trash2 size={16} aria-hidden="true" />
                                 </button>
                                 {#if p.error}
                                     <span class="field-error" role="alert">{p.error}</span>
@@ -388,6 +402,7 @@
                 {/if}
 
                 <button
+                    class="primary"
                     type="submit"
                     disabled={!canSubmitChapter}
                     data-testid="chapter-submit"
@@ -408,113 +423,182 @@
 {/if}
 
 <style>
-    .card {
-        border: 1px solid #ddd;
-        border-radius: 6px;
-        padding: 1rem;
-        margin-bottom: 1rem;
+    .status {
+        color: var(--text-muted);
     }
+
+    .card {
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        padding: var(--space-4);
+        margin-bottom: var(--space-4);
+    }
+
     form {
         display: flex;
         flex-direction: column;
-        gap: 0.75rem;
+        gap: var(--space-3);
     }
-    label {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
+
+    .primary {
+        background: var(--primary);
+        color: var(--primary-contrast);
+        border-color: var(--primary);
+        margin-top: var(--space-1);
+        align-self: flex-start;
     }
+
+    .primary:hover:not(:disabled) {
+        background: var(--primary-hover);
+        border-color: var(--primary-hover);
+    }
+
     .hint {
-        color: #666;
-        font-size: 0.9rem;
+        color: var(--text-muted);
+        font-size: var(--font-sm);
     }
+
     .field-error {
-        color: #b00020;
-        font-size: 0.9rem;
+        color: var(--danger);
+        font-size: var(--font-sm);
     }
+
     .form-error {
-        color: #b00020;
+        color: var(--danger);
     }
+
     .success {
-        color: #0a7d2c;
+        color: var(--success);
     }
+
     .manga-preview {
         display: flex;
         align-items: center;
-        gap: 0.75rem;
-        padding: 0.5rem;
-        border: 1px solid #eee;
-        border-radius: 4px;
-        background: #fafafa;
+        gap: var(--space-3);
+        padding: var(--space-2);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-md);
+        background: var(--surface-elevated);
     }
+
     .preview-cover {
         width: 48px;
         height: 72px;
         object-fit: cover;
-        border-radius: 3px;
-        background: #f0f0f0;
+        border-radius: var(--radius-sm);
+        background: var(--surface);
         flex-shrink: 0;
     }
+
     .preview-cover-placeholder {
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        font-size: 1.5rem;
-        color: #999;
+        color: var(--text-muted);
     }
+
     .preview-meta {
         display: flex;
         flex-direction: column;
         min-width: 0;
     }
+
     .preview-title {
-        font-weight: 600;
+        font-weight: var(--weight-semibold);
+        color: var(--text);
     }
+
     .preview-author {
-        color: #777;
-        font-size: 0.85rem;
+        color: var(--text-muted);
+        font-size: var(--font-sm);
     }
+
     .drop-zone {
-        border: 2px dashed #aaa;
-        border-radius: 6px;
-        padding: 1.5rem;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-2);
+        border: 2px dashed var(--border-strong);
+        border-radius: var(--radius-md);
+        padding: var(--space-6);
         text-align: center;
-        background: #fafafa;
+        background: var(--surface);
+        color: var(--text-muted);
+        transition:
+            background var(--transition),
+            border-color var(--transition);
     }
+
+    .drop-zone :global(.drop-icon) {
+        color: var(--text-muted);
+    }
+
     .drop-zone.drag-over {
-        background: #eef6ff;
-        border-color: #06f;
+        background: var(--primary-soft-bg);
+        border-color: var(--primary);
     }
+
     .file-link input[type='file'] {
         display: none;
     }
+
     .file-link {
-        color: #06f;
+        color: var(--primary);
         text-decoration: underline;
         cursor: pointer;
     }
+
     .pages {
         padding: 0;
+        margin: 0;
         list-style: decimal inside;
     }
+
     .pages li {
         display: flex;
         align-items: center;
-        gap: 0.5rem;
-        padding: 0.25rem 0;
-        border-bottom: 1px solid #eee;
+        gap: var(--space-2);
+        padding: var(--space-1) var(--space-2);
+        border-bottom: 1px solid var(--border);
     }
+
     .pages li.invalid {
-        background: #fff5f5;
+        background: var(--danger-soft-bg);
     }
+
     .page-name {
         flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
+
     .page-size {
-        color: #777;
+        color: var(--text-muted);
+        font-size: var(--font-sm);
     }
-    button:focus-visible {
-        outline: 2px solid #06f;
-        outline-offset: 2px;
+
+    .icon-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        background: transparent;
+        color: var(--text-muted);
+        border: 1px solid transparent;
+        border-radius: var(--radius-sm);
+    }
+
+    .icon-btn:hover:not(:disabled) {
+        background: var(--surface-elevated);
+        color: var(--text);
+    }
+
+    .icon-btn.danger:hover:not(:disabled) {
+        color: var(--danger);
     }
 </style>