diff --git a/web/src/lib/components/album/AlbumCard.svelte b/web/src/lib/components/album/AlbumCard.svelte
index 9d855b0..f224b48 100644
--- a/web/src/lib/components/album/AlbumCard.svelte
+++ b/web/src/lib/components/album/AlbumCard.svelte
@@ -9,6 +9,9 @@
 	/** @type {AlbumCardProps} */
 	let { album } = $props();
 
+	/**
+	 * @param {string} dateString
+	 */
 	function formatDate(dateString) {
 		return new Date(dateString).toLocaleDateString();
 	}
@@ -25,37 +28,37 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		padding: 2rem;
-		background: #f9fafb;
-		border-radius: 12px;
+		padding: var(--space-xl);
+		background: var(--color-bg-secondary);
+		border-radius: var(--radius-lg);
 		text-decoration: none;
 		color: inherit;
 		transition:
-			transform 0.2s,
-			box-shadow 0.2s;
+			transform var(--transition-normal),
+			box-shadow var(--transition-normal);
 	}
 
 	.album-card:hover {
 		transform: translateY(-4px);
-		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+		box-shadow: var(--shadow-lg);
 	}
 
 	.album-icon {
-		font-size: 4rem;
-		margin-bottom: 1rem;
+		font-size: var(--space-3xl);
+		margin-bottom: var(--space-md);
 	}
 
 	.album-name {
-		font-size: 1.125rem;
-		font-weight: 600;
-		margin: 0 0 0.5rem 0;
-		color: #1a1a1a;
+		font-size: var(--font-size-lg);
+		font-weight: var(--font-weight-semibold);
+		margin: 0 0 var(--space-sm) 0;
+		color: var(--color-text);
 		text-align: center;
 	}
 
 	.album-date {
-		font-size: 0.875rem;
-		color: #6b7280;
+		font-size: var(--font-size-sm);
+		color: var(--color-text-secondary);
 		margin: 0;
 	}
 </style>
diff --git a/web/src/lib/components/album/AlbumList.svelte b/web/src/lib/components/album/AlbumList.svelte
index 05ab8ef..2a23d07 100644
--- a/web/src/lib/components/album/AlbumList.svelte
+++ b/web/src/lib/components/album/AlbumList.svelte
@@ -25,6 +25,6 @@
 	.album-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-		gap: 1.5rem;
+		gap: var(--space-lg);
 	}
 </style>
diff --git a/web/src/lib/components/layout/BackLink.svelte b/web/src/lib/components/layout/BackLink.svelte
index 57a3a1f..a8e9e52 100644
--- a/web/src/lib/components/layout/BackLink.svelte
+++ b/web/src/lib/components/layout/BackLink.svelte
@@ -24,22 +24,22 @@
 	.back-link {
 		display: inline-flex;
 		align-items: center;
-		gap: 0.5rem;
-		color: #3b82f6;
+		gap: var(--space-sm);
+		color: var(--color-primary);
 		text-decoration: none;
-		font-size: 1rem;
-		padding: 0.5rem 0.75rem;
-		background: rgba(59, 130, 246, 0.1);
-		border-radius: 6px;
-		transition: all 0.2s;
+		font-size: var(--font-size-base);
+		padding: var(--space-sm) var(--space-md);
+		background: var(--color-primary-light);
+		border-radius: var(--radius-md);
+		transition: all var(--transition-normal);
 	}
 
 	.back-link:hover {
-		background: rgba(59, 130, 246, 0.2);
+		background: var(--color-primary-lighter);
 	}
 
 	.back-icon {
-		font-size: 1.25rem;
+		font-size: var(--font-size-xl);
 		line-height: 1;
 	}
 
diff --git a/web/src/lib/components/layout/PageHeader.svelte b/web/src/lib/components/layout/PageHeader.svelte
index 988b859..b435ffc 100644
--- a/web/src/lib/components/layout/PageHeader.svelte
+++ b/web/src/lib/components/layout/PageHeader.svelte
@@ -29,9 +29,9 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: flex-start;
-		margin-bottom: 1rem;
+		margin-bottom: var(--space-md);
 		flex-wrap: wrap;
-		gap: 1rem;
+		gap: var(--space-md);
 		flex-shrink: 0;
 		overflow: hidden;
 	}
