From 2110d408bdd214c44b3d71995bb13612fa8b5178 Mon Sep 17 00:00:00 2001
From: SirBlobby <adithcool.5@gmail.com>
Date: Mon, 20 Jul 2026 23:59:12 -0400
Subject: [PATCH] Rework UI to match typst-desktop's design system

---
 src/app.css                                   |  91 ++++++-
 src/app.html                                  |   1 +
 src/lib/components/CommentsSidebar.svelte     |  14 +-
 src/lib/components/ConfirmModal.svelte        |  38 +++
 src/lib/components/DocFooter.svelte           |  10 +-
 src/lib/components/Footer.svelte              |  12 +-
 src/lib/components/Modal.svelte               |  69 +++++
 src/lib/components/PageSettingsModal.svelte   | 204 +++++++-------
 src/lib/components/Preview.svelte             |   2 +-
 src/lib/components/PromptModal.svelte         |  81 ++++++
 src/lib/components/PublishPackageModal.svelte |  62 ++---
 src/lib/components/ShareModal.svelte          | 228 ++++++++--------
 src/lib/components/ThemePicker.svelte         |  63 +++--
 src/lib/components/Toolbar.svelte             | 223 ++++++----------
 .../components/VersionHistorySidebar.svelte   |  22 +-
 .../dashboard/CreateDocModal.svelte           |  52 ----
 .../dashboard/CreateFolderModal.svelte        |  52 ----
 .../dashboard/CreateProjectModal.svelte       |  53 ----
 .../components/dashboard/DeleteModal.svelte   |  36 ---
 src/lib/components/dashboard/DocCard.svelte   |  50 ++--
 src/lib/components/dashboard/FileCard.svelte  |  18 +-
 src/lib/components/dashboard/FolderRow.svelte |  18 +-
 src/lib/components/dashboard/InfoModal.svelte |  64 +++--
 src/lib/components/dashboard/Navbar.svelte    |  32 +--
 .../components/dashboard/ProjectCard.svelte   |  24 +-
 .../components/dashboard/RenameModal.svelte   |  48 ----
 .../components/modals/CreateDocModal.svelte   |   0
 .../modals/CreateFolderModal.svelte           |   0
 src/lib/components/modals/DeleteModal.svelte  |   0
 src/lib/components/modals/InfoModal.svelte    |   0
 src/lib/components/modals/RenameModal.svelte  |   0
 src/lib/components/project/FileTree.svelte    |  18 +-
 .../components/project/ProjectToolbar.svelte  | 137 +++++-----
 src/lib/ts/store.ts                           |  16 +-
 src/routes/+error.svelte                      |  28 +-
 src/routes/+layout.svelte                     |  16 +-
 src/routes/+page.svelte                       |   2 +-
 src/routes/api-docs/+page.svelte              | 172 ++++++------
 src/routes/dashboard/+page.svelte             | 119 ++++++---
 src/routes/doc/[id]/+page.svelte              |   6 +-
 src/routes/login/+page.svelte                 |  43 ++-
 src/routes/packages/+page.svelte              |  28 +-
 src/routes/project/[id]/+page.svelte          |   6 +-
 src/routes/projects/+page.svelte              | 142 +++++-----
 src/routes/register/+page.svelte              |  50 ++--
 src/routes/settings/+page.svelte              | 248 +++++++++---------
 src/routes/setup/+page.svelte                 |  36 +--
 static/favicon.png                            | Bin 0 -> 30294 bytes
 48 files changed, 1319 insertions(+), 1315 deletions(-)
 create mode 100644 src/lib/components/ConfirmModal.svelte
 create mode 100644 src/lib/components/Modal.svelte
 create mode 100644 src/lib/components/PromptModal.svelte
 delete mode 100644 src/lib/components/dashboard/CreateDocModal.svelte
 delete mode 100644 src/lib/components/dashboard/CreateFolderModal.svelte
 delete mode 100644 src/lib/components/dashboard/CreateProjectModal.svelte
 delete mode 100644 src/lib/components/dashboard/DeleteModal.svelte
 delete mode 100644 src/lib/components/dashboard/RenameModal.svelte
 delete mode 100644 src/lib/components/modals/CreateDocModal.svelte
 delete mode 100644 src/lib/components/modals/CreateFolderModal.svelte
 delete mode 100644 src/lib/components/modals/DeleteModal.svelte
 delete mode 100644 src/lib/components/modals/InfoModal.svelte
 delete mode 100644 src/lib/components/modals/RenameModal.svelte
 create mode 100644 static/favicon.png

diff --git a/src/app.css b/src/app.css
index cf41de7..624f166 100644
--- a/src/app.css
+++ b/src/app.css
@@ -6,12 +6,101 @@
   --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
+:root {
+  color-scheme: light;
+  --color-surface: #ffffff;
+  --color-surface-muted: #eff1f5;
+  --color-surface-sunken: #dce0e8;
+  --color-line: #ccd0da;
+  --color-ink: #11111b;
+  --color-ink-muted: #5c5f77;
+  --color-accent: #1e66f5;
+  --color-accent-soft: #dce8fd;
+  --color-danger: #d5382f;
+  --color-success: #1f8a4c;
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --color-surface: #181825;
+  --color-surface-muted: #1e1e2e;
+  --color-surface-sunken: #45475a;
+  --color-line: #313244;
+  --color-ink: #cdd6f4;
+  --color-ink-muted: #6c7086;
+  --color-accent: #89b4fa;
+  --color-accent-soft: #1e2f4d;
+  --color-danger: #f4736a;
+  --color-success: #4cc47f;
+}
+
+:root[data-color-theme='Cerberus'] {
+  --color-surface: #ffffff;
+  --color-surface-muted: #ffffff;
+  --color-surface-sunken: #f4f4f5;
+  --color-line: #d4d4d4;
+  --color-ink: #000000;
+  --color-ink-muted: #52525b;
+  --color-accent: #4338ca;
+  --color-accent-soft: #e0e7ff;
+}
+
+:root[data-color-theme='Cerberus'][data-theme='dark'] {
+  --color-surface: #121212;
+  --color-surface-muted: #171717;
+  --color-surface-sunken: #1f1f1f;
+  --color-line: #262626;
+  --color-ink: #f5f5f5;
+  --color-ink-muted: #737373;
+  --color-accent: #818cf8;
+  --color-accent-soft: #262244;
+}
+
+:root[data-color-theme='Arch Linux'] {
+  --color-surface: #ffffff;
+  --color-surface-muted: #ffffff;
+  --color-surface-sunken: #f6f8fa;
+  --color-line: #d0d7de;
+  --color-ink: #0d1117;
+  --color-ink-muted: #57606a;
+  --color-accent: #0550ae;
+  --color-accent-soft: #dbeafe;
+}
+
+:root[data-color-theme='Arch Linux'][data-theme='dark'] {
+  --color-surface: #010409;
+  --color-surface-muted: #0d1117;
+  --color-surface-sunken: #161b22;
+  --color-line: #21262d;
+  --color-ink: #c9d1d9;
+  --color-ink-muted: #6e7681;
+  --color-accent: #1793d1;
+  --color-accent-soft: #0d2b3d;
+}
+
+:root {
+  --theme-bg: var(--color-surface-muted);
+  --theme-text: var(--color-ink);
+  --theme-border: var(--color-line);
+  --theme-cursor: var(--color-accent);
+}
+
 html, body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
 }
 
+body {
+  background-color: var(--color-surface-muted);
+  color: var(--color-ink);
+}
+
 html.dark {
   color-scheme: dark;
-}
\ No newline at end of file
+}
+
+.scroll-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-line) transparent;
+}
diff --git a/src/app.html b/src/app.html
index 6a2bb58..364fa59 100644
--- a/src/app.html
+++ b/src/app.html
@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="text-scale" content="scale" />
 		%sveltekit.head%
diff --git a/src/lib/components/CommentsSidebar.svelte b/src/lib/components/CommentsSidebar.svelte
index fd1a6e8..4e8acc0 100644
--- a/src/lib/components/CommentsSidebar.svelte
+++ b/src/lib/components/CommentsSidebar.svelte
@@ -102,7 +102,7 @@
 			<h2 class="text-sm font-semibold text-[var(--theme-text)]">Comments</h2>
 			<span class="text-[10px] font-bold px-2 py-0.5 rounded-full">{comments.length}</span>
 		</div>
-		<button onclick={onClose} class="p-1.5 hover:text-gray-600 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-white/10 rounded-md transition-colors" title="Close Comments">
+		<button onclick={onClose} class="p-1.5 hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded-md transition-colors" title="Close Comments">
 			<Icon icon="mdi:close" class="text-lg" />
 		</button>
 	</div>
@@ -113,7 +113,7 @@
 				<Icon icon="mdi:loading" class="animate-spin text-2xl" />
 			</div>
 		{:else if error}
-			<div class="text-red-500 text-sm text-center p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-900/30">
+			<div class="text-[var(--color-danger)] text-sm text-center p-4 bg-[var(--color-danger)]/10 rounded-md border border-[var(--color-danger)]/20">
 				{error}
 			</div>
 		{:else if comments.length === 0}
@@ -126,7 +126,7 @@
 				<div class="group flex flex-col gap-2 p-3 border rounded-xl shadow-sm hover:shadow-md transition-all {comment.resolved ? 'opacity-60' : ''} bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
 					<div class="flex justify-between items-start">
 						<div class="flex items-center gap-2">
-							<div class="w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center text-xs font-bold">
+							<div class="w-6 h-6 rounded-full bg-[var(--color-accent-soft)] text-[var(--color-accent)] flex items-center justify-center text-xs font-bold">
 								{(comment.author_name || 'A').substring(0, 1).toUpperCase()}
 							</div>
 							<div>
@@ -137,11 +137,11 @@
 						
 						<div class="flex opacity-0 group-hover:opacity-100 transition-opacity gap-1">
 							{#if $userStore?.id === comment.user_id}
-								<button onclick={() => deleteComment(comment.id)} class="p-1 hover:text-red-500 rounded hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors" title="Delete">
+								<button onclick={() => deleteComment(comment.id)} class="p-1 hover:text-[var(--color-danger)] rounded hover:bg-[var(--color-danger)]/10 transition-colors" title="Delete">
 									<Icon icon="mdi:trash-can-outline" class="text-xs" />
 								</button>
 							{/if}
-							<button onclick={() => toggleResolve(comment)} class="p-1 hover:text-emerald-500 rounded hover:bg-emerald-50 dark:hover:bg-emerald-500/10 transition-colors" title={comment.resolved ? "Reopen" : "Resolve"}>
+							<button onclick={() => toggleResolve(comment)} class="p-1 hover:text-[var(--color-success)] rounded hover:bg-[var(--color-success)]/10 transition-colors" title={comment.resolved ? "Reopen" : "Resolve"}>
 								<Icon icon={comment.resolved ? "mdi:check-circle" : "mdi:check-circle-outline"} class="text-xs" />
 							</button>
 						</div>
@@ -157,7 +157,7 @@
 			<textarea
 				bind:value={newCommentContent}
 				placeholder="Add a comment..."
-				class="w-full border text-[var(--theme-text)] text-sm rounded-xl px-3 py-2.5 pr-10 focus:outline-none focus:ring-2 focus:ring-blue-500/50 resize-none min-h-[80px] bg-[var(--theme-bg)] border-[var(--theme-border)]"
+				class="w-full border text-[var(--theme-text)] text-sm rounded-md px-3 py-2.5 pr-10 focus:outline-none focus:border-[var(--color-accent)] resize-none min-h-[80px] bg-[var(--theme-bg)] border-[var(--theme-border)]"
 				onkeydown={(e) => {
 					if (e.key === 'Enter' && !e.shiftKey) {
 						e.preventDefault();
@@ -168,7 +168,7 @@
 			<button 
 				onclick={postComment}
 				disabled={!newCommentContent.trim()}
-				class="absolute bottom-2.5 right-2.5 p-1.5 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 dark:disabled:bg-zinc-700 disabled:text-gray-500 rounded-lg transition-colors"
+				class="absolute bottom-2.5 right-2.5 p-1.5 bg-[var(--color-accent)] hover:opacity-90 disabled:bg-[var(--color-surface-sunken)] disabled:text-[var(--color-ink-muted)] rounded-md transition-colors"
 				title="Post (Enter)"
 			>
 				<Icon icon="mdi:send" class="text-sm" />
diff --git a/src/lib/components/ConfirmModal.svelte b/src/lib/components/ConfirmModal.svelte
new file mode 100644
index 0000000..0395f41
--- /dev/null
+++ b/src/lib/components/ConfirmModal.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import Modal from "./Modal.svelte";
+
+  interface Props {
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    onconfirm: () => void;
+    onclose: () => void;
+  }
+
+  let {
+    title,
+    message,
+    confirmLabel = "Delete",
+    onconfirm,
+    onclose,
+  }: Props = $props();
+</script>
+
+<Modal {title} icon="ph:warning-circle" {onclose}>
+  <p class="text-sm text-[var(--color-ink-muted)]">{message}</p>
+
+  {#snippet footer()}
+    <button
+      class="rounded-md px-3 py-1.5 text-xs text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)]"
+      onclick={onclose}
+    >
+      Cancel
+    </button>
+    <button
+      class="rounded-md bg-[var(--color-danger)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90"
+      onclick={onconfirm}
+    >
+      {confirmLabel}
+    </button>
+  {/snippet}
+</Modal>
diff --git a/src/lib/components/DocFooter.svelte b/src/lib/components/DocFooter.svelte
index 53fffae..c9aa3bc 100644
--- a/src/lib/components/DocFooter.svelte
+++ b/src/lib/components/DocFooter.svelte
@@ -11,14 +11,14 @@
 <div class="h-8 border-t border-[var(--theme-border)] bg-[var(--theme-bg)] flex items-center justify-between px-4 text-xs text-[var(--theme-text)] select-none z-[60] relative">
     <div class="flex items-center gap-4">
         <div class="flex items-center gap-1.5 font-medium {
-            $connectionStatus === 'connected' ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400'
+            $connectionStatus === 'connected' ? 'text-[var(--color-success)]' : 'text-amber-600 dark:text-amber-400'
         }">
-            <div class="w-1.5 h-1.5 rounded-full {$connectionStatus === 'connected' ? 'bg-emerald-500 shadow-[0_0_4px_rgba(16,185,129,0.4)]' : 'bg-amber-500 animate-pulse'}"></div>
+            <div class="w-1.5 h-1.5 rounded-full {$connectionStatus === 'connected' ? 'bg-[var(--color-success)] shadow-[0_0_4px_rgba(16,185,129,0.4)]' : 'bg-amber-500 animate-pulse'}"></div>
             {$connectionStatus === 'connected' ? 'Document synced' : 'Connecting...'}
         </div>
         
         {#if $documentStatsStore}
-            <button class="hover:bg-gray-100 dark:hover:bg-white/10 px-2 py-0.5 rounded transition-colors flex items-center gap-1 cursor-pointer" onclick={toggleModal} aria-label="Word count statistics">
+            <button class="hover:bg-[var(--color-surface-sunken)] px-2 py-0.5 rounded transition-colors flex items-center gap-1 cursor-pointer" onclick={toggleModal} aria-label="Word count statistics">
                 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-70"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg>
                 {$documentStatsStore.words} words
             </button>
@@ -29,11 +29,11 @@
 {#if showStatsModal}
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
-    <div class="fixed inset-0 bg-black/20 dark:bg-black/40 z-[100] flex items-center justify-center backdrop-blur-sm" onclick={toggleModal}>
+    <div class="fixed inset-0 bg-black/40 z-[100] flex items-center justify-center" onclick={toggleModal}>
         <div class="bg-[var(--theme-bg)] text-[var(--theme-text)] border border-[var(--theme-border)] rounded-xl shadow-xl w-80 overflow-hidden" onclick={e => e.stopPropagation()}>
             <div class="px-4 py-3 border-b border-[var(--theme-border)] flex items-center justify-between">
                 <h3 class="font-semibold text-sm">Word count</h3>
-                <button onclick={toggleModal} aria-label="Close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
+                <button onclick={toggleModal} aria-label="Close" class="text-[var(--color-ink-muted)] hover:text-[var(--color-ink)]">
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                 </button>
             </div>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index bdea737..b5600d7 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -3,13 +3,13 @@
     let { sticky = true }: { sticky?: boolean } = $props();
 </script>
 
-<footer class="mt-auto py-6 text-center text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-white/10 bg-[var(--theme-bg)] {sticky ? 'sticky bottom-0 z-10' : ''} w-full flex-shrink-0 transition-colors duration-200">
+<footer class="mt-auto py-6 text-center text-sm text-[var(--color-ink-muted)] border-t border-[var(--color-line)] bg-[var(--color-surface)] {sticky ? 'sticky bottom-0 z-10' : ''} w-full flex-shrink-0 transition-colors duration-200">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-center items-center gap-4">
-        <a 
-            href="https://github.com/SirBlobby/TypstDrive" 
-            target="_blank" 
-            rel="noopener noreferrer" 
-            class="inline-flex items-center gap-2 hover:text-gray-900 dark:hover:text-white transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-3 py-1.5 rounded-lg border border-transparent dark:border-white/10"
+        <a
+            href="https://github.com/SirBlobby/TypstDrive"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="inline-flex items-center gap-2 hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-3 py-1.5 rounded-md"
         >
             <Icon icon="mdi:github" class="text-xl" />
             <span class="font-semibold">GitHub Repository</span>
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
new file mode 100644
index 0000000..871e0df
--- /dev/null
+++ b/src/lib/components/Modal.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import Icon from "@iconify/svelte";
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    title: string;
+    icon?: string;
+    width?: string;
+    onclose: () => void;
+    children: Snippet;
+    footer?: Snippet;
+  }
+
+  let {
+    title,
+    icon = "ph:squares-four",
+    width = "max-w-md",
+    onclose,
+    children,
+    footer,
+  }: Props = $props();
+
+  function handleKey(event: KeyboardEvent) {
+    if (event.key === "Escape") onclose();
+  }
+</script>
+
+<svelte:window on:keydown={handleKey} />
+
+<div
+  class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-6"
+  role="presentation"
+  onclick={(event) => {
+    if (event.target === event.currentTarget) onclose();
+  }}
+>
+  <div
+    class="w-full {width} overflow-hidden rounded-xl border border-[var(--color-line)] bg-[var(--color-surface)] shadow-2xl"
+    role="dialog"
+    aria-modal="true"
+    aria-label={title}
+  >
+    <header
+      class="flex items-center gap-2 border-b border-[var(--color-line)] px-5 py-3.5"
+    >
+      <Icon {icon} class="text-lg text-[var(--color-accent)]" />
+      <h2 class="flex-1 text-sm font-semibold">{title}</h2>
+      <button
+        class="rounded p-1 text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)]"
+        onclick={onclose}
+        aria-label="Close"
+      >
+        <Icon icon="ph:x" class="text-base" />
+      </button>
+    </header>
+
+    <div class="scroll-thin max-h-[70vh] overflow-y-auto px-5 py-4">
+      {@render children()}
+    </div>
+
+    {#if footer}
+      <footer
+        class="flex items-center justify-end gap-2 border-t border-[var(--color-line)] bg-[var(--color-surface-muted)] px-5 py-3"
+      >
+        {@render footer()}
+      </footer>
+    {/if}
+  </div>
+</div>
diff --git a/src/lib/components/PageSettingsModal.svelte b/src/lib/components/PageSettingsModal.svelte
index 09f4aa2..bb4109e 100644
--- a/src/lib/components/PageSettingsModal.svelte
+++ b/src/lib/components/PageSettingsModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Icon from '@iconify/svelte';
+	import Modal from './Modal.svelte';
 
 	let props = $props<{
 		onClose: () => void;
@@ -9,7 +9,7 @@
 
 	let settings = $derived(props.currentSettings || {});
 
-	
+
 	let paper = $state("");
 	let margin = $state("");
 	let width = $state("");
@@ -21,7 +21,7 @@
 	let header = $state("");
 	let footer = $state("");
 
-	
+
 	let docTitle = $state("");
 	let author = $state("");
 
@@ -52,120 +52,110 @@
 		if (numbering !== 'none') newPageSettings.numbering = `"${numbering}"`;
 		if (header !== 'auto') newPageSettings.header = header;
 		if (footer !== 'auto') newPageSettings.footer = footer;
-		
+
 		const newDocSettings: Record<string, string> = {};
 		if (docTitle) newDocSettings.title = `"${docTitle}"`;
-		if (author) newDocSettings.author = `"${author}"`; 
-		
+		if (author) newDocSettings.author = `"${author}"`;
+
 		props.onApply(newPageSettings, newDocSettings);
 		props.onClose();
 	}
+
+	const fieldClass = "w-full rounded-md border border-[var(--color-line)] bg-[var(--color-surface)] px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none";
 </script>
 
-<div class="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in duration-200" role="presentation" onclick={() => props.onClose()} onkeydown={(e) => { if (e.key === "Enter") { props.onClose(); } }}>
-	<div class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-xl shadow-2xl border border-[var(--theme-border)] w-full max-w-2xl overflow-hidden flex flex-col max-h-[85vh]" role="dialog" tabindex="-1" aria-modal="true" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.key === 'Escape' && props.onClose()}>
-		<div class="flex justify-between items-center p-5 border-b border-[var(--theme-border)]">
-			<h2 class="text-lg font-semibold flex items-center gap-2">
-				<Icon icon="mdi:file-document-edit-outline" class="text-blue-500 text-xl" />
-				Document & Page Settings
-			</h2>
-			<button onclick={() => props.onClose()} class="opacity-60 hover:opacity-100 rounded-full p-1 transition-opacity">
-				<Icon icon="mdi:close" class="text-xl" />
-			</button>
-		</div>
-		
-		<div class="p-6 space-y-8 overflow-y-auto flex-1">
-			
-			<section>
-				<h3 class="text-sm font-bold uppercase tracking-wider mb-4 border-b border-[var(--theme-border)] pb-2">Document Metadata</h3>
-				<div class="grid grid-cols-2 gap-4">
-					<div class="space-y-2">
-						<label for="docTitle" class="text-sm font-medium">PDF Title</label>
-						<input id="docTitle" type="text" bind:value={docTitle} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2" placeholder="My Report" />
-					</div>
-					<div class="space-y-2">
-						<label for="author" class="text-sm font-medium">Author</label>
-						<input id="author" type="text" bind:value={author} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2" placeholder="Jane Doe" />
-					</div>
-				</div>
-			</section>
+<Modal title="Document & page settings" icon="ph:file-text" width="max-w-2xl" onclose={props.onClose}>
+	<div class="flex flex-col gap-8">
 
-			
-			<section>
-				<h3 class="text-sm font-bold uppercase tracking-wider mb-4 border-b border-[var(--theme-border)] pb-2">Page Layout</h3>
-				<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-					<div class="space-y-2">
-						<label for="paper" class="text-sm font-medium">Paper Size</label>
-						<select id="paper" bind:value={paper} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2">
-							<option value="a4">A4</option>
-							<option value="us-letter">US Letter</option>
-							<option value="a5">A5</option>
-							<option value="presentation-16-9">16:9 Presentation</option>
-							<option value="presentation-4-3">4:3 Presentation</option>
-						</select>
-					</div>
-					<div class="space-y-2">
-						<label for="margin" class="text-sm font-medium">Margin</label>
-						<input id="margin" type="text" bind:value={margin} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2" placeholder="auto or 1in" />
-					</div>
-					<div class="space-y-2">
-						<label for="width" class="text-sm font-medium">Width</label>
-						<input id="width" type="text" bind:value={width} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2" placeholder="auto" />
-					</div>
-					<div class="space-y-2">
-						<label for="height" class="text-sm font-medium">Height</label>
-						<input id="height" type="text" bind:value={height} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2" placeholder="auto" />
-					</div>
-					<div class="space-y-2">
-						<label for="columns" class="text-sm font-medium">Columns</label>
-						<input id="columns" type="number" min="1" max="10" bind:value={columns} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2" />
-					</div>
-					<div class="space-y-2">
-						<label for="fill" class="text-sm font-medium">Background Fill</label>
-						<input id="fill" type="text" bind:value={fill} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2" placeholder="auto or rgb(200, 200, 200)" />
-					</div>
+		<section>
+			<h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--color-ink-muted)] mb-4 border-b border-[var(--color-line)] pb-2">Document metadata</h3>
+			<div class="grid grid-cols-2 gap-4">
+				<div class="flex flex-col gap-1">
+					<label for="docTitle" class="text-xs font-medium text-[var(--color-ink-muted)]">PDF title</label>
+					<input id="docTitle" type="text" bind:value={docTitle} class={fieldClass} placeholder="My Report" />
 				</div>
+				<div class="flex flex-col gap-1">
+					<label for="author" class="text-xs font-medium text-[var(--color-ink-muted)]">Author</label>
+					<input id="author" type="text" bind:value={author} class={fieldClass} placeholder="Jane Doe" />
+				</div>
+			</div>
+		</section>
 
-				<div class="flex items-center gap-2 mt-4">
-					<input id="flipped" type="checkbox" bind:checked={flipped} class="rounded text-blue-600 focus:ring-blue-500 bg-[var(--theme-bg)] border-[var(--theme-border)]" />
-					<label for="flipped" class="text-sm font-medium">Landscape Orientation (Flipped)</label>
-				</div>
-			</section>
 
-			
-			<section>
-				<h3 class="text-sm font-bold uppercase tracking-wider mb-4 border-b border-[var(--theme-border)] pb-2">Headers & Footers</h3>
-				<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-					<div class="space-y-2">
-						<label for="numbering" class="text-sm font-medium">Page Numbering</label>
-						<select id="numbering" bind:value={numbering} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2">
-							<option value="none">None</option>
-							<option value="1">1, 2, 3</option>
-							<option value="1/1">1/3, 2/3, 3/3</option>
-							<option value="a">a, b, c</option>
-							<option value="i">i, ii, iii</option>
-							<option value="I">I, II, III</option>
-						</select>
-					</div>
-					<div class="space-y-2">
-						<label for="header" class="text-sm font-medium">Header Content</label>
-						<input id="header" type="text" bind:value={header} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2" placeholder="auto or [Text]" />
-					</div>
-					<div class="space-y-2 sm:col-span-2">
-						<label for="footer" class="text-sm font-medium">Footer Content</label>
-						<input id="footer" type="text" bind:value={footer} class="w-full bg-[var(--theme-bg)] border border-[var(--theme-border)] text-[var(--theme-text)] text-sm rounded-lg px-3 py-2" placeholder="auto or [Text]" />
-					</div>
+		<section>
+			<h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--color-ink-muted)] mb-4 border-b border-[var(--color-line)] pb-2">Page layout</h3>
+			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+				<div class="flex flex-col gap-1">
+					<label for="paper" class="text-xs font-medium text-[var(--color-ink-muted)]">Paper size</label>
+					<select id="paper" bind:value={paper} class={fieldClass}>
+						<option value="a4">A4</option>
+						<option value="us-letter">US Letter</option>
+						<option value="a5">A5</option>
+						<option value="presentation-16-9">16:9 Presentation</option>
+						<option value="presentation-4-3">4:3 Presentation</option>
+					</select>
 				</div>
-			</section>
-		</div>
-		
-		<div class="p-5 border-t border-[var(--theme-border)] flex justify-end gap-3" style="background-color: var(--theme-border);">
-			<button onclick={() => props.onClose()} class="px-4 py-2 text-sm font-medium bg-[var(--theme-bg)] opacity-80 hover:opacity-100 rounded-lg transition-opacity border border-[var(--theme-border)]">
-				Cancel
-			</button>
-			<button onclick={apply} class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm">
-				Apply Settings
-			</button>
-		</div>
+				<div class="flex flex-col gap-1">
+					<label for="margin" class="text-xs font-medium text-[var(--color-ink-muted)]">Margin</label>
+					<input id="margin" type="text" bind:value={margin} class={fieldClass} placeholder="auto or 1in" />
+				</div>
+				<div class="flex flex-col gap-1">
+					<label for="width" class="text-xs font-medium text-[var(--color-ink-muted)]">Width</label>
+					<input id="width" type="text" bind:value={width} class={fieldClass} placeholder="auto" />
+				</div>
+				<div class="flex flex-col gap-1">
+					<label for="height" class="text-xs font-medium text-[var(--color-ink-muted)]">Height</label>
+					<input id="height" type="text" bind:value={height} class={fieldClass} placeholder="auto" />
+				</div>
+				<div class="flex flex-col gap-1">
+					<label for="columns" class="text-xs font-medium text-[var(--color-ink-muted)]">Columns</label>
+					<input id="columns" type="number" min="1" max="10" bind:value={columns} class={fieldClass} />
+				</div>
+				<div class="flex flex-col gap-1">
+					<label for="fill" class="text-xs font-medium text-[var(--color-ink-muted)]">Background fill</label>
+					<input id="fill" type="text" bind:value={fill} class={fieldClass} placeholder="auto or rgb(200, 200, 200)" />
+				</div>
+			</div>
+
+			<div class="flex items-center gap-2 mt-4">
+				<input id="flipped" type="checkbox" bind:checked={flipped} class="rounded border-[var(--color-line)] text-[var(--color-accent)] focus:ring-[var(--color-accent)]" />
+				<label for="flipped" class="text-xs font-medium text-[var(--color-ink-muted)]">Landscape orientation (flipped)</label>
+			</div>
+		</section>
+
+
+		<section>
+			<h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--color-ink-muted)] mb-4 border-b border-[var(--color-line)] pb-2">Headers & footers</h3>
+			<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+				<div class="flex flex-col gap-1">
+					<label for="numbering" class="text-xs font-medium text-[var(--color-ink-muted)]">Page numbering</label>
+					<select id="numbering" bind:value={numbering} class={fieldClass}>
+						<option value="none">None</option>
+						<option value="1">1, 2, 3</option>
+						<option value="1/1">1/3, 2/3, 3/3</option>
+						<option value="a">a, b, c</option>
+						<option value="i">i, ii, iii</option>
+						<option value="I">I, II, III</option>
+					</select>
+				</div>
+				<div class="flex flex-col gap-1">
+					<label for="header" class="text-xs font-medium text-[var(--color-ink-muted)]">Header content</label>
+					<input id="header" type="text" bind:value={header} class={fieldClass} placeholder="auto or [Text]" />
+				</div>
+				<div class="flex flex-col gap-1 sm:col-span-2">
+					<label for="footer" class="text-xs font-medium text-[var(--color-ink-muted)]">Footer content</label>
+					<input id="footer" type="text" bind:value={footer} class={fieldClass} placeholder="auto or [Text]" />
+				</div>
+			</div>
+		</section>
 	</div>
