Support device-token auth and file ids for realtime sync

Claude-Session: https://claude.ai/code/session_01PoLmSR1pFVyHf8i5b1rNWk

package.json

@@ -19,7 +19,7 @@
 		"@tailwindcss/forms": "^0.5.11",
 		"@tailwindcss/typography": "^0.5.20",
 		"@tailwindcss/vite": "^4.3.3",
-		"svelte": "^5.56.6",
+		"svelte": "^5.56.7",
 		"svelte-check": "^4.7.3",
 		"tailwindcss": "^4.3.3",
 		"typescript": "^5.9.3",

server/src/db/postgres.rs

@@ -1,6 +1,21 @@
 use sqlx::AnyPool;
 
 pub async fn init_schema(pool: &AnyPool) {
+    // Rename the legacy "space" tables/columns to the "project" vocabulary on
+    // existing databases. Best-effort: on a fresh database (or one already
+    // migrated) the old names don't exist, so these fail silently and the
+    // CREATE TABLE IF NOT EXISTS statements below take over.
+    let rename_migrations = [
+        "ALTER TABLE IF EXISTS spaces RENAME TO projects",
+        "ALTER TABLE IF EXISTS space_files RENAME TO project_files",
+        "ALTER TABLE IF EXISTS space_collaborators RENAME TO project_collaborators",
+        "ALTER TABLE IF EXISTS project_files RENAME COLUMN space_id TO project_id",
+        "ALTER TABLE IF EXISTS project_collaborators RENAME COLUMN space_id TO project_id",
+    ];
+    for stmt in &rename_migrations {
+        let _ = sqlx::query(stmt).execute(pool).await;
+    }
+
     let statements = [
         "CREATE TABLE IF NOT EXISTS users (
             id TEXT PRIMARY KEY,
@@ -105,7 +120,7 @@ pub async fn init_schema(pool: &AnyPool) {
             count INTEGER NOT NULL DEFAULT 1,
             PRIMARY KEY(key_id, minute)
         )",
-        "CREATE TABLE IF NOT EXISTS spaces (
+        "CREATE TABLE IF NOT EXISTS projects (
             id TEXT PRIMARY KEY,
             owner_id TEXT NOT NULL REFERENCES users(id),
             folder_id TEXT REFERENCES folders(id),
@@ -116,23 +131,23 @@ pub async fn init_schema(pool: &AnyPool) {
             created_at TEXT DEFAULT to_char(NOW(), 'YYYY-MM-DD HH24:MI:SS'),
             updated_at TEXT DEFAULT to_char(NOW(), 'YYYY-MM-DD HH24:MI:SS')
         )",
-        "CREATE TABLE IF NOT EXISTS space_files (
+        "CREATE TABLE IF NOT EXISTS project_files (
             id TEXT PRIMARY KEY,
-            space_id TEXT NOT NULL REFERENCES spaces(id) ON DELETE CASCADE,
+            project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
             path TEXT NOT NULL,
             kind TEXT NOT NULL DEFAULT 'text',
             content BYTEA,
             mime_type TEXT NOT NULL DEFAULT 'text/plain',
             created_at TEXT DEFAULT to_char(NOW(), 'YYYY-MM-DD HH24:MI:SS'),
-            UNIQUE(space_id, path)
+            UNIQUE(project_id, path)
         )",
-        "CREATE TABLE IF NOT EXISTS space_collaborators (
+        "CREATE TABLE IF NOT EXISTS project_collaborators (
             id TEXT PRIMARY KEY,
-            space_id TEXT NOT NULL REFERENCES spaces(id) ON DELETE CASCADE,
+            project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
             user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
             role TEXT NOT NULL,
             created_at TEXT DEFAULT to_char(NOW(), 'YYYY-MM-DD HH24:MI:SS'),
-            UNIQUE(space_id, user_id)
+            UNIQUE(project_id, user_id)
         )",
         "CREATE TABLE IF NOT EXISTS packages (
             id TEXT PRIMARY KEY,