@@ -42,22 +42,22 @@
 	}
 
 	.header-title {
-		font-size: 2rem;
-		font-weight: 700;
-		color: #1a1a1a;
-		margin: 0 0 0.5rem 0;
+		font-size: var(--font-size-3xl);
+		font-weight: var(--font-weight-bold);
+		color: var(--color-text);
+		margin: 0 0 var(--space-sm) 0;
 	}
 
 	.header-subtitle {
-		font-size: 1rem;
-		color: #6b7280;
+		font-size: var(--font-size-base);
+		color: var(--color-text-secondary);
 		margin: 0;
 	}
 
 	.header-actions {
 		display: flex;
 		align-items: center;
-		gap: 0.75rem;
+		gap: var(--space-sm);
 		flex-shrink: 0;
 	}
 
diff --git a/web/src/lib/components/photo/PhotoCard.svelte b/web/src/lib/components/photo/PhotoCard.svelte
index 653a072..222105d 100644
--- a/web/src/lib/components/photo/PhotoCard.svelte
+++ b/web/src/lib/components/photo/PhotoCard.svelte
@@ -60,19 +60,19 @@
 	.photo-wrapper {
 		position: relative;
 		aspect-ratio: 1;
-		background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
-		border-radius: 8px;
+		background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-border) 100%);
+		border-radius: var(--radius-md);
 		overflow: hidden;
-		margin-bottom: 0.5rem;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+		margin-bottom: var(--space-sm);
+		box-shadow: var(--shadow-sm);
 	}
 
 	.photo-wrapper img {
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
-		transition: transform 0.3s ease;
-		background: #e5e7eb;
+		transition: transform var(--transition-slow);
+		background: var(--color-border);
 	}
 
 	.photo-card:hover .photo-wrapper img {
@@ -85,33 +85,33 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: #6b7280;
-		font-size: 0.875rem;
-		padding: 1rem;
+		color: var(--color-text-secondary);
+		font-size: var(--font-size-sm);
+		padding: var(--space-md);
 		text-align: center;
 		word-break: break-word;
 	}
 
 	.video-indicator {
 		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
-		background: rgba(0, 0, 0, 0.75);
-		color: white;
-		padding: 0.35rem 0.6rem;
-		border-radius: 6px;
-		font-size: 0.875rem;
+		top: var(--space-sm);
+		right: var(--space-sm);
+		background: var(--color-overlay-dark);
+		color: var(--color-text-inverse);
+		padding: 0.35rem var(--space-sm);
+		border-radius: var(--radius-md);
+		font-size: var(--font-size-sm);
 		z-index: 1;
 		backdrop-filter: blur(4px);
 	}
 
 	.photo-name {
-		font-size: 0.875rem;
-		color: #374151;
+		font-size: var(--font-size-sm);
+		color: var(--color-text);
 		margin: 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		padding: 0 0.25rem;
+		padding: 0 var(--space-xs);
 	}
 </style>
diff --git a/web/src/lib/components/photo/PhotoGrid.svelte b/web/src/lib/components/photo/PhotoGrid.svelte
index 98878d4..57a2623 100644
--- a/web/src/lib/components/photo/PhotoGrid.svelte
+++ b/web/src/lib/components/photo/PhotoGrid.svelte
@@ -71,24 +71,24 @@
 	}
 
 	.photo-scroll-container::-webkit-scrollbar-track {
-		background: #f1f1f1;
-		border-radius: 4px;
+		background: var(--color-bg-tertiary);
+		border-radius: var(--radius-sm);
 	}
 
 	.photo-scroll-container::-webkit-scrollbar-thumb {
-		background: #c1c1c1;
-		border-radius: 4px;
+		background: var(--color-border);
+		border-radius: var(--radius-sm);
 	}
 
 	.photo-scroll-container::-webkit-scrollbar-thumb:hover {
-		background: #a1a1a1;
+		background: var(--color-text-tertiary);
 	}
 
 	.photo-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-		gap: 1rem;
-		padding-bottom: 2rem;
+		gap: var(--space-md);
+		padding-bottom: var(--space-xl);
 	}
 
 	@media (min-width: 768px) {
@@ -100,20 +100,20 @@
 	.load-more-trigger,
 	.loading-trigger {
 		text-align: center;
-		padding: 2rem;
+		padding: var(--space-xl);
 	}
 
 	.loading-more {
 		display: inline-block;
-		color: #6b7280;
-		font-size: 0.95rem;
+		color: var(--color-text-secondary);
+		font-size: var(--font-size-base);
 	}
 
 	.load-complete {
 		text-align: center;
-		padding: 2rem;
-		color: #10b981;
-		font-size: 0.875rem;
-		font-weight: 500;
+		padding: var(--space-xl);
+		color: var(--color-success);
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-medium);
 	}
 </style>
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 5c96eac..4c20084 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -30,10 +30,10 @@
 		align-items: center;
 		justify-content: center;
 		border: none;