-</div>
+
+	{#snippet footer()}
+		<button onclick={() => props.onClose()} class="rounded-md px-3 py-1.5 text-xs text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)]">
+			Cancel
+		</button>
+		<button onclick={apply} class="rounded-md bg-[var(--color-accent)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90">
+			Apply settings
+		</button>
+	{/snippet}
+</Modal>
diff --git a/src/lib/components/Preview.svelte b/src/lib/components/Preview.svelte
index f22aeb5..34d70fa 100644
--- a/src/lib/components/Preview.svelte
+++ b/src/lib/components/Preview.svelte
@@ -14,7 +14,7 @@
 				</div>
 			{/each}
 		{:else}
-			<div class="text-gray-400 flex flex-col items-center justify-center h-full">
+			<div class="text-[var(--color-ink-muted)] flex flex-col items-center justify-center h-full">
 				<p>Document is empty or compiling...</p>
 			</div>
 		{/if}
diff --git a/src/lib/components/PromptModal.svelte b/src/lib/components/PromptModal.svelte
new file mode 100644
index 0000000..1ecc73e
--- /dev/null
+++ b/src/lib/components/PromptModal.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import Modal from "./Modal.svelte";
+
+  interface Props {
+    title: string;
+    label: string;
+    icon?: string;
+    value?: string;
+    placeholder?: string;
+    confirmLabel?: string;
+    danger?: boolean;
+    suffix?: string;
+    onsubmit: (value: string) => void;
+    onclose: () => void;
+  }
+
+  let {
+    title,
+    label,
+    icon = "ph:pencil-simple",
+    value = "",
+    placeholder = "",
+    confirmLabel = "Create",
+    danger = false,
+    suffix = "",
+    onsubmit,
+    onclose,
+  }: Props = $props();
+
+  let text = $state(
+    untrack(() =>
+      suffix && value.endsWith(suffix) ? value.slice(0, -suffix.length) : value,
+    ),
+  );
+
+  function submit(event: SubmitEvent) {
+    event.preventDefault();
+    if (!text.trim()) return;
+    onsubmit(text.trim());
+  }
+</script>
+
+<Modal {title} {icon} {onclose}>
+  <form id="prompt-form" onsubmit={submit}>
+    <label class="flex flex-col gap-1 text-xs">
+      <span class="font-medium text-[var(--color-ink-muted)]">{label}</span>
+      <div
+        class="flex items-center rounded-md border border-[var(--color-line)] bg-[var(--color-surface)] focus-within:border-[var(--color-accent)]"
+      >
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          autofocus
+          class="min-w-0 flex-1 bg-transparent px-3 py-2 text-sm focus:outline-none"
+          bind:value={text}
+          {placeholder}
+        />
+        {#if suffix}
+          <span class="pr-3 text-sm text-[var(--color-ink-muted)]">{suffix}</span>
+        {/if}
+      </div>
+    </label>
+  </form>
+
+  {#snippet footer()}
+    <button
+      class="rounded-md px-3 py-1.5 text-xs text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)]"
+      onclick={onclose}
+    >
+      Cancel
+    </button>
+    <button
+      type="submit"
+      form="prompt-form"
+      class="rounded-md px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90
+        {danger ? 'bg-[var(--color-danger)]' : 'bg-[var(--color-accent)]'}"
+    >
+      {confirmLabel}
+    </button>
+  {/snippet}
+</Modal>
diff --git a/src/lib/components/PublishPackageModal.svelte b/src/lib/components/PublishPackageModal.svelte
index 84e567c..70e7fa8 100644
--- a/src/lib/components/PublishPackageModal.svelte
+++ b/src/lib/components/PublishPackageModal.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
+	import Modal from './Modal.svelte';
 
 	let {
 		projectId,
@@ -37,40 +38,33 @@
 	}
 </script>
 
-<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50" onclick={onClose} role="presentation">
-	<div class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md p-6" onclick={(e) => e.stopPropagation()} role="presentation">
-		<div class="flex items-center gap-2 mb-4">
-			<Icon icon="mdi:package-variant-closed" class="text-2xl text-purple-500" />
-			<h2 class="text-lg font-bold">Publish as Package</h2>
-		</div>
+<Modal title="Publish as package" icon="ph:package" onclose={onClose}>
+	<p class="text-sm text-[var(--color-ink-muted)] mb-4">
+		Snapshots this project's files into an immutable package version, importable instance-wide as
+		<code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">@typstdrive/&lt;name&gt;:&lt;version&gt;</code>.
+		The name, version and entrypoint come from your <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">typst.toml</code>.
+	</p>
 
-		<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
-			Snapshots this project's files into an immutable package version, importable instance-wide as
-			<code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">@typstdrive/&lt;name&gt;:&lt;version&gt;</code>.
-			The name, version and entrypoint come from your <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">typst.toml</code>.
-		</p>
+	<label class="block text-xs font-medium text-[var(--color-ink-muted)] mb-1" for="pkg-version">Version override (optional)</label>
+	<input
+		id="pkg-version"
+		bind:value={version}
+		placeholder="e.g. 0.1.0 (defaults to typst.toml)"
+		class="w-full rounded-md border border-[var(--color-line)] bg-[var(--color-surface)] px-3 py-2 text-sm mb-2 focus:border-[var(--color-accent)] focus:outline-none"
+	/>
 
-		<label class="block text-sm font-medium mb-1" for="pkg-version">Version override (optional)</label>
-		<input
-			id="pkg-version"
-			bind:value={version}
-			placeholder="e.g. 0.1.0 (defaults to typst.toml)"
-			class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-white/10 bg-transparent text-sm mb-4 focus:outline-none focus:ring-2 focus:ring-purple-500/40"
-		/>
+	{#if error}
+		<div class="text-sm text-[var(--color-danger)] mt-2 break-words">{error}</div>
+	{/if}
+	{#if success}
+		<div class="text-sm text-[var(--color-success)] mt-2">{success}</div>
+	{/if}
 
-		{#if error}
-			<div class="text-sm text-red-600 dark:text-red-400 mb-3 break-words">{error}</div>
-		{/if}
-		{#if success}
-			<div class="text-sm text-green-600 dark:text-green-400 mb-3">{success}</div>
-		{/if}
-
-		<div class="flex justify-end gap-2">
-			<button onclick={onClose} class="px-4 py-2 text-sm rounded-lg bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10">Close</button>
-			<button onclick={publish} disabled={publishing} class="px-4 py-2 text-sm rounded-lg bg-purple-600 text-white hover:bg-purple-700 disabled:opacity-50 flex items-center gap-2">
-				{#if publishing}<Icon icon="mdi:loading" class="animate-spin" />{/if}
-				Publish
-			</button>
-		</div>
-	</div>
-</div>
+	{#snippet footer()}
+		<button onclick={onClose} class="rounded-md px-3 py-1.5 text-xs text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)]">Close</button>
+		<button onclick={publish} disabled={publishing} class="rounded-md bg-[var(--color-accent)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90 disabled:opacity-50 flex items-center gap-2">
+			{#if publishing}<Icon icon="mdi:loading" class="animate-spin" />{/if}
+			Publish
+		</button>
+	{/snippet}
+</Modal>
diff --git a/src/lib/components/ShareModal.svelte b/src/lib/components/ShareModal.svelte
index abc9914..c3b1e74 100644
--- a/src/lib/components/ShareModal.svelte
+++ b/src/lib/components/ShareModal.svelte
@@ -2,7 +2,8 @@
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import Icon from '@iconify/svelte';
-    
+    import Modal from './Modal.svelte';
+
     let { onClose, docId = undefined } = $props<{ onClose: () => void, docId?: string }>();
 
     type CollaboratorView = { id: string; user_id: string; username: string; email: string; role: string; created_at: string };
@@ -19,7 +20,7 @@
     let inviteRole = $state('editor');
     let inviteStatus = $state<'idle' | 'loading' | 'success' | 'error'>('idle');
     let inviteMessage = $state('');
-    
+
     async function loadCollaborators() {
         if (!docId) return;
         collabLoading = true;
@@ -76,14 +77,14 @@
         link = `${docUrl}?role=${role}`;
         loadCollaborators();
     });
-    
+
     $effect(() => {
         const baseUrl = window.location.origin;
-        
+
         let docUrl = docId ? `${baseUrl}/doc/${docId}` : window.location.href.split('?')[0];
         link = `${docUrl}?role=${role}`;
     });
-    
+
     function copyLink() {
         if (navigator.clipboard && window.isSecureContext) {
             navigator.clipboard.writeText(link).catch(console.error);
@@ -103,125 +104,116 @@
     }
 </script>
 
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in duration-200" role="presentation" onclick={onClose}>
-    <div tabindex="-1" class="rounded-xl shadow-2xl border w-full max-w-[500px] overflow-hidden bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]" style="background-color: var(--theme-bg); color: var(--theme-text); border-color: var(--theme-border);" role="dialog" aria-modal="true" aria-labelledby="share-dialog-title" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
-        <div class="flex justify-between items-center p-4 border-b border-[var(--theme-border)]" style="border-color: var(--theme-border);">
-            <h2 id="share-dialog-title" class="text-lg font-semibold text-[var(--theme-text)]" style="color: var(--theme-text);">Share Document</h2>
-            <button onclick={onClose} aria-label="Close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full p-1 transition-colors">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-            </button>
-        </div>
-        
-        <div class="p-6 space-y-6">
-            <div class="space-y-3">
-                <div class="text-sm font-semibold text-[var(--theme-text)]" style="color: var(--theme-text);">Invite Collaborator</div>
-                <form onsubmit={inviteUser} class="flex items-center gap-2 bg-gray-50 dark:bg-zinc-900/50 p-1.5 rounded-lg border border-gray-300 dark:border-zinc-700 focus-within:border-blue-500 focus-within:ring-1 focus-within:ring-blue-500 transition-all">
-                    <div class="pl-2 text-gray-400">
-                        <Icon icon="mdi:account-plus-outline" class="text-xl" />
-                    </div>
-                    <input 
-                        type="email" 
-                        placeholder="Add people via email..."
-                        bind:value={inviteEmail}
-                        required
-                        class="flex-1 bg-transparent border-none text-gray-800 dark:text-gray-200 text-sm px-2 py-2 focus:ring-0 focus:outline-none w-full"
-                    />
-                    <div class="h-6 w-px bg-gray-300 dark:bg-zinc-700"></div>
-                    <select bind:value={inviteRole} class="bg-transparent border-none text-sm text-gray-700 dark:text-gray-300 px-2 py-2 focus:ring-0 focus:outline-none cursor-pointer font-medium">
-                        <option class="bg-white dark:bg-zinc-800 text-gray-900 dark:text-gray-100" value="editor">Editor</option>
-                        <option class="bg-white dark:bg-zinc-800 text-gray-900 dark:text-gray-100" value="viewer">Viewer</option>
-                    </select>
-                    <button 
-                        type="submit"
-                        disabled={inviteStatus === 'loading'}
-                        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors shadow-sm disabled:opacity-70 min-w-[80px]"
-                    >
-                        {inviteStatus === 'loading' ? 'Inviting...' : 'Invite'}
-                    </button>
-                </form>
-                {#if inviteMessage}
-                    <div class="flex items-center gap-1.5 text-xs font-medium {inviteStatus === 'success' ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}">
-                        <Icon icon={inviteStatus === 'success' ? 'mdi:check-circle' : 'mdi:alert-circle'} class="text-sm" />
-                        {inviteMessage}
-                    </div>
-                {/if}
-            </div>
-
-            {#if collabLoading}
-                <div class="flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500 py-1">
-                    <Icon icon="mdi:loading" class="animate-spin text-base" />
-                    Loading collaborators...
+<Modal title="Share document" icon="ph:share-network" width="max-w-[500px]" onclose={onClose}>
+    <div class="flex flex-col gap-5">
+        <div class="flex flex-col gap-2">
+            <div class="text-xs font-medium text-[var(--color-ink-muted)]">Invite collaborator</div>
+            <form onsubmit={inviteUser} class="flex items-center gap-2 rounded-md border border-[var(--color-line)] bg-[var(--color-surface)] p-1.5 focus-within:border-[var(--color-accent)] transition">
+                <div class="pl-2 text-[var(--color-ink-muted)]">
+                    <Icon icon="mdi:account-plus-outline" class="text-xl" />
                 </div>
-            {:else if collaborators.length > 0}
-                <div class="h-px bg-gray-200 dark:bg-zinc-800/50"></div>
-                <div class="space-y-2">
-                    <div class="text-sm font-semibold text-[var(--theme-text)]" style="color: var(--theme-text);">People with access</div>
-                    {#each collaborators as collab (collab.id)}
-                        <div class="flex items-center gap-3 py-1.5">
-                            <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 text-sm font-bold flex-shrink-0">
-                                {collab.username[0].toUpperCase()}
-                            </div>
-                            <div class="flex-1 min-w-0">
-                                <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{collab.username}</p>
-                                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{collab.email}</p>
-                            </div>
-                            <span class="text-xs font-semibold px-2 py-0.5 rounded-full flex-shrink-0 {collab.role === 'editor' ? 'bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300' : 'bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-400'}">
-                                {collab.role}
-                            </span>
-                            <button
-                                onclick={() => removeCollaborator(collab)}
-                                disabled={removingId === collab.id}
-                                title="Remove collaborator"
-                                class="flex-shrink-0 p-1 rounded text-gray-400 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors disabled:opacity-40"
-                            >
-                                {#if removingId === collab.id}
-                                    <Icon icon="mdi:loading" class="text-base animate-spin" />
-                                {:else}
-                                    <Icon icon="mdi:close" class="text-base" />
-                                {/if}
-                            </button>
-                        </div>
-                    {/each}
+                <input
+                    type="email"
+                    placeholder="Add people via email..."
+                    bind:value={inviteEmail}
+                    required
+                    class="flex-1 bg-transparent border-none text-sm px-2 py-2 focus:ring-0 focus:outline-none w-full"
+                />
+                <div class="h-6 w-px bg-[var(--color-line)]"></div>
+                <select bind:value={inviteRole} class="bg-transparent border-none text-sm text-[var(--color-ink-muted)] px-2 py-2 focus:ring-0 focus:outline-none cursor-pointer font-medium">
+                    <option value="editor">Editor</option>
+                    <option value="viewer">Viewer</option>
+                </select>
+                <button
+                    type="submit"
+                    disabled={inviteStatus === 'loading'}
+                    class="rounded-md bg-[var(--color-accent)] px-4 py-2 text-sm font-medium text-white transition hover:opacity-90 disabled:opacity-70 min-w-[80px]"
+                >
+                    {inviteStatus === 'loading' ? 'Inviting...' : 'Invite'}
+                </button>
+            </form>
+            {#if inviteMessage}
+                <div class="flex items-center gap-1.5 text-xs font-medium {inviteStatus === 'success' ? 'text-[var(--color-success)]' : 'text-[var(--color-danger)]'}">
+                    <Icon icon={inviteStatus === 'success' ? 'mdi:check-circle' : 'mdi:alert-circle'} class="text-sm" />
+                    {inviteMessage}
                 </div>
             {/if}
+        </div>
 
-            <div class="h-px bg-gray-200 dark:bg-zinc-800/50"></div>
+        {#if collabLoading}
+            <div class="flex items-center gap-2 text-sm text-[var(--color-ink-muted)] py-1">
+                <Icon icon="mdi:loading" class="animate-spin text-base" />
+                Loading collaborators...
+            </div>
+        {:else if collaborators.length > 0}
+            <div class="h-px bg-[var(--color-line)]"></div>
+            <div class="flex flex-col gap-2">
+                <div class="text-xs font-medium text-[var(--color-ink-muted)]">People with access</div>
+                {#each collaborators as collab (collab.id)}
+                    <div class="flex items-center gap-3 py-1.5">
+                        <div class="w-8 h-8 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center text-[var(--color-accent)] text-sm font-bold flex-shrink-0">
+                            {collab.username[0].toUpperCase()}
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <p class="text-sm font-medium text-[var(--color-ink)] truncate">{collab.username}</p>
+                            <p class="text-xs text-[var(--color-ink-muted)] truncate">{collab.email}</p>
+                        </div>
+                        <span class="text-xs font-semibold px-2 py-0.5 rounded-full flex-shrink-0 {collab.role === 'editor' ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : 'bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]'}">
+                            {collab.role}
+                        </span>
+                        <button
+                            onclick={() => removeCollaborator(collab)}
+                            disabled={removingId === collab.id}
+                            title="Remove collaborator"
+                            class="flex-shrink-0 rounded p-1 text-[var(--color-ink-muted)] transition hover:bg-[var(--color-danger)]/10 hover:text-[var(--color-danger)] disabled:opacity-40"
+                        >
+                            {#if removingId === collab.id}
+                                <Icon icon="mdi:loading" class="text-base animate-spin" />
+                            {:else}
+                                <Icon icon="mdi:close" class="text-base" />
+                            {/if}
+                        </button>
+                    </div>
+                {/each}
+            </div>
+        {/if}
 
-            <div class="space-y-3">
-                <div class="text-sm font-semibold text-[var(--theme-text)]" style="color: var(--theme-text);">General Access</div>
-                <div class="flex items-center gap-4 p-3 bg-gray-50/50 dark:bg-zinc-950/30 rounded-xl border border-gray-200 dark:border-zinc-800/50 hover:bg-gray-50 dark:hover:bg-zinc-900/50 transition-colors">
-                    <div class="bg-gray-200 dark:bg-zinc-800 p-2.5 rounded-full text-gray-600 dark:text-gray-300">
-                        <Icon icon="mdi:earth" class="text-xl" />
-                    </div>
-                    <div class="flex-1">
-                        <h4 class="text-sm font-medium text-gray-900 dark:text-white">Anyone with the link</h4>
-                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Can view and collaborate based on role</p>
-                    </div>
-                    <select bind:value={role} class="bg-gray-100 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 text-sm font-medium text-gray-700 dark:text-gray-300 rounded-md px-3 py-1.5 focus:outline-none cursor-pointer focus:ring-2 focus:ring-blue-500/20 hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors">
-                        <option class="bg-white dark:bg-zinc-800 text-gray-900 dark:text-gray-100" value="viewer">Viewer</option>
-                        <option class="bg-white dark:bg-zinc-800 text-gray-900 dark:text-gray-100" value="editor">Editor</option>
-                    </select>
+        <div class="h-px bg-[var(--color-line)]"></div>
+
+        <div class="flex flex-col gap-2">
+            <div class="text-xs font-medium text-[var(--color-ink-muted)]">General access</div>
+            <div class="flex items-center gap-4 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface-muted)] p-3 transition hover:bg-[var(--color-surface-sunken)]">
+                <div class="rounded-full bg-[var(--color-surface-sunken)] p-2.5 text-[var(--color-ink-muted)]">
+                    <Icon icon="mdi:earth" class="text-xl" />
                 </div>
+                <div class="flex-1">
+                    <h4 class="text-sm font-medium text-[var(--color-ink)]">Anyone with the link</h4>
+                    <p class="text-xs text-[var(--color-ink-muted)] mt-0.5">Can view and collaborate based on role</p>
+                </div>
+                <select bind:value={role} class="rounded-md border border-[var(--color-line)] bg-[var(--color-surface)] px-3 py-1.5 text-sm font-medium text-[var(--color-ink-muted)] transition hover:bg-[var(--color-surface-sunken)] focus:outline-none cursor-pointer">
+                    <option value="viewer">Viewer</option>
+                    <option value="editor">Editor</option>
+                </select>
             </div>
         </div>
-        
-        <div class="p-4 bg-gray-50 dark:bg-zinc-950/50 border-t border-[var(--theme-border)] flex items-center justify-between" style="border-color: var(--theme-border);">
-            <button 
-                onclick={copyLink}
-                class="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-500/10 transition-colors"
-            >
-                {#if copied}
-                    <Icon icon="mdi:check" class="text-lg" />
-                    <span>Link copied!</span>
-                {:else}
-                    <Icon icon="mdi:link-variant" class="text-lg" />
-                    <span>Copy link</span>
-                {/if}
-            </button>
-
-            <button onclick={onClose} class="px-6 py-2 text-sm font-semibold text-white bg-gray-800 hover:bg-gray-900 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-white rounded-lg shadow-sm transition-colors">
-                Done
-            </button>
-        </div>
     </div>
-</div>
+
+    {#snippet footer()}
+        <button
+            onclick={copyLink}
+            class="mr-auto flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium text-[var(--color-accent)] transition hover:bg-[var(--color-accent-soft)]"
+        >
+            {#if copied}
+                <Icon icon="mdi:check" class="text-base" />
+                <span>Link copied!</span>
+            {:else}
+                <Icon icon="mdi:link-variant" class="text-base" />
+                <span>Copy link</span>
+            {/if}
+        </button>
+
+        <button onclick={onClose} class="rounded-md bg-[var(--color-accent)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90">
+            Done
+        </button>
+    {/snippet}
+</Modal>
diff --git a/src/lib/components/ThemePicker.svelte b/src/lib/components/ThemePicker.svelte
index 1d2ef60..709e562 100644
--- a/src/lib/components/ThemePicker.svelte
+++ b/src/lib/components/ThemePicker.svelte
@@ -5,32 +5,47 @@
 
     let { class: className = '' } = $props();
 
-    const themeOptions = Object.keys(themes).flatMap(themeName => [
-        { name: `${themeName} Light`, theme: themeName, isDark: false },
-        { name: `${themeName} Dark`, theme: themeName, isDark: true }
-    ]);
-
-    function handleChange(e: Event) {
-        const val = (e.target as HTMLSelectElement).value;
-        const opt = themeOptions.find(o => o.name === val);
-        if (opt) {
-            $themeStore = opt.theme;
-            $darkModeStore = opt.isDark;
-        }
-    }
-
-    let selectedValue = $derived(`${$themeStore} ${$darkModeStore ? 'Dark' : 'Light'}`);
+    const themeNames = Object.keys(themes);
 </script>
 
 <div class="flex items-center gap-2 {className}">
-    <Icon icon={themes[$themeStore]?.icon || 'mdi:palette'} class="text-xl text-[var(--theme-text)] opacity-70" />
-    <select 
-        value={selectedValue}
-        onchange={handleChange}
-        class="bg-[var(--theme-bg)] text-[var(--theme-text)] border border-[var(--theme-border)] text-sm font-medium rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 block py-1.5 pl-3 pr-8 appearance-none cursor-pointer transition-colors outline-none"
-    >
-        {#each themeOptions as opt}
-            <option class="bg-[var(--theme-bg)] text-[var(--theme-text)]" value={opt.name}>{opt.name}</option>
+    <div class="flex rounded-lg bg-[var(--color-surface-sunken)] p-0.5 text-xs font-medium">
+        {#each themeNames as name}
+            <button
+                class="flex items-center gap-1.5 rounded-md px-2.5 py-1.5 transition
+                    {$themeStore === name
+                    ? 'bg-[var(--color-surface)] text-[var(--color-accent)] shadow-sm'
+                    : 'text-[var(--color-ink-muted)] hover:text-[var(--color-ink)]'}"
+                onclick={() => ($themeStore = name)}
+            >
+                <Icon icon={themes[name].icon} class="text-sm" />
+                {name}
+            </button>
         {/each}
-    </select>
+    </div>
+
+    <div class="flex rounded-lg bg-[var(--color-surface-sunken)] p-0.5 text-xs font-medium">
+        <button
+            class="flex items-center rounded-md px-2.5 py-1.5 transition
+                {!$darkModeStore
+                ? 'bg-[var(--color-surface)] text-[var(--color-ink)] shadow-sm'
+                : 'text-[var(--color-ink-muted)] hover:text-[var(--color-ink)]'}"
+            onclick={() => ($darkModeStore = false)}
+            aria-label="Light mode"
+            title="Light mode"
+        >
+            <Icon icon="ph:sun" class="text-sm" />
+        </button>
+        <button
+            class="flex items-center rounded-md px-2.5 py-1.5 transition
+                {$darkModeStore
+                ? 'bg-[var(--color-surface)] text-[var(--color-ink)] shadow-sm'
+                : 'text-[var(--color-ink-muted)] hover:text-[var(--color-ink)]'}"
+            onclick={() => ($darkModeStore = true)}
+            aria-label="Dark mode"
+            title="Dark mode"
+        >
+            <Icon icon="ph:moon" class="text-sm" />
+        </button>
+    </div>
 </div>
diff --git a/src/lib/components/Toolbar.svelte b/src/lib/components/Toolbar.svelte
index e24d38e..98a84a4 100644
--- a/src/lib/components/Toolbar.svelte
+++ b/src/lib/components/Toolbar.svelte
@@ -10,6 +10,9 @@
 	import PresentationMode from "./PresentationMode.svelte";
 	import CommentsSidebar from "./CommentsSidebar.svelte";
 	import VersionHistorySidebar from "./VersionHistorySidebar.svelte";
+	import Modal from './Modal.svelte';
+	import PromptModal from './PromptModal.svelte';
+	import ConfirmModal from './ConfirmModal.svelte';
 	import Icon from '@iconify/svelte';
 	import { undo, redo } from '@codemirror/commands';
 
@@ -348,13 +351,12 @@
 		showRenameModal = true;
 	}
 
-	function submitRename(e: Event) {
-		e.preventDefault();
-		if (renameTitle && renameTitle !== title) {
+	function submitRename(newTitle: string) {
+		if (newTitle && newTitle !== title) {
 			fetch(`/api/docs/${docId}`, {
 				method: 'PATCH',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ title: renameTitle })
+				body: JSON.stringify({ title: newTitle })
 			}).then(res => {
 				if (res.ok) {
 					window.location.reload();
@@ -401,7 +403,7 @@
 		<div class="flex items-center gap-3">
 			<button 
 				onclick={() => goto('/dashboard')} 
-				class="p-1.5 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-white/10 transition-colors"
+				class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] rounded-md hover:bg-[var(--color-surface-sunken)] transition-colors"
 				aria-label="Back to dashboard"
 				title="Dashboard"
 			>
@@ -410,14 +412,14 @@
 			
 			<div class="flex flex-col gap-0.5">
 				<div class="flex items-center gap-2">
-					<h1 class="text-[16px] font-semibold text-gray-900 dark:text-white tracking-tight truncate max-w-[200px] md:max-w-xs" title={title}>
+					<h1 class="text-[16px] font-semibold text-[var(--color-ink)] tracking-tight truncate max-w-[200px] md:max-w-xs" title={title}>
 						{title}
 					</h1>
 
 				</div>
 
 				
-				<div class="flex items-center gap-0.5 text-[13px] font-medium text-gray-600 dark:text-gray-300 -ml-1 action-menu-container">
+				<div class="flex items-center gap-0.5 text-[13px] font-medium text-[var(--color-ink-muted)] -ml-1 action-menu-container">
 					<div class="relative">
 						<button 
 							onclick={(e) => { e.stopPropagation(); activeMenu = activeMenu === 'file' ? null : 'file'; }} 
@@ -453,7 +455,7 @@
 								<button onclick={() => { activeMenu = null; handlePandocExport('html'); }} class="w-full text-left px-4 py-1 text-sm text-[var(--theme-text)] hover:bg-[var(--theme-border)]">HTML (.html)</button>
 								{#if !isViewer}
 								<div class="h-px bg-[var(--theme-border)] my-1"></div>
-								<button onclick={() => { activeMenu = null; deleteDoc(); }} class="w-full text-left px-4 py-1.5 text-sm text-red-500 hover:bg-red-500/10">Delete</button>
+								<button onclick={() => { activeMenu = null; deleteDoc(); }} class="w-full text-left px-4 py-1.5 text-sm text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10">Delete</button>
 								{/if}
 							</div>
 						{/if}
@@ -493,7 +495,7 @@
 									Version History
 								</button>
 								<div class="h-px bg-[var(--theme-border)] my-1"></div>
-								<button onclick={() => { activeMenu = null; $darkModeStore = !$darkModeStore; document.documentElement.classList.toggle('dark', $darkModeStore); }} class="w-full text-left px-4 py-1.5 text-sm text-[var(--theme-text)] hover:bg-[var(--theme-border)] flex items-center justify-between">
+								<button onclick={() => { activeMenu = null; $darkModeStore = !$darkModeStore; }} class="w-full text-left px-4 py-1.5 text-sm text-[var(--theme-text)] hover:bg-[var(--theme-border)] flex items-center justify-between">
 									Dark Mode
 									<Icon icon={$darkModeStore ? "mdi:check" : ""} class="text-sm" />
 								</button>
@@ -510,7 +512,7 @@
 				<div class="flex items-center -space-x-2 mr-2">
 					{#each $connectedUsers as user}
 						<div 
-							class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white border-2 border-white dark:border-zinc-950 shadow-sm"
+							class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white border-2 border-[var(--color-surface)] shadow-sm"
 							style="background-color: {user.color}; z-index: {user.isLocal ? 10 : 1};"
 							title={user.name + (user.isLocal ? ' (You)' : '')}
 						>
@@ -522,21 +524,21 @@
 
 			
 			<div class="flex items-center gap-1.5 px-2">
-				<a href="https://typst.app/docs/" target="_blank" rel="noopener noreferrer" class="p-1.5 text-gray-500 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 rounded-md hover:bg-gray-100 dark:hover:bg-white/10 transition-colors" title="Typst Docs">
+				<a href="https://typst.app/docs/" target="_blank" rel="noopener noreferrer" class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] rounded-md hover:bg-[var(--color-surface-sunken)] transition-colors" title="Typst Docs">
 					<Icon icon="mdi:book-open-page-variant-outline" class="text-[18px]" />
 				</a>
-				<a href="https://typst.app/universe/" target="_blank" rel="noopener noreferrer" class="p-1.5 text-gray-500 hover:text-purple-500 dark:text-gray-400 dark:hover:text-purple-400 rounded-md hover:bg-gray-100 dark:hover:bg-white/10 transition-colors" title="Typst Universe">
+				<a href="https://typst.app/universe/" target="_blank" rel="noopener noreferrer" class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] rounded-md hover:bg-[var(--color-surface-sunken)] transition-colors" title="Typst Universe">
 					<Icon icon="mdi:earth" class="text-[18px]" />
 				</a>
 			</div>
 			
-			<div class="w-px h-5 bg-gray-300 dark:bg-white/10"></div>
+			<div class="w-px h-5 bg-[var(--color-line)]"></div>
 
 			
 			{#if !isViewer}
 			<button
 				onclick={() => (isPresentationOpen = true)}
-				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10 rounded-md transition-colors"
+				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-[var(--color-ink-muted)] bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] rounded-md transition-colors"
 			>
 				<Icon icon="mdi:presentation-play" class="text-[16px]" />
 				Present
@@ -544,7 +546,7 @@
 
 			<button
 				onclick={() => ($commentsSidebarOpen = !$commentsSidebarOpen)}
-				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10 rounded-md transition-colors"
+				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-[var(--color-ink-muted)] bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] rounded-md transition-colors"
 			>
 				<Icon icon="mdi:comment-outline" class="text-[16px]" />
 				Comments
@@ -552,27 +554,27 @@
 
 			<button
 				onclick={() => (isShareModalOpen = true)}
-				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10 rounded-md transition-colors"
+				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-[var(--color-ink-muted)] bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] rounded-md transition-colors"
 			>
 				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" x2="12" y1="2" y2="15"/></svg>
 				Share
 			</button>
 			{/if}
 
-			<div class="w-px h-5 bg-gray-300 dark:bg-white/10"></div>
+			<div class="w-px h-5 bg-[var(--color-line)]"></div>
 
 			<button
 				onclick={() => ($previewOpenStore = !$previewOpenStore)}
-				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium transition-colors rounded-md {$previewOpenStore ? 'text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10' : 'text-blue-600 bg-blue-50 hover:bg-blue-100 dark:text-blue-400 dark:bg-blue-900/20 dark:hover:bg-blue-900/40'}"
+				class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium transition-colors rounded-md {$previewOpenStore ? 'text-[var(--color-ink-muted)] bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)]' : 'text-[var(--color-accent)] bg-[var(--color-accent-soft)] hover:opacity-90'}"
 				title={$previewOpenStore ? 'Hide preview' : 'Show preview'}
 			>
 				<Icon icon={$previewOpenStore ? 'mdi:eye-off-outline' : 'mdi:eye-outline'} class="text-[16px]" />
 				Preview
 			</button>
 
-			<div class="w-px h-5 bg-gray-300 dark:bg-white/10"></div>
+			<div class="w-px h-5 bg-[var(--color-line)]"></div>
 
-			<button onclick={handlePrint} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10 rounded-md transition-colors" title="Print Document">
+			<button onclick={handlePrint} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-[var(--color-ink-muted)] bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] rounded-md transition-colors" title="Print Document">
 				<Icon icon="mdi:printer" class="text-[16px]" />
 				Print
 			</button>
@@ -580,7 +582,7 @@
 			<div class="relative action-menu-container">
 				<button
 					onclick={(e) => { e.stopPropagation(); activeMenu = activeMenu === 'export' ? null : 'export'; }}
-					class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 dark:text-blue-400 dark:bg-blue-900/20 dark:hover:bg-blue-900/40 rounded-md transition-colors {activeMenu === 'export' ? 'ring-2 ring-blue-500/30' : ''}"
+					class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-[var(--color-accent)] bg-[var(--color-accent-soft)] hover:opacity-90 rounded-md transition-colors {activeMenu === 'export' ? 'ring-2 ring-[var(--color-accent)]/30' : ''}"
 				>
 					<Icon icon="mdi:export-variant" class="text-[16px]" />
 					Export
@@ -607,50 +609,50 @@
 	</div>
 
 	
-	<div class="flex items-center px-4 py-1.5 bg-white/50 dark:bg-black/10 border-t border-gray-200/60 dark:border-white/10 gap-4 overflow-x-auto no-scrollbar">
+	<div class="flex items-center px-4 py-1.5 bg-[var(--color-surface-muted)] border-t border-[var(--color-line)] gap-4 overflow-x-auto no-scrollbar">
 		
 		
 		<div class="flex items-center gap-1">
-			<button onclick={() => applyFormat('*', '*', 'bold')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Bold">
+			<button onclick={() => applyFormat('*', '*', 'bold')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Bold">
 				<Icon icon="mdi:format-bold" class="text-lg" />
 			</button>
-			<button onclick={() => applyFormat('_', '_', 'italic')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Italic">
+			<button onclick={() => applyFormat('_', '_', 'italic')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Italic">
 				<Icon icon="mdi:format-italic" class="text-lg" />
 			</button>
-			<button onclick={() => applyFormat('`', '`', 'code')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Code">
+			<button onclick={() => applyFormat('`', '`', 'code')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Code">
 				<Icon icon="mdi:code-tags" class="text-lg" />
 			</button>
-			<div class="w-px h-4 mx-1 bg-gray-300 dark:bg-white/10"></div>
-			<button onclick={() => applyFormat('$ ', ' $', 'x = y')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Math (Inline)">
+			<div class="w-px h-4 mx-1 bg-[var(--color-line)]"></div>
+			<button onclick={() => applyFormat('$ ', ' $', 'x = y')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Math (Inline)">
 				<Icon icon="mdi:sigma" class="text-lg" />
 			</button>
-			<button onclick={() => applyFormat('$ \n  ', '\n$ ', 'x = y')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Math (Block)">
+			<button onclick={() => applyFormat('$ \n  ', '\n$ ', 'x = y')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Math (Block)">
 				<Icon icon="mdi:math-integral" class="text-lg" />
 			</button>
-			<div class="w-px h-4 mx-1 bg-gray-300 dark:bg-white/10"></div>
-			<button onclick={() => applyFormat('- ', '', 'List item')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Bullet List">
+			<div class="w-px h-4 mx-1 bg-[var(--color-line)]"></div>
+			<button onclick={() => applyFormat('- ', '', 'List item')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Bullet List">
 				<Icon icon="mdi:format-list-bulleted" class="text-lg" />
 			</button>
-			<button onclick={() => applyFormat('+ ', '', 'Numbered item')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Numbered List">
+			<button onclick={() => applyFormat('+ ', '', 'Numbered item')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Numbered List">
 				<Icon icon="mdi:format-list-numbered" class="text-lg" />
 			</button>
-			<div class="w-px h-4 mx-1 bg-gray-300 dark:bg-white/10"></div>
+			<div class="w-px h-4 mx-1 bg-[var(--color-line)]"></div>
 			<input type="file" bind:this={fileInput} onchange={handleImageUpload} class="hidden" accept="image/*,.ttf,.otf" />
 			{#if !isViewer}
-			<button onclick={() => fileInput?.click()} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Upload Image / Font">
+			<button onclick={() => fileInput?.click()} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Upload Image / Font">
 				<Icon icon="mdi:image-plus" class="text-lg" />
 			</button>
 			{/if}
 		</div>
 
-		<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
+		<div class="w-px h-4 bg-[var(--color-line)]"></div>
 
 		<div class="flex items-center gap-2">
 			<label for="font-select" class="text-[11px] font-semibold uppercase tracking-wider opacity-60">Font</label>
 			<select 
 				id="font-select"
 				onchange={(e) => insertTypstConfig('text', `font: "${e.currentTarget.value}"`)}
-				class="bg-[var(--theme-bg)] text-[var(--theme-text)] border border-[var(--theme-border)] text-xs rounded shadow-sm focus:ring-blue-500 focus:border-blue-500 block py-1 pl-2 pr-6 appearance-none cursor-pointer transition-colors"
+				class="bg-[var(--theme-bg)] text-[var(--theme-text)] border border-[var(--theme-border)] text-xs rounded shadow-sm focus:border-[var(--color-accent)] focus:outline-none block py-1 pl-2 pr-6 appearance-none cursor-pointer transition-colors"
 			>
 				<option class="bg-[var(--theme-bg)] text-[var(--theme-text)]" value="New Computer Modern">Default (New CM)</option>
 				<option class="bg-[var(--theme-bg)] text-[var(--theme-text)]" value="Libertinus Serif">Libertinus Serif</option>
@@ -666,7 +668,7 @@
 			</select>
 		</div>
 
-		<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
+		<div class="w-px h-4 bg-[var(--color-line)]"></div>
 
 		<div class="flex items-center gap-2">
 			{#if !isViewer}
@@ -680,29 +682,29 @@
 			{/if}
 		</div>
 
-		<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
+		<div class="w-px h-4 bg-[var(--color-line)]"></div>
 
-		<div class="flex items-center gap-1 bg-white dark:bg-black/20 border border-gray-300 dark:border-white/20 rounded shadow-sm overflow-hidden">
-			<button 
-				onclick={() => $documentZoomStore = Math.max(10, $documentZoomStore - 10)} 
-				class="px-2 py-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-white/10 transition-colors"
+		<div class="flex items-center gap-1 bg-[var(--color-surface)] border border-[var(--color-line)] rounded shadow-sm overflow-hidden">
+			<button
+				onclick={() => $documentZoomStore = Math.max(10, $documentZoomStore - 10)}
+				class="px-2 py-1 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] transition-colors"
 				title="Zoom Out"
 			>
 				<Icon icon="mdi:minus" class="text-sm" />
 			</button>
-			<span role="button" tabindex="0" onkeydown={(e) => { if (e.key === "Enter") $documentZoomStore = 100; }} class="text-[11px] font-semibold text-gray-700 dark:text-gray-200 min-w-[3rem] text-center select-none" ondblclick={() => $documentZoomStore = 100}>
+			<span role="button" tabindex="0" onkeydown={(e) => { if (e.key === "Enter") $documentZoomStore = 100; }} class="text-[11px] font-semibold text-[var(--color-ink-muted)] min-w-[3rem] text-center select-none" ondblclick={() => $documentZoomStore = 100}>
 				{$documentZoomStore}%
 			</span>
-			<button 
-				onclick={() => $documentZoomStore = Math.min(500, $documentZoomStore + 10)} 
-				class="px-2 py-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-white/10 transition-colors"
+			<button
+				onclick={() => $documentZoomStore = Math.min(500, $documentZoomStore + 10)}
+				class="px-2 py-1 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] transition-colors"
 				title="Zoom In"
 			>
 				<Icon icon="mdi:plus" class="text-sm" />
 			</button>
 		</div>
 
-		<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
+		<div class="w-px h-4 bg-[var(--color-line)]"></div>
 
 		<div class="flex items-center gap-2">
 			<ThemePicker />
@@ -735,105 +737,52 @@
 {/if}
 
 {#if showInfoModal}
-	
-	<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4 transition-opacity" onclick={() => showInfoModal = false} role="presentation" onkeydown={(e) => { if (e.key === "Enter") { showInfoModal = false; } }}>
-		<div class="bg-white/90 dark:bg-black/80 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/20 dark:border-white/10 w-full max-w-sm overflow-hidden transform transition-all" onclick={(e) => e.stopPropagation()} role="dialog" tabindex="-1" onkeydown={(e) => e.stopPropagation()}>
-			<div class="p-6 border-b border-gray-100 dark:border-white/10">
-				<div class="flex items-center gap-3">
-					<div class="p-2 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-lg">
-						<Icon icon="mdi:file-document" class="text-xl" />
-					</div>
-					<h3 class="text-lg font-semibold text-gray-900 dark:text-white flex-grow truncate">{docInfo?.title || title}</h3>
-				</div>
+	<Modal title={docInfo?.title || title} icon="ph:file-text" onclose={() => showInfoModal = false}>
+		<div class="flex flex-col gap-4 text-xs">
+			<div>
+				<p class="mb-1 font-medium text-[var(--color-ink-muted)]">Type</p>
+				<p class="text-sm text-[var(--color-ink)] capitalize">Document</p>
 			</div>
-			<div class="p-6 space-y-4">
+			{#if docInfo?.created_at}
 				<div>
-					<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Type</p>
-					<p class="text-sm text-gray-900 dark:text-gray-100 capitalize">Document</p>
+					<p class="mb-1 font-medium text-[var(--color-ink-muted)]">Created</p>
+					<p class="text-sm text-[var(--color-ink)]">{new Date(docInfo.created_at).toLocaleString()}</p>
 				</div>
-				{#if docInfo?.created_at}
-					<div>
-						<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Created At</p>
-						<p class="text-sm text-gray-900 dark:text-gray-100">{new Date(docInfo.created_at).toLocaleString()}</p>
-					</div>
-				{/if}
-				{#if docInfo?.updated_at}
-					<div>
-						<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Last Modified</p>
-						<p class="text-sm text-gray-900 dark:text-gray-100">{new Date(docInfo.updated_at).toLocaleString()}</p>
-					</div>
-				{/if}
-			</div>
-			<div class="p-4 bg-gray-50 dark:bg-white/5 border-t border-gray-100 dark:border-white/10 flex justify-end">
-				<button type="button" onclick={() => showInfoModal = false} class="px-5 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
-					Close
-				</button>
-			</div>
+			{/if}
+			{#if docInfo?.updated_at}
+				<div>
+					<p class="mb-1 font-medium text-[var(--color-ink-muted)]">Last modified</p>
+					<p class="text-sm text-[var(--color-ink)]">{new Date(docInfo.updated_at).toLocaleString()}</p>
+				</div>
+			{/if}
 		</div>
-	</div>
+
+		{#snippet footer()}
+			<button type="button" onclick={() => showInfoModal = false} class="rounded-md bg-[var(--color-accent)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90">
+				Close
+			</button>
+		{/snippet}
+	</Modal>
 {/if}
 
 {#if showRenameModal}
-	
-	<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4 transition-opacity" onclick={() => showRenameModal = false} role="presentation" onkeydown={(e) => { if (e.key === "Enter") { showRenameModal = false; } }}>
-		<div class="bg-white/90 dark:bg-black/80 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/20 dark:border-white/10 w-full max-w-sm overflow-hidden transform transition-all" onclick={(e) => e.stopPropagation()} role="dialog" tabindex="-1" onkeydown={(e) => e.stopPropagation()}>
-			<form onsubmit={submitRename} class="p-6">
-				<div class="flex items-center gap-3 mb-6">
-					<div class="p-2 bg-yellow-50 dark:bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 rounded-lg">
-						<Icon icon="mdi:pencil-outline" class="text-xl" />
-					</div>
-					<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Rename</h3>
-				</div>
-				
-				<div class="space-y-4">
-					
-					<input 
-						type="text"
-						required
-						bind:value={renameTitle}
-						class="w-full bg-transparent border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
-						placeholder="Enter new name"
-					/>
-				</div>
-				
-				<div class="pt-6 flex justify-end gap-3">
-					<button type="button" onclick={() => showRenameModal = false} class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors">
-						Cancel
-					</button>
-					<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm">
-						Save
-					</button>
-				</div>
-			</form>
-		</div>
-	</div>
+	<PromptModal
+		title="Rename"
+		label="New name"
+		icon="ph:pencil-simple"
+		value={renameTitle}
+		confirmLabel="Save"
+		onsubmit={submitRename}
+		onclose={() => showRenameModal = false}
+	/>
 {/if}
 
 {#if showDeleteModal}
-	
-	<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4 transition-opacity" onclick={() => showDeleteModal = false} role="presentation" onkeydown={(e) => { if (e.key === "Enter") { showDeleteModal = false; } }}>
-		<div class="bg-white/90 dark:bg-black/80 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/20 dark:border-white/10 w-full max-w-sm overflow-hidden transform transition-all" onclick={(e) => e.stopPropagation()} role="dialog" tabindex="-1" onkeydown={(e) => e.stopPropagation()}>
-			<div class="p-6">
-				<div class="flex items-center gap-3 mb-6">
-					<div class="p-2 bg-red-50 dark:bg-red-500/10 text-red-600 dark:text-red-400 rounded-lg">
-						<Icon icon="mdi:trash-can-outline" class="text-xl" />
-					</div>
-					<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Delete Document</h3>
-				</div>
-				
-				<p class="text-gray-600 dark:text-gray-300 text-sm mb-6">
-					Are you sure you want to delete this document? This action cannot be undone.
-				</p>
-				
-				<div class="flex justify-end gap-3">
-					<button type="button" onclick={() => showDeleteModal = false} class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors">
-						Cancel
-					</button>
-					<button type="button" onclick={confirmDelete} class="bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm">
-						Delete
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
+	<ConfirmModal
+		title="Delete document"
+		message="Are you sure you want to delete this document? This action cannot be undone."
+		confirmLabel="Delete"
+		onconfirm={confirmDelete}
+		onclose={() => showDeleteModal = false}
+	/>
 {/if}
diff --git a/src/lib/components/VersionHistorySidebar.svelte b/src/lib/components/VersionHistorySidebar.svelte
index 5244cfc..85b8ac0 100644
--- a/src/lib/components/VersionHistorySidebar.svelte
+++ b/src/lib/components/VersionHistorySidebar.svelte
@@ -55,13 +55,13 @@
 </script>
 
 <div class="fixed right-0 top-0 bottom-0 w-80 bg-[var(--theme-bg)] backdrop-blur-xl border-l shadow-2xl flex flex-col z-[70] transform transition-transform duration-300 border-[var(--theme-border)]">
-	<div class="flex items-center justify-between px-4 py-3 border-b bg-gray-50/50 bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
+	<div class="flex items-center justify-between px-4 py-3 border-b bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
 		<div class="flex items-center gap-2">
 			<Icon icon="mdi:history" class="text-lg" />
 			<h2 class="text-sm font-semibold text-[var(--theme-text)]">Version History</h2>
 			<span class="text-[10px] font-bold px-2 py-0.5 rounded-full">{versions.length}</span>
 		</div>
-		<button onclick={onClose} class="p-1.5 hover:text-gray-600 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-white/10 rounded-md transition-colors" title="Close Version History">
+		<button onclick={onClose} class="p-1.5 hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded-md transition-colors" title="Close Version History">
 			<Icon icon="mdi:close" class="text-lg" />
 		</button>
 	</div>
@@ -72,7 +72,7 @@
 				<Icon icon="mdi:loading" class="animate-spin text-2xl" />
 			</div>
 		{:else if error}
-			<div class="text-red-500 text-sm text-center p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-900/30">
+			<div class="text-[var(--color-danger)] text-sm text-center p-4 bg-[var(--color-danger)]/10 rounded-md border border-[var(--color-danger)]/20">
 				{error}
 			</div>
 		{:else if versions.length === 0}
@@ -96,11 +96,11 @@
 					</div>
 					
 					<div class="flex gap-2 mt-2">
-						<button onclick={() => previewVersion = version} class="flex-1 px-3 py-1.5 hover:bg-gray-200 dark:hover:bg-white/20 text-xs font-medium rounded-lg transition-colors flex items-center justify-center gap-1.5">
+						<button onclick={() => previewVersion = version} class="flex-1 px-3 py-1.5 hover:bg-[var(--color-surface-sunken)] text-xs font-medium rounded-md transition-colors flex items-center justify-center gap-1.5">
 							<Icon icon="mdi:eye" class="text-sm" />
 							Preview
 						</button>
-						<button onclick={() => restoreVersion(version)} class="flex-1 px-3 py-1.5 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:bg-purple-900/20 dark:text-purple-400 dark:hover:bg-purple-900/40 text-xs font-medium rounded-lg transition-colors flex items-center justify-center gap-1.5">
+						<button onclick={() => restoreVersion(version)} class="flex-1 px-3 py-1.5 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:bg-purple-900/20 dark:text-purple-400 dark:hover:bg-purple-900/40 text-xs font-medium rounded-md transition-colors flex items-center justify-center gap-1.5">
 							<Icon icon="mdi:restore" class="text-sm" />
 							Restore
 						</button>
@@ -120,17 +120,17 @@
 					<h3 class="text-lg font-semibold text-[var(--theme-text)]">Previewing Version</h3>
 					<span class="text-sm">{formatDate(previewVersion.created_at)}</span>
 				</div>
-				<button onclick={() => previewVersion = null} class="p-1.5 hover:text-gray-600 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-white/10 rounded-md transition-colors" title="Close Preview">
+				<button onclick={() => previewVersion = null} class="p-1.5 hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded-md transition-colors" title="Close Preview">
 					<Icon icon="mdi:close" class="text-xl" />
 				</button>
 			</div>
-			
-			<div class="flex-1 overflow-auto p-6 bg-gray-50/50 bg-[var(--theme-bg)] text-[var(--theme-text)]">
+
+			<div class="flex-1 overflow-auto p-6 bg-[var(--theme-bg)] text-[var(--theme-text)]">
 				<pre class="text-sm font-mono whitespace-pre-wrap word-break-break-word">{previewVersion.content}</pre>
 			</div>
-			
-			<div class="p-4 border-t flex justify-end gap-3 bg-white/50 rounded-b-2xl border-[var(--theme-border)]">
-				<button onclick={() => previewVersion = null} class="px-4 py-2 text-sm font-medium hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors">
+
+			<div class="p-4 border-t flex justify-end gap-3 bg-[var(--color-surface)] rounded-b-2xl border-[var(--theme-border)]">
+				<button onclick={() => previewVersion = null} class="px-4 py-2 text-sm font-medium hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded-md transition-colors">
 					Close
 				</button>
 				<button onclick={() => restoreVersion(previewVersion!)} class="bg-purple-600 hover:bg-purple-700 px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm flex items-center gap-2">
diff --git a/src/lib/components/dashboard/CreateDocModal.svelte b/src/lib/components/dashboard/CreateDocModal.svelte
deleted file mode 100644
index fa6061b..0000000
--- a/src/lib/components/dashboard/CreateDocModal.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-    import Icon from '@iconify/svelte';
-    let { createDoc, onClose } = $props<{ 
-        createDoc: (title: string) => void, 
-        onClose: () => void 
-    }>();
-    
-    let newDocTitle = $state('Untitled Document');
-    
-    function onSubmit(e: Event) {
-        e.preventDefault();
-        createDoc(newDocTitle);
-    }
-</script>
-
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 animate-in fade-in duration-200" role="presentation" onclick={onClose}>
-    <div tabindex="-1" class="bg-[var(--theme-bg)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md overflow-hidden" role="dialog" aria-modal="true" aria-labelledby="create-doc-title" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
-        <div class="flex justify-between items-center p-5 border-b border-gray-200 dark:border-white/10">
-            <h2 id="create-doc-title" class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-                <Icon icon="mdi:file-document-plus" class="text-blue-500 text-xl" />
-                Create Document
-            </h2>
-            <button onclick={onClose} aria-label="Close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full p-1 transition-colors">
-                <Icon icon="mdi:close" class="text-xl" />
-            </button>
-        </div>
-        
-        <form onsubmit={onSubmit} class="p-5 space-y-4">
-            <div class="space-y-2">
-                <label for="doc-title-input" class="text-sm font-medium text-gray-700 dark:text-gray-300 block">Document Title</label>
-                <input 
-                    id="doc-title-input"
-                    type="text" 
-                    required
-                    bind:value={newDocTitle}
-                    class="w-full bg-black/5 dark:bg-white/5 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
-                    placeholder="Untitled Document"
-                />
-            </div>
-            
-            <div class="pt-4 flex justify-end gap-3">
-                <button type="button" onclick={onClose} class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors">
-                    Cancel
-                </button>
-                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm flex items-center gap-2">
-                    <Icon icon="mdi:plus" class="text-lg" />
-                    Create
-                </button>
-            </div>
-        </form>
-    </div>
-</div>
diff --git a/src/lib/components/dashboard/CreateFolderModal.svelte b/src/lib/components/dashboard/CreateFolderModal.svelte
deleted file mode 100644
index 003b884..0000000
--- a/src/lib/components/dashboard/CreateFolderModal.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts">
-    import Icon from '@iconify/svelte';
-    let { createFolder, onClose } = $props<{ 
-        createFolder: (name: string) => void, 
-        onClose: () => void 
-    }>();
-    
-    let newFolderName = $state('New Folder');
-    
-    function onSubmit(e: Event) {
-        e.preventDefault();
-        createFolder(newFolderName);
-    }
-</script>
-
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 animate-in fade-in duration-200" role="presentation" onclick={onClose}>
-    <div tabindex="-1" class="bg-[var(--theme-bg)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md overflow-hidden" role="dialog" aria-modal="true" aria-labelledby="create-folder-title" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
-        <div class="flex justify-between items-center p-5 border-b border-gray-200 dark:border-white/10">
-            <h2 id="create-folder-title" class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-                <Icon icon="mdi:folder-plus" class="text-yellow-500 text-xl" />
-                Create Folder
-            </h2>
-            <button onclick={onClose} aria-label="Close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full p-1 transition-colors">
-                <Icon icon="mdi:close" class="text-xl" />
-            </button>
-        </div>
-        
-        <form onsubmit={onSubmit} class="p-5 space-y-4">
-            <div class="space-y-2">
-                <label for="folder-title-input" class="text-sm font-medium text-gray-700 dark:text-gray-300 block">Folder Name</label>
-                <input 
-                    id="folder-title-input"
-                    type="text" 
-                    required
-                    bind:value={newFolderName}
-                    class="w-full bg-black/5 dark:bg-white/5 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
-                    placeholder="New Folder"
-                />
-            </div>
-            
-            <div class="pt-4 flex justify-end gap-3">
-                <button type="button" onclick={onClose} class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors">
-                    Cancel
-                </button>
-                <button type="submit" class="bg-yellow-500 hover:bg-yellow-600 text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm flex items-center gap-2">
-                    <Icon icon="mdi:plus" class="text-lg" />
-                    Create
-                </button>
-            </div>
-        </form>
-    </div>
-</div>
diff --git a/src/lib/components/dashboard/CreateProjectModal.svelte b/src/lib/components/dashboard/CreateProjectModal.svelte
deleted file mode 100644
index c8fc255..0000000
--- a/src/lib/components/dashboard/CreateProjectModal.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script lang="ts">
-    import Icon from '@iconify/svelte';
-    let { createProject, onClose } = $props<{
-        createProject: (name: string) => void,
-        onClose: () => void
-    }>();
-
-    let newProjectName = $state('Untitled Project');
-
-    function onSubmit(e: Event) {
-        e.preventDefault();
-        createProject(newProjectName);
-    }
-</script>
-
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 animate-in fade-in duration-200" role="presentation" onclick={onClose}>
-    <div tabindex="-1" class="bg-[var(--theme-bg)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md overflow-hidden" role="dialog" aria-modal="true" aria-labelledby="create-project-title" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
-        <div class="flex justify-between items-center p-5 border-b border-gray-200 dark:border-white/10">
-            <h2 id="create-project-title" class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
-                <Icon icon="mdi:folder-multiple-plus" class="text-blue-500 text-xl" />
-                Create Project
-            </h2>
-            <button onclick={onClose} aria-label="Close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full p-1 transition-colors">
-                <Icon icon="mdi:close" class="text-xl" />
-            </button>
-        </div>
-
-        <form onsubmit={onSubmit} class="p-5 space-y-4">
-            <div class="space-y-2">
-                <label for="project-name-input" class="text-sm font-medium text-gray-700 dark:text-gray-300 block">Project Name</label>
-                <input
-                    id="project-name-input"
-                    type="text"
-                    required
-                    bind:value={newProjectName}
-                    class="w-full bg-black/5 dark:bg-white/5 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
-                    placeholder="Untitled Project"
-                />
-                <p class="text-xs text-gray-500 dark:text-gray-400">A multi-file workspace, seeded with a <code class="font-mono">typst.toml</code> and <code class="font-mono">main.typ</code>.</p>
-            </div>
-
-            <div class="pt-4 flex justify-end gap-3">
-                <button type="button" onclick={onClose} class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors">
-                    Cancel
-                </button>
-                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm flex items-center gap-2">
-                    <Icon icon="mdi:plus" class="text-lg" />
-                    Create
-                </button>
-            </div>
-        </form>
-    </div>
-</div>
diff --git a/src/lib/components/dashboard/DeleteModal.svelte b/src/lib/components/dashboard/DeleteModal.svelte
deleted file mode 100644
index 08d2dc1..0000000
--- a/src/lib/components/dashboard/DeleteModal.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script lang="ts">
-    import Icon from '@iconify/svelte';
-    let { deleteTarget, confirmDelete, onClose } = $props<{ 
-        deleteTarget: {id: string, type: 'document'|'folder'|'file', name: string}, 
-        confirmDelete: () => void, 
-        onClose: () => void 
-    }>();
-</script>
-
-<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4 transition-opacity" onclick={onClose} role="presentation" onkeydown={(e) => { if (e.key === "Enter") { onClose(e); } }}>
-    <div class="bg-white/90 dark:bg-black/80 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/20 dark:border-white/10 w-full max-w-sm overflow-hidden transform transition-all" onclick={(e) => e.stopPropagation()} role="dialog" tabindex="-1" onkeydown={(e) => e.stopPropagation()}>
-        <div class="p-6">
-            <div class="flex items-center gap-3 mb-6">
-                <div class="p-2 bg-red-50 dark:bg-red-500/10 text-red-600 dark:text-red-400 rounded-lg">
-                    <Icon icon="mdi:trash-can-outline" class="text-xl" />
-                </div>
-                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Delete {deleteTarget.type}</h3>
-            </div>
-            
-            <p class="text-gray-600 dark:text-gray-300 text-sm mb-6">
-                Are you sure you want to delete <span class="font-semibold text-gray-900 dark:text-white">{deleteTarget.name}</span>?
-                {#if deleteTarget.type === 'folder'}This will also delete all of its contents.{/if}
-                This action cannot be undone.
-            </p>
-            
-            <div class="flex justify-end gap-3">
-                <button type="button" onclick={onClose} class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors">
-                    Cancel
-                </button>
-                <button type="button" onclick={confirmDelete} class="bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm">
-                    Delete
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/src/lib/components/dashboard/DocCard.svelte b/src/lib/components/dashboard/DocCard.svelte
index 1f43f4c..54c32bc 100644
--- a/src/lib/components/dashboard/DocCard.svelte
+++ b/src/lib/components/dashboard/DocCard.svelte
@@ -31,59 +31,59 @@
     }
 </script>
 
-<div 
-    class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 flex flex-col hover:shadow-lg hover:border-blue-400 dark:hover:border-blue-500/50 transition-all duration-200 relative group transform hover:-translate-y-1 cursor-pointer overflow-visible" 
-    role="button" 
-    tabindex="0" 
-    onclick={() => goto(`/doc/${doc.id}`)} 
+<div
+    class="bg-[var(--color-surface)] rounded-lg shadow-sm border border-[var(--color-line)] flex flex-col hover:border-[var(--color-accent)] transition relative group cursor-pointer overflow-visible"
+    role="button"
+    tabindex="0"
+    onclick={() => goto(`/doc/${doc.id}`)}
     onkeydown={(e) => e.key === 'Enter' && goto(`/doc/${doc.id}`)}
     draggable="true"
     ondragstart={(e) => e.dataTransfer?.setData('text/plain', JSON.stringify({ type: 'document', id: doc.id }))}
 >
-    
-    <div class="h-40 w-full bg-gray-50 dark:bg-black/40 rounded-t-xl overflow-hidden flex items-center justify-center border-b border-gray-100 dark:border-white/10 relative pointer-events-none">
+
+    <div class="h-40 w-full bg-[var(--color-surface-muted)] rounded-t-lg overflow-hidden flex items-center justify-center border-b border-[var(--color-line)] relative pointer-events-none">
         {#if doc.thumbnail_svg}
             <div class="w-full h-full flex items-start justify-center bg-white transition-transform duration-300 group-hover:scale-110">
                 <img src={`data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(doc.thumbnail_svg)))}`} class="w-full h-auto shadow-sm border border-gray-200" alt="Thumbnail" draggable="false" />
             </div>
         {:else}
-            <div class="p-4 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-full transition-transform duration-300 group-hover:scale-110">
+            <div class="p-4 bg-[var(--color-accent-soft)] text-[var(--color-accent)] rounded-full transition-transform duration-300 group-hover:scale-110">
                 <Icon icon="mdi:file-document" class="text-4xl" />
             </div>
         {/if}
     </div>
-    
-    
+
+
     <div class="p-4 flex flex-col flex-grow">
         <div class="flex items-start justify-between">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white truncate pr-2 pointer-events-none" title={doc.title}>{doc.title}</h3>
-            
-            
+            <h3 class="text-lg font-semibold text-[var(--color-ink)] truncate pr-2 pointer-events-none" title={doc.title}>{doc.title}</h3>
+
+
             <div class="relative action-menu-container">
-                <button 
-                    aria-label="Document actions" 
-                    onclick={toggleMenu} 
-                    class="text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors p-1 rounded-full hover:bg-gray-100 dark:hover:bg-white/10 pointer-events-auto"
+                <button
+                    aria-label="Document actions"
+                    onclick={toggleMenu}
+                    class="text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors p-1 rounded-full hover:bg-[var(--color-surface-sunken)] pointer-events-auto"
                 >
                     <Icon icon="mdi:dots-vertical" class="text-xl" />
                 </button>
-                
+
                 {#if activeMenu === doc.id}
-                    <div class="absolute right-0 {dropUp ? 'bottom-full mb-1' : 'top-full mt-1'} w-48 bg-[var(--theme-bg)] rounded-xl shadow-xl border border-gray-200 dark:border-white/10 py-1 z-[100]">
-                        <button onclick={(e) => { e.stopPropagation(); openInfo(doc, 'document'); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
+                    <div class="absolute right-0 {dropUp ? 'bottom-full mb-1' : 'top-full mt-1'} w-48 bg-[var(--color-surface)] rounded-md shadow-xl border border-[var(--color-line)] py-1 z-[100]">
+                        <button onclick={(e) => { e.stopPropagation(); openInfo(doc, 'document'); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
                             <Icon icon="mdi:information-outline" class="text-lg text-blue-500" />
                             View Info
                         </button>
-                        <button onclick={(e) => { e.stopPropagation(); openRename(doc.id, doc.title, 'document'); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
+                        <button onclick={(e) => { e.stopPropagation(); openRename(doc.id, doc.title, 'document'); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
                             <Icon icon="mdi:pencil-outline" class="text-lg text-yellow-500" />
                             Rename
                         </button>
-                        <button onclick={(e) => { e.stopPropagation(); shareItem(doc); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
+                        <button onclick={(e) => { e.stopPropagation(); shareItem(doc); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
                             <Icon icon="mdi:share-variant-outline" class="text-lg text-green-500" />
                             Share
                         </button>
-                        <div class="h-px bg-gray-200 dark:bg-white/10 my-1"></div>
-                        <button onclick={(e) => { e.stopPropagation(); deleteDoc(doc.id, doc.title); }} class="w-full text-left px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-500/10 flex items-center gap-2">
+                        <div class="h-px bg-[var(--color-line)] my-1"></div>
+                        <button onclick={(e) => { e.stopPropagation(); deleteDoc(doc.id, doc.title); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10 flex items-center gap-2">
                             <Icon icon="mdi:trash-can-outline" class="text-lg" />
                             Delete
                         </button>
@@ -91,7 +91,7 @@
                 {/if}
             </div>
         </div>
-        <p class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mt-2 pointer-events-none">
+        <p class="text-xs text-[var(--color-ink-muted)] flex items-center gap-1 mt-2 pointer-events-none">
             <Icon icon="mdi:clock-outline" class="text-sm" />
             Edited {new Date(doc.updated_at.endsWith('Z') ? doc.updated_at : doc.updated_at + 'Z').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
         </p>
diff --git a/src/lib/components/dashboard/FileCard.svelte b/src/lib/components/dashboard/FileCard.svelte
index 188256f..31fd1f3 100644
--- a/src/lib/components/dashboard/FileCard.svelte
+++ b/src/lib/components/dashboard/FileCard.svelte
@@ -15,17 +15,17 @@
     }
 </script>
 
-<div 
-    class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 flex flex-col transition-all duration-200 relative group transform hover:-translate-y-1 {isFont ? 'cursor-default' : 'hover:shadow-lg hover:border-green-400 dark:hover:border-green-500/50 cursor-pointer'}" 
-    role="button" 
-    tabindex="0" 
-    onclick={handleOpen} 
+<div
+    class="bg-[var(--color-surface)] rounded-lg shadow-sm border border-[var(--color-line)] p-6 flex flex-col transition relative group {isFont ? 'cursor-default' : 'hover:border-[var(--color-accent)] cursor-pointer'}"
+    role="button"
+    tabindex="0"
+    onclick={handleOpen}
     onkeydown={(e) => e.key === 'Enter' && handleOpen()}
     draggable="true"
     ondragstart={(e) => e.dataTransfer?.setData('text/plain', JSON.stringify({ type: 'file', id: file.id }))}
 >
     <div class="flex items-start justify-between mb-4 pointer-events-none">
-        <div class="p-3 bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 rounded-lg overflow-hidden flex items-center justify-center w-12 h-12">
+        <div class="p-3 bg-green-50 dark:bg-green-500/10 text-green-600 dark:text-green-400 rounded-md overflow-hidden flex items-center justify-center w-12 h-12">
             {#if file.mime_type.startsWith('image/')}
                 <img src={`/api/files/${file.id}/data`} alt={file.name} class="w-full h-full object-cover rounded" draggable="false" />
             {:else if isFont}
@@ -34,12 +34,12 @@
                 <Icon icon="mdi:file-outline" class="text-2xl" />
             {/if}
         </div>
-        <button aria-label="Delete file" onclick={(e) => { e.stopPropagation(); deleteFile(file.id, file.name); }} class="pointer-events-auto text-gray-400 hover:text-red-500 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity bg-gray-50 hover:bg-red-50 dark:bg-white/5 dark:hover:bg-red-900/20 rounded-full p-2 shadow-sm border border-gray-100 dark:border-white/10">
+        <button aria-label="Delete file" onclick={(e) => { e.stopPropagation(); deleteFile(file.id, file.name); }} class="pointer-events-auto text-[var(--color-ink-muted)] hover:text-[var(--color-danger)] opacity-0 group-hover:opacity-100 transition-opacity bg-[var(--color-surface-muted)] hover:bg-[var(--color-danger)]/10 rounded-full p-2 shadow-sm border border-[var(--color-line)]">
             <Icon icon="mdi:trash-can-outline" class="text-lg" />
         </button>
     </div>
-    <h3 class="text-lg font-semibold text-gray-900 dark:text-white truncate mb-1 pointer-events-none" title={file.name}>{file.name}</h3>
-    <p class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mt-auto pt-4 border-t border-gray-100 dark:border-white/10 pointer-events-none">
+    <h3 class="text-lg font-semibold text-[var(--color-ink)] truncate mb-1 pointer-events-none" title={file.name}>{file.name}</h3>
+    <p class="text-xs text-[var(--color-ink-muted)] flex items-center gap-1 mt-auto pt-4 border-t border-[var(--color-line)] pointer-events-none">
         <Icon icon="mdi:clock-outline" class="text-sm" />
         Uploaded {new Date(file.created_at ? (file.created_at.endsWith('Z') ? file.created_at : file.created_at + 'Z') : Date.now()).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
     </p>
diff --git a/src/lib/components/dashboard/FolderRow.svelte b/src/lib/components/dashboard/FolderRow.svelte
index 45423f3..4fdfb4e 100644
--- a/src/lib/components/dashboard/FolderRow.svelte
+++ b/src/lib/components/dashboard/FolderRow.svelte
@@ -11,22 +11,22 @@
     }>();
 </script>
 
-<div 
-    class="flex flex-row items-center p-3 bg-white/50 dark:bg-black/20 backdrop-blur-sm border border-gray-200 dark:border-white/10 rounded-xl shadow-sm hover:shadow-md cursor-pointer group transition-all duration-200 relative {dragOverFolderId === folder.id ? 'ring-2 ring-blue-500 bg-blue-50 dark:bg-blue-900/20' : 'hover:-translate-y-0.5 hover:border-gray-300 dark:hover:border-white/20'}" 
-    role="button" 
-    tabindex="0" 
-    onclick={() => navigateToFolder(folder)} 
+<div
+    class="flex flex-row items-center p-3 bg-[var(--color-surface)] border border-[var(--color-line)] rounded-lg shadow-sm cursor-pointer group transition relative {dragOverFolderId === folder.id ? 'ring-2 ring-[var(--color-accent)] bg-[var(--color-accent-soft)]' : 'hover:border-[var(--color-accent)]'}"
+    role="button"
+    tabindex="0"
+    onclick={() => navigateToFolder(folder)}
     onkeydown={(e) => e.key === 'Enter' && navigateToFolder(folder)}
     ondragover={(e) => { e.preventDefault(); setDragOverFolderId(folder.id); }}
     ondragleave={() => setDragOverFolderId(null)}
     ondrop={(e) => handleDrop(e, folder.id)}
 >
-    <div class="flex items-center justify-center w-10 h-10 bg-yellow-50 dark:bg-yellow-500/10 rounded-lg group-hover:scale-105 transition-transform pointer-events-none shrink-0 mr-3">
+    <div class="flex items-center justify-center w-10 h-10 bg-yellow-50 dark:bg-yellow-500/10 rounded-md group-hover:scale-105 transition-transform pointer-events-none shrink-0 mr-3">
         <Icon icon="mdi:folder" class="text-2xl text-yellow-500" />
     </div>
-    <span class="font-medium text-gray-900 dark:text-white text-sm truncate w-full pointer-events-none pr-6">{folder.name}</span>
-    
-    <button aria-label="Delete folder" onclick={(e) => { e.stopPropagation(); deleteFolder(folder.id, folder.name); }} class="absolute top-1/2 -translate-y-1/2 right-2 text-gray-400 hover:text-red-500 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded hover:bg-red-50 dark:hover:bg-red-900/20 shrink-0">
+    <span class="font-medium text-[var(--color-ink)] text-sm truncate w-full pointer-events-none pr-6">{folder.name}</span>
+
+    <button aria-label="Delete folder" onclick={(e) => { e.stopPropagation(); deleteFolder(folder.id, folder.name); }} class="absolute top-1/2 -translate-y-1/2 right-2 text-[var(--color-ink-muted)] hover:text-[var(--color-danger)] opacity-0 group-hover:opacity-100 transition-opacity p-1.5 rounded hover:bg-[var(--color-danger)]/10 shrink-0">
         <Icon icon="mdi:trash-can-outline" class="text-base" />
     </button>
 </div>
diff --git a/src/lib/components/dashboard/InfoModal.svelte b/src/lib/components/dashboard/InfoModal.svelte
index 78215ec..46e33e9 100644
--- a/src/lib/components/dashboard/InfoModal.svelte
+++ b/src/lib/components/dashboard/InfoModal.svelte
@@ -1,41 +1,39 @@
 <script lang="ts">
-    import Icon from '@iconify/svelte';
-    let { selectedInfo, onClose } = $props<{ 
-        selectedInfo: {type: string, title?: string, name?: string, created_at: string, updated_at?: string}, 
-        onClose: () => void 
+    import Modal from '../Modal.svelte';
+    let { selectedInfo, onClose } = $props<{
+        selectedInfo: {type: string, title?: string, name?: string, created_at: string, updated_at?: string},
+        onClose: () => void
     }>();
+
+    const icon = $derived(selectedInfo.type === 'document' ? 'ph:file-text' : selectedInfo.type === 'folder' ? 'ph:folder' : 'ph:file');
+    const title = $derived(selectedInfo.title || selectedInfo.name || 'Details');
 </script>
 
-<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 transition-opacity" onclick={onClose} role="presentation" onkeydown={(e) => { if (e.key === "Enter") { onClose(e); } }}>
-    <div class="bg-white/90 dark:bg-black/80 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/20 dark:border-white/10 w-full max-w-sm overflow-hidden transform transition-all" onclick={(e) => e.stopPropagation()} role="dialog" tabindex="-1" onkeydown={(e) => e.stopPropagation()}>
-        <div class="p-6 border-b border-gray-100 dark:border-white/10">
-            <div class="flex items-center gap-3">
-                <div class="p-2 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-lg">
-                    <Icon icon={selectedInfo.type === 'document' ? 'mdi:file-document' : selectedInfo.type === 'folder' ? 'mdi:folder' : 'mdi:file'} class="text-xl" />
-                </div>
-                <h3 class="text-lg font-semibold text-gray-900 dark:text-white flex-grow truncate">{selectedInfo.title || selectedInfo.name}</h3>
-            </div>
+<Modal {title} {icon} onclose={onClose}>
+    <div class="flex flex-col gap-4 text-xs">
+        <div>
+            <p class="mb-1 font-medium text-[var(--color-ink-muted)]">Type</p>
+            <p class="text-sm capitalize text-[var(--color-ink)]">{selectedInfo.type}</p>
         </div>
-        <div class="p-6 space-y-4">
+        <div>
+            <p class="mb-1 font-medium text-[var(--color-ink-muted)]">Created</p>
+            <p class="text-sm text-[var(--color-ink)]">{new Date(selectedInfo.created_at.endsWith('Z') ? selectedInfo.created_at : selectedInfo.created_at + 'Z').toLocaleString()}</p>
+        </div>
+        {#if selectedInfo.updated_at}
             <div>
-                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Type</p>
-                <p class="text-sm text-gray-900 dark:text-gray-100 capitalize">{selectedInfo.type}</p>
+                <p class="mb-1 font-medium text-[var(--color-ink-muted)]">Last modified</p>
+                <p class="text-sm text-[var(--color-ink)]">{new Date(selectedInfo.updated_at.endsWith('Z') ? selectedInfo.updated_at : selectedInfo.updated_at + 'Z').toLocaleString()}</p>
             </div>
-            <div>
-                <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Created At</p>
-                <p class="text-sm text-gray-900 dark:text-gray-100">{new Date(selectedInfo.created_at.endsWith('Z') ? selectedInfo.created_at : selectedInfo.created_at + 'Z').toLocaleString()}</p>
-            </div>
-            {#if selectedInfo.updated_at}
-                <div>
-                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Last Modified</p>
-                    <p class="text-sm text-gray-900 dark:text-gray-100">{new Date(selectedInfo.updated_at.endsWith('Z') ? selectedInfo.updated_at : selectedInfo.updated_at + 'Z').toLocaleString()}</p>
-                </div>
-            {/if}
-        </div>
-        <div class="p-4 bg-gray-50 dark:bg-white/5 border-t border-gray-100 dark:border-white/10 flex justify-end">
-            <button type="button" onclick={onClose} class="px-5 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors">
-                Close
-            </button>
-        </div>
+        {/if}
     </div>
-</div>
+
+    {#snippet footer()}
+        <button
+            type="button"
+            onclick={onClose}
+            class="rounded-md bg-[var(--color-accent)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90"
+        >
+            Close
+        </button>
+    {/snippet}
+</Modal>
diff --git a/src/lib/components/dashboard/Navbar.svelte b/src/lib/components/dashboard/Navbar.svelte
index 0c97c06..7e521b8 100644
--- a/src/lib/components/dashboard/Navbar.svelte
+++ b/src/lib/components/dashboard/Navbar.svelte
@@ -11,44 +11,44 @@
     }
 </script>
 
-<nav class="bg-[var(--theme-bg)] shadow-sm border-b border-gray-200 dark:border-white/10 px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200">
-    <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
-        <Icon icon="mdi:script-text" class="text-blue-600 dark:text-blue-400 text-3xl" />
+<nav class="bg-[var(--color-surface)] shadow-sm border-b border-[var(--color-line)] px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200">
+    <h1 class="text-2xl font-bold text-[var(--color-ink)] flex items-center gap-3">
+        <span class="flex h-14 w-14 items-center justify-center rounded-lg bg-[var(--color-accent)]">
+            <img src="/favicon.png" alt="TypstDrive" class="h-10 w-10" />
+        </span>
         TypstDrive
     </h1>
     <div class="flex items-center gap-6">
-        <div class="flex items-center gap-2 text-gray-700 dark:text-gray-300 font-medium">
+        <div class="flex items-center gap-2 text-[var(--color-ink-muted)] font-medium">
             <Icon icon="mdi:account-circle" class="text-xl" />
             {$userStore?.username}
         </div>
-        <div class="h-6 w-px bg-gray-300 dark:bg-white/20"></div>
+        <div class="h-6 w-px bg-[var(--color-line)]"></div>
 
-        <a href="/projects" class="text-sm font-medium text-gray-600 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400 transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-3 py-2 rounded-lg flex items-center gap-2 border border-transparent dark:border-white/10" title="Projects">
+        <a href="/projects" class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-3 py-2 rounded-md flex items-center gap-2" title="Projects">
             <Icon icon="mdi:folder-multiple-outline" class="text-xl" />
         </a>
-        <a href="/packages" class="text-sm font-medium text-gray-600 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-3 py-2 rounded-lg flex items-center gap-2 border border-transparent dark:border-white/10" title="Packages">
+        <a href="/packages" class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-3 py-2 rounded-md flex items-center gap-2" title="Packages">
             <Icon icon="mdi:package-variant-closed" class="text-xl" />
         </a>
 
-
-        <a href="/api-docs" class="text-sm font-medium text-gray-600 hover:text-green-600 dark:text-gray-300 dark:hover:text-green-400 transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-3 py-2 rounded-lg flex items-center gap-2 border border-transparent dark:border-white/10" title="API Docs">
+        <a href="/api-docs" class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-3 py-2 rounded-md flex items-center gap-2" title="API Docs">
             <Icon icon="mdi:api" class="text-xl" />
         </a>
-        <a href="https://typst.app/docs/" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-3 py-2 rounded-lg flex items-center gap-2 border border-transparent dark:border-white/10" title="Typst Docs">
+        <a href="https://typst.app/docs/" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-3 py-2 rounded-md flex items-center gap-2" title="Typst Docs">
             <Icon icon="mdi:book-open-page-variant-outline" class="text-xl" />
         </a>
-        <a href="https://typst.app/universe/" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-gray-600 hover:text-purple-500 dark:text-gray-300 dark:hover:text-purple-400 transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-3 py-2 rounded-lg flex items-center gap-2 border border-transparent dark:border-white/10" title="Typst Universe">
+        <a href="https://typst.app/universe/" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-3 py-2 rounded-md flex items-center gap-2" title="Typst Universe">
             <Icon icon="mdi:earth" class="text-xl" />
         </a>
-        <div class="h-6 w-px bg-gray-300 dark:bg-white/20"></div>
-        
-        
+        <div class="h-6 w-px bg-[var(--color-line)]"></div>
+
         <ThemePicker />
 
-        <button onclick={() => goto('/settings')} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-3 py-2 rounded-lg flex items-center gap-2 border border-transparent dark:border-white/10" title="Settings">
+        <button onclick={() => goto('/settings')} class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-3 py-2 rounded-md flex items-center gap-2" title="Settings">
             <Icon icon="mdi:cog" class="text-2xl" />
         </button>
-        <button onclick={logout} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-4 py-2 rounded-lg flex items-center gap-2 border border-transparent dark:border-white/10">
+        <button onclick={logout} class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-4 py-2 rounded-md flex items-center gap-2">
             <Icon icon="mdi:logout" class="text-lg" />
             Logout
         </button>
diff --git a/src/lib/components/dashboard/ProjectCard.svelte b/src/lib/components/dashboard/ProjectCard.svelte
index 31eb562..1040e32 100644
--- a/src/lib/components/dashboard/ProjectCard.svelte
+++ b/src/lib/components/dashboard/ProjectCard.svelte
@@ -27,19 +27,19 @@
 </script>
 
 <div
-    class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 flex flex-col hover:shadow-lg hover:border-blue-400 dark:hover:border-blue-500/50 transition-all duration-200 relative group transform hover:-translate-y-1 cursor-pointer overflow-visible"
+    class="bg-[var(--color-surface)] rounded-lg shadow-sm border border-[var(--color-line)] flex flex-col hover:border-[var(--color-accent)] transition relative group cursor-pointer overflow-visible"
     role="button"
     tabindex="0"
     onclick={() => goto(`/project/${project.id}`)}
     onkeydown={(e) => e.key === 'Enter' && goto(`/project/${project.id}`)}
 >
-    <div class="h-40 w-full bg-gray-50 dark:bg-black/40 rounded-t-xl overflow-hidden flex items-center justify-center border-b border-gray-100 dark:border-white/10 relative pointer-events-none">
+    <div class="h-40 w-full bg-[var(--color-surface-muted)] rounded-t-lg overflow-hidden flex items-center justify-center border-b border-[var(--color-line)] relative pointer-events-none">
         {#if project.thumbnail_svg}
             <div class="w-full h-full flex items-start justify-center bg-white transition-transform duration-300 group-hover:scale-110">
                 <img src={`data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(project.thumbnail_svg)))}`} class="w-full h-auto shadow-sm border border-gray-200" alt="Thumbnail" draggable="false" />
             </div>
         {:else}
-            <div class="p-4 bg-blue-50 dark:bg-blue-500/10 text-blue-600 dark:text-blue-400 rounded-full transition-transform duration-300 group-hover:scale-110">
+            <div class="p-4 bg-[var(--color-accent-soft)] text-[var(--color-accent)] rounded-full transition-transform duration-300 group-hover:scale-110">
                 <Icon icon="mdi:folder-multiple-outline" class="text-4xl" />
             </div>
         {/if}
@@ -47,29 +47,29 @@
 
     <div class="p-4 flex flex-col flex-grow">
         <div class="flex items-start justify-between">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white truncate pr-2 pointer-events-none" title={project.name}>{project.name}</h3>
+            <h3 class="text-lg font-semibold text-[var(--color-ink)] truncate pr-2 pointer-events-none" title={project.name}>{project.name}</h3>
 
             <div class="relative action-menu-container">
-                <button aria-label="Project actions" onclick={toggleMenu} class="text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors p-1 rounded-full hover:bg-gray-100 dark:hover:bg-white/10 pointer-events-auto">
+                <button aria-label="Project actions" onclick={toggleMenu} class="text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors p-1 rounded-full hover:bg-[var(--color-surface-sunken)] pointer-events-auto">
                     <Icon icon="mdi:dots-vertical" class="text-xl" />
                 </button>
 
                 {#if activeMenu === project.id}
-                    <div class="absolute right-0 {dropUp ? 'bottom-full mb-1' : 'top-full mt-1'} w-48 bg-[var(--theme-bg)] rounded-xl shadow-xl border border-gray-200 dark:border-white/10 py-1 z-[100]">
-                        <button onclick={(e) => { e.stopPropagation(); openInfo(project); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
+                    <div class="absolute right-0 {dropUp ? 'bottom-full mb-1' : 'top-full mt-1'} w-48 bg-[var(--color-surface)] rounded-md shadow-xl border border-[var(--color-line)] py-1 z-[100]">
+                        <button onclick={(e) => { e.stopPropagation(); openInfo(project); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
                             <Icon icon="mdi:information-outline" class="text-lg text-blue-500" />
                             View Info
                         </button>
-                        <button onclick={(e) => { e.stopPropagation(); openRename(project.id, project.name); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
+                        <button onclick={(e) => { e.stopPropagation(); openRename(project.id, project.name); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
                             <Icon icon="mdi:pencil-outline" class="text-lg text-yellow-500" />
                             Rename
                         </button>
-                        <button onclick={(e) => { e.stopPropagation(); goto(`/project/${project.id}`); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
+                        <button onclick={(e) => { e.stopPropagation(); goto(`/project/${project.id}`); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
                             <Icon icon="mdi:open-in-new" class="text-lg text-green-500" />
                             Open
                         </button>
-                        <div class="h-px bg-gray-200 dark:bg-white/10 my-1"></div>
-                        <button onclick={(e) => { e.stopPropagation(); deleteProject(project.id, project.name); }} class="w-full text-left px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-500/10 flex items-center gap-2">
+                        <div class="h-px bg-[var(--color-line)] my-1"></div>
+                        <button onclick={(e) => { e.stopPropagation(); deleteProject(project.id, project.name); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10 flex items-center gap-2">
                             <Icon icon="mdi:trash-can-outline" class="text-lg" />
                             Delete
                         </button>
@@ -77,7 +77,7 @@
                 {/if}
             </div>
         </div>
-        <p class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mt-2 pointer-events-none">
+        <p class="text-xs text-[var(--color-ink-muted)] flex items-center gap-1 mt-2 pointer-events-none">
             <Icon icon="mdi:clock-outline" class="text-sm" />
             Edited {new Date(project.updated_at.endsWith('Z') ? project.updated_at : project.updated_at + 'Z').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
         </p>
diff --git a/src/lib/components/dashboard/RenameModal.svelte b/src/lib/components/dashboard/RenameModal.svelte
deleted file mode 100644
index a88e936..0000000
--- a/src/lib/components/dashboard/RenameModal.svelte
+++ /dev/null
@@ -1,48 +0,0 @@
-<script lang="ts">
-    import Icon from '@iconify/svelte';
-    let { initialTitle, handleRename, onClose } = $props<{ 
-        initialTitle: string, 
-        handleRename: (newTitle: string) => void, 
-        onClose: () => void 
-    }>();
-    
-    let renameTitle = $state("");
-    $effect(() => { renameTitle = initialTitle; });
-    
-    function onSubmit(e: Event) {
-        e.preventDefault();
-        handleRename(renameTitle);
-    }
-</script>
-
-<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 transition-opacity" onclick={onClose} role="presentation" onkeydown={(e) => { if (e.key === "Enter") { onClose(e); } }}>
-    <div class="bg-white/90 dark:bg-black/80 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/20 dark:border-white/10 w-full max-w-sm overflow-hidden transform transition-all" onclick={(e) => e.stopPropagation()} role="dialog" tabindex="-1" onkeydown={(e) => e.stopPropagation()}>
-        <form onsubmit={onSubmit} class="p-6">
-            <div class="flex items-center gap-3 mb-6">
-                <div class="p-2 bg-yellow-50 dark:bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 rounded-lg">
-                    <Icon icon="mdi:pencil-outline" class="text-xl" />
-                </div>
-                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Rename</h3>
-            </div>
-            
-            <div class="space-y-4">
-                <input 
-                    type="text"
-                    required
-                    bind:value={renameTitle}
-                    class="w-full bg-transparent border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
-                    placeholder="Enter new name"
-                />
-            </div>
-            
-            <div class="pt-6 flex justify-end gap-3">
-                <button type="button" onclick={onClose} class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg transition-colors">
-                    Cancel
-                </button>
-                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors shadow-sm">
-                    Save
-                </button>
-            </div>
-        </form>
-    </div>
-</div>
diff --git a/src/lib/components/modals/CreateDocModal.svelte b/src/lib/components/modals/CreateDocModal.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/modals/CreateFolderModal.svelte b/src/lib/components/modals/CreateFolderModal.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/modals/DeleteModal.svelte b/src/lib/components/modals/DeleteModal.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/modals/InfoModal.svelte b/src/lib/components/modals/InfoModal.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/modals/RenameModal.svelte b/src/lib/components/modals/RenameModal.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/project/FileTree.svelte b/src/lib/components/project/FileTree.svelte
index ede5d24..8fb082a 100644
--- a/src/lib/components/project/FileTree.svelte
+++ b/src/lib/components/project/FileTree.svelte
@@ -54,15 +54,15 @@
 	}
 </script>
 
-<div class="h-full flex flex-col bg-[var(--theme-bg)] border-r border-gray-200 dark:border-white/10">
-	<div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-white/10">
-		<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Files</span>
+<div class="h-full flex flex-col bg-[var(--color-surface)] border-r border-[var(--color-line)]">
+	<div class="flex items-center justify-between px-3 py-2 border-b border-[var(--color-line)]">
+		<span class="text-xs font-semibold uppercase tracking-wide text-[var(--color-ink-muted)]">Files</span>
 		{#if !readOnly}
 			<div class="flex items-center gap-1">
-				<button onclick={handleCreate} title="New file" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-white/10 text-gray-600 dark:text-gray-300">
+				<button onclick={handleCreate} title="New file" class="p-1 rounded hover:bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]">
 					<Icon icon="mdi:file-plus-outline" class="text-lg" />
 				</button>
-				<button onclick={() => fileInput.click()} title="Upload file" class="p-1 rounded hover:bg-gray-100 dark:hover:bg-white/10 text-gray-600 dark:text-gray-300">
+				<button onclick={() => fileInput.click()} title="Upload file" class="p-1 rounded hover:bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]">
 					<Icon icon="mdi:upload" class="text-lg" />
 				</button>
 				<input bind:this={fileInput} type="file" multiple class="hidden" onchange={(e) => { const t = e.target as HTMLInputElement; if (t.files) onUpload(t.files); t.value = ''; }} />
@@ -72,7 +72,7 @@
 
 	<div class="flex-1 overflow-y-auto py-1">
 		{#each files as file (file.id)}
-			<div class="group flex items-center gap-1 px-2 py-1.5 text-sm cursor-pointer {activeFileId === file.id ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5'}">
+			<div class="group flex items-center gap-1 px-2 py-1.5 text-sm cursor-pointer {activeFileId === file.id ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : 'text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)]'}">
 				<button class="flex items-center gap-2 flex-1 min-w-0 text-left" onclick={() => onSelect(file)}>
 					<Icon icon={iconFor(file.path)} class="text-base flex-shrink-0" />
 					<span class="truncate">{file.path}</span>
@@ -85,14 +85,14 @@
 				{#if !readOnly}
 					<div class="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
 						{#if file.kind === 'text' && file.path.toLowerCase().endsWith('.typ') && file.path !== entrypoint}
-							<button onclick={() => onSetEntry(file)} title="Set as entrypoint" class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-white/10 text-gray-500">
+							<button onclick={() => onSetEntry(file)} title="Set as entrypoint" class="p-0.5 rounded hover:bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]">
 								<Icon icon="mdi:star-outline" class="text-sm" />
 							</button>
 						{/if}
-						<button onclick={() => handleRename(file)} title="Rename" class="p-0.5 rounded hover:bg-gray-200 dark:hover:bg-white/10 text-gray-500">
+						<button onclick={() => handleRename(file)} title="Rename" class="p-0.5 rounded hover:bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]">
 							<Icon icon="mdi:pencil-outline" class="text-sm" />
 						</button>
-						<button onclick={() => onDelete(file)} title="Delete" class="p-0.5 rounded hover:bg-red-100 dark:hover:bg-red-900/30 text-gray-500 hover:text-red-600">
+						<button onclick={() => onDelete(file)} title="Delete" class="p-0.5 rounded hover:bg-[var(--color-danger)]/10 text-[var(--color-ink-muted)] hover:text-[var(--color-danger)]">
 							<Icon icon="mdi:trash-can-outline" class="text-sm" />
 						</button>
 					</div>
diff --git a/src/lib/components/project/ProjectToolbar.svelte b/src/lib/components/project/ProjectToolbar.svelte
index 3e8dfe1..6295d91 100644
--- a/src/lib/components/project/ProjectToolbar.svelte
+++ b/src/lib/components/project/ProjectToolbar.svelte
@@ -13,6 +13,9 @@
 	import ThemePicker from '../ThemePicker.svelte';
 	import PageSettingsModal from '../PageSettingsModal.svelte';
 	import PresentationMode from '../PresentationMode.svelte';
+	import Modal from '../Modal.svelte';
+	import PromptModal from '../PromptModal.svelte';
+	import ConfirmModal from '../ConfirmModal.svelte';
 
 	let {
 		projectName = 'Project',
@@ -257,13 +260,12 @@
 		return name.substring(0, 2).toUpperCase();
 	}
 
-	function submitRename(e: Event) {
-		e.preventDefault();
-		if (renameName && renameName !== projectName) {
+	function submitRename(name: string) {
+		if (name && name !== projectName) {
 			fetch(`/api/projects/${projectId}`, {
 				method: 'PATCH',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ name: renameName })
+				body: JSON.stringify({ name })
 			}).then((res) => { if (res.ok) window.location.reload(); });
 		}
 		showRenameModal = false;
@@ -289,17 +291,17 @@
 <header class="flex flex-col border-b border-[var(--theme-border)] bg-[var(--theme-bg)] text-[var(--theme-text)] select-none w-full relative z-[70]">
 	<div class="flex items-center justify-between px-4 py-2.5">
 		<div class="flex items-center gap-3">
-			<button onclick={() => goto('/projects')} class="p-1.5 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-white/10 transition-colors" title="Projects">
+			<button onclick={() => goto('/projects')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] rounded-md hover:bg-[var(--color-surface-sunken)] transition-colors" title="Projects">
 				<Icon icon="mdi:arrow-left" class="text-xl" />
 			</button>
 
 			<div class="flex flex-col gap-0.5">
 				<div class="flex items-center gap-2">
 					<Icon icon="mdi:folder-multiple-outline" class="text-blue-500 text-base" />
-					<h1 class="text-[16px] font-semibold text-gray-900 dark:text-white tracking-tight truncate max-w-[200px] md:max-w-xs" title={projectName}>{projectName}</h1>
+					<h1 class="text-[16px] font-semibold text-[var(--color-ink)] tracking-tight truncate max-w-[200px] md:max-w-xs" title={projectName}>{projectName}</h1>
 				</div>
 
-				<div class="flex items-center gap-0.5 text-[13px] font-medium text-gray-600 dark:text-gray-300 -ml-1 action-menu-container">
+				<div class="flex items-center gap-0.5 text-[13px] font-medium text-[var(--color-ink-muted)] -ml-1 action-menu-container">
 					<div class="relative">
 						<button onclick={(e) => { e.stopPropagation(); activeMenu = activeMenu === 'file' ? null : 'file'; }} class="px-2 py-0.5 rounded transition-colors {activeMenu === 'file' ? 'bg-[var(--theme-border)]' : 'hover:bg-[var(--theme-border)]'}">File</button>
 						{#if activeMenu === 'file'}
@@ -329,7 +331,7 @@
 								<button onclick={() => { activeMenu = null; handlePandocExport('html'); }} class="w-full text-left px-4 py-1 text-sm hover:bg-[var(--theme-border)]">HTML (.html)</button>
 								{#if role === 'owner'}
 									<div class="h-px bg-[var(--theme-border)] my-1"></div>
-									<button onclick={() => { activeMenu = null; showDeleteModal = true; }} class="w-full text-left px-4 py-1.5 text-sm text-red-500 hover:bg-red-500/10">Delete Project</button>
+									<button onclick={() => { activeMenu = null; showDeleteModal = true; }} class="w-full text-left px-4 py-1.5 text-sm text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10">Delete Project</button>
 								{/if}
 							</div>
 						{/if}
@@ -352,7 +354,7 @@
 						{#if activeMenu === 'view'}
 							<div class="absolute left-0 top-full mt-1 w-48 bg-[var(--theme-bg)] rounded-xl shadow-xl border border-[var(--theme-border)] py-1 z-[100]">
 								<button onclick={() => { activeMenu = null; $previewOpenStore = !$previewOpenStore; }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)] flex items-center justify-between">Preview<Icon icon={$previewOpenStore ? 'mdi:check' : ''} class="text-sm" /></button>
-								<button onclick={() => { activeMenu = null; $darkModeStore = !$darkModeStore; document.documentElement.classList.toggle('dark', $darkModeStore); }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)] flex items-center justify-between">Dark Mode<Icon icon={$darkModeStore ? 'mdi:check' : ''} class="text-sm" /></button>
+								<button onclick={() => { activeMenu = null; $darkModeStore = !$darkModeStore; }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)] flex items-center justify-between">Dark Mode<Icon icon={$darkModeStore ? 'mdi:check' : ''} class="text-sm" /></button>
 							</div>
 						{/if}
 					</div>
@@ -364,36 +366,36 @@
 			{#if $connectedUsers.length > 0}
 				<div class="flex items-center -space-x-2 mr-2">
 					{#each $connectedUsers as user}
-						<div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white border-2 border-white dark:border-zinc-950 shadow-sm" style="background-color: {user.color}; z-index: {user.isLocal ? 10 : 1};" title={user.name + (user.isLocal ? ' (You)' : '')}>{getInitials(user.name)}</div>
+						<div class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold text-white border-2 border-[var(--color-surface)] shadow-sm" style="background-color: {user.color}; z-index: {user.isLocal ? 10 : 1};" title={user.name + (user.isLocal ? ' (You)' : '')}>{getInitials(user.name)}</div>
 					{/each}
 				</div>
 			{/if}
 
-			<div class="w-px h-5 bg-gray-300 dark:bg-white/10"></div>
+			<div class="w-px h-5 bg-[var(--color-line)]"></div>
 
 			{#if !isViewer}
-				<button onclick={() => (isPresentationOpen = true)} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10 rounded-md transition-colors">
+				<button onclick={() => (isPresentationOpen = true)} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-[var(--color-ink-muted)] bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] rounded-md transition-colors">
 					<Icon icon="mdi:presentation-play" class="text-[16px]" /> Present
 				</button>
 				{#if role === 'owner'}
-					<button onclick={onPublish} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 rounded-md transition-colors">
+					<button onclick={onPublish} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-white bg-[var(--color-accent)] hover:opacity-90 rounded-md transition-colors">
 						<Icon icon="mdi:package-variant-closed" class="text-[16px]" /> Publish
 					</button>
 				{/if}
 			{/if}
 
-			<div class="w-px h-5 bg-gray-300 dark:bg-white/10"></div>
+			<div class="w-px h-5 bg-[var(--color-line)]"></div>
 
-			<button onclick={() => ($previewOpenStore = !$previewOpenStore)} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium transition-colors rounded-md {$previewOpenStore ? 'text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10' : 'text-blue-600 bg-blue-50 hover:bg-blue-100 dark:text-blue-400 dark:bg-blue-900/20'}" title={$previewOpenStore ? 'Hide preview' : 'Show preview'}>
+			<button onclick={() => ($previewOpenStore = !$previewOpenStore)} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium transition-colors rounded-md {$previewOpenStore ? 'text-[var(--color-ink-muted)] bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)]' : 'text-[var(--color-accent)] bg-[var(--color-accent-soft)] hover:opacity-90'}" title={$previewOpenStore ? 'Hide preview' : 'Show preview'}>
 				<Icon icon={$previewOpenStore ? 'mdi:eye-off-outline' : 'mdi:eye-outline'} class="text-[16px]" /> Preview
 			</button>
 
-			<button onclick={handlePrint} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 dark:text-gray-200 dark:bg-black/20 dark:hover:bg-white/10 rounded-md transition-colors" title="Print">
+			<button onclick={handlePrint} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-[var(--color-ink-muted)] bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] rounded-md transition-colors" title="Print">
 				<Icon icon="mdi:printer" class="text-[16px]" /> Print
 			</button>
 
 			<div class="relative action-menu-container">
-				<button onclick={(e) => { e.stopPropagation(); activeMenu = activeMenu === 'export' ? null : 'export'; }} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 dark:text-blue-400 dark:bg-blue-900/20 rounded-md transition-colors {activeMenu === 'export' ? 'ring-2 ring-blue-500/30' : ''}">
+				<button onclick={(e) => { e.stopPropagation(); activeMenu = activeMenu === 'export' ? null : 'export'; }} class="flex items-center gap-1.5 px-3.5 py-1.5 text-sm font-medium text-[var(--color-accent)] bg-[var(--color-accent-soft)] hover:opacity-90 rounded-md transition-colors {activeMenu === 'export' ? 'ring-2 ring-[var(--color-accent)]/30' : ''}">
 					<Icon icon="mdi:export-variant" class="text-[16px]" /> Export <Icon icon="mdi:chevron-down" class="text-sm opacity-70" />
 				</button>
 				{#if activeMenu === 'export'}
@@ -408,23 +410,23 @@
 		</div>
 	</div>
 
-	<div class="flex items-center px-4 py-1.5 bg-white/50 dark:bg-black/10 border-t border-gray-200/60 dark:border-white/10 gap-4 overflow-x-auto no-scrollbar">
+	<div class="flex items-center px-4 py-1.5 bg-[var(--color-surface-muted)] border-t border-[var(--color-line)] gap-4 overflow-x-auto no-scrollbar">
 		<div class="flex items-center gap-1">
-			<button onclick={() => applyFormat('*', '*', 'bold')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Bold"><Icon icon="mdi:format-bold" class="text-lg" /></button>
-			<button onclick={() => applyFormat('_', '_', 'italic')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Italic"><Icon icon="mdi:format-italic" class="text-lg" /></button>
-			<button onclick={() => applyFormat('`', '`', 'code')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Code"><Icon icon="mdi:code-tags" class="text-lg" /></button>
-			<div class="w-px h-4 mx-1 bg-gray-300 dark:bg-white/10"></div>
-			<button onclick={() => applyFormat('$ ', ' $', 'x = y')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Math (Inline)"><Icon icon="mdi:sigma" class="text-lg" /></button>
-			<button onclick={() => applyFormat('- ', '', 'List item')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Bullet List"><Icon icon="mdi:format-list-bulleted" class="text-lg" /></button>
-			<button onclick={() => applyFormat('+ ', '', 'Numbered item')} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Numbered List"><Icon icon="mdi:format-list-numbered" class="text-lg" /></button>
-			<div class="w-px h-4 mx-1 bg-gray-300 dark:bg-white/10"></div>
+			<button onclick={() => applyFormat('*', '*', 'bold')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Bold"><Icon icon="mdi:format-bold" class="text-lg" /></button>
+			<button onclick={() => applyFormat('_', '_', 'italic')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Italic"><Icon icon="mdi:format-italic" class="text-lg" /></button>
+			<button onclick={() => applyFormat('`', '`', 'code')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Code"><Icon icon="mdi:code-tags" class="text-lg" /></button>
+			<div class="w-px h-4 mx-1 bg-[var(--color-line)]"></div>
+			<button onclick={() => applyFormat('$ ', ' $', 'x = y')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Math (Inline)"><Icon icon="mdi:sigma" class="text-lg" /></button>
+			<button onclick={() => applyFormat('- ', '', 'List item')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Bullet List"><Icon icon="mdi:format-list-bulleted" class="text-lg" /></button>
+			<button onclick={() => applyFormat('+ ', '', 'Numbered item')} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Numbered List"><Icon icon="mdi:format-list-numbered" class="text-lg" /></button>
+			<div class="w-px h-4 mx-1 bg-[var(--color-line)]"></div>
 			<input type="file" bind:this={fileInput} onchange={handleUpload} class="hidden" accept="image/*,.ttf,.otf" />
 			{#if !isViewer}
-				<button onclick={() => fileInput?.click()} class="p-1.5 text-gray-600 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/10 rounded transition-colors" title="Upload Image / Font"><Icon icon="mdi:image-plus" class="text-lg" /></button>
+				<button onclick={() => fileInput?.click()} class="p-1.5 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] rounded transition-colors" title="Upload Image / Font"><Icon icon="mdi:image-plus" class="text-lg" /></button>
 			{/if}
 		</div>
 
-		<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
+		<div class="w-px h-4 bg-[var(--color-line)]"></div>
 
 		<div class="flex items-center gap-2">
 			<label for="project-font-select" class="text-[11px] font-semibold uppercase tracking-wider opacity-60">Font</label>
@@ -443,22 +445,22 @@
 			</select>
 		</div>
 
-		<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
+		<div class="w-px h-4 bg-[var(--color-line)]"></div>
 
 		{#if !isViewer}
 			<button onclick={() => (isPageSettingsOpen = true)} class="flex items-center gap-1.5 px-3 py-1 text-[11px] font-semibold bg-[var(--theme-bg)] text-[var(--theme-text)] border border-[var(--theme-border)] rounded shadow-sm transition-colors opacity-90 hover:opacity-100">
 				<Icon icon="mdi:file-document-edit-outline" class="text-sm" /> Page Settings
 			</button>
-			<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
+			<div class="w-px h-4 bg-[var(--color-line)]"></div>
 		{/if}
 
-		<div class="flex items-center gap-1 bg-white dark:bg-black/20 border border-gray-300 dark:border-white/20 rounded shadow-sm overflow-hidden">
-			<button onclick={() => $documentZoomStore = Math.max(10, $documentZoomStore - 10)} class="px-2 py-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-white/10 transition-colors" title="Zoom Out"><Icon icon="mdi:minus" class="text-sm" /></button>
-			<span role="button" tabindex="0" onkeydown={(e) => { if (e.key === 'Enter') $documentZoomStore = 100; }} class="text-[11px] font-semibold text-gray-700 dark:text-gray-200 min-w-[3rem] text-center select-none" ondblclick={() => $documentZoomStore = 100}>{$documentZoomStore}%</span>
-			<button onclick={() => $documentZoomStore = Math.min(500, $documentZoomStore + 10)} class="px-2 py-1 text-gray-600 hover:text-gray-900 hover:bg-gray-100 dark:text-gray-300 dark:hover:text-white dark:hover:bg-white/10 transition-colors" title="Zoom In"><Icon icon="mdi:plus" class="text-sm" /></button>
+		<div class="flex items-center gap-1 bg-[var(--color-surface)] border border-[var(--color-line)] rounded shadow-sm overflow-hidden">
+			<button onclick={() => $documentZoomStore = Math.max(10, $documentZoomStore - 10)} class="px-2 py-1 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] transition-colors" title="Zoom Out"><Icon icon="mdi:minus" class="text-sm" /></button>
+			<span role="button" tabindex="0" onkeydown={(e) => { if (e.key === 'Enter') $documentZoomStore = 100; }} class="text-[11px] font-semibold text-[var(--color-ink-muted)] min-w-[3rem] text-center select-none" ondblclick={() => $documentZoomStore = 100}>{$documentZoomStore}%</span>
+			<button onclick={() => $documentZoomStore = Math.min(500, $documentZoomStore + 10)} class="px-2 py-1 text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] hover:bg-[var(--color-surface-sunken)] transition-colors" title="Zoom In"><Icon icon="mdi:plus" class="text-sm" /></button>
 		</div>
 
-		<div class="w-px h-4 bg-gray-300 dark:bg-white/10"></div>
+		<div class="w-px h-4 bg-[var(--color-line)]"></div>
 
 		<ThemePicker />
 		<div class="flex-grow"></div>
@@ -474,50 +476,37 @@
 {/if}
 
 {#if showInfoModal}
-	<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4" onclick={() => showInfoModal = false} role="presentation">
-		<div class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-2xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-sm overflow-hidden" onclick={(e) => e.stopPropagation()} role="presentation">
-			<div class="p-6 border-b border-gray-100 dark:border-white/10 flex items-center gap-3">
-				<Icon icon="mdi:folder-multiple-outline" class="text-xl text-blue-500" />
-				<h3 class="text-lg font-semibold flex-grow truncate">{projectName}</h3>
-			</div>
-			<div class="p-6 space-y-4 text-sm">
-				<div><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Type</p><p>Project (multi-file)</p></div>
-				<div><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Entrypoint</p><p class="font-mono">{entrypoint}</p></div>
-				<div><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Your role</p><p class="capitalize">{role}</p></div>
-			</div>
-			<div class="p-4 bg-gray-50 dark:bg-white/5 border-t border-gray-100 dark:border-white/10 flex justify-end">
-				<button onclick={() => showInfoModal = false} class="px-5 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg">Close</button>
-			</div>
+	<Modal title={projectName} icon="ph:folder-star" onclose={() => showInfoModal = false}>
+		<div class="flex flex-col gap-4 text-xs">
+			<div><p class="mb-1 font-medium text-[var(--color-ink-muted)]">Type</p><p class="text-sm text-[var(--color-ink)]">Project (multi-file)</p></div>
+			<div><p class="mb-1 font-medium text-[var(--color-ink-muted)]">Entrypoint</p><p class="font-mono text-sm text-[var(--color-ink)]">{entrypoint}</p></div>
+			<div><p class="mb-1 font-medium text-[var(--color-ink-muted)]">Your role</p><p class="text-sm text-[var(--color-ink)] capitalize">{role}</p></div>
 		</div>
-	</div>
+
+		{#snippet footer()}
+			<button onclick={() => showInfoModal = false} class="rounded-md bg-[var(--color-accent)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90">Close</button>
+		{/snippet}
+	</Modal>
 {/if}
 
 {#if showRenameModal}
-	<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4" onclick={() => showRenameModal = false} role="presentation">
-		<div class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-2xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-sm overflow-hidden" onclick={(e) => e.stopPropagation()} role="presentation">
-			<form onsubmit={submitRename} class="p-6">
-				<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"><Icon icon="mdi:pencil-outline" class="text-yellow-500" /> Rename Project</h3>
-				<input type="text" required bind:value={renameName} class="w-full bg-transparent border border-gray-300 dark:border-white/20 text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500" />
-				<div class="pt-6 flex justify-end gap-3">
-					<button type="button" onclick={() => showRenameModal = false} class="px-4 py-2 text-sm font-medium hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg">Cancel</button>
-					<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg text-sm font-medium">Save</button>
-				</div>
-			</form>
-		</div>
-	</div>
+	<PromptModal
+		title="Rename project"
+		label="Project name"
+		icon="ph:pencil-simple"
+		value={renameName}
+		confirmLabel="Save"
+		onsubmit={submitRename}
+		onclose={() => showRenameModal = false}
+	/>
 {/if}
 
 {#if showDeleteModal}
-	<div class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100] flex items-center justify-center p-4" onclick={() => showDeleteModal = false} role="presentation">
-		<div class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-2xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-sm overflow-hidden" onclick={(e) => e.stopPropagation()} role="presentation">
-			<div class="p-6">
-				<h3 class="text-lg font-semibold mb-4 flex items-center gap-2"><Icon icon="mdi:trash-can-outline" class="text-red-500" /> Delete Project</h3>
-				<p class="text-gray-600 dark:text-gray-300 text-sm mb-6">Delete this project and all its files? This cannot be undone.</p>
-				<div class="flex justify-end gap-3">
-					<button type="button" onclick={() => showDeleteModal = false} class="px-4 py-2 text-sm font-medium hover:bg-gray-100 dark:hover:bg-white/10 rounded-lg">Cancel</button>
-					<button type="button" onclick={confirmDelete} class="bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-lg text-sm font-medium">Delete</button>
-				</div>
-			</div>
-		</div>
-	</div>
+	<ConfirmModal
+		title="Delete project"
+		message="Delete this project and all its files? This cannot be undone."
+		confirmLabel="Delete"
+		onconfirm={confirmDelete}
+		onclose={() => showDeleteModal = false}
+	/>
 {/if}
diff --git a/src/lib/ts/store.ts b/src/lib/ts/store.ts
index ce8ad1f..ce45e91 100644
--- a/src/lib/ts/store.ts
+++ b/src/lib/ts/store.ts
@@ -29,19 +29,19 @@ if (typeof window !== 'undefined') {
     const savedTheme = localStorage.getItem('editor-theme');
     const savedDark = localStorage.getItem('editor-dark-mode');
     const savedZoom = localStorage.getItem('editor-document-zoom');
-    
+
     if (savedTheme) themeStore.set(savedTheme);
     if (savedDark !== null) darkModeStore.set(savedDark === 'true');
     if (savedZoom !== null) documentZoomStore.set(parseInt(savedZoom, 10));
-    
-    themeStore.subscribe(value => localStorage.setItem('editor-theme', value));
+
+    themeStore.subscribe(value => {
+        localStorage.setItem('editor-theme', value);
+        document.documentElement.dataset.colorTheme = value;
+    });
     darkModeStore.subscribe(value => {
         localStorage.setItem('editor-dark-mode', value.toString());
-        if (value) {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark');
-        }
+        document.documentElement.dataset.theme = value ? 'dark' : 'light';
+        document.documentElement.classList.toggle('dark', value);
     });
     documentZoomStore.subscribe(value => localStorage.setItem('editor-document-zoom', value.toString()));
 }
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 276e06d..ccbe380 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -4,29 +4,29 @@
 </script>
 
 <div class="min-h-[80vh] flex flex-col items-center justify-center p-4">
-	<div class="text-center max-w-md bg-white dark:bg-zinc-900 rounded-2xl shadow-xl border border-gray-200 dark:border-zinc-800 p-8">
-		<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-red-100 dark:bg-red-500/10 mb-6">
-			<Icon icon="mdi:alert-circle-outline" class="h-10 w-10 text-red-600 dark:text-red-500" />
+	<div class="text-center max-w-md bg-[var(--color-surface)] rounded-2xl shadow-xl border border-[var(--color-line)] p-8">
+		<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-[var(--color-danger)]/10 mb-6">
+			<Icon icon="mdi:alert-circle-outline" class="h-10 w-10 text-[var(--color-danger)]" />
 		</div>
-		
-		<h1 class="text-6xl font-bold text-gray-900 dark:text-white mb-2 tracking-tight">
+
+		<h1 class="text-6xl font-bold text-[var(--color-ink)] mb-2 tracking-tight">
 			{$page.status}
 		</h1>
-		
-		<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
+
+		<h2 class="text-xl font-semibold text-[var(--color-ink)] mb-4">
 			Something went wrong
 		</h2>
-		
-		<p class="text-base text-gray-600 dark:text-gray-400 mb-8 leading-relaxed">
+
+		<p class="text-base text-[var(--color-ink-muted)] mb-8 leading-relaxed">
 			{$page.error?.message || 'We experienced an unexpected error processing your request.'}
 		</p>
-		
-		<a 
-			href="/" 
-			class="inline-flex items-center justify-center gap-2 px-6 py-3 border border-transparent text-sm font-semibold rounded-xl shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 transition-colors w-full"
+
+		<a
+			href="/"
+			class="inline-flex items-center justify-center gap-2 px-6 py-3 text-sm font-semibold rounded-xl shadow-sm text-white bg-[var(--color-accent)] hover:opacity-90 focus:outline-none transition w-full"
 		>
 			<Icon icon="mdi:home" class="text-lg" />
 			Return to Dashboard
 		</a>
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 51591d5..d7eca7e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -40,21 +40,11 @@
 </svelte:head>
 
 {#if loaded}
-	<div 
-		class="min-h-screen w-full flex flex-col font-sans transition-colors duration-200"
-		style="
-			background-color: {currentColors.background}; 
-			color: {currentColors.text}; 
-			--theme-bg: {currentColors.background};
-			--theme-text: {currentColors.text};
-			--theme-border: {currentColors.selection};
-			--theme-cursor: {currentColors.cursor};
-		"
-	>
+	<div class="min-h-screen w-full flex flex-col bg-[var(--color-surface-muted)] text-[var(--color-ink)] font-sans transition-colors duration-200">
 		{@render children()}
 	</div>
 {:else}
-	<div class="min-h-screen w-full flex items-center justify-center bg-gray-50 dark:bg-zinc-950">
-		<div class="text-gray-500 dark:text-gray-400 font-medium animate-pulse">Loading TypstDrive...</div>
+	<div class="min-h-screen w-full flex items-center justify-center bg-[var(--color-surface-muted)]">
+		<div class="text-[var(--color-ink-muted)] font-medium animate-pulse">Loading TypstDrive...</div>
 	</div>
 {/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ac9e819..acc87fe 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,6 +17,6 @@
 	<meta name="description" content="Collaborative Typst Editor." />
 </svelte:head>
 
-<div class="h-full flex items-center justify-center text-gray-500">
+<div class="h-full flex items-center justify-center text-[var(--color-ink-muted)]">
     Redirecting...
 </div>
diff --git a/src/routes/api-docs/+page.svelte b/src/routes/api-docs/+page.svelte
index 3383e52..96b8637 100644
--- a/src/routes/api-docs/+page.svelte
+++ b/src/routes/api-docs/+page.svelte
@@ -170,12 +170,12 @@ with open("output.png", "wb") as f:
 </style>
 
 <div class="min-h-screen flex flex-col">
-    <nav class="bg-[var(--theme-bg)] shadow-sm border-b border-gray-200 dark:border-white/10 px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200 flex-shrink-0">
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
-            <Icon icon="mdi:api" class="text-blue-600 dark:text-blue-400 text-3xl" />
+    <nav class="bg-[var(--color-surface)] shadow-sm border-b border-[var(--color-line)] px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200 flex-shrink-0">
+        <h1 class="text-2xl font-bold text-[var(--color-ink)] flex items-center gap-3">
+            <Icon icon="mdi:api" class="text-[var(--color-accent)] text-3xl" />
             API Reference
         </h1>
-        <button onclick={() => goto('/dashboard')} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-4 py-2 rounded-lg flex items-center gap-2">
+        <button onclick={() => goto('/dashboard')} class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-4 py-2 rounded-md flex items-center gap-2">
             <Icon icon="mdi:arrow-left" class="text-lg" />
             Back to Dashboard
         </button>
@@ -187,16 +187,16 @@ with open("output.png", "wb") as f:
                 {#each navSections as section}
                     <button
                         onclick={() => activeSection = section.id}
-                        class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-150 {activeSection === section.id
-                            ? 'bg-blue-600 text-white shadow-sm'
-                            : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5'}"
+                        class="w-full flex items-center gap-3 px-4 py-2.5 rounded-md text-sm font-medium transition-colors {activeSection === section.id
+                            ? 'bg-[var(--color-accent)] text-white shadow-sm'
+                            : 'text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)]'}"
                     >
                         <Icon icon={section.icon} class="text-lg flex-shrink-0" />
                         {section.label}
                     </button>
                 {/each}
-                <div class="pt-4 mt-4 border-t border-gray-200 dark:border-white/10">
-                    <a href="/settings" class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 transition-all duration-150">
+                <div class="pt-4 mt-4 border-t border-[var(--color-line)]">
+                    <a href="/settings" class="w-full flex items-center gap-3 px-4 py-2.5 rounded-md text-sm font-medium text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)] transition-colors">
                         <Icon icon="mdi:key-plus" class="text-lg flex-shrink-0" />
                         Manage API Keys
                     </a>
@@ -210,7 +210,7 @@ with open("output.png", "wb") as f:
                 {#each navSections as section}
                     <button
                         onclick={() => activeSection = section.id}
-                        class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors {activeSection === section.id ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300'}"
+                        class="px-3 py-1.5 rounded-md text-xs font-medium transition-colors {activeSection === section.id ? 'bg-[var(--color-accent)] text-white' : 'bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]'}"
                     >
                         {section.label}
                     </button>
@@ -218,51 +218,51 @@ with open("output.png", "wb") as f:
             </div>
 
             {#if activeSection === 'overview'}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
-                    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                        <Icon icon="mdi:book-open-outline" class="text-2xl text-blue-500" />
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8">
+                    <h2 class="text-xl font-bold text-[var(--color-ink)] mb-4 flex items-center gap-2">
+                        <Icon icon="mdi:book-open-outline" class="text-2xl text-[var(--color-accent)]" />
                         Overview
                     </h2>
-                    <p class="text-gray-600 dark:text-gray-300 mb-6">
+                    <p class="text-[var(--color-ink-muted)] mb-6">
                         The TypstDrive Render API lets you compile Typst markup into PNG images or PDF documents programmatically.
                         Authenticate with an API key and POST Typst code — get back binary output.
                     </p>
                     <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
                         <div class="p-4 rounded-xl bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-800/30">
-                            <Icon icon="mdi:image-outline" class="text-2xl text-blue-500 mb-2" />
-                            <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">PNG output</p>
-                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">First page rendered at 2× scale</p>
+                            <Icon icon="mdi:image-outline" class="text-2xl text-[var(--color-accent)] mb-2" />
+                            <p class="text-sm font-semibold text-[var(--color-ink)]">PNG output</p>
+                            <p class="text-xs text-[var(--color-ink-muted)] mt-1">First page rendered at 2× scale</p>
                         </div>
                         <div class="p-4 rounded-xl bg-purple-50 dark:bg-purple-900/10 border border-purple-100 dark:border-purple-800/30">
                             <Icon icon="mdi:file-pdf-box" class="text-2xl text-purple-500 mb-2" />
-                            <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">PDF output</p>
-                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Full multi-page PDF document</p>
+                            <p class="text-sm font-semibold text-[var(--color-ink)]">PDF output</p>
+                            <p class="text-xs text-[var(--color-ink-muted)] mt-1">Full multi-page PDF document</p>
                         </div>
-                        <div class="p-4 rounded-xl bg-green-50 dark:bg-green-900/10 border border-green-100 dark:border-green-800/30">
+                        <div class="p-4 rounded-xl bg-[var(--color-success)]/10 border border-[var(--color-success)]/20">
                             <Icon icon="mdi:lightning-bolt" class="text-2xl text-green-500 mb-2" />
-                            <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">Cached results</p>
-                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Identical inputs skip recompilation</p>
+                            <p class="text-sm font-semibold text-[var(--color-ink)]">Cached results</p>
+                            <p class="text-xs text-[var(--color-ink-muted)] mt-1">Identical inputs skip recompilation</p>
                         </div>
                     </div>
-                    <div class="bg-gray-50 dark:bg-black/30 rounded-xl p-4 border border-gray-200 dark:border-white/10">
-                        <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">Base URL</p>
-                        <code class="font-mono text-sm text-blue-600 dark:text-blue-400">{baseUrl}</code>
+                    <div class="bg-[var(--color-surface-muted)] rounded-xl p-4 border border-[var(--color-line)]">
+                        <p class="text-xs font-semibold uppercase tracking-wide text-[var(--color-ink-muted)] mb-1">Base URL</p>
+                        <code class="font-mono text-sm text-[var(--color-accent)]">{baseUrl}</code>
                     </div>
                 </div>
             {/if}
 
             {#if activeSection === 'auth'}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
-                    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
-                        <Icon icon="mdi:key-outline" class="text-2xl text-blue-500" />
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8">
+                    <h2 class="text-xl font-bold text-[var(--color-ink)] mb-4 flex items-center gap-2">
+                        <Icon icon="mdi:key-outline" class="text-2xl text-[var(--color-accent)]" />
                         Authentication
                     </h2>
-                    <p class="text-gray-600 dark:text-gray-300 mb-6">
-                        All requests must include an API key in the <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">Authorization</code> header.
+                    <p class="text-[var(--color-ink-muted)] mb-6">
+                        All requests must include an API key in the <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">Authorization</code> header.
                     </p>
                     <div class="space-y-4">
                         <div>
-                            <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Header format</p>
+                            <p class="text-sm font-semibold text-[var(--color-ink-muted)] mb-2">Header format</p>
                             <pre class="rounded-xl border border-gray-700 overflow-x-auto"><code class="hljs block px-4 py-3 text-xs font-mono leading-relaxed rounded-xl">{@html hljs.highlight('Authorization: Bearer td_your_api_key_here', { language: 'bash' }).value}</code></pre>
                         </div>
                         <div class="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-700/30 flex gap-3">
@@ -273,10 +273,10 @@ with open("output.png", "wb") as f:
                             </div>
                         </div>
                         <div>
-                            <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Managing keys</p>
-                            <p class="text-sm text-gray-500 dark:text-gray-400">
+                            <p class="text-sm font-semibold text-[var(--color-ink-muted)] mb-1">Managing keys</p>
+                            <p class="text-sm text-[var(--color-ink-muted)]">
                                 Create, regenerate, and revoke keys in
-                                <a href="/settings" class="text-blue-600 dark:text-blue-400 hover:underline">Settings → API Keys</a>.
+                                <a href="/settings" class="text-[var(--color-accent)] hover:underline">Settings → API Keys</a>.
                                 The full key is shown only once at creation time.
                             </p>
                         </div>
@@ -285,43 +285,43 @@ with open("output.png", "wb") as f:
             {/if}
 
             {#if activeSection === 'endpoint'}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8 space-y-6">
-                    <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
-                        <Icon icon="mdi:api" class="text-2xl text-blue-500" />
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8 space-y-6">
+                    <h2 class="text-xl font-bold text-[var(--color-ink)] flex items-center gap-2">
+                        <Icon icon="mdi:api" class="text-2xl text-[var(--color-accent)]" />
                         POST /v1/render
                     </h2>
 
                     <div>
                         <div class="flex items-center gap-2 mb-3">
-                            <span class="px-2 py-0.5 text-xs font-bold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-md">POST</span>
-                            <code class="font-mono text-sm text-gray-800 dark:text-gray-200">/v1/render</code>
+                            <span class="px-2 py-0.5 text-xs font-bold bg-green-100 dark:bg-green-900/30 text-[var(--color-success)] rounded-md">POST</span>
+                            <code class="font-mono text-sm text-[var(--color-ink)]">/v1/render</code>
                         </div>
-                        <p class="text-sm text-gray-600 dark:text-gray-400">
+                        <p class="text-sm text-[var(--color-ink-muted)]">
                             Compile Typst markup and return rendered output as PNG, PDF, or HTML.
                             Results are cached for 1 hour — identical inputs return the cached result without recompiling.
                         </p>
                     </div>
 
-                    <div class="h-px bg-gray-200 dark:bg-white/10"></div>
+                    <div class="h-px bg-[var(--color-line)]"></div>
 
                     <div>
-                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Request headers</p>
+                        <p class="text-sm font-bold text-[var(--color-ink)] mb-3">Request headers</p>
                         <div class="overflow-x-auto">
                             <table class="w-full text-sm">
                                 <thead>
-                                    <tr class="border-b border-gray-200 dark:border-white/10">
-                                        <th class="text-left py-2 pr-4 font-semibold text-gray-700 dark:text-gray-300 w-40">Header</th>
-                                        <th class="text-left py-2 font-semibold text-gray-700 dark:text-gray-300">Value</th>
+                                    <tr class="border-b border-[var(--color-line)]">
+                                        <th class="text-left py-2 pr-4 font-semibold text-[var(--color-ink-muted)] w-40">Header</th>
+                                        <th class="text-left py-2 font-semibold text-[var(--color-ink-muted)]">Value</th>
                                     </tr>
                                 </thead>
-                                <tbody class="text-gray-600 dark:text-gray-400">
-                                    <tr class="border-b border-gray-100 dark:border-white/5">
+                                <tbody class="text-[var(--color-ink-muted)]">
+                                    <tr class="border-b border-[var(--color-line)]">
                                         <td class="py-2 pr-4 font-mono text-xs">Authorization</td>
-                                        <td class="py-2"><code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">Bearer &lt;api-key&gt;</code> — required</td>
+                                        <td class="py-2"><code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">Bearer &lt;api-key&gt;</code> — required</td>
                                     </tr>
                                     <tr>
                                         <td class="py-2 pr-4 font-mono text-xs">Content-Type</td>
-                                        <td class="py-2"><code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">application/json</code> — required</td>
+                                        <td class="py-2"><code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">application/json</code> — required</td>
                                     </tr>
                                 </tbody>
                             </table>
@@ -329,23 +329,23 @@ with open("output.png", "wb") as f:
                     </div>
 
                     <div>
-                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Request body</p>
+                        <p class="text-sm font-bold text-[var(--color-ink)] mb-3">Request body</p>
                         <pre class="rounded-xl border border-gray-700 overflow-x-auto"><code class="hljs block px-4 py-4 text-xs font-mono leading-relaxed rounded-xl">{@html hSchema}</code></pre>
                     </div>
 
                     <div>
-                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Response</p>
-                        <div class="p-3 rounded-lg bg-green-50 dark:bg-green-900/10 border border-green-100 dark:border-green-800/30 text-sm">
-                            <span class="font-mono text-xs font-bold text-green-700 dark:text-green-400">200 OK</span>
-                            <span class="text-gray-600 dark:text-gray-400 ml-2">Response body with <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">Content-Type: image/png</code>, <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">application/pdf</code>, or <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">text/html</code></span>
+                        <p class="text-sm font-bold text-[var(--color-ink)] mb-3">Response</p>
+                        <div class="p-3 rounded-lg bg-[var(--color-success)]/10 border border-[var(--color-success)]/20 text-sm">
+                            <span class="font-mono text-xs font-bold text-[var(--color-success)]">200 OK</span>
+                            <span class="text-[var(--color-ink-muted)] ml-2">Response body with <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-2 rounded">Content-Type: image/png</code>, <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-2 rounded">application/pdf</code>, or <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-2 rounded">text/html</code></span>
                         </div>
                     </div>
 
                     <div>
-                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Compilation errors</p>
-                        <div class="p-3 mb-3 rounded-lg bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-800/30 text-sm">
-                            <span class="font-mono text-xs font-bold text-red-700 dark:text-red-400">422 Unprocessable Entity</span>
-                            <span class="text-gray-600 dark:text-gray-400 ml-2">JSON body describing every Typst error. <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">error</code> is a readable summary; <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">details</code> lists each diagnostic with its message, severity, and source line and column.</span>
+                        <p class="text-sm font-bold text-[var(--color-ink)] mb-3">Compilation errors</p>
+                        <div class="p-3 mb-3 rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/20 text-sm">
+                            <span class="font-mono text-xs font-bold text-[var(--color-danger)]">422 Unprocessable Entity</span>
+                            <span class="text-[var(--color-ink-muted)] ml-2">JSON body describing every Typst error. <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-2 rounded">error</code> is a readable summary; <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-2 rounded">details</code> lists each diagnostic with its message, severity, and source line and column.</span>
                         </div>
                         <pre class="rounded-xl border border-gray-700 overflow-x-auto"><code class="hljs block px-4 py-4 text-xs font-mono leading-relaxed rounded-xl">{@html hCompileErr}</code></pre>
                     </div>
@@ -358,9 +358,9 @@ with open("output.png", "wb") as f:
             {/if}
 
             {#if activeSection === 'examples'}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8 space-y-8">
-                    <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
-                        <Icon icon="mdi:code-braces" class="text-2xl text-blue-500" />
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8 space-y-8">
+                    <h2 class="text-xl font-bold text-[var(--color-ink)] flex items-center gap-2">
+                        <Icon icon="mdi:code-braces" class="text-2xl text-[var(--color-accent)]" />
                         Examples
                     </h2>
 
@@ -374,11 +374,11 @@ with open("output.png", "wb") as f:
                     ] as ex}
                         <div>
                             <div class="flex items-center justify-between mb-2">
-                                <p class="text-sm font-bold text-gray-800 dark:text-gray-200 flex items-center gap-2">
+                                <p class="text-sm font-bold text-[var(--color-ink)] flex items-center gap-2">
                                     <Icon icon={ex.icon} class="text-lg {ex.iconColor}" />
                                     {ex.label}
                                 </p>
-                                <button onclick={() => copy(ex.id, ex.raw)} class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors px-2 py-1 rounded-md hover:bg-gray-100 dark:hover:bg-white/10">
+                                <button onclick={() => copy(ex.id, ex.raw)} class="flex items-center gap-1 text-xs text-[var(--color-ink-muted)] hover:text-[var(--color-accent)] transition-colors px-2 py-1 rounded-md hover:bg-[var(--color-surface-sunken)]">
                                     <Icon icon={copiedSnippet === ex.id ? 'mdi:check' : 'mdi:content-copy'} class="text-sm" />
                                     {copiedSnippet === ex.id ? 'Copied!' : 'Copy'}
                                 </button>
@@ -390,19 +390,19 @@ with open("output.png", "wb") as f:
             {/if}
 
             {#if activeSection === 'rate-limits'}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
-                    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
-                        <Icon icon="mdi:speedometer" class="text-2xl text-blue-500" />
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8">
+                    <h2 class="text-xl font-bold text-[var(--color-ink)] mb-6 flex items-center gap-2">
+                        <Icon icon="mdi:speedometer" class="text-2xl text-[var(--color-accent)]" />
                         Rate Limits
                     </h2>
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
-                        <div class="p-4 rounded-xl bg-gray-50 dark:bg-black/30 border border-gray-200 dark:border-white/10">
-                            <p class="text-2xl font-bold text-gray-900 dark:text-white">60</p>
-                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">requests / minute per key</p>
+                        <div class="p-4 rounded-xl bg-[var(--color-surface-muted)] border border-[var(--color-line)]">
+                            <p class="text-2xl font-bold text-[var(--color-ink)]">60</p>
+                            <p class="text-sm text-[var(--color-ink-muted)] mt-1">requests / minute per key</p>
                         </div>
-                        <div class="p-4 rounded-xl bg-gray-50 dark:bg-black/30 border border-gray-200 dark:border-white/10">
-                            <p class="text-2xl font-bold text-gray-900 dark:text-white">10</p>
-                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">API keys per account</p>
+                        <div class="p-4 rounded-xl bg-[var(--color-surface-muted)] border border-[var(--color-line)]">
+                            <p class="text-2xl font-bold text-[var(--color-ink)]">10</p>
+                            <p class="text-sm text-[var(--color-ink-muted)] mt-1">API keys per account</p>
                         </div>
                     </div>
                     <div class="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-700/30 text-sm text-amber-800 dark:text-amber-300 mb-4">
@@ -410,19 +410,19 @@ with open("output.png", "wb") as f:
                         <p>Identical inputs (same code + files) skip recompilation and are served from cache for up to 1 hour. Cached responses return instantly and do not consume your rate limit.</p>
                     </div>
                     <div>
-                        <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">When exceeded</p>
-                        <div class="p-3 rounded-lg bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-800/30 text-sm">
-                            <code class="font-mono text-xs font-bold text-red-700 dark:text-red-400">429 Too Many Requests</code>
-                            <span class="text-gray-600 dark:text-gray-400 ml-2">— wait for the current 60-second window to reset.</span>
+                        <p class="text-sm font-semibold text-[var(--color-ink-muted)] mb-2">When exceeded</p>
+                        <div class="p-3 rounded-lg bg-[var(--color-danger)]/10 border border-[var(--color-danger)]/20 text-sm">
+                            <code class="font-mono text-xs font-bold text-[var(--color-danger)]">429 Too Many Requests</code>
+                            <span class="text-[var(--color-ink-muted)] ml-2">— wait for the current 60-second window to reset.</span>
                         </div>
                     </div>
                 </div>
             {/if}
 
             {#if activeSection === 'errors'}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
-                    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
-                        <Icon icon="mdi:alert-circle-outline" class="text-2xl text-blue-500" />
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] p-6 sm:p-8">
+                    <h2 class="text-xl font-bold text-[var(--color-ink)] mb-6 flex items-center gap-2">
+                        <Icon icon="mdi:alert-circle-outline" class="text-2xl text-[var(--color-accent)]" />
                         Error Reference
                     </h2>
                     <div class="space-y-3">
@@ -433,18 +433,18 @@ with open("output.png", "wb") as f:
                             { code: '429', name: 'Too Many Requests',     desc: 'Rate limit exceeded. Wait for the current 60-second window to reset.'                   },
                             { code: '500', name: 'Internal Server Error', desc: 'Unexpected server error. Try again after a short delay.'                                },
                         ] as err}
-                            <div class="flex items-start gap-4 p-4 rounded-xl border border-gray-100 dark:border-white/10 bg-gray-50 dark:bg-black/20">
-                                <code class="font-mono text-sm font-bold text-gray-800 dark:text-gray-200 flex-shrink-0 w-8">{err.code}</code>
+                            <div class="flex items-start gap-4 p-4 rounded-xl border border-[var(--color-line)] bg-[var(--color-surface-muted)]">
+                                <code class="font-mono text-sm font-bold text-[var(--color-ink)] flex-shrink-0 w-8">{err.code}</code>
                                 <div>
-                                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">{err.name}</p>
-                                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{err.desc}</p>
+                                    <p class="text-sm font-semibold text-[var(--color-ink)]">{err.name}</p>
+                                    <p class="text-sm text-[var(--color-ink-muted)] mt-0.5">{err.desc}</p>
                                 </div>
                             </div>
                         {/each}
                     </div>
-                    <div class="mt-6 p-4 rounded-xl bg-gray-50 dark:bg-black/30 border border-gray-200 dark:border-white/10">
-                        <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Error body</p>
-                        <p class="text-sm text-gray-500 dark:text-gray-400">Compilation failures (<code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">422</code>) return a JSON body with an <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">error</code> summary and a <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">details</code> array. All other errors return plain text describing the issue.</p>
+                    <div class="mt-6 p-4 rounded-xl bg-[var(--color-surface-muted)] border border-[var(--color-line)]">
+                        <p class="text-sm font-semibold text-[var(--color-ink-muted)] mb-1">Error body</p>
+                        <p class="text-sm text-[var(--color-ink-muted)]">Compilation failures (<code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">422</code>) return a JSON body with an <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">error</code> summary and a <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">details</code> array. All other errors return plain text describing the issue.</p>
                     </div>
                 </div>
             {/if}
diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
index 3a6d7f0..c347923 100644
--- a/src/routes/dashboard/+page.svelte
+++ b/src/routes/dashboard/+page.svelte
@@ -10,12 +10,9 @@
     import DocCard from '$lib/components/dashboard/DocCard.svelte';
     import FileCard from '$lib/components/dashboard/FileCard.svelte';
     import ShareModal from '$lib/components/ShareModal.svelte';
-    import DeleteModal from '$lib/components/dashboard/DeleteModal.svelte';
+    import PromptModal from '$lib/components/PromptModal.svelte';
+    import ConfirmModal from '$lib/components/ConfirmModal.svelte';
     import InfoModal from '$lib/components/dashboard/InfoModal.svelte';
-    import RenameModal from '$lib/components/dashboard/RenameModal.svelte';
-    import CreateDocModal from '$lib/components/dashboard/CreateDocModal.svelte';
-    import CreateProjectModal from '$lib/components/dashboard/CreateProjectModal.svelte';
-    import CreateFolderModal from '$lib/components/dashboard/CreateFolderModal.svelte';
     import Footer from '$lib/components/Footer.svelte';
 
     let documents = $state<any[]>([]);
@@ -424,33 +421,33 @@
     
     <main class="max-w-7xl w-full mx-auto py-10 px-4 sm:px-6 lg:px-8 grow block">
         <div class="flex justify-between items-center mb-6">
-            <h2 class="text-3xl font-bold text-gray-900 dark:text-white tracking-tight">My Documents</h2>
-            
+            <h2 class="text-3xl font-bold text-[var(--color-ink)] tracking-tight">My Documents</h2>
+
             <div class="relative plus-dropdown-container">
-                <button onclick={() => showPlusDropdown = !showPlusDropdown} class="flex items-center justify-center text-[var(--theme-text)] bg-[var(--theme-border)] opacity-90 hover:opacity-100 w-10 h-10 rounded-full shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5 border border-white/10 dark:border-black/20">
+                <button onclick={() => showPlusDropdown = !showPlusDropdown} class="flex items-center justify-center text-white bg-[var(--color-accent)] hover:opacity-90 w-10 h-10 rounded-full shadow-md transition">
                     <Icon icon="mdi:plus" class="text-2xl" />
                 </button>
 
                 {#if showPlusDropdown}
-                    <div class="absolute right-0 mt-2 w-48 bg-[var(--theme-bg)] rounded-lg shadow-xl border border-gray-200 dark:border-white/10 py-1 z-20">
-                        <button onclick={openCreateModal} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
+                    <div class="absolute right-0 mt-2 w-48 bg-[var(--color-surface)] rounded-md shadow-xl border border-[var(--color-line)] py-1 z-20">
+                        <button onclick={openCreateModal} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
                             <Icon icon="mdi:file-document-plus" class="text-lg text-blue-500" />
                             New Document
                         </button>
-                        <button onclick={openCreateProjectModal} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
+                        <button onclick={openCreateProjectModal} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
                             <Icon icon="mdi:folder-multiple-plus" class="text-lg text-indigo-500" />
                             New Project
                         </button>
-                        <button onclick={openCreateFolderModal} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
+                        <button onclick={openCreateFolderModal} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
                             <Icon icon="mdi:folder-plus" class="text-lg text-yellow-500" />
                             New Folder
                         </button>
-                        <button onclick={() => { showPlusDropdown = false; fileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
+                        <button onclick={() => { showPlusDropdown = false; fileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2">
                             <Icon icon="mdi:upload" class="text-lg text-green-500" />
                             Upload File
                         </button>
-                        <div class="h-px bg-gray-200 dark:bg-white/10 my-1"></div>
-                        <button onclick={() => { showPlusDropdown = false; importFileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2" disabled={isImporting}>
+                        <div class="h-px bg-[var(--color-line)] my-1"></div>
+                        <button onclick={() => { showPlusDropdown = false; importFileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)] hover:text-[var(--color-ink)] flex items-center gap-2" disabled={isImporting}>
                             {#if isImporting}
                                 <Icon icon="mdi:loading" class="text-lg text-purple-500 animate-spin" />
                                 Importing...
@@ -467,29 +464,29 @@
         </div>
 
         
-        <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-6 bg-white/50 dark:bg-black/20 p-3 rounded-lg border border-gray-200 dark:border-white/10">
+        <div class="flex items-center gap-2 text-sm text-[var(--color-ink-muted)] mb-6 bg-[var(--color-surface)] p-3 rounded-md border border-[var(--color-line)]">
             <button
                 onclick={() => navigateToBreadcrumb(-1)}
                 ondragover={(e) => { e.preventDefault(); dragOverBreadcrumbIndex = -1; }}
                 ondragleave={() => dragOverBreadcrumbIndex = null}
                 ondrop={(e) => handleDrop(e, null)}
-                class="hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === -1 ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ''}">
+                class="hover:text-[var(--color-accent)] font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === -1 ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : ''}">
                 <Icon icon="mdi:home" class="text-lg inline-block pb-0.5" /> Home
             </button>
             {#if inSharedDrive}
-                <Icon icon="mdi:chevron-right" class="text-lg text-gray-400" />
-                <span class="font-medium text-purple-600 dark:text-purple-400 flex items-center gap-1 px-2 py-1">
+                <Icon icon="mdi:chevron-right" class="text-lg text-[var(--color-ink-muted)]" />
+                <span class="font-medium text-[var(--color-accent)] flex items-center gap-1 px-2 py-1">
                     <Icon icon="mdi:folder-account" class="text-base" /> Shared with me
                 </span>
             {:else}
                 {#each folderPath as folder, index}
-                    <Icon icon="mdi:chevron-right" class="text-lg text-gray-400" />
+                    <Icon icon="mdi:chevron-right" class="text-lg text-[var(--color-ink-muted)]" />
                     <button
                         onclick={() => navigateToBreadcrumb(index)}
                         ondragover={(e) => { e.preventDefault(); dragOverBreadcrumbIndex = index; }}
                         ondragleave={() => dragOverBreadcrumbIndex = null}
                         ondrop={(e) => handleDrop(e, folder.id)}
-                        class="hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === index ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ''}">
+                        class="hover:text-[var(--color-accent)] font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === index ? 'bg-[var(--color-accent-soft)] text-[var(--color-accent)]' : ''}">
                         {folder.name}
                     </button>
                 {/each}
@@ -499,19 +496,19 @@
         {#if inSharedDrive}
             {#if sharedDocsLoading}
                 <div class="min-h-[50vh] flex items-center justify-center">
-                    <div class="flex flex-col items-center gap-4 text-gray-500 dark:text-gray-400 animate-pulse">
+                    <div class="flex flex-col items-center gap-4 text-[var(--color-ink-muted)] animate-pulse">
                         <Icon icon="mdi:loading" class="text-4xl animate-spin" />
                         <p class="text-lg font-medium">Loading shared documents...</p>
                     </div>
                 </div>
             {:else if sharedDocs.length === 0}
                 <div class="min-h-[50vh] flex items-center justify-center">
-                    <div class="text-center p-12 bg-white/50 dark:bg-black/20 rounded-2xl shadow-sm border border-gray-200 dark:border-white/10 max-w-md w-full">
-                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-purple-100/50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 mb-6">
+                    <div class="text-center p-12 bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] max-w-md w-full">
+                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-[var(--color-accent-soft)] text-[var(--color-accent)] mb-6">
                             <Icon icon="mdi:folder-account-outline" class="text-4xl" />
                         </div>
-                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">No shared documents</h3>
-                        <p class="text-gray-500 dark:text-gray-400">Documents shared with you by other users will appear here.</p>
+                        <h3 class="text-xl font-bold text-[var(--color-ink)] mb-2">No shared documents</h3>
+                        <p class="text-[var(--color-ink-muted)]">Documents shared with you by other users will appear here.</p>
                     </div>
                 </div>
             {:else}
@@ -532,7 +529,7 @@
 
         {:else if loading}
             <div class="min-h-[50vh] flex items-center justify-center">
-                <div class="flex flex-col items-center gap-4 text-gray-500 dark:text-gray-400 animate-pulse">
+                <div class="flex flex-col items-center gap-4 text-[var(--color-ink-muted)] animate-pulse">
                     <Icon icon="mdi:loading" class="text-4xl animate-spin" />
                     <p class="text-lg font-medium">Loading your workspace...</p>
                 </div>
@@ -540,20 +537,20 @@
         {:else}
             {#if currentFolderId === null || folders.length > 0}
                 <div class="mb-8">
-                    <div class="px-2 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Folders</div>
+                    <div class="px-2 py-3 text-sm font-semibold text-[var(--color-ink-muted)]">Folders</div>
                     <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                         {#if currentFolderId === null}
                             <div
-                                class="flex flex-row items-center p-3 bg-white/50 dark:bg-black/20 border border-gray-200 dark:border-white/10 rounded-xl shadow-sm hover:shadow-md cursor-pointer group transition-all duration-200 hover:-translate-y-0.5 hover:border-purple-300 dark:hover:border-purple-500/30"
+                                class="flex flex-row items-center p-3 bg-[var(--color-surface)] border border-[var(--color-line)] rounded-lg shadow-sm hover:border-[var(--color-accent)] cursor-pointer group transition"
                                 role="button"
                                 tabindex="0"
                                 onclick={enterSharedDrive}
                                 onkeydown={(e) => e.key === 'Enter' && enterSharedDrive()}
                             >
-                                <div class="flex items-center justify-center w-10 h-10 bg-purple-50 dark:bg-purple-500/10 rounded-lg group-hover:scale-105 transition-transform pointer-events-none shrink-0 mr-3">
-                                    <Icon icon="mdi:folder-account" class="text-2xl text-purple-500" />
+                                <div class="flex items-center justify-center w-10 h-10 bg-[var(--color-accent-soft)] rounded-md group-hover:scale-105 transition-transform pointer-events-none shrink-0 mr-3">
+                                    <Icon icon="mdi:folder-account" class="text-2xl text-[var(--color-accent)]" />
                                 </div>
-                                <span class="font-medium text-gray-900 dark:text-white text-sm truncate w-full pointer-events-none">Shared with me</span>
+                                <span class="font-medium text-[var(--color-ink)] text-sm truncate w-full pointer-events-none">Shared with me</span>
                             </div>
                         {/if}
                         {#each folders as folder}
@@ -591,16 +588,16 @@
 
             {#if documents.length === 0 && files.length === 0 && currentFolderId !== null && folders.length === 0}
                 <div class="min-h-[30vh] flex items-center justify-center">
-                    <p class="text-gray-500 dark:text-gray-400">This folder is empty.</p>
+                    <p class="text-[var(--color-ink-muted)]">This folder is empty.</p>
                 </div>
             {:else if documents.length === 0 && files.length === 0 && folders.length === 0 && currentFolderId === null}
                 <div class="text-center py-12">
-                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 mb-4">
+                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--color-accent-soft)] text-[var(--color-accent)] mb-4">
                         <Icon icon="mdi:file-document-outline" class="text-3xl" />
                     </div>
-                    <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">No documents yet</h3>
-                    <p class="text-gray-500 dark:text-gray-400 mb-6 text-sm">Create your first Typst document to get started.</p>
-                    <button onclick={openCreateModal} class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg shadow-sm text-sm font-medium transition-colors">
+                    <h3 class="text-lg font-bold text-[var(--color-ink)] mb-1">No documents yet</h3>
+                    <p class="text-[var(--color-ink-muted)] mb-6 text-sm">Create your first Typst document to get started.</p>
+                    <button onclick={openCreateModal} class="inline-flex items-center gap-2 bg-[var(--color-accent)] hover:opacity-90 text-white px-5 py-2.5 rounded-md shadow-sm text-sm font-medium transition">
                         <Icon icon="mdi:plus" class="text-lg" />
                         Create Document
                     </button>
@@ -614,7 +611,13 @@
 {/if}
 
 {#if showDeleteModal && deleteTarget}
-    <DeleteModal {deleteTarget} {confirmDelete} onClose={() => showDeleteModal = false} />
+    <ConfirmModal
+        title={`Delete ${deleteTarget.type}`}
+        message={`Are you sure you want to delete '${deleteTarget.name}'? ${deleteTarget.type === 'folder' ? 'This will also delete all of its contents. ' : ''}This action cannot be undone.`}
+        confirmLabel="Delete"
+        onconfirm={confirmDelete}
+        onclose={() => showDeleteModal = false}
+    />
 {/if}
 
 {#if showInfoModal && selectedInfo}
@@ -622,19 +625,51 @@
 {/if}
 
 {#if showRenameModal}
-    <RenameModal initialTitle={renameTitle} {handleRename} onClose={() => showRenameModal = false} />
+    <PromptModal
+        title="Rename"
+        label="New name"
+        icon="ph:pencil-simple"
+        value={renameTitle}
+        confirmLabel="Save"
+        onsubmit={handleRename}
+        onclose={() => showRenameModal = false}
+    />
 {/if}
 
 {#if showCreateModal}
-    <CreateDocModal {createDoc} onClose={() => showCreateModal = false} />
+    <PromptModal
+        title="Create document"
+        label="Document title"
+        icon="ph:file-plus"
+        value="Untitled Document"
+        confirmLabel="Create"
+        onsubmit={createDoc}
+        onclose={() => showCreateModal = false}
+    />
 {/if}
 
 {#if showCreateProjectModal}
-    <CreateProjectModal {createProject} onClose={() => showCreateProjectModal = false} />
+    <PromptModal
+        title="Create project"
+        label="Project name"
+        icon="ph:folder-star"
+        value="Untitled Project"
+        confirmLabel="Create"
+        onsubmit={createProject}
+        onclose={() => showCreateProjectModal = false}
+    />
 {/if}
 
 {#if showCreateFolderModal}
-    <CreateFolderModal {createFolder} onClose={() => showCreateFolderModal = false} />
+    <PromptModal
+        title="Create folder"
+        label="Folder name"
+        icon="ph:folder-plus"
+        value="New Folder"
+        confirmLabel="Create"
+        onsubmit={createFolder}
+        onclose={() => showCreateFolderModal = false}
+    />
 {/if}
 
     </main>
diff --git a/src/routes/doc/[id]/+page.svelte b/src/routes/doc/[id]/+page.svelte
index eaac2b7..7d9db2e 100644
--- a/src/routes/doc/[id]/+page.svelte
+++ b/src/routes/doc/[id]/+page.svelte
@@ -129,7 +129,7 @@
 	<main class="flex-1 flex flex-col md:flex-row overflow-hidden relative" oncontextmenu={handleContextMenu}>
 
 		{#if !isViewer}
-		<div class="flex flex-col relative min-h-[50%] md:min-h-0 bg-transparent z-10 shadow-[1px_0_10px_rgba(0,0,0,0.05)] dark:shadow-[1px_0_10px_rgba(0,0,0,0.2)] {$previewOpenStore ? 'w-full md:w-1/2 border-r border-gray-200 dark:border-white/10' : 'w-full'}">
+		<div class="flex flex-col relative min-h-[50%] md:min-h-0 bg-transparent z-10 {$previewOpenStore ? 'w-full md:w-1/2 border-r border-[var(--color-line)]' : 'w-full'}">
 			{#if initialized}
 				<Editor />
 			{/if}
@@ -137,7 +137,7 @@
 		{/if}
 
 		{#if $previewOpenStore || isViewer}
-		<div class="{isViewer ? 'w-full' : 'w-full md:w-1/2'} relative bg-white/50 dark:bg-black/20 min-h-[50%] md:min-h-0 flex flex-col">
+		<div class="{isViewer ? 'w-full' : 'w-full md:w-1/2'} relative bg-[var(--color-surface)] min-h-[50%] md:min-h-0 flex flex-col">
 			<Preview {svgs} />
 			<ErrorBanner {errors} />
 		</div>
@@ -158,7 +158,7 @@
 		</button>
 		<div class="h-px bg-[var(--theme-border)] my-1"></div>
 		<button onclick={() => { navigator.clipboard.writeText(contextMenu.text); closeContextMenu(); }} class="w-full text-left px-4 py-2 text-sm hover:bg-[var(--theme-border)] flex items-center gap-2">
-			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-500"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[var(--color-ink-muted)]"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
 			Copy Text
 		</button>
 	</div>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 8834b70..82b0962 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -51,65 +51,60 @@
 	<meta name="description" content="Sign in to TypstDrive." />
 </svelte:head>
 
-<div class="min-h-screen flex flex-col relative overflow-hidden">
-    <div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative z-10">
-        
-        <div class="absolute -top-40 -left-40 w-96 h-96 bg-blue-400/20 dark:bg-blue-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
-        <div class="absolute top-40 -right-40 w-96 h-96 bg-purple-400/20 dark:bg-purple-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
-        <div class="absolute -bottom-40 left-20 w-96 h-96 bg-indigo-400/20 dark:bg-indigo-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
-
-        <div class="max-w-md w-full space-y-8 bg-white/80 dark:bg-black/40 backdrop-blur-xl p-10 rounded-2xl shadow-2xl border border-gray-200/50 dark:border-white/10 relative z-10">
+<div class="min-h-screen flex flex-col bg-[var(--color-surface-muted)]">
+    <div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-md w-full space-y-8 rounded-xl border border-[var(--color-line)] bg-[var(--color-surface)] p-10 shadow-2xl">
             <div class="text-center">
-                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-500 mb-6 mx-auto shadow-sm">
-                    <Icon icon="mdi:script-text" class="text-3xl" />
+                <div class="inline-flex items-center justify-center w-24 h-24 rounded-full bg-[var(--color-accent)] mb-6 mx-auto shadow-sm">
+                    <img src="/favicon.png" alt="TypstDrive" class="h-14 w-14" />
                 </div>
-                <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">
+                <h2 class="text-3xl font-extrabold tracking-tight text-[var(--color-ink)]">
                     Welcome back
                 </h2>
-                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 font-medium">
+                <p class="mt-2 text-sm text-[var(--color-ink-muted)] font-medium">
                     Sign in to your TypstDrive workspace
                 </p>
             </div>
             <form class="mt-8 space-y-6" onsubmit={login}>
                 <div class="space-y-5">
                     <div>
-                        <label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Email Address</label>
+                        <label for="email" class="block text-sm font-semibold text-[var(--color-ink-muted)] mb-1.5">Email address</label>
                         <div class="relative">
                             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                <Icon icon="mdi:email" class="text-gray-400 dark:text-gray-500" />
+                                <Icon icon="mdi:email" class="text-[var(--color-ink-muted)]" />
                             </div>
-                            <input id="email" name="email" type="email" required bind:value={email} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="user@example.com">
+                            <input id="email" name="email" type="email" required bind:value={email} class="block w-full rounded-md border border-[var(--color-line)] pl-10 pr-3 py-2.5 bg-[var(--color-surface)] text-[var(--color-ink)] placeholder-[var(--color-ink-muted)] focus:border-[var(--color-accent)] focus:outline-none sm:text-sm transition-colors" placeholder="user@example.com">
                         </div>
                     </div>
                     <div>
-                        <label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Password</label>
+                        <label for="password" class="block text-sm font-semibold text-[var(--color-ink-muted)] mb-1.5">Password</label>
                         <div class="relative">
                             <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                <Icon icon="mdi:lock" class="text-gray-400 dark:text-gray-500" />
+                                <Icon icon="mdi:lock" class="text-[var(--color-ink-muted)]" />
                             </div>
-                            <input id="password" name="password" type="password" required bind:value={password} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="••••••••">
+                            <input id="password" name="password" type="password" required bind:value={password} class="block w-full rounded-md border border-[var(--color-line)] pl-10 pr-3 py-2.5 bg-[var(--color-surface)] text-[var(--color-ink)] placeholder-[var(--color-ink-muted)] focus:border-[var(--color-accent)] focus:outline-none sm:text-sm transition-colors" placeholder="••••••••">
                         </div>
                     </div>
                 </div>
 
                 {#if errorMsg}
-                    <div class="flex items-center gap-2 text-red-600 bg-red-50 dark:bg-red-500/10 dark:text-red-400 p-3 rounded-lg text-sm border border-red-200 dark:border-red-500/20 shadow-sm animate-in slide-in-from-top-1 fade-in duration-200">
+                    <div class="flex items-center gap-2 text-[var(--color-danger)] bg-[var(--color-danger)]/10 p-3 rounded-md text-sm border border-[var(--color-danger)]/20">
                         <Icon icon="mdi:alert-circle" class="text-lg flex-shrink-0" />
                         <span class="font-medium">{errorMsg}</span>
                     </div>
                 {/if}
 
                 <div class="pt-2">
-                    <button type="submit" class="group w-full flex justify-center items-center gap-2 py-3 px-4 border border-transparent text-sm font-bold rounded-xl text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:ring-blue-500 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
-                        Sign In
+                    <button type="submit" class="group w-full flex justify-center items-center gap-2 py-3 px-4 text-sm font-bold rounded-md text-white bg-[var(--color-accent)] hover:opacity-90 focus:outline-none transition">
+                        Sign in
                         <Icon icon="mdi:arrow-right" class="text-lg group-hover:translate-x-1 transition-transform" />
                     </button>
                 </div>
             </form>
             {#if registrationEnabled}
-            <div class="text-sm text-center mt-6 pt-4 border-t border-gray-200 dark:border-white/10">
-                <span class="text-gray-500 dark:text-gray-400">New to TypstDrive? </span>
-                <a href="/register" class="font-bold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors hover:underline">
+            <div class="text-sm text-center mt-6 pt-4 border-t border-[var(--color-line)]">
+                <span class="text-[var(--color-ink-muted)]">New to TypstDrive? </span>
+                <a href="/register" class="font-bold text-[var(--color-accent)] hover:underline transition-colors">
                     Create an account
                 </a>
             </div>
diff --git a/src/routes/packages/+page.svelte b/src/routes/packages/+page.svelte
index bb2467f..b8d8a9c 100644
--- a/src/routes/packages/+page.svelte
+++ b/src/routes/packages/+page.svelte
@@ -46,55 +46,55 @@
 	<title>Packages - TypstDrive</title>
 </svelte:head>
 
-<div class="min-h-screen bg-gray-50 dark:bg-[var(--theme-bg)]">
+<div class="min-h-screen bg-[var(--color-surface-muted)]">
 	<Navbar />
 
 	<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
 		<div class="mb-6">
-			<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors mb-2 flex items-center gap-1.5">
+			<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors mb-2 flex items-center gap-1.5">
 				<Icon icon="mdi:arrow-left" class="text-lg" />
 				Back to Dashboard
 			</button>
-			<h2 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+			<h2 class="text-2xl font-bold text-[var(--color-ink)] flex items-center gap-2">
 				<Icon icon="mdi:package-variant-closed" class="text-purple-500" />
 				Packages
 			</h2>
-			<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+			<p class="text-sm text-[var(--color-ink-muted)] mt-1">
 				Instance-local Typst packages, published from Projects and importable as
-				<code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">@typstdrive/&lt;name&gt;:&lt;version&gt;</code>.
+				<code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">@typstdrive/&lt;name&gt;:&lt;version&gt;</code>.
 			</p>
 		</div>
 
 		{#if loading}
-			<p class="text-gray-500 dark:text-gray-400">Loading…</p>
+			<p class="text-[var(--color-ink-muted)]">Loading…</p>
 		{:else if packages.length === 0}
-			<div class="text-center py-16 text-gray-500 dark:text-gray-400">
+			<div class="text-center py-16 text-[var(--color-ink-muted)]">
 				<Icon icon="mdi:package-variant" class="text-5xl mx-auto mb-3 opacity-50" />
 				<p>No packages published yet. Open a Project and use “Publish” to create one.</p>
 			</div>
 		{:else}
 			<div class="space-y-3">
 				{#each packages as pkg (pkg.id)}
-					<div class="bg-white dark:bg-black/20 rounded-xl border border-gray-200 dark:border-white/10 p-4 flex items-start justify-between gap-4">
+					<div class="bg-[var(--color-surface)] rounded-xl border border-[var(--color-line)] p-4 flex items-start justify-between gap-4">
 						<div class="min-w-0">
 							<div class="flex items-center gap-2">
-								<p class="font-semibold text-gray-900 dark:text-white truncate">@typstdrive/{pkg.name}</p>
+								<p class="font-semibold text-[var(--color-ink)] truncate">@typstdrive/{pkg.name}</p>
 								{#if pkg.latest_version}
 									<span class="text-xs font-mono bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 px-1.5 py-0.5 rounded">v{pkg.latest_version}</span>
 								{/if}
 							</div>
 							{#if pkg.description}
-								<p class="text-sm text-gray-500 dark:text-gray-400 mt-1 truncate">{pkg.description}</p>
+								<p class="text-sm text-[var(--color-ink-muted)] mt-1 truncate">{pkg.description}</p>
 							{/if}
-							<p class="text-xs text-gray-400 mt-1">by {pkg.owner_name ?? 'unknown'}</p>
-							<pre class="mt-2 text-xs font-mono bg-gray-50 dark:bg-black/30 border border-gray-100 dark:border-white/5 rounded px-2 py-1 overflow-x-auto">{importSnippet(pkg)}</pre>
+							<p class="text-xs text-[var(--color-ink-muted)] mt-1">by {pkg.owner_name ?? 'unknown'}</p>
+							<pre class="mt-2 text-xs font-mono bg-[var(--color-surface-muted)] border border-[var(--color-line)] rounded px-2 py-1 overflow-x-auto">{importSnippet(pkg)}</pre>
 						</div>
 						<div class="flex flex-col items-end gap-2 flex-shrink-0">
-							<button onclick={() => copy(pkg)} class="text-xs px-2 py-1 rounded-md bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10 flex items-center gap-1">
+							<button onclick={() => copy(pkg)} class="text-xs px-2 py-1 rounded-md bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] flex items-center gap-1">
 								<Icon icon={copied === pkg.id ? 'mdi:check' : 'mdi:content-copy'} class="text-sm" />
 								{copied === pkg.id ? 'Copied' : 'Copy'}
 							</button>
-							<button onclick={() => remove(pkg)} title="Delete" class="text-xs px-2 py-1 rounded-md text-gray-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center gap-1">
+							<button onclick={() => remove(pkg)} title="Delete" class="text-xs px-2 py-1 rounded-md text-[var(--color-ink-muted)] hover:text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10 flex items-center gap-1">
 								<Icon icon="mdi:trash-can-outline" class="text-sm" /> Delete
 							</button>
 						</div>
diff --git a/src/routes/project/[id]/+page.svelte b/src/routes/project/[id]/+page.svelte
index 3cf531a..291545c 100644
--- a/src/routes/project/[id]/+page.svelte
+++ b/src/routes/project/[id]/+page.svelte
@@ -224,7 +224,7 @@
 		</aside>
 
 		{#if !readOnly}
-			<div class="flex flex-col min-h-0 {$previewOpenStore ? 'w-full md:w-1/2 border-r border-gray-200 dark:border-white/10' : 'flex-1'}">
+			<div class="flex flex-col min-h-0 {$previewOpenStore ? 'w-full md:w-1/2 border-r border-[var(--color-line)]' : 'flex-1'}">
 				{#if ready && activeEntry}
 					{#key activeFileId}
 						<Editor ytext={activeEntry.text} awarenessProvider={activeEntry.provider} filePath={activePath} enableLsp={false} />
@@ -234,7 +234,7 @@
 		{/if}
 
 		{#if $previewOpenStore || readOnly}
-			<div class="{readOnly ? 'flex-1' : 'w-full md:w-1/2'} relative bg-white/50 dark:bg-black/20 flex flex-col">
+			<div class="{readOnly ? 'flex-1' : 'w-full md:w-1/2'} relative bg-[var(--color-surface)] flex flex-col">
 				<Preview {svgs} />
 				<ErrorBanner {errors} />
 			</div>
@@ -247,7 +247,7 @@
 {#if contextMenu.show}
 	<div class="fixed z-[9999] bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-lg shadow-xl border border-[var(--theme-border)] py-1 min-w-[180px] overflow-hidden" style="left: {contextMenu.x}px; top: {contextMenu.y}px;">
 		<button onclick={() => { navigator.clipboard.writeText(contextMenu.text); closeContextMenu(); }} class="w-full text-left px-4 py-2 text-sm hover:bg-[var(--theme-border)] flex items-center gap-2">
-			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-500"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-[var(--color-ink-muted)]"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
 			Copy Text
 		</button>
 	</div>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 8dbbaf5..02f61f4 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -4,6 +4,9 @@
 	import Icon from '@iconify/svelte';
 	import Navbar from '$lib/components/dashboard/Navbar.svelte';
 	import ProjectCard from '$lib/components/dashboard/ProjectCard.svelte';
+	import PromptModal from '$lib/components/PromptModal.svelte';
+	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
+	import Modal from '$lib/components/Modal.svelte';
 
 	interface Project {
 		id: string;
@@ -18,7 +21,6 @@
 	let shared = $state<Project[]>([]);
 	let loading = $state(true);
 	let showCreate = $state(false);
-	let newName = $state('');
 	let creating = $state(false);
 
 	let activeMenu = $state<string | null>(null);
@@ -27,21 +29,20 @@
 	let renameName = $state('');
 	let showInfo = $state(false);
 	let infoProject = $state<Project | null>(null);
+	let deleteTarget = $state<{ id: string; name: string } | null>(null);
 
 	function setActiveMenu(id: string | null) { activeMenu = id; }
 	function openInfo(project: Project) { activeMenu = null; infoProject = project; showInfo = true; }
 	function openRename(id: string, name: string) { activeMenu = null; renameId = id; renameName = name; showRename = true; }
 
-	async function submitRename(e: Event) {
-		e.preventDefault();
-		if (!renameName.trim()) return;
+	async function submitRename(name: string) {
 		const res = await fetch(`/api/projects/${renameId}`, {
 			method: 'PATCH',
 			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ name: renameName.trim() })
+			body: JSON.stringify({ name })
 		});
 		if (res.ok) {
-			projects = projects.map((p) => (p.id === renameId ? { ...p, name: renameName.trim() } : p));
+			projects = projects.map((p) => (p.id === renameId ? { ...p, name } : p));
 		}
 		showRename = false;
 	}
@@ -62,13 +63,12 @@
 		loading = false;
 	}
 
-	async function create() {
-		if (!newName.trim()) return;
+	async function create(name: string) {
 		creating = true;
 		const res = await fetch('/api/projects', {
 			method: 'POST',
 			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ name: newName.trim() })
+			body: JSON.stringify({ name })
 		});
 		creating = false;
 		if (res.ok) {
@@ -77,10 +77,16 @@
 		}
 	}
 
-	async function remove(id: string, name: string) {
-		if (!confirm(`Delete project "${name}"? This cannot be undone.`)) return;
-		const res = await fetch(`/api/projects/${id}`, { method: 'DELETE' });
-		if (res.ok) projects = projects.filter((p) => p.id !== id);
+	function requestDelete(id: string, name: string) {
+		activeMenu = null;
+		deleteTarget = { id, name };
+	}
+
+	async function confirmDeleteProject() {
+		if (!deleteTarget) return;
+		const res = await fetch(`/api/projects/${deleteTarget.id}`, { method: 'DELETE' });
+		if (res.ok) projects = projects.filter((p) => p.id !== deleteTarget!.id);
+		deleteTarget = null;
 	}
 
 	onMount(load);
@@ -92,32 +98,32 @@
 
 <svelte:window onclick={handleWindowClick} />
 
-<div class="min-h-screen bg-gray-50 dark:bg-[var(--theme-bg)]">
+<div class="min-h-screen bg-[var(--color-surface-muted)]">
 	<Navbar />
 
 	<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
 		<div class="flex items-center justify-between mb-6">
 			<div>
-				<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors mb-2 flex items-center gap-1.5">
+				<button onclick={() => goto('/dashboard')} class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors mb-2 flex items-center gap-1.5">
 					<Icon icon="mdi:arrow-left" class="text-lg" />
 					Back to Dashboard
 				</button>
-				<h2 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
-					<Icon icon="mdi:folder-multiple-outline" class="text-blue-500" />
+				<h2 class="text-2xl font-bold text-[var(--color-ink)] flex items-center gap-2">
+					<Icon icon="mdi:folder-multiple-outline" class="text-[var(--color-accent)]" />
 					Projects
 				</h2>
-				<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Multi-file Typst workspaces with their own <code class="font-mono text-xs">typst.toml</code>.</p>
+				<p class="text-sm text-[var(--color-ink-muted)] mt-1">Multi-file Typst workspaces with their own <code class="font-mono text-xs">typst.toml</code>.</p>
 			</div>
-			<button onclick={() => { showCreate = true; newName = ''; }} class="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 flex items-center gap-2">
+			<button onclick={() => (showCreate = true)} class="px-4 py-2 text-sm rounded-md bg-[var(--color-accent)] text-white hover:opacity-90 transition flex items-center gap-2">
 				<Icon icon="mdi:plus" class="text-lg" /> New Project
 			</button>
 		</div>
 
 		{#if loading}
-			<p class="text-gray-500 dark:text-gray-400">Loading…</p>
+			<p class="text-[var(--color-ink-muted)]">Loading…</p>
 		{:else}
 			{#if projects.length === 0}
-				<div class="text-center py-16 text-gray-500 dark:text-gray-400">
+				<div class="text-center py-16 text-[var(--color-ink-muted)]">
 					<Icon icon="mdi:folder-multiple-outline" class="text-5xl mx-auto mb-3 opacity-50" />
 					<p>No projects yet. Create one to start a multi-file project.</p>
 				</div>
@@ -130,29 +136,29 @@
 							{setActiveMenu}
 							{openInfo}
 							{openRename}
-							deleteProject={remove}
+							deleteProject={requestDelete}
 						/>
 					{/each}
 				</div>
 			{/if}
 
 			{#if shared.length > 0}
-				<h3 class="text-lg font-semibold text-gray-900 dark:text-white mt-10 mb-4 flex items-center gap-2">
-					<Icon icon="mdi:account-group-outline" class="text-blue-500" /> Shared with me
+				<h3 class="text-lg font-semibold text-[var(--color-ink)] mt-10 mb-4 flex items-center gap-2">
+					<Icon icon="mdi:account-group-outline" class="text-[var(--color-accent)]" /> Shared with me
 				</h3>
 				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 					{#each shared as project (project.id)}
-						<button onclick={() => goto(`/project/${project.id}`)} class="text-left bg-white dark:bg-black/20 rounded-xl border border-gray-200 dark:border-white/10 overflow-hidden hover:shadow-md transition-shadow">
-							<div class="h-32 bg-gray-50 dark:bg-black/30 flex items-center justify-center overflow-hidden border-b border-gray-100 dark:border-white/5">
+						<button onclick={() => goto(`/project/${project.id}`)} class="text-left bg-[var(--color-surface)] rounded-lg border border-[var(--color-line)] overflow-hidden hover:border-[var(--color-accent)] transition">
+							<div class="h-32 bg-[var(--color-surface-muted)] flex items-center justify-center overflow-hidden border-b border-[var(--color-line)]">
 								{#if project.thumbnail_svg}
 									{@html project.thumbnail_svg}
 								{:else}
-									<Icon icon="mdi:folder-multiple-outline" class="text-4xl text-gray-300 dark:text-gray-600" />
+									<Icon icon="mdi:folder-multiple-outline" class="text-4xl text-[var(--color-ink-muted)]" />
 								{/if}
 							</div>
 							<div class="p-3">
-								<p class="font-medium text-gray-900 dark:text-white truncate">{project.name}</p>
-								<p class="text-xs text-gray-400 mt-0.5">{project.effective_role}</p>
+								<p class="font-medium text-[var(--color-ink)] truncate">{project.name}</p>
+								<p class="text-xs text-[var(--color-ink-muted)] mt-0.5">{project.effective_role}</p>
 							</div>
 						</button>
 					{/each}
@@ -163,45 +169,59 @@
 </div>
 
 {#if showCreate}
-	<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50" onclick={() => (showCreate = false)} role="presentation">
-		<div class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md p-6" onclick={(e) => e.stopPropagation()} role="presentation">
-			<h2 class="text-lg font-bold mb-4 flex items-center gap-2"><Icon icon="mdi:folder-plus-outline" class="text-blue-500" /> New Project</h2>
-			<input bind:value={newName} placeholder="Project name" onkeydown={(e) => e.key === 'Enter' && create()} class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-white/10 bg-transparent text-sm mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500/40" />
-			<div class="flex justify-end gap-2">
-				<button onclick={() => (showCreate = false)} class="px-4 py-2 text-sm rounded-lg bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10">Cancel</button>
-				<button onclick={create} disabled={creating} class="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50">Create</button>
-			</div>
-		</div>
-	</div>
+	<PromptModal
+		title="New project"
+		label="Project name"
+		icon="ph:folder-star"
+		placeholder="Untitled Project"
+		confirmLabel="Create"
+		onsubmit={create}
+		onclose={() => (showCreate = false)}
+	/>
 {/if}
 
 {#if showRename}
-	<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50" onclick={() => (showRename = false)} role="presentation">
-		<form onsubmit={submitRename} class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md p-6" onclick={(e) => e.stopPropagation()}>
-			<h2 class="text-lg font-bold mb-4 flex items-center gap-2"><Icon icon="mdi:pencil-outline" class="text-yellow-500" /> Rename Project</h2>
-			<input bind:value={renameName} class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-white/10 bg-transparent text-sm mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500/40" />
-			<div class="flex justify-end gap-2">
-				<button type="button" onclick={() => (showRename = false)} class="px-4 py-2 text-sm rounded-lg bg-gray-100 dark:bg-white/5 hover:bg-gray-200 dark:hover:bg-white/10">Cancel</button>
-				<button type="submit" class="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700">Save</button>
-			</div>
-		</form>
-	</div>
+	<PromptModal
+		title="Rename project"
+		label="Project name"
+		icon="ph:pencil-simple"
+		value={renameName}
+		confirmLabel="Save"
+		onsubmit={submitRename}
+		onclose={() => (showRename = false)}
+	/>
 {/if}
 
 {#if showInfo && infoProject}
-	<div class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50" onclick={() => (showInfo = false)} role="presentation">
-		<div class="bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-sm overflow-hidden" onclick={(e) => e.stopPropagation()} role="presentation">
-			<div class="p-6 border-b border-gray-100 dark:border-white/10 flex items-center gap-3">
-				<Icon icon="mdi:folder-multiple-outline" class="text-xl text-blue-500" />
-				<h3 class="text-lg font-semibold flex-grow truncate">{infoProject.name}</h3>
+	<Modal title={infoProject.name} icon="ph:folder-star" onclose={() => (showInfo = false)}>
+		<div class="flex flex-col gap-4 text-xs">
+			<div>
+				<p class="mb-1 font-medium text-[var(--color-ink-muted)]">Entrypoint</p>
+				<p class="font-mono text-sm text-[var(--color-ink)]">{infoProject.entrypoint}</p>
 			</div>
-			<div class="p-6 space-y-4 text-sm">
-				<div><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Entrypoint</p><p class="font-mono">{infoProject.entrypoint}</p></div>
-				<div><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Last Modified</p><p>{new Date(infoProject.updated_at.endsWith('Z') ? infoProject.updated_at : infoProject.updated_at + 'Z').toLocaleString()}</p></div>
-			</div>
-			<div class="p-4 bg-gray-50 dark:bg-white/5 border-t border-gray-100 dark:border-white/10 flex justify-end">
-				<button onclick={() => (showInfo = false)} class="px-5 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg">Close</button>
+			<div>
+				<p class="mb-1 font-medium text-[var(--color-ink-muted)]">Last modified</p>
+				<p class="text-sm text-[var(--color-ink)]">{new Date(infoProject.updated_at.endsWith('Z') ? infoProject.updated_at : infoProject.updated_at + 'Z').toLocaleString()}</p>
 			</div>
 		</div>
-	</div>
+
+		{#snippet footer()}
+			<button
+				onclick={() => (showInfo = false)}
+				class="rounded-md bg-[var(--color-accent)] px-3 py-1.5 text-xs font-medium text-white transition hover:opacity-90"
+			>
+				Close
+			</button>
+		{/snippet}
+	</Modal>
+{/if}
+
+{#if deleteTarget}
+	<ConfirmModal
+		title="Delete project"
+		message={`'${deleteTarget.name}' will be permanently deleted. This cannot be undone.`}
+		confirmLabel="Delete"
+		onconfirm={confirmDeleteProject}
+		onclose={() => (deleteTarget = null)}
+	/>
 {/if}
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index cb6ada5..262f5d8 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -35,7 +35,7 @@
                 errorMsg = text || 'Registration failed';
                 return;
             }
-            
+
             const loginRes = await fetch('/api/auth/login', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -62,30 +62,26 @@
 	<meta name="description" content="Create a new TypstDrive account." />
 </svelte:head>
 
-<div class="min-h-screen flex flex-col relative overflow-hidden">
-    <div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative z-10">
-        <div class="absolute -top-40 right-20 w-96 h-96 bg-emerald-400/20 dark:bg-emerald-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
-        <div class="absolute top-40 -left-20 w-96 h-96 bg-teal-400/20 dark:bg-teal-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
-        <div class="absolute -bottom-40 right-40 w-96 h-96 bg-blue-400/20 dark:bg-blue-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
-
-        <div class="max-w-md w-full space-y-8 bg-white/80 dark:bg-black/40 backdrop-blur-xl p-10 rounded-2xl shadow-2xl border border-gray-200/50 dark:border-white/10 relative z-10">
+<div class="min-h-screen flex flex-col bg-[var(--color-surface-muted)]">
+    <div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-md w-full space-y-8 rounded-xl border border-[var(--color-line)] bg-[var(--color-surface)] p-10 shadow-2xl">
             <div class="text-center">
-                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-500 mb-6 mx-auto shadow-sm">
+                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--color-accent-soft)] text-[var(--color-accent)] mb-6 mx-auto shadow-sm">
                     <Icon icon="mdi:account-plus" class="text-3xl" />
                 </div>
-                <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">
+                <h2 class="text-3xl font-extrabold tracking-tight text-[var(--color-ink)]">
                     Create an account
                 </h2>
-                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400 font-medium">
+                <p class="mt-2 text-sm text-[var(--color-ink-muted)] font-medium">
                     Join TypstDrive to start collaborating
                 </p>
             </div>
             {#if registrationDisabled}
                 <div class="flex flex-col items-center gap-4 py-4">
-                    <div class="flex items-center gap-3 w-full bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 p-4 rounded-xl border border-amber-200 dark:border-amber-500/20">
+                    <div class="flex items-center gap-3 w-full bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 p-4 rounded-md border border-amber-200 dark:border-amber-500/20">
                         <Icon icon="mdi:lock-outline" class="text-2xl flex-shrink-0" />
                         <div>
-                            <p class="font-semibold text-sm">Registration Disabled</p>
+                            <p class="font-semibold text-sm">Registration disabled</p>
                             <p class="text-xs mt-0.5 text-amber-600 dark:text-amber-500">New account creation has been disabled by the administrator. Please contact your administrator to get an account.</p>
                         </div>
                     </div>
@@ -94,52 +90,52 @@
                 <form class="mt-8 space-y-6" onsubmit={register}>
                     <div class="space-y-5">
                         <div>
-                            <label for="username" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Username</label>
+                            <label for="username" class="block text-sm font-semibold text-[var(--color-ink-muted)] mb-1.5">Username</label>
                             <div class="relative">
                                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                    <Icon icon="mdi:account" class="text-gray-400 dark:text-gray-500" />
+                                    <Icon icon="mdi:account" class="text-[var(--color-ink-muted)]" />
                                 </div>
-                                <input id="username" name="username" type="text" required bind:value={username} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="Choose a username">
+                                <input id="username" name="username" type="text" required bind:value={username} class="block w-full rounded-md border border-[var(--color-line)] pl-10 pr-3 py-2.5 bg-[var(--color-surface)] text-[var(--color-ink)] placeholder-[var(--color-ink-muted)] focus:border-[var(--color-accent)] focus:outline-none sm:text-sm transition-colors" placeholder="Choose a username">
                             </div>
                         </div>
                         <div>
-                            <label for="email" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Email Address</label>
+                            <label for="email" class="block text-sm font-semibold text-[var(--color-ink-muted)] mb-1.5">Email address</label>
                             <div class="relative">
                                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                    <Icon icon="mdi:email" class="text-gray-400 dark:text-gray-500" />
+                                    <Icon icon="mdi:email" class="text-[var(--color-ink-muted)]" />
                                 </div>
-                                <input id="email" name="email" type="email" required bind:value={email} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="user@example.com">
+                                <input id="email" name="email" type="email" required bind:value={email} class="block w-full rounded-md border border-[var(--color-line)] pl-10 pr-3 py-2.5 bg-[var(--color-surface)] text-[var(--color-ink)] placeholder-[var(--color-ink-muted)] focus:border-[var(--color-accent)] focus:outline-none sm:text-sm transition-colors" placeholder="user@example.com">
                             </div>
                         </div>
                         <div>
-                            <label for="password" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1.5">Password</label>
+                            <label for="password" class="block text-sm font-semibold text-[var(--color-ink-muted)] mb-1.5">Password</label>
                             <div class="relative">
                                 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                    <Icon icon="mdi:lock" class="text-gray-400 dark:text-gray-500" />
+                                    <Icon icon="mdi:lock" class="text-[var(--color-ink-muted)]" />
                                 </div>
-                                <input id="password" name="password" type="password" required bind:value={password} class="block w-full rounded-xl border border-gray-300 dark:border-white/20 pl-10 pr-3 py-2.5 bg-white/50 dark:bg-black/40 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 sm:text-sm transition-all duration-200" placeholder="••••••••">
+                                <input id="password" name="password" type="password" required bind:value={password} class="block w-full rounded-md border border-[var(--color-line)] pl-10 pr-3 py-2.5 bg-[var(--color-surface)] text-[var(--color-ink)] placeholder-[var(--color-ink-muted)] focus:border-[var(--color-accent)] focus:outline-none sm:text-sm transition-colors" placeholder="••••••••">
                             </div>
                         </div>
                     </div>
 
                     {#if errorMsg}
-                        <div class="flex items-center gap-2 text-red-600 bg-red-50 dark:bg-red-500/10 dark:text-red-400 p-3 rounded-lg text-sm border border-red-200 dark:border-red-500/20 shadow-sm animate-in slide-in-from-top-1 fade-in duration-200">
+                        <div class="flex items-center gap-2 text-[var(--color-danger)] bg-[var(--color-danger)]/10 p-3 rounded-md text-sm border border-[var(--color-danger)]/20">
                             <Icon icon="mdi:alert-circle" class="text-lg flex-shrink-0" />
                             <span class="font-medium">{errorMsg}</span>
                         </div>
                     {/if}
 
                     <div class="pt-2">
-                        <button type="submit" class="group w-full flex justify-center items-center gap-2 py-3 px-4 border border-transparent text-sm font-bold rounded-xl text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-zinc-900 focus:ring-blue-500 transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
+                        <button type="submit" class="group w-full flex justify-center items-center gap-2 py-3 px-4 text-sm font-bold rounded-md text-white bg-[var(--color-accent)] hover:opacity-90 focus:outline-none transition">
                             Register
                             <Icon icon="mdi:arrow-right" class="text-lg group-hover:translate-x-1 transition-transform" />
                         </button>
                     </div>
                 </form>
             {/if}
-            <div class="text-sm text-center mt-6 pt-4 border-t border-gray-200 dark:border-white/10">
-                <span class="text-gray-500 dark:text-gray-400">Already have an account? </span>
-                <a href="/login" class="font-bold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 transition-colors hover:underline">
+            <div class="text-sm text-center mt-6 pt-4 border-t border-[var(--color-line)]">
+                <span class="text-[var(--color-ink-muted)]">Already have an account? </span>
+                <a href="/login" class="font-bold text-[var(--color-accent)] hover:underline transition-colors">
                     Sign in
                 </a>
             </div>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 7e17e29..6e5dcf3 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -418,12 +418,12 @@
 </svelte:head>
 
 <div class="min-h-screen flex flex-col">
-    <nav class="bg-[var(--theme-bg)] shadow-sm border-b border-gray-200 dark:border-white/10 px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200 flex-shrink-0">
-        <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
-            <Icon icon="mdi:cog" class="text-blue-600 dark:text-blue-400 text-3xl" />
+    <nav class="bg-[var(--color-surface)] shadow-sm border-b border-[var(--color-line)] px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200 flex-shrink-0">
+        <h1 class="text-2xl font-bold text-[var(--color-ink)] flex items-center gap-3">
+            <Icon icon="mdi:cog" class="text-[var(--color-accent)] text-3xl" />
             Settings
         </h1>
-        <button onclick={() => goto('/dashboard')} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-4 py-2 rounded-lg flex items-center gap-2">
+        <button onclick={() => goto('/dashboard')} class="text-sm font-medium text-[var(--color-ink-muted)] hover:text-[var(--color-ink)] transition-colors bg-[var(--color-surface-muted)] hover:bg-[var(--color-surface-sunken)] px-4 py-2 rounded-md flex items-center gap-2">
             <Icon icon="mdi:arrow-left" class="text-lg" />
             Back to Dashboard
         </button>
@@ -435,9 +435,9 @@
                 {#each navItems as item}
                     <button
                         onclick={() => activeSection = item.id}
-                        class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-150 {activeSection === item.id
-                            ? 'bg-blue-600 text-white shadow-sm'
-                            : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5'}"
+                        class="w-full flex items-center gap-3 px-4 py-2.5 rounded-md text-sm font-medium transition-colors {activeSection === item.id
+                            ? 'bg-[var(--color-accent)] text-white shadow-sm'
+                            : 'text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-muted)]'}"
                     >
                         <Icon icon={item.icon} class="text-lg flex-shrink-0" />
                         {item.label}
@@ -447,8 +447,8 @@
                     </button>
                 {/each}
 
-                <div class="pt-4 mt-4 border-t border-gray-200 dark:border-white/10">
-                    <button onclick={logout} class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-all duration-150">
+                <div class="pt-4 mt-4 border-t border-[var(--color-line)]">
+                    <button onclick={logout} class="w-full flex items-center gap-3 px-4 py-2.5 rounded-md text-sm font-medium text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10 transition-colors">
                         <Icon icon="mdi:logout" class="text-lg flex-shrink-0" />
                         Sign Out
                     </button>
@@ -459,20 +459,20 @@
         <main class="flex-1 min-w-0 space-y-6 pb-16">
 
             {#if activeSection === 'account'}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] overflow-hidden">
                     <div class="p-6 sm:p-8">
-                        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
-                            <Icon icon="mdi:account-outline" class="text-2xl text-blue-500 dark:text-blue-400" />
+                        <h2 class="text-xl font-bold text-[var(--color-ink)] mb-6 flex items-center gap-2">
+                            <Icon icon="mdi:account-outline" class="text-2xl text-[var(--color-accent)]" />
                             Account Settings
                         </h2>
 
                         <div class="flex items-center gap-4 mb-6">
-                            <div class="h-14 w-14 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 text-2xl font-bold border border-blue-500/20 flex-shrink-0">
+                            <div class="h-14 w-14 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center text-[var(--color-accent)] text-2xl font-bold flex-shrink-0">
                                 {$userStore?.username?.[0]?.toUpperCase() || '?'}
                             </div>
                             <div>
-                                <p class="text-base font-bold text-gray-900 dark:text-white">{$userStore?.username}</p>
-                                <p class="text-sm text-gray-500 dark:text-gray-400">{$userStore?.email}</p>
+                                <p class="text-base font-bold text-[var(--color-ink)]">{$userStore?.username}</p>
+                                <p class="text-sm text-[var(--color-ink-muted)]">{$userStore?.email}</p>
                                 {#if $userStore?.is_admin}
                                     <span class="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400 mt-1">
                                         <Icon icon="mdi:shield-crown-outline" class="text-sm" />
@@ -482,27 +482,27 @@
                             </div>
                         </div>
 
-                        <div class="h-px bg-gray-200 dark:bg-white/10 mb-6"></div>
+                        <div class="h-px bg-[var(--color-line)] mb-6"></div>
 
-                        <h3 class="text-sm font-bold text-gray-900 dark:text-white mb-4">Profile</h3>
+                        <h3 class="text-sm font-bold text-[var(--color-ink)] mb-4">Profile</h3>
 
                         {#if profileError}
-                            <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-4">{profileError}</div>
+                            <div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] p-3 rounded-md text-sm mb-4">{profileError}</div>
                         {/if}
                         {#if profileSuccess}
-                            <div class="bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 p-3 rounded-lg text-sm mb-4">Profile updated successfully.</div>
+                            <div class="bg-[var(--color-success)]/10 text-[var(--color-success)] p-3 rounded-md text-sm mb-4">Profile updated successfully.</div>
                         {/if}
 
                         <div class="space-y-4">
                             <div>
-                                <label for="username-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
-                                <input id="username-input" type="text" bind:value={username} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
+                                <label for="username-input" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Username</label>
+                                <input id="username-input" type="text" bind:value={username} class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2 focus:border-[var(--color-accent)] focus:outline-none transition-colors" />
                             </div>
                             <div>
-                                <label for="email-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
-                                <input id="email-input" type="email" bind:value={email} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
+                                <label for="email-input" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Email address</label>
+                                <input id="email-input" type="email" bind:value={email} class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2 focus:border-[var(--color-accent)] focus:outline-none transition-colors" />
                             </div>
-                            <button onclick={saveProfile} disabled={isSaving || (username === $userStore?.username && email === $userStore?.email)} class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg text-sm font-semibold transition-colors disabled:opacity-50 flex items-center gap-2 shadow-sm">
+                            <button onclick={saveProfile} disabled={isSaving || (username === $userStore?.username && email === $userStore?.email)} class="bg-[var(--color-accent)] hover:opacity-90 text-white px-5 py-2 rounded-md text-sm font-semibold transition disabled:opacity-50 flex items-center gap-2 shadow-sm">
                                 {#if isSaving}
                                     <Icon icon="mdi:loading" class="animate-spin text-lg" />
                                     Saving...
@@ -513,31 +513,31 @@
                             </button>
                         </div>
 
-                        <div class="h-px bg-gray-200 dark:bg-white/10 my-6"></div>
+                        <div class="h-px bg-[var(--color-line)] my-6"></div>
 
-                        <h3 class="text-sm font-bold text-gray-900 dark:text-white mb-4">Change Password</h3>
+                        <h3 class="text-sm font-bold text-[var(--color-ink)] mb-4">Change Password</h3>
 
                         {#if passwordError}
-                            <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-4">{passwordError}</div>
+                            <div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] p-3 rounded-md text-sm mb-4">{passwordError}</div>
                         {/if}
                         {#if passwordSuccess}
-                            <div class="bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 p-3 rounded-lg text-sm mb-4">Password changed successfully.</div>
+                            <div class="bg-[var(--color-success)]/10 text-[var(--color-success)] p-3 rounded-md text-sm mb-4">Password changed successfully.</div>
                         {/if}
 
                         <div class="space-y-4">
                             <div>
-                                <label for="current-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Current Password</label>
-                                <input id="current-password" type="password" bind:value={currentPassword} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
+                                <label for="current-password" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Current password</label>
+                                <input id="current-password" type="password" bind:value={currentPassword} class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2 focus:border-[var(--color-accent)] focus:outline-none transition-colors" />
                             </div>
                             <div>
-                                <label for="new-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">New Password</label>
-                                <input id="new-password" type="password" bind:value={newPassword} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
+                                <label for="new-password" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">New password</label>
+                                <input id="new-password" type="password" bind:value={newPassword} class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2 focus:border-[var(--color-accent)] focus:outline-none transition-colors" />
                             </div>
                             <div>
-                                <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm New Password</label>
-                                <input id="confirm-password" type="password" bind:value={confirmPassword} class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors" />
+                                <label for="confirm-password" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Confirm new password</label>
+                                <input id="confirm-password" type="password" bind:value={confirmPassword} class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2 focus:border-[var(--color-accent)] focus:outline-none transition-colors" />
                             </div>
-                            <button onclick={changePassword} disabled={isSavingPassword || !currentPassword || !newPassword || !confirmPassword} class="bg-gray-200 hover:bg-gray-300 text-gray-800 dark:bg-white/10 dark:hover:bg-white/20 dark:text-white px-5 py-2 rounded-lg text-sm font-semibold transition-colors disabled:opacity-50 flex items-center gap-2">
+                            <button onclick={changePassword} disabled={isSavingPassword || !currentPassword || !newPassword || !confirmPassword} class="bg-[var(--color-surface-sunken)] hover:opacity-90 text-[var(--color-ink)] px-5 py-2 rounded-md text-sm font-semibold transition disabled:opacity-50 flex items-center gap-2">
                                 {#if isSavingPassword}
                                     <Icon icon="mdi:loading" class="animate-spin text-lg" />
                                     Updating...
@@ -552,46 +552,46 @@
             {/if}
 
             {#if activeSection === 'theme'}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] overflow-hidden">
                     <div class="p-6 sm:p-8">
-                        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
-                            <Icon icon="mdi:palette-outline" class="text-2xl text-blue-500 dark:text-blue-400" />
+                        <h2 class="text-xl font-bold text-[var(--color-ink)] mb-2 flex items-center gap-2">
+                            <Icon icon="mdi:palette-outline" class="text-2xl text-[var(--color-accent)]" />
                             Theme Settings
                         </h2>
-                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Customize the appearance of your editor and dashboard. These settings are saved to your browser.</p>
+                        <p class="text-sm text-[var(--color-ink-muted)] mb-6">Customize the appearance of your editor and dashboard. These settings are saved to your browser.</p>
                         <ThemePicker />
                     </div>
                 </div>
             {/if}
 
             {#if activeSection === 'storage'}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] overflow-hidden">
                     <div class="p-6 sm:p-8">
-                        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
-                            <Icon icon="mdi:harddisk" class="text-2xl text-blue-500 dark:text-blue-400" />
+                        <h2 class="text-xl font-bold text-[var(--color-ink)] mb-6 flex items-center gap-2">
+                            <Icon icon="mdi:harddisk" class="text-2xl text-[var(--color-accent)]" />
                             Storage
                         </h2>
                         <div class="mb-4 flex justify-between items-end">
-                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Total Space Used</span>
-                            <span class="text-sm font-bold text-gray-900 dark:text-white">
+                            <span class="text-sm font-medium text-[var(--color-ink-muted)]">Total space used</span>
+                            <span class="text-sm font-bold text-[var(--color-ink)]">
                                 {storageStats ? formatBytes(storageStats.total_size_bytes) : 'Loading...'}
                             </span>
                         </div>
                         <div class="grid grid-cols-2 gap-4 text-sm">
-                            <div class="bg-gray-50 dark:bg-black/30 p-4 rounded-xl border border-gray-200 dark:border-white/10 flex items-center gap-3">
-                                <div class="w-3 h-3 rounded-full bg-blue-500 flex-shrink-0"></div>
+                            <div class="bg-[var(--color-surface-muted)] p-4 rounded-lg border border-[var(--color-line)] flex items-center gap-3">
+                                <div class="w-3 h-3 rounded-full bg-[var(--color-accent)] flex-shrink-0"></div>
                                 <div>
-                                    <p class="text-gray-500 dark:text-gray-400 text-xs">Documents</p>
-                                    <p class="font-semibold text-gray-900 dark:text-white">
+                                    <p class="text-[var(--color-ink-muted)] text-xs">Documents</p>
+                                    <p class="font-semibold text-[var(--color-ink)]">
                                         {storageStats ? formatBytes(storageStats.documents_size_bytes) : '...'}
                                     </p>
                                 </div>
                             </div>
-                            <div class="bg-gray-50 dark:bg-black/30 p-4 rounded-xl border border-gray-200 dark:border-white/10 flex items-center gap-3">
+                            <div class="bg-[var(--color-surface-muted)] p-4 rounded-lg border border-[var(--color-line)] flex items-center gap-3">
                                 <div class="w-3 h-3 rounded-full bg-purple-500 flex-shrink-0"></div>
                                 <div>
-                                    <p class="text-gray-500 dark:text-gray-400 text-xs">Images & Assets</p>
-                                    <p class="font-semibold text-gray-900 dark:text-white">
+                                    <p class="text-[var(--color-ink-muted)] text-xs">Images & assets</p>
+                                    <p class="font-semibold text-[var(--color-ink)]">
                                         {storageStats ? formatBytes(storageStats.files_size_bytes) : '...'}
                                     </p>
                                 </div>
@@ -602,33 +602,33 @@
             {/if}
 
             {#if activeSection === 'api-keys'}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] overflow-hidden">
                     <div class="p-6 sm:p-8">
                         <div class="flex items-center justify-between mb-2">
-                            <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
-                                <Icon icon="mdi:key-outline" class="text-2xl text-blue-500 dark:text-blue-400" />
+                            <h2 class="text-xl font-bold text-[var(--color-ink)] flex items-center gap-2">
+                                <Icon icon="mdi:key-outline" class="text-2xl text-[var(--color-accent)]" />
                                 API Keys
                             </h2>
                             <button
                                 onclick={() => { showCreateKeyForm = !showCreateKeyForm; createKeyError = ''; newlyCreatedKey = null; }}
-                                class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-semibold rounded-lg transition-colors {showCreateKeyForm ? 'bg-gray-200 dark:bg-white/10 text-gray-700 dark:text-gray-300' : 'bg-blue-600 hover:bg-blue-700 text-white shadow-sm'}"
+                                class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-semibold rounded-md transition-colors {showCreateKeyForm ? 'bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]' : 'bg-[var(--color-accent)] hover:opacity-90 text-white shadow-sm'}"
                             >
                                 <Icon icon={showCreateKeyForm ? 'mdi:close' : 'mdi:plus'} class="text-base" />
                                 {showCreateKeyForm ? 'Cancel' : 'New Key'}
                             </button>
                         </div>
-                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
-                            Use API keys to render Typst documents programmatically via <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">POST /v1/render</code>.
+                        <p class="text-sm text-[var(--color-ink-muted)] mb-4">
+                            Use API keys to render Typst documents programmatically via <code class="font-mono text-xs bg-[var(--color-surface-sunken)] px-1.5 py-0.5 rounded">POST /v1/render</code>.
                             Each key allows up to 60 requests/minute.
-                            <a href="/api-docs" class="text-blue-600 dark:text-blue-400 hover:underline ml-1">View API docs →</a>
+                            <a href="/api-docs" class="text-[var(--color-accent)] hover:underline ml-1">View API docs →</a>
                         </p>
 
-                        <div class="mb-6 p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-black/30">
+                        <div class="mb-6 p-4 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface-muted)]">
                             <div class="flex items-center justify-between mb-3">
-                                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                                <p class="text-xs font-semibold uppercase tracking-wide text-[var(--color-ink-muted)]">
                                     Requests — {usagePeriod === '1hr' ? 'Last 60 Min' : usagePeriod === '1day' ? 'Last 24 Hours' : 'Last 7 Days'}
                                     {#if usageData.length > 0}
-                                        <span class="ml-2 normal-case font-normal text-gray-400 dark:text-gray-500">
+                                        <span class="ml-2 normal-case font-normal text-[var(--color-ink-muted)]">
                                             ({usageData.reduce((s, p) => s + p.count, 0)} total)
                                         </span>
                                     {/if}
@@ -637,18 +637,18 @@
                                     {#each ([['1hr', '1 hr'], ['1day', '1 day'], ['1week', '1 week']] as const) as [val, label]}
                                         <button
                                             onclick={() => usagePeriod = val}
-                                            class="px-2 py-0.5 text-xs font-semibold rounded-md transition-colors {usagePeriod === val ? 'bg-blue-600 text-white' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-white/10'}"
+                                            class="px-2 py-0.5 text-xs font-semibold rounded-md transition-colors {usagePeriod === val ? 'bg-[var(--color-accent)] text-white' : 'text-[var(--color-ink-muted)] hover:bg-[var(--color-surface-sunken)]'}"
                                         >{label}</button>
                                     {/each}
                                 </div>
                             </div>
                             <div class="h-32">
                                 {#if usageLoading}
-                                    <div class="h-full flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">
+                                    <div class="h-full flex items-center justify-center text-[var(--color-ink-muted)] text-sm">
                                         <Icon icon="mdi:loading" class="animate-spin mr-2" /> Loading...
                                     </div>
                                 {:else if usageData.length === 0}
-                                    <div class="h-full flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">
+                                    <div class="h-full flex items-center justify-center text-[var(--color-ink-muted)] text-sm">
                                         No usage yet — make your first API call to see data here.
                                     </div>
                                 {:else}
@@ -658,24 +658,24 @@
                         </div>
 
                         {#if newlyCreatedKey}
-                            <div class="mb-6 p-4 rounded-xl border border-green-200 dark:border-green-700/50 bg-green-50 dark:bg-green-900/10">
+                            <div class="mb-6 p-4 rounded-lg border border-[var(--color-success)]/30 bg-[var(--color-success)]/10">
                                 <div class="flex items-start justify-between gap-4 mb-2">
                                     <div>
-                                        <p class="text-sm font-bold text-green-800 dark:text-green-300 flex items-center gap-2">
+                                        <p class="text-sm font-bold text-[var(--color-success)] flex items-center gap-2">
                                             <Icon icon="mdi:check-circle" class="text-lg" />
                                             Key created: {newlyCreatedKey.name}
                                         </p>
-                                        <p class="text-xs text-green-700 dark:text-green-400 mt-0.5">Copy this key now — it will not be shown again.</p>
+                                        <p class="text-xs text-[var(--color-success)] mt-0.5 opacity-90">Copy this key now — it will not be shown again.</p>
                                     </div>
-                                    <button onclick={() => newlyCreatedKey = null} class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200 flex-shrink-0">
+                                    <button onclick={() => newlyCreatedKey = null} class="text-[var(--color-success)] hover:opacity-70 flex-shrink-0">
                                         <Icon icon="mdi:close" class="text-lg" />
                                     </button>
                                 </div>
                                 <div class="flex items-center gap-2 mt-3">
-                                    <code class="flex-1 font-mono text-xs bg-white dark:bg-black/40 border border-green-200 dark:border-green-700/50 text-gray-800 dark:text-gray-200 px-3 py-2 rounded-lg break-all">{newlyCreatedKey.key}</code>
+                                    <code class="flex-1 font-mono text-xs bg-[var(--color-surface)] border border-[var(--color-success)]/30 text-[var(--color-ink)] px-3 py-2 rounded-md break-all">{newlyCreatedKey.key}</code>
                                     <button
                                         onclick={() => copyKey(newlyCreatedKey!.key)}
-                                        class="flex-shrink-0 flex items-center gap-1.5 px-3 py-2 text-sm font-semibold rounded-lg transition-colors {copiedKey ? 'bg-green-600 text-white' : 'bg-gray-200 dark:bg-white/10 hover:bg-gray-300 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300'}"
+                                        class="flex-shrink-0 flex items-center gap-1.5 px-3 py-2 text-sm font-semibold rounded-md transition-colors {copiedKey ? 'bg-[var(--color-success)] text-white' : 'bg-[var(--color-surface-sunken)] hover:opacity-90 text-[var(--color-ink-muted)]'}"
                                     >
                                         <Icon icon={copiedKey ? 'mdi:check' : 'mdi:content-copy'} class="text-base" />
                                         {copiedKey ? 'Copied!' : 'Copy'}
@@ -685,29 +685,30 @@
                         {/if}
 
                         {#if showCreateKeyForm}
-                            <form onsubmit={createApiKey} class="mb-6 p-4 rounded-xl border border-blue-200 dark:border-blue-800/50 bg-blue-50/50 dark:bg-blue-900/10 space-y-3">
-                                <h3 class="text-sm font-bold text-gray-900 dark:text-white flex items-center gap-2">
-                                    <Icon icon="mdi:key-plus" class="text-blue-500" />
+                            <form onsubmit={createApiKey} class="mb-6 p-4 rounded-lg border border-[var(--color-accent)]/30 bg-[var(--color-accent-soft)] space-y-3">
+                                <h3 class="text-sm font-bold text-[var(--color-ink)] flex items-center gap-2">
+                                    <Icon icon="mdi:key-plus" class="text-[var(--color-accent)]" />
                                     Create API Key
                                 </h3>
                                 {#if createKeyError}
-                                    <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 px-3 py-2 rounded-lg text-sm">{createKeyError}</div>
+                                    <div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] px-3 py-2 rounded-md text-sm">{createKeyError}</div>
                                 {/if}
                                 <div class="flex items-end gap-3">
                                     <div class="flex-1">
-                                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Key Name</label>
+                                        <label for="create-key-name" class="block text-xs font-medium text-[var(--color-ink-muted)] mb-1">Key name</label>
                                         <input
+                                            id="create-key-name"
                                             type="text"
                                             required
                                             bind:value={createKeyName}
                                             placeholder="e.g. My App, CI Pipeline"
-                                            class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                                            class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none transition-colors"
                                         />
                                     </div>
                                     <button
                                         type="submit"
                                         disabled={createKeyLoading || !createKeyName.trim()}
-                                        class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
+                                        class="flex items-center gap-2 px-4 py-2 bg-[var(--color-accent)] hover:opacity-90 disabled:opacity-50 text-white text-sm font-semibold rounded-md transition shadow-sm"
                                     >
                                         {#if createKeyLoading}
                                             <Icon icon="mdi:loading" class="animate-spin text-base" />
@@ -722,38 +723,38 @@
                         {/if}
 
                         {#if apiKeysError}
-                            <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-4">{apiKeysError}</div>
+                            <div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] p-3 rounded-md text-sm mb-4">{apiKeysError}</div>
                         {/if}
 
                         {#if apiKeysLoading}
-                            <div class="flex items-center justify-center py-12 text-gray-400 dark:text-gray-500">
+                            <div class="flex items-center justify-center py-12 text-[var(--color-ink-muted)]">
                                 <Icon icon="mdi:loading" class="animate-spin text-2xl mr-2" />
                                 Loading keys...
                             </div>
                         {:else if apiKeys.length === 0}
-                            <div class="text-center py-12 text-gray-400 dark:text-gray-500">
+                            <div class="text-center py-12 text-[var(--color-ink-muted)]">
                                 <Icon icon="mdi:key-outline" class="text-4xl mb-2 opacity-40" />
                                 <p class="text-sm">No API keys yet. Create one to get started.</p>
                             </div>
                         {:else}
                             <div class="space-y-2">
                                 {#each apiKeys as key (key.id)}
-                                    <div class="flex items-center gap-4 px-4 py-3 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-black/20">
-                                        <div class="h-9 w-9 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 flex-shrink-0">
+                                    <div class="flex items-center gap-4 px-4 py-3 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface-muted)]">
+                                        <div class="h-9 w-9 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center text-[var(--color-accent)] flex-shrink-0">
                                             <Icon icon="mdi:key" class="text-lg" />
                                         </div>
                                         <div class="flex-1 min-w-0">
-                                            <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{key.name}</p>
-                                            <p class="text-xs font-mono text-gray-500 dark:text-gray-400">{key.key_prefix}... · {key.rate_limit}/min</p>
+                                            <p class="text-sm font-semibold text-[var(--color-ink)] truncate">{key.name}</p>
+                                            <p class="text-xs font-mono text-[var(--color-ink-muted)]">{key.key_prefix}... · {key.rate_limit}/min</p>
                                         </div>
                                         <div class="text-right flex-shrink-0 hidden sm:block">
-                                            <p class="text-xs text-gray-400 dark:text-gray-500">Created {formatDate(key.created_at)}</p>
-                                            <p class="text-xs text-gray-400 dark:text-gray-500">{key.last_used_at ? `Last used ${formatDate(key.last_used_at)}` : 'Never used'}</p>
+                                            <p class="text-xs text-[var(--color-ink-muted)]">Created {formatDate(key.created_at)}</p>
+                                            <p class="text-xs text-[var(--color-ink-muted)]">{key.last_used_at ? `Last used ${formatDate(key.last_used_at)}` : 'Never used'}</p>
                                         </div>
                                         <div class="flex items-center gap-1 flex-shrink-0">
                                             {#if confirmRegenerateId === key.id}
                                                 <div class="flex items-center gap-1">
-                                                    <span class="text-xs text-gray-500 dark:text-gray-400">Regenerate?</span>
+                                                    <span class="text-xs text-[var(--color-ink-muted)]">Regenerate?</span>
                                                     <button
                                                         onclick={() => regenerateApiKey(key.id)}
                                                         disabled={regeneratingKeyId === key.id}
@@ -763,24 +764,24 @@
                                                     </button>
                                                     <button
                                                         onclick={() => confirmRegenerateId = null}
-                                                        class="text-xs px-2 py-1 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-white/10 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300 font-semibold transition-colors"
+                                                        class="text-xs px-2 py-1 rounded-md bg-[var(--color-surface-sunken)] hover:opacity-90 text-[var(--color-ink-muted)] font-semibold transition-colors"
                                                     >
                                                         No
                                                     </button>
                                                 </div>
                                             {:else if confirmDeleteKeyId === key.id}
                                                 <div class="flex items-center gap-1">
-                                                    <span class="text-xs text-gray-500 dark:text-gray-400">Delete?</span>
+                                                    <span class="text-xs text-[var(--color-ink-muted)]">Delete?</span>
                                                     <button
                                                         onclick={() => deleteApiKey(key.id)}
                                                         disabled={deletingKeyId === key.id}
-                                                        class="text-xs px-2 py-1 rounded-md bg-red-600 hover:bg-red-700 text-white font-semibold transition-colors disabled:opacity-50"
+                                                        class="text-xs px-2 py-1 rounded-md bg-[var(--color-danger)] hover:opacity-90 text-white font-semibold transition-colors disabled:opacity-50"
                                                     >
                                                         {deletingKeyId === key.id ? '...' : 'Yes'}
                                                     </button>
                                                     <button
                                                         onclick={() => confirmDeleteKeyId = null}
-                                                        class="text-xs px-2 py-1 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-white/10 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300 font-semibold transition-colors"
+                                                        class="text-xs px-2 py-1 rounded-md bg-[var(--color-surface-sunken)] hover:opacity-90 text-[var(--color-ink-muted)] font-semibold transition-colors"
                                                     >
                                                         No
                                                     </button>
@@ -789,14 +790,14 @@
                                                 <button
                                                     onclick={() => { confirmRegenerateId = key.id; confirmDeleteKeyId = null; }}
                                                     title="Regenerate key"
-                                                    class="p-1.5 rounded-lg text-gray-400 hover:text-amber-600 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 transition-colors"
+                                                    class="p-1.5 rounded-md text-[var(--color-ink-muted)] hover:text-amber-600 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 transition-colors"
                                                 >
                                                     <Icon icon="mdi:refresh" class="text-lg" />
                                                 </button>
                                                 <button
                                                     onclick={() => { confirmDeleteKeyId = key.id; confirmRegenerateId = null; }}
                                                     title="Revoke key"
-                                                    class="p-1.5 rounded-lg text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
+                                                    class="p-1.5 rounded-md text-[var(--color-ink-muted)] hover:text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10 transition-colors"
                                                 >
                                                     <Icon icon="mdi:delete-outline" class="text-lg" />
                                                 </button>
@@ -811,18 +812,18 @@
             {/if}
 
             {#if activeSection === 'admin' && $userStore?.is_admin}
-                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
+                <div class="bg-[var(--color-surface)] rounded-xl shadow-sm border border-[var(--color-line)] overflow-hidden">
                     <div class="p-6 sm:p-8">
                         <div class="flex items-center justify-between mb-6">
-                            <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                            <h2 class="text-xl font-bold text-[var(--color-ink)] flex items-center gap-2">
                                 <Icon icon="mdi:shield-crown-outline" class="text-2xl text-amber-500 dark:text-amber-400" />
                                 User Management
                             </h2>
                             <div class="flex items-center gap-3">
-                                <span class="text-sm text-gray-500 dark:text-gray-400">{adminUsers.length} user{adminUsers.length !== 1 ? 's' : ''}</span>
+                                <span class="text-sm text-[var(--color-ink-muted)]">{adminUsers.length} user{adminUsers.length !== 1 ? 's' : ''}</span>
                                 <button
                                     onclick={() => { showCreateForm = !showCreateForm; createError = ''; }}
-                                    class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-semibold rounded-lg transition-colors {showCreateForm ? 'bg-gray-200 dark:bg-white/10 text-gray-700 dark:text-gray-300' : 'bg-blue-600 hover:bg-blue-700 text-white shadow-sm'}"
+                                    class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-semibold rounded-md transition-colors {showCreateForm ? 'bg-[var(--color-surface-sunken)] text-[var(--color-ink-muted)]' : 'bg-[var(--color-accent)] hover:opacity-90 text-white shadow-sm'}"
                                 >
                                     <Icon icon={showCreateForm ? 'mdi:close' : 'mdi:account-plus-outline'} class="text-base" />
                                     {showCreateForm ? 'Cancel' : 'New User'}
@@ -831,52 +832,55 @@
                         </div>
 
                         {#if showCreateForm}
-                            <form onsubmit={createUser} class="mb-6 p-4 rounded-xl border border-blue-200 dark:border-blue-800/50 bg-blue-50/50 dark:bg-blue-900/10 space-y-3">
-                                <h3 class="text-sm font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
-                                    <Icon icon="mdi:account-plus-outline" class="text-blue-500" />
+                            <form onsubmit={createUser} class="mb-6 p-4 rounded-lg border border-[var(--color-accent)]/30 bg-[var(--color-accent-soft)] space-y-3">
+                                <h3 class="text-sm font-bold text-[var(--color-ink)] mb-3 flex items-center gap-2">
+                                    <Icon icon="mdi:account-plus-outline" class="text-[var(--color-accent)]" />
                                     Create New User
                                 </h3>
 
                                 {#if createError}
-                                    <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 px-3 py-2 rounded-lg text-sm">{createError}</div>
+                                    <div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] px-3 py-2 rounded-md text-sm">{createError}</div>
                                 {/if}
 
                                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                     <div>
-                                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
+                                        <label for="create-username" class="block text-xs font-medium text-[var(--color-ink-muted)] mb-1">Username</label>
                                         <input
+                                            id="create-username"
                                             type="text"
                                             required
                                             bind:value={createUsername}
                                             placeholder="username"
-                                            class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                                            class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none transition-colors"
                                         />
                                     </div>
                                     <div>
-                                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
+                                        <label for="create-email" class="block text-xs font-medium text-[var(--color-ink-muted)] mb-1">Email</label>
                                         <input
+                                            id="create-email"
                                             type="email"
                                             required
                                             bind:value={createEmail}
                                             placeholder="user@example.com"
-                                            class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                                            class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none transition-colors"
                                         />
                                     </div>
                                 </div>
                                 <div>
-                                    <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Temporary Password</label>
+                                    <label for="create-password" class="block text-xs font-medium text-[var(--color-ink-muted)] mb-1">Temporary password</label>
                                     <input
+                                        id="create-password"
                                         type="text"
                                         required
                                         bind:value={createPassword}
                                         placeholder="Set a password the user can change later"
-                                        class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors font-mono"
+                                        class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-3 py-2 text-sm focus:border-[var(--color-accent)] focus:outline-none transition-colors font-mono"
                                     />
                                 </div>
                                 <div class="flex items-center justify-between pt-1">
                                     <label class="flex items-center gap-2 cursor-pointer select-none">
                                         <input type="checkbox" bind:checked={createIsAdmin} class="w-4 h-4 rounded accent-amber-500" />
-                                        <span class="text-sm text-gray-700 dark:text-gray-300 flex items-center gap-1">
+                                        <span class="text-sm text-[var(--color-ink-muted)] flex items-center gap-1">
                                             <Icon icon="mdi:shield-crown-outline" class="text-amber-500 text-base" />
                                             Grant admin privileges
                                         </span>
@@ -884,7 +888,7 @@
                                     <button
                                         type="submit"
                                         disabled={createLoading}
-                                        class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
+                                        class="flex items-center gap-2 px-4 py-2 bg-[var(--color-accent)] hover:opacity-90 disabled:opacity-50 text-white text-sm font-semibold rounded-md transition shadow-sm"
                                     >
                                         {#if createLoading}
                                             <Icon icon="mdi:loading" class="animate-spin text-base" />
@@ -899,56 +903,56 @@
                         {/if}
 
                         {#if adminError}
-                            <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-4">{adminError}</div>
+                            <div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] p-3 rounded-md text-sm mb-4">{adminError}</div>
                         {/if}
 
                         {#if adminLoading}
-                            <div class="flex items-center justify-center py-12 text-gray-400 dark:text-gray-500">
+                            <div class="flex items-center justify-center py-12 text-[var(--color-ink-muted)]">
                                 <Icon icon="mdi:loading" class="animate-spin text-2xl mr-2" />
                                 Loading users...
                             </div>
                         {:else}
                             <div class="space-y-2">
                                 {#each adminUsers as user (user.id)}
-                                    <div class="flex items-center gap-4 px-4 py-3 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-black/20 group">
-                                        <div class="h-9 w-9 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 font-bold text-sm flex-shrink-0">
+                                    <div class="flex items-center gap-4 px-4 py-3 rounded-lg border border-[var(--color-line)] bg-[var(--color-surface-muted)] group">
+                                        <div class="h-9 w-9 rounded-full bg-[var(--color-accent-soft)] flex items-center justify-center text-[var(--color-accent)] font-bold text-sm flex-shrink-0">
                                             {user.username[0].toUpperCase()}
                                         </div>
                                         <div class="flex-1 min-w-0">
                                             <div class="flex items-center gap-2">
-                                                <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{user.username}</p>
+                                                <p class="text-sm font-semibold text-[var(--color-ink)] truncate">{user.username}</p>
                                                 {#if user.is_admin}
                                                     <span class="text-xs font-bold px-1.5 py-0.5 rounded-md bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-400 flex-shrink-0">Admin</span>
                                                 {/if}
                                                 {#if user.id === $userStore?.id}
-                                                    <span class="text-xs px-1.5 py-0.5 rounded-md bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-400 flex-shrink-0">You</span>
+                                                    <span class="text-xs px-1.5 py-0.5 rounded-md bg-[var(--color-accent-soft)] text-[var(--color-accent)] flex-shrink-0">You</span>
                                                 {/if}
                                             </div>
-                                            <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{user.email}</p>
+                                            <p class="text-xs text-[var(--color-ink-muted)] truncate">{user.email}</p>
                                         </div>
-                                        <p class="text-xs text-gray-400 dark:text-gray-500 flex-shrink-0 hidden sm:block">{formatDate(user.created_at)}</p>
+                                        <p class="text-xs text-[var(--color-ink-muted)] flex-shrink-0 hidden sm:block">{formatDate(user.created_at)}</p>
                                         <div class="flex items-center gap-2 flex-shrink-0">
                                             {#if user.id !== $userStore?.id}
                                                 <button
                                                     onclick={() => toggleAdmin(user)}
                                                     title={user.is_admin ? 'Revoke admin' : 'Grant admin'}
-                                                    class="p-1.5 rounded-lg transition-colors {user.is_admin ? 'text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10' : 'text-gray-400 hover:text-amber-600 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10'}"
+                                                    class="p-1.5 rounded-md transition-colors {user.is_admin ? 'text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10' : 'text-[var(--color-ink-muted)] hover:text-amber-600 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10'}"
                                                 >
                                                     <Icon icon={user.is_admin ? 'mdi:shield-crown' : 'mdi:shield-crown-outline'} class="text-lg" />
                                                 </button>
                                                 {#if confirmDeleteId === user.id}
                                                     <div class="flex items-center gap-1">
-                                                        <span class="text-xs text-gray-500 dark:text-gray-400">Delete?</span>
+                                                        <span class="text-xs text-[var(--color-ink-muted)]">Delete?</span>
                                                         <button
                                                             onclick={() => deleteUser(user.id)}
                                                             disabled={deletingUserId === user.id}
-                                                            class="text-xs px-2 py-1 rounded-md bg-red-600 hover:bg-red-700 text-white font-semibold transition-colors disabled:opacity-50"
+                                                            class="text-xs px-2 py-1 rounded-md bg-[var(--color-danger)] hover:opacity-90 text-white font-semibold transition-colors disabled:opacity-50"
                                                         >
                                                             {deletingUserId === user.id ? '...' : 'Yes'}
                                                         </button>
                                                         <button
                                                             onclick={() => confirmDeleteId = null}
-                                                            class="text-xs px-2 py-1 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-white/10 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300 font-semibold transition-colors"
+                                                            class="text-xs px-2 py-1 rounded-md bg-[var(--color-surface-sunken)] hover:opacity-90 text-[var(--color-ink-muted)] font-semibold transition-colors"
                                                         >
                                                             No
                                                         </button>
@@ -957,7 +961,7 @@
                                                     <button
                                                         onclick={() => confirmDeleteId = user.id}
                                                         title="Delete user"
-                                                        class="p-1.5 rounded-lg text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
+                                                        class="p-1.5 rounded-md text-[var(--color-ink-muted)] hover:text-[var(--color-danger)] hover:bg-[var(--color-danger)]/10 transition-colors"
                                                     >
                                                         <Icon icon="mdi:delete-outline" class="text-lg" />
                                                     </button>
diff --git a/src/routes/setup/+page.svelte b/src/routes/setup/+page.svelte
index e6d241a..16e21f6 100644
--- a/src/routes/setup/+page.svelte
+++ b/src/routes/setup/+page.svelte
@@ -51,84 +51,84 @@
     <title>Setup - TypstDrive</title>
 </svelte:head>
 
-<div class="min-h-screen flex items-center justify-center px-4 py-16">
+<div class="min-h-screen flex items-center justify-center px-4 py-16 bg-[var(--color-surface-muted)]">
     <div class="w-full max-w-md">
         <div class="text-center mb-8">
-            <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-blue-600 text-white mb-4 shadow-lg">
-                <Icon icon="mdi:shield-crown-outline" class="text-3xl" />
+            <div class="inline-flex items-center justify-center w-24 h-24 rounded-2xl bg-[var(--color-accent)] text-white mb-4 shadow-lg">
+                <img src="/favicon.png" alt="TypstDrive" class="h-14 w-14" />
             </div>
-            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Welcome to TypstDrive</h1>
-            <p class="mt-2 text-gray-500 dark:text-gray-400">Create your admin account to get started.</p>
+            <h1 class="text-3xl font-bold text-[var(--color-ink)]">Welcome to TypstDrive</h1>
+            <p class="mt-2 text-[var(--color-ink-muted)]">Create your admin account to get started.</p>
         </div>
 
-        <div class="bg-white dark:bg-black/20 rounded-2xl shadow-xl border border-gray-200 dark:border-white/10 p-8">
-            <div class="flex items-center gap-2 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 text-sm px-4 py-3 rounded-lg mb-6 border border-blue-200 dark:border-blue-800/50">
+        <div class="rounded-xl border border-[var(--color-line)] bg-[var(--color-surface)] p-8 shadow-xl">
+            <div class="flex items-center gap-2 bg-[var(--color-accent-soft)] text-[var(--color-accent)] text-sm px-4 py-3 rounded-md mb-6">
                 <Icon icon="mdi:information-outline" class="text-lg flex-shrink-0" />
                 <span>This is a one-time setup. The account you create here will have full admin privileges.</span>
             </div>
 
             {#if errorMsg}
-                <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 px-4 py-3 rounded-lg text-sm mb-5 border border-red-200 dark:border-red-800/50">
+                <div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] px-4 py-3 rounded-md text-sm mb-5 border border-[var(--color-danger)]/20">
                     {errorMsg}
                 </div>
             {/if}
 
             <form onsubmit={handleSetup} class="space-y-4">
                 <div>
-                    <label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Username</label>
+                    <label for="username" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Username</label>
                     <input
                         id="username"
                         type="text"
                         required
                         bind:value={username}
-                        class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                        class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2.5 focus:border-[var(--color-accent)] focus:outline-none transition-colors"
                         placeholder="admin"
                     />
                 </div>
                 <div>
-                    <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
+                    <label for="email" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Email</label>
                     <input
                         id="email"
                         type="email"
                         required
                         bind:value={email}
-                        class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                        class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2.5 focus:border-[var(--color-accent)] focus:outline-none transition-colors"
                         placeholder="admin@example.com"
                     />
                 </div>
                 <div>
-                    <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
+                    <label for="password" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Password</label>
                     <input
                         id="password"
                         type="password"
                         required
                         bind:value={password}
-                        class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                        class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2.5 focus:border-[var(--color-accent)] focus:outline-none transition-colors"
                         placeholder="Min. 8 characters"
                     />
                 </div>
                 <div>
-                    <label for="confirm-password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
+                    <label for="confirm-password" class="block text-sm font-medium text-[var(--color-ink-muted)] mb-1">Confirm password</label>
                     <input
                         id="confirm-password"
                         type="password"
                         required
                         bind:value={confirmPassword}
-                        class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                        class="w-full bg-[var(--color-surface)] border border-[var(--color-line)] text-[var(--color-ink)] rounded-md px-4 py-2.5 focus:border-[var(--color-accent)] focus:outline-none transition-colors"
                         placeholder="Repeat password"
                     />
                 </div>
                 <button
                     type="submit"
                     disabled={loading}
-                    class="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-60 text-white font-semibold py-2.5 rounded-lg transition-colors mt-2 shadow-sm"
+                    class="w-full flex items-center justify-center gap-2 bg-[var(--color-accent)] hover:opacity-90 disabled:opacity-60 text-white font-semibold py-2.5 rounded-md transition mt-2"
                 >
                     {#if loading}
                         <Icon icon="mdi:loading" class="animate-spin text-lg" />
                         Creating account...
                     {:else}
                         <Icon icon="mdi:shield-check-outline" class="text-lg" />
-                        Create Admin Account
+                        Create admin account
                     {/if}
                 </button>
             </form>
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8c7cc368651c735d8d3fc0cf0690f6ae10e5515f
GIT binary patch
literal 30294
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

literal 0
HcmV?d00001