@@ -181,7 +196,7 @@ pub async fn init_schema(pool: &AnyPool) {
         "ALTER TABLE documents ADD COLUMN IF NOT EXISTS public_role TEXT",
         "ALTER TABLE users ADD COLUMN IF NOT EXISTS is_admin BOOLEAN NOT NULL DEFAULT FALSE",
         "ALTER TABLE users ADD COLUMN IF NOT EXISTS created_at TEXT DEFAULT to_char(NOW(), 'YYYY-MM-DD HH24:MI:SS')",
-        "ALTER TABLE space_files ADD COLUMN IF NOT EXISTS updated_at TEXT DEFAULT to_char(NOW(), 'YYYY-MM-DD HH24:MI:SS')",
+        "ALTER TABLE project_files ADD COLUMN IF NOT EXISTS updated_at TEXT DEFAULT to_char(NOW(), 'YYYY-MM-DD HH24:MI:SS')",
     ];
     for stmt in &migrations {
         sqlx::query(stmt).execute(pool).await.unwrap_or_else(|_| Default::default());

server/src/db/sqlite.rs

@@ -6,6 +6,21 @@ pub async fn init_schema(pool: &AnyPool) {
         .await
         .expect("Failed to enable SQLite foreign keys");
 
+    // Rename the legacy "space" tables/columns to the "project" vocabulary on
+    // existing databases. Best-effort: on a fresh database (or one already
+    // migrated) the old names don't exist, so these fail silently and the
+    // CREATE TABLE IF NOT EXISTS statements below take over.
+    let rename_migrations = [
+        "ALTER TABLE spaces RENAME TO projects",
+        "ALTER TABLE space_files RENAME TO project_files",
+        "ALTER TABLE space_collaborators RENAME TO project_collaborators",
+        "ALTER TABLE project_files RENAME COLUMN space_id TO project_id",
+        "ALTER TABLE project_collaborators RENAME COLUMN space_id TO project_id",
+    ];
+    for stmt in &rename_migrations {
+        let _ = sqlx::query(stmt).execute(pool).await;
+    }
+
     let statements = [
         "CREATE TABLE IF NOT EXISTS users (
             id TEXT PRIMARY KEY,
@@ -110,7 +125,7 @@ pub async fn init_schema(pool: &AnyPool) {
             count INTEGER NOT NULL DEFAULT 1,
             PRIMARY KEY(key_id, minute)
         )",
-        "CREATE TABLE IF NOT EXISTS spaces (
+        "CREATE TABLE IF NOT EXISTS projects (
             id TEXT PRIMARY KEY,
             owner_id TEXT NOT NULL REFERENCES users(id),
             folder_id TEXT REFERENCES folders(id),
@@ -121,23 +136,23 @@ pub async fn init_schema(pool: &AnyPool) {
             created_at TEXT DEFAULT (strftime('%Y-%m-%d %H:%M:%S', 'now')),
             updated_at TEXT DEFAULT (strftime('%Y-%m-%d %H:%M:%S', 'now'))
         )",
-        "CREATE TABLE IF NOT EXISTS space_files (
+        "CREATE TABLE IF NOT EXISTS project_files (
             id TEXT PRIMARY KEY,
-            space_id TEXT NOT NULL REFERENCES spaces(id) ON DELETE CASCADE,
+            project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
             path TEXT NOT NULL,
             kind TEXT NOT NULL DEFAULT 'text',
             content BLOB,
             mime_type TEXT NOT NULL DEFAULT 'text/plain',
             created_at TEXT DEFAULT (strftime('%Y-%m-%d %H:%M:%S', 'now')),
-            UNIQUE(space_id, path)
+            UNIQUE(project_id, path)
         )",
-        "CREATE TABLE IF NOT EXISTS space_collaborators (
+        "CREATE TABLE IF NOT EXISTS project_collaborators (
             id TEXT PRIMARY KEY,
-            space_id TEXT NOT NULL REFERENCES spaces(id) ON DELETE CASCADE,
+            project_id TEXT NOT NULL REFERENCES projects(id) ON DELETE CASCADE,
             user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
             role TEXT NOT NULL,
             created_at TEXT DEFAULT (strftime('%Y-%m-%d %H:%M:%S', 'now')),
-            UNIQUE(space_id, user_id)
+            UNIQUE(project_id, user_id)
         )",
         "CREATE TABLE IF NOT EXISTS packages (
             id TEXT PRIMARY KEY,
@@ -185,7 +200,7 @@ pub async fn init_schema(pool: &AnyPool) {
     let migrations = [
         "ALTER TABLE users ADD COLUMN is_admin INTEGER NOT NULL DEFAULT 0",
         "ALTER TABLE users ADD COLUMN created_at TEXT DEFAULT (strftime('%Y-%m-%d %H:%M:%S', 'now'))",
-        "ALTER TABLE space_files ADD COLUMN updated_at TEXT DEFAULT (strftime('%Y-%m-%d %H:%M:%S', 'now'))",
+        "ALTER TABLE project_files ADD COLUMN updated_at TEXT DEFAULT (strftime('%Y-%m-%d %H:%M:%S', 'now'))",
     ];
     for stmt in &migrations {
         let _ = sqlx::query(stmt).execute(pool).await;

server/src/devices.rs

@@ -0,0 +1,256 @@
+use axum::{
+    extract::{
+        ws::{Message, WebSocket, WebSocketUpgrade},
+        Path, State,
+    },
+    http::{HeaderMap, StatusCode},
+    Json,
+};
+use axum_extra::extract::cookie::SignedCookieJar;
+use futures_util::{SinkExt, StreamExt};
+use serde::{Deserialize, Serialize};
+use sha2::{Digest, Sha256};
+use std::time::Duration;
+use tokio::sync::{broadcast, watch};
+use uuid::Uuid;
+
+use crate::AppState;
+
+fn hash_token(token: &str) -> String {
+    format!("{:x}", Sha256::digest(token.as_bytes()))
+}
+
+fn bearer_token(headers: &HeaderMap) -> Option<String> {
+    headers
+        .get("Authorization")
+        .and_then(|value| value.to_str().ok())
+        .filter(|value| value.starts_with("Bearer "))
+        .map(|value| value[7..].to_string())
+}
+
+fn get_user_id(jar: &SignedCookieJar) -> Option<String> {
+    jar.get("session_user_id").map(|c| c.value().to_string())
+}
+
+async fn authenticate_device(
+    state: &AppState,
+    headers: &HeaderMap,
+) -> Result<(String, String), (StatusCode, String)> {
+    let token = bearer_token(headers).ok_or((
+        StatusCode::UNAUTHORIZED,
+        "Missing Authorization header".to_string(),
+    ))?;
+
+    let row = sqlx::query_as::<_, (String, String)>(
+        "SELECT id, user_id FROM device_tokens WHERE token_hash = ?",
+    )
+    .bind(hash_token(&token))
+    .fetch_optional(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    let (device_id, user_id) = row.ok_or((
+        StatusCode::UNAUTHORIZED,
+        "Invalid device token".to_string(),
+    ))?;
+
+    Ok((user_id, device_id))
+}
+
+#[derive(Serialize, Deserialize, Clone)]
+pub struct DeviceEvent {
+    pub kind: String,
+    pub project_id: Option<String>,
+    pub document_id: Option<String>,
+}
+
+impl DeviceEvent {
+    pub fn project(project_id: &str) -> Self {
+        Self {
+            kind: "project".to_string(),
+            project_id: Some(project_id.to_string()),
+            document_id: None,
+        }
+    }
+
+    pub fn document(document_id: &str) -> Self {
+        Self {
+            kind: "document".to_string(),
+            project_id: None,
+            document_id: Some(document_id.to_string()),
+        }
+    }
+
+    pub fn structure() -> Self {
+        Self {
+            kind: "structure".to_string(),
+            project_id: None,
+            document_id: None,
+        }
+    }
+}
+
+pub async fn notify_devices(state: &AppState, user_id: &str, event: DeviceEvent) {
+    let events = state.device_events.lock().await;
+    if let Some(sender) = events.get(user_id) {
+        let _ = sender.send(event);
+    }
+}
+
+pub struct DevicePresence {
+    pub connected_since: String,
+    pub connection_id: String,
+    pub stop: watch::Sender<bool>,
+}
+
+pub async fn ws_handler(
+    State(state): State<AppState>,
+    headers: HeaderMap,
+    ws: WebSocketUpgrade,
+) -> Result<axum::response::Response, (StatusCode, String)> {
+    let (user_id, device_id) = authenticate_device(&state, &headers).await?;
+
+    Ok(ws.on_upgrade(move |socket| handle_socket(state, socket, user_id, device_id)))
+}
+
+async fn handle_socket(state: AppState, socket: WebSocket, user_id: String, device_id: String) {
+    let mut receiver = {
+        let mut events = state.device_events.lock().await;
+        let sender = events
+            .entry(user_id)
+            .or_insert_with(|| broadcast::channel(16).0)
+            .clone();
+        sender.subscribe()
+    };
+
+    let connection_id = Uuid::new_v4().to_string();
+    let (stop_tx, mut stop_rx) = watch::channel(false);
+
+    {
+        let mut presence = state.device_presence.lock().await;
+        presence.insert(
+            device_id.clone(),
+            DevicePresence {
+                connected_since: chrono::Utc::now().to_rfc3339(),
+                connection_id: connection_id.clone(),
+                stop: stop_tx,
+            },
+        );
+    }
+
+    let (mut sink, mut stream) = socket.split();
+    let mut heartbeat = tokio::time::interval(Duration::from_secs(20));
+    heartbeat.tick().await;
+
+    loop {
+        tokio::select! {
+            event = receiver.recv() => {
+                match event {
+                    Ok(event) => {
+                        let Ok(payload) = serde_json::to_string(&event) else { continue };
+                        if sink.send(Message::Text(payload.into())).await.is_err() {
+                            break;
+                        }
+                    }
+                    Err(broadcast::error::RecvError::Lagged(_)) => continue,
+                    Err(broadcast::error::RecvError::Closed) => break,
+                }
+            }
+            _ = heartbeat.tick() => {
+                if sink.send(Message::Ping(Vec::new().into())).await.is_err() {
+                    break;
+                }
+            }
+            incoming = stream.next() => {
+                match incoming {
+                    Some(Ok(Message::Close(_))) | None => break,
+                    Some(Err(_)) => break,
+                    _ => {}
+                }
+            }
+            _ = stop_rx.changed() => {
+                break;
+            }
+        }
+    }
+
+    let mut presence = state.device_presence.lock().await;
+    if presence
+        .get(&device_id)
+        .map(|entry| entry.connection_id == connection_id)
+        .unwrap_or(false)
+    {
+        presence.remove(&device_id);
+    }
+}
+
+#[derive(Serialize)]
+pub struct DeviceView {
+    pub id: String,
+    pub name: String,
+    pub created_at: String,
+    pub last_used_at: Option<String>,
+    pub connected: bool,
+    pub connected_since: Option<String>,
+}
+
+pub async fn list_devices(
+    State(state): State<AppState>,
+    jar: SignedCookieJar,
+) -> Result<Json<Vec<DeviceView>>, (StatusCode, String)> {
+    let user_id =
+        get_user_id(&jar).ok_or((StatusCode::UNAUTHORIZED, "Not authenticated".to_string()))?;
+
+    let rows = sqlx::query_as::<_, (String, String, String, Option<String>)>(
+        "SELECT id, name, created_at, last_used_at FROM device_tokens WHERE user_id = ? ORDER BY created_at DESC",
+    )
+    .bind(&user_id)
+    .fetch_all(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    let presence = state.device_presence.lock().await;
+
+    Ok(Json(
+        rows.into_iter()
+            .map(|(id, name, created_at, last_used_at)| {
+                let entry = presence.get(&id);
+                DeviceView {
+                    connected: entry.is_some(),
+                    connected_since: entry.map(|e| e.connected_since.clone()),
+                    id,
+                    name,
+                    created_at,
+                    last_used_at,
+                }
+            })
+            .collect(),
+    ))
+}
+
+pub async fn revoke_device(
+    State(state): State<AppState>,
+    jar: SignedCookieJar,
+    Path(id): Path<String>,
+) -> Result<StatusCode, (StatusCode, String)> {
+    let user_id =
+        get_user_id(&jar).ok_or((StatusCode::UNAUTHORIZED, "Not authenticated".to_string()))?;
+
+    let result = sqlx::query("DELETE FROM device_tokens WHERE id = ? AND user_id = ?")
+        .bind(&id)
+        .bind(&user_id)
+        .execute(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    if result.rows_affected() == 0 {
+        return Err((StatusCode::NOT_FOUND, "Device not found".to_string()));
+    }
+
+    let presence = state.device_presence.lock().await;
+    if let Some(entry) = presence.get(&id) {
+        let _ = entry.stop.send(true);
+    }
+
+    Ok(StatusCode::NO_CONTENT)
+}

server/src/handlers.rs

@@ -1,10 +1,11 @@
 use axum::{
-    extract::{Path, State, Multipart},
+    extract::{Path, Query, State, Multipart},
     http::{header, StatusCode},
     response::IntoResponse,
     Json,
 };
 use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
 use std::sync::Arc;
 use tokio::sync::{Mutex, RwLock};
 use yrs_axum::ws::AxumSink;
@@ -14,6 +15,7 @@ use yrs::{Doc, ReadTxn, Transact, Update};
 use yrs::updates::decoder::Decode;
 use futures_util::stream::{StreamExt, Stream};
 use crate::AppState;
+use crate::devices::{notify_devices, DeviceEvent};
 use crate::models::Document;
 
 pub struct ViewerFilterStream {
@@ -53,7 +55,7 @@ pub struct CompileRequest {
     #[serde(default)]
     pub text: Option<String>,
     pub document_id: Option<String>,
-    pub space_id: Option<String>,
+    pub project_id: Option<String>,
     #[serde(default)]
     pub files: Option<std::collections::HashMap<String, String>>,
 }
@@ -89,34 +91,52 @@ pub struct Diagnostic {
     pub to: Option<usize>,
 }
 
+struct YjsSaveTarget {
+    table: &'static str,
+    row_id: String,
+    owner_id: String,
+    event: DeviceEvent,
+}
+
 pub async fn yjs_handler(
     ws: axum::extract::ws::WebSocketUpgrade,
     Path(id): Path<String>,
+    Query(params): Query<HashMap<String, String>>,
     State(state): State<AppState>,
     jar: axum_extra::extract::cookie::SignedCookieJar,
 ) -> impl IntoResponse {
-    let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
+    let user_id_opt = match jar.get("session_user_id").map(|c| c.value().to_string()) {
+        Some(uid) => Some(uid),
+        None => match params.get("token") {
+            Some(token) => crate::desktop::user_id_for_token(&state, token).await,
+            None => None,
+        },
+    };
 
     let mut is_viewer = true;
     let mut initial_content: Option<Vec<u8>> = None;
-    // (table, row_id) the autosave task persists into; None means no persistence.
-    let mut save_target: Option<(&'static str, String)> = None;
+    let mut save_target: Option<YjsSaveTarget> = None;
 
-    if let Some(rest) = id.strip_prefix("space:") {
-        if let Some((space_id, file_id)) = rest.split_once(':') {
-            if let Some((_space, role)) = crate::spaces::space_role(&state, space_id, &user_id_opt).await {
+    if let Some(rest) = id.strip_prefix("project:") {
+        if let Some((project_id, file_id)) = rest.split_once(':') {
+            if let Some((project, role)) = crate::projects::project_role(&state, project_id, &user_id_opt).await {
                 is_viewer = role == "viewer";
                 if let Ok(Some((content,))) = sqlx::query_as::<_, (Option<Vec<u8>>,)>(
-                    "SELECT content FROM space_files WHERE id = ? AND space_id = ?"
+                    "SELECT content FROM project_files WHERE id = ? AND project_id = ?"
                 )
                 .bind(file_id)
-                .bind(space_id)
+                .bind(project_id)
                 .fetch_optional(&state.db)
                 .await
                 {
                     initial_content = content;
                 }
-                save_target = Some(("space_files", file_id.to_string()));
+                save_target = Some(YjsSaveTarget {
+                    table: "project_files",
+                    row_id: file_id.to_string(),
+                    owner_id: project.owner_id,
+                    event: DeviceEvent::project(project_id),
+                });
             }
         }
     } else {
@@ -148,8 +168,13 @@ pub async fn yjs_handler(
                 }
             }
             initial_content = d.content.clone();
+            save_target = Some(YjsSaveTarget {
+                table: "documents",
+                row_id: id.clone(),
+                owner_id: d.owner_id.clone(),
+                event: DeviceEvent::document(&id),
+            });
         }
-        save_target = Some(("documents", id.clone()));
     }
 
     let mut bcast_map = state.bcast_map.lock().await;
@@ -168,25 +193,38 @@ pub async fn yjs_handler(
         let new_bcast = Arc::new(BroadcastGroup::new(awareness.clone(), 10).await);
         bcast_map.insert(id.clone(), new_bcast.clone());
 
-        if let Some((table, row_id)) = save_target {
+        if let Some(target) = save_target {
             let save_db = state.db.clone();
             let save_awareness = awareness.clone();
+            let save_state = state.clone();
             tokio::spawn(async move {
                 let mut interval = tokio::time::interval(std::time::Duration::from_secs(5));
+                let mut last_content: Option<Vec<u8>> = None;
                 loop {
                     interval.tick().await;
                     let doc = save_awareness.read().await;
                     let content = doc.doc().transact().encode_state_as_update_v1(&yrs::StateVector::default());
-                    let query = if table == "space_files" {
-                        "UPDATE space_files SET content = ? WHERE id = ?"
+                    drop(doc);
+
+                    if last_content.as_ref() == Some(&content) {
+                        continue;
+                    }
+
+                    let query = if target.table == "project_files" {
+                        "UPDATE project_files SET content = ? WHERE id = ?"
                     } else {
                         "UPDATE documents SET content = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?"
                     };
-                    let _ = sqlx::query(query)
-                        .bind(content)
-                        .bind(&row_id)
+                    let result = sqlx::query(query)
+                        .bind(&content)
+                        .bind(&target.row_id)
                         .execute(&save_db)
                         .await;
+
+                    if result.is_ok() {
+                        last_content = Some(content);
+                        notify_devices(&save_state, &target.owner_id, target.event.clone()).await;
+                    }
                 }
             });
         }
@@ -222,8 +260,8 @@ pub async fn compile_handler(
     let mut can_save_thumbnail = false;
     let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
 
-    if let Some(space_id) = &payload.space_id {
-        let (space, role) = match crate::spaces::space_role(&state, space_id, &user_id_opt).await {
+    if let Some(project_id) = &payload.project_id {
+        let (project, role) = match crate::projects::project_role(&state, project_id, &user_id_opt).await {
             Some(v) => v,
             None => {
                 return Json(CompileResponse {
@@ -240,7 +278,7 @@ pub async fn compile_handler(
         };
 
         let overrides = payload.files.clone().unwrap_or_default();
-        let input = crate::spaces::assemble_project(&state, &space, overrides).await;
+        let input = crate::projects::assemble_project(&state, &project, overrides).await;
         let can_save = role == "owner" || role == "editor";
 
         let compiler = state.compiler.lock().await;
@@ -250,9 +288,9 @@ pub async fn compile_handler(
         return match result {
             Ok((svgs, thumbnail, stats)) => {
                 if can_save {
-                    let _ = sqlx::query("UPDATE spaces SET thumbnail_svg = ? WHERE id = ?")
+                    let _ = sqlx::query("UPDATE projects SET thumbnail_svg = ? WHERE id = ?")
                         .bind(&thumbnail)
-                        .bind(&space.id)
+                        .bind(&project.id)
                         .execute(&state.db)
                         .await;
                 }
@@ -430,11 +468,11 @@ pub async fn export_handler(
         }
     }
 
-    let input = if let Some(space_id) = &payload.space_id {
-        match crate::spaces::space_role(&state, space_id, &user_id_opt).await {
-            Some((space, _)) => {
+    let input = if let Some(project_id) = &payload.project_id {
+        match crate::projects::project_role(&state, project_id, &user_id_opt).await {
+            Some((project, _)) => {
                 let overrides = payload.files.clone().unwrap_or_default();
-                crate::spaces::assemble_project(&state, &space, overrides).await
+                crate::projects::assemble_project(&state, &project, overrides).await
             }
             None => return (StatusCode::UNAUTHORIZED, "Unauthorized").into_response(),
         }

server/src/main.rs

@@ -6,8 +6,10 @@ use axum_extra::extract::cookie::Key;
 use sqlx::AnyPool;
 use std::sync::Arc;
 use std::collections::HashMap;
-use tokio::sync::Mutex;
+use tokio::sync::{broadcast, Mutex};
 use yrs_axum::broadcast::BroadcastGroup;
+
+use devices::{DeviceEvent, DevicePresence};
 use tower_http::services::{ServeDir, ServeFile};
 use tower_http::trace::TraceLayer;
 use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
@@ -18,15 +20,16 @@ mod auth;
 mod compiler;
 mod db;
 mod desktop;
+mod devices;
 mod docs;
 mod folders;
 mod files;
 mod handlers;
 mod models;
 mod packages;
+mod projects;
 mod public_api;
 mod setup;
-mod spaces;
 mod world;
 mod collab;
 
@@ -43,6 +46,8 @@ pub struct AppState {
     pub key: Key,
     pub registration_enabled: bool,
     pub rate_limiter: RateLimiterMap,
+    pub device_presence: Arc<Mutex<HashMap<String, DevicePresence>>>,
+    pub device_events: Arc<Mutex<HashMap<String, broadcast::Sender<DeviceEvent>>>>,
 }
 
 impl axum::extract::FromRef<AppState> for Key {
@@ -93,6 +98,8 @@ async fn main() {
         key,
         registration_enabled,
         rate_limiter: Arc::new(Mutex::new(HashMap::new())),
+        device_presence: Arc::new(Mutex::new(HashMap::new())),
+        device_events: Arc::new(Mutex::new(HashMap::new())),
     };
 
     let api_routes = Router::new()
@@ -131,30 +138,37 @@ async fn main() {
         .route("/keys/usage", get(api_keys::get_aggregate_usage))
         .route("/keys/{id}", delete(api_keys::delete_key))
         .route("/keys/{id}/regenerate", post(api_keys::regenerate_key))
-        .route("/spaces/shared", get(spaces::list_shared_spaces))
-        .route("/spaces", get(spaces::list_spaces).post(spaces::create_space))
-        .route("/spaces/{id}", get(spaces::get_space).delete(spaces::delete_space).patch(spaces::update_space))
-        .route("/spaces/{id}/files", get(spaces::list_space_files).post(spaces::create_space_file))
-        .route("/spaces/{id}/files/upload", post(spaces::upload_space_file))
-        .route("/spaces/{id}/files/{fid}", get(spaces::get_space_file).patch(spaces::update_space_file).delete(spaces::delete_space_file))
+        .route("/projects/shared", get(projects::list_shared_projects))
+        .route("/projects", get(projects::list_projects).post(projects::create_project))
+        .route("/projects/{id}", get(projects::get_project).delete(projects::delete_project).patch(projects::update_project))
+        .route("/projects/{id}/files", get(projects::list_project_files).post(projects::create_project_file))
+        .route("/projects/{id}/files/upload", post(projects::upload_project_file))
+        .route("/projects/{id}/files/{fid}", get(projects::get_project_file).patch(projects::update_project_file).delete(projects::delete_project_file))
         .route("/packages", get(packages::list_packages))
         .route("/packages/publish", post(packages::publish_package))
-        .route("/packages/{name}", get(packages::list_versions).delete(packages::delete_package));
+        .route("/packages/{name}", get(packages::list_versions).delete(packages::delete_package))
+        .route("/devices", get(devices::list_devices))
+        .route("/devices/{id}", delete(devices::revoke_device));
 
     let desktop_routes = Router::new()
+        .route("/version", get(desktop::version_info))
         .route("/auth/login", post(desktop::login))
         .route("/auth/logout", post(desktop::logout))
         .route("/auth/me", get(desktop::me))
-        .route("/spaces", get(desktop::list_spaces).post(desktop::create_space))
-        .route("/spaces/{id}", get(desktop::pull_space).delete(desktop::delete_space))
-        .route("/spaces/{id}/manifest", get(desktop::get_manifest))
-        .route("/folders", get(desktop::list_folders))
-        .route("/documents", get(desktop::list_documents))
-        .route("/documents/{id}", get(desktop::pull_document).put(desktop::push_document))
+        .route("/projects", get(desktop::list_projects).post(desktop::create_project))
+        .route("/projects/{id}", get(desktop::pull_project).delete(desktop::delete_project).patch(desktop::move_project))
+        .route("/projects/{id}/manifest", get(desktop::get_manifest))
+        .route("/folders", get(desktop::list_folders).post(desktop::create_folder))
+        .route("/folders/{id}", patch(desktop::rename_folder).delete(desktop::delete_folder))
+        .route("/folders/{id}/move", patch(desktop::move_folder))
+        .route("/documents", get(desktop::list_documents).post(desktop::create_document))
+        .route("/documents/{id}", get(desktop::pull_document).put(desktop::push_document).delete(desktop::delete_document).patch(desktop::move_document))
         .route("/shared", get(desktop::list_shared))
-        .route("/files", get(desktop::list_account_files))
-        .route("/files/{id}", get(desktop::pull_account_file))
-        .route("/spaces/{id}/file", get(desktop::pull_file).put(desktop::push_file).delete(desktop::delete_file));
+        .route("/files", get(desktop::list_account_files).post(desktop::upload_account_file))
+        .route("/files/{id}", get(desktop::pull_account_file).patch(desktop::rename_account_file).delete(desktop::delete_account_file))
+        .route("/files/{id}/move", patch(desktop::move_account_file))
+        .route("/projects/{id}/file", get(desktop::pull_file).put(desktop::push_file).delete(desktop::delete_file))
+        .route("/ws", get(devices::ws_handler));
 
     let v1_routes = Router::new()
         .route("/render", post(public_api::render_handler));

server/src/models.rs

@@ -73,7 +73,7 @@ pub struct Document {
 }
 
 #[derive(Debug, Serialize, Deserialize, FromRow)]
-pub struct Space {
+pub struct Project {
     pub id: String,
     pub owner_id: String,
     pub folder_id: Option<String>,
@@ -89,9 +89,9 @@ pub struct Space {
 }
 
 #[derive(Debug, Serialize, Deserialize, FromRow)]
-pub struct SpaceFile {
+pub struct ProjectFile {
     pub id: String,
-    pub space_id: String,
+    pub project_id: String,
     pub path: String,
     pub kind: String,
     #[serde(skip_serializing)]
@@ -127,14 +127,14 @@ pub struct PackageVersion {
 }
 
 #[derive(Debug, Serialize, Deserialize)]
-pub struct CreateSpaceRequest {
+pub struct CreateProjectRequest {
     pub name: String,
     pub folder_id: Option<String>,
     pub template: Option<String>,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
-pub struct UpdateSpaceRequest {
+pub struct UpdateProjectRequest {
     pub name: Option<String>,
     pub folder_id: Option<String>,
     pub entrypoint: Option<String>,
@@ -142,20 +142,20 @@ pub struct UpdateSpaceRequest {
 }
 
 #[derive(Debug, Serialize, Deserialize)]
-pub struct CreateSpaceFileRequest {
+pub struct CreateProjectFileRequest {
     pub path: String,
     pub kind: Option<String>,
     pub content: Option<String>,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
-pub struct UpdateSpaceFileRequest {
+pub struct UpdateProjectFileRequest {
     pub path: String,
 }
 
 #[derive(Debug, Serialize, Deserialize)]
 pub struct PublishPackageRequest {
-    pub space_id: String,
+    pub project_id: String,
     pub version: Option<String>,
 }
 

server/src/packages.rs

@@ -8,8 +8,8 @@ use serde::Deserialize;
 use uuid::Uuid;
 
 use crate::{
-    models::{Package, PackageVersion, PublishPackageRequest, Space},
-    spaces::decode_text_blob,
+    models::{Package, PackageVersion, Project, PublishPackageRequest},
+    projects::decode_text_blob,
     AppState,
 };
 
@@ -45,20 +45,20 @@ pub async fn publish_package(
     let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    let space = sqlx::query_as::<_, Space>(
-        "SELECT id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at FROM spaces WHERE id = ? AND owner_id = ?"
+    let project = sqlx::query_as::<_, Project>(
+        "SELECT id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at FROM projects WHERE id = ? AND owner_id = ?"
     )
-    .bind(&payload.space_id)
+    .bind(&payload.project_id)
     .bind(&user_id)
     .fetch_optional(&state.db)
     .await
     .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
-    .ok_or((StatusCode::NOT_FOUND, "Space not found".to_string()))?;
+    .ok_or((StatusCode::NOT_FOUND, "Project not found".to_string()))?;
 
     let files = sqlx::query_as::<_, (String, String, Option<Vec<u8>>)>(
-        "SELECT path, kind, content FROM space_files WHERE space_id = ?"
+        "SELECT path, kind, content FROM project_files WHERE project_id = ?"
     )
-    .bind(&space.id)
+    .bind(&project.id)
     .fetch_all(&state.db)
     .await
     .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
@@ -78,7 +78,7 @@ pub async fn publish_package(
     }
 
     let manifest_text = manifest_text
-        .ok_or((StatusCode::BAD_REQUEST, "Space has no typst.toml manifest".to_string()))?;
+        .ok_or((StatusCode::BAD_REQUEST, "Project has no typst.toml manifest".to_string()))?;
     let manifest: Manifest = toml::from_str(&manifest_text)
         .map_err(|e| (StatusCode::BAD_REQUEST, format!("Invalid typst.toml: {}", e)))?;
 

server/src/projects.rs

@@ -13,9 +13,10 @@ use yrs::Update;
 
 use crate::{
     compiler::ProjectInput,
+    devices::{notify_devices, DeviceEvent},
     models::{
-        CreateSpaceFileRequest, CreateSpaceRequest, Space, SpaceFile, UpdateSpaceFileRequest,
-        UpdateSpaceRequest,
+        CreateProjectFileRequest, CreateProjectRequest, Project, ProjectFile, UpdateProjectFileRequest,
+        UpdateProjectRequest,
     },
     AppState,
 };
@@ -61,44 +62,44 @@ fn slugify(name: &str) -> String {
         .collect();
     let trimmed = slug.trim_matches('-').replace("--", "-");
     if trimmed.is_empty() {
-        "my-space".to_string()
+        "my-project".to_string()
     } else {
         trimmed
     }
 }
 
-pub async fn space_role(
+pub async fn project_role(
     state: &AppState,
-    space_id: &str,
+    project_id: &str,
     user_id_opt: &Option<String>,
-) -> Option<(Space, String)> {
-    let space = sqlx::query_as::<_, Space>(
-        "SELECT id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at FROM spaces WHERE id = ?"
+) -> Option<(Project, String)> {
+    let project = sqlx::query_as::<_, Project>(
+        "SELECT id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at FROM projects WHERE id = ?"
     )
-    .bind(space_id)
+    .bind(project_id)
     .fetch_optional(&state.db)
     .await
     .ok()??;
 
     if let Some(uid) = user_id_opt {
-        if &space.owner_id == uid {
-            return Some((space, "owner".to_string()));
+        if &project.owner_id == uid {
+            return Some((project, "owner".to_string()));
         }
         if let Ok(Some((role,))) = sqlx::query_as::<_, (String,)>(
-            "SELECT role FROM space_collaborators WHERE space_id = ? AND user_id = ?",
+            "SELECT role FROM project_collaborators WHERE project_id = ? AND user_id = ?",
         )
-        .bind(space_id)
+        .bind(project_id)
         .bind(uid)
         .fetch_optional(&state.db)
         .await
         {
-            return Some((space, role));
+            return Some((project, role));
         }
     }
 
-    if let Some(pr) = space.public_role.clone() {
+    if let Some(pr) = project.public_role.clone() {
         if pr == "viewer" || pr == "editor" {
-            return Some((space, pr));
+            return Some((project, pr));
         }
     }
 
@@ -128,17 +129,17 @@ pub async fn load_local_packages(state: &AppState) -> HashMap<String, HashMap<St
 
 pub async fn assemble_project(
     state: &AppState,
-    space: &Space,
+    project: &Project,
     overrides: HashMap<String, String>,
 ) -> ProjectInput {
     let mut files: HashMap<String, Vec<u8>> = HashMap::new();
 
     // Account-level uploaded files (fonts, images) come first as a base layer so
-    // they are available inside spaces; space files below override them by name.
+    // they are available inside projects; project files below override them by name.
     if let Ok(account_files) = sqlx::query_as::<_, (String, Vec<u8>)>(
         "SELECT name, data FROM files WHERE owner_id = ?",
     )
-    .bind(&space.owner_id)
+    .bind(&project.owner_id)
     .fetch_all(&state.db)
     .await
     {
@@ -148,9 +149,9 @@ pub async fn assemble_project(
     }
 
     let rows = sqlx::query_as::<_, (String, String, Option<Vec<u8>>)>(
-        "SELECT path, kind, content FROM space_files WHERE space_id = ?",
+        "SELECT path, kind, content FROM project_files WHERE project_id = ?",
     )
-    .bind(&space.id)
+    .bind(&project.id)
     .fetch_all(&state.db)
     .await
     .unwrap_or_default();
@@ -170,36 +171,36 @@ pub async fn assemble_project(
     }
 
     ProjectInput {
-        entrypoint: space.entrypoint.clone(),
+        entrypoint: project.entrypoint.clone(),
         files,
         packages: load_local_packages(state).await,
     }
 }
 
 #[derive(serde::Deserialize)]
-pub struct ListSpacesQuery {
+pub struct ListProjectsQuery {
     pub folder_id: Option<String>,
 }
 
-pub async fn list_spaces(
-    Query(query): Query<ListSpacesQuery>,
+pub async fn list_projects(
+    Query(query): Query<ListProjectsQuery>,
     State(state): State<AppState>,
     jar: SignedCookieJar,
-) -> Result<Json<Vec<Space>>, (StatusCode, String)> {
+) -> Result<Json<Vec<Project>>, (StatusCode, String)> {
     let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    let spaces = if let Some(folder_id) = query.folder_id {
-        sqlx::query_as::<_, Space>(
-            "SELECT id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at FROM spaces WHERE owner_id = ? AND folder_id = ? ORDER BY updated_at DESC"
+    let projects = if let Some(folder_id) = query.folder_id {
+        sqlx::query_as::<_, Project>(
+            "SELECT id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at FROM projects WHERE owner_id = ? AND folder_id = ? ORDER BY updated_at DESC"
         )
         .bind(&user_id)
         .bind(&folder_id)
         .fetch_all(&state.db)
         .await
     } else {
-        sqlx::query_as::<_, Space>(
-            "SELECT id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at FROM spaces WHERE owner_id = ? AND folder_id IS NULL ORDER BY updated_at DESC"
+        sqlx::query_as::<_, Project>(
+            "SELECT id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at FROM projects WHERE owner_id = ? AND folder_id IS NULL ORDER BY updated_at DESC"
         )
         .bind(&user_id)
         .fetch_all(&state.db)
@@ -207,45 +208,45 @@ pub async fn list_spaces(
     }
     .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
-    Ok(Json(spaces))
+    Ok(Json(projects))
 }
 
-pub async fn list_shared_spaces(
+pub async fn list_shared_projects(
     State(state): State<AppState>,
     jar: SignedCookieJar,
-) -> Result<Json<Vec<Space>>, (StatusCode, String)> {
+) -> Result<Json<Vec<Project>>, (StatusCode, String)> {
     let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    let spaces = sqlx::query_as::<_, Space>(
-        "SELECT s.id, s.owner_id, s.folder_id, s.name, s.entrypoint, s.thumbnail_svg, \
-         s.public_role, s.created_at, s.updated_at, c.role as effective_role \
-         FROM spaces s \
-         INNER JOIN space_collaborators c ON c.space_id = s.id AND c.user_id = ? \
-         ORDER BY s.updated_at DESC"
+    let projects = sqlx::query_as::<_, Project>(
+        "SELECT p.id, p.owner_id, p.folder_id, p.name, p.entrypoint, p.thumbnail_svg, \
+         p.public_role, p.created_at, p.updated_at, c.role as effective_role \
+         FROM projects p \
+         INNER JOIN project_collaborators c ON c.project_id = p.id AND c.user_id = ? \
+         ORDER BY p.updated_at DESC"
     )
     .bind(&user_id)
     .fetch_all(&state.db)
     .await
     .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
-    Ok(Json(spaces))
+    Ok(Json(projects))
 }
 
-pub async fn create_space(
+pub async fn create_project(
     State(state): State<AppState>,
     jar: SignedCookieJar,
-    Json(payload): Json<CreateSpaceRequest>,
-) -> Result<Json<Space>, (StatusCode, String)> {
+    Json(payload): Json<CreateProjectRequest>,
+) -> Result<Json<Project>, (StatusCode, String)> {
     let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    let space_id = Uuid::new_v4().to_string();
+    let project_id = Uuid::new_v4().to_string();
 
-    let space = sqlx::query_as::<_, Space>(
-        "INSERT INTO spaces (id, owner_id, folder_id, name, entrypoint) VALUES (?, ?, ?, ?, 'main.typ') RETURNING id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at"
+    let project = sqlx::query_as::<_, Project>(
+        "INSERT INTO projects (id, owner_id, folder_id, name, entrypoint) VALUES (?, ?, ?, ?, 'main.typ') RETURNING id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at"
     )
-    .bind(&space_id)
+    .bind(&project_id)
     .bind(&user_id)
     .bind(&payload.folder_id)
     .bind(&payload.name)
@@ -255,91 +256,93 @@ pub async fn create_space(
 
     let seeds = [
         ("typst.toml", default_manifest(&slugify(&payload.name))),
-        ("main.typ", "= New Space\n\nStart writing here.\n".to_string()),
+        ("main.typ", "= New Project\n\nStart writing here.\n".to_string()),
     ];
     for (path, content) in seeds {
         let _ = sqlx::query(
-            "INSERT INTO space_files (id, space_id, path, kind, content, mime_type) VALUES (?, ?, ?, 'text', ?, 'text/plain')"
+            "INSERT INTO project_files (id, project_id, path, kind, content, mime_type) VALUES (?, ?, ?, 'text', ?, 'text/plain')"
         )
         .bind(Uuid::new_v4().to_string())
-        .bind(&space_id)
+        .bind(&project_id)
         .bind(path)
         .bind(encode_text_blob(&content))
         .execute(&state.db)
         .await;
     }
 
-    Ok(Json(space))
+    Ok(Json(project))
 }
 
-pub async fn get_space(
+pub async fn get_project(
     State(state): State<AppState>,
     Path(id): Path<String>,
     jar: SignedCookieJar,
-) -> Result<Json<Space>, (StatusCode, String)> {
+) -> Result<Json<Project>, (StatusCode, String)> {
     let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
 
-    let (mut space, role) = space_role(&state, &id, &user_id_opt)
+    let (mut project, role) = project_role(&state, &id, &user_id_opt)
         .await
         .ok_or((StatusCode::UNAUTHORIZED, "Unauthorized".to_string()))?;
 
-    space.effective_role = Some(role);
-    Ok(Json(space))
+    project.effective_role = Some(role);
+    Ok(Json(project))
 }
 
-pub async fn update_space(
+pub async fn update_project(
     State(state): State<AppState>,
     Path(id): Path<String>,
     jar: SignedCookieJar,
-    Json(payload): Json<UpdateSpaceRequest>,
-) -> Result<Json<Space>, (StatusCode, String)> {
+    Json(payload): Json<UpdateProjectRequest>,
+) -> Result<Json<Project>, (StatusCode, String)> {
     let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    let mut space = sqlx::query_as::<_, Space>(
-        "SELECT id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at FROM spaces WHERE id = ? AND owner_id = ?"
+    let mut project = sqlx::query_as::<_, Project>(
+        "SELECT id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at FROM projects WHERE id = ? AND owner_id = ?"
     )
     .bind(&id)
     .bind(&user_id)
     .fetch_optional(&state.db)
     .await
     .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
-    .ok_or((StatusCode::NOT_FOUND, "Space not found".to_string()))?;
+    .ok_or((StatusCode::NOT_FOUND, "Project not found".to_string()))?;
 
     if let Some(name) = payload.name {
-        space.name = name;
+        project.name = name;
     }
     if let Some(entrypoint) = payload.entrypoint {
-        space.entrypoint = entrypoint;
+        project.entrypoint = entrypoint;
     }
     if let Some(folder_id) = payload.folder_id {
-        space.folder_id = if folder_id.is_empty() { None } else { Some(folder_id) };
+        project.folder_id = if folder_id.is_empty() { None } else { Some(folder_id) };
     }
     if let Some(public_role) = payload.public_role {
-        space.public_role = if public_role == "none" || public_role.is_empty() {
+        project.public_role = if public_role == "none" || public_role.is_empty() {
             None
         } else {
             Some(public_role)
         };
     }
 
-    let space = sqlx::query_as::<_, Space>(
-        "UPDATE spaces SET name = ?, entrypoint = ?, folder_id = ?, public_role = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ? AND owner_id = ? RETURNING id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at"
+    let project = sqlx::query_as::<_, Project>(
+        "UPDATE projects SET name = ?, entrypoint = ?, folder_id = ?, public_role = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ? AND owner_id = ? RETURNING id, owner_id, folder_id, name, entrypoint, thumbnail_svg, public_role, created_at, updated_at"
     )
-    .bind(&space.name)
-    .bind(&space.entrypoint)
-    .bind(&space.folder_id)
-    .bind(&space.public_role)
+    .bind(&project.name)
+    .bind(&project.entrypoint)
+    .bind(&project.folder_id)
+    .bind(&project.public_role)
     .bind(&id)
     .bind(&user_id)
     .fetch_one(&state.db)
     .await
     .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
-    Ok(Json(space))
+    notify_devices(&state, &user_id, DeviceEvent::structure()).await;
+
+    Ok(Json(project))
 }
 
-pub async fn delete_space(
+pub async fn delete_project(
     State(state): State<AppState>,
     Path(id): Path<String>,
     jar: SignedCookieJar,
@@ -347,12 +350,12 @@ pub async fn delete_space(
     let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
         .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
 
-    let _ = sqlx::query("DELETE FROM space_files WHERE space_id = ?")
+    let _ = sqlx::query("DELETE FROM project_files WHERE project_id = ?")
         .bind(&id)
         .execute(&state.db)
         .await;
 
-    let result = sqlx::query("DELETE FROM spaces WHERE id = ? AND owner_id = ?")
+    let result = sqlx::query("DELETE FROM projects WHERE id = ? AND owner_id = ?")
         .bind(&id)
         .bind(&user_id)
         .execute(&state.db)
@@ -360,24 +363,26 @@ pub async fn delete_space(
         .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
     if result.rows_affected() == 0 {
-        return Err((StatusCode::NOT_FOUND, "Space not found or unauthorized".to_string()));
+        return Err((StatusCode::NOT_FOUND, "Project not found or unauthorized".to_string()));
     }
 
+    notify_devices(&state, &user_id, DeviceEvent::structure()).await;
+
     Ok(StatusCode::NO_CONTENT)
 }
 
-pub async fn list_space_files(
+pub async fn list_project_files(
     State(state): State<AppState>,
     Path(id): Path<String>,
     jar: SignedCookieJar,
-) -> Result<Json<Vec<SpaceFile>>, (StatusCode, String)> {
+) -> Result<Json<Vec<ProjectFile>>, (StatusCode, String)> {
     let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
-    space_role(&state, &id, &user_id_opt)
+    project_role(&state, &id, &user_id_opt)
         .await
         .ok_or((StatusCode::UNAUTHORIZED, "Unauthorized".to_string()))?;
 
-    let files = sqlx::query_as::<_, SpaceFile>(
-        "SELECT id, space_id, path, kind, mime_type, created_at FROM space_files WHERE space_id = ? ORDER BY path ASC"
+    let files = sqlx::query_as::<_, ProjectFile>(
+        "SELECT id, project_id, path, kind, mime_type, created_at FROM project_files WHERE project_id = ? ORDER BY path ASC"
     )
     .bind(&id)
     .fetch_all(&state.db)
@@ -387,14 +392,14 @@ pub async fn list_space_files(
     Ok(Json(files))
 }
 
-pub async fn create_space_file(
+pub async fn create_project_file(
     State(state): State<AppState>,
     Path(id): Path<String>,
     jar: SignedCookieJar,
-    Json(payload): Json<CreateSpaceFileRequest>,
-) -> Result<Json<SpaceFile>, (StatusCode, String)> {
+    Json(payload): Json<CreateProjectFileRequest>,
+) -> Result<Json<ProjectFile>, (StatusCode, String)> {
     let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
-    let (_, role) = space_role(&state, &id, &user_id_opt)
+    let (project, role) = project_role(&state, &id, &user_id_opt)
         .await
         .ok_or((StatusCode::UNAUTHORIZED, "Unauthorized".to_string()))?;
     if role == "viewer" {
@@ -405,8 +410,8 @@ pub async fn create_space_file(
     let content = payload.content.unwrap_or_default();
     let file_id = Uuid::new_v4().to_string();
 
-    let file = sqlx::query_as::<_, SpaceFile>(
-        "INSERT INTO space_files (id, space_id, path, kind, content, mime_type) VALUES (?, ?, ?, ?, ?, 'text/plain') RETURNING id, space_id, path, kind, mime_type, created_at"
+    let file = sqlx::query_as::<_, ProjectFile>(
+        "INSERT INTO project_files (id, project_id, path, kind, content, mime_type) VALUES (?, ?, ?, ?, ?, 'text/plain') RETURNING id, project_id, path, kind, mime_type, created_at"
     )
     .bind(&file_id)
     .bind(&id)
@@ -417,17 +422,19 @@ pub async fn create_space_file(
     .await
     .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
 
+    notify_devices(&state, &project.owner_id, DeviceEvent::project(&id)).await;
+
     Ok(Json(file))
 }
 
-pub async fn upload_space_file(
+pub async fn upload_project_file(
     State(state): State<AppState>,
     Path(id): Path<String>,
     jar: SignedCookieJar,
     mut multipart: Multipart,
 ) -> Result<Json<serde_json::Value>, (StatusCode, String)> {
     let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
-    let (_, role) = space_role(&state, &id, &user_id_opt)
+    let (project, role) = project_role(&state, &id, &user_id_opt)
         .await
         .ok_or((StatusCode::UNAUTHORIZED, "Unauthorized".to_string()))?;
     if role == "viewer" {
@@ -449,8 +456,8 @@ pub async fn upload_space_file(
         };
 
         let _ = sqlx::query(
-            "INSERT INTO space_files (id, space_id, path, kind, content, mime_type) VALUES (?, ?, ?, ?, ?, ?) \
-             ON CONFLICT (space_id, path) DO UPDATE SET content = excluded.content, kind = excluded.kind, mime_type = excluded.mime_type"
+            "INSERT INTO project_files (id, project_id, path, kind, content, mime_type) VALUES (?, ?, ?, ?, ?, ?) \
+             ON CONFLICT (project_id, path) DO UPDATE SET content = excluded.content, kind = excluded.kind, mime_type = excluded.mime_type"
         )
         .bind(Uuid::new_v4().to_string())
         .bind(&id)
@@ -465,21 +472,23 @@ pub async fn upload_space_file(
         uploaded.push(path);
     }
 
+    notify_devices(&state, &project.owner_id, DeviceEvent::project(&id)).await;
+
     Ok(Json(serde_json::json!({ "files": uploaded })))
 }
 
-pub async fn get_space_file(
+pub async fn get_project_file(
     State(state): State<AppState>,
     Path((id, file_id)): Path<(String, String)>,
     jar: SignedCookieJar,
 ) -> Result<impl IntoResponse, (StatusCode, String)> {
     let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
-    space_role(&state, &id, &user_id_opt)
+    project_role(&state, &id, &user_id_opt)
         .await
         .ok_or((StatusCode::UNAUTHORIZED, "Unauthorized".to_string()))?;
 
     let file = sqlx::query_as::<_, (String, String, Option<Vec<u8>>)>(
-        "SELECT kind, mime_type, content FROM space_files WHERE id = ? AND space_id = ?"
+        "SELECT kind, mime_type, content FROM project_files WHERE id = ? AND project_id = ?"
     )
     .bind(&file_id)
     .bind(&id)
@@ -498,21 +507,21 @@ pub async fn get_space_file(
     }
 }
 
-pub async fn update_space_file(
+pub async fn update_project_file(
     State(state): State<AppState>,
     Path((id, file_id)): Path<(String, String)>,
     jar: SignedCookieJar,
-    Json(payload): Json<UpdateSpaceFileRequest>,
+    Json(payload): Json<UpdateProjectFileRequest>,
 ) -> Result<StatusCode, (StatusCode, String)> {
     let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
-    let (_, role) = space_role(&state, &id, &user_id_opt)
+    let (project, role) = project_role(&state, &id, &user_id_opt)
         .await
         .ok_or((StatusCode::UNAUTHORIZED, "Unauthorized".to_string()))?;
     if role == "viewer" {
         return Err((StatusCode::FORBIDDEN, "Read-only access".to_string()));
     }
 
-    let result = sqlx::query("UPDATE space_files SET path = ? WHERE id = ? AND space_id = ?")
+    let result = sqlx::query("UPDATE project_files SET path = ? WHERE id = ? AND project_id = ?")
         .bind(&payload.path)
         .bind(&file_id)
         .bind(&id)
@@ -524,23 +533,25 @@ pub async fn update_space_file(
         return Err((StatusCode::NOT_FOUND, "File not found".to_string()));
     }
 
+    notify_devices(&state, &project.owner_id, DeviceEvent::project(&id)).await;
+
     Ok(StatusCode::NO_CONTENT)
 }
 
-pub async fn delete_space_file(
+pub async fn delete_project_file(
     State(state): State<AppState>,
     Path((id, file_id)): Path<(String, String)>,
     jar: SignedCookieJar,
 ) -> Result<StatusCode, (StatusCode, String)> {
     let user_id_opt = jar.get("session_user_id").map(|c| c.value().to_string());
-    let (_, role) = space_role(&state, &id, &user_id_opt)
+    let (project, role) = project_role(&state, &id, &user_id_opt)
         .await
         .ok_or((StatusCode::UNAUTHORIZED, "Unauthorized".to_string()))?;
     if role == "viewer" {
         return Err((StatusCode::FORBIDDEN, "Read-only access".to_string()));
     }
 
-    let result = sqlx::query("DELETE FROM space_files WHERE id = ? AND space_id = ?")
+    let result = sqlx::query("DELETE FROM project_files WHERE id = ? AND project_id = ?")
         .bind(&file_id)
         .bind(&id)
         .execute(&state.db)
@@ -551,5 +562,7 @@ pub async fn delete_space_file(
         return Err((StatusCode::NOT_FOUND, "File not found".to_string()));
     }
 
+    notify_devices(&state, &project.owner_id, DeviceEvent::project(&id)).await;
+
     Ok(StatusCode::NO_CONTENT)
 }

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;
 }
+
+.scroll-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-line) transparent;
+}

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%

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" />

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>

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>

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"
+            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>

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>

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;
@@ -60,43 +60,34 @@
 		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">
+<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">Document Metadata</h3>
+			<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="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 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="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 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>
 
 
 		<section>
-				<h3 class="text-sm font-bold uppercase tracking-wider mb-4 border-b border-[var(--theme-border)] pb-2">Page Layout</h3>
+			<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="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">
+				<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>
@@ -104,41 +95,41 @@
 						<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 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="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 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="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 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="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 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="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 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 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>
+				<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-sm font-bold uppercase tracking-wider mb-4 border-b border-[var(--theme-border)] pb-2">Headers & Footers</h3>
+			<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="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">
+				<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>
@@ -147,25 +138,24 @@
 						<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 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="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 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 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)]">
+	{#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="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 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>
-		</div>
-	</div>
-</div>
+	{/snippet}
+</Modal>

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}

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>

src/lib/components/PublishPackageModal.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
+	import Modal from './Modal.svelte';
 
 	let {
-		spaceId,
+		projectId,
 		onClose
 	}: {
-		spaceId: string;
+		projectId: string;
 		onClose: () => void;
 	} = $props();
 
@@ -22,7 +23,7 @@
 			const res = await fetch('/api/packages/publish', {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ space_id: spaceId, version: version.trim() || undefined })
+				body: JSON.stringify({ project_id: projectId, version: version.trim() || undefined })
 			});
 			if (!res.ok) {
 				error = await res.text();
@@ -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>
-
-		<p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
-			Snapshots this space'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>.
+<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>
 
-		<label class="block text-sm font-medium mb-1" for="pkg-version">Version override (optional)</label>
+	<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 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"
+		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"
 	/>
 
 	{#if error}
-			<div class="text-sm text-red-600 dark:text-red-400 mb-3 break-words">{error}</div>
+		<div class="text-sm text-[var(--color-danger)] mt-2 break-words">{error}</div>
 	{/if}
 	{#if success}
-			<div class="text-sm text-green-600 dark:text-green-400 mb-3">{success}</div>
+		<div class="text-sm text-[var(--color-success)] mt-2">{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">
+	{#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>
-		</div>
-	</div>
-</div>
+	{/snippet}
+</Modal>

src/lib/components/ShareModal.svelte

@@ -2,6 +2,7 @@
     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 }>();
 
@@ -103,20 +104,12 @@
     }
 </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">
+<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>
                 <input
@@ -124,23 +117,23 @@
                     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"
+                    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-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>
+                <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="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]"
+                    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-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400'}">
+                <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>
@@ -148,31 +141,31 @@
         </div>
 
         {#if collabLoading}
-                <div class="flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500 py-1">
+            <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-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>
+            <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-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">
+                        <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-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>
+                            <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-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'}">
+                        <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 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"
+                            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" />
@@ -185,43 +178,42 @@
             </div>
         {/if}
 
-            <div class="h-px bg-gray-200 dark:bg-zinc-800/50"></div>
+        <div class="h-px bg-[var(--color-line)]"></div>
 
-            <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">
+        <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-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>
+                    <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="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 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>
 
-        <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);">
+    {#snippet footer()}
         <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"
+            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-lg" />
+                <Icon icon="mdi:check" class="text-base" />
                 <span>Link copied!</span>
             {:else}
-                    <Icon icon="mdi:link-variant" class="text-lg" />
+                <Icon icon="mdi:link-variant" class="text-base" />
                 <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">
+        <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>
-        </div>
-    </div>
-</div>
+    {/snippet}
+</Modal>

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"
+    <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)}
             >
-        {#each themeOptions as opt}
-            <option class="bg-[var(--theme-bg)] text-[var(--theme-text)]" value={opt.name}>{opt.name}</option>
+                <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>

src/lib/components/Toolbar.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { exportTypst } from '../ts/typst-api';
 	import { text } from '../ts/yjs-setup';
-	import { connectionStatus, connectedUsers, themeStore, darkModeStore, editorViewStore, documentZoomStore, commentsSidebarOpen, versionHistoryOpen, triggerLspReconnect, documentStatsStore, previewOpenStore } from '../ts/store';
+	import { connectionStatus, connectedUsers, editorViewStore, documentZoomStore, commentsSidebarOpen, versionHistoryOpen, triggerLspReconnect, documentStatsStore, previewOpenStore } from '../ts/store';
 	import { themes } from '../ts/themes';
 	import { goto } from '$app/navigation';
 	import ShareModal from './ShareModal.svelte';
 	import PageSettingsModal from './PageSettingsModal.svelte';
-	import ThemePicker from './ThemePicker.svelte';
 	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 +350,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 +402,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 +411,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 +454,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}
@@ -492,11 +493,6 @@
 								<button onclick={() => { activeMenu = null; $versionHistoryOpen = true; }} 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">
 									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">
-									Dark Mode
-									<Icon icon={$darkModeStore ? "mdi:check" : ""} class="text-sm" />
-								</button>
 							</div>
 						{/if}
 					</div>
@@ -510,7 +506,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 +518,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 +540,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 +548,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 +576,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 +603,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 +662,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,34 +676,28 @@
 			{/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">
+		<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-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"
+				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"
+				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="flex items-center gap-2">
-			<ThemePicker />
-		</div>
-
 		<div class="flex-grow"></div>
 
 
@@ -735,105 +725,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>
-			</div>
-			<div class="p-6 space-y-4">
+	<Modal title={docInfo?.title || title} icon="ph:file-text" onclose={() => showInfoModal = false}>
+		<div class="flex flex-col gap-4 text-xs">
 			<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)]">Type</p>
+				<p class="text-sm text-[var(--color-ink)] capitalize">Document</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>
+					<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}
 			{#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>
+					<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 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">
+
+		{#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>
-			</div>
-		</div>
-	</div>
+		{/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"
+	<PromptModal
+		title="Rename"
+		label="New name"
+		icon="ph:pencil-simple"
+		value={renameTitle}
+		confirmLabel="Save"
+		onsubmit={submitRename}
+		onclose={() => showRenameModal = false}
 	/>
-				</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>
 {/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}

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">

src/lib/components/dashboard/CreateDocModal.svelte

@@ -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>

src/lib/components/dashboard/CreateFolderModal.svelte

@@ -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>

src/lib/components/dashboard/CreateSpaceModal.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-    import Icon from '@iconify/svelte';
-    let { createSpace, onClose } = $props<{
-        createSpace: (name: string) => void,
-        onClose: () => void
-    }>();
-
-    let newSpaceName = $state('Untitled Space');
-
-    function onSubmit(e: Event) {
-        e.preventDefault();
-        createSpace(newSpaceName);
-    }
-</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-space-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-space-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 Space
-            </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="space-name-input" class="text-sm font-medium text-gray-700 dark:text-gray-300 block">Space Name</label>
-                <input
-                    id="space-name-input"
-                    type="text"
-                    required
-                    bind:value={newSpaceName}
-                    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 Space"
-                />
-                <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>

src/lib/components/dashboard/DeleteModal.svelte

@@ -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>

src/lib/components/dashboard/DocCard.svelte

@@ -32,7 +32,7 @@
 </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(`/doc/${doc.id}`)}
@@ -41,13 +41,13 @@
     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}
@@ -56,34 +56,34 @@
 
     <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"
+                    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>

src/lib/components/dashboard/FileCard.svelte

@@ -16,7 +16,7 @@
 </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'}" 
+    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}
@@ -25,7 +25,7 @@
     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>

src/lib/components/dashboard/FolderRow.svelte

@@ -12,7 +12,7 @@
 </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'}" 
+    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)}
@@ -21,12 +21,12 @@
     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>
+    <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-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">
+    <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>

src/lib/components/dashboard/InfoModal.svelte

@@ -1,41 +1,39 @@
 <script lang="ts">
-    import Icon from '@iconify/svelte';
+    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>
-        </div>
-        <div class="p-6 space-y-4">
+<Modal {title} {icon} onclose={onClose}>
+    <div class="flex flex-col gap-4 text-xs">
         <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)]">Type</p>
+            <p class="text-sm capitalize text-[var(--color-ink)]">{selectedInfo.type}</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>
+            <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">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>
+                <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>
         {/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">
+
+    {#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>
-        </div>
-    </div>
-</div>
+    {/snippet}
+</Modal>

src/lib/components/dashboard/Navbar.svelte

@@ -11,46 +11,45 @@
     }
 </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-4 py-2 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200">
+    <h1 class="text-lg font-bold text-[var(--color-ink)] flex items-center gap-2">
+        <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-[var(--color-accent)]">
+            <img src="/favicon.png" alt="TypstDrive" class="h-6 w-6" />
+        </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">
-            <Icon icon="mdi:account-circle" class="text-xl" />
+    <div class="flex items-center gap-3">
+        <div class="flex items-center gap-1.5 text-[var(--color-ink-muted)] font-medium text-sm">
+            <Icon icon="mdi:account-circle" class="text-lg" />
             {$userStore?.username}
         </div>
-        <div class="h-6 w-px bg-gray-300 dark:bg-white/20"></div>
+        <div class="h-5 w-px bg-[var(--color-line)]"></div>
 
-        <a href="/spaces" 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="Spaces">
-            <Icon icon="mdi:folder-multiple-outline" class="text-xl" />
+        <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-2 py-1.5 rounded-md flex items-center gap-2" title="Projects">
+            <Icon icon="mdi:folder-multiple-outline" class="text-lg" />
         </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">
-            <Icon icon="mdi:package-variant-closed" class="text-xl" />
+        <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-2 py-1.5 rounded-md flex items-center gap-2" title="Packages">
+            <Icon icon="mdi:package-variant-closed" class="text-lg" />
         </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">
-            <Icon icon="mdi:api" class="text-xl" />
+        <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-2 py-1.5 rounded-md flex items-center gap-2" title="API Docs">
+            <Icon icon="mdi:api" class="text-lg" />
         </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">
-            <Icon icon="mdi:book-open-page-variant-outline" class="text-xl" />
+        <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-2 py-1.5 rounded-md flex items-center gap-2" title="Typst Docs">
+            <Icon icon="mdi:book-open-page-variant-outline" class="text-lg" />
         </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">
-            <Icon icon="mdi:earth" class="text-xl" />
+        <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-2 py-1.5 rounded-md flex items-center gap-2" title="Typst Universe">
+            <Icon icon="mdi:earth" class="text-lg" />
         </a>
-        <div class="h-6 w-px bg-gray-300 dark:bg-white/20"></div>
-        
+        <div class="h-5 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">
-            <Icon icon="mdi:cog" class="text-2xl" />
+        <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-2 py-1.5 rounded-md flex items-center gap-2" title="Settings">
+            <Icon icon="mdi:cog" class="text-lg" />
         </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">
-            <Icon icon="mdi:logout" class="text-lg" />
-            Logout
+        <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-3 py-1.5 rounded-md flex items-center gap-2" title="Logout">
+            <Icon icon="mdi:logout" class="text-base" />
         </button>
     </div>
 </nav>

src/lib/components/dashboard/ProjectCard.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    import Icon from '@iconify/svelte';
+    import { goto } from '$app/navigation';
+
+    let { project, activeMenu, setActiveMenu, openInfo, openRename, deleteProject } = $props<{
+        project: any;
+        activeMenu: string | null;
+        setActiveMenu: (id: string | null) => void;
+        openInfo: (project: any) => void;
+        openRename: (id: string, name: string) => void;
+        deleteProject: (id: string, name: string) => void;
+    }>();
+
+    let dropUp = $state(false);
+
+    function toggleMenu(e: MouseEvent) {
+        e.stopPropagation();
+        if (activeMenu === project.id) {
+            setActiveMenu(null);
+        } else {
+            const button = e.currentTarget as HTMLElement;
+            const rect = button.getBoundingClientRect();
+            dropUp = window.innerHeight - rect.bottom < 200;
+            setActiveMenu(project.id);
+        }
+    }
+</script>
+
+<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(`/project/${project.id}`)}
+    onkeydown={(e) => e.key === 'Enter' && goto(`/project/${project.id}`)}
+>
+    <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-[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}
+    </div>
+
+    <div class="p-4 flex flex-col flex-grow">
+        <div class="flex items-start justify-between">
+            <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-[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(--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-[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-[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-[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>
+                    </div>
+                {/if}
+            </div>
+        </div>
+        <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>
+    </div>
+</div>

src/lib/components/dashboard/RenameModal.svelte

@@ -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>

src/lib/components/dashboard/SpaceCard.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-    import Icon from '@iconify/svelte';
-    import { goto } from '$app/navigation';
-
-    let { space, activeMenu, setActiveMenu, openInfo, openRename, deleteSpace } = $props<{
-        space: any;
-        activeMenu: string | null;
-        setActiveMenu: (id: string | null) => void;
-        openInfo: (space: any) => void;
-        openRename: (id: string, name: string) => void;
-        deleteSpace: (id: string, name: string) => void;
-    }>();
-
-    let dropUp = $state(false);
-
-    function toggleMenu(e: MouseEvent) {
-        e.stopPropagation();
-        if (activeMenu === space.id) {
-            setActiveMenu(null);
-        } else {
-            const button = e.currentTarget as HTMLElement;
-            const rect = button.getBoundingClientRect();
-            dropUp = window.innerHeight - rect.bottom < 200;
-            setActiveMenu(space.id);
-        }
-    }
-</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(`/space/${space.id}`)}
-    onkeydown={(e) => e.key === 'Enter' && goto(`/space/${space.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">
-        {#if space.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(space.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">
-                <Icon icon="mdi:folder-multiple-outline" 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={space.name}>{space.name}</h3>
-
-            <div class="relative action-menu-container">
-                <button aria-label="Space 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">
-                    <Icon icon="mdi:dots-vertical" class="text-xl" />
-                </button>
-
-                {#if activeMenu === space.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(space); }} 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">
-                            <Icon icon="mdi:information-outline" class="text-lg text-blue-500" />
-                            View Info
-                        </button>
-                        <button onclick={(e) => { e.stopPropagation(); openRename(space.id, space.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">
-                            <Icon icon="mdi:pencil-outline" class="text-lg text-yellow-500" />
-                            Rename
-                        </button>
-                        <button onclick={(e) => { e.stopPropagation(); goto(`/space/${space.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">
-                            <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(); deleteSpace(space.id, space.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">
-                            <Icon icon="mdi:trash-can-outline" class="text-lg" />
-                            Delete
-                        </button>
-                    </div>
-                {/if}
-            </div>
-        </div>
-        <p class="text-xs text-gray-500 dark:text-gray-400 flex items-center gap-1 mt-2 pointer-events-none">
-            <Icon icon="mdi:clock-outline" class="text-sm" />
-            Edited {new Date(space.updated_at.endsWith('Z') ? space.updated_at : space.updated_at + 'Z').toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}
-        </p>
-    </div>
-</div>

src/lib/components/project/FileTree.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 
-	interface SpaceFile {
+	interface ProjectFile {
 		id: string;
 		path: string;
 		kind: string;
@@ -19,16 +19,16 @@
 		onDelete,
 		onSetEntry
 	}: {
-		files?: SpaceFile[];
+		files?: ProjectFile[];
 		activeFileId?: string;
 		entrypoint?: string;
 		readOnly?: boolean;
-		onSelect: (file: SpaceFile) => void;
+		onSelect: (file: ProjectFile) => void;
 		onCreate: (path: string) => void;
 		onUpload: (fileList: FileList) => void;
-		onRename: (file: SpaceFile, path: string) => void;
-		onDelete: (file: SpaceFile) => void;
-		onSetEntry: (file: SpaceFile) => void;
+		onRename: (file: ProjectFile, path: string) => void;
+		onDelete: (file: ProjectFile) => void;
+		onSetEntry: (file: ProjectFile) => void;
 	} = $props();
 
 	let fileInput: HTMLInputElement = $state()!;
@@ -48,21 +48,21 @@
 		if (path && path.trim()) onCreate(path.trim());
 	}
 
-	function handleRename(file: SpaceFile) {
+	function handleRename(file: ProjectFile) {
 		const path = prompt('Rename file to:', file.path);
 		if (path && path.trim() && path.trim() !== file.path) onRename(file, path.trim());
 	}
 </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>

src/lib/components/project/ProjectToolbar.svelte

@@ -4,19 +4,20 @@
 	import { undo, redo } from '@codemirror/commands';
 	import {
 		connectedUsers,
-		darkModeStore,
 		editorViewStore,
 		documentZoomStore,
 		previewOpenStore
 	} from '../../ts/store';
-	import { exportSpace } from '../../ts/typst-api';
-	import ThemePicker from '../ThemePicker.svelte';
+	import { exportProject } from '../../ts/typst-api';
 	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 {
-		spaceName = 'Space',
-		spaceId,
+		projectName = 'Project',
+		projectId,
 		entrypoint = 'main.typ',
 		role = 'owner',
 		activeText = null,
@@ -25,8 +26,8 @@
 		onPublish,
 		onFilesChanged
 	}: {
-		spaceName?: string;
-		spaceId: string;
+		projectName?: string;
+		projectId: string;
 		entrypoint?: string;
 		role?: string;
 		activeText?: any;
@@ -55,10 +56,10 @@
 	let showDeleteModal = $state(false);
 	let renameName = $state('');
 
-	$effect(() => { renameName = spaceName; });
+	$effect(() => { renameName = projectName; });
 
 	function safeName() {
-		return spaceName.replace(/[^a-z0-9_-]/gi, '_');
+		return projectName.replace(/[^a-z0-9_-]/gi, '_');
 	}
 
 	function handleExport(format: 'pdf' | 'png' | 'svg' | 'typ') {
@@ -73,7 +74,7 @@
 			URL.revokeObjectURL(url);
 			return;
 		}
-		exportSpace(spaceId, getAllText(), format, safeName()).catch((e) => {
+		exportProject(projectId, getAllText(), format, safeName()).catch((e) => {
 			console.error(`Export to ${format} failed:`, e);
 			alert(`Failed to export as ${format.toUpperCase()}`);
 		});
@@ -83,7 +84,7 @@
 		fetch(`/api/export/pdf`, {
 			method: 'POST',
 			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ space_id: spaceId, files: getAllText() })
+			body: JSON.stringify({ project_id: projectId, files: getAllText() })
 		})
 			.then((res) => {
 				if (!res.ok) throw new Error('Print failed');
@@ -225,7 +226,7 @@
 		const file = target.files[0];
 		const form = new FormData();
 		form.append('file', file);
-		fetch(`/api/spaces/${spaceId}/files/upload`, { method: 'POST', body: form })
+		fetch(`/api/projects/${projectId}/files/upload`, { method: 'POST', body: form })
 			.then((res) => res.json())
 			.then(() => {
 				const lower = file.name.toLowerCase();
@@ -257,21 +258,20 @@
 		return name.substring(0, 2).toUpperCase();
 	}
 
-	function submitRename(e: Event) {
-		e.preventDefault();
-		if (renameName && renameName !== spaceName) {
-			fetch(`/api/spaces/${spaceId}`, {
+	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;
 	}
 
 	function confirmDelete() {
-		fetch(`/api/spaces/${spaceId}`, { method: 'DELETE' }).then((res) => {
-			if (res.ok) goto('/spaces');
+		fetch(`/api/projects/${projectId}`, { method: 'DELETE' }).then((res) => {
+			if (res.ok) goto('/projects');
 		});
 	}
 
@@ -289,26 +289,26 @@
 <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('/spaces')} 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="Spaces">
+			<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={spaceName}>{spaceName}</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'}
 							<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] max-h-[calc(100vh-8rem)] overflow-y-auto">
-								<button onclick={() => { activeMenu = null; goto('/spaces'); }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)]">All Spaces</button>
-								<button onclick={() => { activeMenu = null; showInfoModal = true; }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)]">Space Info</button>
+								<button onclick={() => { activeMenu = null; goto('/projects'); }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)]">All Projects</button>
+								<button onclick={() => { activeMenu = null; showInfoModal = true; }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)]">Project Info</button>
 								{#if !isViewer}
 									<div class="h-px bg-[var(--theme-border)] my-1"></div>
-									<button onclick={() => { activeMenu = null; renameName = spaceName; showRenameModal = true; }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)]">Rename</button>
+									<button onclick={() => { activeMenu = null; renameName = projectName; showRenameModal = true; }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)]">Rename</button>
 									<button onclick={() => { activeMenu = null; isPageSettingsOpen = true; }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)]">Page Settings</button>
 									{#if role === 'owner'}
 										<button onclick={() => { activeMenu = null; onPublish(); }} class="w-full text-left px-4 py-1.5 text-sm hover:bg-[var(--theme-border)]">Publish as Package</button>
@@ -329,7 +329,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 Space</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 +352,6 @@
 						{#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>
 							</div>
 						{/if}
 					</div>
@@ -364,36 +363,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,27 +407,27 @@
 		</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="space-font-select" class="text-[11px] font-semibold uppercase tracking-wider opacity-60">Font</label>
-			<select id="space-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 block py-1 pl-2 pr-6 appearance-none cursor-pointer">
+			<label for="project-font-select" class="text-[11px] font-semibold uppercase tracking-wider opacity-60">Font</label>
+			<select id="project-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 block py-1 pl-2 pr-6 appearance-none cursor-pointer">
 				<option value="New Computer Modern">Default (New CM)</option>
 				<option value="Libertinus Serif">Libertinus Serif</option>
 				<option value="PT Sans">PT Sans</option>
@@ -443,24 +442,21 @@
 			</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>
-
-		<ThemePicker />
 		<div class="flex-grow"></div>
 	</div>
 </header>
@@ -474,50 +470,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">{spaceName}</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>Space (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>
-		</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>
+
+		{#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 Space</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 Space</h3>
-				<p class="text-gray-600 dark:text-gray-300 text-sm mb-6">Delete this space 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}

src/lib/ts/store.ts

@@ -34,14 +34,14 @@ if (typeof window !== 'undefined') {
     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()));
 }

src/lib/ts/typst-api.ts

@@ -20,20 +20,20 @@ export async function compileTypst(text: string, document_id?: string): Promise<
 	return await res.json();
 }
 
-export async function compileSpace(space_id: string, files: Record<string, string>): Promise<CompileResponse> {
+export async function compileProject(project_id: string, files: Record<string, string>): Promise<CompileResponse> {
 	const res = await fetch('/api/compile', {
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ space_id, files }),
+		body: JSON.stringify({ project_id, files }),
 	});
 	return await res.json();
 }
 
-export function exportSpace(space_id: string, files: Record<string, string>, format: 'pdf' | 'png' | 'svg', title: string = 'document') {
+export function exportProject(project_id: string, files: Record<string, string>, format: 'pdf' | 'png' | 'svg', title: string = 'document') {
 	return fetch(`/api/export/${format}`, {
 		method: 'POST',
 		headers: { 'Content-Type': 'application/json' },
-		body: JSON.stringify({ space_id, files }),
+		body: JSON.stringify({ project_id, files }),
 	})
 		.then((res) => {
 			if (!res.ok) throw new Error('Export failed');

src/lib/ts/yjs-project.ts

@@ -19,18 +19,18 @@ const userColors = [
 ];
 
 const open = new Map<string, OpenFile>();
-let spaceId: string | null = null;
+let projectId: string | null = null;
 
 const TEXT_NAME = 'typst';
 
-export function setSpace(id: string) {
-	spaceId = id;
+export function setProject(id: string) {
+	projectId = id;
 }
 
 export function openFile(fileId: string, path: string): OpenFile {
 	const existing = open.get(fileId);
 	if (existing) return existing;
-	if (!spaceId) throw new Error('Space not set');
+	if (!projectId) throw new Error('Project not set');
 
 	const doc = new Y.Doc();
 	const text = doc.getText(TEXT_NAME);
@@ -40,7 +40,7 @@ export function openFile(fileId: string, path: string): OpenFile {
 
 	connectionStatus.set('connecting');
 
-	const provider = new WebsocketProvider(`${protocol}//${host}/yjs`, `space:${spaceId}:${fileId}`, doc);
+	const provider = new WebsocketProvider(`${protocol}//${host}/yjs`, `project:${projectId}:${fileId}`, doc);
 
 	const user = get(userStore);
 	const color = userColors[Math.floor(Math.random() * userColors.length)];
@@ -104,11 +104,11 @@ export function getAllText(): Record<string, string> {
 	return result;
 }
 
-export function cleanupSpace() {
+export function cleanupProject() {
 	for (const fileId of Array.from(open.keys())) {
 		closeFile(fileId);
 	}
-	spaceId = null;
+	projectId = null;
 	connectionStatus.set('disconnected');
 	connectedUsers.set([]);
 }

src/routes/+error.svelte

@@ -4,26 +4,26 @@
 </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"
+			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

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}

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>

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}

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 CreateSpaceModal from '$lib/components/dashboard/CreateSpaceModal.svelte';
-    import CreateFolderModal from '$lib/components/dashboard/CreateFolderModal.svelte';
     import Footer from '$lib/components/Footer.svelte';
 
     let documents = $state<any[]>([]);
@@ -27,7 +24,7 @@
     let newFolderName = $state('');
     let loading = $state(true);
     let showCreateModal = $state(false);
-    let showCreateSpaceModal = $state(false);
+    let showCreateProjectModal = $state(false);
     let newDocTitle = $state('');
     let showPlusDropdown = $state(false);
     let dragOverFolderId = $state<string | null>(null);
@@ -200,24 +197,24 @@
         }
     }
 
-    function openCreateSpaceModal() {
+    function openCreateProjectModal() {
         showPlusDropdown = false;
-        showCreateSpaceModal = true;
+        showCreateProjectModal = true;
     }
 
-    async function createSpace(name: string) {
+    async function createProject(name: string) {
         if (!name.trim()) return;
 
-        const res = await fetch('/api/spaces', {
+        const res = await fetch('/api/projects', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ name: name.trim(), folder_id: currentFolderId || undefined })
         });
 
         if (res.ok) {
-            const space = await res.json();
-            showCreateSpaceModal = false;
-            goto(`/space/${space.id}`);
+            const project = await res.json();
+            showCreateProjectModal = false;
+            goto(`/project/${project.id}`);
         }
     }
 
@@ -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={openCreateSpaceModal} 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 Space
+                            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 showCreateSpaceModal}
-    <CreateSpaceModal {createSpace} onClose={() => showCreateSpaceModal = false} />
+{#if showCreateProjectModal}
+    <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>

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>

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>

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">
-				Instance-local Typst packages, published from Spaces 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>.
+			<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-[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 Space and use “Publish” to create one.</p>
+				<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>

src/routes/project/[id]/+page.svelte

@@ -5,26 +5,26 @@
 	import Preview from '$lib/components/Preview.svelte';
 	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import DocFooter from '$lib/components/DocFooter.svelte';
-	import FileTree from '$lib/components/space/FileTree.svelte';
-	import SpaceToolbar from '$lib/components/space/SpaceToolbar.svelte';
+	import FileTree from '$lib/components/project/FileTree.svelte';
+	import ProjectToolbar from '$lib/components/project/ProjectToolbar.svelte';
 	import PublishPackageModal from '$lib/components/PublishPackageModal.svelte';
-	import { compileSpace } from '$lib/ts/typst-api';
+	import { compileProject } from '$lib/ts/typst-api';
 	import type { Diagnostic } from '$lib/ts/typst-api';
 	import { editorErrors, documentStatsStore, previewOpenStore, editorViewStore } from '$lib/ts/store';
-	import { setSpace, openFile, getOpenFile, closeFile, renameOpenFile, getAllText, cleanupSpace } from '$lib/ts/yjs-space';
+	import { setProject, openFile, getOpenFile, closeFile, renameOpenFile, getAllText, cleanupProject } from '$lib/ts/yjs-project';
 
-	interface SpaceFile {
+	interface ProjectFile {
 		id: string;
 		path: string;
 		kind: string;
 	}
 
-	const spaceId = $page.params.id as string;
+	const projectId = $page.params.id as string;
 
-	let spaceName = $state('Space');
+	let projectName = $state('Project');
 	let entrypoint = $state('main.typ');
 	let role = $state('owner');
-	let files = $state<SpaceFile[]>([]);
+	let files = $state<ProjectFile[]>([]);
 	let activeFileId = $state('');
 	let svgs = $state<string[]>([]);
 	let errors = $state<Diagnostic[]>([]);
@@ -45,7 +45,7 @@
 
 	function triggerCompile() {
 		if (!$previewOpenStore) return;
-		compileSpace(spaceId, getAllText())
+		compileProject(projectId, getAllText())
 			.then((res) => {
 				if (res.stats) $documentStatsStore = res.stats;
 				if (res.svgs) {
@@ -58,12 +58,12 @@
 				}
 			})
 			.catch(() => {
-				errors = [{ message: 'Network or server error compiling space.', severity: 'error' }];
+				errors = [{ message: 'Network or server error compiling project.', severity: 'error' }];
 			});
 	}
 
 	async function loadFiles() {
-		const res = await fetch(`/api/spaces/${spaceId}/files`);
+		const res = await fetch(`/api/projects/${projectId}/files`);
 		if (!res.ok) return;
 		files = await res.json();
 
@@ -80,13 +80,13 @@
 		}
 	}
 
-	function selectFile(file: SpaceFile) {
+	function selectFile(file: ProjectFile) {
 		if (file.kind !== 'text') return;
 		activeFileId = file.id;
 	}
 
 	async function createFile(path: string) {
-		const res = await fetch(`/api/spaces/${spaceId}/files`, {
+		const res = await fetch(`/api/projects/${projectId}/files`, {
 			method: 'POST',
 			headers: { 'Content-Type': 'application/json' },
 			body: JSON.stringify({ path, kind: 'text', content: '' })
@@ -103,15 +103,15 @@
 	async function uploadFiles(fileList: FileList) {
 		const form = new FormData();
 		for (const f of fileList) form.append('file', f);
-		const res = await fetch(`/api/spaces/${spaceId}/files/upload`, { method: 'POST', body: form });
+		const res = await fetch(`/api/projects/${projectId}/files/upload`, { method: 'POST', body: form });
 		if (res.ok) {
 			await loadFiles();
 			triggerCompile();
 		}
 	}
 
-	async function renameFile(file: SpaceFile, path: string) {
-		const res = await fetch(`/api/spaces/${spaceId}/files/${file.id}`, {
+	async function renameFile(file: ProjectFile, path: string) {
+		const res = await fetch(`/api/projects/${projectId}/files/${file.id}`, {
 			method: 'PATCH',
 			headers: { 'Content-Type': 'application/json' },
 			body: JSON.stringify({ path })
@@ -123,9 +123,9 @@
 		}
 	}
 
-	async function deleteFile(file: SpaceFile) {
+	async function deleteFile(file: ProjectFile) {
 		if (!confirm(`Delete ${file.path}?`)) return;
-		const res = await fetch(`/api/spaces/${spaceId}/files/${file.id}`, { method: 'DELETE' });
+		const res = await fetch(`/api/projects/${projectId}/files/${file.id}`, { method: 'DELETE' });
 		if (res.ok) {
 			closeFile(file.id);
 			files = files.filter((f) => f.id !== file.id);
@@ -136,8 +136,8 @@
 		}
 	}
 
-	async function setEntry(file: SpaceFile) {
-		const res = await fetch(`/api/spaces/${spaceId}`, {
+	async function setEntry(file: ProjectFile) {
+		const res = await fetch(`/api/projects/${projectId}`, {
 			method: 'PATCH',
 			headers: { 'Content-Type': 'application/json' },
 			body: JSON.stringify({ entrypoint: file.path })
@@ -166,38 +166,38 @@
 	}
 
 	onMount(() => {
-		setSpace(spaceId);
-		fetch(`/api/spaces/${spaceId}`)
+		setProject(projectId);
+		fetch(`/api/projects/${projectId}`)
 			.then((r) => r.json())
-			.then((s) => {
-				if (s && s.name) spaceName = s.name;
-				if (s && s.entrypoint) entrypoint = s.entrypoint;
-				if (s && s.effective_role) role = s.effective_role;
+			.then((p) => {
+				if (p && p.name) projectName = p.name;
+				if (p && p.entrypoint) entrypoint = p.entrypoint;
+				if (p && p.effective_role) role = p.effective_role;
 			})
 			.then(loadFiles)
 			.then(() => {
 				ready = true;
 				triggerCompile();
 			})
-			.catch((e) => console.error('Failed to load space', e));
+			.catch((e) => console.error('Failed to load project', e));
 
 		return () => {
 			if (timeoutId) clearTimeout(timeoutId);
-			cleanupSpace();
+			cleanupProject();
 		};
 	});
 </script>
 
 <svelte:head>
-	<title>{spaceName} - TypstDrive</title>
+	<title>{projectName} - TypstDrive</title>
 </svelte:head>
 
 <svelte:window onclick={closeContextMenu} />
 
 <div class="flex flex-col h-screen relative">
-	<SpaceToolbar
-		{spaceName}
-		{spaceId}
+	<ProjectToolbar
+		{projectName}
+		{projectId}
 		{entrypoint}
 		{role}
 		activeText={activeEntry?.text ?? null}
@@ -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,12 +247,12 @@
 {#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>
 {/if}
 
 {#if showPublish}
-	<PublishPackageModal {spaceId} onClose={() => (showPublish = false)} />
+	<PublishPackageModal {projectId} onClose={() => (showPublish = false)} />
 {/if}

src/routes/projects/+page.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	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;
+		name: string;
+		entrypoint: string;
+		thumbnail_svg?: string;
+		updated_at: string;
+		effective_role?: string;
+	}
+
+	let projects = $state<Project[]>([]);
+	let shared = $state<Project[]>([]);
+	let loading = $state(true);
+	let showCreate = $state(false);
+	let creating = $state(false);
+
+	let activeMenu = $state<string | null>(null);
+	let showRename = $state(false);
+	let renameId = $state('');
+	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(name: string) {
+		const res = await fetch(`/api/projects/${renameId}`, {
+			method: 'PATCH',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ name })
+		});
+		if (res.ok) {
+			projects = projects.map((p) => (p.id === renameId ? { ...p, name } : p));
+		}
+		showRename = false;
+	}
+
+	function handleWindowClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (!target.closest('.action-menu-container')) activeMenu = null;
+	}
+
+	async function load() {
+		loading = true;
+		const [own, sh] = await Promise.all([
+			fetch('/api/projects').then((r) => (r.ok ? r.json() : [])),
+			fetch('/api/projects/shared').then((r) => (r.ok ? r.json() : []))
+		]);
+		projects = own;
+		shared = sh;
+		loading = false;
+	}
+
+	async function create(name: string) {
+		creating = true;
+		const res = await fetch('/api/projects', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ name })
+		});
+		creating = false;
+		if (res.ok) {
+			const project = await res.json();
+			goto(`/project/${project.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);
+</script>
+
+<svelte:head>
+	<title>Projects - TypstDrive</title>
+</svelte:head>
+
+<svelte:window onclick={handleWindowClick} />
+
+<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-[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-[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-[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)} 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-[var(--color-ink-muted)]">Loading…</p>
+		{:else}
+			{#if projects.length === 0}
+				<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>
+			{:else}
+				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+					{#each projects as project (project.id)}
+						<ProjectCard
+							{project}
+							{activeMenu}
+							{setActiveMenu}
+							{openInfo}
+							{openRename}
+							deleteProject={requestDelete}
+						/>
+					{/each}
+				</div>
+			{/if}
+
+			{#if shared.length > 0}
+				<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-[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-[var(--color-ink-muted)]" />
+								{/if}
+							</div>
+							<div class="p-3">
+								<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}
+				</div>
+			{/if}
+		{/if}
+	</div>
+</div>
+
+{#if showCreate}
+	<PromptModal
+		title="New project"
+		label="Project name"
+		icon="ph:folder-star"
+		placeholder="Untitled Project"
+		confirmLabel="Create"
+		onsubmit={create}
+		onclose={() => (showCreate = false)}
+	/>
+{/if}
+
+{#if showRename}
+	<PromptModal
+		title="Rename project"
+		label="Project name"
+		icon="ph:pencil-simple"
+		value={renameName}
+		confirmLabel="Save"
+		onsubmit={submitRename}
+		onclose={() => (showRename = false)}
+	/>
+{/if}
+
+{#if showInfo && infoProject}
+	<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>
+				<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>
+
+		{#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}

src/routes/register/+page.svelte

@@ -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>

src/routes/settings/+page.svelte

@@ -25,6 +25,15 @@
         rate_limit: number;
     };
 
+    type Device = {
+        id: string;
+        name: string;
+        created_at: string;
+        last_used_at: string | null;
+        connected: boolean;
+        connected_since: string | null;
+    };
+
     let activeSection = $state('account');
 
     let username = $state('');
@@ -62,6 +71,12 @@
     let confirmRegenerateId = $state<string | null>(null);
     let regeneratingKeyId = $state<string | null>(null);
 
+    let devices = $state<Device[]>([]);
+    let devicesLoading = $state(false);
+    let devicesError = $state('');
+    let confirmRevokeDeviceId = $state<string | null>(null);
+    let revokingDeviceId = $state<string | null>(null);
+
     type UsagePoint = { date: string; count: number };
     type UsagePeriod = '1hr' | '1day' | '1week';
     let usageData = $state<UsagePoint[]>([]);
@@ -161,6 +176,34 @@
         confirmDeleteKeyId = null;
     }
 
+    async function loadDevices() {
+        devicesLoading = true;
+        devicesError = '';
+        try {
+            const res = await fetch('/api/devices');
+            if (res.ok) {
+                devices = await res.json();
+            } else {
+                devicesError = 'Failed to load devices.';
+            }
+        } catch {
+            devicesError = 'Network error.';
+        }
+        devicesLoading = false;
+    }
+
+    async function revokeDevice(id: string) {
+        revokingDeviceId = id;
+        try {
+            const res = await fetch(`/api/devices/${id}`, { method: 'DELETE' });
+            if (res.ok) {
+                devices = devices.filter(d => d.id !== id);
+            }
+        } catch {}
+        revokingDeviceId = null;
+        confirmRevokeDeviceId = null;
+    }
+
     async function copyKey(key: string) {
         await navigator.clipboard.writeText(key);
         copiedKey = true;
@@ -300,6 +343,12 @@
         }
     });
 
+    $effect(() => {
+        if (activeSection === 'devices') {
+            loadDevices();
+        }
+    });
+
     async function toggleAdmin(user: AdminUser) {
         const res = await fetch(`/api/admin/users/${user.id}`, {
             method: 'PATCH',
@@ -408,6 +457,7 @@
         { id: 'theme', label: 'Theme', icon: 'mdi:palette-outline' },
         { id: 'storage', label: 'Storage', icon: 'mdi:harddisk' },
         { id: 'api-keys', label: 'API Keys', icon: 'mdi:key-outline' },
+        { id: 'devices', label: 'Devices', icon: 'mdi:devices' },
         ...($userStore?.is_admin ? [{ id: 'admin', label: 'Admin', icon: 'mdi:shield-crown-outline' }] : [])
     ]);
 </script>
@@ -418,12 +468,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 +485,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 +497,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 +509,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 +532,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 +563,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 +602,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 +652,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 +687,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 +708,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 +735,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 +773,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 +814,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 +840,97 @@
                                                 <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>
+                                            {/if}
+                                        </div>
+                                    </div>
+                                {/each}
+                            </div>
+                        {/if}
+                    </div>
+                </div>
+            {/if}
+
+            {#if activeSection === 'devices'}
+                <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-[var(--color-ink)] flex items-center gap-2 mb-2">
+                            <Icon icon="mdi:devices" class="text-2xl text-[var(--color-accent)]" />
+                            Devices
+                        </h2>
+                        <p class="text-sm text-[var(--color-ink-muted)] mb-6">
+                            Typst Desktop apps signed in to your account. A device stays connected while it is running with live sync; revoke a device to sign it out immediately.
+                        </p>
+
+                        {#if devicesError}
+                            <div class="bg-[var(--color-danger)]/10 text-[var(--color-danger)] p-3 rounded-md text-sm mb-4">{devicesError}</div>
+                        {/if}
+
+                        {#if devicesLoading}
+                            <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 devices...
+                            </div>
+                        {:else if devices.length === 0}
+                            <div class="text-center py-12 text-[var(--color-ink-muted)]">
+                                <Icon icon="mdi:devices" class="text-4xl mb-2 opacity-40" />
+                                <p class="text-sm">No devices signed in yet.</p>
+                            </div>
+                        {:else}
+                            <div class="space-y-2">
+                                {#each devices as device (device.id)}
+                                    <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:laptop" class="text-lg" />
+                                        </div>
+                                        <div class="flex-1 min-w-0">
+                                            <p class="text-sm font-semibold text-[var(--color-ink)] truncate flex items-center gap-2">
+                                                {device.name}
+                                                {#if device.connected}
+                                                    <span class="inline-flex items-center gap-1 text-xs font-medium text-[var(--color-success)]">
+                                                        <span class="h-1.5 w-1.5 rounded-full bg-[var(--color-success)]"></span>
+                                                        Connected
+                                                    </span>
+                                                {/if}
+                                            </p>
+                                            <p class="text-xs text-[var(--color-ink-muted)]">{device.last_used_at ? `Last used ${formatDate(device.last_used_at)}` : 'Never used'}</p>
+                                        </div>
+                                        <div class="text-right flex-shrink-0 hidden sm:block">
+                                            <p class="text-xs text-[var(--color-ink-muted)]">Added {formatDate(device.created_at)}</p>
+                                        </div>
+                                        <div class="flex items-center gap-1 flex-shrink-0">
+                                            {#if confirmRevokeDeviceId === device.id}
+                                                <div class="flex items-center gap-1">
+                                                    <span class="text-xs text-[var(--color-ink-muted)]">Revoke?</span>
+                                                    <button
+                                                        onclick={() => revokeDevice(device.id)}
+                                                        disabled={revokingDeviceId === device.id}
+                                                        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"
+                                                    >
+                                                        {revokingDeviceId === device.id ? '...' : 'Yes'}
+                                                    </button>
+                                                    <button
+                                                        onclick={() => confirmRevokeDeviceId = null}
+                                                        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}
+                                                <button
+                                                    onclick={() => confirmRevokeDeviceId = device.id}
+                                                    title="Revoke device"
+                                                    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 +945,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 +965,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 +1021,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 +1036,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 +1094,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>

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>

src/routes/spaces/+page.svelte

@@ -1,207 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
-	import Icon from '@iconify/svelte';
-	import Navbar from '$lib/components/dashboard/Navbar.svelte';
-	import SpaceCard from '$lib/components/dashboard/SpaceCard.svelte';
-
-	interface Space {
-		id: string;
-		name: string;
-		entrypoint: string;
-		thumbnail_svg?: string;
-		updated_at: string;
-		effective_role?: string;
-	}
-
-	let spaces = $state<Space[]>([]);
-	let shared = $state<Space[]>([]);
-	let loading = $state(true);
-	let showCreate = $state(false);
-	let newName = $state('');
-	let creating = $state(false);
-
-	let activeMenu = $state<string | null>(null);
-	let showRename = $state(false);
-	let renameId = $state('');
-	let renameName = $state('');
-	let showInfo = $state(false);
-	let infoSpace = $state<Space | null>(null);
-
-	function setActiveMenu(id: string | null) { activeMenu = id; }
-	function openInfo(space: Space) { activeMenu = null; infoSpace = space; 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;
-		const res = await fetch(`/api/spaces/${renameId}`, {
-			method: 'PATCH',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ name: renameName.trim() })
-		});
-		if (res.ok) {
-			spaces = spaces.map((s) => (s.id === renameId ? { ...s, name: renameName.trim() } : s));
-		}
-		showRename = false;
-	}
-
-	function handleWindowClick(e: MouseEvent) {
-		const target = e.target as HTMLElement;
-		if (!target.closest('.action-menu-container')) activeMenu = null;
-	}
-
-	async function load() {
-		loading = true;
-		const [own, sh] = await Promise.all([
-			fetch('/api/spaces').then((r) => (r.ok ? r.json() : [])),
-			fetch('/api/spaces/shared').then((r) => (r.ok ? r.json() : []))
-		]);
-		spaces = own;
-		shared = sh;
-		loading = false;
-	}
-
-	async function create() {
-		if (!newName.trim()) return;
-		creating = true;
-		const res = await fetch('/api/spaces', {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify({ name: newName.trim() })
-		});
-		creating = false;
-		if (res.ok) {
-			const space = await res.json();
-			goto(`/space/${space.id}`);
-		}
-	}
-
-	async function remove(id: string, name: string) {
-		if (!confirm(`Delete space "${name}"? This cannot be undone.`)) return;
-		const res = await fetch(`/api/spaces/${id}`, { method: 'DELETE' });
-		if (res.ok) spaces = spaces.filter((s) => s.id !== id);
-	}
-
-	onMount(load);
-</script>
-
-<svelte:head>
-	<title>Spaces - TypstDrive</title>
-</svelte:head>
-
-<svelte:window onclick={handleWindowClick} />
-
-<div class="min-h-screen bg-gray-50 dark:bg-[var(--theme-bg)]">
-	<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">
-					<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" />
-					Spaces
-				</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>
-			</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">
-				<Icon icon="mdi:plus" class="text-lg" /> New Space
-			</button>
-		</div>
-
-		{#if loading}
-			<p class="text-gray-500 dark:text-gray-400">Loading…</p>
-		{:else}
-			{#if spaces.length === 0}
-				<div class="text-center py-16 text-gray-500 dark:text-gray-400">
-					<Icon icon="mdi:folder-multiple-outline" class="text-5xl mx-auto mb-3 opacity-50" />
-					<p>No spaces yet. Create one to start a multi-file project.</p>
-				</div>
-			{:else}
-				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-					{#each spaces as space (space.id)}
-						<SpaceCard
-							{space}
-							{activeMenu}
-							{setActiveMenu}
-							{openInfo}
-							{openRename}
-							deleteSpace={remove}
-						/>
-					{/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>
-				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-					{#each shared as space (space.id)}
-						<button onclick={() => goto(`/space/${space.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">
-								{#if space.thumbnail_svg}
-									{@html space.thumbnail_svg}
-								{:else}
-									<Icon icon="mdi:folder-multiple-outline" class="text-4xl text-gray-300 dark:text-gray-600" />
-								{/if}
-							</div>
-							<div class="p-3">
-								<p class="font-medium text-gray-900 dark:text-white truncate">{space.name}</p>
-								<p class="text-xs text-gray-400 mt-0.5">{space.effective_role}</p>
-							</div>
-						</button>
-					{/each}
-				</div>
-			{/if}
-		{/if}
-	</div>
-</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 Space</h2>
-			<input bind:value={newName} placeholder="Space 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>
-{/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 Space</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>
-{/if}
-
-{#if showInfo && infoSpace}
-	<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">{infoSpace.name}</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">Entrypoint</p><p class="font-mono">{infoSpace.entrypoint}</p></div>
-				<div><p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Last Modified</p><p>{new Date(infoSpace.updated_at.endsWith('Z') ? infoSpace.updated_at : infoSpace.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>
-		</div>
-	</div>
-{/if}