-		border-radius: 8px;
-		font-weight: 500;
+		border-radius: var(--radius-md);
+		font-weight: var(--font-weight-medium);
 		cursor: pointer;
-		transition: all 0.2s;
+		transition: all var(--transition-normal);
 		text-decoration: none;
 	}
 
@@ -44,55 +44,55 @@
 
 	/* Variants */
 	.btn-primary {
-		background: #3b82f6;
-		color: white;
+		background: var(--color-primary);
+		color: var(--color-text-inverse);
 	}
 
 	.btn-primary:hover:not(:disabled) {
-		background: #2563eb;
+		background: var(--color-primary-hover);
 		transform: translateY(-1px);
 	}
 
 	.btn-secondary {
-		background: #f3f4f6;
-		color: #374151;
+		background: var(--color-bg-tertiary);
+		color: var(--color-text);
 	}
 
 	.btn-secondary:hover:not(:disabled) {
-		background: #e5e7eb;
+		background: var(--color-border);
 	}
 
 	.btn-ghost {
 		background: transparent;
-		color: #3b82f6;
+		color: var(--color-primary);
 	}
 
 	.btn-ghost:hover:not(:disabled) {
-		background: rgba(59, 130, 246, 0.1);
+		background: var(--color-primary-light);
 	}
 
 	.btn-danger {
-		background: #ef4444;
-		color: white;
+		background: var(--color-error);
+		color: var(--color-text-inverse);
 	}
 
 	.btn-danger:hover:not(:disabled) {
-		background: #dc2626;
+		background: var(--color-error-hover);
 	}
 
 	/* Sizes */
 	.btn-small {
-		padding: 0.5rem 1rem;
-		font-size: 0.875rem;
+		padding: var(--space-sm) var(--space-md);
+		font-size: var(--font-size-sm);
 	}
 
 	.btn-medium {
-		padding: 0.625rem 1.25rem;
-		font-size: 0.95rem;
+		padding: 0.625rem var(--space-lg);
+		font-size: var(--font-size-base);
 	}
 
 	.btn-large {
-		padding: 0.75rem 1.5rem;
-		font-size: 1rem;
+		padding: var(--space-md) var(--space-xl);
+		font-size: var(--font-size-lg);
 	}
 </style>
diff --git a/web/src/lib/components/ui/Card.svelte b/web/src/lib/components/ui/Card.svelte
index e40d531..961ed5d 100644
--- a/web/src/lib/components/ui/Card.svelte
+++ b/web/src/lib/components/ui/Card.svelte
@@ -25,18 +25,18 @@
 	.card {
 		display: flex;
 		flex-direction: column;
-		background: #f9fafb;
-		border-radius: 12px;
+		background: var(--color-bg-secondary);
+		border-radius: var(--radius-lg);
 		overflow: hidden;
-		transition: all 0.2s;
+		transition: all var(--transition-normal);
 	}
 
 	.card-default {
-		padding: 1.5rem;
+		padding: var(--space-lg);
 	}
 
 	.card-interactive {
-		padding: 2rem;
+		padding: var(--space-xl);
 		text-decoration: none;
 		color: inherit;
 		cursor: pointer;
@@ -44,13 +44,11 @@
 
 	.card-interactive:hover {
 		transform: translateY(-4px);
-		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+		box-shadow: var(--shadow-lg);
 	}
 
 	.card-elevated {
-		padding: 1.5rem;
-		box-shadow:
-			0 4px 6px -1px rgba(0, 0, 0, 0.1),
-			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		padding: var(--space-lg);
+		box-shadow: var(--shadow-md);
 	}
 </style>
diff --git a/web/src/lib/components/ui/Container.svelte b/web/src/lib/components/ui/Container.svelte
index 393569f..3eb2307 100644
--- a/web/src/lib/components/ui/Container.svelte
+++ b/web/src/lib/components/ui/Container.svelte
@@ -17,7 +17,7 @@
 	.container {
 		width: 100%;
 		margin: 0 auto;
-		padding: 2rem;
+		padding: var(--space-xl);
 		min-height: calc(100vh - 4rem);
 		display: flex;
 		flex-direction: column;
@@ -26,14 +26,14 @@
 	}
 
 	.container-default {
-		max-width: 1200px;
+		max-width: var(--container-max);
 	}
 
 	.container-wide {
-		max-width: 1400px;
+		max-width: var(--container-wide-max);
 	}
 
 	.container-narrow {
-		max-width: 800px;
+		max-width: var(--container-narrow-max);
 	}
 </style>
diff --git a/web/src/lib/components/ui/Empty.svelte b/web/src/lib/components/ui/Empty.svelte
index 884af11..ead871d 100644
--- a/web/src/lib/components/ui/Empty.svelte
+++ b/web/src/lib/components/ui/Empty.svelte
@@ -26,23 +26,23 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		padding: 4rem 2rem;
+		padding: var(--space-3xl) var(--space-xl);
 		text-align: center;
 	}
 
 	.empty-icon {
-		font-size: 4rem;
-		margin-bottom: 1rem;
+		font-size: var(--space-3xl);
+		margin-bottom: var(--space-md);
 		opacity: 0.5;
 	}
 
 	.empty-message {
-		color: #666;
-		font-size: 1.125rem;
-		margin: 0 0 1.5rem 0;
+		color: var(--color-text-secondary);
+		font-size: var(--font-size-lg);
+		margin: 0 0 var(--space-lg) 0;
 	}
 
 	.empty-action {
-		margin-top: 0.5rem;
+		margin-top: var(--space-sm);
 	}
 </style>
diff --git a/web/src/lib/components/ui/Loading.svelte b/web/src/lib/components/ui/Loading.svelte
index 63938b8..b96d9f2 100644
--- a/web/src/lib/components/ui/Loading.svelte
+++ b/web/src/lib/components/ui/Loading.svelte
@@ -22,21 +22,21 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		padding: 2rem;
+		padding: var(--space-xl);
 	}
 
 	.loading-small {
-		padding: 1rem;
+		padding: var(--space-md);
 	}
 
 	.loading-large {
-		padding: 4rem;
+		padding: var(--space-3xl);
 	}
 
 	.spinner {
-		border: 3px solid rgba(0, 0, 0, 0.1);
-		border-top-color: #3b82f6;
-		border-radius: 50%;
+		border: 3px solid var(--color-overlay-light);
+		border-top-color: var(--color-primary);
+		border-radius: var(--radius-full);
 		animation: spin 1s linear infinite;
 	}
 
@@ -58,9 +58,9 @@
 	}
 
 	.loading-message {
-		margin-top: 1rem;
-		color: #6b7280;
-		font-size: 0.95rem;
+		margin-top: var(--space-md);
+		color: var(--color-text-secondary);
+		font-size: var(--font-size-base);
 	}
 
 	@keyframes spin {
diff --git a/web/src/lib/styles/global.css b/web/src/lib/styles/global.css
new file mode 100644
index 0000000..9a19359
--- /dev/null
+++ b/web/src/lib/styles/global.css
@@ -0,0 +1,109 @@
+/* Loongyan Photo Album - Global Styles */
+@import './theme.css';
+
+/* ========== Reset & Base ========== */
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+html {
+	font-family: var(--font-family);
+	font-size: 16px;
+	line-height: var(--line-height-normal);
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	background-color: var(--color-bg);
+	color: var(--color-text);
+	min-height: 100vh;
+}
+
+a {
+	color: var(--color-primary);
+	text-decoration: none;
+	transition: color var(--transition-fast);
+}
+
+a:hover {
+	color: var(--color-primary-hover);
+}
+
+img,
+video {
+	max-width: 100%;
+	height: auto;
+	display: block;
+}
+
+button {
+	font-family: inherit;
+	cursor: pointer;
+}
+
+input,
+textarea,
+select {
+	font-family: inherit;
+	font-size: inherit;
+}
+
+/* ========== Utility Classes ========== */
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.truncate {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* ========== Scrollbar ========== */
+::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background: var(--color-bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+	background: var(--color-border);
+	border-radius: var(--radius-full);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background: var(--color-text-tertiary);
+}
+
+/* ========== Focus Styles ========== */
+:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+}
+
+button:focus:not(:focus-visible),
+a:focus:not(:focus-visible) {
+	outline: none;
+}
+
+/* ========== Selection ========== */
+::selection {
+	background: var(--color-primary-lighter);
+	color: var(--color-text);
+}
diff --git a/web/src/lib/styles/theme.css b/web/src/lib/styles/theme.css
new file mode 100644
index 0000000..303a18a
--- /dev/null
+++ b/web/src/lib/styles/theme.css
@@ -0,0 +1,155 @@
+/* Loongyan Photo Album - Theme Variables */
+
+:root {
+	/* ========== Colors ========== */
+	/* Primary */
+	--color-primary: #3b82f6;
+	--color-primary-hover: #2563eb;
+	--color-primary-light: rgba(59, 130, 246, 0.1);
+	--color-primary-lighter: rgba(59, 130, 246, 0.2);
+
+	/* Secondary */
+	--color-secondary: #6b7280;
+	--color-secondary-hover: #4b5563;
+
+	/* Background */
+	--color-bg: #ffffff;
+	--color-bg-secondary: #f9fafb;
+	--color-bg-tertiary: #f3f4f6;
+
+	/* Text */
+	--color-text: #1a1a1a;
+	--color-text-secondary: #6b7280;
+	--color-text-tertiary: #9ca3af;
+	--color-text-inverse: #ffffff;
+
+	/* Border */
+	--color-border: #e5e7eb;
+	--color-border-light: #f3f4f6;
+
+	/* Status */
+	--color-success: #10b981;
+	--color-warning: #f59e0b;
+	--color-error: #ef4444;
+	--color-error-hover: #dc2626;
+
+	/* Overlay */
+	--color-overlay: rgba(0, 0, 0, 0.5);
+	--color-overlay-light: rgba(0, 0, 0, 0.1);
+	--color-overlay-dark: rgba(0, 0, 0, 0.8);
+
+	/* ========== Spacing ========== */
+	--space-xs: 0.25rem; /* 4px */
+	--space-sm: 0.5rem; /* 8px */
+	--space-md: 1rem; /* 16px */
+	--space-lg: 1.5rem; /* 24px */
+	--space-xl: 2rem; /* 32px */
+	--space-2xl: 3rem; /* 48px */
+	--space-3xl: 4rem; /* 64px */
+
+	/* ========== Border Radius ========== */
+	--radius-sm: 4px;
+	--radius-md: 8px;
+	--radius-lg: 12px;
+	--radius-xl: 16px;
+	--radius-full: 9999px;
+
+	/* ========== Typography ========== */
+	--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	--font-size-xs: 0.75rem; /* 12px */
+	--font-size-sm: 0.875rem; /* 14px */
+	--font-size-base: 1rem; /* 16px */
+	--font-size-lg: 1.125rem; /* 18px */
+	--font-size-xl: 1.25rem; /* 20px */
+	--font-size-2xl: 1.5rem; /* 24px */
+	--font-size-3xl: 2rem; /* 32px */
+
+	--font-weight-normal: 400;
+	--font-weight-medium: 500;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+
+	--line-height-tight: 1.25;
+	--line-height-normal: 1.5;
+	--line-height-relaxed: 1.75;
+
+	/* ========== Shadows ========== */
+	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+	/* ========== Transitions ========== */
+	--transition-fast: 0.15s ease;
+	--transition-normal: 0.2s ease;
+	--transition-slow: 0.3s ease;
+
+	/* ========== Z-Index ========== */
+	--z-base: 0;
+	--z-dropdown: 10;
+	--z-sticky: 20;
+	--z-overlay: 100;
+	--z-modal: 1000;
+	--z-toast: 1100;
+
+	/* ========== Layout ========== */
+	--container-max: 1200px;
+	--container-wide-max: 1400px;
+	--container-narrow-max: 800px;
+}
+
+/* ========== Dark Mode ========== */
+@media (prefers-color-scheme: dark) {
+	:root {
+		/* Background */
+		--color-bg: #111827;
+		--color-bg-secondary: #1f2937;
+		--color-bg-tertiary: #374151;
+
+		/* Text */
+		--color-text: #f9fafb;
+		--color-text-secondary: #d1d5db;
+		--color-text-tertiary: #9ca3af;
+
+		/* Border */
+		--color-border: #374151;
+		--color-border-light: #4b5563;
+
+		/* Primary adjustments */
+		--color-primary-light: rgba(59, 130, 246, 0.2);
+		--color-primary-lighter: rgba(59, 130, 246, 0.3);
+
+		/* Shadows */
+		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+		--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+		--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
+	}
+}
+
+/* Manual dark mode class */
+[data-theme='dark'] {
+	/* Background */
+	--color-bg: #111827;
+	--color-bg-secondary: #1f2937;
+	--color-bg-tertiary: #374151;
+
+	/* Text */
+	--color-text: #f9fafb;
+	--color-text-secondary: #d1d5db;
+	--color-text-tertiary: #9ca3af;
+
+	/* Border */
+	--color-border: #374151;
+	--color-border-light: #4b5563;
+
+	/* Primary adjustments */
+	--color-primary-light: rgba(59, 130, 246, 0.2);
+	--color-primary-lighter: rgba(59, 130, 246, 0.3);
+
+	/* Shadows */
+	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
+	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
+	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
+}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 0b927c9..47310b1 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -3,6 +3,7 @@
 	import { locales, localizeHref } from '$lib/paraglide/runtime';
 	import { resolve } from '$app/paths';
 	import favicon from '$lib/assets/favicon.svg';
+	import '$lib/styles/global.css';
 
 	let { children } = $props();
 </script>
diff --git a/web/src/routes/photo/[id]/+page.svelte b/web/src/routes/photo/[id]/+page.svelte
index d89dddc..a98c90b 100644
--- a/web/src/routes/photo/[id]/+page.svelte
+++ b/web/src/routes/photo/[id]/+page.svelte
@@ -881,10 +881,10 @@
 		position: fixed;
 		inset: 0;
 		background: #000;
-		color: white;
+		color: #fff;
 		display: flex;
 		flex-direction: column;
-		z-index: 1000;
+		z-index: var(--z-modal);
 		outline: none;
 		overflow: hidden;
 		touch-action: pan-y;
@@ -900,15 +900,15 @@
 		align-items: center;
 		justify-content: center;
 		height: 100%;
-		gap: 1rem;
+		gap: var(--space-md);
 	}
 
 	.loading-spinner {
 		width: 48px;
 		height: 48px;
-		border: 3px solid rgba(255, 255, 255, 0.3);
-		border-top-color: white;
-		border-radius: 50%;
+		border: 3px solid var(--color-overlay-light);
+		border-top-color: var(--color-text);
+		border-radius: var(--radius-full);
 		animation: spin 1s linear infinite;
 	}
 
@@ -925,8 +925,8 @@
 	}
 
 	.loading p {
-		color: #9ca3af;
-		font-size: 1rem;
+		color: var(--color-text-tertiary);
+		font-size: var(--font-size-base);
 		margin: 0;
 	}
 
@@ -944,29 +944,29 @@
 		top: 80px;
 		left: 50%;
 		transform: translateX(-50%);
-		background: rgba(239, 68, 68, 0.9);
-		color: white;
-		padding: 0.75rem 1.5rem;
-		border-radius: 8px;
+		background: var(--color-error);
+		color: var(--color-text-inverse);
+		padding: var(--space-md) var(--space-lg);
+		border-radius: var(--radius-md);
 		display: flex;
 		align-items: center;
-		gap: 1rem;
+		gap: var(--space-md);
 		z-index: 101;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+		box-shadow: var(--shadow-lg);
 	}
 
 	.error-toast button {
-		background: rgba(255, 255, 255, 0.2);
+		background: var(--color-overlay-light);
 		border: none;
-		color: white;
-		padding: 0.25rem 0.75rem;
-		border-radius: 4px;
+		color: var(--color-text-inverse);
+		padding: var(--space-xs) var(--space-md);
+		border-radius: var(--radius-sm);
 		cursor: pointer;
-		font-size: 0.875rem;
+		font-size: var(--font-size-sm);
 	}
 
 	.error-toast button:hover {
-		background: rgba(255, 255, 255, 0.3);
+		background: var(--color-overlay);
 	}
 
 	.progress-indicator {
@@ -974,13 +974,13 @@
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
-		background: rgba(0, 0, 0, 0.8);
-		padding: 1rem 1.5rem;
-		border-radius: 12px;
+		background: var(--color-overlay-dark);
+		padding: var(--space-md) var(--space-lg);
+		border-radius: var(--radius-lg);
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: 0.75rem;
+		gap: var(--space-md);
 		z-index: 102;
 		min-width: 200px;
 	}
@@ -988,22 +988,22 @@
 	.progress-bar {
 		width: 100%;
 		height: 6px;
-		background: rgba(255, 255, 255, 0.2);
-		border-radius: 3px;
+		background: var(--color-overlay-light);
+		border-radius: var(--radius-sm);
 		overflow: hidden;
 	}
 
 	.progress-fill {
 		height: 100%;
-		background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-		transition: width 0.2s ease;
-		border-radius: 3px;
+		background: linear-gradient(90deg, var(--color-primary), #8b5cf6);
+		transition: width var(--transition-normal);
+		border-radius: var(--radius-sm);
 	}
 
 	.progress-text {
-		color: white;
-		font-size: 0.875rem;
-		font-weight: 600;
+		color: var(--color-text-inverse);
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-semibold);
 	}
 
 	.quality-upgrade-btn {
@@ -1011,26 +1011,25 @@
 		bottom: 120px;
 		left: 50%;
 		transform: translateX(-50%);
-		background: rgba(59, 130, 246, 0.9);
-		color: white;
+		background: var(--color-primary);
+		color: var(--color-text-inverse);
 		border: none;
-		padding: 0.625rem 1.25rem;
-		border-radius: 8px;
+		padding: var(--space-sm) var(--space-lg);
+		border-radius: var(--radius-md);
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--space-sm);
 		cursor: pointer;
-		transition: all 0.2s;
+		transition: all var(--transition-normal);
 		z-index: 101;
-		font-size: 0.875rem;
-		font-weight: 500;
-		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-medium);
+		box-shadow: var(--shadow-lg);
 	}
 
 	.quality-upgrade-btn:hover {
-		background: rgba(59, 130, 246, 1);
+		background: var(--color-primary-hover);
 		transform: translateX(-50%) scale(1.05);
-		box-shadow: 0 6px 16px rgba(59, 130, 246, 0.5);
 	}
 
 	.quality-upgrade-btn:active {
@@ -1045,8 +1044,8 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: 0.75rem 1rem;
-		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
+		padding: var(--space-md) var(--space-md);
+		background: linear-gradient(to bottom, var(--color-overlay-dark), transparent);
 		position: absolute;
 		top: 0;
 		left: 0;
@@ -1057,22 +1056,22 @@
 	.back-link {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		color: white;
+		gap: var(--space-sm);
+		color: var(--color-text-inverse);
 		text-decoration: none;
-		font-size: 0.95rem;
-		padding: 0.5rem 0.75rem;
-		background: rgba(255, 255, 255, 0.1);
-		border-radius: 6px;
-		transition: background 0.2s;
+		font-size: var(--font-size-base);
+		padding: var(--space-sm) var(--space-md);
+		background: var(--color-overlay-light);
+		border-radius: var(--radius-md);
+		transition: background var(--transition-normal);
 	}
 
 	.back-link:hover {
-		background: rgba(255, 255, 255, 0.2);
+		background: var(--color-overlay);
 	}
 
 	.back-icon {
-		font-size: 1.25rem;
+		font-size: var(--font-size-xl);
 		line-height: 1;
 	}
 
@@ -1083,20 +1082,20 @@
 	}
 
 	.photo-index {
-		color: #d1d5db;
-		font-size: 0.875rem;
-		background: rgba(255, 255, 255, 0.1);
-		padding: 0.35rem 0.75rem;
-		border-radius: 6px;
+		color: var(--color-text-secondary);
+		font-size: var(--font-size-sm);
+		background: var(--color-overlay-light);
+		padding: 0.35rem var(--space-md);
+		border-radius: var(--radius-md);
 	}
 
 	.quality-indicator {
-		color: #3b82f6;
-		font-size: 0.75rem;
-		background: rgba(59, 130, 246, 0.2);
-		padding: 0.25rem 0.625rem;
-		border-radius: 4px;
-		font-weight: 600;
+		color: var(--color-primary);
+		font-size: var(--font-size-xs);
+		background: var(--color-primary-light);
+		padding: var(--space-xs) 0.625rem;
+		border-radius: var(--radius-sm);
+		font-weight: var(--font-weight-semibold);
 	}
 
 	.viewer-content {
@@ -1122,7 +1121,7 @@
 	.image-wrapper video {
 		max-width: 100%;
 		max-height: 100%;
-		transition: opacity 0.3s ease;
+		transition: opacity var(--transition-slow);
 		user-select: none;
 		-webkit-user-drag: none;
 	}
@@ -1139,15 +1138,15 @@
 
 	.reset-zoom-btn {
 		position: absolute;
-		top: 1rem;
-		right: 1rem;
-		background: rgba(0, 0, 0, 0.7);
-		color: white;
+		top: var(--space-md);
+		right: var(--space-md);
+		background: var(--color-overlay-dark);
+		color: var(--color-text-inverse);
 		border: none;
-		padding: 0.625rem;
-		border-radius: 8px;
+		padding: var(--space-sm);
+		border-radius: var(--radius-md);
 		cursor: pointer;
-		transition: all 0.2s;
+		transition: all var(--transition-normal);
 		z-index: 20;
 		display: flex;
 		align-items: center;
@@ -1155,7 +1154,7 @@
 	}
 
 	.reset-zoom-btn:hover {
-		background: rgba(59, 130, 246, 0.9);
+		background: var(--color-primary);
 		transform: scale(1.1);
 	}
 
@@ -1167,13 +1166,13 @@
 		position: absolute;
 		top: 50%;
 		transform: translateY(-50%);
-		background: rgba(255, 255, 255, 0.1);
-		color: white;
+		background: var(--color-overlay-light);
+		color: var(--color-text-inverse);
 		border: none;
-		padding: 0.75rem;
+		padding: var(--space-md);
 		cursor: pointer;
-		transition: all 0.2s;
-		border-radius: 50%;
+		transition: all var(--transition-normal);
+		border-radius: var(--radius-full);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -1186,7 +1185,7 @@
 	}
 
 	.nav-button:hover:not(:disabled) {
-		background: rgba(255, 255, 255, 0.25);
+		background: var(--color-overlay);
 		transform: translateY(-50%) scale(1.1);
 	}
 
@@ -1200,11 +1199,11 @@
 	}
 
 	.nav-button.prev {
-		left: 1rem;
+		left: var(--space-md);
 	}
 
 	.nav-button.next {
-		right: 1rem;
+		right: var(--space-md);
 	}
 
 	.zoom-controls {
@@ -1212,31 +1211,31 @@
 		bottom: 60px;
 		left: 50%;
 		transform: translateX(-50%);
-		background: rgba(0, 0, 0, 0.8);
-		padding: 0.5rem 0.75rem;
-		border-radius: 12px;
+		background: var(--color-overlay-dark);
+		padding: var(--space-sm) var(--space-md);
+		border-radius: var(--radius-lg);
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: var(--space-sm);
 		z-index: 101;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+		box-shadow: var(--shadow-lg);
 	}
 
 	.zoom-controls button {
-		background: rgba(255, 255, 255, 0.1);
-		color: white;
+		background: var(--color-overlay-light);
+		color: var(--color-text-inverse);
 		border: none;
-		padding: 0.5rem;
-		border-radius: 8px;
+		padding: var(--space-sm);
+		border-radius: var(--radius-md);
 		cursor: pointer;
-		transition: all 0.2s;
+		transition: all var(--transition-normal);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
 
 	.zoom-controls button:hover:not(:disabled) {
-		background: rgba(59, 130, 246, 0.9);
+		background: var(--color-primary);
 		transform: scale(1.1);
 	}
 
@@ -1252,23 +1251,23 @@
 	.zoom-level {
 		min-width: 50px;
 		text-align: center;
-		font-size: 0.875rem;
-		font-weight: 600;
-		color: white;
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-semibold);
+		color: var(--color-text-inverse);
 	}
 
 	.shortcut-hints {
 		position: absolute;
-		bottom: 1rem;
+		bottom: var(--space-md);
 		left: 50%;
 		transform: translateX(-50%);
-		background: rgba(0, 0, 0, 0.6);
-		padding: 0.5rem 1rem;
-		border-radius: 8px;
+		background: var(--color-overlay-dark);
+		padding: var(--space-sm) var(--space-md);
+		border-radius: var(--radius-md);
 		display: flex;
-		gap: 1rem;
-		font-size: 0.75rem;
-		color: rgba(255, 255, 255, 0.7);
+		gap: var(--space-md);
+		font-size: var(--font-size-xs);
+		color: var(--color-text-tertiary);
 		z-index: 10;
 		flex-wrap: wrap;
 		justify-content: center;
@@ -1276,7 +1275,7 @@
 
 	@media (max-width: 768px) {
 		.nav-button {
-			padding: 0.5rem;
+			padding: var(--space-sm);
 		}
 
 		.nav-button svg {
@@ -1285,11 +1284,11 @@
 		}
 
 		.nav-button.prev {
-			left: 0.5rem;
+			left: var(--space-sm);
 		}
 
 		.nav-button.next {
-			right: 0.5rem;
+			right: var(--space-sm);
 		}
 
 		.shortcut-hints {
@@ -1302,8 +1301,8 @@
 	}
 
 	.photo-info {
-		padding: 1rem;
-		background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
+		padding: var(--space-md);
+		background: linear-gradient(to top, var(--color-overlay-dark), transparent);
 		position: absolute;
 		bottom: 0;
 		left: 0;
@@ -1317,21 +1316,21 @@
 	}
 
 	.photo-info h2 {
-		font-size: 1rem;
-		font-weight: 600;
-		margin: 0 0 0.5rem 0;
+		font-size: var(--font-size-base);
+		font-weight: var(--font-weight-semibold);
+		margin: 0 0 var(--space-sm) 0;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		color: white;
+		color: var(--color-text-inverse);
 	}
 
 	.photo-info .meta {
-		font-size: 0.8rem;
-		color: #9ca3af;
+		font-size: var(--font-size-xs);
+		color: var(--color-text-tertiary);
 		display: flex;
 		flex-wrap: wrap;
-		gap: 0.75rem;
+		gap: var(--space-md);
 	}
 
 	.photo-info .meta span {