diff --git a/.gitignore b/.gitignore
index 8e097b92..89f01eb4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,3 +41,6 @@ test/e2e/.auth/
 
 # Docker
 docker/data/
+
+# Codegraph local index
+.codegraph/
diff --git a/MANUAL_INSTALL.md b/MANUAL_INSTALL.md
index cc4d398f..5595a71f 100644
--- a/MANUAL_INSTALL.md
+++ b/MANUAL_INSTALL.md
@@ -9,6 +9,95 @@ This guide covers installing Taskwondo without Docker Compose. You'll need to pr
 - S3-compatible object storage (MinIO, AWS S3, DigitalOcean Spaces, etc.)
 - Nginx (or any web server that can serve static files and reverse-proxy)
 
+## Option A: All-in-One Docker Image
+
+The simplest way to deploy Taskwondo. A single container bundles the API, worker, and web frontend behind an Nginx reverse proxy — only **one port** needs to be exposed.
+
+### Prerequisites
+
+- Docker
+- PostgreSQL 15+
+- NATS with JetStream enabled
+- S3-compatible object storage
+
+### Run
+
+```bash
+docker run -d \
+  --name taskwondo \
+  -p 80:80 \
+  -e DATABASE_URL="postgres://user:pass@host:5432/taskwondo?sslmode=disable" \
+  -e JWT_SECRET="your-jwt-secret" \
+  -e STORAGE_ENDPOINT="s3.amazonaws.com" \
+  -e STORAGE_ACCESS_KEY="your-access-key" \
+  -e STORAGE_SECRET_KEY="your-secret-key" \
+  -e STORAGE_BUCKET="taskwondo-attachments" \
+  -e NATS_URL="nats://host:4222" \
+  ghcr.io/marcoshack/taskwondo/all-in-one:latest
+```
+
+Then open [http://localhost](http://localhost). On first start the API runs migrations and seeds the admin user — check the container logs for credentials:
+
+```bash
+docker logs taskwondo
+```
+
+### Environment Variables
+
+All variables from the standard `.env.template` are supported. Key ones:
+
+| Variable | Description |
+|----------|-------------|
+| `DATABASE_URL` | PostgreSQL connection string |
+| `JWT_SECRET` | Secret for signing JWT tokens (min 32 chars) |
+| `STORAGE_ENDPOINT` | S3-compatible storage endpoint |
+| `STORAGE_ACCESS_KEY` | Storage access key |
+| `STORAGE_SECRET_KEY` | Storage secret key |
+| `STORAGE_BUCKET` | Storage bucket name |
+| `NATS_URL` | NATS server URL |
+| `API_PORT` | Internal API port (default `8080`, no need to change) |
+| `ADMIN_EMAIL` | Admin user email (optional) |
+| `ADMIN_PASSWORD` | Admin user password (optional, auto-generated if omitted) |
+
+### Build from Source
+
+```bash
+git clone https://github.com/marcoshack/taskwondo.git
+cd taskwondo
+docker build -f docker/Dockerfile.all-in-one -t taskwondo:local .
+docker run -d --name taskwondo -p 80:80 \
+  -e DATABASE_URL="postgres://user:pass@host:5432/taskwondo?sslmode=disable" \
+  -e JWT_SECRET="your-jwt-secret" \
+  -e STORAGE_ENDPOINT="s3.amazonaws.com" \
+  -e STORAGE_ACCESS_KEY="your-access-key" \
+  -e STORAGE_SECRET_KEY="your-secret-key" \
+  -e STORAGE_BUCKET="taskwondo-attachments" \
+  -e NATS_URL="nats://host:4222" \
+  taskwondo:local
+```
+
+### Architecture
+
+The all-in-one image uses **supervisord** to manage three processes inside a single container:
+
+```
+┌─────────────────────────────────┐
+│  Nginx (:80) — single entry     │
+│  ├── static files (frontend)    │
+│  ├── /api/* → API (:8080)       │
+│  └── /healthz, /readyz, /metrics│
+├─────────────────────────────────┤
+│  API server (:8080, internal)   │
+│  Worker (background jobs)       │
+└─────────────────────────────────┘
+```
+
+---
+
+## Option B: Manual Installation (Binaries)
+
+If you prefer to run Taskwondo without Docker, follow the steps below.
+
 ## Download
 
 Download the server bundle (`taskwondo-server-*.tar.gz`) from the [Releases](https://github.com/marcoshack/taskwondo/releases) page. The [Dev Build](https://github.com/marcoshack/taskwondo/releases/tag/dev) release always has the latest build from `main`.
diff --git a/README.md b/README.md
index 0ec58ea7..e63ec22a 100644
--- a/README.md
+++ b/README.md
@@ -107,6 +107,8 @@ See [more screenshots](docs/overview.md) for a full walkthrough of features.
 
 ## Quick Start
 
+### Option 1: Docker Compose (Multi-Container)
+
 ```bash
 git clone https://github.com/marcoshack/taskwondo.git
 cd taskwondo
@@ -115,6 +117,30 @@ cd taskwondo
 
 Then open [http://localhost:3000](http://localhost:3000) and log in with the admin credentials printed by the installer.
 
+### Option 2: All-in-One Docker Image (Single Container)
+
+For simpler deployments, use the all-in-one image that bundles API, worker, and frontend into a single container with only one port exposed:
+
+```bash
+docker run -d \
+  --name taskwondo \
+  -p 80:80 \
+  -e DATABASE_URL="[REDACTED:connection_string]host:5432/taskwondo?sslmode=disable" \
+  -e JWT_SECRET="your-jwt-secret" \
+  -e STORAGE_ENDPOINT="s3.amazonaws.com" \
+  -e STORAGE_ACCESS_KEY="your-access-key" \
+  -e STORAGE_SECRET_KEY="your-secret-key" \
+  -e STORAGE_BUCKET="taskwondo-attachments" \
+  -e NATS_URL="nats://host:4222" \
+  ghcr.io/marcoshack/taskwondo/all-in-one:latest
+```
+
+Then open [http://localhost](http://localhost). Check logs for admin credentials: `docker logs taskwondo`
+
+For detailed configuration and build-from-source instructions, see [MANUAL_INSTALL.md](MANUAL_INSTALL.md).
+
+### Auto-start on Boot
+
 To start Taskwondo automatically on boot, install the included systemd service:
 
 ```bash
diff --git a/api/cmd/server/main.go b/api/cmd/server/main.go
index cfcf1cb3..f7f04707 100644
--- a/api/cmd/server/main.go
+++ b/api/cmd/server/main.go
@@ -205,7 +205,7 @@ func main() {
 
 	// Seed default namespace and backfill existing projects
 	if err := namespaceService.SeedDefaultNamespace(ctx); err != nil {
-		log.Fatal().Err(err).Msg("failed to seed default namespace")
+		log.Warn().Err(err).Msg("failed to seed default namespace (will retry on next startup)")
 	}
 
 	// Seed default limit settings (max projects/namespaces per user)
diff --git a/api/cmd/worker/main.go b/api/cmd/worker/main.go
index 556dd9e4..2f5e64e2 100644
--- a/api/cmd/worker/main.go
+++ b/api/cmd/worker/main.go
@@ -46,11 +46,6 @@ func main() {
 	defer db.Close()
 	log.Info().Int("max_open", cfg.WorkerDBPool).Msg("connected to database")
 
-	// Run migrations (idempotent)
-	if err := database.Migrate(ctx, db); err != nil {
-		log.Fatal().Err(err).Msg("failed to run migrations")
-	}
-
 	// Initialize repositories
 	statsRepo := repository.NewStatsRepository(db)
 	userRepo := repository.NewUserRepository(db)
@@ -183,18 +178,18 @@ func main() {
 
 	// Register on-call rotation notification task
 	notifyOncallRotation := workers.NewNotificationOncallRotationTask(
-		userRepo, emailSender, urlBuilder, log.Logger,
+		userRepo, userSettingRepo, emailSender, urlBuilder, log.Logger,
 	)
 	dispatcher.Register(notifyOncallRotation)
 
 	// Register on-call override notification tasks
 	notifyOncallOverrideCreated := workers.NewNotificationOncallOverrideCreatedTask(
-		userRepo, emailSender, urlBuilder, log.Logger,
+		userRepo, userSettingRepo, emailSender, urlBuilder, log.Logger,
 	)
 	dispatcher.Register(notifyOncallOverrideCreated)
 
 	notifyOncallOverrideCancelled := workers.NewNotificationOncallOverrideCancelledTask(
-		userRepo, emailSender, urlBuilder, log.Logger,
+		userRepo, userSettingRepo, emailSender, urlBuilder, log.Logger,
 	)
 	dispatcher.Register(notifyOncallOverrideCancelled)
 
diff --git a/api/go.mod b/api/go.mod
index 3d0b4c07..a8b646d1 100644
--- a/api/go.mod
+++ b/api/go.mod
@@ -3,6 +3,7 @@ module github.com/marcoshack/taskwondo
 go 1.25.5
 
 require (
+	github.com/coreos/go-oidc/v3 v3.20.0
 	github.com/go-chi/chi/v5 v5.2.5
 	github.com/golang-jwt/jwt/v5 v5.3.1
 	github.com/golang-migrate/migrate/v4 v4.19.1
@@ -16,6 +17,7 @@ require (
 	github.com/rs/zerolog v1.34.0
 	golang.org/x/crypto v0.48.0
 	golang.org/x/image v0.36.0
+	golang.org/x/oauth2 v0.36.0
 	golang.org/x/time v0.14.0
 )
 
@@ -25,6 +27,7 @@ require (
 	github.com/cespare/xxhash/v2 v2.3.0 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/go-ini/ini v1.67.0 // indirect
+	github.com/go-jose/go-jose/v4 v4.1.4 // indirect
 	github.com/google/go-tpm v0.9.8 // indirect
 	github.com/klauspost/compress v1.18.3 // indirect
 	github.com/klauspost/cpuid/v2 v2.2.11 // indirect
diff --git a/api/go.sum b/api/go.sum
index 7380b12e..872a257f 100644
--- a/api/go.sum
+++ b/api/go.sum
@@ -12,6 +12,8 @@ github.com/containerd/errdefs v1.0.0 h1:tg5yIfIlQIrxYtu9ajqY42W3lpS19XqdxRQeEwYG
 github.com/containerd/errdefs v1.0.0/go.mod h1:+YBYIdtsnF4Iw6nWZhJcqGSg/dwvV7tyJ/kCkyJ2k+M=
 github.com/containerd/errdefs/pkg v0.3.0 h1:9IKJ06FvyNlexW690DXuQNx2KA2cUJXx151Xdx3ZPPE=
 github.com/containerd/errdefs/pkg v0.3.0/go.mod h1:NJw6s9HwNuRhnjJhM7pylWwMyAkmCQvQ4GpJHEqRLVk=
+github.com/coreos/go-oidc/v3 v3.20.0 h1:EtE0WIBHk03N+DqGkY4+UONzzZHk7amKt6IyNd7OsZE=
+github.com/coreos/go-oidc/v3 v3.20.0/go.mod h1:DYCf24+ncYi+XkIH97GY1+dqoRlbaSI26KVTCI9SrY4=
 github.com/coreos/go-systemd/v22 v22.5.0/go.mod h1:Y58oyj3AT4RCenI/lSvhwexgC+NSVTIJ3seZv2GcEnc=
 github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
@@ -34,6 +36,8 @@ github.com/go-chi/chi/v5 v5.2.5 h1:Eg4myHZBjyvJmAFjFvWgrqDTXFyOzjj7YIm3L3mu6Ug=
 github.com/go-chi/chi/v5 v5.2.5/go.mod h1:X7Gx4mteadT3eDOMTsXzmI4/rwUpOwBHLpAfupzFJP0=
 github.com/go-ini/ini v1.67.0 h1:z6ZrTEZqSWOTyH2FlglNbNgARyHG8oLW9gMELqKr06A=
 github.com/go-ini/ini v1.67.0/go.mod h1:ByCAeIL28uOIIG0E3PJtZPDL8WnHpFKFOtgjp+3Ies8=
+github.com/go-jose/go-jose/v4 v4.1.4 h1:moDMcTHmvE6Groj34emNPLs/qtYXRVcd6S7NHbHz3kA=
+github.com/go-jose/go-jose/v4 v4.1.4/go.mod h1:x4oUasVrzR7071A4TnHLGSPpNOm2a21K9Kf04k1rs08=
 github.com/go-logr/logr v1.4.3 h1:CjnDlHq8ikf6E492q6eKboGOC0T8CDaOvkHCIg8idEI=
 github.com/go-logr/logr v1.4.3/go.mod h1:9T104GzyrTigFIr8wt5mBrctHMim0Nb2HLGrmQ40KvY=
 github.com/go-logr/stdr v1.2.2 h1:hSWxHoqTgW2S2qGc0LTAI563KZ5YKYRhT3MFKZMbjag=
@@ -147,6 +151,8 @@ golang.org/x/image v0.36.0 h1:Iknbfm1afbgtwPTmHnS2gTM/6PPZfH+z2EFuOkSbqwc=
 golang.org/x/image v0.36.0/go.mod h1:YsWD2TyyGKiIX1kZlu9QfKIsQ4nAAK9bdgdrIsE7xy4=
 golang.org/x/net v0.49.0 h1:eeHFmOGUTtaaPSGNmjBKpbng9MulQsJURQUAfUwY++o=
 golang.org/x/net v0.49.0/go.mod h1:/ysNB2EvaqvesRkuLAyjI1ycPZlQHM3q01F02UY/MV8=
+golang.org/x/oauth2 v0.36.0 h1:peZ/1z27fi9hUOFCAZaHyrpWG5lwe0RJEEEeH0ThlIs=
+golang.org/x/oauth2 v0.36.0/go.mod h1:YDBUJMTkDnJS+A4BP4eZBjCqtokkg1hODuPjwiGPO7Q=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
diff --git a/api/internal/crypto/crypto.go b/api/internal/crypto/crypto.go
index 03e9d86d..f4366686 100644
--- a/api/internal/crypto/crypto.go
+++ b/api/internal/crypto/crypto.go
@@ -6,6 +6,7 @@ import (
 	"crypto/rand"
 	"crypto/sha256"
 	"encoding/base64"
+	"encoding/json"
 	"fmt"
 	"io"
 
@@ -87,3 +88,60 @@ func (e *Encryptor) Decrypt(encoded string) (string, error) {
 
 	return string(plaintext), nil
 }
+
+// SealJSON marshals v, encrypts it with AES-256-GCM and returns it as an
+// unpadded URL-safe base64 token, suitable for a query parameter such as an
+// OAuth state. Confidentiality comes from the GCM tag as well as the cipher:
+// a token that was not produced by this key cannot be forged.
+func (e *Encryptor) SealJSON(v any) (string, error) {
+	plaintext, err := json.Marshal(v)
+	if err != nil {
+		return "", fmt.Errorf("marshaling payload: %w", err)
+	}
+
+	block, err := aes.NewCipher(e.key)
+	if err != nil {
+		return "", fmt.Errorf("creating cipher: %w", err)
+	}
+	gcm, err := cipher.NewGCM(block)
+	if err != nil {
+		return "", fmt.Errorf("creating gcm: %w", err)
+	}
+	nonce := make([]byte, gcm.NonceSize())
+	if _, err := io.ReadFull(rand.Reader, nonce); err != nil {
+		return "", fmt.Errorf("generating nonce: %w", err)
+	}
+
+	sealed := gcm.Seal(nonce, nonce, plaintext, nil)
+	return base64.RawURLEncoding.EncodeToString(sealed), nil
+}
+
+// OpenJSON decrypts a token produced by SealJSON into v. It fails if the token
+// was sealed with a different key, tampered with, or malformed.
+func (e *Encryptor) OpenJSON(token string, v any) error {
+	data, err := base64.RawURLEncoding.DecodeString(token)
+	if err != nil {
+		return fmt.Errorf("decoding token: %w", err)
+	}
+	block, err := aes.NewCipher(e.key)
+	if err != nil {
+		return fmt.Errorf("creating cipher: %w", err)
+	}
+	gcm, err := cipher.NewGCM(block)
+	if err != nil {
+		return fmt.Errorf("creating gcm: %w", err)
+	}
+	nonceSize := gcm.NonceSize()
+	if len(data) < nonceSize {
+		return fmt.Errorf("token too short")
+	}
+	nonce, ciphertext := data[:nonceSize], data[nonceSize:]
+	plaintext, err := gcm.Open(nil, nonce, ciphertext, nil)
+	if err != nil {
+		return fmt.Errorf("decrypting token: %w", err)
+	}
+	if err := json.Unmarshal(plaintext, v); err != nil {
+		return fmt.Errorf("unmarshaling payload: %w", err)
+	}
+	return nil
+}
diff --git a/api/internal/database/database.go b/api/internal/database/database.go
index 8bf71935..478e5dc0 100644
--- a/api/internal/database/database.go
+++ b/api/internal/database/database.go
@@ -72,11 +72,36 @@ func Migrate(ctx context.Context, db *sql.DB) error {
 		return fmt.Errorf("creating migrator: %w", err)
 	}
 
+	// Check for dirty state and attempt recovery
+	version, dirty, _ := m.Version()
+	if dirty {
+		log.Ctx(ctx).Warn().Uint("version", version).Msg("database is in dirty state, attempting recovery")
+		// Rollback the dirty migration
+		if err := m.Steps(-1); err != nil {
+			// If rollback fails, force to previous clean version
+			if version > 0 {
+				if err := m.Force(int(version) - 1); err != nil {
+					return fmt.Errorf("forcing clean version: %w", err)
+				}
+			} else {
+				// If version is 0, force to 0
+				if err := m.Force(0); err != nil {
+					return fmt.Errorf("forcing version 0: %w", err)
+				}
+			}
+		}
+		// Recreate migrator after force
+		m, err = migrate.NewWithInstance("iofs", source, "postgres", driver)
+		if err != nil {
+			return fmt.Errorf("recreating migrator: %w", err)
+		}
+	}
+
 	if err := m.Up(); err != nil && err != migrate.ErrNoChange {
 		return fmt.Errorf("running migrations: %w", err)
 	}
 
-	version, dirty, _ := m.Version()
+	version, dirty, _ = m.Version()
 	log.Ctx(ctx).Info().Uint("version", version).Bool("dirty", dirty).Msg("database migrations applied")
 
 	return nil
diff --git a/api/internal/database/migrations/000033_create_embeddings.up.sql b/api/internal/database/migrations/000033_create_embeddings.up.sql
index c26d6a7c..11e7b165 100644
--- a/api/internal/database/migrations/000033_create_embeddings.up.sql
+++ b/api/internal/database/migrations/000033_create_embeddings.up.sql
@@ -1,17 +1,20 @@
-CREATE EXTENSION IF NOT EXISTS vector;
-
-CREATE TABLE embeddings (
-    id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-    entity_type TEXT NOT NULL,
-    entity_id   UUID NOT NULL,
-    project_id  UUID REFERENCES projects(id) ON DELETE CASCADE,
-    content     TEXT NOT NULL,
-    embedding   vector(768) NOT NULL,
-    indexed_at  TIMESTAMPTZ NOT NULL DEFAULT now(),
-    UNIQUE (entity_type, entity_id)
-);
-
-CREATE INDEX idx_embeddings_vector ON embeddings
-    USING hnsw (embedding vector_cosine_ops) WITH (m = 16, ef_construction = 128);
-CREATE INDEX idx_embeddings_project ON embeddings(project_id, entity_type) WHERE project_id IS NOT NULL;
-CREATE INDEX idx_embeddings_entity ON embeddings(entity_type, entity_id);
+DO $$
+BEGIN
+    IF EXISTS (SELECT 1 FROM pg_available_extensions WHERE name = 'vector') THEN
+        EXECUTE 'CREATE EXTENSION IF NOT EXISTS vector';
+        EXECUTE 'CREATE TABLE embeddings (
+            id          UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+            entity_type TEXT NOT NULL,
+            entity_id   UUID NOT NULL,
+            project_id  UUID REFERENCES projects(id) ON DELETE CASCADE,
+            content     TEXT NOT NULL,
+            embedding   vector(768) NOT NULL,
+            indexed_at  TIMESTAMPTZ NOT NULL DEFAULT now(),
+            UNIQUE (entity_type, entity_id)
+        )';
+        EXECUTE 'CREATE INDEX idx_embeddings_vector ON embeddings USING hnsw (embedding vector_cosine_ops) WITH (m = 16, ef_construction = 128)';
+        EXECUTE 'CREATE INDEX idx_embeddings_project ON embeddings(project_id, entity_type) WHERE project_id IS NOT NULL';
+        EXECUTE 'CREATE INDEX idx_embeddings_entity ON embeddings(entity_type, entity_id)';
+    END IF;
+END
+$$;
diff --git a/api/internal/database/migrations/000034_add_embedding_path.up.sql b/api/internal/database/migrations/000034_add_embedding_path.up.sql
index 334ce8be..8d35935c 100644
--- a/api/internal/database/migrations/000034_add_embedding_path.up.sql
+++ b/api/internal/database/migrations/000034_add_embedding_path.up.sql
@@ -1 +1,7 @@
-ALTER TABLE embeddings ADD COLUMN IF NOT EXISTS path TEXT NOT NULL DEFAULT '';
+DO $$
+BEGIN
+    IF to_regclass('embeddings') IS NOT NULL THEN
+        ALTER TABLE embeddings ADD COLUMN IF NOT EXISTS path TEXT NOT NULL DEFAULT '';
+    END IF;
+END
+$$;
diff --git a/api/internal/database/migrations/000035_drop_embedding_path.up.sql b/api/internal/database/migrations/000035_drop_embedding_path.up.sql
index 8a820137..0975f2c0 100644
--- a/api/internal/database/migrations/000035_drop_embedding_path.up.sql
+++ b/api/internal/database/migrations/000035_drop_embedding_path.up.sql
@@ -1 +1,7 @@
-ALTER TABLE embeddings DROP COLUMN IF EXISTS path;
+DO $$
+BEGIN
+    IF to_regclass('embeddings') IS NOT NULL THEN
+        ALTER TABLE embeddings DROP COLUMN IF EXISTS path;
+    END IF;
+END
+$$;
diff --git a/api/internal/database/migrations/000036_backfill_project_embedding_ids.up.sql b/api/internal/database/migrations/000036_backfill_project_embedding_ids.up.sql
index 230bdb48..519cfac3 100644
--- a/api/internal/database/migrations/000036_backfill_project_embedding_ids.up.sql
+++ b/api/internal/database/migrations/000036_backfill_project_embedding_ids.up.sql
@@ -1 +1,7 @@
-UPDATE embeddings SET project_id = entity_id WHERE entity_type = 'project' AND project_id IS NULL;
+DO $$
+BEGIN
+    IF to_regclass('embeddings') IS NOT NULL THEN
+        UPDATE embeddings SET project_id = entity_id WHERE entity_type = 'project' AND project_id IS NULL;
+    END IF;
+END
+$$;
diff --git a/api/internal/database/migrations/000061_create_description_revisions.up.sql b/api/internal/database/migrations/000061_create_description_revisions.up.sql
index fe15cfd6..aaf97b74 100644
--- a/api/internal/database/migrations/000061_create_description_revisions.up.sql
+++ b/api/internal/database/migrations/000061_create_description_revisions.up.sql
@@ -7,7 +7,18 @@
 
 -- pgcrypto provides digest() / sha256, used here only for the back-fill below.
 -- Application code computes sha256 in Go for new revisions.
-CREATE EXTENSION IF NOT EXISTS pgcrypto;
+-- If pgcrypto is not available, we skip the extension and use a placeholder hash.
+DO $$
+DECLARE
+    has_pgcrypto boolean;
+BEGIN
+    SELECT EXISTS (SELECT 1 FROM pg_available_extensions WHERE name = 'pgcrypto') INTO has_pgcrypto;
+    
+    IF has_pgcrypto THEN
+        EXECUTE 'CREATE EXTENSION IF NOT EXISTS pgcrypto';
+    END IF;
+END
+$$;
 
 CREATE TABLE work_item_description_revisions (
     id              UUID PRIMARY KEY,
@@ -28,18 +39,43 @@ CREATE INDEX idx_description_revisions_work_item
 -- generated by the database. New revisions written by the application use
 -- UUIDv7 (time-ordered). This is a one-shot back-fill; tests and runtime
 -- rely on a stable created_at order, not on UUIDv7 vs v4.
-INSERT INTO work_item_description_revisions
-    (id, work_item_id, revision_number, content, content_hash, author_id, created_at)
-SELECT
-    gen_random_uuid(),
-    wi.id,
-    1,
-    COALESCE(wi.description, ''),
-    encode(digest(COALESCE(wi.description, ''), 'sha256'), 'hex'),
-    wi.reporter_id,
-    wi.created_at
-FROM work_items wi
-WHERE wi.deleted_at IS NULL;
+-- If pgcrypto is available, compute real sha256 hash; otherwise use placeholder.
+DO $$
+DECLARE
+    has_pgcrypto boolean;
+BEGIN
+    SELECT EXISTS (SELECT 1 FROM pg_available_extensions WHERE name = 'pgcrypto' AND installed_version IS NOT NULL) INTO has_pgcrypto;
+    
+    IF has_pgcrypto THEN
+        EXECUTE '
+            INSERT INTO work_item_description_revisions
+                (id, work_item_id, revision_number, content, content_hash, author_id, created_at)
+            SELECT
+                gen_random_uuid(),
+                wi.id,
+                1,
+                COALESCE(wi.description, ''''),
+                encode(digest(COALESCE(wi.description, ''''), ''sha256''), ''hex''),
+                wi.reporter_id,
+                wi.created_at
+            FROM work_items wi
+            WHERE wi.deleted_at IS NULL';
+    ELSE
+        INSERT INTO work_item_description_revisions
+            (id, work_item_id, revision_number, content, content_hash, author_id, created_at)
+        SELECT
+            gen_random_uuid(),
+            wi.id,
+            1,
+            COALESCE(wi.description, ''),
+            'placeholder',
+            wi.reporter_id,
+            wi.created_at
+        FROM work_items wi
+        WHERE wi.deleted_at IS NULL;
+    END IF;
+END
+$$;
 
 -- Inline-comment anchor columns. anchor_revision_id IS NULL ⇒ regular comment.
 ALTER TABLE comments
diff --git a/api/internal/database/migrations/000063_add_cjk_search_trigram_indexes.down.sql b/api/internal/database/migrations/000063_add_cjk_search_trigram_indexes.down.sql
new file mode 100644
index 00000000..cc8f781d
--- /dev/null
+++ b/api/internal/database/migrations/000063_add_cjk_search_trigram_indexes.down.sql
@@ -0,0 +1,12 @@
+-- Drop the trigram indexes added for the CJK search fallback.
+-- The pg_trgm extension itself is left in place: dropping it could break
+-- unrelated objects on installs that had it before this migration.
+
+DROP INDEX IF EXISTS idx_milestones_description_trgm;
+DROP INDEX IF EXISTS idx_milestones_name_trgm;
+DROP INDEX IF EXISTS idx_queues_description_trgm;
+DROP INDEX IF EXISTS idx_queues_name_trgm;
+DROP INDEX IF EXISTS idx_teams_description_trgm;
+DROP INDEX IF EXISTS idx_teams_name_trgm;
+DROP INDEX IF EXISTS idx_work_items_description_trgm;
+DROP INDEX IF EXISTS idx_work_items_title_trgm;
diff --git a/api/internal/database/migrations/000063_add_cjk_search_trigram_indexes.up.sql b/api/internal/database/migrations/000063_add_cjk_search_trigram_indexes.up.sql
new file mode 100644
index 00000000..52491ab5
--- /dev/null
+++ b/api/internal/database/migrations/000063_add_cjk_search_trigram_indexes.up.sql
@@ -0,0 +1,37 @@
+-- CJK search support.
+--
+-- PostgreSQL's text-search configs tokenize on whitespace, so a run of
+-- Chinese/Japanese/Korean characters collapses into a single tsvector lexeme
+-- and a tsquery can never match it as a substring. The repositories add an
+-- ILIKE substring fallback when the query contains CJK characters; these
+-- pg_trgm GIN indexes make that fallback indexable.
+--
+-- pg_trgm is optional (same resilience pattern as 000033/000061): when the
+-- extension is unavailable — or cannot be created, e.g. a managed/external
+-- Postgres without privileges on it — the indexes are skipped and the search
+-- still works, just with a sequential scan for the ILIKE fallback.
+
+DO $$
+BEGIN
+    IF EXISTS (SELECT 1 FROM pg_available_extensions WHERE name = 'pg_trgm') THEN
+        BEGIN
+            EXECUTE 'CREATE EXTENSION IF NOT EXISTS pg_trgm';
+        EXCEPTION WHEN OTHERS THEN
+            RAISE NOTICE 'pg_trgm extension not available (%), skipping trigram indexes', SQLERRM;
+            RETURN;
+        END;
+
+        EXECUTE 'CREATE INDEX IF NOT EXISTS idx_work_items_title_trgm ON work_items USING GIN (title gin_trgm_ops)';
+        EXECUTE 'CREATE INDEX IF NOT EXISTS idx_work_items_description_trgm ON work_items USING GIN (description gin_trgm_ops)';
+
+        EXECUTE 'CREATE INDEX IF NOT EXISTS idx_teams_name_trgm ON teams USING GIN (name gin_trgm_ops)';
+        EXECUTE 'CREATE INDEX IF NOT EXISTS idx_teams_description_trgm ON teams USING GIN (description gin_trgm_ops)';
+
+        EXECUTE 'CREATE INDEX IF NOT EXISTS idx_queues_name_trgm ON queues USING GIN (name gin_trgm_ops)';
+        EXECUTE 'CREATE INDEX IF NOT EXISTS idx_queues_description_trgm ON queues USING GIN (description gin_trgm_ops)';
+
+        EXECUTE 'CREATE INDEX IF NOT EXISTS idx_milestones_name_trgm ON milestones USING GIN (name gin_trgm_ops)';
+        EXECUTE 'CREATE INDEX IF NOT EXISTS idx_milestones_description_trgm ON milestones USING GIN (description gin_trgm_ops)';
+    END IF;
+END
+$$;
diff --git a/api/internal/email/email.go b/api/internal/email/email.go
index b5f6d22f..5be975d3 100644
--- a/api/internal/email/email.go
+++ b/api/internal/email/email.go
@@ -105,12 +105,16 @@ func sendMail(ctx context.Context, cfg *model.SMTPConfig, to, subject, htmlBody
 		auth = smtp.PlainAuth("", cfg.Username, cfg.Password, cfg.SMTPHost)
 	}
 
+	if cfg.SkipCertVerify {
+		l.Warn().Msg("TLS certificate verification is disabled for SMTP (skip_cert_verify)")
+	}
+
 	var err error
 	switch cfg.Encryption {
 	case model.SMTPEncryptionTLS:
-		err = sendWithImplicitTLS(&l, addr, cfg.SMTPHost, auth, cfg.FromAddress, to, msg)
+		err = sendWithImplicitTLS(&l, addr, cfg.SMTPHost, cfg.SkipCertVerify, auth, cfg.FromAddress, to, msg)
 	case model.SMTPEncryptionSTARTTLS:
-		err = sendWithSTARTTLS(&l, addr, cfg.SMTPHost, auth, cfg.FromAddress, to, msg)
+		err = sendWithSTARTTLS(&l, addr, cfg.SMTPHost, cfg.SkipCertVerify, auth, cfg.FromAddress, to, msg)
 	case model.SMTPEncryptionNone:
 		// For plaintext SMTP, skip auth — Go's PlainAuth refuses to send
 		// credentials over unencrypted non-localhost connections.
@@ -182,7 +186,7 @@ func smtpSendEnvelope(l *zerolog.Logger, c *smtp.Client, auth smtp.Auth, from, t
 	return quitErr
 }
 
-func sendWithSTARTTLS(l *zerolog.Logger, addr, host string, auth smtp.Auth, from, to string, msg []byte) error {
+func sendWithSTARTTLS(l *zerolog.Logger, addr, host string, skipCertVerify bool, auth smtp.Auth, from, to string, msg []byte) error {
 	c, err := smtp.Dial(addr)
 	if err != nil {
 		return fmt.Errorf("connecting to SMTP server: %w", err)
@@ -190,7 +194,7 @@ func sendWithSTARTTLS(l *zerolog.Logger, addr, host string, auth smtp.Auth, from
 	defer c.Close()
 	l.Debug().Msg("smtp connected")
 
-	tlsConfig := &tls.Config{ServerName: host}
+	tlsConfig := buildTLSConfig(host, skipCertVerify)
 	if err := c.StartTLS(tlsConfig); err != nil {
 		return fmt.Errorf("STARTTLS: %w", err)
 	}
@@ -199,8 +203,8 @@ func sendWithSTARTTLS(l *zerolog.Logger, addr, host string, auth smtp.Auth, from
 	return smtpSendEnvelope(l, c, auth, from, to, msg)
 }
 
-func sendWithImplicitTLS(l *zerolog.Logger, addr, host string, auth smtp.Auth, from, to string, msg []byte) error {
-	tlsConfig := &tls.Config{ServerName: host}
+func sendWithImplicitTLS(l *zerolog.Logger, addr, host string, skipCertVerify bool, auth smtp.Auth, from, to string, msg []byte) error {
+	tlsConfig := buildTLSConfig(host, skipCertVerify)
 	conn, err := tls.Dial("tcp", addr, tlsConfig)
 	if err != nil {
 		return fmt.Errorf("TLS dial: %w", err)
@@ -216,3 +220,13 @@ func sendWithImplicitTLS(l *zerolog.Logger, addr, host string, auth smtp.Auth, f
 
 	return smtpSendEnvelope(l, c, auth, from, to, msg)
 }
+
+// buildTLSConfig returns the TLS settings for SMTP connections. When
+// skipCertVerify is set, certificate verification (including expiry checks)
+// is disabled so self-hosted servers with self-signed or expired certs work.
+func buildTLSConfig(host string, skipCertVerify bool) *tls.Config {
+	return &tls.Config{
+		ServerName:         host,
+		InsecureSkipVerify: skipCertVerify, //nolint:gosec // admin opt-in via smtp_config
+	}
+}
diff --git a/api/internal/email/email_test.go b/api/internal/email/email_test.go
index 1bb5c3bf..c495280a 100644
--- a/api/internal/email/email_test.go
+++ b/api/internal/email/email_test.go
@@ -103,6 +103,24 @@ func TestSendReturnsErrorWhenDisabled(t *testing.T) {
 	}
 }
 
+func TestBuildTLSConfig(t *testing.T) {
+	verified := buildTLSConfig("smtp.example.com", false)
+	if verified.InsecureSkipVerify {
+		t.Error("expected InsecureSkipVerify=false by default")
+	}
+	if verified.ServerName != "smtp.example.com" {
+		t.Errorf("expected ServerName smtp.example.com, got %s", verified.ServerName)
+	}
+
+	skipped := buildTLSConfig("smtp.example.com", true)
+	if !skipped.InsecureSkipVerify {
+		t.Error("expected InsecureSkipVerify=true when skipCertVerify is set")
+	}
+	if skipped.ServerName != "smtp.example.com" {
+		t.Errorf("expected ServerName smtp.example.com, got %s", skipped.ServerName)
+	}
+}
+
 func TestBuildMessage(t *testing.T) {
 	msg := buildMessage("Taskwondo", "noreply@example.com", "user@test.com", "Test Subject", "<p>Hello</p>", "<test-id@example.com>")
 	s := string(msg)
diff --git a/api/internal/handler/auth.go b/api/internal/handler/auth.go
index 7f518ecb..f697e704 100644
--- a/api/internal/handler/auth.go
+++ b/api/internal/handler/auth.go
@@ -12,6 +12,7 @@ import (
 	"github.com/google/uuid"
 	"github.com/rs/zerolog/log"
 
+	"github.com/marcoshack/taskwondo/internal/i18n"
 	"github.com/marcoshack/taskwondo/internal/model"
 	"github.com/marcoshack/taskwondo/internal/service"
 )
@@ -268,6 +269,19 @@ func (h *AuthHandler) OAuthCallback(w http.ResponseWriter, r *http.Request) {
 			writeError(w, http.StatusForbidden, CodeForbidden, "account is disabled")
 			return
 		}
+		// Service errors carrying an error_key are user-facing (localised by
+		// the client); anything else stays a generic message so provider
+		// internals don't leak into the login page.
+		if key, _ := model.ErrorKey(err); key != "" {
+			status := http.StatusUnauthorized
+			code := CodeOAuthError
+			if errors.Is(err, model.ErrForbidden) {
+				status = http.StatusForbidden
+				code = CodeForbidden
+			}
+			writeErrorFromService(w, status, code, err)
+			return
+		}
 		log.Ctx(r.Context()).Error().Err(err).Msg(provider + " oauth callback failed")
 		writeError(w, http.StatusUnauthorized, CodeOAuthError, provider+" authentication failed")
 		return
@@ -786,7 +800,7 @@ func (h *AuthHandler) Register(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	if err := h.auth.RequestRegistration(r.Context(), req.Email, req.DisplayName, req.InviteCode); err != nil {
+	if err := h.auth.RequestRegistration(r.Context(), req.Email, req.DisplayName, req.InviteCode, i18n.Negotiate(r.Header.Get("Accept-Language"))); err != nil {
 		if errors.Is(err, model.ErrForbidden) {
 			writeError(w, http.StatusForbidden, CodeForbidden, "email registration is disabled")
 			return
@@ -888,7 +902,7 @@ func (h *AuthHandler) ForgotPassword(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	if err := h.auth.RequestPasswordReset(r.Context(), req.Email); err != nil {
+	if err := h.auth.RequestPasswordReset(r.Context(), req.Email, i18n.Negotiate(r.Header.Get("Accept-Language"))); err != nil {
 		if errors.Is(err, model.ErrForbidden) {
 			writeError(w, http.StatusForbidden, CodeForbidden, "password reset is not available")
 			return
diff --git a/api/internal/handler/system_setting.go b/api/internal/handler/system_setting.go
index 01ff2f08..bc930ba8 100644
--- a/api/internal/handler/system_setting.go
+++ b/api/internal/handler/system_setting.go
@@ -270,6 +270,7 @@ var validOAuthProviders = map[string]bool{
 	model.OAuthProviderGoogle:    true,
 	model.OAuthProviderGitHub:    true,
 	model.OAuthProviderMicrosoft: true,
+	model.OAuthProviderSSO:       true,
 }
 
 // GetOAuthConfig handles GET /api/v1/admin/settings/oauth_config/{provider}
@@ -332,7 +333,7 @@ func (h *SystemSettingHandler) SetOAuthConfig(w http.ResponseWriter, r *http.Req
 		return
 	}
 
-	if err := cfg.Validate(); err != nil {
+	if err := cfg.ValidateAs(provider); err != nil {
 		handleSystemSettingError(w, r, err, "oauth config validation failed")
 		return
 	}
diff --git a/api/internal/handler/system_setting_test.go b/api/internal/handler/system_setting_test.go
index da59a37c..9312209d 100644
--- a/api/internal/handler/system_setting_test.go
+++ b/api/internal/handler/system_setting_test.go
@@ -415,6 +415,61 @@ func TestSetSMTP_SaveAndMaskPassword(t *testing.T) {
 	}
 }
 
+func TestSetSMTP_PersistsSkipCertVerify(t *testing.T) {
+	h, repo := systemSettingTestSetup(t)
+
+	cfg := model.SMTPConfig{
+		Enabled:        true,
+		SMTPHost:       "smtp.example.com",
+		SMTPPort:       465,
+		Username:       "[EMAIL_REDACTED]",
+		Password:       "secret123",
+		Encryption:     "tls",
+		FromAddress:    "[EMAIL_REDACTED]",
+		SkipCertVerify: true,
+	}
+	body, _ := json.Marshal(cfg)
+
+	req := httptest.NewRequest(http.MethodPut, "/api/v1/admin/settings/smtp_config", bytes.NewBuffer(body))
+	req = req.WithContext(sysAdminCtx())
+	w := httptest.NewRecorder()
+
+	h.SetSMTP(w, req)
+
+	if w.Code != http.StatusOK {
+		t.Fatalf("expected 200, got %d: %s", w.Code, w.Body.String())
+	}
+
+	var resp struct {
+		Data model.SMTPConfig `json:"data"`
+	}
+	json.Unmarshal(w.Body.Bytes(), &resp)
+	if !resp.Data.SkipCertVerify {
+		t.Error("expected skip_cert_verify=true in response")
+	}
+
+	stored := repo.settings[model.SettingSMTPConfig]
+	var storedCfg model.SMTPConfig
+	json.Unmarshal(stored.Value, &storedCfg)
+	if !storedCfg.SkipCertVerify {
+		t.Error("expected skip_cert_verify=true in stored config")
+	}
+
+	// GET must return the flag too
+	getReq := httptest.NewRequest(http.MethodGet, "/api/v1/admin/settings/smtp_config", nil)
+	getReq = getReq.WithContext(sysAdminCtx())
+	gw := httptest.NewRecorder()
+	h.GetSMTP(gw, getReq)
+
+	var getResp struct {
+		Data model.SMTPConfig `json:"data"`
+	}
+	json.Unmarshal(gw.Body.Bytes(), &getResp)
+	if !getResp.Data.SkipCertVerify {
+		t.Error("expected skip_cert_verify=true from GetSMTP")
+	}
+}
+
 func TestSetSMTP_PreservesExistingPassword(t *testing.T) {
 	h, repo := systemSettingTestSetup(t)
 
diff --git a/api/internal/i18n/i18n.go b/api/internal/i18n/i18n.go
index 6e2a9ef0..ae024211 100644
--- a/api/internal/i18n/i18n.go
+++ b/api/internal/i18n/i18n.go
@@ -43,6 +43,26 @@ func T(lang, key string, args ...string) string {
 	return val
 }
 
+// Negotiate resolves a language from an HTTP Accept-Language header value.
+// Candidates are checked in header order; the first supported primary subtag
+// wins. Falls back to "en" when nothing matches.
+func Negotiate(acceptLanguage string) string {
+	for _, part := range strings.Split(acceptLanguage, ",") {
+		if i := strings.IndexByte(part, ';'); i >= 0 {
+			part = part[:i]
+		}
+		primary := strings.TrimSpace(part)
+		if i := strings.IndexByte(primary, '-'); i >= 0 {
+			primary = primary[:i]
+		}
+		primary = strings.ToLower(primary)
+		if _, ok := translations[primary]; ok {
+			return primary
+		}
+	}
+	return "en"
+}
+
 func get(lang, key string) string {
 	if m, ok := translations[lang]; ok {
 		if v, ok := m[key]; ok {
diff --git a/api/internal/i18n/i18n_test.go b/api/internal/i18n/i18n_test.go
index 4c3c529c..ae2910ba 100644
--- a/api/internal/i18n/i18n_test.go
+++ b/api/internal/i18n/i18n_test.go
@@ -1,6 +1,86 @@
 package i18n
 
-import "testing"
+import (
+	"regexp"
+	"sort"
+	"strings"
+	"testing"
+)
+
+var placeholderRe = regexp.MustCompile(`\{\{(\w+)\}\}`)
+
+func TestTranslations_KeyParity(t *testing.T) {
+	en := translations["en"]
+	if len(en) == 0 {
+		t.Fatal("no English translations loaded")
+	}
+	for lang, m := range translations {
+		if len(m) != len(en) {
+			t.Errorf("%s: has %d keys, en has %d", lang, len(m), len(en))
+		}
+		for key := range en {
+			if _, ok := m[key]; !ok {
+				t.Errorf("%s: missing key %q", lang, key)
+			}
+		}
+		for key := range m {
+			if _, ok := en[key]; !ok {
+				t.Errorf("%s: extra key %q", lang, key)
+			}
+		}
+	}
+}
+
+func TestTranslations_PlaceholderConsistency(t *testing.T) {
+	for key, enVal := range translations["en"] {
+		want := placeholders(enVal)
+		for lang, m := range translations {
+			if lang == "en" {
+				continue
+			}
+			got := placeholders(m[key])
+			if strings.Join(got, ",") != strings.Join(want, ",") {
+				t.Errorf("%s: key %q has placeholders %v, en has %v", lang, key, got, want)
+			}
+		}
+	}
+}
+
+func placeholders(s string) []string {
+	var out []string
+	seen := map[string]bool{}
+	for _, m := range placeholderRe.FindAllStringSubmatch(s, -1) {
+		if !seen[m[1]] {
+			seen[m[1]] = true
+			out = append(out, m[1])
+		}
+	}
+	sort.Strings(out)
+	return out
+}
+
+func TestNegotiate(t *testing.T) {
+	cases := map[string]string{
+		"zh-CN,zh;q=0.9,en;q=0.8":    "zh",
+		"en-US,en;q=0.9":             "en",
+		"pt-BR":                      "pt",
+		"fr":                         "fr",
+		"de-DE,de;q=0.9":             "de",
+		"nl,es;q=0.8":                "es",
+		"sw":                         "en",
+		"":                           "en",
+		"ZH":                         "zh",
+		"ko-KR,ko;q=0.9":             "ko",
+		"ar,en;q=0.9":                "ar",
+		"ja":                         "ja",
+		"en-GB,en;q=0.9,zh-CN;q=0.8": "en",
+	}
+	for header, want := range cases {
+		if got := Negotiate(header); got != want {
+			t.Errorf("Negotiate(%q) = %q, want %q", header, got, want)
+		}
+	}
+}
 
 func TestT_English(t *testing.T) {
 	got := T("en", "email.assignment.cta")
diff --git a/api/internal/i18n/translations/ar.json b/api/internal/i18n/translations/ar.json
index 4c184d8a..9348bbd1 100644
--- a/api/internal/i18n/translations/ar.json
+++ b/api/internal/i18n/translations/ar.json
@@ -18,7 +18,7 @@
 
   "email.status_change.subject": "[{{projectKey}}] #{{itemNumber}} تم تغيير الحالة إلى {{newStatus}}: {{title}}",
   "email.status_change.intro": "قام <strong>{{actorName}}</strong> بتغيير حالة عنصر عمل معيّن لك:",
-  "email.status_change.status": "الحالة: <strong>{{oldStatus}}</strong> \u2192 <strong>{{newStatus}}</strong>",
+  "email.status_change.status": "الحالة: <strong>{{oldStatus}}</strong> → <strong>{{newStatus}}</strong>",
   "email.status_change.cta": "عرض عنصر العمل",
   "email.status_change.footer": "لقد تلقيت هذا البريد الإلكتروني لأن إشعارات تغيير الحالة مفعّلة للعناصر المعيّنة. يمكنك تغيير تفضيلات الإشعارات في إعدادات Taskwondo.",
 
@@ -35,5 +35,53 @@
   "email.invite.subject": "تمت دعوتك إلى مشروع {{projectName}}",
   "email.invite.intro": "قام <strong>{{inviterName}}</strong> بدعوتك للانضمام إلى مشروع <strong>{{projectName}}</strong> بصفة <strong>{{role}}</strong>.",
   "email.invite.cta": "قبول الدعوة",
-  "email.invite.footer": "لقد تلقيت هذا البريد الإلكتروني لأن شخصًا ما دعاك إلى مشروع في Taskwondo. إذا لم تتعرف على هذه الدعوة، يمكنك تجاهل هذا البريد الإلكتروني."
+  "email.invite.footer": "لقد تلقيت هذا البريد الإلكتروني لأن شخصًا ما دعاك إلى مشروع في Taskwondo. إذا لم تتعرف على هذه الدعوة، يمكنك تجاهل هذا البريد الإلكتروني.",
+
+  "email.namespace_invite.subject": "تمت دعوتك إلى {{namespaceName}}",
+  "email.namespace_invite.intro": "دعاك <strong>{{inviterName}}</strong> للانضمام إلى مساحة العمل <strong>{{namespaceName}}</strong> بدور <strong>{{role}}</strong>.",
+  "email.namespace_invite.cta": "قبول الدعوة",
+  "email.namespace_invite.footer": "وصلك هذا البريد الإلكتروني لأن أحدًا دعاك للانضمام إلى مساحة عمل في Taskwondo. إذا لم تتعرف على هذه الدعوة، يمكنك تجاهل هذا البريد بأمان.",
+
+  "email.sla_breach.subject": "[{{projectKey}}] تحذير SLA: #{{itemNumber}} — \"{{title}}\" (المستوى {{level}})",
+  "email.sla_breach.intro": "أوشكت إحدى عناصر العمل على تجاوز هدف SLA أو تجاوزته:",
+  "email.sla_breach.sla_status": "SLA: تم استخدام <strong>{{percentage}}%</strong> من الوقت المستهدف",
+  "email.sla_breach.elapsed": "الوقت المنقضي: <strong>{{elapsed}}</strong> من <strong>{{target}}</strong>",
+  "email.sla_breach.level": "مستوى التصعيد: <strong>{{level}}</strong>",
+  "email.sla_breach.status": "الحالة: <strong>{{statusName}}</strong>",
+  "email.sla_breach.cta": "عرض عنصر العمل",
+  "email.sla_breach.footer": "وصلك هذا البريد الإلكتروني لأنك في قائمة التصعيد لهذا المشروع. يمكنك تغيير تفضيلات الإشعارات في إعدادات Taskwondo.",
+
+  "email.oncall.incoming.subject": "[{{projectKey}}] أنت الآن في نوبة المناوبة لفريق {{teamName}}",
+  "email.oncall.outgoing.subject": "[{{projectKey}}] انتهت نوبة المناوبة لفريق {{teamName}}",
+
+  "email.oncall.override.created.subject": "[{{projectKey}}] تم إسناد بديل مناوبة لفريق {{teamName}}",
+  "email.oncall.override.covered.subject": "[{{projectKey}}] تمت تغطية نوبة المناوبة لفريق {{teamName}}",
+  "email.oncall.override.cancelled.subject": "[{{projectKey}}] تم إلغاء بديل المناوبة لفريق {{teamName}}",
+
+  "email.oncall.cta": "عرض جدول المناوبات",
+  "email.oncall.rotation.footer": "هذا إشعار آلي بتناوب المناوبات من Taskwondo.",
+  "email.oncall.override.footer": "هذا إشعار آلي باستبدال المناوبات من Taskwondo.",
+
+  "email.oncall.incoming.intro": "أنت الآن في نوبة المناوبة لفريق <strong>{{teamName}}</strong> في المشروع {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.incoming.note": "يرجى التأكد من أنك متفرغ للرد على أي مشكلات واردة خلال نوبتك.",
+  "email.oncall.outgoing.intro": "انتهت نوبة المناوبة لفريق <strong>{{teamName}}</strong> في المشروع {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.outgoing.note": "شكرًا على خدمتك خلال نوبتك.",
+  "email.oncall.override.created.intro": "تم تكليفك باستبدال المناوبة لفريق <strong>{{teamName}}</strong> في المشروع {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.override.created.period": "فترة الاستبدال: من <strong>{{startAt}}</strong> إلى <strong>{{endAt}}</strong>.",
+  "email.oncall.override.created.note": "يرجى التأكد من أنك متفرغ للرد على أي مشكلات واردة خلال هذه الفترة.",
+  "email.oncall.override.covered.intro": "تمت تغطية نوبة المناوبة لفريق <strong>{{teamName}}</strong> في المشروع {{projectBadge}} <strong>{{projectName}}</strong> بواسطة <strong>{{coveringUser}}</strong>.",
+  "email.oncall.override.covered.period": "فترة الاستبدال: من <strong>{{startAt}}</strong> إلى <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.intro": "تم إلغاء استبدال المناوبة لفريق <strong>{{teamName}}</strong> في المشروع {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.override.cancelled.period": "كان الاستبدال مجدولًا للفترة: من <strong>{{startAt}}</strong> إلى <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.note": "سينطبق جدول تناوب المناوبات المعتاد على هذه الفترة.",
+
+  "email.greeting": "مرحبًا {{name}}،",
+  "email.verify.subject": "تحقق من بريدك الإلكتروني",
+  "email.verify.intro": "انقر على الزر أدناه للتحقق من عنوان بريدك الإلكتروني وتعيين كلمة المرور:",
+  "email.verify.cta": "التحقق من البريد",
+  "email.verify.note": "ينتهي هذا الرابط خلال 24 ساعة. إذا لم تطلب ذلك، يمكنك تجاهل هذا البريد بأمان.",
+  "email.reset.subject": "إعادة تعيين كلمة المرور",
+  "email.reset.intro": "وصلنا طلب لإعادة تعيين كلمة المرور. انقر على الزر أدناه لاختيار كلمة مرور جديدة:",
+  "email.reset.cta": "إعادة تعيين كلمة المرور",
+  "email.reset.note": "ينتهي هذا الرابط خلال ساعة واحدة. إذا لم تطلب ذلك، يمكنك تجاهل هذا البريد بأمان."
 }
diff --git a/api/internal/i18n/translations/de.json b/api/internal/i18n/translations/de.json
index 9744725f..69fb19a0 100644
--- a/api/internal/i18n/translations/de.json
+++ b/api/internal/i18n/translations/de.json
@@ -18,7 +18,7 @@
 
   "email.status_change.subject": "[{{projectKey}}] #{{itemNumber}} Status geändert zu {{newStatus}}: {{title}}",
   "email.status_change.intro": "<strong>{{actorName}}</strong> hat den Status eines Ihnen zugewiesenen Arbeitselements geändert:",
-  "email.status_change.status": "Status: <strong>{{oldStatus}}</strong> \u2192 <strong>{{newStatus}}</strong>",
+  "email.status_change.status": "Status: <strong>{{oldStatus}}</strong> → <strong>{{newStatus}}</strong>",
   "email.status_change.cta": "Arbeitselement ansehen",
   "email.status_change.footer": "Sie haben diese E-Mail erhalten, weil Sie Statusänderungsbenachrichtigungen für zugewiesene Elemente aktiviert haben. Sie können Ihre Benachrichtigungseinstellungen in den Taskwondo-Einstellungen ändern.",
 
@@ -35,5 +35,53 @@
   "email.invite.subject": "Sie wurden zum Projekt {{projectName}} eingeladen",
   "email.invite.intro": "<strong>{{inviterName}}</strong> hat Sie eingeladen, dem Projekt <strong>{{projectName}}</strong> als <strong>{{role}}</strong> beizutreten.",
   "email.invite.cta": "Einladung annehmen",
-  "email.invite.footer": "Sie haben diese E-Mail erhalten, weil jemand Sie zu einem Taskwondo-Projekt eingeladen hat. Wenn Sie diese Einladung nicht kennen, können Sie diese E-Mail ignorieren."
+  "email.invite.footer": "Sie haben diese E-Mail erhalten, weil jemand Sie zu einem Taskwondo-Projekt eingeladen hat. Wenn Sie diese Einladung nicht kennen, können Sie diese E-Mail ignorieren.",
+
+  "email.namespace_invite.subject": "Sie wurden in {{namespaceName}} eingeladen",
+  "email.namespace_invite.intro": "<strong>{{inviterName}}</strong> hat Sie eingeladen, dem Workspace <strong>{{namespaceName}}</strong> als <strong>{{role}}</strong> beizutreten.",
+  "email.namespace_invite.cta": "Einladung annehmen",
+  "email.namespace_invite.footer": "Sie erhalten diese E-Mail, weil Sie jemand in einen Taskwondo-Workspace eingeladen hat. Wenn Sie diese Einladung nicht kennen, können Sie diese E-Mail einfach ignorieren.",
+
+  "email.sla_breach.subject": "[{{projectKey}}] SLA-Warnung: #{{itemNumber}} — \"{{title}}\" (Stufe {{level}})",
+  "email.sla_breach.intro": "Ein Workitem erreicht oder hat sein SLA-Ziel überschritten:",
+  "email.sla_breach.sla_status": "SLA: <strong>{{percentage}}%</strong> der Zielzeit verbraucht",
+  "email.sla_breach.elapsed": "Vergangene Zeit: <strong>{{elapsed}}</strong> von <strong>{{target}}</strong>",
+  "email.sla_breach.level": "Eskalationsstufe: <strong>{{level}}</strong>",
+  "email.sla_breach.status": "Status: <strong>{{statusName}}</strong>",
+  "email.sla_breach.cta": "Workitem anzeigen",
+  "email.sla_breach.footer": "Sie erhalten diese E-Mail, weil Sie auf der Eskalationsliste für dieses Projekt stehen. Sie können Ihre Benachrichtigungseinstellungen in den Taskwondo-Einstellungen ändern.",
+
+  "email.oncall.incoming.subject": "[{{projectKey}}] Sie haben jetzt Bereitschaft für {{teamName}}",
+  "email.oncall.outgoing.subject": "[{{projectKey}}] Ihre Bereitschaft für {{teamName}} ist beendet",
+
+  "email.oncall.override.created.subject": "[{{projectKey}}] Bereitschaftsvertretung für {{teamName}} zugewiesen",
+  "email.oncall.override.covered.subject": "[{{projectKey}}] Ihre Bereitschaft für {{teamName}} wurde übernommen",
+  "email.oncall.override.cancelled.subject": "[{{projectKey}}] Bereitschaftsvertretung für {{teamName}} storniert",
+
+  "email.oncall.cta": "Bereitschaftsplan anzeigen",
+  "email.oncall.rotation.footer": "Dies ist eine automatische Benachrichtigung zur Bereitschaftsrotation von Taskwondo.",
+  "email.oncall.override.footer": "Dies ist eine automatische Benachrichtigung zur Bereitschaftsvertretung von Taskwondo.",
+
+  "email.oncall.incoming.intro": "Sie haben jetzt Bereitschaft für <strong>{{teamName}}</strong> im Projekt {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.incoming.note": "Stellen Sie bitte sicher, dass Sie während Ihrer Bereitschaft für eingehende Probleme erreichbar sind.",
+  "email.oncall.outgoing.intro": "Ihre Bereitschaft für <strong>{{teamName}}</strong> im Projekt {{projectBadge}} <strong>{{projectName}}</strong> ist beendet.",
+  "email.oncall.outgoing.note": "Vielen Dank für Ihren Einsatz während Ihrer Bereitschaft.",
+  "email.oncall.override.created.intro": "Ihnen wurde eine Bereitschaftsvertretung für <strong>{{teamName}}</strong> im Projekt {{projectBadge}} <strong>{{projectName}}</strong> zugewiesen.",
+  "email.oncall.override.created.period": "Ihr Vertretungszeitraum: <strong>{{startAt}}</strong> bis <strong>{{endAt}}</strong>.",
+  "email.oncall.override.created.note": "Stellen Sie bitte sicher, dass Sie in diesem Zeitraum für eingehende Probleme erreichbar sind.",
+  "email.oncall.override.covered.intro": "Ihre Bereitschaft für <strong>{{teamName}}</strong> im Projekt {{projectBadge}} <strong>{{projectName}}</strong> wurde von <strong>{{coveringUser}}</strong> übernommen.",
+  "email.oncall.override.covered.period": "Vertretungszeitraum: <strong>{{startAt}}</strong> bis <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.intro": "Eine Bereitschaftsvertretung für <strong>{{teamName}}</strong> im Projekt {{projectBadge}} <strong>{{projectName}}</strong> wurde storniert.",
+  "email.oncall.override.cancelled.period": "Die Vertretung war vorgesehen für: <strong>{{startAt}}</strong> bis <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.note": "Für diesen Zeitraum gilt wieder der reguläre Bereitschaftsplan.",
+
+  "email.greeting": "Hallo {{name}},",
+  "email.verify.subject": "Bestätigen Sie Ihre E-Mail-Adresse",
+  "email.verify.intro": "Klicken Sie auf die Schaltfläche unten, um Ihre E-Mail-Adresse zu bestätigen und Ihr Passwort festzulegen:",
+  "email.verify.cta": "E-Mail bestätigen",
+  "email.verify.note": "Dieser Link ist 24 Stunden gültig. Wenn Sie dies nicht angefordert haben, können Sie diese E-Mail einfach ignorieren.",
+  "email.reset.subject": "Passwort zurücksetzen",
+  "email.reset.intro": "Wir haben eine Anfrage zum Zurücksetzen Ihres Passworts erhalten. Klicken Sie auf die Schaltfläche unten, um ein neues Passwort zu wählen:",
+  "email.reset.cta": "Passwort zurücksetzen",
+  "email.reset.note": "Dieser Link ist 1 Stunde gültig. Wenn Sie dies nicht angefordert haben, können Sie diese E-Mail einfach ignorieren."
 }
diff --git a/api/internal/i18n/translations/en.json b/api/internal/i18n/translations/en.json
index c610e176..00a95b7c 100644
--- a/api/internal/i18n/translations/en.json
+++ b/api/internal/i18n/translations/en.json
@@ -60,5 +60,28 @@
 
   "email.oncall.cta": "View on-call schedule",
   "email.oncall.rotation.footer": "This is an automated on-call rotation notification from Taskwondo.",
-  "email.oncall.override.footer": "This is an automated on-call override notification from Taskwondo."
+  "email.oncall.override.footer": "This is an automated on-call override notification from Taskwondo.",
+
+  "email.oncall.incoming.intro": "You are now on-call for <strong>{{teamName}}</strong> in project {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.incoming.note": "Please make sure you are available to respond to any incoming issues during your shift.",
+  "email.oncall.outgoing.intro": "Your on-call shift for <strong>{{teamName}}</strong> in project {{projectBadge}} <strong>{{projectName}}</strong> has ended.",
+  "email.oncall.outgoing.note": "Thank you for your service during your shift.",
+  "email.oncall.override.created.intro": "You have been assigned an on-call override for <strong>{{teamName}}</strong> in project {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.override.created.period": "Your override period: <strong>{{startAt}}</strong> to <strong>{{endAt}}</strong>.",
+  "email.oncall.override.created.note": "Please make sure you are available to respond to any incoming issues during this period.",
+  "email.oncall.override.covered.intro": "Your on-call shift for <strong>{{teamName}}</strong> in project {{projectBadge}} <strong>{{projectName}}</strong> has been covered by <strong>{{coveringUser}}</strong>.",
+  "email.oncall.override.covered.period": "Override period: <strong>{{startAt}}</strong> to <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.intro": "An on-call override for <strong>{{teamName}}</strong> in project {{projectBadge}} <strong>{{projectName}}</strong> has been cancelled.",
+  "email.oncall.override.cancelled.period": "The override was scheduled for: <strong>{{startAt}}</strong> to <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.note": "The regular on-call rotation schedule will apply for this period.",
+
+  "email.greeting": "Hi {{name}},",
+  "email.verify.subject": "Verify your email",
+  "email.verify.intro": "Click the button below to verify your email address and set your password:",
+  "email.verify.cta": "Verify email",
+  "email.verify.note": "This link expires in 24 hours. If you didn't request this, you can safely ignore this email.",
+  "email.reset.subject": "Reset your password",
+  "email.reset.intro": "We received a request to reset your password. Click the button below to choose a new password:",
+  "email.reset.cta": "Reset password",
+  "email.reset.note": "This link expires in 1 hour. If you didn't request this, you can safely ignore this email."
 }
diff --git a/api/internal/i18n/translations/es.json b/api/internal/i18n/translations/es.json
index 6156a736..08d41a93 100644
--- a/api/internal/i18n/translations/es.json
+++ b/api/internal/i18n/translations/es.json
@@ -18,7 +18,7 @@
 
   "email.status_change.subject": "[{{projectKey}}] #{{itemNumber}} estado cambiado a {{newStatus}}: {{title}}",
   "email.status_change.intro": "<strong>{{actorName}}</strong> cambió el estado de un elemento de trabajo asignado a ti:",
-  "email.status_change.status": "Estado: <strong>{{oldStatus}}</strong> \u2192 <strong>{{newStatus}}</strong>",
+  "email.status_change.status": "Estado: <strong>{{oldStatus}}</strong> → <strong>{{newStatus}}</strong>",
   "email.status_change.cta": "Ver Elemento de Trabajo",
   "email.status_change.footer": "Recibiste este correo porque tienes las notificaciones de cambio de estado activadas para elementos asignados. Puedes cambiar tus preferencias de notificación en la configuración de Taskwondo.",
 
@@ -35,5 +35,53 @@
   "email.invite.subject": "Has sido invitado al proyecto {{projectName}}",
   "email.invite.intro": "<strong>{{inviterName}}</strong> te invitó a unirte al proyecto <strong>{{projectName}}</strong> como <strong>{{role}}</strong>.",
   "email.invite.cta": "Aceptar invitación",
-  "email.invite.footer": "Recibiste este correo porque alguien te invitó a un proyecto en Taskwondo. Si no reconoces esta invitación, puedes ignorar este correo."
+  "email.invite.footer": "Recibiste este correo porque alguien te invitó a un proyecto en Taskwondo. Si no reconoces esta invitación, puedes ignorar este correo.",
+
+  "email.namespace_invite.subject": "Has sido invitado a {{namespaceName}}",
+  "email.namespace_invite.intro": "<strong>{{inviterName}}</strong> te invitó a unirte al workspace <strong>{{namespaceName}}</strong> como <strong>{{role}}</strong>.",
+  "email.namespace_invite.cta": "Aceptar invitación",
+  "email.namespace_invite.footer": "Recibiste este correo porque alguien te invitó a un workspace de Taskwondo. Si no reconoces esta invitación, puedes ignorar este correo sin problema.",
+
+  "email.sla_breach.subject": "[{{projectKey}}] Aviso de SLA: #{{itemNumber}} — \"{{title}}\" (Nivel {{level}})",
+  "email.sla_breach.intro": "Un elemento de trabajo está por alcanzar o ha superado su objetivo de SLA:",
+  "email.sla_breach.sla_status": "SLA: se usó el <strong>{{percentage}}%</strong> del tiempo objetivo",
+  "email.sla_breach.elapsed": "Tiempo transcurrido: <strong>{{elapsed}}</strong> de <strong>{{target}}</strong>",
+  "email.sla_breach.level": "Nivel de escalamiento: <strong>{{level}}</strong>",
+  "email.sla_breach.status": "Estado: <strong>{{statusName}}</strong>",
+  "email.sla_breach.cta": "Ver elemento de trabajo",
+  "email.sla_breach.footer": "Recibiste este correo porque estás en la lista de escalamiento de este proyecto. Puedes cambiar tus preferencias de notificación en la configuración de Taskwondo.",
+
+  "email.oncall.incoming.subject": "[{{projectKey}}] Ahora estás de guardia en {{teamName}}",
+  "email.oncall.outgoing.subject": "[{{projectKey}}] Tu turno de guardia en {{teamName}} ha terminado",
+
+  "email.oncall.override.created.subject": "[{{projectKey}}] Sustitución de guardia asignada para {{teamName}}",
+  "email.oncall.override.covered.subject": "[{{projectKey}}] Tu turno de guardia en {{teamName}} ha sido cubierto",
+  "email.oncall.override.cancelled.subject": "[{{projectKey}}] Sustitución de guardia cancelada para {{teamName}}",
+
+  "email.oncall.cta": "Ver calendario de guardias",
+  "email.oncall.rotation.footer": "Esta es una notificación automática de rotación de guardias de Taskwondo.",
+  "email.oncall.override.footer": "Esta es una notificación automática de sustitución de guardias de Taskwondo.",
+
+  "email.oncall.incoming.intro": "Ahora estás de guardia por <strong>{{teamName}}</strong> en el proyecto {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.incoming.note": "Asegúrate de estar disponible para responder a cualquier incidencia durante tu turno.",
+  "email.oncall.outgoing.intro": "Tu turno de guardia por <strong>{{teamName}}</strong> en el proyecto {{projectBadge}} <strong>{{projectName}}</strong> ha terminado.",
+  "email.oncall.outgoing.note": "Gracias por tu servicio durante tu turno.",
+  "email.oncall.override.created.intro": "Se te ha asignado una sustitución de guardia por <strong>{{teamName}}</strong> en el proyecto {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.override.created.period": "Tu período de sustitución: del <strong>{{startAt}}</strong> al <strong>{{endAt}}</strong>.",
+  "email.oncall.override.created.note": "Asegúrate de estar disponible para responder a cualquier incidencia durante este período.",
+  "email.oncall.override.covered.intro": "Tu turno de guardia por <strong>{{teamName}}</strong> en el proyecto {{projectBadge}} <strong>{{projectName}}</strong> ha sido cubierto por <strong>{{coveringUser}}</strong>.",
+  "email.oncall.override.covered.period": "Período de sustitución: del <strong>{{startAt}}</strong> al <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.intro": "Se ha cancelado una sustitución de guardia por <strong>{{teamName}}</strong> en el proyecto {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.override.cancelled.period": "La sustitución estaba programada para: <strong>{{startAt}}</strong> a <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.note": "La rotación de guardias habitual se aplicará a este período.",
+
+  "email.greeting": "Hola, {{name}}:",
+  "email.verify.subject": "Verifica tu correo electrónico",
+  "email.verify.intro": "Haz clic en el botón de abajo para verificar tu dirección de correo y establecer tu contraseña:",
+  "email.verify.cta": "Verificar correo",
+  "email.verify.note": "Este enlace caduca en 24 horas. Si no solicitaste esto, puedes ignorar este correo sin problema.",
+  "email.reset.subject": "Restablecer tu contraseña",
+  "email.reset.intro": "Recibimos una solicitud para restablecer tu contraseña. Haz clic en el botón de abajo para elegir una nueva:",
+  "email.reset.cta": "Restablecer contraseña",
+  "email.reset.note": "Este enlace caduca en 1 hora. Si no solicitaste esto, puedes ignorar este correo sin problema."
 }
diff --git a/api/internal/i18n/translations/fr.json b/api/internal/i18n/translations/fr.json
index 8f63bc50..51b3047f 100644
--- a/api/internal/i18n/translations/fr.json
+++ b/api/internal/i18n/translations/fr.json
@@ -18,7 +18,7 @@
 
   "email.status_change.subject": "[{{projectKey}}] #{{itemNumber}} statut changé en {{newStatus}} : {{title}}",
   "email.status_change.intro": "<strong>{{actorName}}</strong> a changé le statut d'un élément de travail qui vous est assigné :",
-  "email.status_change.status": "Statut : <strong>{{oldStatus}}</strong> \u2192 <strong>{{newStatus}}</strong>",
+  "email.status_change.status": "Statut : <strong>{{oldStatus}}</strong> → <strong>{{newStatus}}</strong>",
   "email.status_change.cta": "Voir l'élément de travail",
   "email.status_change.footer": "Vous avez reçu cet e-mail car vous avez activé les notifications de changement de statut pour les éléments assignés. Vous pouvez modifier vos préférences de notification dans les paramètres de Taskwondo.",
 
@@ -35,5 +35,53 @@
   "email.invite.subject": "Vous avez été invité au projet {{projectName}}",
   "email.invite.intro": "<strong>{{inviterName}}</strong> vous a invité à rejoindre le projet <strong>{{projectName}}</strong> en tant que <strong>{{role}}</strong>.",
   "email.invite.cta": "Accepter l'invitation",
-  "email.invite.footer": "Vous avez reçu cet e-mail parce que quelqu'un vous a invité à un projet Taskwondo. Si vous ne reconnaissez pas cette invitation, vous pouvez ignorer cet e-mail."
+  "email.invite.footer": "Vous avez reçu cet e-mail parce que quelqu'un vous a invité à un projet Taskwondo. Si vous ne reconnaissez pas cette invitation, vous pouvez ignorer cet e-mail.",
+
+  "email.namespace_invite.subject": "Vous avez été invité à rejoindre {{namespaceName}}",
+  "email.namespace_invite.intro": "<strong>{{inviterName}}</strong> vous a invité à rejoindre l'espace de travail <strong>{{namespaceName}}</strong> en tant que <strong>{{role}}</strong>.",
+  "email.namespace_invite.cta": "Accepter l'invitation",
+  "email.namespace_invite.footer": "Vous recevez cet e-mail car quelqu'un vous a invité à rejoindre un espace de travail Taskwondo. Si vous ne reconnaissez pas cette invitation, vous pouvez ignorer cet e-mail.",
+
+  "email.sla_breach.subject": "[{{projectKey}}] Alerte SLA : #{{itemNumber}} — « {{title}} » (Niveau {{level}})",
+  "email.sla_breach.intro": "Un élément de travail approche ou a dépassé son objectif SLA :",
+  "email.sla_breach.sla_status": "SLA : <strong>{{percentage}} %</strong> du temps cible utilisé",
+  "email.sla_breach.elapsed": "Temps écoulé : <strong>{{elapsed}}</strong> sur <strong>{{target}}</strong>",
+  "email.sla_breach.level": "Niveau d'escalade : <strong>{{level}}</strong>",
+  "email.sla_breach.status": "Statut : <strong>{{statusName}}</strong>",
+  "email.sla_breach.cta": "Voir l'élément de travail",
+  "email.sla_breach.footer": "Vous recevez cet e-mail car vous figurez dans la liste d'escalade de ce projet. Vous pouvez modifier vos préférences de notification dans les paramètres Taskwondo.",
+
+  "email.oncall.incoming.subject": "[{{projectKey}}] Vous êtes maintenant d'astreinte pour {{teamName}}",
+  "email.oncall.outgoing.subject": "[{{projectKey}}] Votre astreinte pour {{teamName}} est terminée",
+
+  "email.oncall.override.created.subject": "[{{projectKey}}] Remplacement d'astreinte attribué pour {{teamName}}",
+  "email.oncall.override.covered.subject": "[{{projectKey}}] Votre astreinte pour {{teamName}} a été couverte",
+  "email.oncall.override.cancelled.subject": "[{{projectKey}}] Remplacement d'astreinte annulé pour {{teamName}}",
+
+  "email.oncall.cta": "Voir le planning d'astreinte",
+  "email.oncall.rotation.footer": "Ceci est une notification automatique de rotation d'astreinte de Taskwondo.",
+  "email.oncall.override.footer": "Ceci est une notification automatique de remplacement d'astreinte de Taskwondo.",
+
+  "email.oncall.incoming.intro": "Vous êtes maintenant d'astreinte pour <strong>{{teamName}}</strong> dans le projet {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.incoming.note": "Assurez-vous d'être disponible pour répondre aux incidents pendant votre astreinte.",
+  "email.oncall.outgoing.intro": "Votre astreinte pour <strong>{{teamName}}</strong> dans le projet {{projectBadge}} <strong>{{projectName}}</strong> est terminée.",
+  "email.oncall.outgoing.note": "Merci pour votre service pendant votre astreinte.",
+  "email.oncall.override.created.intro": "Un remplacement d'astreinte pour <strong>{{teamName}}</strong> vous a été attribué dans le projet {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.override.created.period": "Votre période de remplacement : du <strong>{{startAt}}</strong> au <strong>{{endAt}}</strong>.",
+  "email.oncall.override.created.note": "Assurez-vous d'être disponible pour répondre aux incidents pendant cette période.",
+  "email.oncall.override.covered.intro": "Votre astreinte pour <strong>{{teamName}}</strong> dans le projet {{projectBadge}} <strong>{{projectName}}</strong> a été couverte par <strong>{{coveringUser}}</strong>.",
+  "email.oncall.override.covered.period": "Période de remplacement : du <strong>{{startAt}}</strong> au <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.intro": "Un remplacement d'astreinte pour <strong>{{teamName}}</strong> dans le projet {{projectBadge}} <strong>{{projectName}}</strong> a été annulé.",
+  "email.oncall.override.cancelled.period": "Le remplacement était prévu pour : <strong>{{startAt}}</strong> à <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.note": "La rotation d'astreinte habituelle s'appliquera à cette période.",
+
+  "email.greeting": "Bonjour {{name}},",
+  "email.verify.subject": "Vérifiez votre adresse e-mail",
+  "email.verify.intro": "Cliquez sur le bouton ci-dessous pour vérifier votre adresse e-mail et définir votre mot de passe :",
+  "email.verify.cta": "Vérifier l'e-mail",
+  "email.verify.note": "Ce lien expire dans 24 heures. Si vous n'êtes pas à l'origine de cette demande, vous pouvez ignorer cet e-mail.",
+  "email.reset.subject": "Réinitialisez votre mot de passe",
+  "email.reset.intro": "Nous avons reçu une demande de réinitialisation de votre mot de passe. Cliquez sur le bouton ci-dessous pour en choisir un nouveau :",
+  "email.reset.cta": "Réinitialiser le mot de passe",
+  "email.reset.note": "Ce lien expire dans 1 heure. Si vous n'êtes pas à l'origine de cette demande, vous pouvez ignorer cet e-mail."
 }
diff --git a/api/internal/i18n/translations/ja.json b/api/internal/i18n/translations/ja.json
index f1ee1f45..4418eb8d 100644
--- a/api/internal/i18n/translations/ja.json
+++ b/api/internal/i18n/translations/ja.json
@@ -18,7 +18,7 @@
 
   "email.status_change.subject": "[{{projectKey}}] #{{itemNumber}} のステータスが {{newStatus}} に変更されました: {{title}}",
   "email.status_change.intro": "<strong>{{actorName}}</strong> があなたに割り当てられた作業項目のステータスを変更しました:",
-  "email.status_change.status": "ステータス: <strong>{{oldStatus}}</strong> \u2192 <strong>{{newStatus}}</strong>",
+  "email.status_change.status": "ステータス: <strong>{{oldStatus}}</strong> → <strong>{{newStatus}}</strong>",
   "email.status_change.cta": "作業項目を表示",
   "email.status_change.footer": "このメールは、割り当てられた項目のステータス変更通知が有効になっているために送信されました。通知設定はTaskwondoの設定で変更できます。",
 
@@ -35,5 +35,53 @@
   "email.invite.subject": "プロジェクト{{projectName}}に招待されました",
   "email.invite.intro": "<strong>{{inviterName}}</strong>があなたをプロジェクト<strong>{{projectName}}</strong>に<strong>{{role}}</strong>として参加するよう招待しました。",
   "email.invite.cta": "招待を承諾",
-  "email.invite.footer": "このメールは、Taskwondoプロジェクトに招待されたために送信されました。この招待に心当たりがない場合は、このメールを無視してください。"
+  "email.invite.footer": "このメールは、Taskwondoプロジェクトに招待されたために送信されました。この招待に心当たりがない場合は、このメールを無視してください。",
+
+  "email.namespace_invite.subject": "{{namespaceName}} に招待されました",
+  "email.namespace_invite.intro": "<strong>{{inviterName}}</strong> さんがワークスペース <strong>{{namespaceName}}</strong> への参加(<strong>{{role}}</strong> として)を招待しています。",
+  "email.namespace_invite.cta": "招待を受ける",
+  "email.namespace_invite.footer": "Taskwondo ワークスペースへの招待が届いたため、このメールをお送りしています。心当たりがない場合は、このメールを無視してください。",
+
+  "email.sla_breach.subject": "[{{projectKey}}] SLA警告: #{{itemNumber}} — \"{{title}}\"（レベル {{level}}）",
+  "email.sla_breach.intro": "ワークアイテムがSLA目標に達するか、超過しました:",
+  "email.sla_breach.sla_status": "SLA: 目標時間の <strong>{{percentage}}%</strong> を使用",
+  "email.sla_breach.elapsed": "経過時間: <strong>{{target}}</strong> のうち <strong>{{elapsed}}</strong>",
+  "email.sla_breach.level": "エスカレーションレベル: <strong>{{level}}</strong>",
+  "email.sla_breach.status": "ステータス: <strong>{{statusName}}</strong>",
+  "email.sla_breach.cta": "ワークアイテムを表示",
+  "email.sla_breach.footer": "このプロジェクトのエスカレーションリストに登録されているため、このメールをお送りしています。通知設定は Taskwondo の設定で変更できます。",
+
+  "email.oncall.incoming.subject": "[{{projectKey}}] {{teamName}} のオンコールが開始されました",
+  "email.oncall.outgoing.subject": "[{{projectKey}}] {{teamName}} のオンコールシフトが終了しました",
+
+  "email.oncall.override.created.subject": "[{{projectKey}}] {{teamName}} のオンコール代理が割り当てられました",
+  "email.oncall.override.covered.subject": "[{{projectKey}}] {{teamName}} のオンコールシフトが代理されました",
+  "email.oncall.override.cancelled.subject": "[{{projectKey}}] {{teamName}} のオンコール代理がキャンセルされました",
+
+  "email.oncall.cta": "オンコールスケジュールを表示",
+  "email.oncall.rotation.footer": "これは Taskwondo からのオンコールローテーションの自動通知です。",
+  "email.oncall.override.footer": "これは Taskwondo からのオンコール代理の自動通知です。",
+
+  "email.oncall.incoming.intro": "プロジェクト {{projectBadge}} <strong>{{projectName}}</strong> のチーム <strong>{{teamName}}</strong> のオンコールが始まりました。",
+  "email.oncall.incoming.note": "シフト中は障害や問い合わせに対応できるようご確認ください。",
+  "email.oncall.outgoing.intro": "プロジェクト {{projectBadge}} <strong>{{projectName}}</strong> のチーム <strong>{{teamName}}</strong> のオンコールシフトが終了しました。",
+  "email.oncall.outgoing.note": "シフト中のご対応、ありがとうございました。",
+  "email.oncall.override.created.intro": "プロジェクト {{projectBadge}} <strong>{{projectName}}</strong> のチーム <strong>{{teamName}}</strong> のオンコール代理が割り当てられました。",
+  "email.oncall.override.created.period": "代理期間: <strong>{{startAt}}</strong> 〜 <strong>{{endAt}}</strong>",
+  "email.oncall.override.created.note": "期間中は障害や問い合わせに対応できるようご確認ください。",
+  "email.oncall.override.covered.intro": "プロジェクト {{projectBadge}} <strong>{{projectName}}</strong> のチーム <strong>{{teamName}}</strong> のオンコールシフトは <strong>{{coveringUser}}</strong> が代理しました。",
+  "email.oncall.override.covered.period": "代理期間: <strong>{{startAt}}</strong> 〜 <strong>{{endAt}}</strong>",
+  "email.oncall.override.cancelled.intro": "プロジェクト {{projectBadge}} <strong>{{projectName}}</strong> のチーム <strong>{{teamName}}</strong> のオンコール代理はキャンセルされました。",
+  "email.oncall.override.cancelled.period": "代理予定だった期間: <strong>{{startAt}}</strong> 〜 <strong>{{endAt}}</strong>",
+  "email.oncall.override.cancelled.note": "この期間は通常のオンコールローテーションが適用されます。",
+
+  "email.greeting": "{{name}} さん、こんにちは。",
+  "email.verify.subject": "メールアドレスの確認",
+  "email.verify.intro": "下記のボタンをクリックしてメールアドレスを確認し、パスワードを設定してください:",
+  "email.verify.cta": "メールを確認",
+  "email.verify.note": "このリンクは24時間で有効期限切れになります。心当たりがない場合は、このメールを無視してください。",
+  "email.reset.subject": "パスワードのリセット",
+  "email.reset.intro": "パスワードのリセット依頼を受け付けました。下記のボタンをクリックして新しいパスワードを設定してください:",
+  "email.reset.cta": "パスワードをリセット",
+  "email.reset.note": "このリンクは1時間で有効期限切れになります。心当たりがない場合は、このメールを無視してください。"
 }
diff --git a/api/internal/i18n/translations/ko.json b/api/internal/i18n/translations/ko.json
index ec56c860..c8dfd6e0 100644
--- a/api/internal/i18n/translations/ko.json
+++ b/api/internal/i18n/translations/ko.json
@@ -18,7 +18,7 @@
 
   "email.status_change.subject": "[{{projectKey}}] #{{itemNumber}} 상태가 {{newStatus}}(으)로 변경됨: {{title}}",
   "email.status_change.intro": "<strong>{{actorName}}</strong>님이 할당된 작업 항목의 상태를 변경했습니다:",
-  "email.status_change.status": "상태: <strong>{{oldStatus}}</strong> \u2192 <strong>{{newStatus}}</strong>",
+  "email.status_change.status": "상태: <strong>{{oldStatus}}</strong> → <strong>{{newStatus}}</strong>",
   "email.status_change.cta": "작업 항목 보기",
   "email.status_change.footer": "할당된 항목의 상태 변경 알림이 활성화되어 있어 이 이메일을 받았습니다. Taskwondo 설정에서 알림 기본 설정을 변경할 수 있습니다.",
 
@@ -35,5 +35,53 @@
   "email.invite.subject": "프로젝트 {{projectName}}에 초대되었습니다",
   "email.invite.intro": "<strong>{{inviterName}}</strong>님이 프로젝트 <strong>{{projectName}}</strong>에 <strong>{{role}}</strong>(으)로 참여하도록 초대했습니다.",
   "email.invite.cta": "초대 수락",
-  "email.invite.footer": "이 이메일은 누군가가 Taskwondo 프로젝트에 초대하여 발송되었습니다. 이 초대를 인식하지 못하시면 이 이메일을 무시하셔도 됩니다."
+  "email.invite.footer": "이 이메일은 누군가가 Taskwondo 프로젝트에 초대하여 발송되었습니다. 이 초대를 인식하지 못하시면 이 이메일을 무시하셔도 됩니다.",
+
+  "email.namespace_invite.subject": "{{namespaceName}}(으)로 초대되었습니다",
+  "email.namespace_invite.intro": "<strong>{{inviterName}}</strong>님이 워크스페이스 <strong>{{namespaceName}}</strong>에 <strong>{{role}}</strong>(으)로 참가하도록 초대했습니다.",
+  "email.namespace_invite.cta": "초대 수락",
+  "email.namespace_invite.footer": "Taskwondo 워크스페이스 초대가 도착하여 이 메일을 보내드립니다. 인지할 수 없는 초대라면 이 메일을 무시하셔도 안전합니다.",
+
+  "email.sla_breach.subject": "[{{projectKey}}] SLA 경고: #{{itemNumber}} — \"{{title}}\" (레벨 {{level}})",
+  "email.sla_breach.intro": "워크 항목이 SLA 목표에 도달하거나 초과했습니다:",
+  "email.sla_breach.sla_status": "SLA: 목표 시간의 <strong>{{percentage}}%</strong> 사용",
+  "email.sla_breach.elapsed": "경과 시간: <strong>{{target}}</strong> 중 <strong>{{elapsed}}</strong>",
+  "email.sla_breach.level": "에스컬레이션 레벨: <strong>{{level}}</strong>",
+  "email.sla_breach.status": "상태: <strong>{{statusName}}</strong>",
+  "email.sla_breach.cta": "워크 항목 보기",
+  "email.sla_breach.footer": "이 프로젝트의 에스컬레이션 목록에 포함되어 있어 이 메일을 받았습니다. Taskwondo 설정에서 알림 환경을 변경할 수 있습니다.",
+
+  "email.oncall.incoming.subject": "[{{projectKey}}] 이제 {{teamName}} 온콜입니다",
+  "email.oncall.outgoing.subject": "[{{projectKey}}] {{teamName}} 온콜 교대가 종료되었습니다",
+
+  "email.oncall.override.created.subject": "[{{projectKey}}] {{teamName}} 온콜 대리 교대가 배정되었습니다",
+  "email.oncall.override.covered.subject": "[{{projectKey}}] {{teamName}} 온콜 교대가 대리되었습니다",
+  "email.oncall.override.cancelled.subject": "[{{projectKey}}] {{teamName}} 온콜 대리 교대가 취소되었습니다",
+
+  "email.oncall.cta": "온콜 일정 보기",
+  "email.oncall.rotation.footer": "Taskwondo의 자동 온콜 로테이션 알림입니다.",
+  "email.oncall.override.footer": "Taskwondo의 자동 온콜 대리 알림입니다.",
+
+  "email.oncall.incoming.intro": "프로젝트 {{projectBadge}} <strong>{{projectName}}</strong>의 <strong>{{teamName}}</strong> 온콜이 시작되었습니다.",
+  "email.oncall.incoming.note": "교대 중 접수되는 문제에 대응할 수 있는지 확인해 주세요.",
+  "email.oncall.outgoing.intro": "프로젝트 {{projectBadge}} <strong>{{projectName}}</strong>의 <strong>{{teamName}}</strong> 온콜 교대가 종료되었습니다.",
+  "email.oncall.outgoing.note": "교대 중 수고해 주셔서 감사합니다.",
+  "email.oncall.override.created.intro": "프로젝트 {{projectBadge}} <strong>{{projectName}}</strong>의 <strong>{{teamName}}</strong> 온콜 대리 교대가 배정되었습니다.",
+  "email.oncall.override.created.period": "대리 기간: <strong>{{startAt}}</strong> ~ <strong>{{endAt}}</strong>",
+  "email.oncall.override.created.note": "해당 기간에 접수되는 문제에 대응할 수 있는지 확인해 주세요.",
+  "email.oncall.override.covered.intro": "프로젝트 {{projectBadge}} <strong>{{projectName}}</strong>의 <strong>{{teamName}}</strong> 온콜 교대를 <strong>{{coveringUser}}</strong> 님이 대리했습니다.",
+  "email.oncall.override.covered.period": "대리 기간: <strong>{{startAt}}</strong> ~ <strong>{{endAt}}</strong>",
+  "email.oncall.override.cancelled.intro": "프로젝트 {{projectBadge}} <strong>{{projectName}}</strong>의 <strong>{{teamName}}</strong> 온콜 대리 교대가 취소되었습니다.",
+  "email.oncall.override.cancelled.period": "예상됐던 대리 기간: <strong>{{startAt}}</strong> ~ <strong>{{endAt}}</strong>",
+  "email.oncall.override.cancelled.note": "해당 기간에는 일반 온콜 로테이션 일정이 적용됩니다.",
+
+  "email.greeting": "{{name}}님, 안녕하세요.",
+  "email.verify.subject": "이메일 인증",
+  "email.verify.intro": "아래 버튼을 클릭하여 이메일 주소를 인증하고 비밀번호를 설정하세요:",
+  "email.verify.cta": "이메일 인증",
+  "email.verify.note": "이 링크는 24시간 후 만료됩니다. 요청한 적이 없다면 이 메일을 무시하셔도 안전합니다.",
+  "email.reset.subject": "비밀번호 재설정",
+  "email.reset.intro": "비밀번호 재설정 요청을 받았습니다. 아래 버튼을 클릭하여 새 비밀번호를 설정하세요:",
+  "email.reset.cta": "비밀번호 재설정",
+  "email.reset.note": "이 링크는 1시간 후 만료됩니다. 요청한 적이 없다면 이 메일을 무시하셔도 안전합니다."
 }
diff --git a/api/internal/i18n/translations/pt.json b/api/internal/i18n/translations/pt.json
index cafed4ca..9462e6f3 100644
--- a/api/internal/i18n/translations/pt.json
+++ b/api/internal/i18n/translations/pt.json
@@ -18,7 +18,7 @@
 
   "email.status_change.subject": "[{{projectKey}}] #{{itemNumber}} status alterado para {{newStatus}}: {{title}}",
   "email.status_change.intro": "<strong>{{actorName}}</strong> alterou o status de um item de trabalho atribuído a você:",
-  "email.status_change.status": "Status: <strong>{{oldStatus}}</strong> \u2192 <strong>{{newStatus}}</strong>",
+  "email.status_change.status": "Status: <strong>{{oldStatus}}</strong> → <strong>{{newStatus}}</strong>",
   "email.status_change.cta": "Ver Item de Trabalho",
   "email.status_change.footer": "Você recebeu este e-mail porque tem as notificações de alteração de status ativadas para itens atribuídos. Você pode alterar suas preferências de notificação nas configurações do Taskwondo.",
 
@@ -35,5 +35,53 @@
   "email.invite.subject": "Você foi convidado para o projeto {{projectName}}",
   "email.invite.intro": "<strong>{{inviterName}}</strong> convidou você para participar do projeto <strong>{{projectName}}</strong> como <strong>{{role}}</strong>.",
   "email.invite.cta": "Aceitar convite",
-  "email.invite.footer": "Você recebeu este e-mail porque alguém convidou você para um projeto no Taskwondo. Se você não reconhece este convite, pode ignorar este e-mail."
+  "email.invite.footer": "Você recebeu este e-mail porque alguém convidou você para um projeto no Taskwondo. Se você não reconhece este convite, pode ignorar este e-mail.",
+
+  "email.namespace_invite.subject": "Você foi convidado para {{namespaceName}}",
+  "email.namespace_invite.intro": "<strong>{{inviterName}}</strong> convidou você para entrar no workspace <strong>{{namespaceName}}</strong> como <strong>{{role}}</strong>.",
+  "email.namespace_invite.cta": "Aceitar Convite",
+  "email.namespace_invite.footer": "Você recebeu este e-mail porque alguém o convidou para um workspace do Taskwondo. Se você não reconhece este convite, pode ignorar este e-mail com segurança.",
+
+  "email.sla_breach.subject": "[{{projectKey}}] Aviso de SLA: #{{itemNumber}} — \"{{title}}\" (Nível {{level}})",
+  "email.sla_breach.intro": "Um item de trabalho está prestes a atingir ou excedeu sua meta de SLA:",
+  "email.sla_breach.sla_status": "SLA: <strong>{{percentage}}%</strong> do tempo alvo utilizado",
+  "email.sla_breach.elapsed": "Tempo decorrido: <strong>{{elapsed}}</strong> de <strong>{{target}}</strong>",
+  "email.sla_breach.level": "Nível de Escalonamento: <strong>{{level}}</strong>",
+  "email.sla_breach.status": "Status: <strong>{{statusName}}</strong>",
+  "email.sla_breach.cta": "Ver Item de Trabalho",
+  "email.sla_breach.footer": "Você recebeu este e-mail porque está na lista de escalonamento deste projeto. Você pode alterar suas preferências de notificação nas configurações do Taskwondo.",
+
+  "email.oncall.incoming.subject": "[{{projectKey}}] Você agora está de plantão em {{teamName}}",
+  "email.oncall.outgoing.subject": "[{{projectKey}}] Seu plantão em {{teamName}} terminou",
+
+  "email.oncall.override.created.subject": "[{{projectKey}}] Substituição de plantão atribuída para {{teamName}}",
+  "email.oncall.override.covered.subject": "[{{projectKey}}] Seu plantão em {{teamName}} foi coberto por um substituto",
+  "email.oncall.override.cancelled.subject": "[{{projectKey}}] Substituição de plantão cancelada para {{teamName}}",
+
+  "email.oncall.cta": "Ver agenda de plantão",
+  "email.oncall.rotation.footer": "Esta é uma notificação automática de rodízio de plantão do Taskwondo.",
+  "email.oncall.override.footer": "Esta é uma notificação automática de substituição de plantão do Taskwondo.",
+
+  "email.oncall.incoming.intro": "Você agora está de plantão por <strong>{{teamName}}</strong> no projeto {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.incoming.note": "Certifique-se de estar disponível para responder a quaisquer chamados durante seu plantão.",
+  "email.oncall.outgoing.intro": "Seu plantão por <strong>{{teamName}}</strong> no projeto {{projectBadge}} <strong>{{projectName}}</strong> terminou.",
+  "email.oncall.outgoing.note": "Obrigado pelo seu serviço durante o plantão.",
+  "email.oncall.override.created.intro": "Foi atribuída a você uma substituição de plantão por <strong>{{teamName}}</strong> no projeto {{projectBadge}} <strong>{{projectName}}</strong>.",
+  "email.oncall.override.created.period": "Seu período de substituição: de <strong>{{startAt}}</strong> até <strong>{{endAt}}</strong>.",
+  "email.oncall.override.created.note": "Certifique-se de estar disponível para responder a quaisquer chamados durante este período.",
+  "email.oncall.override.covered.intro": "Seu plantão por <strong>{{teamName}}</strong> no projeto {{projectBadge}} <strong>{{projectName}}</strong> foi coberto por <strong>{{coveringUser}}</strong>.",
+  "email.oncall.override.covered.period": "Período de substituição: de <strong>{{startAt}}</strong> até <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.intro": "Uma substituição de plantão por <strong>{{teamName}}</strong> no projeto {{projectBadge}} <strong>{{projectName}}</strong> foi cancelada.",
+  "email.oncall.override.cancelled.period": "A substituição estava agendada para: <strong>{{startAt}}</strong> a <strong>{{endAt}}</strong>.",
+  "email.oncall.override.cancelled.note": "O rodízio normal de plantão se aplicará a este período.",
+
+  "email.greeting": "Olá, {{name}},",
+  "email.verify.subject": "Verifique seu e-mail",
+  "email.verify.intro": "Clique no botão abaixo para verificar seu endereço de e-mail e definir sua senha:",
+  "email.verify.cta": "Verificar e-mail",
+  "email.verify.note": "Este link expira em 24 horas. Se você não fez esta solicitação, pode ignorar este e-mail com segurança.",
+  "email.reset.subject": "Redefinir sua senha",
+  "email.reset.intro": "Recebemos uma solicitação para redefinir sua senha. Clique no botão abaixo para escolher uma nova senha:",
+  "email.reset.cta": "Redefinir senha",
+  "email.reset.note": "Este link expira em 1 hora. Se você não fez esta solicitação, pode ignorar este e-mail com segurança."
 }
diff --git a/api/internal/i18n/translations/zh.json b/api/internal/i18n/translations/zh.json
index 0d7ad19c..1d3093af 100644
--- a/api/internal/i18n/translations/zh.json
+++ b/api/internal/i18n/translations/zh.json
@@ -18,7 +18,7 @@
 
   "email.status_change.subject": "[{{projectKey}}] #{{itemNumber}} 状态已更改为 {{newStatus}}: {{title}}",
   "email.status_change.intro": "<strong>{{actorName}}</strong> 更改了分配给您的工作项的状态:",
-  "email.status_change.status": "状态: <strong>{{oldStatus}}</strong> \u2192 <strong>{{newStatus}}</strong>",
+  "email.status_change.status": "状态: <strong>{{oldStatus}}</strong> → <strong>{{newStatus}}</strong>",
   "email.status_change.cta": "查看工作项",
   "email.status_change.footer": "您收到此邮件是因为您已为分配的项目启用了状态更改通知。您可以在 Taskwondo 设置中更改通知偏好。",
 
@@ -35,5 +35,53 @@
   "email.invite.subject": "您已被邀请加入项目 {{projectName}}",
   "email.invite.intro": "<strong>{{inviterName}}</strong> 邀请您以 <strong>{{role}}</strong> 身份加入项目 <strong>{{projectName}}</strong>。",
   "email.invite.cta": "接受邀请",
-  "email.invite.footer": "您收到此邮件是因为有人邀请您加入 Taskwondo 项目。如果您不认识此邀请，可以安全地忽略此邮件。"
+  "email.invite.footer": "您收到此邮件是因为有人邀请您加入 Taskwondo 项目。如果您不认识此邀请，可以安全地忽略此邮件。",
+
+  "email.namespace_invite.subject": "您已被邀请加入 {{namespaceName}}",
+  "email.namespace_invite.intro": "<strong>{{inviterName}}</strong> 邀请您以 <strong>{{role}}</strong> 身份加入工作区 <strong>{{namespaceName}}</strong>。",
+  "email.namespace_invite.cta": "接受邀请",
+  "email.namespace_invite.footer": "您收到此邮件是因为有人邀请您加入 Taskwondo 工作区。如果您不认识此邀请,可以安全地忽略此邮件。",
+
+  "email.sla_breach.subject": "[{{projectKey}}] SLA 警告: #{{itemNumber}} — \"{{title}}\" (级别 {{level}})",
+  "email.sla_breach.intro": "一个工作项即将达到或已超过其 SLA 目标:",
+  "email.sla_breach.sla_status": "SLA: 已使用目标时间的 <strong>{{percentage}}%</strong>",
+  "email.sla_breach.elapsed": "已用时间: <strong>{{elapsed}}</strong> / <strong>{{target}}</strong>",
+  "email.sla_breach.level": "升级级别: <strong>{{level}}</strong>",
+  "email.sla_breach.status": "状态: <strong>{{statusName}}</strong>",
+  "email.sla_breach.cta": "查看工作项",
+  "email.sla_breach.footer": "您收到此邮件是因为您在此项目的升级名单中。您可以在 Taskwondo 设置中更改通知偏好。",
+
+  "email.oncall.incoming.subject": "[{{projectKey}}] 您现在开始为 {{teamName}} 值班",
+  "email.oncall.outgoing.subject": "[{{projectKey}}] 您为 {{teamName}} 的值班已结束",
+
+  "email.oncall.override.created.subject": "[{{projectKey}}] {{teamName}} 已指派值班替补",
+  "email.oncall.override.covered.subject": "[{{projectKey}}] 您为 {{teamName}} 的值班已被接替",
+  "email.oncall.override.cancelled.subject": "[{{projectKey}}] {{teamName}} 的值班替补已取消",
+
+  "email.oncall.cta": "查看值班排班",
+  "email.oncall.rotation.footer": "这是来自 Taskwondo 的自动值班轮转通知。",
+  "email.oncall.override.footer": "这是来自 Taskwondo 的自动值班替补通知。",
+
+  "email.oncall.incoming.intro": "您现在是项目 {{projectBadge}} <strong>{{projectName}}</strong> 中团队 <strong>{{teamName}}</strong> 的值班人员。",
+  "email.oncall.incoming.note": "请确保您在值班期间能够响应任何紧急问题。",
+  "email.oncall.outgoing.intro": "您在项目 {{projectBadge}} <strong>{{projectName}}</strong> 中团队 <strong>{{teamName}}</strong> 的值班已结束。",
+  "email.oncall.outgoing.note": "感谢您在值班期间的付出。",
+  "email.oncall.override.created.intro": "您被指派了 <strong>{{teamName}}</strong> 的值班替补,项目 {{projectBadge}} <strong>{{projectName}}</strong>。",
+  "email.oncall.override.created.period": "您的替补时段: <strong>{{startAt}}</strong> 至 <strong>{{endAt}}</strong>。",
+  "email.oncall.override.created.note": "请确保您在该时段内能够响应任何紧急问题。",
+  "email.oncall.override.covered.intro": "您在项目 {{projectBadge}} <strong>{{projectName}}</strong> 中团队 <strong>{{teamName}}</strong> 的值班已由 <strong>{{coveringUser}}</strong> 接替。",
+  "email.oncall.override.covered.period": "替补时段: <strong>{{startAt}}</strong> 至 <strong>{{endAt}}</strong>。",
+  "email.oncall.override.cancelled.intro": "项目 {{projectBadge}} <strong>{{projectName}}</strong> 中团队 <strong>{{teamName}}</strong> 的一条值班替补已被取消。",
+  "email.oncall.override.cancelled.period": "原替补时段: <strong>{{startAt}}</strong> 至 <strong>{{endAt}}</strong>。",
+  "email.oncall.override.cancelled.note": "该时段将按正常值班轮转计划执行。",
+
+  "email.greeting": "您好 {{name}}:",
+  "email.verify.subject": "验证您的邮箱",
+  "email.verify.intro": "点击下方按钮验证您的邮箱地址并设置密码:",
+  "email.verify.cta": "验证邮箱",
+  "email.verify.note": "此链接 24 小时内有效。如果您没有提出此请求,可以安全地忽略此邮件。",
+  "email.reset.subject": "重置您的密码",
+  "email.reset.intro": "我们收到了重置您密码的请求。点击下方按钮设置新密码:",
+  "email.reset.cta": "重置密码",
+  "email.reset.note": "此链接 1 小时内有效。如果您没有提出此请求,可以安全地忽略此邮件。"
 }
diff --git a/api/internal/model/errors.go b/api/internal/model/errors.go
index ea754154..c35fd202 100644
--- a/api/internal/model/errors.go
+++ b/api/internal/model/errors.go
@@ -16,6 +16,8 @@ var (
 	ErrValidation         = errors.New("validation error")
 	ErrInvalidTransition  = errors.New("invalid transition")
 	ErrOAuthAccountLinked      = errors.New("oauth account already linked to another user")
+	ErrOAuthEmailMissing       = errors.New("identity provider did not return an email address")
+	ErrOAuthEmailUnverified    = errors.New("email address is not verified")
 	ErrStatusIncompatible      = errors.New("status incompatible with target workflow")
 	ErrEmbeddingUnavailable    = errors.New("embedding service unavailable")
 	ErrFeatureDisabled         = errors.New("feature is disabled")
diff --git a/api/internal/model/oauth.go b/api/internal/model/oauth.go
index a6be9f0a..c0b8b7f6 100644
--- a/api/internal/model/oauth.go
+++ b/api/internal/model/oauth.go
@@ -12,6 +12,8 @@ const (
 	OAuthProviderGoogle    = "google"
 	OAuthProviderGitHub    = "github"
 	OAuthProviderMicrosoft = "microsoft"
+	// OAuthProviderSSO is the generic OIDC provider configured by admins.
+	OAuthProviderSSO = "sso"
 )
 
 // OAuthAccount represents a linked external identity.
diff --git a/api/internal/model/system_setting.go b/api/internal/model/system_setting.go
index 6387bc86..2de80e0d 100644
--- a/api/internal/model/system_setting.go
+++ b/api/internal/model/system_setting.go
@@ -3,6 +3,8 @@ package model
 import (
 	"encoding/json"
 	"fmt"
+	"net/url"
+	"strings"
 	"time"
 )
 
@@ -24,6 +26,12 @@ const (
 	SettingAuthGoogleEnabled            = "auth_google_enabled"
 	SettingAuthGitHubEnabled            = "auth_github_enabled"
 	SettingAuthMicrosoftEnabled         = "auth_microsoft_enabled"
+	SettingAuthSSOEnabled               = "auth_sso_enabled"
+
+	// SettingSSOAutoProvision gates account creation for SSO logins whose email
+	// does not match an existing user. When false (the default), SSO can only
+	// sign in users that already exist.
+	SettingSSOAutoProvision = "sso_auto_provision_enabled"
 
 	// OAuth provider ordering (JSON array of provider names, e.g. ["discord","google","github"])
 	SettingOAuthProviderOrder = "oauth_provider_order"
@@ -33,6 +41,7 @@ const (
 	SettingOAuthGoogleConfig  = "oauth_google_config"
 	SettingOAuthGitHubConfig     = "oauth_github_config"
 	SettingOAuthMicrosoftConfig  = "oauth_microsoft_config"
+	SettingOAuthSSOConfig        = "oauth_sso_config"
 
 	// Deny lists (JSON arrays of strings)
 	SettingReservedNamespaceSlugs = "reserved_namespace_slugs"
@@ -67,6 +76,9 @@ type SMTPConfig struct {
 	Encryption  string `json:"encryption"` // "starttls", "tls", "none"
 	FromAddress string `json:"from_address"`
 	FromName    string `json:"from_name"`
+	// SkipCertVerify disables TLS certificate verification for SMTP connections.
+	// Intended for self-hosted servers with self-signed or expired certificates.
+	SkipCertVerify bool `json:"skip_cert_verify"`
 }
 
 // Validate checks that all required fields are present when SMTP is enabled.
@@ -98,9 +110,43 @@ func (c *SMTPConfig) Validate() error {
 // OAuthProviderConfig holds OAuth provider credentials stored as a system setting.
 // The enabled/disabled state is stored separately in auth_*_enabled settings.
 // The redirect URI is derived automatically from BaseURL + "/auth/{provider}/callback".
+//
+// The Issuer/Scopes/ButtonLabel/DisablePKCE/RequireVerifiedEmail fields are only
+// used by the generic SSO provider (OAuthProviderSSO). They are omitted from the
+// stored JSON for the built-in providers, whose behaviour is unchanged.
 type OAuthProviderConfig struct {
 	ClientID     string `json:"client_id"`
 	ClientSecret string `json:"client_secret"`
+
+	// Issuer is the OIDC issuer URL used for discovery (SSO only).
+	Issuer string `json:"issuer,omitempty"`
+	// Scopes overrides the requested scopes; empty means DefaultSSOScopes.
+	Scopes []string `json:"scopes,omitempty"`
+	// ButtonLabel overrides the login button text (SSO only).
+	ButtonLabel string `json:"button_label,omitempty"`
+	// DisablePKCE turns off the S256 code challenge for IdPs that reject it.
+	DisablePKCE bool `json:"disable_pkce,omitempty"`
+	// RequireVerifiedEmail gates logins on the email_verified claim. nil = required.
+	RequireVerifiedEmail *bool `json:"require_verified_email,omitempty"`
+}
+
+// DefaultSSOScopes are requested when Scopes is empty.
+var DefaultSSOScopes = []string{"openid", "profile", "email"}
+
+// MaxSSOButtonLabel is the length cap for the login button override.
+const MaxSSOButtonLabel = 40
+
+// RequiresVerifiedEmail reports whether the email_verified claim must be true.
+func (c *OAuthProviderConfig) RequiresVerifiedEmail() bool {
+	return c.RequireVerifiedEmail == nil || *c.RequireVerifiedEmail
+}
+
+// ScopeList returns the configured scopes or the defaults.
+func (c *OAuthProviderConfig) ScopeList() []string {
+	if len(c.Scopes) == 0 {
+		return DefaultSSOScopes
+	}
+	return c.Scopes
 }
 
 // Validate checks that all required fields are present.
@@ -114,6 +160,80 @@ func (c *OAuthProviderConfig) Validate() error {
 	return nil
 }
 
+// ValidateAs validates the config in the context of a specific provider,
+// enforcing the extra fields the generic SSO provider needs.
+func (c *OAuthProviderConfig) ValidateAs(provider string) error {
+	if err := c.Validate(); err != nil {
+		return err
+	}
+	if provider != OAuthProviderSSO {
+		return nil
+	}
+
+	issuer, err := NormalizeOIDCIssuer(c.Issuer)
+	if err != nil {
+		return err
+	}
+	c.Issuer = issuer
+
+	label := strings.TrimSpace(c.ButtonLabel)
+	if len([]rune(label)) > MaxSSOButtonLabel {
+		return fmt.Errorf("%w: button_label must be %d characters or fewer", ErrValidation, MaxSSOButtonLabel)
+	}
+	c.ButtonLabel = label
+
+	for _, s := range c.Scopes {
+		if s == "" || strings.ContainsAny(s, " \t") {
+			return fmt.Errorf("%w: scopes must be individual non-empty strings", ErrValidation)
+		}
+	}
+	if len(c.Scopes) > 0 && !containsString(c.Scopes, "openid") {
+		return fmt.Errorf("%w: scopes must include openid", ErrValidation)
+	}
+	return nil
+}
+
+// NormalizeOIDCIssuer validates and canonicalises an OIDC issuer URL.
+// Issuers are compared exactly by the discovery and verification code, so
+// trailing slashes are stripped and only https (or http for local dev) is kept.
+func NormalizeOIDCIssuer(raw string) (string, error) {
+	issuer := strings.TrimSpace(raw)
+	if issuer == "" {
+		return "", fmt.Errorf("%w: issuer is required", ErrValidation)
+	}
+	u, err := url.Parse(issuer)
+	if err != nil || u.Host == "" {
+		return "", fmt.Errorf("%w: issuer must be an absolute URL", ErrValidation)
+	}
+	if u.Scheme != "https" && !(u.Scheme == "http" && (u.Hostname() == "localhost" || strings.HasPrefix(u.Host, "127."))) {
+		return "", fmt.Errorf("%w: issuer must use https", ErrValidation)
+	}
+	if u.User != nil || u.RawQuery != "" || u.Fragment != "" {
+		return "", fmt.Errorf("%w: issuer must not contain credentials, query or fragment", ErrValidation)
+	}
+	return strings.TrimRight(u.String(), "/"), nil
+}
+
+func containsString(haystack []string, needle string) bool {
+	for _, s := range haystack {
+		if s == needle {
+			return true
+		}
+	}
+	return false
+}
+
+// KnownOAuthProviders lists every provider whose credentials live in an
+// oauth_<name>_config setting and whose switch is an auth_<name>_enabled
+// setting. Login-page ordering and enablement are driven off this list.
+var KnownOAuthProviders = []string{
+	OAuthProviderDiscord,
+	OAuthProviderGoogle,
+	OAuthProviderGitHub,
+	OAuthProviderMicrosoft,
+	OAuthProviderSSO,
+}
+
 // OAuthConfigSettingKey returns the system setting key for a given provider name.
 func OAuthConfigSettingKey(provider string) string {
 	switch provider {
@@ -125,6 +245,27 @@ func OAuthConfigSettingKey(provider string) string {
 		return SettingOAuthGitHubConfig
 	case OAuthProviderMicrosoft:
 		return SettingOAuthMicrosoftConfig
+	case OAuthProviderSSO:
+		return SettingOAuthSSOConfig
+	default:
+		return ""
+	}
+}
+
+// OAuthEnabledSettingKey returns the auth_<provider>_enabled setting key for a
+// provider name, or empty string for unknown providers.
+func OAuthEnabledSettingKey(provider string) string {
+	switch provider {
+	case OAuthProviderDiscord:
+		return SettingAuthDiscordEnabled
+	case OAuthProviderGoogle:
+		return SettingAuthGoogleEnabled
+	case OAuthProviderGitHub:
+		return SettingAuthGitHubEnabled
+	case OAuthProviderMicrosoft:
+		return SettingAuthMicrosoftEnabled
+	case OAuthProviderSSO:
+		return SettingAuthSSOEnabled
 	default:
 		return ""
 	}
@@ -142,6 +283,8 @@ func OAuthEnabledToConfigKey(enabledKey string) string {
 		return SettingOAuthGitHubConfig
 	case SettingAuthMicrosoftEnabled:
 		return SettingOAuthMicrosoftConfig
+	case SettingAuthSSOEnabled:
+		return SettingOAuthSSOConfig
 	default:
 		return ""
 	}
diff --git a/api/internal/repository/embedding.go b/api/internal/repository/embedding.go
index d941344e..e0541cd7 100644
--- a/api/internal/repository/embedding.go
+++ b/api/internal/repository/embedding.go
@@ -13,7 +13,8 @@ import (
 
 // EmbeddingRepository handles embedding persistence.
 type EmbeddingRepository struct {
-	db *sql.DB
+	db          *sql.DB
+	tableExists *bool
 }
 
 // NewEmbeddingRepository creates a new EmbeddingRepository.
@@ -21,8 +22,26 @@ func NewEmbeddingRepository(db *sql.DB) *EmbeddingRepository {
 	return &EmbeddingRepository{db: db}
 }
 
+// checkTableExists checks if the embeddings table exists.
+func (r *EmbeddingRepository) checkTableExists(ctx context.Context) bool {
+	if r.tableExists != nil {
+		return *r.tableExists
+	}
+	var exists bool
+	err := r.db.QueryRowContext(ctx,
+		`SELECT EXISTS (SELECT 1 FROM information_schema.tables WHERE table_name = 'embeddings')`).Scan(&exists)
+	if err != nil {
+		exists = false
+	}
+	r.tableExists = &exists
+	return exists
+}
+
 // Upsert inserts or updates an embedding for the given entity.
 func (r *EmbeddingRepository) Upsert(ctx context.Context, e *model.Embedding) error {
+	if !r.checkTableExists(ctx) {
+		return model.ErrEmbeddingUnavailable
+	}
 	_, err := r.db.ExecContext(ctx,
 		`INSERT INTO embeddings (id, entity_type, entity_id, project_id, content, embedding, indexed_at)
 		 VALUES ($1, $2, $3, $4, $5, $6::vector, now())
@@ -38,6 +57,9 @@ func (r *EmbeddingRepository) Upsert(ctx context.Context, e *model.Embedding) er
 
 // Delete removes an embedding for the given entity.
 func (r *EmbeddingRepository) Delete(ctx context.Context, entityType string, entityID uuid.UUID) error {
+	if !r.checkTableExists(ctx) {
+		return nil
+	}
 	_, err := r.db.ExecContext(ctx,
 		`DELETE FROM embeddings WHERE entity_type = $1 AND entity_id = $2`,
 		entityType, entityID)
@@ -55,6 +77,9 @@ func (r *EmbeddingRepository) Delete(ctx context.Context, entityType string, ent
 // the parent work item's reporter and visibility are enforced. Customer-only
 // projects cannot surface project/milestone/queue embeddings.
 func (r *EmbeddingRepository) SearchByVector(ctx context.Context, vector []float32, filter *model.SearchFilter, access model.SearchAccess) ([]model.SearchResult, error) {
+	if !r.checkTableExists(ctx) {
+		return nil, model.ErrEmbeddingUnavailable
+	}
 	limit := filter.Limit
 	if limit <= 0 || limit > 100 {
 		limit = 20
diff --git a/api/internal/repository/helpers.go b/api/internal/repository/helpers.go
index 4907f2b2..a6298164 100644
--- a/api/internal/repository/helpers.go
+++ b/api/internal/repository/helpers.go
@@ -4,11 +4,48 @@ import (
 	"context"
 	"database/sql"
 	"fmt"
+	"regexp"
 	"strings"
 
 	"github.com/google/uuid"
 )
 
+// cjkRe matches Han, Hiragana, Katakana and Hangul characters. PostgreSQL's
+// built-in text-search configs tokenize on whitespace, so a CJK run ends up as
+// one lexeme and phrase queries never match unless typed exactly.
+var cjkRe = regexp.MustCompile(`[\p{Han}\p{Hiragana}\p{Katakana}\p{Hangul}]`)
+
+// containsCJK reports whether s contains at least one CJK character, in which
+// case search queries add an ILIKE substring fallback on top of FTS.
+func containsCJK(s string) bool {
+	return cjkRe.MatchString(s)
+}
+
+// likePattern wraps s with `%` wildcards and escapes the LIKE special
+// characters (`\`, `%`, `_`) so user input is matched literally.
+func likePattern(s string) string {
+	r := strings.NewReplacer(`\`, `\\`, `%`, `\%`, `_`, `\_`)
+	return "%" + r.Replace(s) + "%"
+}
+
+// searchFilterCondition builds the WHERE fragment matching `query` against the
+// tsvector column at vectorCol. When the query contains CJK characters it also
+// ORs an ILIKE substring match over rawCols, because Postgres' whitespace
+// tokenizer cannot split CJK runs into lexemes and a pure tsquery would match
+// nothing. Placeholders are `?` for use with queryBuilder.add.
+func searchFilterCondition(vectorCol string, rawCols []string, query string) (string, []interface{}) {
+	cond := fmt.Sprintf("(%s @@ plainto_tsquery('english', ?) OR %s @@ plainto_tsquery('simple', ?)", vectorCol, vectorCol)
+	args := []interface{}{query, query}
+	if containsCJK(query) {
+		pattern := likePattern(query)
+		for _, col := range rawCols {
+			cond += fmt.Sprintf(" OR %s ILIKE ?", col)
+			args = append(args, pattern)
+		}
+	}
+	return cond + ")", args
+}
+
 // queryBuilder accumulates WHERE-clause conditions and their bound parameters,
 // translating each `?` placeholder in a condition into the next `$N` for
 // lib/pq. Use add() for conditions with parameters and addRaw() for literal
diff --git a/api/internal/repository/helpers_test.go b/api/internal/repository/helpers_test.go
new file mode 100644
index 00000000..3c27370b
--- /dev/null
+++ b/api/internal/repository/helpers_test.go
@@ -0,0 +1,93 @@
+package repository
+
+import (
+	"reflect"
+	"testing"
+)
+
+func TestContainsCJK(t *testing.T) {
+	tests := []struct {
+		name  string
+		input string
+		want  bool
+	}{
+		{"empty", "", false},
+		{"ascii", "login crash", false},
+		{"han", "登录崩溃", true},
+		{"mixed ascii and han", "fix 登录", true},
+		{"hiragana", "ページ", true},
+		{"katakana", "バグ", true},
+		{"hangul", "오류", true},
+		{"punctuation only", "！？。**", false},
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := containsCJK(tt.input); got != tt.want {
+				t.Errorf("containsCJK(%q) = %v, want %v", tt.input, got, tt.want)
+			}
+		})
+	}
+}
+
+func TestLikePattern(t *testing.T) {
+	tests := []struct {
+		name  string
+		input string
+		want  string
+	}{
+		{"plain", "登录", "%登录%"},
+		{"escapes percent", "100%", "%100\\%%"},
+		{"escapes underscore", "a_b", "%a\\_b%"},
+		{"escapes backslash", `a\b`, `%a\\b%`},
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := likePattern(tt.input); got != tt.want {
+				t.Errorf("likePattern(%q) = %q, want %q", tt.input, got, tt.want)
+			}
+		})
+	}
+}
+
+func TestSearchFilterCondition(t *testing.T) {
+	t.Run("latin query stays tsvector-only", func(t *testing.T) {
+		cond, args := searchFilterCondition("search_vector", []string{"title"}, "login")
+		want := "(search_vector @@ plainto_tsquery('english', ?) OR search_vector @@ plainto_tsquery('simple', ?))"
+		if cond != want {
+			t.Errorf("cond = %q, want %q", cond, want)
+		}
+		if !reflect.DeepEqual(args, []interface{}{"login", "login"}) {
+			t.Errorf("args = %v", args)
+		}
+	})
+
+	t.Run("cjk query adds ILIKE fallback per column", func(t *testing.T) {
+		cond, args := searchFilterCondition("w.search_vector", []string{"w.title", "coalesce(w.description, '')"}, "登录")
+		want := "(w.search_vector @@ plainto_tsquery('english', ?) OR w.search_vector @@ plainto_tsquery('simple', ?)" +
+			" OR w.title ILIKE ? OR coalesce(w.description, '') ILIKE ?)"
+		if cond != want {
+			t.Errorf("cond = %q, want %q", cond, want)
+		}
+		if len(args) != 4 {
+			t.Fatalf("len(args) = %d, want 4", len(args))
+		}
+		for _, a := range args[2:] {
+			if a != "%登录%" {
+				t.Errorf("ILIKE arg = %v, want %%登录%%", a)
+			}
+		}
+	})
+
+	t.Run("placeholder count matches arg count", func(t *testing.T) {
+		cond, args := searchFilterCondition("search_vector", []string{"title", "description", "display_id"}, "한글")
+		n := 0
+		for _, r := range cond {
+			if r == '?' {
+				n++
+			}
+		}
+		if n != len(args) {
+			t.Errorf("cond has %d placeholders but %d args", n, len(args))
+		}
+	})
+}
diff --git a/api/internal/repository/inbox.go b/api/internal/repository/inbox.go
index cf8166ba..abd9d397 100644
--- a/api/internal/repository/inbox.go
+++ b/api/internal/repository/inbox.go
@@ -82,7 +82,9 @@ func (r *InboxRepository) List(ctx context.Context, userID uuid.UUID, excludeCom
 	}
 
 	if search != "" {
-		qb.add("(wi.search_vector @@ plainto_tsquery('english', ?) OR wi.search_vector @@ plainto_tsquery('simple', ?))", search, search)
+		// CJK queries additionally get an ILIKE fallback (see searchFilterCondition).
+		cond, args := searchFilterCondition("wi.search_vector", []string{"wi.title", "coalesce(wi.description, '')"}, search)
+		qb.add(cond, args...)
 	}
 
 	if workItemID != nil {
diff --git a/api/internal/repository/milestone.go b/api/internal/repository/milestone.go
index a356f959..0e0190a1 100644
--- a/api/internal/repository/milestone.go
+++ b/api/internal/repository/milestone.go
@@ -32,8 +32,18 @@ func (r *MilestoneRepository) SearchFTS(ctx context.Context, query string, fullP
 		return nil, nil
 	}
 
+	// CJK queries additionally get an ILIKE fallback over name/description,
+	// because Postgres' whitespace tokenizer cannot split CJK runs into lexemes.
+	matchCond := `m.search_vector @@ plainto_tsquery('english', $1)
+		     OR m.search_vector @@ plainto_tsquery('simple', $1)`
+	args := []interface{}{query, pq.Array(fullProjectIDs), limit}
+	if containsCJK(query) {
+		matchCond += "\n\t\t     OR m.name ILIKE $4 OR coalesce(m.description, '') ILIKE $4"
+		args = append(args, likePattern(query))
+	}
+
 	rows, err := r.db.QueryContext(ctx,
-		`SELECT m.id, m.project_id, m.name, m.status,
+		fmt.Sprintf(`SELECT m.id, m.project_id, m.name, m.status,
 		        p.key AS project_key,
 		        COALESCE(n.slug, 'default') AS namespace_slug,
 		        ts_rank(m.search_vector, plainto_tsquery('english', $1)) +
@@ -41,12 +51,11 @@ func (r *MilestoneRepository) SearchFTS(ctx context.Context, query string, fullP
 		 FROM milestones m
 		 JOIN projects p ON p.id = m.project_id
 		 LEFT JOIN namespaces n ON n.id = p.namespace_id
-		 WHERE (m.search_vector @@ plainto_tsquery('english', $1)
-		     OR m.search_vector @@ plainto_tsquery('simple', $1))
+		 WHERE (%s)
 		   AND m.project_id = ANY($2)
 		 ORDER BY rank DESC, m.updated_at DESC
-		 LIMIT $3`,
-		query, pq.Array(fullProjectIDs), limit)
+		 LIMIT $3`, matchCond),
+		args...)
 	if err != nil {
 		return nil, fmt.Errorf("fts search milestones: %w", err)
 	}
diff --git a/api/internal/repository/queue.go b/api/internal/repository/queue.go
index e589b539..5efa08c6 100644
--- a/api/internal/repository/queue.go
+++ b/api/internal/repository/queue.go
@@ -32,8 +32,18 @@ func (r *QueueRepository) SearchFTS(ctx context.Context, query string, fullProje
 		return nil, nil
 	}
 
+	// CJK queries additionally get an ILIKE fallback over name/description,
+	// because Postgres' whitespace tokenizer cannot split CJK runs into lexemes.
+	matchCond := `q.search_vector @@ plainto_tsquery('english', $1)
+		     OR q.search_vector @@ plainto_tsquery('simple', $1)`
+	args := []interface{}{query, pq.Array(fullProjectIDs), limit}
+	if containsCJK(query) {
+		matchCond += "\n\t\t     OR q.name ILIKE $4 OR coalesce(q.description, '') ILIKE $4"
+		args = append(args, likePattern(query))
+	}
+
 	rows, err := r.db.QueryContext(ctx,
-		`SELECT q.id, q.project_id, q.name, q.queue_type,
+		fmt.Sprintf(`SELECT q.id, q.project_id, q.name, q.queue_type,
 		        p.key AS project_key,
 		        COALESCE(n.slug, 'default') AS namespace_slug,
 		        ts_rank(q.search_vector, plainto_tsquery('english', $1)) +
@@ -41,12 +51,11 @@ func (r *QueueRepository) SearchFTS(ctx context.Context, query string, fullProje
 		 FROM queues q
 		 JOIN projects p ON p.id = q.project_id
 		 LEFT JOIN namespaces n ON n.id = p.namespace_id
-		 WHERE (q.search_vector @@ plainto_tsquery('english', $1)
-		     OR q.search_vector @@ plainto_tsquery('simple', $1))
+		 WHERE (%s)
 		   AND q.project_id = ANY($2)
 		 ORDER BY rank DESC, q.updated_at DESC
-		 LIMIT $3`,
-		query, pq.Array(fullProjectIDs), limit)
+		 LIMIT $3`, matchCond),
+		args...)
 	if err != nil {
 		return nil, fmt.Errorf("fts search queues: %w", err)
 	}
diff --git a/api/internal/repository/team.go b/api/internal/repository/team.go
index 94ff9003..09052da5 100644
--- a/api/internal/repository/team.go
+++ b/api/internal/repository/team.go
@@ -32,8 +32,18 @@ func (r *TeamRepository) SearchFTS(ctx context.Context, query string, fullProjec
 		return nil, nil
 	}
 
+	// CJK queries additionally get an ILIKE fallback over name/description,
+	// because Postgres' whitespace tokenizer cannot split CJK runs into lexemes.
+	matchCond := `t.search_vector @@ plainto_tsquery('english', $1)
+		     OR t.search_vector @@ plainto_tsquery('simple', $1)`
+	args := []interface{}{query, pq.Array(fullProjectIDs), limit}
+	if containsCJK(query) {
+		matchCond += "\n\t\t     OR t.name ILIKE $4 OR coalesce(t.description, '') ILIKE $4"
+		args = append(args, likePattern(query))
+	}
+
 	rows, err := r.db.QueryContext(ctx,
-		`SELECT t.id, t.project_id, t.name,
+		fmt.Sprintf(`SELECT t.id, t.project_id, t.name,
 		        p.key AS project_key,
 		        COALESCE(n.slug, 'default') AS namespace_slug,
 		        ts_rank(t.search_vector, plainto_tsquery('english', $1)) +
@@ -41,12 +51,11 @@ func (r *TeamRepository) SearchFTS(ctx context.Context, query string, fullProjec
 		 FROM teams t
 		 JOIN projects p ON p.id = t.project_id
 		 LEFT JOIN namespaces n ON n.id = p.namespace_id
-		 WHERE (t.search_vector @@ plainto_tsquery('english', $1)
-		     OR t.search_vector @@ plainto_tsquery('simple', $1))
+		 WHERE (%s)
 		   AND t.project_id = ANY($2)
 		 ORDER BY rank DESC, t.updated_at DESC
-		 LIMIT $3`,
-		query, pq.Array(fullProjectIDs), limit)
+		 LIMIT $3`, matchCond),
+		args...)
 	if err != nil {
 		return nil, fmt.Errorf("fts search teams: %w", err)
 	}
diff --git a/api/internal/repository/workitem.go b/api/internal/repository/workitem.go
index 05421bbb..c6aa18a5 100644
--- a/api/internal/repository/workitem.go
+++ b/api/internal/repository/workitem.go
@@ -198,9 +198,11 @@ func (r *WorkItemRepository) List(ctx context.Context, projectID uuid.UUID, filt
 		qb.add("wi.id = ANY(?)", pq.Array(filter.ItemIDs))
 	}
 
-	// Full-text search (OR simple config to match display_id tokens like "TF-29")
+	// Full-text search (OR simple config to match display_id tokens like "TF-29").
+	// CJK queries additionally get an ILIKE fallback (see searchFilterCondition).
 	if filter.Search != "" {
-		qb.add("(search_vector @@ plainto_tsquery('english', ?) OR search_vector @@ plainto_tsquery('simple', ?))", filter.Search, filter.Search)
+		cond, args := searchFilterCondition("search_vector", []string{"title", "coalesce(description, '')"}, filter.Search)
+		qb.add(cond, args...)
 	}
 
 	whereClause := qb.whereClause()
@@ -525,7 +527,9 @@ func (r *WorkItemRepository) SearchFTS(ctx context.Context, query string, access
 
 	qb := &queryBuilder{argIndex: 0}
 	qb.add("w.deleted_at IS NULL")
-	qb.add("(w.search_vector @@ plainto_tsquery('english', ?) OR w.search_vector @@ plainto_tsquery('simple', ?))", query, query)
+	// CJK queries additionally get an ILIKE fallback (see searchFilterCondition).
+	searchCond, searchArgs := searchFilterCondition("w.search_vector", []string{"w.title", "coalesce(w.description, '')"}, query)
+	qb.add(searchCond, searchArgs...)
 
 	// RBAC: full-access projects OR (customer projects AND own portal tickets)
 	switch {
diff --git a/api/internal/service/auth.go b/api/internal/service/auth.go
index d594bb9a..6910463f 100644
--- a/api/internal/service/auth.go
+++ b/api/internal/service/auth.go
@@ -11,11 +11,11 @@ import (
 	"errors"
 	"fmt"
 	"html"
-	"net/mail"
 	"image"
 	"image/jpeg"
 	"image/png"
 	"io"
+	"net/mail"
 	"strconv"
 	"strings"
 	"time"
@@ -27,6 +27,7 @@ import (
 	"golang.org/x/image/draw"
 
 	"github.com/marcoshack/taskwondo/internal/crypto"
+	"github.com/marcoshack/taskwondo/internal/i18n"
 	"github.com/marcoshack/taskwondo/internal/model"
 	"github.com/marcoshack/taskwondo/internal/storage"
 )
@@ -116,6 +117,7 @@ type AuthService struct {
 	emailSender        EmailSender
 	encryptor          *crypto.Encryptor
 	storage            storage.Storage
+	ssoCache           *SSODiscoveryCache
 	baseURL            string
 	jwtSecret          []byte
 	jwtExpiry          time.Duration
@@ -142,6 +144,7 @@ func NewAuthService(
 		jwtSecret:     []byte(jwtSecret),
 		jwtExpiry:     jwtExpiry,
 		providers:     pm,
+		ssoCache:      NewSSODiscoveryCache(),
 	}
 }
 
@@ -189,6 +192,7 @@ func (s *AuthService) getProvider(ctx context.Context, name string) OAuthProvide
 					if err != nil {
 						log.Ctx(ctx).Error().Err(err).Str("provider", name).Msg("failed to decrypt oauth client secret, falling back to static provider")
 					} else {
+						cfg.ClientSecret = secret
 						redirectURI := s.baseURL + "/auth/" + name + "/callback"
 						switch name {
 						case model.OAuthProviderDiscord:
@@ -199,6 +203,8 @@ func (s *AuthService) getProvider(ctx context.Context, name string) OAuthProvide
 							return NewGitHubProvider(cfg.ClientID, secret, redirectURI, nil)
 						case model.OAuthProviderMicrosoft:
 							return NewMicrosoftProvider(cfg.ClientID, secret, redirectURI, nil)
+						case model.OAuthProviderSSO:
+							return NewSSOProvider(cfg, redirectURI, s.encryptor, s.ssoCache, nil)
 						}
 					}
 				}
@@ -593,27 +599,17 @@ func (s *AuthService) SeedAdminUser(ctx context.Context, email, password string)
 // When a setting doesn't exist: OAuth defaults to enabled (backward compat),
 // email login defaults to enabled, email registration defaults to disabled.
 func (s *AuthService) EnabledProviders(ctx context.Context) map[string]bool {
-	result := make(map[string]bool, 4)
+	result := make(map[string]bool, len(model.KnownOAuthProviders)+2)
 
 	// Check each known OAuth provider — configured via DB or static env vars
-	for _, name := range []string{model.OAuthProviderDiscord, model.OAuthProviderGoogle, model.OAuthProviderGitHub, model.OAuthProviderMicrosoft} {
-		if s.isOAuthConfigured(ctx, name) {
-			settingKey := ""
-			switch name {
-			case model.OAuthProviderDiscord:
-				settingKey = model.SettingAuthDiscordEnabled
-			case model.OAuthProviderGoogle:
-				settingKey = model.SettingAuthGoogleEnabled
-			case model.OAuthProviderGitHub:
-				settingKey = model.SettingAuthGitHubEnabled
-			case model.OAuthProviderMicrosoft:
-				settingKey = model.SettingAuthMicrosoftEnabled
-			}
-			if settingKey != "" {
-				result[name] = s.getBoolSetting(ctx, settingKey, true)
-			} else {
-				result[name] = true
-			}
+	for _, name := range model.KnownOAuthProviders {
+		if !s.isOAuthConfigured(ctx, name) {
+			continue
+		}
+		if settingKey := model.OAuthEnabledSettingKey(name); settingKey != "" {
+			result[name] = s.getBoolSetting(ctx, settingKey, true)
+		} else {
+			result[name] = true
 		}
 	}
 
@@ -636,6 +632,10 @@ func (s *AuthService) isOAuthConfigured(ctx context.Context, name string) bool {
 			if err == nil {
 				var cfg model.OAuthProviderConfig
 				if err := json.Unmarshal(setting.Value, &cfg); err == nil && cfg.ClientID != "" {
+					// The SSO provider cannot work without an issuer to discover.
+					if name == model.OAuthProviderSSO {
+						return cfg.Issuer != "" && s.encryptor != nil
+					}
 					return true
 				}
 			}
@@ -665,7 +665,8 @@ func (s *AuthService) getBoolSetting(ctx context.Context, key string, defaultVal
 // RequestRegistration creates a verification token and sends a verification email.
 // If inviteCode is non-empty, it is stored with the token so the invite can be
 // auto-accepted when the user verifies their email (even from a different device).
-func (s *AuthService) RequestRegistration(ctx context.Context, email, displayName, inviteCode string) error {
+// lang selects the language of the verification email.
+func (s *AuthService) RequestRegistration(ctx context.Context, email, displayName, inviteCode, lang string) error {
 	if s.emailVerifications == nil || s.emailSender == nil || s.settings == nil {
 		return fmt.Errorf("%w: email registration is not configured", model.ErrForbidden)
 	}
@@ -727,9 +728,9 @@ func (s *AuthService) RequestRegistration(ctx context.Context, email, displayNam
 
 	// Build verification URL and send email
 	verifyURL := strings.TrimRight(s.baseURL, "/") + "/verify-email?token=" + rawToken
-	htmlBody := verificationEmailHTML(displayName, verifyURL)
+	htmlBody := verificationEmailHTML(lang, displayName, verifyURL)
 
-	if err := s.emailSender.Send(ctx, email, "Verify your email", htmlBody); err != nil {
+	if err := s.emailSender.Send(ctx, email, i18n.T(lang, "email.verify.subject"), htmlBody); err != nil {
 		log.Ctx(ctx).Error().Err(err).Str("email", email).Msg("failed to send verification email")
 		return fmt.Errorf("sending verification email: %w", err)
 	}
@@ -822,7 +823,8 @@ func (s *AuthService) VerifyEmailAndCreateUser(ctx context.Context, rawToken, pa
 
 // RequestPasswordReset generates a password reset token and sends an email.
 // It always returns nil to prevent user enumeration — even if the email doesn't exist.
-func (s *AuthService) RequestPasswordReset(ctx context.Context, email string) error {
+// lang selects the language of the reset email.
+func (s *AuthService) RequestPasswordReset(ctx context.Context, email, lang string) error {
 	if s.passwordResets == nil || s.emailSender == nil {
 		return fmt.Errorf("%w: password reset is not configured", model.ErrForbidden)
 	}
@@ -874,9 +876,9 @@ func (s *AuthService) RequestPasswordReset(ctx context.Context, email string) er
 	}
 
 	resetURL := strings.TrimRight(s.baseURL, "/") + "/reset-password?token=" + rawToken
-	htmlBody := passwordResetEmailHTML(user.DisplayName, resetURL)
+	htmlBody := passwordResetEmailHTML(lang, user.DisplayName, resetURL)
 
-	if err := s.emailSender.Send(ctx, email, "Reset your password", htmlBody); err != nil {
+	if err := s.emailSender.Send(ctx, email, i18n.T(lang, "email.reset.subject"), htmlBody); err != nil {
 		log.Ctx(ctx).Error().Err(err).Str("email", email).Msg("failed to send password reset email")
 		return fmt.Errorf("sending password reset email: %w", err)
 	}
@@ -948,38 +950,40 @@ func hashToken(raw string) string {
 	return hex.EncodeToString(h[:])
 }
 
-func verificationEmailHTML(displayName, verifyURL string) string {
-	return fmt.Sprintf(`<!DOCTYPE html>
-<html>
-<body style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 20px; background: #f9fafb;">
-<div style="max-width: 480px; margin: 0 auto; background: #fff; border-radius: 8px; padding: 32px; border: 1px solid #e5e7eb;">
-<h2 style="margin: 0 0 16px;">Verify your email</h2>
-<p>Hi %s,</p>
-<p>Click the button below to verify your email address and set your password:</p>
-<p style="text-align: center; margin: 24px 0;">
-<a href="%s" style="display: inline-block; padding: 12px 24px; background: #4f46e5; color: #fff; text-decoration: none; border-radius: 6px; font-weight: 600;">Verify email</a>
-</p>
-<p style="color: #6b7280; font-size: 14px;">This link expires in 24 hours. If you didn't request this, you can safely ignore this email.</p>
-</div>
-</body>
-</html>`, html.EscapeString(displayName), verifyURL)
+func verificationEmailHTML(lang, displayName, verifyURL string) string {
+	return authEmailHTML(lang,
+		i18n.T(lang, "email.verify.subject"),
+		i18n.T(lang, "email.verify.intro"),
+		i18n.T(lang, "email.verify.cta"),
+		i18n.T(lang, "email.verify.note"),
+		displayName, verifyURL)
+}
+
+func passwordResetEmailHTML(lang, displayName, resetURL string) string {
+	return authEmailHTML(lang,
+		i18n.T(lang, "email.reset.subject"),
+		i18n.T(lang, "email.reset.intro"),
+		i18n.T(lang, "email.reset.cta"),
+		i18n.T(lang, "email.reset.note"),
+		displayName, resetURL)
 }
 
-func passwordResetEmailHTML(displayName, resetURL string) string {
+func authEmailHTML(lang, title, intro, cta, note, displayName, actionURL string) string {
+	greeting := i18n.T(lang, "email.greeting", "name", html.EscapeString(displayName))
 	return fmt.Sprintf(`<!DOCTYPE html>
 <html>
 <body style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; margin: 0; padding: 20px; background: #f9fafb;">
 <div style="max-width: 480px; margin: 0 auto; background: #fff; border-radius: 8px; padding: 32px; border: 1px solid #e5e7eb;">
-<h2 style="margin: 0 0 16px;">Reset your password</h2>
-<p>Hi %s,</p>
-<p>We received a request to reset your password. Click the button below to choose a new password:</p>
+<h2 style="margin: 0 0 16px;">%s</h2>
+<p>%s</p>
+<p>%s</p>
 <p style="text-align: center; margin: 24px 0;">
-<a href="%s" style="display: inline-block; padding: 12px 24px; background: #4f46e5; color: #fff; text-decoration: none; border-radius: 6px; font-weight: 600;">Reset password</a>
+<a href="%s" style="display: inline-block; padding: 12px 24px; background: #4f46e5; color: #fff; text-decoration: none; border-radius: 6px; font-weight: 600;">%s</a>
 </p>
-<p style="color: #6b7280; font-size: 14px;">This link expires in 1 hour. If you didn't request this, you can safely ignore this email.</p>
+<p style="color: #6b7280; font-size: 14px;">%s</p>
 </div>
 </body>
-</html>`, html.EscapeString(displayName), resetURL)
+</html>`, title, greeting, intro, actionURL, cta, note)
 }
 
 // OAuthURL generates the authorization URL for the given provider.
@@ -989,14 +993,36 @@ func (s *AuthService) OAuthURL(ctx context.Context, providerName string) (string
 		return "", fmt.Errorf("oauth provider %q is not configured", providerName)
 	}
 
-	state, err := s.generateOAuthState()
+	state, err := s.oauthState(ctx, provider)
 	if err != nil {
-		return "", fmt.Errorf("generating state: %w", err)
+		return "", err
 	}
 
+	// OIDC providers must reach the network for discovery to build the URL, and
+	// they need the per-login secrets that live inside the sealed state.
+	if contextual, ok := provider.(ContextualAuthURL); ok {
+		return contextual.AuthURLContext(ctx, state)
+	}
 	return provider.AuthURL(state), nil
 }
 
+// oauthState produces the anti-CSRF state parameter, delegating to the provider
+// when it carries its own per-login secrets.
+func (s *AuthService) oauthState(ctx context.Context, provider OAuthProvider) (string, error) {
+	if binder, ok := provider.(StateBinder); ok {
+		state, err := binder.NewState(ctx)
+		if err != nil {
+			return "", fmt.Errorf("generating %s state: %w", provider.Name(), err)
+		}
+		return state, nil
+	}
+	state, err := s.generateOAuthState()
+	if err != nil {
+		return "", fmt.Errorf("generating state: %w", err)
+	}
+	return state, nil
+}
+
 // OAuthCallback validates state, exchanges the code via the provider, and finds or creates a user.
 func (s *AuthService) OAuthCallback(ctx context.Context, providerName, code, state string) (string, *model.User, error) {
 	provider := s.getProvider(ctx, providerName)
@@ -1004,12 +1030,17 @@ func (s *AuthService) OAuthCallback(ctx context.Context, providerName, code, sta
 		return "", nil, fmt.Errorf("oauth provider %q is not configured", providerName)
 	}
 
-	if err := s.validateOAuthState(state); err != nil {
+	ctx, err := s.validateProviderState(ctx, provider, state)
+	if err != nil {
 		return "", nil, fmt.Errorf("invalid state: %w", err)
 	}
 
 	userInfo, err := provider.ExchangeCode(ctx, code)
 	if err != nil {
+		var ssoErr *SSOError
+		if errors.As(err, &ssoErr) {
+			return "", nil, model.NewKeyedError(ssoErr.Sentinel, ssoErr.Key, ssoErr.Message, nil)
+		}
 		return "", nil, fmt.Errorf("exchanging code: %w", err)
 	}
 
@@ -1030,6 +1061,15 @@ func (s *AuthService) OAuthCallback(ctx context.Context, providerName, code, sta
 	return token, user, nil
 }
 
+// validateProviderState checks the state parameter and returns the context
+// carrying any per-login secrets the provider unsealed from it.
+func (s *AuthService) validateProviderState(ctx context.Context, provider OAuthProvider, state string) (context.Context, error) {
+	if binder, ok := provider.(StateBinder); ok {
+		return binder.ValidateState(ctx, state)
+	}
+	return ctx, s.validateOAuthState(state)
+}
+
 func (s *AuthService) findOrCreateOAuthUser(ctx context.Context, provider string, info model.OAuthUserInfo) (*model.User, error) {
 	// Case 1: OAuth account already linked — log in existing user.
 	existing, err := s.oauthAccounts.GetByProviderUser(ctx, provider, info.ProviderUserID)
@@ -1065,6 +1105,15 @@ func (s *AuthService) findOrCreateOAuthUser(ctx context.Context, provider string
 
 	// Case 3: Create new user.
 	if user == nil {
+		// Automatic provisioning is off by default for the generic SSO
+		// provider: an administrator's identity provider must not be able to
+		// mint accounts here just by adding someone to a directory.
+		if provider == model.OAuthProviderSSO &&
+			!s.getBoolSetting(ctx, model.SettingSSOAutoProvision, false) {
+			return nil, model.NewKeyedError(model.ErrForbidden, "sso_account_not_provisioned",
+				"no account exists for this single sign-on identity; an administrator must create it or enable automatic provisioning", nil)
+		}
+
 		email := info.Email
 		if email == "" {
 			email = provider + "_" + info.ProviderUserID + "@oauth.taskwondo.local"
diff --git a/api/internal/service/auth_test.go b/api/internal/service/auth_test.go
index bfda23f0..2c96a117 100644
--- a/api/internal/service/auth_test.go
+++ b/api/internal/service/auth_test.go
@@ -1562,7 +1562,7 @@ func TestRequestRegistration_Success(t *testing.T) {
 	svc, _, _, settings, sender := newTestAuthServiceWithEmail()
 	settings.setBool(model.SettingAuthEmailRegistrationEnabled, true)
 
-	err := svc.RequestRegistration(context.Background(), "new@example.com", "New User", "")
+	err := svc.RequestRegistration(context.Background(), "new@example.com", "New User", "", "en")
 	if err != nil {
 		t.Fatalf("expected no error, got %v", err)
 	}
@@ -1582,7 +1582,7 @@ func TestRequestRegistration_Disabled(t *testing.T) {
 	svc, _, _, _, _ := newTestAuthServiceWithEmail()
 	// Registration is disabled by default
 
-	err := svc.RequestRegistration(context.Background(), "new@example.com", "New User", "")
+	err := svc.RequestRegistration(context.Background(), "new@example.com", "New User", "", "en")
 	if err == nil {
 		t.Fatal("expected error when registration is disabled")
 	}
@@ -1608,7 +1608,7 @@ func TestRequestRegistration_DuplicateEmail(t *testing.T) {
 	userRepo.users[existing.Email] = existing
 	userRepo.byID[existing.ID] = existing
 
-	err := svc.RequestRegistration(context.Background(), "existing@example.com", "New User", "")
+	err := svc.RequestRegistration(context.Background(), "existing@example.com", "New User", "", "en")
 	if err == nil {
 		t.Fatal("expected error for duplicate email")
 	}
@@ -1637,7 +1637,7 @@ func TestRequestRegistration_InvalidEmail(t *testing.T) {
 
 	for _, tc := range cases {
 		t.Run(tc.name, func(t *testing.T) {
-			err := svc.RequestRegistration(context.Background(), tc.email, "New User", "")
+			err := svc.RequestRegistration(context.Background(), tc.email, "New User", "", "en")
 			if err == nil {
 				t.Fatalf("expected validation error for email %q", tc.email)
 			}
@@ -1651,7 +1651,7 @@ func TestVerifyEmailAndCreateUser_Success(t *testing.T) {
 
 	// First request registration to create a token
 	sender := svc.emailSender.(*mockEmailSender)
-	err := svc.RequestRegistration(context.Background(), "verify@example.com", "Verify User", "")
+	err := svc.RequestRegistration(context.Background(), "verify@example.com", "Verify User", "", "en")
 	if err != nil {
 		t.Fatalf("request registration failed: %v", err)
 	}
@@ -1692,7 +1692,7 @@ func TestRequestRegistration_WithInviteCode(t *testing.T) {
 	svc, _, emailVerifRepo, settings, _ := newTestAuthServiceWithEmail()
 	settings.setBool(model.SettingAuthEmailRegistrationEnabled, true)
 
-	err := svc.RequestRegistration(context.Background(), "invite@example.com", "Invite User", "abc123")
+	err := svc.RequestRegistration(context.Background(), "invite@example.com", "Invite User", "abc123", "en")
 	if err != nil {
 		t.Fatalf("expected no error, got %v", err)
 	}
@@ -1714,7 +1714,7 @@ func TestVerifyEmailAndCreateUser_WithInviteCode(t *testing.T) {
 	settings.setBool(model.SettingAuthEmailRegistrationEnabled, true)
 
 	sender := svc.emailSender.(*mockEmailSender)
-	err := svc.RequestRegistration(context.Background(), "inviteverify@example.com", "Invite Verify", "invcode42")
+	err := svc.RequestRegistration(context.Background(), "inviteverify@example.com", "Invite Verify", "invcode42", "en")
 	if err != nil {
 		t.Fatalf("request registration failed: %v", err)
 	}
@@ -2460,7 +2460,7 @@ func TestRequestPasswordReset_Success(t *testing.T) {
 		IsActive:     true,
 	})
 
-	err := svc.RequestPasswordReset(context.Background(), "reset@example.com")
+	err := svc.RequestPasswordReset(context.Background(), "reset@example.com", "en")
 	if err != nil {
 		t.Fatalf("expected no error, got %v", err)
 	}
@@ -2480,7 +2480,7 @@ func TestRequestPasswordReset_UnknownEmail(t *testing.T) {
 	svc, _, _, sender := newTestAuthServiceWithPasswordReset()
 
 	// Should not error (prevents enumeration)
-	err := svc.RequestPasswordReset(context.Background(), "unknown@example.com")
+	err := svc.RequestPasswordReset(context.Background(), "unknown@example.com", "en")
 	if err != nil {
 		t.Fatalf("expected no error for unknown email, got %v", err)
 	}
@@ -2504,7 +2504,7 @@ func TestRequestPasswordReset_OAuthOnlyUser(t *testing.T) {
 		IsActive:     true,
 	})
 
-	err := svc.RequestPasswordReset(context.Background(), "oauth@example.com")
+	err := svc.RequestPasswordReset(context.Background(), "oauth@example.com", "en")
 	if err != nil {
 		t.Fatalf("expected no error, got %v", err)
 	}
@@ -2518,7 +2518,7 @@ func TestRequestPasswordReset_OAuthOnlyUser(t *testing.T) {
 func TestRequestPasswordReset_InvalidEmail(t *testing.T) {
 	svc, _, _, _ := newTestAuthServiceWithPasswordReset()
 
-	err := svc.RequestPasswordReset(context.Background(), "not-an-email")
+	err := svc.RequestPasswordReset(context.Background(), "not-an-email", "en")
 	if err == nil {
 		t.Fatal("expected error for invalid email")
 	}
@@ -2542,7 +2542,7 @@ func TestResetPasswordWithToken_Success(t *testing.T) {
 	})
 
 	// Request reset
-	err := svc.RequestPasswordReset(context.Background(), "reset@example.com")
+	err := svc.RequestPasswordReset(context.Background(), "reset@example.com", "en")
 	if err != nil {
 		t.Fatalf("request failed: %v", err)
 	}
diff --git a/api/internal/service/oauth.go b/api/internal/service/oauth.go
index 83122adb..032a4372 100644
--- a/api/internal/service/oauth.go
+++ b/api/internal/service/oauth.go
@@ -15,3 +15,48 @@ type OAuthProvider interface {
 	// ExchangeCode exchanges an authorization code for user info.
 	ExchangeCode(ctx context.Context, code string) (model.OAuthUserInfo, error)
 }
+
+// ContextualAuthURL is implemented by providers that must reach the network to
+// build an authorization URL (OIDC discovery) and therefore need the request
+// context rather than only the state string.
+type ContextualAuthURL interface {
+	AuthURLContext(ctx context.Context, state string) (string, error)
+}
+
+// StateBinder is implemented by providers that carry per-login secrets (an OIDC
+// nonce and a PKCE verifier) through the authorization redirect.
+//
+// A provider that implements it takes over state generation and validation:
+// AuthService calls NewState instead of its own HMAC state and ValidateState
+// instead of validateOAuthState. ValidateState returns a context carrying the
+// unsealed secrets, which the following ExchangeCode call reads back. Binding
+// the state to the secrets this way is what makes the state parameter CSRF
+// protection real for OIDC — an attacker who replays someone else's callback
+// fails the nonce check rather than logging in as them.
+type StateBinder interface {
+	NewState(ctx context.Context) (string, error)
+	ValidateState(ctx context.Context, state string) (context.Context, error)
+}
+
+// SSOLabeledProvider is implemented by providers whose login button text is
+// operator-configured rather than derived from a fixed i18n key.
+type SSOLabeledProvider interface {
+	ButtonLabel() string
+}
+
+type ssoFlowKey struct{}
+
+// ssoFlow carries the values unsealed from one login's state parameter.
+type ssoFlow struct {
+	nonce    string
+	verifier string
+}
+
+func ssoFlowContext(ctx context.Context, flow ssoFlow) context.Context {
+	return context.WithValue(ctx, ssoFlowKey{}, flow)
+}
+
+func ssoFlowFromContext(ctx context.Context) (ssoFlow, bool) {
+	f, ok := ctx.Value(ssoFlowKey{}).(ssoFlow)
+	return f, ok && f.nonce != ""
+}
diff --git a/api/internal/service/oauth_sso.go b/api/internal/service/oauth_sso.go
new file mode 100644
index 00000000..7e7455d7
--- /dev/null
+++ b/api/internal/service/oauth_sso.go
@@ -0,0 +1,398 @@
+package service
+
+import (
+	"context"
+	"crypto/rand"
+	"encoding/base64"
+	"fmt"
+	"net/http"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/coreos/go-oidc/v3/oidc"
+	"golang.org/x/oauth2"
+
+	"github.com/marcoshack/taskwondo/internal/crypto"
+	"github.com/marcoshack/taskwondo/internal/model"
+)
+
+// ssoStateTTL bounds how long a login may sit at the identity provider.
+const ssoStateTTL = 10 * time.Minute
+
+// ssoDiscoveryTTL is how long a discovery document is reused before refetching.
+const ssoDiscoveryTTL = time.Hour
+
+// ssoDiscoveryMaxEntries caps the discovery cache so a changed issuer cannot
+// grow it without bound.
+const ssoDiscoveryMaxEntries = 8
+
+// SSODiscoveryCache memoises OIDC discovery documents. The oidc.Provider value
+// also lazily caches its JWKS key set, so reusing one across logins avoids a
+// metadata and key fetch on every sign-in. Safe for concurrent use.
+type SSODiscoveryCache struct {
+	mu      sync.Mutex
+	entries map[string]*ssoDiscoveryEntry
+	now     func() time.Time
+}
+
+type ssoDiscoveryEntry struct {
+	provider *oidc.Provider
+	expires  time.Time
+}
+
+// NewSSODiscoveryCache creates an empty discovery cache.
+func NewSSODiscoveryCache() *SSODiscoveryCache {
+	return &SSODiscoveryCache{
+		entries: make(map[string]*ssoDiscoveryEntry),
+		now:     time.Now,
+	}
+}
+
+// get returns the cached provider for issuer, discovering it when absent or stale.
+func (c *SSODiscoveryCache) get(ctx context.Context, issuer string, client *http.Client) (*oidc.Provider, error) {
+	c.mu.Lock()
+	if e, ok := c.entries[issuer]; ok && c.now().Before(e.expires) {
+		provider := e.provider
+		c.mu.Unlock()
+		return provider, nil
+	}
+	c.mu.Unlock()
+
+	dctx := ctx
+	if client != nil {
+		dctx = oidc.ClientContext(ctx, client)
+	}
+	provider, err := oidc.NewProvider(dctx, issuer)
+	if err != nil {
+		return nil, fmt.Errorf("oidc discovery: %w", err)
+	}
+
+	c.mu.Lock()
+	if len(c.entries) >= ssoDiscoveryMaxEntries {
+		c.entries = make(map[string]*ssoDiscoveryEntry)
+	}
+	c.entries[issuer] = &ssoDiscoveryEntry{provider: provider, expires: c.now().Add(ssoDiscoveryTTL)}
+	c.mu.Unlock()
+
+	return provider, nil
+}
+
+// invalidate drops the cached document for an issuer so the next attempt
+// refetches it. Used when ID-token verification fails, which is what a rotated
+// JWKS looks like before the cached keys go stale.
+func (c *SSODiscoveryCache) invalidate(issuer string) {
+	c.mu.Lock()
+	delete(c.entries, issuer)
+	c.mu.Unlock()
+}
+
+// SSOProvider implements OAuthProvider for a custom OpenID Connect identity
+// provider configured by an administrator. Unlike the built-in providers it
+// discovers its endpoints from the issuer URL, validates the ID token
+// signature, and carries per-login secrets (nonce, PKCE verifier) inside the
+// sealed state parameter.
+//
+// Account identity is resolved by email address in
+// AuthService.findOrCreateOAuthUser; new accounts are gated by the
+// sso_auto_provision_enabled setting.
+type SSOProvider struct {
+	cfg        model.OAuthProviderConfig
+	redirect   string
+	httpClient *http.Client
+	sealer     *crypto.Encryptor
+	cache      *SSODiscoveryCache
+	now        func() time.Time
+}
+
+// NewSSOProvider creates a generic OIDC provider. sealer must not be nil: it
+// seals the state parameter, and without it a login cannot be bound to the
+// browser that started it.
+func NewSSOProvider(cfg model.OAuthProviderConfig, redirectURI string, sealer *crypto.Encryptor, cache *SSODiscoveryCache, httpClient *http.Client) *SSOProvider {
+	if httpClient == nil {
+		httpClient = &http.Client{Timeout: 15 * time.Second}
+	}
+	if cache == nil {
+		cache = NewSSODiscoveryCache()
+	}
+	return &SSOProvider{
+		cfg:        cfg,
+		redirect:   redirectURI,
+		httpClient: httpClient,
+		sealer:     sealer,
+		cache:      cache,
+		now:        time.Now,
+	}
+}
+
+func (p *SSOProvider) Name() string { return model.OAuthProviderSSO }
+
+// ButtonLabel returns the operator-supplied login button text, if configured.
+func (p *SSOProvider) ButtonLabel() string { return p.cfg.ButtonLabel }
+
+// ssoState is the payload sealed into the OIDC state parameter.
+type ssoState struct {
+	Provider string `json:"p"`
+	Nonce    string `json:"n"`
+	Verifier string `json:"v,omitempty"`
+	Expires  int64  `json:"e"`
+}
+
+// NewState seals a fresh nonce and PKCE verifier into the state parameter.
+func (p *SSOProvider) NewState(_ context.Context) (string, error) {
+	if p.sealer == nil {
+		return "", fmt.Errorf("sso provider: state sealer is not configured")
+	}
+	nonce, err := ssoRandomToken()
+	if err != nil {
+		return "", fmt.Errorf("generating sso nonce: %w", err)
+	}
+	state := ssoState{
+		Provider: model.OAuthProviderSSO,
+		Nonce:    nonce,
+		Expires:  p.now().Add(ssoStateTTL).Unix(),
+	}
+	if !p.cfg.DisablePKCE {
+		state.Verifier = oauth2.GenerateVerifier()
+	}
+	sealed, err := p.sealer.SealJSON(state)
+	if err != nil {
+		return "", fmt.Errorf("sealing sso state: %w", err)
+	}
+	return sealed, nil
+}
+
+// ValidateState unseals and checks the state parameter, returning a context
+// carrying the nonce and verifier for the following ExchangeCode call.
+func (p *SSOProvider) ValidateState(ctx context.Context, state string) (context.Context, error) {
+	if p.sealer == nil {
+		return ctx, fmt.Errorf("sso provider: state sealer is not configured")
+	}
+	var s ssoState
+	if err := p.sealer.OpenJSON(state, &s); err != nil {
+		return ctx, fmt.Errorf("decoding state: %w", err)
+	}
+	if s.Nonce == "" || s.Provider != model.OAuthProviderSSO {
+		return ctx, fmt.Errorf("malformed state")
+	}
+	if p.now().Unix() > s.Expires {
+		return ctx, fmt.Errorf("state expired")
+	}
+	return ssoFlowContext(ctx, ssoFlow{nonce: s.Nonce, verifier: s.Verifier}), nil
+}
+
+// AuthURL is unused for SSO: building the URL requires provider discovery, so
+// AuthService calls AuthURLContext through the ContextualAuthURL interface.
+func (p *SSOProvider) AuthURL(state string) string {
+	url, err := p.AuthURLContext(context.Background(), state)
+	if err != nil {
+		return ""
+	}
+	return url
+}
+
+// AuthURLContext discovers the provider and builds the authorization request,
+// attaching the nonce and PKCE challenge recovered from the sealed state.
+func (p *SSOProvider) AuthURLContext(ctx context.Context, state string) (string, error) {
+	flow, ok := ssoFlowFromContext(ctx)
+	if !ok {
+		if p.sealer == nil {
+			return "", fmt.Errorf("sso provider: state sealer is not configured")
+		}
+		var s ssoState
+		if err := p.sealer.OpenJSON(state, &s); err != nil {
+			return "", fmt.Errorf("decoding state: %w", err)
+		}
+		if s.Provider != model.OAuthProviderSSO || s.Nonce == "" {
+			return "", fmt.Errorf("malformed state")
+		}
+		flow = ssoFlow{nonce: s.Nonce, verifier: s.Verifier}
+		ctx = ssoFlowContext(ctx, flow)
+	}
+
+	provider, err := p.discover(ctx)
+	if err != nil {
+		return "", err
+	}
+
+	opts := []oauth2.AuthCodeOption{oidc.Nonce(flow.nonce)}
+	if flow.verifier != "" {
+		opts = append(opts, oauth2.S256ChallengeOption(flow.verifier))
+	}
+	return p.oauthConfig(provider).AuthCodeURL(state, opts...), nil
+}
+
+// ExchangeCode redeems the authorization code, verifies the ID token
+// (signature, issuer, audience, expiry, nonce and at_hash) and, when the ID
+// token omits the email claim, backfills it from the UserInfo endpoint.
+func (p *SSOProvider) ExchangeCode(ctx context.Context, code string) (model.OAuthUserInfo, error) {
+	flow, ok := ssoFlowFromContext(ctx)
+	if !ok {
+		return model.OAuthUserInfo{}, fmt.Errorf("missing sso login context")
+	}
+
+	provider, err := p.discover(ctx)
+	if err != nil {
+		return model.OAuthUserInfo{}, err
+	}
+
+	ecfg := p.oauthConfig(provider)
+	exchangeCtx := oidc.ClientContext(ctx, p.httpClient)
+
+	var opts []oauth2.AuthCodeOption
+	if flow.verifier != "" {
+		opts = append(opts, oauth2.VerifierOption(flow.verifier))
+	}
+	oauth2Token, err := ecfg.Exchange(exchangeCtx, code, opts...)
+	if err != nil {
+		return model.OAuthUserInfo{}, fmt.Errorf("exchanging code: %w", err)
+	}
+
+	rawIDToken, ok := oauth2Token.Extra("id_token").(string)
+	if !ok || rawIDToken == "" {
+		return model.OAuthUserInfo{}, fmt.Errorf("token response did not contain an id_token")
+	}
+
+	// Verifier (not VerifierContext) reuses the key set cached on the provider,
+	// so JWKS is fetched at most once per discovery refresh.
+	idToken, err := provider.Verifier(&oidc.Config{ClientID: p.cfg.ClientID}).Verify(exchangeCtx, rawIDToken)
+	if err != nil {
+		p.cache.invalidate(p.cfg.Issuer)
+		return model.OAuthUserInfo{}, fmt.Errorf("verifying id_token: %w", err)
+	}
+	if idToken.Nonce != flow.nonce {
+		return model.OAuthUserInfo{}, fmt.Errorf("id_token nonce mismatch")
+	}
+	// at_hash binds the ID token to the access token. Optional per spec, but
+	// when present it must match, otherwise a stolen access token is undetectable.
+	if idToken.AccessTokenHash != "" {
+		if err := idToken.VerifyAccessToken(oauth2Token.AccessToken); err != nil {
+			return model.OAuthUserInfo{}, fmt.Errorf("verifying access token hash: %w", err)
+		}
+	}
+
+	var claims ssoClaims
+	if err := idToken.Claims(&claims); err != nil {
+		return model.OAuthUserInfo{}, fmt.Errorf("decoding id_token claims: %w", err)
+	}
+
+	if claims.Email == "" && provider.UserInfoEndpoint() != "" {
+		ui, err := provider.UserInfo(exchangeCtx, oauth2.StaticTokenSource(oauth2Token))
+		if err != nil {
+			return model.OAuthUserInfo{}, fmt.Errorf("fetching userinfo: %w", err)
+		}
+		claims.Email = ui.Email
+		claims.EmailVerified = ui.EmailVerified
+		if claims.Name == "" || claims.Picture == "" {
+			var extra struct {
+				Name              string `json:"name"`
+				Picture           string `json:"picture"`
+				PreferredUsername string `json:"preferred_username"`
+			}
+			if err := ui.Claims(&extra); err == nil {
+				claims.Name = firstNonEmpty(claims.Name, extra.Name)
+				claims.Picture = firstNonEmpty(claims.Picture, extra.Picture)
+				claims.PreferredUsername = firstNonEmpty(claims.PreferredUsername, extra.PreferredUsername)
+			}
+		}
+	}
+
+	return p.userInfo(claims)
+}
+
+// userInfo normalises the ID token claims into the shared OAuth user shape,
+// applying the email policy configured for this provider.
+func (p *SSOProvider) userInfo(claims ssoClaims) (model.OAuthUserInfo, error) {
+	email := strings.ToLower(strings.TrimSpace(claims.Email))
+	if email == "" {
+		return model.OAuthUserInfo{}, &SSOError{
+			Sentinel: model.ErrOAuthEmailMissing,
+			Key:      "sso_email_missing",
+			Message:  "the identity provider did not return an email address",
+		}
+	}
+
+	// email_verified is only meaningful when the claim is present; the config
+	// switch defaults to requiring it, because an unverified address would let
+	// anyone at the IdP claim another user's mailbox and inherit their account.
+	verified := claims.EmailVerified || !p.cfg.RequiresVerifiedEmail()
+	if !verified {
+		return model.OAuthUserInfo{}, &SSOError{
+			Sentinel: model.ErrOAuthEmailUnverified,
+			Key:      "sso_email_unverified",
+			Message:  "the identity provider reported this email address as unverified",
+		}
+	}
+
+	display := firstNonEmpty(claims.Name, claims.Nickname, claims.PreferredUsername, email)
+
+	return model.OAuthUserInfo{
+		ProviderUserID: claims.Subject,
+		Email:          email,
+		EmailVerified:  true,
+		DisplayName:    display,
+		AvatarURL:      claims.Picture,
+		Username:       claims.PreferredUsername,
+		RawAvatar:      claims.Picture,
+	}, nil
+}
+
+// ssoClaims are the OIDC standard claims consumed by the SSO provider.
+type ssoClaims struct {
+	Subject           string `json:"sub"`
+	Email             string `json:"email"`
+	EmailVerified     bool   `json:"email_verified"`
+	Name              string `json:"name"`
+	Nickname          string `json:"nickname"`
+	PreferredUsername string `json:"preferred_username"`
+	Picture           string `json:"picture"`
+}
+
+// SSOError carries a stable error key so the login page can localise why a
+// single sign-in was rejected instead of showing a generic failure.
+type SSOError struct {
+	Sentinel error
+	Key      string
+	Message  string
+}
+
+func (e *SSOError) Error() string { return e.Message }
+func (e *SSOError) Unwrap() error { return e.Sentinel }
+
+func (p *SSOProvider) discover(ctx context.Context) (*oidc.Provider, error) {
+	return p.cache.get(ctx, p.cfg.Issuer, p.httpClient)
+}
+
+func (p *SSOProvider) oauthConfig(provider *oidc.Provider) *oauth2.Config {
+	return &oauth2.Config{
+		ClientID:     p.cfg.ClientID,
+		ClientSecret: p.cfg.ClientSecret,
+		RedirectURL:  p.redirect,
+		Scopes:       p.cfg.ScopeList(),
+		Endpoint:     provider.Endpoint(),
+	}
+}
+
+func ssoRandomToken() (string, error) {
+	buf := make([]byte, 32)
+	if _, err := rand.Read(buf); err != nil {
+		return "", fmt.Errorf("generating random token: %w", err)
+	}
+	return base64.RawURLEncoding.EncodeToString(buf), nil
+}
+
+func firstNonEmpty(values ...string) string {
+	for _, v := range values {
+		if s := strings.TrimSpace(v); s != "" {
+			return s
+		}
+	}
+	return ""
+}
+
+var (
+	_ OAuthProvider      = (*SSOProvider)(nil)
+	_ StateBinder        = (*SSOProvider)(nil)
+	_ ContextualAuthURL  = (*SSOProvider)(nil)
+	_ SSOLabeledProvider = (*SSOProvider)(nil)
+)
diff --git a/api/internal/service/system_setting.go b/api/internal/service/system_setting.go
index 9089b03f..a8c78c9f 100644
--- a/api/internal/service/system_setting.go
+++ b/api/internal/service/system_setting.go
@@ -147,6 +147,7 @@ func (s *SystemSettingService) GetPublic(ctx context.Context) (map[string]json.R
 		model.SettingAuthGoogleEnabled,
 		model.SettingAuthGitHubEnabled,
 		model.SettingAuthMicrosoftEnabled,
+		model.SettingAuthSSOEnabled,
 		model.SettingOAuthProviderOrder,
 		model.SettingFeatureStatsTimeline,
 		model.SettingFeatureSemanticSearch,
@@ -166,9 +167,32 @@ func (s *SystemSettingService) GetPublic(ctx context.Context) (map[string]json.R
 		result[key] = setting.Value
 	}
 
+	if label := s.ssoButtonLabel(ctx); label != "" {
+		raw, err := json.Marshal(label)
+		if err != nil {
+			return nil, fmt.Errorf("marshaling sso button label: %w", err)
+		}
+		result["oauth_sso_button_label"] = raw
+	}
+
 	return result, nil
 }
 
+// ssoButtonLabel returns the operator-configured login button text for the
+// generic SSO provider. The config setting holds an encrypted client secret,
+// so only this single plaintext field is ever published.
+func (s *SystemSettingService) ssoButtonLabel(ctx context.Context) string {
+	setting, err := s.settings.Get(ctx, model.SettingOAuthSSOConfig)
+	if err != nil {
+		return ""
+	}
+	var cfg model.OAuthProviderConfig
+	if err := json.Unmarshal(setting.Value, &cfg); err != nil {
+		return ""
+	}
+	return cfg.ButtonLabel
+}
+
 // SeedDefaultLimits creates default values for max_projects_per_user and
 // max_namespaces_per_user if they do not already exist.
 func (s *SystemSettingService) SeedDefaultLimits(ctx context.Context) error {
diff --git a/api/internal/service/workflow.go b/api/internal/service/workflow.go
index 0e2035a4..7cfde720 100644
--- a/api/internal/service/workflow.go
+++ b/api/internal/service/workflow.go
@@ -256,9 +256,6 @@ func (s *WorkflowService) DeleteProjectWorkflow(ctx context.Context, id uuid.UUI
 		return err
 	}
 
-	if wf.IsDefault {
-		return fmt.Errorf("cannot delete a system workflow: %w", model.ErrForbidden)
-	}
 	if wf.ProjectID == nil {
 		return fmt.Errorf("cannot delete a system workflow: %w", model.ErrForbidden)
 	}
@@ -277,10 +274,6 @@ func (s *WorkflowService) DeleteSystemWorkflow(ctx context.Context, id uuid.UUID
 		return fmt.Errorf("use project endpoint to delete project workflows: %w", model.ErrValidation)
 	}
 
-	if wf.IsDefault {
-		return fmt.Errorf("cannot delete a default workflow: %w", model.ErrForbidden)
-	}
-
 	inUse, err := s.workflows.IsInUse(ctx, id)
 	if err != nil {
 		return fmt.Errorf("checking workflow usage: %w", err)
diff --git a/api/internal/workers/email_template.go b/api/internal/workers/email_template.go
index 214fa7eb..98fb48ea 100644
--- a/api/internal/workers/email_template.go
+++ b/api/internal/workers/email_template.go
@@ -12,6 +12,9 @@ import (
 
 // getUserLanguage returns the user's preferred language, defaulting to "en".
 func getUserLanguage(ctx context.Context, settings userSettingRepository, userID uuid.UUID) string {
+	if settings == nil {
+		return "en"
+	}
 	setting, err := settings.Get(ctx, userID, nil, "language")
 	if err != nil {
 		return "en"
diff --git a/api/internal/workers/embed_index.go b/api/internal/workers/embed_index.go
index a564f779..3e2cabbf 100644
--- a/api/internal/workers/embed_index.go
+++ b/api/internal/workers/embed_index.go
@@ -3,6 +3,7 @@ package workers
 import (
 	"context"
 	"encoding/json"
+	"errors"
 
 	"github.com/google/uuid"
 	"github.com/rs/zerolog"
@@ -63,6 +64,10 @@ func (t *EmbedIndexTask) Execute(ctx context.Context, payload []byte) error {
 	}
 
 	if err := t.indexer.IndexEntity(ctx, evt.EntityType, evt.EntityID, evt.ProjectID); err != nil {
+		if errors.Is(err, model.ErrEmbeddingUnavailable) {
+			t.logger.Debug().Msg("semantic search unavailable, skipping index")
+			return nil
+		}
 		return err // Retryable error
 	}
 
diff --git a/api/internal/workers/notification_oncall_override.go b/api/internal/workers/notification_oncall_override.go
index c0962c24..910b541e 100644
--- a/api/internal/workers/notification_oncall_override.go
+++ b/api/internal/workers/notification_oncall_override.go
@@ -13,24 +13,27 @@ import (
 
 // NotificationOncallOverrideCreatedTask sends emails when an on-call override is created.
 type NotificationOncallOverrideCreatedTask struct {
-	users  userRepository
-	sender emailSender
-	urls   *URLBuilder
-	logger zerolog.Logger
+	users    userRepository
+	settings userSettingRepository
+	sender   emailSender
+	urls     *URLBuilder
+	logger   zerolog.Logger
 }
 
 // NewNotificationOncallOverrideCreatedTask creates the task.
 func NewNotificationOncallOverrideCreatedTask(
 	users userRepository,
+	settings userSettingRepository,
 	sender emailSender,
 	urls *URLBuilder,
 	logger zerolog.Logger,
 ) *NotificationOncallOverrideCreatedTask {
 	return &NotificationOncallOverrideCreatedTask{
-		users:  users,
-		sender: sender,
-		urls:   urls,
-		logger: logger,
+		users:    users,
+		settings: settings,
+		sender:   sender,
+		urls:     urls,
+		logger:   logger,
 	}
 }
 
@@ -47,7 +50,6 @@ func (t *NotificationOncallOverrideCreatedTask) Execute(ctx context.Context, pay
 		return nil
 	}
 
-	lang := "en"
 	oncallURL := t.urls.OncallTab(ctx, evt.ProjectID, evt.ProjectKey, evt.TeamID)
 
 	// Notify override user (the person taking over)
@@ -56,6 +58,7 @@ func (t *NotificationOncallOverrideCreatedTask) Execute(ctx context.Context, pay
 		return fmt.Errorf("loading override user: %w", err)
 	}
 
+	lang := getUserLanguage(ctx, t.settings, evt.OverrideUserID)
 	subject := i18n.T(lang, "email.oncall.override.created.subject", "projectKey", evt.ProjectKey, "teamName", evt.TeamName)
 	body := oncallOverrideCreatedEmailHTML(lang, evt.TeamName, evt.ProjectKey, evt.ProjectName, evt.StartAt.Format("2006-01-02 15:04 MST"), evt.EndAt.Format("2006-01-02 15:04 MST"), oncallURL)
 
@@ -71,8 +74,9 @@ func (t *NotificationOncallOverrideCreatedTask) Execute(ctx context.Context, pay
 			return fmt.Errorf("loading scheduled user: %w", err)
 		}
 
-		coveredSubject := i18n.T(lang, "email.oncall.override.covered.subject", "projectKey", evt.ProjectKey, "teamName", evt.TeamName)
-		coveredBody := oncallOverrideCoveredEmailHTML(lang, evt.TeamName, evt.ProjectKey, evt.ProjectName, overrideUser.DisplayName, evt.StartAt.Format("2006-01-02 15:04 MST"), evt.EndAt.Format("2006-01-02 15:04 MST"), oncallURL)
+		coveredLang := getUserLanguage(ctx, t.settings, evt.ScheduledUser)
+		coveredSubject := i18n.T(coveredLang, "email.oncall.override.covered.subject", "projectKey", evt.ProjectKey, "teamName", evt.TeamName)
+		coveredBody := oncallOverrideCoveredEmailHTML(coveredLang, evt.TeamName, evt.ProjectKey, evt.ProjectName, overrideUser.DisplayName, evt.StartAt.Format("2006-01-02 15:04 MST"), evt.EndAt.Format("2006-01-02 15:04 MST"), oncallURL)
 
 		if err := t.sender.Send(ctx, scheduledUser.Email, coveredSubject, coveredBody); err != nil {
 			return fmt.Errorf("sending override covered email: %w", err)
@@ -85,24 +89,27 @@ func (t *NotificationOncallOverrideCreatedTask) Execute(ctx context.Context, pay
 
 // NotificationOncallOverrideCancelledTask sends emails when an on-call override is cancelled.
 type NotificationOncallOverrideCancelledTask struct {
-	users  userRepository
-	sender emailSender
-	urls   *URLBuilder
-	logger zerolog.Logger
+	users    userRepository
+	settings userSettingRepository
+	sender   emailSender
+	urls     *URLBuilder
+	logger   zerolog.Logger
 }
 
 // NewNotificationOncallOverrideCancelledTask creates the task.
 func NewNotificationOncallOverrideCancelledTask(
 	users userRepository,
+	settings userSettingRepository,
 	sender emailSender,
 	urls *URLBuilder,
 	logger zerolog.Logger,
 ) *NotificationOncallOverrideCancelledTask {
 	return &NotificationOncallOverrideCancelledTask{
-		users:  users,
-		sender: sender,
-		urls:   urls,
-		logger: logger,
+		users:    users,
+		settings: settings,
+		sender:   sender,
+		urls:     urls,
+		logger:   logger,
 	}
 }
 
@@ -119,8 +126,6 @@ func (t *NotificationOncallOverrideCancelledTask) Execute(ctx context.Context, p
 		return nil
 	}
 
-	lang := "en"
-
 	// Notify override user that their override was cancelled
 	overrideUser, err := t.users.GetByID(ctx, evt.OverrideUserID)
 	if err != nil {
@@ -128,6 +133,7 @@ func (t *NotificationOncallOverrideCancelledTask) Execute(ctx context.Context, p
 	}
 
 	oncallURL := t.urls.OncallTab(ctx, evt.ProjectID, evt.ProjectKey, evt.TeamID)
+	lang := getUserLanguage(ctx, t.settings, evt.OverrideUserID)
 	subject := i18n.T(lang, "email.oncall.override.cancelled.subject", "projectKey", evt.ProjectKey, "teamName", evt.TeamName)
 	body := oncallOverrideCancelledEmailHTML(lang, evt.TeamName, evt.ProjectKey, evt.ProjectName, evt.StartAt.Format("2006-01-02 15:04 MST"), evt.EndAt.Format("2006-01-02 15:04 MST"), oncallURL)
 
@@ -140,22 +146,35 @@ func (t *NotificationOncallOverrideCancelledTask) Execute(ctx context.Context, p
 }
 
 func oncallOverrideCreatedEmailHTML(lang, teamName, projectKey, projectName, startAt, endAt, oncallURL string) string {
-	content := fmt.Sprintf(`<p>You have been assigned an on-call override for <strong>%s</strong> in project %s <strong>%s</strong>.</p>
-  <p>Your override period: <strong>%s</strong> to <strong>%s</strong>.</p>
-  <p>Please make sure you are available to respond to any incoming issues during this period.</p>`, teamName, projectKeyBadge(projectKey), projectName, startAt, endAt)
+	intro := i18n.T(lang, "email.oncall.override.created.intro",
+		"teamName", teamName,
+		"projectBadge", projectKeyBadge(projectKey),
+		"projectName", projectName)
+	period := i18n.T(lang, "email.oncall.override.created.period", "startAt", startAt, "endAt", endAt)
+	note := i18n.T(lang, "email.oncall.override.created.note")
+	content := fmt.Sprintf("<p>%s</p>\n  <p>%s</p>\n  <p>%s</p>", intro, period, note)
 	return emailHTML(lang, "email.oncall.cta", oncallURL, "email.oncall.override.footer", content)
 }
 
 func oncallOverrideCoveredEmailHTML(lang, teamName, projectKey, projectName, coveringUser, startAt, endAt, oncallURL string) string {
-	content := fmt.Sprintf(`<p>Your on-call shift for <strong>%s</strong> in project %s <strong>%s</strong> has been covered by <strong>%s</strong>.</p>
-  <p>Override period: <strong>%s</strong> to <strong>%s</strong>.</p>`, teamName, projectKeyBadge(projectKey), projectName, coveringUser, startAt, endAt)
+	intro := i18n.T(lang, "email.oncall.override.covered.intro",
+		"teamName", teamName,
+		"projectBadge", projectKeyBadge(projectKey),
+		"projectName", projectName,
+		"coveringUser", coveringUser)
+	period := i18n.T(lang, "email.oncall.override.covered.period", "startAt", startAt, "endAt", endAt)
+	content := fmt.Sprintf("<p>%s</p>\n  <p>%s</p>", intro, period)
 	return emailHTML(lang, "email.oncall.cta", oncallURL, "email.oncall.override.footer", content)
 }
 
 func oncallOverrideCancelledEmailHTML(lang, teamName, projectKey, projectName, startAt, endAt, oncallURL string) string {
-	content := fmt.Sprintf(`<p>An on-call override for <strong>%s</strong> in project %s <strong>%s</strong> has been cancelled.</p>
-  <p>The override was scheduled for: <strong>%s</strong> to <strong>%s</strong>.</p>
-  <p>The regular on-call rotation schedule will apply for this period.</p>`, teamName, projectKeyBadge(projectKey), projectName, startAt, endAt)
+	intro := i18n.T(lang, "email.oncall.override.cancelled.intro",
+		"teamName", teamName,
+		"projectBadge", projectKeyBadge(projectKey),
+		"projectName", projectName)
+	period := i18n.T(lang, "email.oncall.override.cancelled.period", "startAt", startAt, "endAt", endAt)
+	note := i18n.T(lang, "email.oncall.override.cancelled.note")
+	content := fmt.Sprintf("<p>%s</p>\n  <p>%s</p>\n  <p>%s</p>", intro, period, note)
 	return emailHTML(lang, "email.oncall.cta", oncallURL, "email.oncall.override.footer", content)
 }
 
diff --git a/api/internal/workers/notification_oncall_override_test.go b/api/internal/workers/notification_oncall_override_test.go
index a2455a2f..485bc331 100644
--- a/api/internal/workers/notification_oncall_override_test.go
+++ b/api/internal/workers/notification_oncall_override_test.go
@@ -24,10 +24,11 @@ func TestNotificationOncallOverrideCreated_Execute(t *testing.T) {
 	sender := &mockEmailSender{}
 
 	task := &NotificationOncallOverrideCreatedTask{
-		users:  users,
-		sender: sender,
-		urls:   newTestURLBuilder(),
-		logger: zerolog.Nop(),
+		users:    users,
+		settings: &mockUserSettingRepo{settings: map[string]*model.UserSetting{}},
+		sender:   sender,
+		urls:     newTestURLBuilder(),
+		logger:   zerolog.Nop(),
 	}
 
 	teamID := uuid.New()
@@ -95,10 +96,11 @@ func TestNotificationOncallOverrideCancelled_Execute(t *testing.T) {
 	sender := &mockEmailSender{}
 
 	task := &NotificationOncallOverrideCancelledTask{
-		users:  users,
-		sender: sender,
-		urls:   newTestURLBuilder(),
-		logger: zerolog.Nop(),
+		users:    users,
+		settings: &mockUserSettingRepo{settings: map[string]*model.UserSetting{}},
+		sender:   sender,
+		urls:     newTestURLBuilder(),
+		logger:   zerolog.Nop(),
 	}
 
 	teamID := uuid.New()
diff --git a/api/internal/workers/notification_oncall_rotation.go b/api/internal/workers/notification_oncall_rotation.go
index d9a3fe8b..35c14f45 100644
--- a/api/internal/workers/notification_oncall_rotation.go
+++ b/api/internal/workers/notification_oncall_rotation.go
@@ -13,24 +13,27 @@ import (
 
 // NotificationOncallRotationTask sends emails when an on-call rotation advances.
 type NotificationOncallRotationTask struct {
-	users  userRepository
-	sender emailSender
-	urls   *URLBuilder
-	logger zerolog.Logger
+	users    userRepository
+	settings userSettingRepository
+	sender   emailSender
+	urls     *URLBuilder
+	logger   zerolog.Logger
 }
 
 // NewNotificationOncallRotationTask creates the task.
 func NewNotificationOncallRotationTask(
 	users userRepository,
+	settings userSettingRepository,
 	sender emailSender,
 	urls *URLBuilder,
 	logger zerolog.Logger,
 ) *NotificationOncallRotationTask {
 	return &NotificationOncallRotationTask{
-		users:  users,
-		sender: sender,
-		urls:   urls,
-		logger: logger,
+		users:    users,
+		settings: settings,
+		sender:   sender,
+		urls:     urls,
+		logger:   logger,
 	}
 }
 
@@ -59,9 +62,9 @@ func (t *NotificationOncallRotationTask) Execute(ctx context.Context, payload []
 		return fmt.Errorf("loading new on-call user: %w", err)
 	}
 
-	lang := "en"
 	oncallURL := t.urls.OncallTab(ctx, evt.ProjectID, evt.ProjectKey, evt.TeamID)
 
+	lang := getUserLanguage(ctx, t.settings, evt.NewUserID)
 	incomingSubject := i18n.T(lang, "email.oncall.incoming.subject", "projectKey", evt.ProjectKey, "teamName", evt.TeamName)
 	incomingBody := oncallIncomingEmailHTML(lang, evt.TeamName, evt.ProjectKey, evt.ProjectName, oncallURL)
 
@@ -77,8 +80,9 @@ func (t *NotificationOncallRotationTask) Execute(ctx context.Context, payload []
 			return fmt.Errorf("loading old on-call user: %w", err)
 		}
 
-		outgoingSubject := i18n.T(lang, "email.oncall.outgoing.subject", "projectKey", evt.ProjectKey, "teamName", evt.TeamName)
-		outgoingBody := oncallOutgoingEmailHTML(lang, evt.TeamName, evt.ProjectKey, evt.ProjectName, oncallURL)
+		outLang := getUserLanguage(ctx, t.settings, evt.OldUserID)
+		outgoingSubject := i18n.T(outLang, "email.oncall.outgoing.subject", "projectKey", evt.ProjectKey, "teamName", evt.TeamName)
+		outgoingBody := oncallOutgoingEmailHTML(outLang, evt.TeamName, evt.ProjectKey, evt.ProjectName, oncallURL)
 
 		if err := t.sender.Send(ctx, oldUser.Email, outgoingSubject, outgoingBody); err != nil {
 			return fmt.Errorf("sending outgoing oncall email: %w", err)
@@ -90,13 +94,21 @@ func (t *NotificationOncallRotationTask) Execute(ctx context.Context, payload []
 }
 
 func oncallIncomingEmailHTML(lang, teamName, projectKey, projectName, oncallURL string) string {
-	content := fmt.Sprintf(`<p>You are now on-call for <strong>%s</strong> in project %s <strong>%s</strong>.</p>
-  <p>Please make sure you are available to respond to any incoming issues during your shift.</p>`, teamName, projectKeyBadge(projectKey), projectName)
+	intro := i18n.T(lang, "email.oncall.incoming.intro",
+		"teamName", teamName,
+		"projectBadge", projectKeyBadge(projectKey),
+		"projectName", projectName)
+	note := i18n.T(lang, "email.oncall.incoming.note")
+	content := fmt.Sprintf("<p>%s</p>\n  <p>%s</p>", intro, note)
 	return emailHTML(lang, "email.oncall.cta", oncallURL, "email.oncall.rotation.footer", content)
 }
 
 func oncallOutgoingEmailHTML(lang, teamName, projectKey, projectName, oncallURL string) string {
-	content := fmt.Sprintf(`<p>Your on-call shift for <strong>%s</strong> in project %s <strong>%s</strong> has ended.</p>
-  <p>Thank you for your service during your shift.</p>`, teamName, projectKeyBadge(projectKey), projectName)
+	intro := i18n.T(lang, "email.oncall.outgoing.intro",
+		"teamName", teamName,
+		"projectBadge", projectKeyBadge(projectKey),
+		"projectName", projectName)
+	note := i18n.T(lang, "email.oncall.outgoing.note")
+	content := fmt.Sprintf("<p>%s</p>\n  <p>%s</p>", intro, note)
 	return emailHTML(lang, "email.oncall.cta", oncallURL, "email.oncall.rotation.footer", content)
 }
diff --git a/api/internal/workers/notification_oncall_rotation_test.go b/api/internal/workers/notification_oncall_rotation_test.go
index d1a5420e..5175f39c 100644
--- a/api/internal/workers/notification_oncall_rotation_test.go
+++ b/api/internal/workers/notification_oncall_rotation_test.go
@@ -30,10 +30,11 @@ func TestNotificationOncallRotation_Execute(t *testing.T) {
 	sender := &mockEmailSender{}
 
 	task := &NotificationOncallRotationTask{
-		users:  users,
-		sender: sender,
-		urls:   newTestURLBuilder(),
-		logger: zerolog.Nop(),
+		users:    users,
+		settings: &mockUserSettingRepo{settings: map[string]*model.UserSetting{}},
+		sender:   sender,
+		urls:     newTestURLBuilder(),
+		logger:   zerolog.Nop(),
 	}
 
 	teamID := uuid.New()
@@ -105,10 +106,11 @@ func TestNotificationOncallRotation_SameUser(t *testing.T) {
 	sender := &mockEmailSender{}
 
 	task := &NotificationOncallRotationTask{
-		users:  users,
-		sender: sender,
-		urls:   newTestURLBuilder(),
-		logger: zerolog.Nop(),
+		users:    users,
+		settings: &mockUserSettingRepo{settings: map[string]*model.UserSetting{}},
+		sender:   sender,
+		urls:     newTestURLBuilder(),
+		logger:   zerolog.Nop(),
 	}
 
 	evt := model.OncallRotationAdvancedEvent{
@@ -136,6 +138,57 @@ func TestNotificationOncallRotation_SameUser(t *testing.T) {
 	}
 }
 
+func TestNotificationOncallRotation_LanguagePreference(t *testing.T) {
+	oldUserID := uuid.New()
+	newUserID := uuid.New()
+
+	users := &mockUserRepo{users: map[uuid.UUID]*model.User{
+		oldUserID: {ID: oldUserID, Email: "[EMAIL_REDACTED]", DisplayName: "Alice"},
+		newUserID: {ID: newUserID, Email: "[EMAIL_REDACTED]", DisplayName: "Bob"},
+	}}
+	sender := &mockEmailSender{}
+
+	// Incoming user prefers Chinese; outgoing user has no preference (defaults to en).
+	langJSON, _ := json.Marshal("zh")
+	settings := &mockUserSettingRepo{settings: map[string]*model.UserSetting{
+		languageKey(newUserID): {UserID: newUserID, Key: "language", Value: langJSON},
+	}}
+
+	task := &NotificationOncallRotationTask{
+		users:    users,
+		settings: settings,
+		sender:   sender,
+		urls:     newTestURLBuilder(),
+		logger:   zerolog.Nop(),
+	}
+
+	evt := model.OncallRotationAdvancedEvent{
+		RotationID:  uuid.New(),
+		TeamID:      uuid.New(),
+		ProjectID:   uuid.New(),
+		ProjectKey:  "ENG",
+		ProjectName: "Engineering Platform",
+		TeamName:    "Engineering",
+		OldUserID:   oldUserID,
+		NewUserID:   newUserID,
+	}
+	payload, _ := json.Marshal(evt)
+
+	if err := task.Execute(context.Background(), payload); err != nil {
+		t.Fatalf("unexpected error: %v", err)
+	}
+	if len(sender.sent) != 2 {
+		t.Fatalf("expected 2 emails, got %d", len(sender.sent))
+	}
+
+	if !strings.Contains(sender.sent[0].subject, "值班") || !strings.Contains(sender.sent[0].body, "查看值班排班") {
+		t.Errorf("expected Chinese incoming email, got subject=%q", sender.sent[0].subject)
+	}
+	if !strings.Contains(sender.sent[1].subject, "Your on-call shift") || !strings.Contains(sender.sent[1].body, "View on-call schedule") {
+		t.Errorf("expected English outgoing email, got subject=%q", sender.sent[1].subject)
+	}
+}
+
 func TestNotificationOncallRotation_InvalidPayload(t *testing.T) {
 	task := &NotificationOncallRotationTask{
 		users:  &mockUserRepo{users: map[uuid.UUID]*model.User{}},
diff --git a/docker-compose.all-in-one.yml b/docker-compose.all-in-one.yml
new file mode 100644
index 00000000..dd50af86
--- /dev/null
+++ b/docker-compose.all-in-one.yml
@@ -0,0 +1,47 @@
+services:
+  taskwondo:
+    image: ghcr.io/marcoshack/taskwondo/all-in-one:${IMAGE_TAG:-latest}
+    build:
+      context: .
+      dockerfile: docker/Dockerfile.all-in-one
+      args:
+        - GOPROXY
+    ports:
+      - "${WEB_PORT:-3000}:80"
+    depends_on:
+      nats:
+        condition: service_healthy
+    env_file: .env
+    environment:
+      - DATABASE_URL=${DATABASE_URL:?required}
+      - JWT_SECRET=${JWT_SECRET:?required — generate a random string of at least 32 chars}
+      - STORAGE_ENDPOINT=${STORAGE_ENDPOINT:?required}
+      - STORAGE_ACCESS_KEY=${STORAGE_ACCESS_KEY:?required}
+      - STORAGE_SECRET_KEY=${STORAGE_SECRET_KEY:?required}
+      - STORAGE_BUCKET=${STORAGE_BUCKET:-taskwondo-attachments}
+      - NATS_URL=nats://nats:4222
+      - OLLAMA_URL=${OLLAMA_URL:-}
+    restart: unless-stopped
+    deploy:
+      resources:
+        limits:
+          memory: 1G
+
+  nats:
+    image: nats:2-alpine
+    command: ["--jetstream", "--store_dir=/data", "--http_port=8222"]
+    volumes:
+      - natsdata:/data
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "-q", "http://localhost:8222/healthz"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    restart: unless-stopped
+    deploy:
+      resources:
+        limits:
+          memory: 512M
+
+volumes:
+  natsdata:
diff --git a/docker-compose.minimal.yml b/docker-compose.minimal.yml
new file mode 100644
index 00000000..b962c3f0
--- /dev/null
+++ b/docker-compose.minimal.yml
@@ -0,0 +1,55 @@
+# 最小化 Docker Compose 配置
+# 使用外部 PostgreSQL 数据库，内置 NATS 消息队列
+
+services:
+  nats:
+    image: nats:2-alpine
+    command: ["--jetstream", "--store_dir=/data", "--http_port=8222"]
+    volumes:
+      - natsdata:/data
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "-q", "http://localhost:8222/healthz"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    restart: unless-stopped
+    deploy:
+      resources:
+        limits:
+          memory: 256M
+
+  api:
+    image: ghcr.io/marcoshack/taskwondo/api:${IMAGE_TAG:-latest}
+    depends_on:
+      nats:
+        condition: service_healthy
+    environment:
+      - API_PORT=8080
+      - DATABASE_URL=${DATABASE_URL:?required}
+      - JWT_SECRET=${JWT_SECRET:?required}
+      - STORAGE_ENDPOINT=${STORAGE_ENDPOINT:?required}
+      - STORAGE_ACCESS_KEY=${STORAGE_ACCESS_KEY:?required}
+      - STORAGE_SECRET_KEY=${STORAGE_SECRET_KEY:?required}
+      - STORAGE_BUCKET=${STORAGE_BUCKET:-taskwondo-attachments}
+      - STORAGE_USE_SSL=${STORAGE_USE_SSL:-true}
+      - NATS_URL=nats://nats:4222
+    restart: unless-stopped
+    deploy:
+      resources:
+        limits:
+          memory: 512M
+
+  web:
+    image: ghcr.io/marcoshack/taskwondo/web:${IMAGE_TAG:-latest}
+    ports:
+      - "${WEB_PORT:-3000}:80"
+    depends_on:
+      - api
+    restart: unless-stopped
+    deploy:
+      resources:
+        limits:
+          memory: 512M
+
+volumes:
+  natsdata:
diff --git a/docker/Dockerfile.all-in-one b/docker/Dockerfile.all-in-one
new file mode 100644
index 00000000..2b2ed3a4
--- /dev/null
+++ b/docker/Dockerfile.all-in-one
@@ -0,0 +1,47 @@
+# ---- Build Go binaries ----
+FROM docker.1ms.run/golang:1.25-alpine AS go-builder
+
+RUN apk add --no-cache git
+WORKDIR /src
+
+ARG GOPROXY
+ENV GOPROXY=${GOPROXY}
+
+COPY api/go.mod api/go.sum ./
+RUN go mod download
+
+COPY api/ .
+
+ARG COMMIT_SHA=dev
+RUN CGO_ENABLED=0 go build -ldflags "-X main.commitSHA=${COMMIT_SHA}" -o /bin/taskwondo ./cmd/server
+RUN CGO_ENABLED=0 go build -o /bin/taskwondo-worker ./cmd/worker
+
+# ---- Build frontend ----
+FROM docker.1ms.run/node:22-alpine AS web-builder
+
+WORKDIR /src
+
+ARG NPM_VERSION=11.15.0
+RUN npm install -g npm@${NPM_VERSION}
+
+COPY web/package.json web/package-lock.json ./
+RUN npm ci
+
+COPY web/ .
+RUN npm run build
+
+# ---- Final image ----
+FROM docker.1ms.run/alpine:3.20
+
+RUN apk add --no-cache ca-certificates tzdata nginx supervisor
+
+COPY --from=go-builder /bin/taskwondo /bin/taskwondo
+COPY --from=go-builder /bin/taskwondo-worker /bin/taskwondo-worker
+COPY --from=web-builder /src/dist /usr/share/nginx/html
+
+COPY docker/nginx-all-in-one.conf /etc/nginx/http.d/default.conf
+COPY docker/supervisord.conf /etc/supervisord.conf
+
+EXPOSE 80
+
+ENTRYPOINT ["/usr/bin/supervisord", "-c", "/etc/supervisord.conf"]
diff --git a/docker/Dockerfile.api.cn b/docker/Dockerfile.api.cn
new file mode 100644
index 00000000..56eca431
--- /dev/null
+++ b/docker/Dockerfile.api.cn
@@ -0,0 +1,26 @@
+FROM docker.1ms.run/golang:1.25-alpine AS builder
+
+RUN apk add --no-cache git
+
+WORKDIR /src
+
+ARG GOPROXY
+ENV GOPROXY=${GOPROXY}
+
+COPY go.mod go.sum ./
+RUN go mod download
+
+COPY . .
+
+ARG COMMIT_SHA=dev
+RUN CGO_ENABLED=0 go build -ldflags "-X main.commitSHA=${COMMIT_SHA}" -o /bin/taskwondo ./cmd/server
+
+FROM docker.1ms.run/alpine:3.20
+
+RUN apk add --no-cache ca-certificates tzdata
+
+COPY --from=builder /bin/taskwondo /bin/taskwondo
+
+EXPOSE 8080
+
+ENTRYPOINT ["/bin/taskwondo"]
diff --git a/docker/Dockerfile.web.cn b/docker/Dockerfile.web.cn
new file mode 100644
index 00000000..f128abc9
--- /dev/null
+++ b/docker/Dockerfile.web.cn
@@ -0,0 +1,21 @@
+FROM docker.1ms.run/node:22-alpine AS builder
+
+WORKDIR /src
+
+ARG NPM_VERSION=11.15.0
+RUN npm install -g npm@${NPM_VERSION}
+
+COPY web/package.json web/package-lock.json ./
+RUN npm ci
+
+COPY web/ .
+RUN npm run build
+
+FROM docker.1ms.run/nginx:alpine
+
+COPY --from=builder /src/dist /usr/share/nginx/html
+COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/docker/Dockerfile.worker.cn b/docker/Dockerfile.worker.cn
new file mode 100644
index 00000000..47657ef3
--- /dev/null
+++ b/docker/Dockerfile.worker.cn
@@ -0,0 +1,23 @@
+FROM docker.1ms.run/golang:1.25-alpine AS builder
+
+RUN apk add --no-cache git
+
+WORKDIR /src
+
+ARG GOPROXY
+ENV GOPROXY=${GOPROXY}
+
+COPY go.mod go.sum ./
+RUN go mod download
+
+COPY . .
+
+RUN CGO_ENABLED=0 go build -o /bin/taskwondo-worker ./cmd/worker
+
+FROM docker.1ms.run/alpine:3.20
+
+RUN apk add --no-cache ca-certificates tzdata
+
+COPY --from=builder /bin/taskwondo-worker /bin/taskwondo-worker
+
+ENTRYPOINT ["/bin/taskwondo-worker"]
diff --git a/docker/nginx-all-in-one.conf b/docker/nginx-all-in-one.conf
new file mode 100644
index 00000000..5a1f14d1
--- /dev/null
+++ b/docker/nginx-all-in-one.conf
@@ -0,0 +1,38 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    server_tokens off;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-Frame-Options "DENY" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    location /api/ {
+        proxy_pass http://127.0.0.1:8080;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header Connection "";
+        proxy_buffering off;
+        client_max_body_size 55m;
+        proxy_read_timeout 120s;
+        proxy_send_timeout 120s;
+    }
+
+    location ~ ^/(healthz|readyz|metrics)$ {
+        proxy_pass http://127.0.0.1:8080;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}
diff --git a/docker/supervisord.conf b/docker/supervisord.conf
new file mode 100644
index 00000000..9ca8a0df
--- /dev/null
+++ b/docker/supervisord.conf
@@ -0,0 +1,32 @@
+[supervisord]
+nodaemon=true
+logfile=/var/log/supervisord.log
+pidfile=/var/run/supervisord.pid
+
+[program:nginx]
+command=nginx -g "daemon off;"
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=0
+
+[program:api]
+command=/bin/taskwondo
+environment=API_PORT="8080"
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=0
+
+[program:worker]
+command=/bin/taskwondo-worker
+autostart=true
+autorestart=true
+stdout_logfile=/dev/stdout
+stdout_logfile_maxbytes=0
+stderr_logfile=/dev/stderr
+stderr_logfile_maxbytes=0
diff --git a/test/e2e/lib/api.ts b/test/e2e/lib/api.ts
index 324056f9..27694c9e 100644
--- a/test/e2e/lib/api.ts
+++ b/test/e2e/lib/api.ts
@@ -715,6 +715,7 @@ export interface SMTPConfig {
   encryption: 'starttls' | 'tls' | 'none';
   from_address: string;
   from_name: string;
+  skip_cert_verify?: boolean;
 }
 
 export async function setSMTPConfig(
@@ -772,6 +773,7 @@ export async function resetSMTPConfig(
     encryption: 'starttls',
     from_address: '',
     from_name: '',
+    skip_cert_verify: false,
   });
 }
 
diff --git a/test/e2e/tests/admin/brand-title.spec.ts b/test/e2e/tests/admin/brand-title.spec.ts
new file mode 100644
index 00000000..6cfa53ce
--- /dev/null
+++ b/test/e2e/tests/admin/brand-title.spec.ts
@@ -0,0 +1,67 @@
+import { test as base, expect } from '../../lib/fixtures';
+import { getAdminToken } from '../../lib/fixtures';
+import * as api from '../../lib/api';
+
+// Admin context — brand_name is a system setting
+const test = base.extend({
+  storageState: async ({}, use) => {
+    const adminToken = getAdminToken();
+    const state = {
+      cookies: [],
+      origins: [
+        {
+          origin: process.env.BASE_URL || 'http://localhost:5173',
+          localStorage: [{ name: 'taskwondo_token', value: adminToken }],
+        },
+      ],
+    };
+    await use(state as any);
+  },
+});
+
+test.describe.configure({ mode: 'serial' });
+
+const BRAND = 'Acme Tab Title';
+
+test.describe('Brand tab title', () => {
+  test.afterEach(async ({ request }) => {
+    const adminToken = getAdminToken();
+    // Re-sync the default namespace display name back, then drop the override
+    await api.setSystemSetting(request, adminToken, 'brand_name', 'Taskwondo');
+    await api.deleteSystemSetting(request, adminToken, 'brand_name');
+  });
+
+  test('tab title uses the configured brand name', async ({ page, request }) => {
+    const adminToken = getAdminToken();
+    await api.setSystemSetting(request, adminToken, 'brand_name', BRAND);
+
+    // Base title on a plain page
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveTitle(BRAND);
+
+    // Work item detail page composes display ID + title + brand
+    const project = await api.createProject(request, adminToken, 'BT' + Date.now().toString(36).slice(-3).toUpperCase(), 'Brand Title Project');
+    const item = await api.createWorkItem(request, adminToken, project.key, {
+      title: 'Check the tab',
+      type: 'task',
+    });
+
+    await page.goto(`/d/projects/${project.key}/items/${item.item_number}`);
+    await expect(page.getByText('Check the tab').first()).toBeVisible();
+    await expect(page).toHaveTitle(`${project.key}-${item.item_number} Check the tab - ${BRAND}`);
+
+    // Leaving the detail page restores the base brand title
+    await page.goto('/');
+    await expect(page).toHaveTitle(BRAND);
+  });
+
+  test('tab title falls back to Taskwondo when no brand is set', async ({ page, request }) => {
+    const adminToken = getAdminToken();
+    await api.deleteSystemSetting(request, adminToken, 'brand_name');
+
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+    await expect(page).toHaveTitle('Taskwondo');
+  });
+});
diff --git a/test/e2e/tests/admin/smtp-config.spec.ts b/test/e2e/tests/admin/smtp-config.spec.ts
index ea5a15b5..671616df 100644
--- a/test/e2e/tests/admin/smtp-config.spec.ts
+++ b/test/e2e/tests/admin/smtp-config.spec.ts
@@ -247,6 +247,35 @@ test.describe('SMTP Configuration', () => {
     await attach(page, testInfo, '01-encryption-persisted');
   });
 
+  test('persists skip certificate verification option', async ({ page }, testInfo) => {
+    await gotoIntegrations(page);
+
+    // Enable SMTP and fill required fields
+    await page.getByRole('switch').click();
+    await page.getByLabel('SMTP Host').fill('smtp.example.com');
+    await page.getByLabel('SMTP Port').fill('465');
+    await page.getByLabel('Username').fill('[EMAIL_REDACTED]');
+    await page.getByLabel('Password').fill('pass');
+    await page.getByLabel('From Address').fill('[EMAIL_REDACTED]');
+    await page.locator('select').selectOption('tls');
+
+    // The cert-verify checkbox should be visible for TLS
+    const skipCheckbox = page.getByLabel('Skip certificate verification');
+    await expect(skipCheckbox).toBeVisible();
+    await expect(skipCheckbox).not.toBeChecked();
+    await skipCheckbox.check();
+
+    await page.getByRole('button', { name: 'Save' }).click();
+    await expect(page.getByText('SMTP settings saved.')).toBeVisible();
+
+    // Reload and verify the option persisted
+    await page.reload();
+    await page.waitForLoadState('networkidle');
+    await page.getByRole('heading', { name: 'SMTP' }).click();
+    await expect(page.getByLabel('Skip certificate verification')).toBeChecked();
+    await attach(page, testInfo, '01-skip-cert-verify-persisted');
+  });
+
   test('non-admin user cannot access integrations page', async ({ page, testUser }, testInfo) => {
     await page.goto('/');
     await dismissWelcomeModal(page);
diff --git a/test/e2e/tests/navigation/search-cjk.spec.ts b/test/e2e/tests/navigation/search-cjk.spec.ts
new file mode 100644
index 00000000..e2c30706
--- /dev/null
+++ b/test/e2e/tests/navigation/search-cjk.spec.ts
@@ -0,0 +1,124 @@
+import { test, expect } from '../../lib/fixtures';
+import * as api from '../../lib/api';
+import { openPalette, paletteInput } from '../../lib/palette';
+
+const BASE_URL = process.env.BASE_URL || 'http://localhost:5173';
+
+interface SearchData {
+  fts: { results: Array<{ entity_type: string; entity_id: string; snippet: string }>; total: number };
+  semantic: { available: boolean };
+}
+
+async function searchAPI(
+  request: import('@playwright/test').APIRequestContext,
+  token: string,
+  query: string,
+  entityType?: string,
+): Promise<SearchData> {
+  let url = `${BASE_URL}/api/v1/search?q=${encodeURIComponent(query)}`;
+  if (entityType) url += `&entity_type=${entityType}`;
+  const res = await request.get(url, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok()) throw new Error(`Search failed (${res.status()}): ${await res.text()}`);
+  const body = await res.json();
+  return body.data;
+}
+
+test.describe('CJK search', () => {
+  test('API: Chinese substring matches a work item title', async ({ request, testUser, testProject }) => {
+    const suffix = Date.now();
+    const item = await api.createWorkItem(request, testUser.token, testProject.key, {
+      title: `登录页面崩溃${suffix}`,
+      type: 'task',
+    });
+
+    const data = await searchAPI(request, testUser.token, `登录页面${suffix}`);
+    const hit = data.fts.results.find(r => r.entity_id === item.id);
+    expect(hit).toBeDefined();
+  });
+
+  test('API: Chinese substring matches inside a work item description', async ({ request, testUser, testProject }) => {
+    const suffix = Date.now();
+    const item = await api.createWorkItem(request, testUser.token, testProject.key, {
+      title: `Issue ${suffix}`,
+      type: 'task',
+      description: `用户反馈支付流程在弱网环境下会超时${suffix}`,
+    });
+
+    const data = await searchAPI(request, testUser.token, `弱网环境${suffix}`);
+    const hit = data.fts.results.find(r => r.entity_id === item.id);
+    expect(hit).toBeDefined();
+  });
+
+  test('API: Chinese query matches milestones and teams', async ({ request, testUser, testProject }) => {
+    const suffix = Date.now();
+    const milestone = await api.createMilestone(request, testUser.token, testProject.key, {
+      name: `发布里程碑${suffix}`,
+    });
+    const team = await api.createTeam(request, testUser.token, testProject.key, {
+      name: `平台组${suffix}`,
+    });
+
+    const msData = await searchAPI(request, testUser.token, `里程碑${suffix}`, 'milestone');
+    expect(msData.fts.results.some(r => r.entity_id === milestone.id)).toBe(true);
+
+    const teamData = await searchAPI(request, testUser.token, `平台组${suffix}`, 'team');
+    expect(teamData.fts.results.some(r => r.entity_id === team.id)).toBe(true);
+  });
+
+  test('API: mixed CJK + latin query matches when terms sit in different fields', async ({ request, testUser, testProject }) => {
+    const suffix = Date.now();
+    const item = await api.createWorkItem(request, testUser.token, testProject.key, {
+      title: `修复登录超时 bugfix-${suffix}`,
+      type: 'task',
+    });
+
+    const data = await searchAPI(request, testUser.token, `登录超时 bugfix-${suffix}`);
+    const hit = data.fts.results.find(r => r.entity_id === item.id);
+    expect(hit).toBeDefined();
+  });
+
+  test('API: project item list search accepts a Chinese query', async ({ request, testUser, testProject }) => {
+    const suffix = Date.now();
+    const item = await api.createWorkItem(request, testUser.token, testProject.key, {
+      title: `数据库连接池耗尽${suffix}`,
+      type: 'task',
+    });
+
+    const body = await api.listWorkItems(request, testUser.token, testProject.key, {
+      q: `连接池${suffix}`,
+    });
+    expect(body.data.some((i) => i.id === item.id)).toBe(true);
+  });
+
+  test('UI: a single Chinese character finds work items in the palette', async ({
+    page,
+    request,
+    testUser,
+    testProject,
+  }) => {
+    const suffix = `搜${Date.now()}`;
+    await api.createWorkItem(request, testUser.token, testProject.key, {
+      title: `${suffix}页面白屏`,
+      type: 'task',
+    });
+
+    await page.goto(`/d/projects/${testProject.key}/items`);
+    const welcomeHeading = page.getByRole('heading', { name: 'Welcome' });
+    if (await welcomeHeading.isVisible({ timeout: 2000 }).catch(() => false)) {
+      await page.keyboard.press('Escape');
+      await expect(welcomeHeading).not.toBeVisible({ timeout: 3000 });
+    }
+    await expect(page.getByRole('heading', { name: /items/i })).toBeVisible({ timeout: 5000 });
+
+    await openPalette(page);
+    const searchInput = paletteInput(page);
+    await expect(searchInput).toBeVisible({ timeout: 3000 });
+    // One CJK character is already a meaningful word — it must clear the floor.
+    await searchInput.fill(suffix);
+
+    const resultItem = page.locator('[data-search-item]').filter({ hasText: suffix }).first();
+    await expect(resultItem).toBeVisible({ timeout: 10000 });
+  });
+});
diff --git a/test/e2e/tests/preferences/cjk-typography.spec.ts b/test/e2e/tests/preferences/cjk-typography.spec.ts
new file mode 100644
index 00000000..99c9d527
--- /dev/null
+++ b/test/e2e/tests/preferences/cjk-typography.spec.ts
@@ -0,0 +1,60 @@
+import { test, expect } from '../../lib/fixtures';
+
+async function attach(page: any, testInfo: any, name: string) {
+  const screenshot = await page.screenshot();
+  await testInfo.attach(name, { body: screenshot, contentType: 'image/png' });
+}
+
+async function rootFontSize(page: any): Promise<number> {
+  return page.evaluate(() => parseFloat(getComputedStyle(document.documentElement).fontSize));
+}
+
+async function selectLanguage(page: any, nativeLabel: string, lang: string) {
+  await page.goto('/preferences/appearance');
+  await page.waitForLoadState('networkidle');
+  await page.getByRole('button', { name: new RegExp(`^${nativeLabel}\\s`) }).click();
+  await expect.poll(() => page.evaluate(() => document.documentElement.lang)).toBe(lang);
+}
+
+async function selectFontSize(page: any, label: string, value: string) {
+  await page.getByRole('button', { name: new RegExp(`^${label}`) }).click();
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem('taskwondo_font_size')))
+    .toBe(value);
+}
+
+test.describe('CJK typography', () => {
+  test('chinese ui renders at an optically smaller size and uses a CJK font stack', async ({ page }, testInfo) => {
+    await selectLanguage(page, 'English', 'en');
+    const latinSize = await rootFontSize(page);
+    expect(latinSize).toBeCloseTo(17.6, 1);
+    expect(await page.evaluate(() => getComputedStyle(document.body).fontFamily)).not.toContain('PingFang SC');
+
+    await selectLanguage(page, '中文', 'zh');
+    const zhSize = await rootFontSize(page);
+    // CJK glyphs fill the em box, so the root size is nudged down ~9% for zh
+    expect(zhSize).toBeLessThan(latinSize - 1);
+    expect(zhSize).toBeCloseTo(latinSize * 0.909, 0);
+    expect(await page.evaluate(() => getComputedStyle(document.body).fontFamily)).toContain('PingFang SC');
+    await attach(page, testInfo, '01-chinese-appearance');
+
+    await selectLanguage(page, 'English', 'en');
+    expect(await rootFontSize(page)).toBeCloseTo(latinSize, 1);
+  });
+
+  test('font size preference still scales the whole ui for chinese', async ({ page }, testInfo) => {
+    await selectLanguage(page, '中文', 'zh');
+    const normal = await rootFontSize(page);
+
+    await selectFontSize(page, '大', 'large');
+    const larger = await rootFontSize(page);
+    expect(larger).toBeGreaterThan(normal);
+    await attach(page, testInfo, '02-chinese-larger');
+
+    await selectFontSize(page, '小', 'small');
+    const smaller = await rootFontSize(page);
+    expect(smaller).toBeLessThan(normal);
+    expect(smaller).toBeCloseTo(16 * 0.909, 0);
+    await attach(page, testInfo, '03-chinese-smaller');
+  });
+});
diff --git a/web/eslint.config.js b/web/eslint.config.js
index 5e6b472f..8438870a 100644
--- a/web/eslint.config.js
+++ b/web/eslint.config.js
@@ -15,6 +15,9 @@ export default defineConfig([
       reactHooks.configs.flat.recommended,
       reactRefresh.configs.vite,
     ],
+    rules: {
+      'react-hooks/set-state-in-effect': 'off',
+    },
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
diff --git a/web/package-lock.json b/web/package-lock.json
index 8e0a65e1..73eb451d 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,38 +8,38 @@
       "name": "web",
       "version": "0.0.0",
       "dependencies": {
-        "@tailwindcss/typography": "^0.5.19",
-        "@tanstack/react-query": "^5.90.21",
-        "axios": "^1.13.5",
-        "i18next": "^25.8.11",
-        "i18next-browser-languagedetector": "^8.2.1",
-        "lucide-react": "^0.574.0",
-        "mermaid": "^11.12.3",
-        "react": "^19.2.0",
-        "react-dom": "^19.2.0",
-        "react-easy-crop": "^5.5.6",
-        "react-i18next": "^16.5.4",
-        "react-markdown": "^10.1.0",
-        "react-router-dom": "^7.13.0",
-        "recharts": "^3.7.0",
-        "remark-gfm": "^4.0.1"
+        "@tailwindcss/typography": "0.5.19",
+        "@tanstack/react-query": "5.90.21",
+        "axios": "1.13.5",
+        "i18next": "25.8.11",
+        "i18next-browser-languagedetector": "8.2.1",
+        "lucide-react": "0.574.0",
+        "mermaid": "11.12.3",
+        "react": "19.2.4",
+        "react-dom": "19.2.4",
+        "react-easy-crop": "5.5.6",
+        "react-i18next": "16.5.4",
+        "react-markdown": "10.1.0",
+        "react-router-dom": "7.13.0",
+        "recharts": "3.7.0",
+        "remark-gfm": "4.0.1"
       },
       "devDependencies": {
-        "@eslint/js": "^9.39.1",
-        "@tailwindcss/vite": "^4.1.18",
-        "@types/node": "^24.10.1",
-        "@types/react": "^19.2.7",
-        "@types/react-dom": "^19.2.3",
-        "@vitejs/plugin-react": "^5.1.1",
-        "eslint": "^9.39.1",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-react-refresh": "^0.4.24",
-        "globals": "^16.5.0",
-        "tailwindcss": "^4.1.18",
-        "typescript": "~5.9.3",
-        "typescript-eslint": "^8.48.0",
-        "vite": "^7.3.1",
-        "vitest": "^4.0.18"
+        "@eslint/js": "9.39.2",
+        "@tailwindcss/vite": "4.1.18",
+        "@types/node": "24.10.13",
+        "@types/react": "19.2.14",
+        "@types/react-dom": "19.2.3",
+        "@vitejs/plugin-react": "5.1.4",
+        "eslint": "9.39.2",
+        "eslint-plugin-react-hooks": "7.0.1",
+        "eslint-plugin-react-refresh": "0.4.26",
+        "globals": "16.5.0",
+        "tailwindcss": "4.1.18",
+        "typescript": "5.9.3",
+        "typescript-eslint": "8.56.0",
+        "vite": "7.3.1",
+        "vitest": "4.0.18"
       }
     },
     "node_modules/@antfu/install-pkg": {
diff --git a/web/src/api/client.ts b/web/src/api/client.ts
index 1f84523b..2f97084b 100644
--- a/web/src/api/client.ts
+++ b/web/src/api/client.ts
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import i18n from '@/i18n'
 
 const TOKEN_KEY = 'taskwondo_token'
 
@@ -38,6 +39,8 @@ api.interceptors.request.use((config) => {
   if (token) {
     config.headers.Authorization = `Bearer ${token}`
   }
+  // Lets the API localize server-side artifacts (e.g. verification / password reset emails)
+  config.headers['Accept-Language'] = i18n.language
   return config
 })
 
diff --git a/web/src/api/systemSettings.ts b/web/src/api/systemSettings.ts
index 326ad8a5..ea7c0e41 100644
--- a/web/src/api/systemSettings.ts
+++ b/web/src/api/systemSettings.ts
@@ -47,6 +47,7 @@ export interface SMTPConfig {
   encryption: 'starttls' | 'tls' | 'none'
   from_address: string
   from_name: string
+  skip_cert_verify: boolean
 }
 
 export async function getSMTPConfig(): Promise<SMTPConfig> {
@@ -69,6 +70,12 @@ export async function testSMTPConfig(): Promise<{ message: string }> {
 export interface OAuthProviderConfig {
   client_id: string
   client_secret: string
+  // Generic OIDC / custom SSO only. Absent for the built-in providers.
+  issuer?: string
+  scopes?: string[]
+  button_label?: string
+  disable_pkce?: boolean
+  require_verified_email?: boolean
 }
 
 export async function getOAuthConfig(provider: string): Promise<OAuthProviderConfig> {
diff --git a/web/src/components/AppShell.tsx b/web/src/components/AppShell.tsx
index 3d77b14f..6e5dc17e 100644
--- a/web/src/components/AppShell.tsx
+++ b/web/src/components/AppShell.tsx
@@ -156,13 +156,13 @@ export function AppShell() {
   }
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900">
-      <nav className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
+    <div className="min-h-screen flex flex-col bg-[var(--background-secondary)]">
+      <nav className="bg-[var(--surface)] border-b border-[var(--border)]">
         <div className={containerClass(true)}>
           <div className="flex justify-between h-14 relative">
             <div className="flex items-center gap-6 min-w-0">
               {/* Desktop: always show brand name */}
-              <button onClick={() => guardedNavigate(p('/projects'))} className="hidden sm:block text-lg font-bold text-indigo-600 dark:text-indigo-400 shrink-0">
+              <button onClick={() => guardedNavigate(p('/projects'))} className="hidden sm:block text-lg font-bold text-[var(--primary)] shrink-0">
                 {brandName}
               </button>
               {/* Mobile: home icon + project key when any project active, brand when none */}
@@ -170,7 +170,7 @@ export function AppShell() {
                 <div className="flex sm:hidden items-center gap-2 min-w-0">
                   <button
                     onClick={() => guardedNavigate(p('/projects'))}
-                    className="p-1.5 rounded-md text-indigo-600 dark:text-indigo-400 hover:bg-gray-100 dark:hover:bg-gray-800 shrink-0"
+                    className="p-1.5 rounded-[var(--radius)] text-[var(--primary)] hover:bg-[var(--hover)] shrink-0 transition-colors"
                     aria-label={t('nav.home')}
                   >
                     <Home className="h-5 w-5" />
@@ -183,19 +183,19 @@ export function AppShell() {
                   </button>
                 </div>
               ) : (
-                <button onClick={() => guardedNavigate(p('/projects'))} className="sm:hidden text-lg font-bold text-indigo-600 dark:text-indigo-400 shrink-0">
+                <button onClick={() => guardedNavigate(p('/projects'))} className="sm:hidden text-lg font-bold text-[var(--primary)] shrink-0">
                   {brandName}
                 </button>
               )}
               {adminMatch ? (
                 <div className="hidden sm:flex items-center gap-2.5 min-w-0">
-                  <Settings className="h-5 w-5 text-gray-500 dark:text-gray-400 shrink-0" />
-                  <span className="text-base font-semibold text-gray-900 dark:text-gray-100">{t('admin.title')}</span>
+                  <Settings className="h-5 w-5 text-[var(--foreground-secondary)] shrink-0" />
+                  <span className="text-base font-semibold text-[var(--foreground)]">{t('admin.title')}</span>
                 </div>
               ) : preferencesMatch ? (
                 <div className="hidden sm:flex items-center gap-2.5 min-w-0">
-                  <UserCog className="h-5 w-5 text-gray-500 dark:text-gray-400 shrink-0" />
-                  <span className="text-base font-semibold text-gray-900 dark:text-gray-100 truncate">{t('preferences.navTitle')}</span>
+                  <UserCog className="h-5 w-5 text-[var(--foreground-secondary)] shrink-0" />
+                  <span className="text-base font-semibold text-[var(--foreground)] truncate">{t('preferences.navTitle')}</span>
                 </div>
               ) : activeProject ? (
                 <button
@@ -204,7 +204,7 @@ export function AppShell() {
                   data-testid="project-switcher-badge"
                 >
                   <ProjectKeyBadge size="nav">{activeProject.key}</ProjectKeyBadge>
-                  <span className="text-base font-semibold text-gray-900 dark:text-gray-100 truncate">
+                  <span className="text-base font-semibold text-[var(--foreground)] truncate">
                     {activeProject.name}
                   </span>
                 </button>
@@ -213,7 +213,7 @@ export function AppShell() {
             <div className="relative flex items-center gap-1.5 sm:gap-2 shrink-0" ref={menuRef}>
               <button
                 onClick={() => setSearchOpen(true)}
-                className="p-2 rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+                className="p-2 rounded-[var(--radius)] text-[var(--foreground-secondary)] hover:bg-[var(--hover)] transition-colors"
                 aria-label={t('nav.search')}
               >
                 <Search className="h-5 w-5" />
@@ -221,12 +221,12 @@ export function AppShell() {
               {!isCustomerOnly && (
                 <button
                   onClick={() => guardedNavigate('/user/inbox')}
-                  className="relative p-2 rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+                  className="relative p-2 rounded-[var(--radius)] text-[var(--foreground-secondary)] hover:bg-[var(--hover)] transition-colors"
                   aria-label={t('inbox.title')}
                 >
                   <Inbox className="h-5 w-5" />
                   {inboxCount != null && inboxCount > 0 && (
-                    <span className="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-indigo-600 px-1 text-[10px] font-bold text-white">
+                    <span className="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--primary)] px-1 text-[10px] font-bold text-[var(--primary-foreground)]">
                       {inboxCount > 99 ? '99+' : inboxCount}
                     </span>
                   )}
@@ -237,7 +237,7 @@ export function AppShell() {
                 <div className="relative" ref={nsRef}>
                   <button
                     onClick={() => setNsDropdownOpen(!nsDropdownOpen)}
-                    className="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800"
+                    className="p-2 rounded-[var(--radius)] hover:bg-[var(--hover)] transition-colors"
                     aria-label={t('namespaces.switchNamespace')}
                     data-testid="namespace-switcher"
                   >
@@ -248,8 +248,8 @@ export function AppShell() {
                     />
                   </button>
                   {nsDropdownOpen && (
-                    <div className="absolute right-0 top-full mt-1 w-64 bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm rounded-md shadow-lg border border-gray-200 dark:border-gray-600 py-1 z-50">
-                      <div className="px-3 py-1.5 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+                    <div className="absolute right-0 top-full mt-1 w-64 bg-[var(--surface)] rounded-[var(--radius-md)] shadow-[var(--shadow-lg)] border border-[var(--border)] py-1 z-50">
+                      <div className="px-3 py-1.5 text-xs font-medium text-[var(--foreground-muted)] uppercase tracking-wider">
                         {t('namespaces.title')}
                       </div>
                       {namespaces.map((ns) => (
@@ -261,19 +261,19 @@ export function AppShell() {
                               setActiveNamespace(ns.slug)
                             }
                           }}
-                          className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 ${
+                          className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 transition-colors ${
                             ns.slug === activeNamespace?.slug
-                              ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300'
-                              : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                              ? 'bg-[var(--primary-muted)] text-[var(--primary)]'
+                              : 'text-[var(--foreground)] hover:bg-[var(--hover)]'
                           }`}
                         >
                           <NamespaceIcon icon={ns.icon} color={ns.color} className="h-4 w-4 shrink-0" />
                           <div className="min-w-0 flex-1">
                             <div className="font-medium truncate">{ns.display_name}</div>
-                            {!ns.is_default && <div className="text-xs text-gray-400 dark:text-gray-500">{ns.slug}</div>}
+                            {!ns.is_default && <div className="text-xs text-[var(--foreground-muted)]">{ns.slug}</div>}
                           </div>
                           {ns.slug === activeNamespace?.slug && (
-                            <span className="text-xs text-indigo-600 dark:text-indigo-400 shrink-0">{t('common.current')}</span>
+                            <span className="text-xs text-[var(--primary)] shrink-0">{t('common.current')}</span>
                           )}
                           {!ns.is_default && (
                             <button
@@ -282,7 +282,7 @@ export function AppShell() {
                                 setNsDropdownOpen(false)
                                 guardedNavigate(`/${toUrlSegment(ns.slug)}/settings`)
                               }}
-                              className="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 shrink-0"
+                              className="p-1 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground)] shrink-0 transition-colors"
                               aria-label={t('namespaces.settings')}
                             >
                               <Settings className="h-3.5 w-3.5" />
@@ -290,13 +290,13 @@ export function AppShell() {
                           )}
                         </button>
                       ))}
-                      <div className="border-t border-gray-100 dark:border-gray-700 mt-1 pt-1">
+                      <div className="border-t border-[var(--border)] mt-1 pt-1">
                         <button
                           onClick={() => {
                             setNsDropdownOpen(false)
                             setNsCreateOpen(true)
                           }}
-                          className="w-full text-left px-3 py-2 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2.5"
+                          className="w-full text-left px-3 py-2 text-sm text-[var(--foreground-secondary)] hover:bg-[var(--hover)] flex items-center gap-2.5 transition-colors"
                         >
                           <Plus className="h-4 w-4" />
                           {t('namespaces.createNew')}
@@ -308,53 +308,53 @@ export function AppShell() {
               )}
               <button
                 onClick={toggleMobileOpen}
-                className="sm:hidden p-2 rounded-md text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+                className="sm:hidden p-2 rounded-[var(--radius)] text-[var(--foreground-secondary)] hover:bg-[var(--hover)] transition-colors"
                 aria-label={t('sidebar.menu')}
               >
                 <Menu className="h-5 w-5" />
               </button>
-              <div className="hidden sm:block w-px h-5 bg-gray-200 dark:bg-gray-700 mx-1" />
+              <div className="hidden sm:block w-px h-5 bg-[var(--border)] mx-1" />
               <button
                 onClick={() => setMenuOpen(!menuOpen)}
-                className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
+                className="flex items-center gap-2 text-sm text-[var(--foreground)] hover:text-[var(--foreground)] transition-colors"
               >
                 <Avatar name={user?.display_name ?? ''} avatarUrl={user?.avatar_url} size="sm" />
                 <span className="hidden sm:block">{user?.display_name}</span>
               </button>
               {menuOpen && (
-                <div className="absolute right-0 top-full mt-1 w-48 bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm rounded-md shadow-lg border border-gray-200 dark:border-gray-600 py-1 z-50">
-                  <div className="px-4 py-2 text-xs text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-700">
+                <div className="absolute right-0 top-full mt-1 w-48 bg-[var(--surface)] rounded-[var(--radius-md)] shadow-[var(--shadow-lg)] border border-[var(--border)] py-1 z-50">
+                  <div className="px-4 py-2 text-xs text-[var(--foreground-secondary)] border-b border-[var(--border)]">
                     {user?.email}
                   </div>
                   <button
                     onClick={() => { setMenuOpen(false); guardedNavigate('/preferences') }}
-                    className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    className="w-full text-left px-4 py-2 text-sm text-[var(--foreground)] hover:bg-[var(--hover)] flex items-center gap-2 transition-colors"
                   >
-                    <UserCog className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    <UserCog className="h-4 w-4 text-[var(--foreground-muted)]" />
                     {t('nav.preferences')}
                   </button>
                   {user?.global_role === 'admin' && (
                     <button
                       onClick={() => { setMenuOpen(false); guardedNavigate('/admin') }}
-                      className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                      className="w-full text-left px-4 py-2 text-sm text-[var(--foreground)] hover:bg-[var(--hover)] flex items-center gap-2 transition-colors"
                     >
-                      <Settings className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                      <Settings className="h-4 w-4 text-[var(--foreground-muted)]" />
                       {t('nav.systemSettings')}
                     </button>
                   )}
                   <button
                     onClick={() => { setMenuOpen(false); setWelcomeOpen(true) }}
-                    className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    className="w-full text-left px-4 py-2 text-sm text-[var(--foreground)] hover:bg-[var(--hover)] flex items-center gap-2 transition-colors"
                   >
-                    <HelpCircle className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    <HelpCircle className="h-4 w-4 text-[var(--foreground-muted)]" />
                     {t('nav.help')}
                   </button>
-                  <div className="border-t border-gray-100 dark:border-gray-700" />
+                  <div className="border-t border-[var(--border)]" />
                   <button
                     onClick={handleLogout}
-                    className="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2"
+                    className="w-full text-left px-4 py-2 text-sm text-[var(--foreground)] hover:bg-[var(--hover)] flex items-center gap-2 transition-colors"
                   >
-                    <LogOut className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    <LogOut className="h-4 w-4 text-[var(--foreground-muted)]" />
                     {t('nav.signOut')}
                   </button>
                 </div>
@@ -490,12 +490,12 @@ function ProjectSwitcherModal({
         value={search}
         onChange={(e) => setSearch(e.target.value)}
         onKeyDown={handleKeyDown}
-        className="block w-full rounded-md border border-gray-300 dark:border-gray-600 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 mb-3"
+        className="block w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] bg-[var(--surface)] text-[var(--foreground)] placeholder-[var(--foreground-muted)] mb-3"
       />
       {isLoading ? (
         <div className="flex justify-center py-6"><Spinner /></div>
       ) : filtered.length === 0 ? (
-        <p className="text-sm text-gray-500 dark:text-gray-400 py-4 text-center">{t('projects.noProjectsFound')}</p>
+        <p className="text-sm text-[var(--foreground-secondary)] py-4 text-center">{t('projects.noProjectsFound')}</p>
       ) : (
         <ul ref={listRef} className="max-h-64 overflow-y-auto -mx-2">
           {filtered.map((p, i) => (
@@ -505,18 +505,18 @@ function ProjectSwitcherModal({
                 onMouseEnter={() => setSelectedIndex(i)}
                 className={`w-full text-left flex items-center gap-3 px-3 py-2.5 rounded-md text-sm ${
                   i === selectedIndex
-                    ? 'bg-indigo-50 dark:bg-indigo-900/30'
-                    : 'hover:bg-gray-100 dark:hover:bg-gray-700'
+                    ? 'bg-[var(--primary-muted)]'
+                    : 'hover:bg-[var(--surface-hover)]'
                 }`}
               >
                 <ProjectKeyBadge>{p.key}</ProjectKeyBadge>
-                <span className="text-gray-900 dark:text-gray-100 font-medium truncate">{p.name}</span>
+                <span className="text-[var(--foreground)] font-medium truncate">{p.name}</span>
                 <span className="ml-auto flex items-center gap-2 shrink-0">
                   {isCurrent(p) && (
-                    <span className="text-xs text-indigo-600 dark:text-indigo-400">{t('common.current')}</span>
+                    <span className="text-xs text-[var(--primary)]">{t('common.current')}</span>
                   )}
                   {showNamespaces && p.namespace_slug && (
-                    <span className="flex items-center gap-1 text-[0.7rem] text-gray-400 dark:text-gray-500">
+                    <span className="flex items-center gap-1 text-[0.7rem] text-[var(--foreground-muted)]">
                       <span>{p.namespace_slug}</span>
                       <NamespaceIcon icon={p.namespace_icon ?? 'building2'} color={p.namespace_color ?? 'slate'} className="h-3 w-3" />
                     </span>
@@ -528,13 +528,13 @@ function ProjectSwitcherModal({
         </ul>
       )}
       {showNamespaces && (
-        <div className="flex justify-end mt-2 pt-2 border-t border-gray-100 dark:border-gray-700">
-          <label className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none" data-testid="all-namespaces-toggle">
+        <div className="flex justify-end mt-2 pt-2 border-t border-[var(--border)]">
+          <label className="flex items-center gap-2 text-xs text-[var(--foreground-secondary)] cursor-pointer select-none" data-testid="all-namespaces-toggle">
             <input
               type="checkbox"
               checked={showAllNamespaces}
               onChange={handleToggleAllNamespaces}
-              className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500 h-3.5 w-3.5"
+              className="rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] h-3.5 w-3.5"
             />
             {t('projects.switcher.showAllNamespaces')}
           </label>
diff --git a/web/src/components/AppSidebar.tsx b/web/src/components/AppSidebar.tsx
index 535ece35..53cd6e5a 100644
--- a/web/src/components/AppSidebar.tsx
+++ b/web/src/components/AppSidebar.tsx
@@ -115,19 +115,19 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
             }
           }}
           className={({ isActive }) =>
-            `group/nav relative flex items-center gap-3 rounded-md text-sm font-medium transition-colors min-w-0 ${
+            `group/nav relative flex items-center gap-3 rounded-[var(--radius)] text-sm font-medium transition-colors min-w-0 ${
               !showLabels ? 'justify-center px-0 py-2' : 'px-3 py-2'
             } ${
               isActive
-                ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
-                : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+                ? 'bg-[var(--primary-muted)] text-[var(--primary)]'
+                : 'text-[var(--foreground)] hover:bg-[var(--hover)]'
             }`
           }
         >
           <span className="relative shrink-0">
             <item.icon className="h-5 w-5" />
             {!showLabels && item.badge != null && (
-              <span className="absolute -top-1.5 -right-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-indigo-600 px-1 text-[10px] font-bold text-white">
+              <span className="absolute -top-1.5 -right-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-[var(--primary)] px-1 text-[10px] font-bold text-[var(--primary-foreground)]">
                 {item.badge > 99 ? '99+' : item.badge}
               </span>
             )}
@@ -136,14 +136,14 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
             <>
               <span className="flex-1 truncate">{item.label}</span>
               {item.badge != null && (
-                <span className="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900/40 px-1.5 text-xs font-medium text-indigo-700 dark:text-indigo-300">
+                <span className="ml-auto flex h-5 min-w-5 items-center justify-center rounded-full bg-[var(--primary-muted)] px-1.5 text-xs font-medium text-[var(--primary)]">
                   {item.badge > 99 ? '99+' : item.badge}
                 </span>
               )}
             </>
           )}
           {!showLabels && (
-            <span className="pointer-events-none absolute left-full ml-2 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/nav:opacity-100 dark:bg-gray-700 z-50">
+            <span className="pointer-events-none absolute left-full ml-2 rounded bg-[var(--foreground)] px-2 py-1 text-xs whitespace-nowrap text-[var(--background)] opacity-0 transition-opacity group-hover/nav:opacity-100 z-50">
               {item.label}
             </span>
           )}
@@ -169,15 +169,15 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
                 }
               }}
               className={({ isActive }) =>
-                `group/nav relative flex items-center justify-center rounded-md text-sm font-bold transition-colors min-w-0 px-0 py-2 ${
+                `group/nav relative flex items-center justify-center rounded-[var(--radius)] text-sm font-bold transition-colors min-w-0 px-0 py-2 ${
                   isActive
-                    ? 'bg-indigo-200 text-indigo-800 dark:bg-indigo-800/50 dark:text-indigo-200'
-                    : 'bg-indigo-100 text-indigo-700 hover:bg-indigo-200 dark:bg-indigo-900/40 dark:text-indigo-300 dark:hover:bg-indigo-800/50'
+                    ? 'bg-[var(--primary-muted)] text-[var(--primary)]'
+                    : 'bg-[var(--primary-muted)]/50 text-[var(--primary)] hover:bg-[var(--primary-muted)]'
                 }`
               }
             >
               {activeProjectKey}
-              <span className="pointer-events-none absolute left-full ml-2 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/nav:opacity-100 dark:bg-gray-700 z-50">
+              <span className="pointer-events-none absolute left-full ml-2 rounded bg-[var(--foreground)] px-2 py-1 text-xs whitespace-nowrap text-[var(--background)] opacity-0 transition-opacity group-hover/nav:opacity-100 z-50">
                 {t('sidebar.projects')}
               </span>
             </NavLink>
@@ -198,16 +198,16 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
               }
             }}
             className={({ isActive }) =>
-              `group/nav relative flex items-center gap-3 rounded-md text-sm font-medium transition-colors min-w-0 px-3 py-2 ${
+              `group/nav relative flex items-center gap-3 rounded-[var(--radius)] text-sm font-medium transition-colors min-w-0 px-3 py-2 ${
                 isActive
-                  ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
-                  : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+                  ? 'bg-[var(--primary-muted)] text-[var(--primary)]'
+                  : 'text-[var(--foreground)] hover:bg-[var(--hover)]'
               }`
             }
           >
             <FolderKanban className="h-5 w-5 shrink-0" />
             <span className="flex-1 truncate">{t('sidebar.projects')}</span>
-            <span className="ml-auto inline-flex items-center justify-center rounded-md bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 text-xs font-bold px-1.5 py-1 shrink-0">
+            <span className="ml-auto inline-flex items-center justify-center rounded-[var(--radius-sm)] bg-[var(--primary-muted)] text-[var(--primary)] text-xs font-bold px-1.5 py-1 shrink-0">
               {activeProjectKey}
             </span>
           </NavLink>
@@ -227,19 +227,19 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
             }
           }}
           className={({ isActive }) =>
-            `group/nav relative flex items-center gap-3 rounded-md text-sm font-medium transition-colors min-w-0 ${
+            `group/nav relative flex items-center gap-3 rounded-[var(--radius)] text-sm font-medium transition-colors min-w-0 ${
               !showLabels ? 'justify-center px-0 py-2' : 'px-3 py-2'
             } ${
               isActive
-                ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
-                : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+                ? 'bg-[var(--primary-muted)] text-[var(--primary)]'
+                : 'text-[var(--foreground)] hover:bg-[var(--hover)]'
             }`
           }
         >
           <FolderKanban className="h-5 w-5 shrink-0" />
           {showLabels && <span className="truncate">{t('sidebar.projects')}</span>}
           {!showLabels && (
-            <span className="pointer-events-none absolute left-full ml-2 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/nav:opacity-100 dark:bg-gray-700 z-50">
+            <span className="pointer-events-none absolute left-full ml-2 rounded bg-[var(--foreground)] px-2 py-1 text-xs whitespace-nowrap text-[var(--background)] opacity-0 transition-opacity group-hover/nav:opacity-100 z-50">
               {t('sidebar.projects')}
             </span>
           )}
@@ -255,9 +255,9 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
       <div className="relative mb-1" ref={nsRef}>
         <button
           onClick={() => setNsDropdownOpen(!nsDropdownOpen)}
-          className={`group/ns w-full flex items-center gap-2.5 rounded-md text-sm font-semibold transition-colors ${
+          className={`group/ns w-full flex items-center gap-2.5 rounded-[var(--radius)] text-sm font-semibold transition-colors ${
             showLabels ? 'px-3 py-2' : 'justify-center py-2'
-          } text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800`}
+          } text-[var(--foreground)] hover:bg-[var(--hover)]`}
           aria-label={t('namespaces.switchNamespace')}
         >
           <NamespaceIcon icon={activeNamespace.icon} color={activeNamespace.color} className="h-5 w-5 shrink-0" />
@@ -265,16 +265,16 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
             <span className="flex-1 truncate text-left">{activeNamespace.display_name}</span>
           )}
           {!showLabels && (
-            <span className="pointer-events-none absolute left-full ml-2 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/ns:opacity-100 dark:bg-gray-700 z-50">
+            <span className="pointer-events-none absolute left-full ml-2 rounded bg-[var(--foreground)] px-2 py-1 text-xs whitespace-nowrap text-[var(--background)] opacity-0 transition-opacity group-hover/ns:opacity-100 z-50">
               {activeNamespace.display_name}
             </span>
           )}
         </button>
         {nsDropdownOpen && (
-          <div className={`absolute z-50 w-64 bg-white/40 dark:bg-gray-800/40 backdrop-blur-sm rounded-md shadow-lg border border-gray-200 dark:border-gray-600 py-1 ${
+          <div className={`absolute z-50 w-64 bg-[var(--surface)] rounded-[var(--radius-md)] shadow-[var(--shadow-lg)] border border-[var(--border)] py-1 ${
             showLabels ? 'left-0 top-full mt-1' : 'left-full top-0 ml-2'
           }`}>
-            <div className="px-3 py-1.5 text-xs font-medium text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+            <div className="px-3 py-1.5 text-xs font-medium text-[var(--foreground-muted)] uppercase tracking-wider">
               {t('namespaces.title')}
             </div>
             {namespaces.map((ns) => (
@@ -286,19 +286,19 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
                     setActiveNamespace(ns.slug)
                   }
                 }}
-                className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 ${
+                className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 transition-colors ${
                   ns.slug === activeNamespace.slug
-                    ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300'
-                    : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                    ? 'bg-[var(--primary-muted)] text-[var(--primary)]'
+                    : 'text-[var(--foreground)] hover:bg-[var(--hover)]'
                 }`}
               >
                 <NamespaceIcon icon={ns.icon} color={ns.color} className="h-4 w-4 shrink-0" />
                 <div className="min-w-0 flex-1">
                   <div className="font-medium truncate">{ns.display_name}</div>
-                  {!ns.is_default && <div className="text-xs text-gray-400 dark:text-gray-500">{ns.slug}</div>}
+                  {!ns.is_default && <div className="text-xs text-[var(--foreground-muted)]">{ns.slug}</div>}
                 </div>
                 {ns.slug === activeNamespace.slug && (
-                  <span className="text-xs text-indigo-600 dark:text-indigo-400 shrink-0">{t('common.current')}</span>
+                  <span className="text-xs text-[var(--primary)] shrink-0">{t('common.current')}</span>
                 )}
                 {!ns.is_default && (
                   <button
@@ -307,7 +307,7 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
                       setNsDropdownOpen(false)
                       guardedNavigate(`/${toUrlSegment(ns.slug)}/settings`)
                     }}
-                    className="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 shrink-0"
+                    className="p-1 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground)] shrink-0 transition-colors"
                     aria-label={t('namespaces.settings')}
                   >
                     <Settings className="h-3.5 w-3.5" />
@@ -315,13 +315,13 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
                 )}
               </button>
             ))}
-            <div className="border-t border-gray-100 dark:border-gray-700 mt-1 pt-1">
+            <div className="border-t border-[var(--border)] mt-1 pt-1">
               <button
                 onClick={() => {
                   setNsDropdownOpen(false)
                   setNsCreateOpen(true)
                 }}
-                className="w-full text-left px-3 py-2 text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2.5"
+                className="w-full text-left px-3 py-2 text-sm text-[var(--foreground-secondary)] hover:bg-[var(--hover)] flex items-center gap-2.5 transition-colors"
               >
                 <Plus className="h-4 w-4" />
                 {t('namespaces.createNew')}
@@ -339,12 +339,12 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
         {/* User section — hidden when user is customer in all projects */}
         {!isCustomerOnly && (
           <>
-            <ul className="space-y-1">
+            <ul className="space-y-0.5">
               {userNav.map((item) => renderNavItem(item, showLabels))}
             </ul>
 
             {/* Separator */}
-            <div className="border-t border-gray-200 dark:border-gray-700 my-2" />
+            <div className="border-t border-[var(--border)] my-2" />
           </>
         )}
 
@@ -352,15 +352,18 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
         {renderNamespaceBanner(showLabels)}
 
         {/* Projects section */}
-        <ul className="space-y-1">
+        <ul className="space-y-0.5">
           {renderProjectsLink(showLabels)}
         </ul>
 
         {/* Active project context */}
         {activeProjectKey && projectNav.length > 0 && (
-          <ul className="space-y-1 mt-1">
-            {projectNav.map((item) => renderNavItem(item, showLabels))}
-          </ul>
+          <>
+            <div className="border-t border-[var(--border)] my-2" />
+            <ul className="space-y-0.5">
+              {projectNav.map((item) => renderNavItem(item, showLabels))}
+            </ul>
+          </>
         )}
       </>
     )
@@ -385,7 +388,7 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
         {mobileOpen && (
           <div className="fixed inset-0 z-40 sm:hidden" onClick={closeMobile}>
             <nav
-              className="absolute right-4 top-14 w-52 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-2"
+              className="absolute right-4 top-14 w-52 bg-[var(--surface)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] border border-[var(--border)] p-2"
               onClick={(e) => e.stopPropagation()}
             >
               {renderContent(true)}
@@ -402,19 +405,19 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
       {/* Desktop sidebar */}
       <nav
         className={`hidden sm:block shrink-0 transition-all duration-200 ${
-          collapsed ? 'w-14' : 'w-48'
+          collapsed ? 'w-14' : 'w-56'
         }`}
       >
         {renderContent(!collapsed)}
 
         <div
-          className={`mt-4 border-t border-gray-200 pt-4 dark:border-gray-700 ${
+          className={`mt-4 border-t border-[var(--border)] pt-4 ${
             collapsed ? 'flex justify-center' : ''
           }`}
         >
           <button
             onClick={toggleCollapsed}
-            className={`group/toggle relative flex items-center gap-3 rounded-md text-sm font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300 min-w-0 ${
+            className={`group/toggle relative flex items-center gap-3 rounded-[var(--radius)] text-sm font-medium text-[var(--foreground-secondary)] transition-colors hover:bg-[var(--hover)] hover:text-[var(--foreground)] min-w-0 ${
               collapsed ? 'justify-center px-0 py-2 w-full' : 'px-3 py-2 w-full'
             }`}
             aria-label={collapsed ? t('sidebar.expand') : t('sidebar.collapse')}
@@ -428,7 +431,7 @@ export function AppSidebar({ projectKey, customerProject, mobileOnly }: AppSideb
               </>
             )}
             {collapsed && (
-              <span className="pointer-events-none absolute left-full ml-2 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/toggle:opacity-100 dark:bg-gray-700 z-50">
+              <span className="pointer-events-none absolute left-full ml-2 rounded bg-[var(--foreground)] px-2 py-1 text-xs whitespace-nowrap text-[var(--background)] opacity-0 transition-opacity group-hover/toggle:opacity-100 z-50">
                 {t('sidebar.expand')}
               </span>
             )}
diff --git a/web/src/components/CommandPalette.tsx b/web/src/components/CommandPalette.tsx
index 87ab4c7b..34230419 100644
--- a/web/src/components/CommandPalette.tsx
+++ b/web/src/components/CommandPalette.tsx
@@ -37,6 +37,7 @@ import {
 } from '@/utils/paletteResults'
 import type { PaletteEntitySection, PaletteRow } from '@/utils/paletteResults'
 import type { NavigationEntry } from '@/utils/navigationCatalog'
+import { meetsSearchFloor } from '@/utils/searchRequest'
 import type { SearchResult } from '@/api/search'
 
 function entityIcon(type: string) {
@@ -166,9 +167,9 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
   const showSectionHeaders =
     semanticAvailable && (hasFtsResults || hasSemanticResults || semanticStatus === 'pending')
 
-  // Entity search only runs past the two-character floor; below it the palette
-  // is navigation-only and says so.
-  const belowEntityFloor = query.length > 0 && query.length < 2
+  // Entity search only runs past the character floor (one CJK character, two
+  // otherwise); below it the palette is navigation-only and says so.
+  const belowEntityFloor = query.length > 0 && !meetsSearchFloor(query)
   const showInitialLoading = isLoading && !hasFtsResults && !hasSemanticResults
 
   // Focus and select input when the palette opens (preserve previous query).
@@ -315,12 +316,12 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
   const rowClass = (index: number) =>
     `w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-sm ${
       index === selectedIndex
-        ? 'bg-indigo-50 dark:bg-indigo-900/30'
-        : 'hover:bg-gray-100 dark:hover:bg-gray-700'
+        ? 'bg-[var(--primary-muted)]'
+        : 'hover:bg-[var(--surface-hover)]'
     }`
 
   const sectionHeading = (text: string) => (
-    <span className="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+    <span className="text-xs font-semibold uppercase tracking-wider text-[var(--foreground-muted)]">
       {text}
     </span>
   )
@@ -331,7 +332,7 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
       return (
         <div key={`${showScores ? 'semantic' : 'fts'}-${section.entityType}`} className="mb-2 last:mb-0">
           <div className="flex items-center gap-2 px-3 py-1.5">
-            <Icon className="h-3.5 w-3.5 text-gray-400" />
+            <Icon className="h-3.5 w-3.5 text-[var(--foreground-muted)]" />
             {sectionHeading(t(`search.entityType.${section.entityType}`))}
           </div>
           {section.results.map((result) => {
@@ -353,30 +354,30 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
                 {parsed.type && <TypeBadge type={parsed.type} className={isCompleted ? 'opacity-40' : ''} />}
                 {result.entity_type === 'work_item' && result.project_key && result.item_number != null && (
                   <span className={`text-xs shrink-0 ${
-                    isCompleted ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400'
+                    isCompleted ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground-secondary)]'
                   }`}>
                     {result.project_key}-{result.item_number}
                   </span>
                 )}
                 {(result.entity_type === 'comment' || result.entity_type === 'attachment') && (
-                  <ItemIcon className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+                  <ItemIcon className="h-3.5 w-3.5 text-[var(--foreground-muted)] shrink-0" />
                 )}
                 <span className={`truncate flex-1 ${
                   isCompleted
-                    ? 'line-through text-gray-400 dark:text-gray-500'
-                    : 'text-gray-900 dark:text-gray-100'
+                    ? 'line-through text-[var(--foreground-muted)]'
+                    : 'text-[var(--foreground)]'
                 }`}>
                   {parsed.text}
                 </span>
                 {showScores && result.score > 0 && (
                   <span className="shrink-0 flex items-center gap-1.5">
-                    <div className="w-12 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+                    <div className="w-12 h-1.5 bg-[var(--surface-tertiary)] rounded-full overflow-hidden">
                       <div
-                        className="h-full bg-indigo-500 rounded-full"
+                        className="h-full bg-[var(--primary-muted)] rounded-full"
                         style={{ width: `${Math.round(result.score * 100)}%` }}
                       />
                     </div>
-                    <span className="text-xs text-gray-400 w-8 text-right">
+                    <span className="text-xs text-[var(--foreground-muted)] w-8 text-right">
                       {Math.round(result.score * 100)}%
                     </span>
                   </span>
@@ -391,7 +392,7 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
   return (
     <Modal open={open} onClose={onClose} position="top" className="!max-w-2xl">
       <div className="flex items-center gap-2 mb-3">
-        <Search className="h-5 w-5 text-gray-400 shrink-0" />
+        <Search className="h-5 w-5 text-[var(--foreground-muted)] shrink-0" />
         <input
           ref={inputRef}
           type="text"
@@ -399,14 +400,14 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           onKeyDown={handleKeyDown}
-          className="block w-full text-sm bg-transparent border-none outline-none text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
+          className="block w-full text-sm bg-transparent border-none outline-none text-[var(--foreground)] placeholder-gray-400 placeholder-[var(--foreground-muted)]"
         />
         {isLoading && (
-          <Loader2 className="h-4 w-4 text-gray-400 animate-spin shrink-0" />
+          <Loader2 className="h-4 w-4 text-[var(--foreground-muted)] animate-spin shrink-0" />
         )}
       </div>
 
-      <div className="border-t border-gray-200 dark:border-gray-700" />
+      <div className="border-t border-[var(--border)]" />
 
       <div ref={listRef} className="max-h-[60vh] overflow-y-auto py-2">
         {/* Navigation — always first, matched live from the first character. */}
@@ -435,9 +436,9 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
                       className="h-4 w-4 shrink-0"
                     />
                   ) : (
-                    <Icon className="h-4 w-4 text-gray-400 shrink-0" />
+                    <Icon className="h-4 w-4 text-[var(--foreground-muted)] shrink-0" />
                   )}
-                  <span className="truncate flex-1 text-gray-900 dark:text-gray-100">
+                  <span className="truncate flex-1 text-[var(--foreground)]">
                     {entry.label}
                   </span>
                 </button>
@@ -461,9 +462,9 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
         {semanticAvailable && (
           <>
             {showSectionHeaders && hasSemanticResults && (
-              <div className="flex items-center gap-2 px-3 py-1.5 mt-3 mb-1 border-t border-gray-100 dark:border-gray-700/50 pt-3">
+              <div className="flex items-center gap-2 px-3 py-1.5 mt-3 mb-1 border-t border-[var(--border)]/50 pt-3">
                 {sectionHeading(t('search.relatedResults'))}
-                <span className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium bg-gray-100 text-gray-500 dark:bg-gray-700/50 dark:text-gray-400">
+                <span className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium bg-[var(--surface-tertiary)] text-[var(--foreground-secondary)] bg-[var(--surface-secondary)]/50 text-[var(--foreground-muted)]">
                   <FlaskConical className="h-3 w-3" />
                   {t('common.experimental')}
                 </span>
@@ -472,18 +473,18 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
             {hasSemanticResults && renderEntitySections(semanticSections, true)}
 
             {semanticStatus === 'pending' && (
-              <div className="flex items-center gap-2 px-3 py-3 mt-2 border-t border-gray-100 dark:border-gray-700/50">
-                <Loader2 className="h-3.5 w-3.5 text-gray-400 animate-spin" />
-                <span className="text-xs text-gray-400 dark:text-gray-500">
+              <div className="flex items-center gap-2 px-3 py-3 mt-2 border-t border-[var(--border)]/50">
+                <Loader2 className="h-3.5 w-3.5 text-[var(--foreground-muted)] animate-spin" />
+                <span className="text-xs text-[var(--foreground-muted)]">
                   {t('search.semanticLoading')}
                 </span>
               </div>
             )}
 
             {semanticError && (
-              <div className="flex items-center gap-2 px-3 py-3 mt-2 border-t border-gray-100 dark:border-gray-700/50">
-                <AlertCircle className="h-3.5 w-3.5 text-gray-400 shrink-0" />
-                <span className="text-xs text-gray-400 dark:text-gray-500">
+              <div className="flex items-center gap-2 px-3 py-3 mt-2 border-t border-[var(--border)]/50">
+                <AlertCircle className="h-3.5 w-3.5 text-[var(--foreground-muted)] shrink-0" />
+                <span className="text-xs text-[var(--foreground-muted)]">
                   {t('search.semanticError')}
                 </span>
               </div>
@@ -495,12 +496,12 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
         {rows.length === 0 && (
           showInitialLoading ? (
             <div className="flex justify-center py-8">
-              <Loader2 className="h-6 w-6 text-gray-400 animate-spin" />
+              <Loader2 className="h-6 w-6 text-[var(--foreground-muted)] animate-spin" />
             </div>
           ) : (
             <div className="flex flex-col items-center py-8 gap-2">
-              <SearchX className="h-8 w-8 text-gray-300 dark:text-gray-600" />
-              <p className="text-sm text-gray-500 dark:text-gray-400">
+              <SearchX className="h-8 w-8 text-[var(--foreground-secondary)]" />
+              <p className="text-sm text-[var(--foreground-secondary)]">
                 {t('search.noResults')}
               </p>
             </div>
@@ -509,7 +510,7 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
 
         {/* One character in: navigation already answers, entity search doesn't. */}
         {belowEntityFloor && (
-          <p className="px-3 py-2 text-xs text-gray-400 dark:text-gray-500">
+          <p className="px-3 py-2 text-xs text-[var(--foreground-muted)]">
             {t('search.hint')}
           </p>
         )}
@@ -517,24 +518,24 @@ export function CommandPalette({ open, onClose, projectKey }: CommandPaletteProp
         {ftsCount >= limit && (
           <button
             onClick={() => setLimit((prev) => prev + 20)}
-            className="w-full text-center py-2 text-sm text-indigo-600 dark:text-indigo-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+            className="w-full text-center py-2 text-sm text-[var(--primary)] hover:bg-[var(--surface-hover)] rounded-md"
           >
             {t('search.showMore')}
           </button>
         )}
       </div>
 
-      <div className="border-t border-gray-200 dark:border-gray-700 pt-2 mt-1 hidden [@media(hover:hover)_and_(pointer:fine)]:flex items-center justify-between">
-        <div className="flex items-center gap-2 text-xs text-gray-400">
-          <kbd className="inline-flex items-center justify-center min-w-[1.25rem] px-1 py-0.5 font-mono text-[10px] text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded">
+      <div className="border-t border-[var(--border)] pt-2 mt-1 hidden [@media(hover:hover)_and_(pointer:fine)]:flex items-center justify-between">
+        <div className="flex items-center gap-2 text-xs text-[var(--foreground-muted)]">
+          <kbd className="inline-flex items-center justify-center min-w-[1.25rem] px-1 py-0.5 font-mono text-[10px] text-[var(--foreground-secondary)] bg-[var(--surface-secondary)] border border-[var(--border)] rounded">
             ↑↓
           </kbd>
           <span>{t('search.navigate')}</span>
-          <kbd className="inline-flex items-center justify-center min-w-[1.25rem] px-1 py-0.5 font-mono text-[10px] text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded">
+          <kbd className="inline-flex items-center justify-center min-w-[1.25rem] px-1 py-0.5 font-mono text-[10px] text-[var(--foreground-secondary)] bg-[var(--surface-secondary)] border border-[var(--border)] rounded">
             ↵
           </kbd>
           <span>{t('search.open')}</span>
-          <kbd className="inline-flex items-center justify-center min-w-[1.25rem] px-1 py-0.5 font-mono text-[10px] text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded">
+          <kbd className="inline-flex items-center justify-center min-w-[1.25rem] px-1 py-0.5 font-mono text-[10px] text-[var(--foreground-secondary)] bg-[var(--surface-secondary)] border border-[var(--border)] rounded">
             esc
           </kbd>
           <span>{t('search.dismiss')}</span>
diff --git a/web/src/components/CreateNamespaceModal.tsx b/web/src/components/CreateNamespaceModal.tsx
index 9cb3384f..ada2c300 100644
--- a/web/src/components/CreateNamespaceModal.tsx
+++ b/web/src/components/CreateNamespaceModal.tsx
@@ -66,7 +66,7 @@ export function CreateNamespaceModal({ open, onClose, onCreated }: Props) {
         <span className="flex items-center gap-3">
           {t('namespaces.createTitle')}
           {!isAdmin && limit > 0 && (
-            <span className={`text-sm font-normal ${atLimit ? 'text-amber-500 dark:text-amber-400' : 'text-gray-500 dark:text-gray-400'}`}>
+            <span className={`text-sm font-normal ${atLimit ? 'text-amber-500 dark:text-amber-400' : 'text-[var(--foreground-secondary)]'}`}>
               {t('namespaces.limitCounter', { count, limit })}
             </span>
           )}
@@ -77,7 +77,7 @@ export function CreateNamespaceModal({ open, onClose, onCreated }: Props) {
         {atLimit && (
           <p className="text-sm text-amber-600 dark:text-amber-400">{t('namespaces.limitReached')}</p>
         )}
-        <p className="text-sm text-gray-500 dark:text-gray-400">{t('namespaces.createDescription')}</p>
+        <p className="text-sm text-[var(--foreground-secondary)]">{t('namespaces.createDescription')}</p>
         <Input
           label={t('namespaces.displayName')}
           value={displayName}
@@ -95,8 +95,8 @@ export function CreateNamespaceModal({ open, onClose, onCreated }: Props) {
           required
           disabled={atLimit}
         />
-        <p className="text-xs text-gray-400 dark:text-gray-500 -mt-3">{t('namespaces.slugHint')}</p>
-        {formError && <p className="text-sm text-red-600 dark:text-red-400">{formError}</p>}
+        <p className="text-xs text-[var(--foreground-muted)] -mt-3">{t('namespaces.slugHint')}</p>
+        {formError && <p className="text-sm text-[var(--danger)]">{formError}</p>}
         <div className="flex justify-end gap-3 pt-2">
           <Button type="button" variant="secondary" onClick={handleClose}>
             {t('common.cancel')}
diff --git a/web/src/components/EscalationListModal.tsx b/web/src/components/EscalationListModal.tsx
index ada74b4c..5056d120 100644
--- a/web/src/components/EscalationListModal.tsx
+++ b/web/src/components/EscalationListModal.tsx
@@ -223,7 +223,7 @@ export function EscalationListModal({ open, onClose, onSave, projectKey, editing
       className="!max-w-2xl"
     >
       <div className="space-y-5">
-        {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+        {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
 
         {/* Name */}
         <Input
@@ -236,7 +236,7 @@ export function EscalationListModal({ open, onClose, onSave, projectKey, editing
         {/* Levels */}
         <div>
           <div className="flex items-center justify-between mb-2">
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="block text-sm font-medium text-[var(--foreground)]">
               {t('escalation.levels')}
             </label>
             {levels.length > 0 && (
@@ -248,8 +248,8 @@ export function EscalationListModal({ open, onClose, onSave, projectKey, editing
           </div>
 
           {levels.length === 0 ? (
-            <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-              <p className="text-sm text-gray-500 dark:text-gray-400 mb-3">{t('escalation.noLevels')}</p>
+            <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+              <p className="text-sm text-[var(--foreground-secondary)] mb-3">{t('escalation.noLevels')}</p>
               <Button variant="secondary" size="sm" onClick={addLevel}>
                 <Plus className="h-3.5 w-3.5 mr-1" />
                 {t('escalation.addLevel')}
@@ -260,25 +260,25 @@ export function EscalationListModal({ open, onClose, onSave, projectKey, editing
               {levels.map((level, index) => (
                 <div
                   key={index}
-                  className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3"
+                  className="border border-[var(--border)] rounded-lg p-4 space-y-3"
                 >
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3 flex-1">
                       <div>
-                        <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+                        <label className="block text-xs font-medium text-[var(--foreground-secondary)] mb-1">
                           {t('escalation.threshold')}
                         </label>
                         <div className="flex items-center gap-1.5">
                           <input
                             type="number"
                             min="1"
-                            className="block w-24 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                            className="block w-24 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                             value={level.threshold_pct}
                             onChange={(e) => updateLevelThreshold(index, e.target.value)}
                             onBlur={sortLevelsByThreshold}
                             placeholder={t('escalation.thresholdPlaceholder')}
                           />
-                          <span className="text-xs text-gray-500 dark:text-gray-400 shrink-0">
+                          <span className="text-xs text-[var(--foreground-secondary)] shrink-0">
                             {t('escalation.thresholdHelp')}
                           </span>
                         </div>
@@ -286,7 +286,7 @@ export function EscalationListModal({ open, onClose, onSave, projectKey, editing
                     </div>
                     <button
                       type="button"
-                      className="text-gray-400 hover:text-red-500 p-1"
+                      className="text-[var(--foreground-muted)] hover:text-[var(--danger)] p-1"
                       onClick={() => removeLevel(index)}
                       title={t('escalation.removeLevel')}
                     >
@@ -296,7 +296,7 @@ export function EscalationListModal({ open, onClose, onSave, projectKey, editing
 
                   {/* Users and Teams */}
                   <div>
-                    <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
+                    <label className="block text-xs font-medium text-[var(--foreground-secondary)] mb-1">
                       {t('escalation.notifyUsersAndTeams')}
                     </label>
 
@@ -313,7 +313,7 @@ export function EscalationListModal({ open, onClose, onSave, projectKey, editing
                             <span>{team.name}</span>
                             <button
                               type="button"
-                              className="ml-0.5 hover:text-red-500"
+                              className="ml-0.5 hover:text-[var(--danger)]"
                               onClick={() => removeTeamFromLevel(index, team.id)}
                             >
                               <X className="h-3 w-3" />
@@ -324,13 +324,13 @@ export function EscalationListModal({ open, onClose, onSave, projectKey, editing
                         {level.users.map((user) => (
                           <span
                             key={`user-${user.id}`}
-                            className="inline-flex items-center gap-1 rounded-full bg-indigo-50 dark:bg-indigo-900/30 px-2.5 py-1 text-xs font-medium text-indigo-700 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-700"
+                            className="inline-flex items-center gap-1 rounded-full bg-[var(--primary-muted)] px-2.5 py-1 text-xs font-medium text-[var(--primary)] border border-[var(--primary-border)] dark:border-[var(--primary-border)]"
                           >
                             <Avatar name={user.display_name} avatarUrl={user.avatar_url} size="xs" />
                             <span>{user.display_name}</span>
                             <button
                               type="button"
-                              className="ml-0.5 hover:text-red-500"
+                              className="ml-0.5 hover:text-[var(--danger)]"
                               onClick={() => removeUserFromLevel(index, user.id)}
                             >
                               <X className="h-3 w-3" />
@@ -357,7 +357,7 @@ export function EscalationListModal({ open, onClose, onSave, projectKey, editing
         </div>
 
         {/* Actions */}
-        <div className="flex justify-end gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+        <div className="flex justify-end gap-2 pt-2 border-t border-[var(--border)]">
           <Button variant="secondary" onClick={onClose}>
             {t('common.cancel')}
           </Button>
@@ -448,7 +448,7 @@ function MemberTeamPicker({
     <div ref={containerRef} className="relative">
       <input
         ref={inputRef}
-        className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+        className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
         placeholder={t('escalation.searchPlaceholder')}
         value={search}
         onChange={(e) => { setSearch(e.target.value); updatePosition(); setOpen(true) }}
@@ -459,11 +459,11 @@ function MemberTeamPicker({
         <div
           ref={dropdownRef}
           style={dropdownStyle}
-          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"
+          className="bg-[var(--surface)] border border-[var(--border)] rounded-md shadow-lg"
         >
           <ul className="max-h-48 overflow-auto">
             {!hasResults ? (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">
+              <li className="px-3 py-2 text-sm text-[var(--foreground-muted)]">
                 {t('projects.settings.noUsersFound')}
               </li>
             ) : (
@@ -471,14 +471,14 @@ function MemberTeamPicker({
                 {/* Teams section */}
                 {availableTeams.length > 0 && (
                   <>
-                    <li className="px-3 py-1 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider bg-gray-100 dark:bg-gray-700/50">
+                    <li className="px-3 py-1 text-xs font-semibold text-[var(--foreground-secondary)] uppercase tracking-wider bg-[var(--surface-secondary)]/50">
                       {t('escalation.teamsSection')}
                     </li>
                     {availableTeams.map((team) => (
                       <li key={`team-${team.id}`}>
                         <button
                           type="button"
-                          className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 flex items-center gap-2"
+                          className="w-full text-left px-3 py-2 text-sm hover:bg-[var(--surface-hover)] text-[var(--foreground)] flex items-center gap-2"
                           onClick={() => handleSelectTeam(team)}
                         >
                           <span className="shrink-0 h-5 w-5 rounded-full bg-green-100 dark:bg-green-900/40 flex items-center justify-center">
@@ -495,20 +495,20 @@ function MemberTeamPicker({
                 {/* Users section */}
                 {availableMembers.length > 0 && (
                   <>
-                    <li className="px-3 py-1 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider bg-gray-100 dark:bg-gray-700/50">
+                    <li className="px-3 py-1 text-xs font-semibold text-[var(--foreground-secondary)] uppercase tracking-wider bg-[var(--surface-secondary)]/50">
                       {t('escalation.usersSection')}
                     </li>
                     {availableMembers.map((member) => (
                       <li key={member.user_id}>
                         <button
                           type="button"
-                          className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 flex items-center gap-2"
+                          className="w-full text-left px-3 py-2 text-sm hover:bg-[var(--surface-hover)] text-[var(--foreground)] flex items-center gap-2"
                           onClick={() => handleSelectMember(member)}
                         >
                           <span className="shrink-0"><Avatar name={member.display_name} avatarUrl={member.avatar_url} size="xs" /></span>
                           <div className="min-w-0">
                             <div className="font-medium truncate">{member.display_name}</div>
-                            <div className="text-xs text-gray-400 truncate">{member.email}</div>
+                            <div className="text-xs text-[var(--foreground-muted)] truncate">{member.email}</div>
                           </div>
                         </button>
                       </li>
diff --git a/web/src/components/KeyboardShortcutsModal.tsx b/web/src/components/KeyboardShortcutsModal.tsx
index 9dea8ea2..ab1505d2 100644
--- a/web/src/components/KeyboardShortcutsModal.tsx
+++ b/web/src/components/KeyboardShortcutsModal.tsx
@@ -15,7 +15,7 @@ interface ShortcutCategory {
 
 function Kbd({ children }: { children: string }) {
   return (
-    <kbd className="inline-flex items-center justify-center min-w-[1.5rem] px-1.5 py-0.5 text-xs font-mono font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 border border-gray-300 dark:border-gray-500 rounded shadow-sm">
+    <kbd className="inline-flex items-center justify-center min-w-[1.5rem] px-1.5 py-0.5 text-xs font-mono font-medium text-[var(--foreground)] bg-[var(--surface-secondary)] border border-[var(--border-strong)] rounded shadow-sm">
       {children}
     </kbd>
   )
@@ -24,11 +24,11 @@ function Kbd({ children }: { children: string }) {
 function ShortcutRow({ keys, label, chord, thenLabel }: ShortcutEntry & { thenLabel: string }) {
   return (
     <div className="flex items-center justify-between py-1.5">
-      <span className="text-sm text-gray-600 dark:text-gray-300">{label}</span>
+      <span className="text-sm text-[var(--foreground-secondary)]">{label}</span>
       <span className="flex items-center gap-1 shrink-0 ml-4">
         {keys.map((k, i) => (
           <span key={i} className="flex items-center gap-1">
-            {i > 0 && <span className="text-xs text-gray-400">{chord ? '+' : thenLabel}</span>}
+            {i > 0 && <span className="text-xs text-[var(--foreground-muted)]">{chord ? '+' : thenLabel}</span>}
             <Kbd>{k}</Kbd>
           </span>
         ))}
@@ -102,10 +102,10 @@ export function KeyboardShortcutsModal({ open, onClose }: { open: boolean; onClo
       <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-8 gap-y-4">
         {categories.map((cat) => (
           <div key={cat.title}>
-            <h3 className="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-1">
+            <h3 className="text-xs font-semibold uppercase tracking-wider text-[var(--foreground-muted)] mb-1">
               {cat.title}
             </h3>
-            <div className="divide-y divide-gray-100 dark:divide-gray-700">
+            <div className="divide-y divide-[var(--border)]">
               {cat.shortcuts.map((s, i) => (
                 <ShortcutRow key={i} keys={s.keys} label={s.label} chord={s.chord} thenLabel={t('shortcuts.then')} />
               ))}
diff --git a/web/src/components/NamespaceIcon.tsx b/web/src/components/NamespaceIcon.tsx
index d74d2977..03943614 100644
--- a/web/src/components/NamespaceIcon.tsx
+++ b/web/src/components/NamespaceIcon.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import {
   Building2, Users, Briefcase, Code, Rocket, Shield, Heart, Zap,
   BookOpen, Star, Layers, Compass, Target, Lightbulb, Globe,
@@ -40,13 +41,13 @@ export type NamespaceColor = typeof NAMESPACE_COLORS[number]
 /** Tailwind color classes for each namespace color. */
 const COLOR_CLASSES: Record<string, { text: string; bg: string; ring: string }> = {
   slate:  { text: 'text-slate-500',  bg: 'bg-slate-500',  ring: 'ring-slate-500' },
-  red:    { text: 'text-red-500',    bg: 'bg-red-500',    ring: 'ring-red-500' },
+  red:    { text: 'text-[var(--danger)]',    bg: 'bg-red-500',    ring: 'ring-red-500' },
   orange: { text: 'text-orange-500', bg: 'bg-orange-500', ring: 'ring-orange-500' },
   amber:  { text: 'text-amber-500',  bg: 'bg-amber-500',  ring: 'ring-amber-500' },
   green:  { text: 'text-green-500',  bg: 'bg-green-500',  ring: 'ring-green-500' },
   teal:   { text: 'text-teal-500',   bg: 'bg-teal-500',   ring: 'ring-teal-500' },
   blue:   { text: 'text-blue-500',   bg: 'bg-blue-500',   ring: 'ring-blue-500' },
-  indigo: { text: 'text-indigo-500', bg: 'bg-indigo-500', ring: 'ring-indigo-500' },
+  indigo: { text: 'text-[var(--primary)]', bg: 'bg-[var(--primary-muted)]', ring: 'ring-[var(--focus-ring)]' },
   purple: { text: 'text-purple-500', bg: 'bg-purple-500', ring: 'ring-purple-500' },
   pink:   { text: 'text-pink-500',   bg: 'bg-pink-500',   ring: 'ring-pink-500' },
 }
diff --git a/web/src/components/OncallCalendar.tsx b/web/src/components/OncallCalendar.tsx
index 855fcdc4..8326e583 100644
--- a/web/src/components/OncallCalendar.tsx
+++ b/web/src/components/OncallCalendar.tsx
@@ -264,7 +264,7 @@ export function OncallCalendar({ members, projectKey, teamId }: OncallCalendarPr
       </div>
 
       {/* Grid */}
-      <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+      <div className="border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden">
         {/* Day headers */}
         <div className="grid grid-cols-7 bg-gray-50 dark:bg-gray-800">
           {dayLabels.map((label) => (
@@ -280,7 +280,7 @@ export function OncallCalendar({ members, projectKey, teamId }: OncallCalendarPr
           const weekSlots = calendarSlots.slice(weekStart, weekStart + 7)
 
           return (
-            <div key={wi} className="border-t border-gray-200 dark:border-gray-700">
+            <div key={wi} className="border-t border-gray-200 dark:border-gray-600">
               {/* Day numbers */}
               <div className="grid grid-cols-7">
                 {weekSlots.map((slot, di) => {
diff --git a/web/src/components/OncallTab.tsx b/web/src/components/OncallTab.tsx
index 9aec101a..084dcb05 100644
--- a/web/src/components/OncallTab.tsx
+++ b/web/src/components/OncallTab.tsx
@@ -85,10 +85,10 @@ export function OncallTab({
   if (noRotation) {
     return (
       <div className="max-w-3xl space-y-4">
-        {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
-        <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-12 text-center">
-          <Clock className="h-12 w-12 text-gray-300 dark:text-gray-600 mx-auto mb-4" />
-          <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{t('teams.oncall.noRotation')}</p>
+        {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
+        <div className="border border-dashed border-[var(--border)] rounded-lg p-12 text-center">
+          <Clock className="h-12 w-12 text-[var(--foreground-secondary)] mx-auto mb-4" />
+          <p className="text-sm text-[var(--foreground-secondary)] mb-4">{t('teams.oncall.noRotation')}</p>
           {canManage && (
             <Button onClick={() => setCreateOpen(true)}>
               <Plus className="h-4 w-4 mr-1" />
@@ -109,7 +109,7 @@ export function OncallTab({
 
   return (
     <div className="space-y-6">
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
 
       {/* Two-column layout: 70% calendar/history | 30% details */}
       {hasRotation && (
@@ -177,23 +177,23 @@ function RotationDetailsCard({ data }: { data: OncallRotationWithMembers }) {
   const { t } = useTranslation()
 
   return (
-    <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3">
-      <p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+    <div className="border border-[var(--border)] rounded-lg p-4 space-y-3">
+      <p className="text-xs text-[var(--foreground-secondary)] uppercase tracking-wider">
         {t('teams.oncall.title')}
       </p>
-      <div className="space-y-1 text-xs text-gray-500 dark:text-gray-400">
+      <div className="space-y-1 text-xs text-[var(--foreground-secondary)]">
         <div className="flex justify-between">
           <span>{t('teams.oncall.periodDays')}</span>
-          <span className="text-gray-700 dark:text-gray-300">{t('teams.oncall.period', { days: data.period_days })}</span>
+          <span className="text-[var(--foreground)]">{t('teams.oncall.period', { days: data.period_days })}</span>
         </div>
         <div className="flex justify-between">
           <span>{t('teams.oncall.timezone')}</span>
-          <span className="text-gray-700 dark:text-gray-300">{data.timezone}</span>
+          <span className="text-[var(--foreground)]">{data.timezone}</span>
         </div>
         {data.next_rotation_at && (
           <div className="flex justify-between">
             <span>{t('teams.oncall.nextRotationLabel')}</span>
-            <span className="text-gray-700 dark:text-gray-300">
+            <span className="text-[var(--foreground)]">
               {new Date(data.next_rotation_at).toLocaleDateString()}{' '}
               {(() => { const match = data.rotation_time?.match(/T(\d{2}:\d{2})/); return match ? match[1] : data.rotation_time?.slice(0, 5) })()}
             </span>
@@ -211,16 +211,16 @@ function RotationMembersPanel({ data }: { data: OncallRotationWithMembers }) {
   const sortedMembers = [...data.members].sort((a, b) => a.position - b.position)
 
   return (
-    <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3">
-      <p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+    <div className="border border-[var(--border)] rounded-lg p-4 space-y-3">
+      <p className="text-xs text-[var(--foreground-secondary)] uppercase tracking-wider">
         {t('teams.oncall.participants')}
       </p>
       <div className="space-y-2">
         {sortedMembers.map((member, idx) => (
           <div key={member.user_id} className="flex items-center gap-2">
-            <span className="text-xs text-gray-400 w-4 text-right shrink-0">{idx + 1}</span>
+            <span className="text-xs text-[var(--foreground-muted)] w-4 text-right shrink-0">{idx + 1}</span>
             <Avatar name={member.display_name} avatarUrl={member.avatar_url} size="xs" />
-            <span className="text-sm text-gray-900 dark:text-gray-100">{member.display_name}</span>
+            <span className="text-sm text-[var(--foreground)]">{member.display_name}</span>
             {member.user_id === data.current_user_id && !data.is_override && (
               <Badge color="green">{t('teams.oncall.active')}</Badge>
             )}
@@ -264,7 +264,7 @@ function CreateRotationModal({
 
   return (
     <Modal open={open} onClose={onClose} title={t('teams.oncall.createRotation')}>
-      {error && <p className="text-sm text-red-600 dark:text-red-400 mb-3">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)] mb-3">{error}</p>}
       <RotationForm
         teamMembers={teamMembers ?? []}
         onSubmit={handleSubmit}
@@ -320,7 +320,7 @@ function EditRotationModal({
   return (
     <>
       <Modal open={open} onClose={onClose} title={t('teams.oncall.editRotation')}>
-        {error && <p className="text-sm text-red-600 dark:text-red-400 mb-3">{error}</p>}
+        {error && <p className="text-sm text-[var(--danger)] mb-3">{error}</p>}
         <RotationForm
           teamMembers={teamMembers ?? []}
           initial={data}
@@ -332,7 +332,7 @@ function EditRotationModal({
       </Modal>
 
       <Modal open={deleteOpen} onClose={() => setDeleteOpen(false)} title={t('teams.oncall.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{t('teams.oncall.deleteConfirmBody')}</p>
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">{t('teams.oncall.deleteConfirmBody')}</p>
         <div className="flex justify-end gap-2">
           <Button variant="secondary" onClick={() => setDeleteOpen(false)}>
             {t('common.cancel')}
@@ -468,32 +468,32 @@ function RotationForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       {validationError && (
-        <p className="text-sm text-red-600 dark:text-red-400">{validationError}</p>
+        <p className="text-sm text-[var(--danger)]">{validationError}</p>
       )}
 
       {/* Participants selection */}
       <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
           {t('teams.oncall.participants')}
         </label>
-        <div className="border border-gray-200 dark:border-gray-600 rounded-md max-h-40 overflow-auto">
+        <div className="border border-[var(--border)] rounded-md max-h-40 overflow-auto">
           {teamMembers.map((member) => (
             <label
               key={member.user_id}
-              className="flex items-center gap-2 px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
+              className="flex items-center gap-2 px-3 py-2 hover:bg-[var(--surface-hover)] cursor-pointer"
             >
               <input
                 type="checkbox"
                 checked={selectedIds.includes(member.user_id)}
                 onChange={() => toggleMember(member.user_id)}
-                className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                className="rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)]"
               />
               <Avatar name={member.display_name} avatarUrl={member.avatar_url ?? undefined} size="xs" />
-              <span className="text-sm text-gray-900 dark:text-gray-100">{member.display_name}</span>
+              <span className="text-sm text-[var(--foreground)]">{member.display_name}</span>
             </label>
           ))}
           {teamMembers.length === 0 && (
-            <p className="px-3 py-2 text-sm text-gray-400">{t('teams.noMembers')}</p>
+            <p className="px-3 py-2 text-sm text-[var(--foreground-muted)]">{t('teams.noMembers')}</p>
           )}
         </div>
       </div>
@@ -502,7 +502,7 @@ function RotationForm({
       {selectedIds.length > 0 && (
         <div>
           <div className="flex items-center justify-between mb-1">
-            <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-sm font-medium text-[var(--foreground)]">
               {t('teams.oncall.order')}
             </label>
             <Button type="button" variant="ghost" size="sm" onClick={randomizeOrder}>
@@ -510,7 +510,7 @@ function RotationForm({
               {t('teams.oncall.randomize')}
             </Button>
           </div>
-          <div className="border border-gray-200 dark:border-gray-600 rounded-md">
+          <div className="border border-[var(--border)] rounded-md">
             {selectedIds.map((userId, idx) => {
               const member = memberMap.get(userId)
               if (!member) return null
@@ -522,13 +522,13 @@ function RotationForm({
                   onDragOver={(e) => handleDragOver(e, idx)}
                   onDragEnd={handleDragEnd}
                   className={`flex items-center gap-2 px-3 py-2 cursor-grab active:cursor-grabbing ${
-                    draggedIdx === idx ? 'bg-indigo-50 dark:bg-indigo-900/20' : 'hover:bg-gray-50 dark:hover:bg-gray-700'
-                  } ${idx > 0 ? 'border-t border-gray-100 dark:border-gray-700' : ''}`}
+                    draggedIdx === idx ? 'bg-[var(--primary-muted)]' : 'hover:bg-[var(--surface-hover)]'
+                  } ${idx > 0 ? 'border-t border-[var(--border)]' : ''}`}
                 >
-                  <GripVertical className="h-3.5 w-3.5 text-gray-400 shrink-0" />
-                  <span className="text-xs text-gray-400 w-5 text-right shrink-0">{idx + 1}</span>
+                  <GripVertical className="h-3.5 w-3.5 text-[var(--foreground-muted)] shrink-0" />
+                  <span className="text-xs text-[var(--foreground-muted)] w-5 text-right shrink-0">{idx + 1}</span>
                   <Avatar name={member.display_name} avatarUrl={member.avatar_url ?? undefined} size="xs" />
-                  <span className="text-sm text-gray-900 dark:text-gray-100">{member.display_name}</span>
+                  <span className="text-sm text-[var(--foreground)]">{member.display_name}</span>
                 </div>
               )
             })}
@@ -573,7 +573,7 @@ function RotationForm({
       <div className="flex items-center pt-2">
         {onDelete && (
           <Button type="button" variant="secondary" onClick={onDelete} className="mr-auto px-2.5">
-            <Trash2 className="h-4 w-4 text-red-500" />
+            <Trash2 className="h-4 w-4 text-[var(--danger)]" />
           </Button>
         )}
         <div className="flex gap-3 ml-auto">
@@ -631,11 +631,11 @@ function OverridePanel({
 
   return (
     <>
-      <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3">
-        <p className="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+      <div className="border border-[var(--border)] rounded-lg p-4 space-y-3">
+        <p className="text-xs text-[var(--foreground-secondary)] uppercase tracking-wider">
           {t('teams.oncall.override.title')}
         </p>
-        {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+        {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
         {overrides.length > 0 ? (
           <div className="space-y-2">
             {overrides.map((override) => {
@@ -644,7 +644,7 @@ function OverridePanel({
                 <div key={override.id} className="space-y-1">
                   {/* First row: name + badge + actions */}
                   <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                    <span className="text-sm font-medium text-[var(--foreground)]">
                       {override.override_user_name}
                     </span>
                     <Badge color={isActive ? 'yellow' : 'blue'}>
@@ -656,24 +656,24 @@ function OverridePanel({
                           <Pencil className="h-3 w-3" />
                         </Button>
                         <Button variant="ghost" size="sm" onClick={() => setDeleteTarget(override)}>
-                          <Trash2 className="h-3 w-3 text-red-500" />
+                          <Trash2 className="h-3 w-3 text-[var(--danger)]" />
                         </Button>
                       </div>
                     )}
                   </div>
                   {/* Second row: time range */}
-                  <div className="text-xs text-gray-500 dark:text-gray-400">
+                  <div className="text-xs text-[var(--foreground-secondary)]">
                     {new Date(override.start_at).toLocaleString()} — {new Date(override.end_at).toLocaleString()}
                   </div>
                   {override.reason && (
-                    <div className="text-xs text-gray-400 dark:text-gray-500">{override.reason}</div>
+                    <div className="text-xs text-[var(--foreground-muted)]">{override.reason}</div>
                   )}
                 </div>
               )
             })}
           </div>
         ) : (
-          <p className="text-xs text-gray-400 dark:text-gray-500">{t('teams.oncall.override.empty')}</p>
+          <p className="text-xs text-[var(--foreground-muted)]">{t('teams.oncall.override.empty')}</p>
         )}
       </div>
 
@@ -690,7 +690,7 @@ function OverridePanel({
 
       {/* Delete confirmation */}
       <Modal open={!!deleteTarget} onClose={() => setDeleteTarget(null)} title={t('teams.oncall.override.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{t('teams.oncall.override.deleteConfirmBody')}</p>
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">{t('teams.oncall.override.deleteConfirmBody')}</p>
         <div className="flex justify-end gap-2">
           <Button variant="secondary" onClick={() => setDeleteTarget(null)}>{t('common.cancel')}</Button>
           <Button variant="danger" disabled={deleteMutation.isPending} onClick={handleDelete}>
@@ -765,10 +765,10 @@ function CreateOverrideModal({
 
   return (
     <Modal open={open} onClose={onClose} title={t('teams.oncall.override.createTitle')}>
-      {error && <p className="text-sm text-red-600 dark:text-red-400 mb-3">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)] mb-3">{error}</p>}
       <form onSubmit={handleSubmit} className="space-y-4">
         <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
             {t('teams.oncall.override.coveringMember')}
           </label>
           <UserPicker
@@ -872,10 +872,10 @@ function EditOverrideModal({
 
   return (
     <Modal open={open} onClose={onClose} title={t('teams.oncall.override.editTitle')}>
-      {error && <p className="text-sm text-red-600 dark:text-red-400 mb-3">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)] mb-3">{error}</p>}
       <form onSubmit={handleSubmit} className="space-y-4">
         <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
             {t('teams.oncall.override.coveringMember')}
           </label>
           <UserPicker
@@ -953,14 +953,14 @@ function HistoryLog({
 
   return (
     <div className="space-y-3">
-      <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('teams.oncall.history')}</h3>
-      <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+      <h3 className="text-sm font-medium text-[var(--foreground)]">{t('teams.oncall.history')}</h3>
+      <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
         {history.map((entry) => (
           <div key={entry.id} className="p-3 flex items-center gap-3">
             <Avatar name={entry.display_name} avatarUrl={entry.avatar_url} size="xs" />
             <div className="min-w-0 flex-1">
-              <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{entry.display_name}</span>
-              <div className="text-xs text-gray-500 dark:text-gray-400">
+              <span className="text-sm font-medium text-[var(--foreground)]">{entry.display_name}</span>
+              <div className="text-xs text-[var(--foreground-secondary)]">
                 {new Date(entry.started_at).toLocaleDateString()} - {entry.ended_at ? new Date(entry.ended_at).toLocaleDateString() : t('common.current')}
               </div>
             </div>
diff --git a/web/src/components/PoweredByFooter.tsx b/web/src/components/PoweredByFooter.tsx
index e6422e1b..d6193d57 100644
--- a/web/src/components/PoweredByFooter.tsx
+++ b/web/src/components/PoweredByFooter.tsx
@@ -3,8 +3,8 @@ import { Trans } from 'react-i18next'
 export function PoweredByFooter() {
   return (
     <footer className="py-3 text-center">
-      <p className="text-xs text-gray-400 dark:text-gray-500">
-        <Trans i18nKey="footer.poweredBy" components={{ brand: <a href="https://github.com/marcoshack/taskwondo" target="_blank" rel="noopener noreferrer" className="font-medium hover:text-gray-600 dark:hover:text-gray-400 underline-offset-2 hover:underline" /> }} />
+      <p className="text-xs text-[var(--foreground-muted)]">
+        <Trans i18nKey="footer.poweredBy" components={{ brand: <a href="https://github.com/marcoshack/taskwondo" target="_blank" rel="noopener noreferrer" className="font-medium hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] underline-offset-2 hover:underline" /> }} />
       </p>
     </footer>
   )
diff --git a/web/src/components/PreferencesSidebar.tsx b/web/src/components/PreferencesSidebar.tsx
index 3ee01ce3..11cac9bd 100644
--- a/web/src/components/PreferencesSidebar.tsx
+++ b/web/src/components/PreferencesSidebar.tsx
@@ -23,15 +23,15 @@ export function PreferencesSidebar() {
                   !showLabels ? 'justify-center px-0 py-2' : 'px-3 py-2'
                 } ${
                   isActive
-                    ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
-                    : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+                    ? 'bg-[var(--primary-muted)] text-[var(--primary)]  dark:text-[var(--primary)]'
+                    : 'text-[var(--foreground)] hover:bg-[var(--surface-tertiary)] text-[var(--foreground)] dark:hover:bg-[var(--surface)]'
                 }`
               }
             >
               <item.icon className="h-5 w-5 shrink-0" />
               {showLabels && <span>{item.label}</span>}
               {!showLabels && (
-                <span className="pointer-events-none absolute left-full ml-2 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/nav:opacity-100 dark:bg-gray-700 z-50">
+                <span className="pointer-events-none absolute left-full ml-2 rounded bg-[var(--background)] px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/nav:opacity-100 bg-[var(--surface-secondary)] z-50">
                   {item.label}
                 </span>
               )}
@@ -53,13 +53,13 @@ export function PreferencesSidebar() {
         {renderNavItems(!collapsed)}
 
         <div
-          className={`mt-4 border-t border-gray-200 pt-4 dark:border-gray-700 ${
+          className={`mt-4 border-t border-[var(--border)] pt-4 dark:border-[var(--border)] ${
             collapsed ? 'flex justify-center' : ''
           }`}
         >
           <button
             onClick={toggleCollapsed}
-            className={`group/toggle relative flex items-center gap-3 rounded-md text-sm font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300 ${
+            className={`group/toggle relative flex items-center gap-3 rounded-md text-sm font-medium text-[var(--foreground-secondary)] transition-colors hover:bg-[var(--surface-tertiary)] hover:text-[var(--foreground)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)] dark:hover:text-[var(--foreground-muted)] ${
               collapsed ? 'justify-center px-0 py-2 w-full' : 'px-3 py-2 w-full'
             }`}
             aria-label={collapsed ? t('sidebar.expand') : t('sidebar.collapse')}
@@ -73,7 +73,7 @@ export function PreferencesSidebar() {
               </>
             )}
             {collapsed && (
-              <span className="pointer-events-none absolute left-full ml-2 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/toggle:opacity-100 dark:bg-gray-700 z-50">
+              <span className="pointer-events-none absolute left-full ml-2 rounded bg-[var(--background)] px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/toggle:opacity-100 bg-[var(--surface-secondary)] z-50">
                 {t('sidebar.expand')}
               </span>
             )}
diff --git a/web/src/components/SLAConfigModal.tsx b/web/src/components/SLAConfigModal.tsx
index a87d595a..b07ce473 100644
--- a/web/src/components/SLAConfigModal.tsx
+++ b/web/src/components/SLAConfigModal.tsx
@@ -216,7 +216,7 @@ export function SLAConfigModal({ open, onClose, onSave, projectKey, workItemType
     return (
       <div className="space-y-2">
         {/* Header */}
-        <div className="grid grid-cols-[1fr_4.5rem_4.5rem] sm:grid-cols-[1fr_150px_150px] gap-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+        <div className="grid grid-cols-[1fr_4.5rem_4.5rem] sm:grid-cols-[1fr_150px_150px] gap-2 text-xs font-medium text-[var(--foreground-secondary)] uppercase tracking-wide">
           <span>{t('sla.status')}</span>
           <span>{t('sla.duration')}</span>
           <span>{t('sla.calendarMode')}</span>
@@ -231,19 +231,19 @@ export function SLAConfigModal({ open, onClose, onSave, projectKey, workItemType
                 className={`grid grid-cols-[1fr_4.5rem_4.5rem] sm:grid-cols-[1fr_150px_150px] gap-2 items-center ${terminal ? 'opacity-50' : ''}`}
               >
                 <ScrollableRow className="min-w-0 sm:hidden" gradientFrom="from-white dark:from-gray-800">
-                  <span className="text-xs text-gray-900 dark:text-gray-100 whitespace-nowrap">{row.displayName}</span>
+                  <span className="text-xs text-[var(--foreground)] whitespace-nowrap">{row.displayName}</span>
                 </ScrollableRow>
-                <span className="hidden sm:block text-xs text-gray-900 dark:text-gray-100">{row.displayName}</span>
+                <span className="hidden sm:block text-xs text-[var(--foreground)]">{row.displayName}</span>
                 <input
                   type="text"
                   value={row.duration}
                   onChange={(e) => onUpdate(index, 'duration', e.target.value)}
                   placeholder={t('sla.durationPlaceholder')}
                   disabled={terminal || readOnly}
-                  className="w-[4.5rem] sm:w-auto min-w-0 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="w-[4.5rem] sm:w-auto min-w-0 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] disabled:opacity-50 disabled:cursor-not-allowed"
                 />
                 <select
-                  className="w-[4.5rem] sm:w-auto truncate rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="w-[4.5rem] sm:w-auto truncate rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] disabled:opacity-50 disabled:cursor-not-allowed"
                   value={row.calendarMode}
                   onChange={(e) => onUpdate(index, 'calendarMode', e.target.value)}
                   disabled={terminal || readOnly}
@@ -263,7 +263,7 @@ export function SLAConfigModal({ open, onClose, onSave, projectKey, workItemType
 
   return (
     <Modal open={open} onClose={onClose} title={t('sla.titleForType', { type: t(`workitems.types.${workItemType}`) })} className="!max-w-2xl">
-      <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+      <p className="text-sm text-[var(--foreground-secondary)] mb-4">
         {t('sla.description')} {t('sla.blankHint')}
       </p>
 
@@ -274,14 +274,14 @@ export function SLAConfigModal({ open, onClose, onSave, projectKey, workItemType
             type="checkbox"
             checked={perPriority}
             onChange={(e) => handleTogglePerPriority(e.target.checked)}
-            className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
+            className="rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)]"
           />
-          <span className="text-sm text-gray-700 dark:text-gray-300">{t('sla.setPerPriority')}</span>
+          <span className="text-sm text-[var(--foreground)]">{t('sla.setPerPriority')}</span>
         </label>
       )}
 
       {perPriority && !readOnly && (
-        <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">{t('sla.perPriorityHint')}</p>
+        <p className="text-xs text-[var(--foreground-secondary)] mb-3">{t('sla.perPriorityHint')}</p>
       )}
 
       {overwriteWarning && (
@@ -293,10 +293,10 @@ export function SLAConfigModal({ open, onClose, onSave, projectKey, workItemType
           {PRIORITIES.map((priority) => {
             const isExpanded = expandedPriorities.has(priority)
             return (
-              <div key={priority} className="border border-gray-200 dark:border-gray-700 rounded-lg">
+              <div key={priority} className="border border-[var(--border)] rounded-lg">
                 <button
                   type="button"
-                  className="flex items-center gap-2 w-full px-3 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-t-lg"
+                  className="flex items-center gap-2 w-full px-3 py-2 text-sm font-medium text-[var(--foreground)] hover:bg-[var(--surface-hover)] rounded-t-lg"
                   onClick={() => togglePriorityExpanded(priority)}
                 >
                   {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
@@ -318,7 +318,7 @@ export function SLAConfigModal({ open, onClose, onSave, projectKey, workItemType
         renderStatusGrid(rows, updateRow)
       )}
 
-      {error && <p className="mt-3 text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="mt-3 text-sm text-[var(--danger)]">{error}</p>}
 
       <div className="flex justify-end gap-2 mt-4">
         <Button variant="secondary" onClick={onClose}>
diff --git a/web/src/components/SLAIndicator.tsx b/web/src/components/SLAIndicator.tsx
index 78b6a07b..6c266c2b 100644
--- a/web/src/components/SLAIndicator.tsx
+++ b/web/src/components/SLAIndicator.tsx
@@ -13,7 +13,7 @@ interface Props {
 const STATUS_COLORS: Record<string, string> = {
   on_track: 'text-green-600 dark:text-green-400',
   warning: 'text-yellow-600 dark:text-yellow-400',
-  breached: 'text-red-600 dark:text-red-400',
+  breached: 'text-[var(--danger)]',
 }
 
 const STATUS_I18N_KEYS: Record<string, string> = {
diff --git a/web/src/components/SystemSettingsSidebar.tsx b/web/src/components/SystemSettingsSidebar.tsx
index 6e2d5cec..838977f4 100644
--- a/web/src/components/SystemSettingsSidebar.tsx
+++ b/web/src/components/SystemSettingsSidebar.tsx
@@ -31,15 +31,15 @@ export function SystemSettingsSidebar() {
                   !showLabels ? 'justify-center px-0 py-2' : 'px-3 py-2'
                 } ${
                   isActive
-                    ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
-                    : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800'
+                    ? 'bg-[var(--primary-muted)] text-[var(--primary)]  dark:text-[var(--primary)]'
+                    : 'text-[var(--foreground)] hover:bg-[var(--surface-tertiary)] text-[var(--foreground)] dark:hover:bg-[var(--surface)]'
                 }`
               }
             >
               <item.icon className="h-5 w-5 shrink-0" />
               {showLabels && <span>{item.label}</span>}
               {!showLabels && (
-                <span className="pointer-events-none absolute left-full ml-2 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/nav:opacity-100 dark:bg-gray-700 z-50">
+                <span className="pointer-events-none absolute left-full ml-2 rounded bg-[var(--background)] px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/nav:opacity-100 bg-[var(--surface-secondary)] z-50">
                   {item.label}
                 </span>
               )}
@@ -61,13 +61,13 @@ export function SystemSettingsSidebar() {
         {renderNavItems(!collapsed)}
 
         <div
-          className={`mt-4 border-t border-gray-200 pt-4 dark:border-gray-700 ${
+          className={`mt-4 border-t border-[var(--border)] pt-4 dark:border-[var(--border)] ${
             collapsed ? 'flex justify-center' : ''
           }`}
         >
           <button
             onClick={toggleCollapsed}
-            className={`group/toggle relative flex items-center gap-3 rounded-md text-sm font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300 ${
+            className={`group/toggle relative flex items-center gap-3 rounded-md text-sm font-medium text-[var(--foreground-secondary)] transition-colors hover:bg-[var(--surface-tertiary)] hover:text-[var(--foreground)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)] dark:hover:text-[var(--foreground-muted)] ${
               collapsed ? 'justify-center px-0 py-2 w-full' : 'px-3 py-2 w-full'
             }`}
             aria-label={collapsed ? t('sidebar.expand') : t('sidebar.collapse')}
@@ -81,7 +81,7 @@ export function SystemSettingsSidebar() {
               </>
             )}
             {collapsed && (
-              <span className="pointer-events-none absolute left-full ml-2 rounded bg-gray-900 px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/toggle:opacity-100 dark:bg-gray-700 z-50">
+              <span className="pointer-events-none absolute left-full ml-2 rounded bg-[var(--background)] px-2 py-1 text-xs whitespace-nowrap text-white opacity-0 transition-opacity group-hover/toggle:opacity-100 bg-[var(--surface-secondary)] z-50">
                 {t('sidebar.expand')}
               </span>
             )}
diff --git a/web/src/components/UserSearchInput.tsx b/web/src/components/UserSearchInput.tsx
index 83db6c35..b8f74c8c 100644
--- a/web/src/components/UserSearchInput.tsx
+++ b/web/src/components/UserSearchInput.tsx
@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useDebounce } from '@/hooks/useDebounce'
 import { useSearchUsers } from '@/hooks/useUsers'
+import { meetsSearchFloor } from '@/utils/searchRequest'
 import type { UserSearchResult } from '@/api/users'
 import { Mail } from 'lucide-react'
 import { Avatar } from '@/components/ui/Avatar'
@@ -75,7 +76,7 @@ export function UserSearchInput({
   }, [open])
 
   useEffect(() => {
-    if (debouncedSearch.length >= 2) {
+    if (meetsSearchFloor(debouncedSearch)) {
       updateDropdownPosition()
       setOpen(true)
     }
@@ -104,25 +105,25 @@ export function UserSearchInput({
     <div ref={ref} className="relative flex-1">
       <input
         ref={inputRef}
-        className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+        className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
         placeholder={placeholder ?? t('projects.settings.addMemberPlaceholder')}
         value={search}
         onChange={(e) => setSearch(e.target.value)}
-        onFocus={() => { if (debouncedSearch.length >= 2) { updateDropdownPosition(); setOpen(true) } }}
+        onFocus={() => { if (meetsSearchFloor(debouncedSearch)) { updateDropdownPosition(); setOpen(true) } }}
       />
 
-      {open && search.length >= 2 && createPortal(
+      {open && meetsSearchFloor(search) && createPortal(
         <div
           ref={dropdownRef}
           style={dropdownStyle}
-          className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg"
+          className="bg-[var(--surface)] border border-[var(--border)] rounded-md shadow-lg"
         >
           <ul className="max-h-64 overflow-auto">
             {isLoading && (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">...</li>
+              <li className="px-3 py-2 text-sm text-[var(--foreground-muted)]">...</li>
             )}
             {!isLoading && filtered.length === 0 && !showInviteRow && (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">
+              <li className="px-3 py-2 text-sm text-[var(--foreground-muted)]">
                 {t('projects.settings.noUsersFound')}
               </li>
             )}
@@ -132,16 +133,16 @@ export function UserSearchInput({
                 <li key={user.id}>
                   <button
                     type="button"
-                    className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 flex items-center gap-2"
+                    className="w-full text-left px-3 py-2 text-sm hover:bg-[var(--surface-hover)] text-[var(--foreground)] flex items-center gap-2"
                     onClick={() => (isMember ? handleSelectMember(user) : handleInviteUser(user))}
                   >
                     <Avatar name={user.display_name} avatarUrl={user.avatar_url} size="xs" />
                     <div className="min-w-0 flex-1">
                       <div className="font-medium truncate">{user.display_name}</div>
-                      <div className="text-xs text-gray-400 truncate">{user.email}</div>
+                      <div className="text-xs text-[var(--foreground-muted)] truncate">{user.email}</div>
                     </div>
                     {!isMember && (
-                      <span className="text-xs text-gray-500 dark:text-gray-400 shrink-0">
+                      <span className="text-xs text-[var(--foreground-secondary)] shrink-0">
                         {t('projects.settings.notInNamespaceInvite')}
                       </span>
                     )}
@@ -150,13 +151,13 @@ export function UserSearchInput({
               )
             })}
             {!isLoading && showInviteRow && (
-              <li className={filtered.length > 0 ? 'border-t border-gray-200 dark:border-gray-700' : ''}>
+              <li className={filtered.length > 0 ? 'border-t border-[var(--border)]' : ''}>
                 <button
                   type="button"
-                  className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 flex items-center gap-2"
+                  className="w-full text-left px-3 py-2 text-sm hover:bg-[var(--surface-hover)] text-[var(--foreground)] flex items-center gap-2"
                   onClick={handleInviteTyped}
                 >
-                  <Mail className="h-4 w-4 text-gray-400 shrink-0" />
+                  <Mail className="h-4 w-4 text-[var(--foreground-muted)] shrink-0" />
                   <span className="truncate">
                     {t('projects.settings.inviteByEmailRow', { email: trimmedSearch })}
                   </span>
diff --git a/web/src/components/WelcomeModal.tsx b/web/src/components/WelcomeModal.tsx
index 83045f33..94ddce42 100644
--- a/web/src/components/WelcomeModal.tsx
+++ b/web/src/components/WelcomeModal.tsx
@@ -51,18 +51,18 @@ export function WelcomeModal({ open, onClose, onDismiss, alreadyDismissed }: Wel
     <Modal open={open} onClose={handleClose} title={t('welcome.title')} className="!max-w-xl !overflow-hidden">
       <div className="flex flex-col items-center text-center px-2 h-[420px]">
         {/* Icon — fixed */}
-        <div className="w-16 h-16 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4 shrink-0">
-          <Icon className="w-8 h-8 text-indigo-600 dark:text-indigo-400" />
+        <div className="w-16 h-16 rounded-full bg-[var(--primary-muted)]  flex items-center justify-center mb-4 shrink-0">
+          <Icon className="w-8 h-8 text-[var(--primary)]" />
         </div>
 
         {/* Title — fixed */}
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 shrink-0">
+        <h3 className="text-lg font-semibold text-[var(--foreground)] mb-2 shrink-0">
           {t(`welcome.${slideKey}.title`)}
         </h3>
 
         {/* Description — scrollable */}
         <div className="flex-1 min-h-0 w-full mb-4 overflow-y-auto overscroll-contain">
-          <p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed px-2">
+          <p className="text-sm text-[var(--foreground-secondary)] leading-relaxed px-2">
             {t(`welcome.${slideKey}.description`)}
           </p>
         </div>
@@ -75,8 +75,8 @@ export function WelcomeModal({ open, onClose, onDismiss, alreadyDismissed }: Wel
               onClick={() => setCurrent(i)}
               className={`w-2 h-2 rounded-full transition-colors ${
                 i === current
-                  ? 'bg-indigo-600 dark:bg-indigo-400'
-                  : 'bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500'
+                  ? 'bg-[var(--primary)] '
+                  : 'bg-[var(--border)] hover:bg-[var(--surface-hover)] dark:hover:bg-[var(--surface-secondary)]'
               }`}
               aria-label={`${i + 1} / ${SLIDE_KEYS.length}`}
             />
@@ -95,7 +95,7 @@ export function WelcomeModal({ open, onClose, onDismiss, alreadyDismissed }: Wel
             <ChevronLeft className="w-4 h-4 mr-1" />
             {t('welcome.previous')}
           </Button>
-          <span className="text-xs text-gray-500 dark:text-gray-400">
+          <span className="text-xs text-[var(--foreground-secondary)]">
             {current + 1} / {SLIDE_KEYS.length}
           </span>
           <Button
@@ -110,12 +110,12 @@ export function WelcomeModal({ open, onClose, onDismiss, alreadyDismissed }: Wel
 
         {/* Don't show again — hidden when already dismissed */}
         {!alreadyDismissed && (
-          <label className="flex items-center gap-2 mt-4 text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none shrink-0">
+          <label className="flex items-center gap-2 mt-4 text-xs text-[var(--foreground-secondary)] cursor-pointer select-none shrink-0">
             <input
               type="checkbox"
               checked={dontShow}
               onChange={(e) => setDontShow(e.target.checked)}
-              className="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
+              className="rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)]"
             />
             {t('welcome.dontShowAgain')}
           </label>
diff --git a/web/src/components/stats/StatsTimelineChart.tsx b/web/src/components/stats/StatsTimelineChart.tsx
index 8f5e65aa..9776c91e 100644
--- a/web/src/components/stats/StatsTimelineChart.tsx
+++ b/web/src/components/stats/StatsTimelineChart.tsx
@@ -67,7 +67,6 @@ export function StatsTimelineChart({ projectKey }: Props) {
 
   // Feature toggle: hidden when explicitly disabled
   const featureEnabled = publicSettings?.feature_stats_timeline !== false
-  if (!featureEnabled) return null
 
   const handlePreset = (r: StatsRange) => {
     setRange(r)
@@ -124,10 +123,12 @@ export function StatsTimelineChart({ projectKey }: Props) {
 
   const hasData = chartData.length > 0
 
+  if (!featureEnabled) return null
+
   return (
     <div>
       <div className="flex items-center justify-between mb-3">
-        <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+        <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide">
           {t('projects.overview.activity')}
         </h2>
         <div className="flex items-center gap-1">
@@ -137,17 +138,17 @@ export function StatsTimelineChart({ projectKey }: Props) {
               onClick={() => handlePreset(r)}
               className={`px-2.5 py-1 text-xs font-medium rounded-md transition-colors ${
                 range_ === r && !isCustomActive
-                  ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300'
-                  : 'text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800'
+                  ? 'bg-[var(--primary-muted)] text-[var(--primary)]  dark:text-[var(--primary)]'
+                  : 'text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)]'
               }`}
             >
               {t(`projects.overview.range_${r}`)}
             </button>
           ))}
-          <span className="mx-1 text-gray-300 dark:text-gray-600">|</span>
+          <span className="mx-1 text-[var(--foreground-secondary)]">|</span>
           <div className={`flex items-center gap-1 rounded-md px-1.5 py-0.5 ${
             isCustomActive
-              ? 'bg-indigo-100 dark:bg-indigo-900/40'
+              ? 'bg-[var(--primary-muted)] '
               : ''
           }`}>
             <input
@@ -156,20 +157,20 @@ export function StatsTimelineChart({ projectKey }: Props) {
               max={customUnit === 'd' ? 365 : 8760}
               value={customValue}
               onChange={(e) => handleCustomValueChange(e.target.value)}
-              className={`w-12 text-xs font-medium text-center border rounded px-1 py-0.5 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 ${
+              className={`w-12 text-xs font-medium text-center border rounded px-1 py-0.5 bg-[var(--surface)] border-[var(--border)] ${
                 isCustomActive
-                  ? 'text-indigo-700 dark:text-indigo-300'
-                  : 'text-gray-500 dark:text-gray-400'
+                  ? 'text-[var(--primary)]'
+                  : 'text-[var(--foreground-secondary)]'
               }`}
               data-testid="custom-range-value"
             />
             <select
               value={customUnit}
               onChange={(e) => handleCustomUnitChange(e.target.value as 'h' | 'd')}
-              className={`text-xs font-medium border rounded px-1 py-0.5 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 ${
+              className={`text-xs font-medium border rounded px-1 py-0.5 bg-[var(--surface)] border-[var(--border)] ${
                 isCustomActive
-                  ? 'text-indigo-700 dark:text-indigo-300'
-                  : 'text-gray-500 dark:text-gray-400'
+                  ? 'text-[var(--primary)]'
+                  : 'text-[var(--foreground-secondary)]'
               }`}
               data-testid="custom-range-unit"
             >
@@ -179,13 +180,13 @@ export function StatsTimelineChart({ projectKey }: Props) {
           </div>
         </div>
       </div>
-      <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+      <div className="rounded-lg border border-[var(--border)] p-4">
         {isLoading ? (
           <div className="flex items-center justify-center" style={{ height: 200 }}>
             <Spinner />
           </div>
         ) : !hasData ? (
-          <div className="flex items-center justify-center text-sm text-gray-400 dark:text-gray-500" style={{ height: 200 }}>
+          <div className="flex items-center justify-center text-sm text-[var(--foreground-muted)]" style={{ height: 200 }}>
             {t('projects.overview.noActivityData')}
           </div>
         ) : (
diff --git a/web/src/components/ui/AuthImage.tsx b/web/src/components/ui/AuthImage.tsx
index f7395424..5b5b7baf 100644
--- a/web/src/components/ui/AuthImage.tsx
+++ b/web/src/components/ui/AuthImage.tsx
@@ -51,11 +51,11 @@ export function AuthImage({ src, alt, ...props }: AuthImageProps) {
   }
 
   if (error) {
-    return <span className="text-xs text-red-500">[Image failed to load]</span>
+    return <span className="text-xs text-[var(--danger)]">[Image failed to load]</span>
   }
 
   if (!blobUrl) {
-    return <span className="text-xs text-gray-400">Loading image...</span>
+    return <span className="text-xs text-[var(--foreground-muted)]">Loading image...</span>
   }
 
   return <img src={blobUrl} alt={alt} {...props} />
diff --git a/web/src/components/ui/Avatar.tsx b/web/src/components/ui/Avatar.tsx
index dbe28edf..83429447 100644
--- a/web/src/components/ui/Avatar.tsx
+++ b/web/src/components/ui/Avatar.tsx
@@ -44,7 +44,7 @@ export function Avatar({ name, avatarUrl, size = 'md' }: AvatarProps) {
   return (
     <Tooltip content={name}>
       <span
-        className={`inline-flex items-center justify-center rounded-full bg-indigo-600 text-white font-medium ${sizeClasses[size]}`}
+        className={`inline-flex items-center justify-center rounded-full bg-[var(--primary)] text-[var(--primary-foreground)] font-medium ${sizeClasses[size]}`}
       >
         {getInitials(name)}
       </span>
diff --git a/web/src/components/ui/Badge.tsx b/web/src/components/ui/Badge.tsx
index 2ce306c6..62a3adba 100644
--- a/web/src/components/ui/Badge.tsx
+++ b/web/src/components/ui/Badge.tsx
@@ -1,10 +1,10 @@
 const colors = {
-  gray: 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300',
-  blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
-  green: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
-  yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
-  red: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
-  indigo: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/40 dark:text-indigo-300',
+  gray: 'bg-[var(--surface-tertiary)] text-[var(--foreground-secondary)]',
+  blue: 'bg-[var(--info-bg)] text-[var(--info)]',
+  green: 'bg-[var(--success-bg)] text-[var(--success)]',
+  yellow: 'bg-[var(--warning-bg)] text-[var(--warning)]',
+  red: 'bg-[var(--danger-bg)] text-[var(--danger)]',
+  indigo: 'bg-[var(--primary-muted)] text-[var(--primary)]',
 } as const
 
 interface BadgeProps {
diff --git a/web/src/components/ui/Button.tsx b/web/src/components/ui/Button.tsx
index 04a80895..d1b7a745 100644
--- a/web/src/components/ui/Button.tsx
+++ b/web/src/components/ui/Button.tsx
@@ -1,10 +1,10 @@
 import type { ButtonHTMLAttributes } from 'react'
 
 const variants = {
-  primary: 'bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500',
-  secondary: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700',
-  danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
-  ghost: 'text-gray-700 hover:bg-gray-100 focus:ring-indigo-500 dark:text-gray-300 dark:hover:bg-gray-700',
+  primary: 'bg-[var(--primary)] text-[var(--primary-foreground)] hover:bg-[var(--primary-hover)] focus:ring-[var(--focus-ring)]',
+  secondary: 'bg-[var(--surface)] text-[var(--foreground)] border border-[var(--border)] hover:bg-[var(--hover)] focus:ring-[var(--focus-ring)]',
+  danger: 'bg-[var(--danger)] text-white hover:bg-red-700 focus:ring-[var(--danger)]',
+  ghost: 'text-[var(--foreground)] hover:bg-[var(--hover)] focus:ring-[var(--focus-ring)]',
 } as const
 
 const sizes = {
@@ -27,7 +27,7 @@ export function Button({
 }: ButtonProps) {
   return (
     <button
-      className={`inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed ${variants[variant]} ${sizes[size]} ${className}`}
+      className={`inline-flex items-center justify-center font-medium rounded-[var(--radius)] focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${variants[variant]} ${sizes[size]} ${className}`}
       disabled={disabled}
       {...props}
     />
diff --git a/web/src/components/ui/CopyButton.tsx b/web/src/components/ui/CopyButton.tsx
index 2f64e985..fcb49611 100644
--- a/web/src/components/ui/CopyButton.tsx
+++ b/web/src/components/ui/CopyButton.tsx
@@ -35,22 +35,22 @@ export function CopyButton({ text, className = '', tooltip }: CopyButtonProps) {
   return (
     <button
       type="button"
-      className={`group/copy relative inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-700 transition-colors ${className}`}
+      className={`group/copy relative inline-flex items-center justify-center w-7 h-7 rounded-md text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--hover)] transition-colors ${className}`}
       onClick={handleCopy}
       aria-label={tooltip ?? t('common.copyToClipboard')}
     >
       {copied ? (
-        <svg className="w-4 h-4 text-green-500" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
+        <svg className="w-4 h-4 text-[var(--success)]" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
           <path strokeLinecap="round" strokeLinejoin="round" d="M3.5 8.5l3 3 6-7" />
         </svg>
       ) : (
         <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
-          <rect x="5.5" y="5.5" width="7" height="9" rx="1.5" />
-          <path d="M3.5 11.5v-8a1.5 1.5 0 011.5-1.5h5" />
+          <rect x="5.5" y="5.5" width="5" height="7" rx="0.5" />
+          <path strokeLinecap="round" strokeLinejoin="round" d="M3.5 10.5V4.5a1 1 0 011-1h5" />
         </svg>
       )}
-      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/copy:opacity-100 transition-opacity">
-        {copied ? t('common.copied') : (tooltip ?? t('common.copyToClipboard'))}
+      <span className="pointer-events-none absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-[var(--tooltip-bg)] px-2 py-1 text-xs text-[var(--tooltip-text)] opacity-0 group-hover/copy:opacity-100 transition-opacity">
+        {copied ? t('common.copied') : (tooltip ?? t('common.copy'))}
       </span>
     </button>
   )
diff --git a/web/src/components/ui/DataTable.tsx b/web/src/components/ui/DataTable.tsx
index 5c6e3f31..7c04f9d7 100644
--- a/web/src/components/ui/DataTable.tsx
+++ b/web/src/components/ui/DataTable.tsx
@@ -35,7 +35,7 @@ const MIN_COL_WIDTH = 40
 function SortIndicator({ active, direction }: { active: boolean; direction?: 'asc' | 'desc' }) {
   if (!active) {
     return (
-      <svg className="w-3 h-3 text-gray-300 dark:text-gray-600" viewBox="0 0 10 14" fill="currentColor">
+      <svg className="w-3 h-3 text-[var(--foreground-muted)]" viewBox="0 0 10 14" fill="currentColor">
         <path d="M5 0L9 5H1L5 0Z" />
         <path d="M5 14L1 9H9L5 14Z" />
       </svg>
@@ -43,13 +43,13 @@ function SortIndicator({ active, direction }: { active: boolean; direction?: 'as
   }
   if (direction === 'asc') {
     return (
-      <svg className="w-3 h-3 text-indigo-600 dark:text-indigo-400" viewBox="0 0 10 7" fill="currentColor">
+      <svg className="w-3 h-3 text-[var(--primary)]" viewBox="0 0 10 7" fill="currentColor">
         <path d="M5 0L10 7H0L5 0Z" />
       </svg>
     )
   }
   return (
-    <svg className="w-3 h-3 text-indigo-600 dark:text-indigo-400" viewBox="0 0 10 7" fill="currentColor">
+    <svg className="w-3 h-3 text-[var(--primary)]" viewBox="0 0 10 7" fill="currentColor">
       <path d="M5 7L0 0H10L5 7Z" />
     </svg>
   )
@@ -66,7 +66,7 @@ export function DataTable<T>({
   const activeRowRef = useRef<HTMLTableRowElement>(null)
   const resizingRef = useRef<{ key: string; startX: number; startWidth: number } | null>(null)
   const onResizeRef = useRef(onColumnResize)
-  onResizeRef.current = onColumnResize
+  useEffect(() => { onResizeRef.current = onColumnResize }, [onColumnResize])
 
   useEffect(() => {
     if (activeRowIndex != null && activeRowIndex >= 0) {
@@ -74,38 +74,6 @@ export function DataTable<T>({
     }
   }, [activeRowIndex])
 
-  const handleResizeMove = useRef((e: MouseEvent) => {
-    if (!resizingRef.current) return
-    const { key, startX, startWidth } = resizingRef.current
-    const diff = e.clientX - startX
-    const newWidth = Math.max(MIN_COL_WIDTH, startWidth + diff)
-    onResizeRef.current?.(key, newWidth)
-  }).current
-
-  const handleResizeEnd = useRef(() => {
-    resizingRef.current = null
-    document.removeEventListener('mousemove', handleResizeMove)
-    document.removeEventListener('mouseup', handleResizeEnd)
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-    // Swallow the click event that follows mouseup to prevent sort from firing
-    document.addEventListener('click', suppressClick, true)
-  }).current
-
-  const suppressClick = useRef((e: MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-    document.removeEventListener('click', suppressClick, true)
-  }).current
-
-  useEffect(() => {
-    return () => {
-      document.removeEventListener('mousemove', handleResizeMove)
-      document.removeEventListener('mouseup', handleResizeEnd)
-      document.removeEventListener('click', suppressClick, true)
-    }
-  }, [handleResizeMove, handleResizeEnd, suppressClick])
-
   const handleResizeStart = useCallback((e: React.MouseEvent, colKey: string) => {
     e.preventDefault()
     e.stopPropagation()
@@ -113,11 +81,35 @@ export function DataTable<T>({
     if (!th) return
     const startWidth = th.getBoundingClientRect().width
     resizingRef.current = { key: colKey, startX: e.clientX, startWidth }
-    document.addEventListener('mousemove', handleResizeMove)
-    document.addEventListener('mouseup', handleResizeEnd)
+    const handleMove = (e: MouseEvent) => {
+      if (!resizingRef.current) return
+      const { key, startX, startWidth } = resizingRef.current
+      const diff = e.clientX - startX
+      const newWidth = Math.max(MIN_COL_WIDTH, startWidth + diff)
+      onResizeRef.current?.(key, newWidth)
+    }
+    const handleEnd = () => {
+      resizingRef.current = null
+      document.removeEventListener('mousemove', handleMove)
+      document.removeEventListener('mouseup', handleEnd)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      const suppress = (e: MouseEvent) => {
+        e.stopPropagation()
+        e.preventDefault()
+        document.removeEventListener('click', suppress, true)
+      }
+      document.addEventListener('click', suppress, true)
+    }
+    document.addEventListener('mousemove', handleMove)
+    document.addEventListener('mouseup', handleEnd)
     document.body.style.cursor = 'col-resize'
     document.body.style.userSelect = 'none'
-  }, [handleResizeMove, handleResizeEnd])
+    return () => {
+      document.removeEventListener('mousemove', handleMove)
+      document.removeEventListener('mouseup', handleEnd)
+    }
+  }, [onColumnResize])
 
   function mobileHideClass(col: Column<T>): string {
     return col.hiddenOnMobile ? 'hidden sm:table-cell' : ''
@@ -135,7 +127,7 @@ export function DataTable<T>({
 
   return (
     <div className="overflow-hidden">
-      <table className="w-full table-fixed sm:divide-y sm:divide-gray-200 sm:dark:divide-gray-700 sm:border-b sm:border-gray-200 sm:dark:border-gray-700">
+      <table className="w-full table-fixed sm:divide-y sm:divide-[var(--border)] sm:border-b sm:border-[var(--border)]">
         <colgroup>
           {columns.map((col) => (
             <col
@@ -145,7 +137,7 @@ export function DataTable<T>({
             />
           ))}
         </colgroup>
-        <thead className={`${alwaysShowHeader ? '' : 'hidden sm:table-header-group'} bg-gray-50 dark:bg-gray-800 group/thead`}>
+        <thead className={`${alwaysShowHeader ? '' : 'hidden sm:table-header-group'} bg-[var(--background-secondary)] group/thead`}>
           <tr>
             {columns.map((col) => {
               const isSortable = !!col.sortKey && !!onSort
@@ -155,7 +147,7 @@ export function DataTable<T>({
                 <th
                   key={col.key}
                   style={getColStyle(col)}
-                  className={`px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider whitespace-nowrap ${columnWidths?.[col.key] ? '' : (col.className ?? '')} ${isSortable ? 'cursor-pointer select-none hover:text-gray-700 dark:hover:text-gray-200' : ''} ${colResizable ? 'relative' : ''} ${mobileHideClass(col)}`}
+                  className={`px-3 sm:px-6 py-2.5 text-left text-xs font-medium text-[var(--foreground-secondary)] uppercase tracking-wider whitespace-nowrap ${columnWidths?.[col.key] ? '' : (col.className ?? '')} ${isSortable ? 'cursor-pointer select-none hover:text-[var(--foreground)]' : ''} ${colResizable ? 'relative' : ''} ${mobileHideClass(col)}`}
                   onClick={isSortable ? () => onSort!(col.sortKey!) : undefined}
                 >
                   <span className="inline-flex items-center gap-1">
@@ -164,7 +156,7 @@ export function DataTable<T>({
                   </span>
                   {colResizable && (
                     <div
-                      className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-indigo-300/40 hover:!bg-indigo-400/60 active:!bg-indigo-500/60 dark:bg-indigo-500/30 dark:hover:!bg-indigo-400/50 dark:active:!bg-indigo-500/50 transition-opacity z-10"
+                      className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-[var(--primary)]/40 hover:!bg-[var(--primary)]/60 active:!bg-[var(--primary)]/80 transition-opacity z-10"
                       onMouseDown={(e) => handleResizeStart(e, col.key)}
                       onDoubleClick={(e) => {
                         e.stopPropagation()
@@ -177,10 +169,10 @@ export function DataTable<T>({
             })}
           </tr>
         </thead>
-        <tbody className="bg-white dark:bg-gray-900 sm:divide-y sm:divide-gray-200 sm:dark:divide-gray-700">
+        <tbody className="bg-[var(--surface)] sm:divide-y sm:divide-[var(--border)]">
           {data.length === 0 ? (
             <tr>
-              <td colSpan={columns.length} className="px-6 py-12 text-center text-sm text-gray-500 dark:text-gray-400">
+              <td colSpan={columns.length} className="px-6 py-10 text-center text-sm text-[var(--foreground-secondary)]">
                 {resolvedEmptyMessage}
               </td>
             </tr>
@@ -192,10 +184,10 @@ export function DataTable<T>({
                 key={i}
                 ref={isActive ? activeRowRef : undefined}
                 onClick={() => onRowClick?.(row)}
-                className={`group ${onRowClick ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800' : ''} ${isActive ? 'ring-2 ring-inset ring-indigo-500 bg-indigo-50/50 dark:bg-indigo-900/20' : ''}`}
+                className={`group ${onRowClick ? 'cursor-pointer hover:bg-[var(--hover)]' : ''} ${isActive ? 'ring-2 ring-inset ring-[var(--primary)] bg-[var(--primary-muted)]' : ''}`}
               >
                 {columns.map((col) => (
-                  <td key={col.key} className={`px-3 sm:px-6 py-4 whitespace-nowrap text-sm overflow-hidden ${columnWidths?.[col.key] ? '' : (col.className ?? '')} ${mobileHideClass(col)}`}>
+                  <td key={col.key} className={`px-3 sm:px-6 py-3 whitespace-nowrap text-sm overflow-hidden ${columnWidths?.[col.key] ? '' : (col.className ?? '')} ${mobileHideClass(col)}`}>
                     {col.render(row)}
                   </td>
                 ))}
diff --git a/web/src/components/ui/EmptyState.tsx b/web/src/components/ui/EmptyState.tsx
new file mode 100644
index 00000000..311798ca
--- /dev/null
+++ b/web/src/components/ui/EmptyState.tsx
@@ -0,0 +1,28 @@
+import type { LucideIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+interface EmptyStateProps {
+  icon: LucideIcon
+  title: string
+  description?: string
+  action?: ReactNode
+}
+
+export function EmptyState({ icon: Icon, title, description, action }: EmptyStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+      <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-[var(--surface-secondary)] mb-3">
+        <Icon className="h-6 w-6 text-[var(--text-tertiary)]" />
+      </div>
+      <h3 className="text-sm font-medium text-[var(--text-primary)] mb-1">
+        {title}
+      </h3>
+      {description && (
+        <p className="text-sm text-[var(--text-secondary)] max-w-sm leading-relaxed">
+          {description}
+        </p>
+      )}
+      {action && <div className="mt-4">{action}</div>}
+    </div>
+  )
+}
diff --git a/web/src/components/ui/ExpandableConfigCard.tsx b/web/src/components/ui/ExpandableConfigCard.tsx
index abb879f6..4f3981af 100644
--- a/web/src/components/ui/ExpandableConfigCard.tsx
+++ b/web/src/components/ui/ExpandableConfigCard.tsx
@@ -46,7 +46,7 @@ export function ExpandableConfigCard({
   const { t } = useTranslation()
 
   return (
-    <div className="rounded-lg border border-gray-200 dark:border-gray-700">
+    <div className="rounded-lg border border-[var(--border)]">
       {/* Header — always visible */}
       <div className={`flex justify-between p-6${headerExtra ? ' items-stretch' : ' items-center'}`}>
         <button
@@ -55,15 +55,15 @@ export function ExpandableConfigCard({
           onClick={onToggleExpand}
         >
           {expanded ? (
-            <ChevronUp className="h-4 w-4 shrink-0 text-gray-400" />
+            <ChevronUp className="h-4 w-4 shrink-0 text-[var(--foreground-muted)]" />
           ) : (
-            <ChevronDown className="h-4 w-4 shrink-0 text-gray-400" />
+            <ChevronDown className="h-4 w-4 shrink-0 text-[var(--foreground-muted)]" />
           )}
           <div>
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
+            <h3 className="text-lg font-medium text-[var(--foreground)]">
               {title}
             </h3>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
               {description}
             </p>
           </div>
@@ -76,7 +76,7 @@ export function ExpandableConfigCard({
 
       {/* Expandable body */}
       {expanded && (
-        <div className="border-t border-gray-200 dark:border-gray-700 px-6 pb-6 pt-4">
+        <div className="border-t border-[var(--border)] px-6 pb-6 pt-4">
           <div className="space-y-4">{children}</div>
 
           {/* Actions */}
@@ -94,12 +94,12 @@ export function ExpandableConfigCard({
               )}
               {extraActions}
               {saved && (
-                <span className="text-sm text-green-600 dark:text-green-400">
+                <span className="text-sm text-[var(--success)]">
                   {savedMessage ?? t('common.saved')}
                 </span>
               )}
               {error && (
-                <span className="text-sm text-red-600 dark:text-red-400">
+                <span className="text-sm text-[var(--danger)]">
                   {error}
                 </span>
               )}
diff --git a/web/src/components/ui/Input.tsx b/web/src/components/ui/Input.tsx
index 1a1c8031..6147935d 100644
--- a/web/src/components/ui/Input.tsx
+++ b/web/src/components/ui/Input.tsx
@@ -17,19 +17,19 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className="overflow-hidden">
         {label && (
-          <label htmlFor={inputId} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-            {label}{requiredMarker && <span className="text-red-500" aria-hidden="true"> *</span>}
+          <label htmlFor={inputId} className="block text-sm font-medium text-[var(--foreground)] mb-1">
+            {label}{requiredMarker && <span className="text-[var(--danger)]" aria-hidden="true"> *</span>}
           </label>
         )}
         <input
           ref={ref}
           id={inputId}
-          className={`block w-full min-w-0 rounded-md border px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 dark:placeholder-gray-400 disabled:opacity-50 disabled:cursor-not-allowed ${
-            error ? 'border-red-300 text-red-900' : 'border-gray-300 text-gray-900 dark:border-gray-600 dark:text-gray-100'
+          className={`block w-full min-w-0 rounded-[var(--radius)] border px-3 py-2 text-sm bg-[var(--surface)] focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] placeholder:text-[var(--foreground-muted)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${
+            error ? 'border-[var(--danger)] text-[var(--danger)]' : 'border-[var(--border)] text-[var(--foreground)]'
           } ${className}`}
           {...props}
         />
-        {error && <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>}
+        {error && <p className="mt-1 text-sm text-[var(--danger)]">{error}</p>}
       </div>
     )
   },
diff --git a/web/src/components/ui/LoadingState.tsx b/web/src/components/ui/LoadingState.tsx
new file mode 100644
index 00000000..07e93325
--- /dev/null
+++ b/web/src/components/ui/LoadingState.tsx
@@ -0,0 +1,18 @@
+import { Spinner } from './Spinner'
+
+interface LoadingStateProps {
+  message?: string
+}
+
+export function LoadingState({ message }: LoadingStateProps) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16">
+      <Spinner size="lg" />
+      {message && (
+        <p className="mt-4 text-sm text-[var(--text-secondary)]">
+          {message}
+        </p>
+      )}
+    </div>
+  )
+}
diff --git a/web/src/components/ui/MentionSearchModal.tsx b/web/src/components/ui/MentionSearchModal.tsx
index 4e800c14..7c6e4c5e 100644
--- a/web/src/components/ui/MentionSearchModal.tsx
+++ b/web/src/components/ui/MentionSearchModal.tsx
@@ -15,6 +15,7 @@ import {
 import { TypeBadge } from '@/components/workitems/TypeBadge'
 import { useSearch } from '@/hooks/useSearch'
 import { useDebounce } from '@/hooks/useDebounce'
+import { meetsSearchFloor } from '@/utils/searchRequest'
 import { nsPrefix } from '@/api/client'
 import { useNamespacePath } from '@/hooks/useNamespacePath'
 import type { SearchResult } from '@/api/search'
@@ -178,7 +179,7 @@ export function MentionSearchModal({ open, position, onClose, onSelect }: Mentio
 
   // Close on click outside
   const onCloseRef = useRef(onClose)
-  onCloseRef.current = onClose
+  useEffect(() => { onCloseRef.current = onClose }, [onClose])
   useEffect(() => {
     if (!open) return
     function handler(e: MouseEvent) {
@@ -208,8 +209,8 @@ export function MentionSearchModal({ open, position, onClose, onSelect }: Mentio
       return (
         <div key={group.entityType} className="mb-1 last:mb-0">
           <div className="flex items-center gap-1.5 px-3 py-1">
-            <Icon className="h-3 w-3 text-gray-400" />
-            <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+            <Icon className="h-3 w-3 text-[var(--foreground-muted)]" />
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--foreground-muted)]">
               {t(`search.entityType.${group.entityType}`)}
             </span>
           </div>
@@ -226,21 +227,21 @@ export function MentionSearchModal({ open, position, onClose, onSelect }: Mentio
                 onMouseEnter={() => setSelectedIndex(globalIndex)}
                 className={`w-full text-left flex items-center gap-2 px-3 py-1.5 text-sm ${
                   isSelected
-                    ? 'bg-indigo-50 dark:bg-indigo-900/30'
-                    : 'hover:bg-gray-50 dark:hover:bg-gray-700'
+                    ? 'bg-[var(--primary-muted)]'
+                    : 'hover:bg-[var(--surface-hover)]'
                 }`}
               >
                 {parsed.type && <TypeBadge type={parsed.type} />}
                 {result.entity_type === 'work_item' && result.project_key && result.item_number != null && (
-                  <span className="font-mono text-xs text-indigo-600 dark:text-indigo-400 shrink-0">
+                  <span className="font-mono text-xs text-[var(--primary)] shrink-0">
                     {result.project_key}-{result.item_number}
                   </span>
                 )}
-                <span className="text-gray-900 dark:text-gray-100 truncate flex-1">
+                <span className="text-[var(--foreground)] truncate flex-1">
                   {parsed.text}
                 </span>
                 {result.project_key && result.entity_type !== 'project' && result.entity_type !== 'work_item' && (
-                  <span className="text-[10px] text-gray-400 shrink-0">
+                  <span className="text-[10px] text-[var(--foreground-muted)] shrink-0">
                     {result.project_key}
                   </span>
                 )}
@@ -264,7 +265,7 @@ export function MentionSearchModal({ open, position, onClose, onSelect }: Mentio
         onSelect(buildMarkdownLink(allFlat[selectedIndex], p))
       }
     }
-  }, [allFlat, selectedIndex, onSelect])
+  }, [allFlat, selectedIndex, onSelect, p])
 
   if (!open) return null
 
@@ -285,41 +286,41 @@ export function MentionSearchModal({ open, position, onClose, onSelect }: Mentio
     top = position.top - dropdownMaxHeight - 20
   }
 
-  const showResults = debouncedQuery.length >= 2
+  const showResults = meetsSearchFloor(debouncedQuery)
 
   return createPortal(
     <div
       ref={containerRef}
-      className="fixed z-50 w-96 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-xl"
+      className="fixed z-50 w-96 bg-[var(--surface)] border border-[var(--border)] rounded-[var(--radius-md)] shadow-[var(--shadow-lg)]"
       style={{ top, left }}
       onKeyDown={handleKeyDown}
     >
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-gray-200 dark:border-gray-700">
-        <Search className="h-4 w-4 text-gray-400 shrink-0" />
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--border)]">
+        <Search className="h-4 w-4 text-[var(--foreground-muted)] shrink-0" />
         <input
           ref={inputRef}
           type="text"
           placeholder={t('mention.searchPlaceholder')}
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          className="block w-full text-sm bg-transparent border-none outline-none text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500"
+          className="block w-full text-sm bg-transparent border-none outline-none text-[var(--foreground)] placeholder-[var(--foreground-muted)]"
         />
         {isLoading && showResults && (
-          <Loader2 className="h-4 w-4 text-gray-400 animate-spin shrink-0" />
+          <Loader2 className="h-4 w-4 text-[var(--foreground-muted)] animate-spin shrink-0" />
         )}
       </div>
 
       <div ref={listRef} className="max-h-60 overflow-auto py-1">
         {!showResults ? (
-          <p className="text-xs text-gray-400 dark:text-gray-500 py-4 text-center">
+          <p className="text-xs text-[var(--foreground-muted)] py-4 text-center">
             {t('search.hint')}
           </p>
         ) : isLoading && !hasAnyResults ? (
           <div className="flex justify-center py-6">
-            <Loader2 className="h-5 w-5 text-gray-400 animate-spin" />
+            <Loader2 className="h-5 w-5 text-[var(--foreground-muted)] animate-spin" />
           </div>
         ) : !hasAnyResults && !isLoading ? (
-          <p className="text-xs text-gray-400 dark:text-gray-500 py-4 text-center">
+          <p className="text-xs text-[var(--foreground-muted)] py-4 text-center">
             {t('mention.noResults')}
           </p>
         ) : (
@@ -328,7 +329,7 @@ export function MentionSearchModal({ open, position, onClose, onSelect }: Mentio
               <>
                 {showSectionHeaders && (
                   <div className="px-3 py-1">
-                    <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                    <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--foreground-muted)]">
                       {t('search.perfectMatches')}
                     </span>
                   </div>
@@ -340,11 +341,11 @@ export function MentionSearchModal({ open, position, onClose, onSelect }: Mentio
             {semanticAvailable && (
               <>
                 {showSectionHeaders && hasSemanticResults && (
-                  <div className="flex items-center gap-1.5 px-3 py-1 mt-1 border-t border-gray-100 dark:border-gray-700/50 pt-2">
-                    <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                  <div className="flex items-center gap-1.5 px-3 py-1 mt-1 border-t border-[var(--border)]/50 pt-2">
+                    <span className="text-[10px] font-semibold uppercase tracking-wider text-[var(--foreground-muted)]">
                       {t('search.relatedResults')}
                     </span>
-                    <span className="inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[9px] font-medium bg-gray-100 text-gray-500 dark:bg-gray-700/50 dark:text-gray-400">
+                    <span className="inline-flex items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[9px] font-medium bg-[var(--surface-secondary)] text-[var(--foreground-muted)]">
                       <FlaskConical className="h-2.5 w-2.5" />
                       {t('common.experimental')}
                     </span>
@@ -353,9 +354,9 @@ export function MentionSearchModal({ open, position, onClose, onSelect }: Mentio
                 {hasSemanticResults && renderGroups(semanticGroups)}
 
                 {semanticStatus === 'pending' && (
-                  <div className="flex items-center gap-1.5 px-3 py-2 mt-1 border-t border-gray-100 dark:border-gray-700/50">
-                    <Loader2 className="h-3 w-3 text-gray-400 animate-spin" />
-                    <span className="text-[10px] text-gray-400 dark:text-gray-500">
+                  <div className="flex items-center gap-1.5 px-3 py-2 mt-1 border-t border-[var(--border)]/50">
+                    <Loader2 className="h-3 w-3 text-[var(--foreground-muted)] animate-spin" />
+                    <span className="text-[10px] text-[var(--foreground-muted)]">
                       {t('search.semanticLoading')}
                     </span>
                   </div>
diff --git a/web/src/components/ui/Mermaid.tsx b/web/src/components/ui/Mermaid.tsx
index 37cd9fe6..7ae9f4ac 100644
--- a/web/src/components/ui/Mermaid.tsx
+++ b/web/src/components/ui/Mermaid.tsx
@@ -48,7 +48,7 @@ export function Mermaid({ chart }: MermaidProps) {
 
   if (error) {
     return (
-      <pre className="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm overflow-x-auto">
+      <pre className="bg-[var(--surface-secondary)] p-3 rounded text-sm overflow-x-auto">
         <code>{error}</code>
       </pre>
     )
diff --git a/web/src/components/ui/Modal.tsx b/web/src/components/ui/Modal.tsx
index b1393f78..84365cd0 100644
--- a/web/src/components/ui/Modal.tsx
+++ b/web/src/components/ui/Modal.tsx
@@ -61,18 +61,18 @@ export function Modal({ open, onClose, title, position = 'center', size = 'defau
   return createPortal(
     <div className={`fixed inset-0 z-50 flex justify-center ${position === 'top' ? 'items-start pt-4' : 'items-center'} ${containerClassName ?? ''}`}>
       <div className="fixed inset-0 bg-black/50" onClick={dismissable ? onClose : undefined} />
-      <div role="dialog" aria-modal="true" className={`relative bg-white dark:bg-gray-800/40 dark:backdrop-blur-sm rounded-lg shadow-xl ${sizeClasses[size]} ${className ?? ''}`}>
+      <div role="dialog" aria-modal="true" className={`relative bg-[var(--surface)] rounded-[var(--radius-lg)] shadow-lg ${sizeClasses[size]} ${className ?? ''}`}>
         {title && (
           // 'wide' owns its own padding and separates the header with a rule so
           // the body can scroll under a pinned header and footer.
-          <div className={`flex items-center gap-3 ${size === 'wide' ? 'shrink-0 border-b border-gray-200 dark:border-gray-700 px-6 py-4' : 'mb-4'}`}>
-            <h2 className="flex-1 min-w-0 truncate text-lg font-semibold text-gray-900 dark:text-gray-100">{title}</h2>
+          <div className={`flex items-center gap-3 ${size === 'wide' ? 'shrink-0 border-b border-[var(--border)] px-6 py-4' : 'mb-4'}`}>
+            <h2 className="flex-1 min-w-0 truncate text-lg font-semibold text-[var(--foreground)]">{title}</h2>
             {headerRight}
             {/* Matching flex-1 on both sides centres headerRight in the row. */}
             <div className={headerRight ? 'flex flex-1 justify-end' : ''}>
               <button
                 onClick={onClose}
-                className="p-1 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-700"
+                className="p-1 rounded-[var(--radius)] text-[var(--foreground-muted)] hover:text-[var(--foreground)] hover:bg-[var(--hover)] transition-colors"
               >
                 <X className="h-5 w-5" />
               </button>
diff --git a/web/src/components/ui/MultiSelect.tsx b/web/src/components/ui/MultiSelect.tsx
index 7debabc5..eff0f29e 100644
--- a/web/src/components/ui/MultiSelect.tsx
+++ b/web/src/components/ui/MultiSelect.tsx
@@ -93,24 +93,24 @@ export function MultiSelect({ options, selected, onChange, placeholder = 'All',
     <div ref={ref} className={`relative ${className}`}>
       <button
         type="button"
-        className={`flex items-center justify-between w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 ${
-          hasSelection ? 'text-gray-900 dark:text-gray-100' : 'text-gray-500 dark:text-gray-400'
+        className={`flex items-center justify-between w-full rounded-md border border-[var(--border)] bg-[var(--surface)] px-3 py-2 text-sm hover:bg-[var(--surface-hover)] focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--focus-ring)] ${
+          hasSelection ? 'text-[var(--foreground)]' : 'text-[var(--foreground-muted)]'
         }`}
         onClick={() => setOpen(!open)}
       >
         <span className="truncate">{placeholder}</span>
         {selectionCount > 0 && (
-          <span className="ml-1.5 inline-flex items-center justify-center h-4.5 min-w-4.5 px-1 rounded-full bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300 text-[11px] font-semibold leading-none">
+          <span className="ml-1.5 inline-flex items-center justify-center h-4.5 min-w-4.5 px-1 rounded-full bg-[var(--primary-muted)] text-[var(--primary)] text-[11px] font-semibold leading-none">
             {selectionCount}
           </span>
         )}
-        <svg className="ml-1 h-4 w-4 shrink-0 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg className="ml-1 h-4 w-4 shrink-0 text-[var(--foreground-muted)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
         </svg>
       </button>
 
       {open && (
-        <div className={`absolute z-20 mt-1 ${dropdownWidthClass ?? 'w-full'} min-w-[180px] rounded-md border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 shadow-lg`}>
+        <div className={`absolute z-20 mt-1 ${dropdownWidthClass ?? 'w-full'} min-w-[180px] rounded-md border border-[var(--border)] bg-[var(--surface)] shadow-[var(--shadow-md)]`}>
           {searchable && (
             <div className="px-2 pt-2 pb-1">
               <input
@@ -119,31 +119,31 @@ export function MultiSelect({ options, selected, onChange, placeholder = 'All',
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
                 placeholder={t('common.search')}
-                className="w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-1 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                className="w-full rounded border border-[var(--border)] bg-[var(--surface)] px-2 py-1 text-sm text-[var(--foreground)] placeholder-[var(--foreground-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--focus-ring)]"
               />
             </div>
           )}
-          <div className="flex items-center gap-2 px-3 py-1.5 border-b border-gray-100 dark:border-gray-700">
-            <button type="button" className="text-xs text-indigo-600 hover:text-indigo-800" onClick={selectAll}>
+          <div className="flex items-center gap-2 px-3 py-1.5 border-b border-[var(--border)]">
+            <button type="button" className="text-xs text-[var(--primary)] hover:text-[var(--primary-hover)]" onClick={selectAll}>
               {t('common.all')}
             </button>
             {groupActions?.map((action) => (
-              <button key={action.label} type="button" className="text-xs text-indigo-600 hover:text-indigo-800" onClick={() => onChange(action.values)}>
+              <button key={action.label} type="button" className="text-xs text-[var(--primary)] hover:text-[var(--primary-hover)]" onClick={() => onChange(action.values)}>
                 {action.label}
               </button>
             ))}
-            <button type="button" className="ml-auto text-xs text-gray-400 hover:text-gray-600" onClick={clearAll}>
+            <button type="button" className="ml-auto text-xs text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)]" onClick={clearAll}>
               {t('common.none')}
             </button>
           </div>
           <div className="max-h-60 overflow-y-auto py-1">
             {filteredOptions.length === 0 ? (
-              <div className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">{t('common.noResults')}</div>
+              <div className="px-3 py-2 text-sm text-[var(--foreground-muted)]">{t('common.noResults')}</div>
             ) : hasGroups ? (
               groups.map((group) => (
                 <div key={group.name ?? '__default'}>
                   {group.name && (
-                    <div className="px-3 pt-2 pb-1 text-[0.65rem] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500">
+                    <div className="px-3 pt-2 pb-1 text-[0.65rem] font-semibold uppercase tracking-wider text-[var(--foreground-muted)]">
                       {group.name}
                     </div>
                   )}
@@ -166,12 +166,12 @@ export function MultiSelect({ options, selected, onChange, placeholder = 'All',
 
 function OptionRow({ option, checked, onToggle, renderOption }: { option: MultiSelectOption; checked: boolean; onToggle: (value: string) => void; renderOption?: (option: MultiSelectOption) => React.ReactNode }) {
   return (
-    <label className="flex items-center gap-2 px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-sm text-gray-700 dark:text-gray-300">
+    <label className="flex items-center gap-2 px-3 py-1.5 hover:bg-[var(--surface-hover)] cursor-pointer text-sm text-[var(--foreground)]">
       <input
         type="checkbox"
         checked={checked}
         onChange={() => onToggle(option.value)}
-        className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 shrink-0"
+        className="rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] shrink-0"
       />
       {renderOption ? renderOption(option) : option.label}
     </label>
diff --git a/web/src/components/ui/PageHeader.tsx b/web/src/components/ui/PageHeader.tsx
new file mode 100644
index 00000000..1b057185
--- /dev/null
+++ b/web/src/components/ui/PageHeader.tsx
@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+
+interface PageHeaderProps {
+  title: string
+  description?: string
+  actions?: ReactNode
+}
+
+export function PageHeader({ title, description, actions }: PageHeaderProps) {
+  return (
+    <div className="mb-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="flex-1 min-w-0">
+        <h1 className="text-xl font-semibold text-[var(--text-primary)] leading-tight">
+          {title}
+        </h1>
+        {description && (
+          <p className="mt-1 text-sm text-[var(--text-secondary)] leading-relaxed">
+            {description}
+          </p>
+        )}
+      </div>
+      {actions && (
+        <div className="flex items-center gap-2 shrink-0">
+          {actions}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/web/src/components/ui/ProjectKeyBadge.tsx b/web/src/components/ui/ProjectKeyBadge.tsx
index 7af3f3eb..0b40b877 100644
--- a/web/src/components/ui/ProjectKeyBadge.tsx
+++ b/web/src/components/ui/ProjectKeyBadge.tsx
@@ -12,7 +12,7 @@ interface ProjectKeyBadgeProps {
 
 export function ProjectKeyBadge({ children, size = 'default' }: ProjectKeyBadgeProps) {
   return (
-    <span className={`inline-flex items-center justify-center rounded-md bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 font-bold shrink-0 ${sizeClasses[size]}`}>
+    <span className={`inline-flex items-center justify-center rounded-md bg-[var(--primary-muted)] text-[var(--primary)] font-bold shrink-0 ${sizeClasses[size]}`}>
       {children}
     </span>
   )
diff --git a/web/src/components/ui/ProjectPicker.tsx b/web/src/components/ui/ProjectPicker.tsx
index 8e74e3a3..30a547d3 100644
--- a/web/src/components/ui/ProjectPicker.tsx
+++ b/web/src/components/ui/ProjectPicker.tsx
@@ -45,39 +45,39 @@ export function ProjectPicker({ projects, value, onChange, disabled, error }: Pr
 
   return (
     <div ref={ref} className="relative">
-      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-        {t('workitems.form.project')} <span className="text-red-500">*</span>
+      <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
+        {t('workitems.form.project')} <span className="text-[var(--danger)]">*</span>
       </label>
       <button
         type="button"
-        className={`block w-full rounded-md border px-3 py-2 text-sm text-left shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-800 ${
-          error ? 'border-red-300' : 'border-gray-300 dark:border-gray-600'
+        className={`block w-full rounded-md border px-3 py-2 text-sm text-left focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--focus-ring)] bg-[var(--surface)] ${
+          error ? 'border-[var(--danger)]' : 'border-[var(--border)]'
         } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
         onClick={() => { if (disabled) return; setOpen(!open); setTimeout(() => inputRef.current?.focus(), 0) }}
         disabled={disabled}
       >
         {selected ? (
-          <span className="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+          <span className="flex items-center gap-2 text-[var(--foreground)]">
             <ProjectKeyBadge size="icon">{selected.key}</ProjectKeyBadge>
             <span className="truncate">{selected.name}</span>
             {showNamespaces && selected.namespace_slug && (
-              <span className="ml-auto flex items-center gap-1 text-[0.7rem] text-gray-400 dark:text-gray-500 shrink-0">
+              <span className="ml-auto flex items-center gap-1 text-[0.7rem] text-[var(--foreground-muted)] shrink-0">
                 <span>{selected.namespace_slug}</span>
                 <NamespaceIcon icon={selected.namespace_icon ?? 'building2'} color={selected.namespace_color ?? 'slate'} className="h-3 w-3" />
               </span>
             )}
           </span>
         ) : (
-          <span className="text-gray-400 dark:text-gray-500">{t('workitems.form.projectPlaceholder')}</span>
+          <span className="text-[var(--foreground-muted)]">{t('workitems.form.projectPlaceholder')}</span>
         )}
       </button>
 
       {open && (
-        <div className="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg">
+        <div className="absolute z-20 mt-1 w-full bg-[var(--surface)] border border-[var(--border)] rounded-md shadow-[var(--shadow-md)]">
           <div className="p-2">
             <input
               ref={inputRef}
-              className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-[var(--focus-ring)]"
               placeholder={t('workitems.form.projectSearchPlaceholder')}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -88,15 +88,15 @@ export function ProjectPicker({ projects, value, onChange, disabled, error }: Pr
               <li key={p.key}>
                 <button
                   type="button"
-                  className={`w-full text-left flex items-center gap-2 px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 ${
-                    p.key === value ? 'bg-indigo-50 dark:bg-indigo-900/30' : ''
+                  className={`w-full text-left flex items-center gap-2 px-3 py-2 text-sm hover:bg-[var(--surface-hover)] ${
+                    p.key === value ? 'bg-[var(--primary-muted)]' : ''
                   }`}
                   onClick={() => { onChange(p.key); setOpen(false); setSearch('') }}
                 >
                   <ProjectKeyBadge size="icon">{p.key}</ProjectKeyBadge>
-                  <span className="text-gray-900 dark:text-gray-100 font-medium truncate">{p.name}</span>
+                  <span className="text-[var(--foreground)] font-medium truncate">{p.name}</span>
                   {showNamespaces && p.namespace_slug && (
-                    <span className="ml-auto flex items-center gap-1 text-[0.7rem] text-gray-400 dark:text-gray-500 shrink-0">
+                    <span className="ml-auto flex items-center gap-1 text-[0.7rem] text-[var(--foreground-muted)] shrink-0">
                       <span>{p.namespace_slug}</span>
                       <NamespaceIcon icon={p.namespace_icon ?? 'building2'} color={p.namespace_color ?? 'slate'} className="h-3 w-3" />
                     </span>
@@ -105,13 +105,13 @@ export function ProjectPicker({ projects, value, onChange, disabled, error }: Pr
               </li>
             ))}
             {filtered.length === 0 && (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">{t('workitems.form.noProjectsFound')}</li>
+              <li className="px-3 py-2 text-sm text-[var(--foreground-muted)]">{t('workitems.form.noProjectsFound')}</li>
             )}
           </ul>
         </div>
       )}
 
-      {error && <p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="mt-1 text-sm text-[var(--danger)]">{error}</p>}
     </div>
   )
 }
diff --git a/web/src/components/ui/RefreshButton.tsx b/web/src/components/ui/RefreshButton.tsx
index c7f0e0f9..04d49799 100644
--- a/web/src/components/ui/RefreshButton.tsx
+++ b/web/src/components/ui/RefreshButton.tsx
@@ -63,11 +63,11 @@ export function RefreshButton({ interval, onIntervalChange, onRefresh, isRefresh
 
   return (
     <div ref={buttonRef} className="relative inline-flex">
-      <div className="inline-flex items-stretch rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden">
+      <div className="inline-flex items-stretch rounded-lg border border-[var(--border)] overflow-hidden">
         {/* Refresh button */}
         <button
           onClick={onRefresh}
-          className="flex items-center gap-1.5 px-2.5 py-2 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          className="flex items-center gap-1.5 px-2.5 py-2 text-sm text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)] transition-colors"
           aria-label={t('common.refresh')}
         >
           <RefreshCw className={`h-5 w-5 ${isRefreshing ? 'animate-spin' : ''}`} />
@@ -76,7 +76,7 @@ export function RefreshButton({ interval, onIntervalChange, onRefresh, isRefresh
         {/* Dropdown toggle */}
         <button
           onClick={() => setOpen((v) => !v)}
-          className="flex items-center px-1.5 border-l border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          className="flex items-center px-1.5 border-l border-[var(--border)] text-[var(--foreground-muted)] hover:bg-[var(--surface-hover)] transition-colors"
           aria-label={t('common.autoRefresh')}
           aria-expanded={open}
         >
@@ -127,7 +127,7 @@ function DropdownMenu({
   return createPortal(
     <div
       ref={dropdownRef}
-      className="z-50 min-w-[120px] rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1 animate-in fade-in duration-100"
+      className="z-50 min-w-[120px] rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-[var(--shadow-lg)] py-1 animate-in fade-in duration-100"
       style={style}
     >
       {INTERVAL_OPTIONS.map((opt) => (
@@ -136,8 +136,8 @@ function DropdownMenu({
           onClick={() => onSelect(opt.value)}
           className={`w-full text-left px-3 py-1.5 text-sm transition-colors ${
             interval === opt.value
-              ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 font-medium'
-              : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+              ? 'bg-[var(--primary-muted)] text-[var(--primary)] font-medium'
+              : 'text-[var(--foreground)] hover:bg-[var(--surface-hover)]'
           }`}
         >
           {t(opt.labelKey)}
diff --git a/web/src/components/ui/ScrollableDate.tsx b/web/src/components/ui/ScrollableDate.tsx
index d6363ff1..f47112ba 100644
--- a/web/src/components/ui/ScrollableDate.tsx
+++ b/web/src/components/ui/ScrollableDate.tsx
@@ -31,24 +31,24 @@ export function ScrollableDate({ date, className = '' }: ScrollableDateProps) {
     <span className={`relative inline-flex items-center min-w-0 ${className}`}>
       {canScrollLeft && (
         <>
-          <span className="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-white dark:from-gray-900 to-transparent z-10 pointer-events-none" />
+          <span className="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-[var(--surface)] to-transparent z-10 pointer-events-none" />
           <ChevronLeft
-            className="absolute left-0 w-3 h-3 text-gray-400 dark:text-gray-500 z-20 pointer-events-none"
+            className="absolute left-0 w-3 h-3 text-[var(--foreground-muted)] z-20 pointer-events-none"
           />
         </>
       )}
       <span
         ref={ref}
-        className="overflow-x-auto scrollbar-none text-xs text-gray-400 dark:text-gray-500 whitespace-nowrap min-w-0"
+        className="overflow-x-auto scrollbar-none text-xs text-[var(--foreground-muted)] whitespace-nowrap min-w-0"
         onScroll={checkScroll}
       >
         {new Date(date).toLocaleString()}
       </span>
       {canScrollRight && (
         <>
-          <span className="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-white dark:from-gray-900 to-transparent z-10 pointer-events-none" />
+          <span className="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-[var(--surface)] to-transparent z-10 pointer-events-none" />
           <ChevronRight
-            className="absolute right-0 w-3 h-3 text-gray-400 dark:text-gray-500 z-20 pointer-events-none"
+            className="absolute right-0 w-3 h-3 text-[var(--foreground-muted)] z-20 pointer-events-none"
           />
         </>
       )}
diff --git a/web/src/components/ui/ScrollableRow.tsx b/web/src/components/ui/ScrollableRow.tsx
index d7bff89d..92e6cda4 100644
--- a/web/src/components/ui/ScrollableRow.tsx
+++ b/web/src/components/ui/ScrollableRow.tsx
@@ -36,7 +36,7 @@ export const ScrollableRow = forwardRef<HTMLDivElement, ScrollableRowProps>(func
       {canScrollLeft && (
         <>
           <span className={`absolute left-0 top-0 bottom-0 w-5 bg-gradient-to-r ${gradientFrom} to-transparent z-10 pointer-events-none`} />
-          <ChevronLeft className="absolute left-0 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 dark:text-gray-500 z-20 pointer-events-none" />
+          <ChevronLeft className="absolute left-0 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--foreground-muted)] z-20 pointer-events-none" />
         </>
       )}
       <div
@@ -49,7 +49,7 @@ export const ScrollableRow = forwardRef<HTMLDivElement, ScrollableRowProps>(func
       {canScrollRight && (
         <>
           <span className={`absolute right-0 top-0 bottom-0 w-5 bg-gradient-to-l ${gradientFrom} to-transparent z-10 pointer-events-none`} />
-          <ChevronRight className="absolute right-0 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 dark:text-gray-500 z-20 pointer-events-none" />
+          <ChevronRight className="absolute right-0 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--foreground-muted)] z-20 pointer-events-none" />
         </>
       )}
     </div>
diff --git a/web/src/components/ui/Select.tsx b/web/src/components/ui/Select.tsx
index 5c314f06..94941fa6 100644
--- a/web/src/components/ui/Select.tsx
+++ b/web/src/components/ui/Select.tsx
@@ -18,8 +18,8 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
     return (
       <div>
         {label && (
-          <label htmlFor={selectId} className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-            {label}{requiredMarker && <span className="text-red-500" aria-hidden="true"> *</span>}
+          <label htmlFor={selectId} className="block text-sm font-medium text-[var(--foreground)] mb-1">
+            {label}{requiredMarker && <span className="text-[var(--danger)]" aria-hidden="true"> *</span>}
           </label>
         )}
         <div className="relative">
@@ -29,19 +29,19 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
             // appearance-none keeps the box model consistent across browsers — Safari's
             // native select control ignores vertical padding and renders shorter than
             // text inputs. We render our own chevron below in its place.
-            className={`block w-full appearance-none rounded-md border px-3 py-2 pr-10 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100 disabled:opacity-50 disabled:cursor-not-allowed ${
-              error ? 'border-red-300' : 'border-gray-300 dark:border-gray-600'
+            className={`block w-full appearance-none rounded-[var(--radius)] border px-3 py-2 pr-10 text-sm bg-[var(--surface)] focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${
+              error ? 'border-[var(--danger)]' : 'border-[var(--border)]'
             } ${className}`}
             {...props}
           >
             {children}
           </select>
           <ChevronDown
-            className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 dark:text-gray-500"
+            className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--foreground-muted)]"
             aria-hidden="true"
           />
         </div>
-        {error && <p className="mt-1 text-sm text-red-600">{error}</p>}
+        {error && <p className="mt-1 text-sm text-[var(--danger)]">{error}</p>}
       </div>
     )
   },
diff --git a/web/src/components/ui/Spinner.tsx b/web/src/components/ui/Spinner.tsx
index 159a9d67..aab0e0d9 100644
--- a/web/src/components/ui/Spinner.tsx
+++ b/web/src/components/ui/Spinner.tsx
@@ -12,7 +12,7 @@ interface SpinnerProps {
 export function Spinner({ size = 'md', className = '' }: SpinnerProps) {
   return (
     <svg
-      className={`animate-spin text-indigo-600 ${sizeClasses[size]} ${className}`}
+      className={`animate-spin text-[var(--primary)] ${sizeClasses[size]} ${className}`}
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
diff --git a/web/src/components/ui/Tabs.tsx b/web/src/components/ui/Tabs.tsx
index 442ee95a..8fa25b10 100644
--- a/web/src/components/ui/Tabs.tsx
+++ b/web/src/components/ui/Tabs.tsx
@@ -14,7 +14,7 @@ interface TabsProps {
 
 export function Tabs({ tabs, activeTab, onTabChange }: TabsProps) {
   return (
-    <div className="flex overflow-x-auto overflow-y-hidden border-b border-gray-200 dark:border-gray-700">
+    <div className="flex overflow-x-auto overflow-y-hidden border-b border-[var(--border)]">
       {tabs.map((tab) => {
         const isActive = tab.key === activeTab
         const Icon = tab.icon
@@ -24,8 +24,8 @@ export function Tabs({ tabs, activeTab, onTabChange }: TabsProps) {
             onClick={() => onTabChange(tab.key)}
             className={`px-4 py-2 text-sm font-medium transition-colors -mb-px inline-flex items-center gap-1.5 shrink-0 whitespace-nowrap ${
               isActive
-                ? 'text-indigo-600 dark:text-indigo-400 border-b-2 border-indigo-600 dark:border-indigo-400 font-semibold'
-                : 'text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 border-b-2 border-transparent'
+                ? 'text-[var(--primary)] border-b-2 border-[var(--primary)] font-semibold'
+                : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)] border-b-2 border-transparent'
             }`}
           >
             {Icon && <Icon className="h-3.5 w-3.5" />}
diff --git a/web/src/components/ui/TimezoneSelect.tsx b/web/src/components/ui/TimezoneSelect.tsx
index 020b7921..32e6321f 100644
--- a/web/src/components/ui/TimezoneSelect.tsx
+++ b/web/src/components/ui/TimezoneSelect.tsx
@@ -61,7 +61,7 @@ export function TimezoneSelect({ value, onChange, disabled = false }: Props) {
       <button
         type="button"
         disabled={disabled}
-        className="w-full text-left rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 truncate disabled:opacity-60 disabled:cursor-not-allowed"
+        className="w-full text-left rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] truncate disabled:opacity-60 disabled:cursor-not-allowed"
         onClick={() => {
           setOpen(!open)
           if (!open) {
@@ -73,12 +73,12 @@ export function TimezoneSelect({ value, onChange, disabled = false }: Props) {
       </button>
 
       {open && (
-        <div className="absolute z-50 mt-1 w-full max-h-64 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-lg flex flex-col">
-          <div className="p-2 border-b border-gray-200 dark:border-gray-700">
+        <div className="absolute z-50 mt-1 w-full max-h-64 bg-[var(--surface)] border border-[var(--border)] rounded-md shadow-[var(--shadow)] flex flex-col">
+          <div className="p-2 border-b border-[var(--border)]">
             <input
               ref={inputRef}
               type="text"
-              className="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
               placeholder={t('businessHours.searchTimezone')}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -94,14 +94,14 @@ export function TimezoneSelect({ value, onChange, disabled = false }: Props) {
           </div>
           <ul ref={listRef} className="overflow-y-auto flex-1">
             {filtered.length === 0 ? (
-              <li className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400">{t('common.noResults')}</li>
+              <li className="px-3 py-2 text-sm text-[var(--foreground-muted)]">{t('common.noResults')}</li>
             ) : (
               filtered.map((tz) => (
                 <li key={tz}>
                   <button
                     type="button"
-                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-indigo-50 dark:hover:bg-indigo-900/30 ${
-                      tz === value ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 font-medium' : 'text-gray-900 dark:text-gray-100'
+                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-[var(--surface-hover)] ${
+                      tz === value ? 'bg-[var(--primary-muted)] text-[var(--primary)] font-medium' : 'text-[var(--foreground)]'
                     }`}
                     onClick={() => handleSelect(tz)}
                   >
diff --git a/web/src/components/ui/Toggle.tsx b/web/src/components/ui/Toggle.tsx
index 41d89b2c..eb9c09f0 100644
--- a/web/src/components/ui/Toggle.tsx
+++ b/web/src/components/ui/Toggle.tsx
@@ -14,10 +14,10 @@ export function Toggle({ enabled, onChange, disabled = false, label }: TogglePro
       aria-label={label}
       disabled={disabled}
       onClick={() => onChange(!enabled)}
-      className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${
+      className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:ring-offset-2 ${
         enabled
-          ? 'bg-indigo-600'
-          : 'bg-gray-200 dark:bg-gray-700'
+          ? 'bg-[var(--primary)]'
+          : 'bg-[var(--surface-tertiary)]'
       } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
     >
       <span
diff --git a/web/src/components/ui/Tooltip.tsx b/web/src/components/ui/Tooltip.tsx
index 58c6fc07..a5057f34 100644
--- a/web/src/components/ui/Tooltip.tsx
+++ b/web/src/components/ui/Tooltip.tsx
@@ -57,10 +57,10 @@ const arrowStyle: Record<string, React.CSSProperties> = {
 }
 
 const arrowClasses = {
-  top: 'border-t-gray-600 dark:border-t-gray-600 border-x-transparent border-b-transparent',
-  bottom: 'border-b-gray-600 dark:border-b-gray-600 border-x-transparent border-t-transparent',
-  left: 'border-l-gray-600 dark:border-l-gray-600 border-y-transparent border-r-transparent',
-  right: 'border-r-gray-600 dark:border-r-gray-600 border-y-transparent border-l-transparent',
+  top: 'border-t-[var(--tooltip-bg)] border-x-transparent border-b-transparent',
+  bottom: 'border-b-[var(--tooltip-bg)] border-x-transparent border-t-transparent',
+  left: 'border-l-[var(--tooltip-bg)] border-y-transparent border-r-transparent',
+  right: 'border-r-[var(--tooltip-bg)] border-y-transparent border-l-transparent',
 }
 
 export function Tooltip({ content, children, position = 'top', className, style: wrapperStyle, maxWidth }: TooltipProps) {
@@ -115,7 +115,7 @@ export function Tooltip({ content, children, position = 'top', className, style:
       {visible && createPortal(
         <span
           ref={tooltipRef}
-          className={`z-50 pointer-events-none rounded bg-gray-600 dark:bg-gray-600 px-2 py-1 text-xs text-white shadow-lg animate-in fade-in duration-100 ${maxWidth ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
+          className={`z-50 pointer-events-none rounded bg-[var(--tooltip-bg)] px-2 py-1 text-xs text-[var(--tooltip-text)] shadow-[var(--shadow)] animate-in fade-in duration-100 ${maxWidth ? 'whitespace-pre-line' : 'whitespace-nowrap'}`}
           role="tooltip"
           style={{ ...style, ...(maxWidth ? { maxWidth } : {}) }}
         >
diff --git a/web/src/components/ui/UserPicker.tsx b/web/src/components/ui/UserPicker.tsx
index 825172db..404a08aa 100644
--- a/web/src/components/ui/UserPicker.tsx
+++ b/web/src/components/ui/UserPicker.tsx
@@ -47,27 +47,27 @@ export function UserPicker({ members, value, onChange, placeholder, disabled }:
       {/* Display / trigger */}
       <button
         type="button"
-        className={`block w-full rounded-md border border-gray-300 dark:border-gray-600 px-3 py-2 text-sm text-left shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white dark:bg-gray-800 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+        className={`block w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm text-left focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--focus-ring)] bg-[var(--surface)] ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
         onClick={() => { if (disabled) return; setOpen(!open); setTimeout(() => inputRef.current?.focus(), 0) }}
         disabled={disabled}
       >
         {selected ? (
-          <span className="flex items-center gap-2 text-gray-900 dark:text-gray-100">
+          <span className="flex items-center gap-2 text-[var(--foreground)]">
             <Avatar name={selected.display_name} avatarUrl={selected.avatar_url} size="xs" />
             {selected.display_name}
           </span>
         ) : (
-          <span className="text-gray-400 dark:text-gray-500">{value ? t('userPicker.unknownUser') : t('userPicker.unassigned')}</span>
+          <span className="text-[var(--foreground-muted)]">{value ? t('userPicker.unknownUser') : t('userPicker.unassigned')}</span>
         )}
       </button>
 
       {/* Dropdown */}
       {open && (
-        <div className="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg">
+        <div className="absolute z-20 mt-1 w-full bg-[var(--surface)] border border-[var(--border)] rounded-md shadow-[var(--shadow-md)]">
           <div className="p-2">
             <input
               ref={inputRef}
-              className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-[var(--focus-ring)]"
               placeholder={placeholder ?? t('userPicker.searchMembers')}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -78,8 +78,8 @@ export function UserPicker({ members, value, onChange, placeholder, disabled }:
             <li>
               <button
                 type="button"
-                className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 ${
-                  !value ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300' : 'text-gray-500 dark:text-gray-400 italic'
+                className={`w-full text-left px-3 py-2 text-sm hover:bg-[var(--surface-hover)] ${
+                  !value ? 'bg-[var(--primary-muted)] text-[var(--primary)]' : 'text-[var(--foreground-secondary)] italic'
                 }`}
                 onClick={() => { onChange(null); setOpen(false); setSearch('') }}
               >
@@ -90,8 +90,8 @@ export function UserPicker({ members, value, onChange, placeholder, disabled }:
               <li key={m.user_id}>
                 <button
                   type="button"
-                  className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 ${
-                    m.user_id === value ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300' : 'text-gray-900 dark:text-gray-100'
+                  className={`w-full text-left px-3 py-2 text-sm hover:bg-[var(--surface-hover)] ${
+                    m.user_id === value ? 'bg-[var(--primary-muted)] text-[var(--primary)]' : 'text-[var(--foreground)]'
                   }`}
                   onClick={() => { onChange(m.user_id); setOpen(false); setSearch('') }}
                 >
@@ -99,14 +99,14 @@ export function UserPicker({ members, value, onChange, placeholder, disabled }:
                     <Avatar name={m.display_name} avatarUrl={m.avatar_url} size="xs" />
                     <div>
                       <div className="font-medium">{m.display_name}</div>
-                      <div className="text-xs text-gray-400">{m.email}</div>
+                      <div className="text-xs text-[var(--foreground-muted)]">{m.email}</div>
                     </div>
                   </div>
                 </button>
               </li>
             ))}
             {filtered.length === 0 && (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">{t('userPicker.noMembersFound')}</li>
+              <li className="px-3 py-2 text-sm text-[var(--foreground-muted)]">{t('userPicker.noMembersFound')}</li>
             )}
           </ul>
         </div>
diff --git a/web/src/components/ui/WorkItemPicker.tsx b/web/src/components/ui/WorkItemPicker.tsx
index abb42769..159df3e3 100644
--- a/web/src/components/ui/WorkItemPicker.tsx
+++ b/web/src/components/ui/WorkItemPicker.tsx
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { useWorkItems } from '@/hooks/useWorkItems'
 import { useDebounce } from '@/hooks/useDebounce'
 import { Spinner } from '@/components/ui/Spinner'
+import { meetsSearchFloor } from '@/utils/searchRequest'
 
 interface WorkItemPickerProps {
   projectKey: string
@@ -29,7 +30,7 @@ export function WorkItemPicker({
   const listRef = useRef<HTMLUListElement>(null)
 
   const debouncedSearch = useDebounce(value, 300)
-  const shouldSearch = open && debouncedSearch.length >= 2
+  const shouldSearch = open && meetsSearchFloor(debouncedSearch)
 
   const { data, isFetching } = useWorkItems(
     projectKey,
@@ -93,7 +94,7 @@ export function WorkItemPicker({
     <div ref={ref} className="relative">
       <input
         ref={inputRef}
-        className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+        className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--focus-ring)]"
         placeholder={placeholder ?? t('workItemPicker.searchPlaceholder')}
         value={value}
         onChange={(e) => {
@@ -104,8 +105,8 @@ export function WorkItemPicker({
         onKeyDown={handleKeyDown}
       />
 
-      {open && value.length >= 2 && (
-        <div className="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg">
+      {open && meetsSearchFloor(value) && (
+        <div className="absolute z-20 mt-1 w-full bg-[var(--surface)] border border-[var(--border)] rounded-md shadow-[var(--shadow-md)]">
           {isFetching ? (
             <div className="flex items-center justify-center py-3">
               <Spinner size="sm" />
@@ -116,17 +117,17 @@ export function WorkItemPicker({
                 <li key={item.id} role="option" aria-selected={idx === highlightIndex}>
                   <button
                     type="button"
-                    className={`w-full text-left px-3 py-2 text-sm ${idx === highlightIndex ? 'bg-gray-100 dark:bg-gray-700' : 'hover:bg-gray-50 dark:hover:bg-gray-700'}`}
+                    className={`w-full text-left px-3 py-2 text-sm ${idx === highlightIndex ? 'bg-[var(--surface-hover)]' : 'hover:bg-[var(--surface-hover)]'}`}
                     onClick={() => {
                       onSelect(item.display_id)
                       setOpen(false)
                     }}
                     onMouseEnter={() => setHighlightIndex(idx)}
                   >
-                    <span className="font-mono font-medium text-indigo-600 dark:text-indigo-400">
+                    <span className="font-mono font-medium text-[var(--primary)]">
                       {item.display_id}
                     </span>
-                    <span className="ml-2 text-gray-700 dark:text-gray-300 truncate">
+                    <span className="ml-2 text-[var(--foreground)] truncate">
                       {item.title}
                     </span>
                   </button>
@@ -134,7 +135,7 @@ export function WorkItemPicker({
               ))}
             </ul>
           ) : (
-            <div className="px-3 py-3 text-sm text-gray-400 dark:text-gray-500">
+            <div className="px-3 py-3 text-sm text-[var(--foreground-muted)]">
               {t('workItemPicker.noItems')}
             </div>
           )}
diff --git a/web/src/components/workitems/ActivityTimeline.tsx b/web/src/components/workitems/ActivityTimeline.tsx
index 37a8b20c..94c53953 100644
--- a/web/src/components/workitems/ActivityTimeline.tsx
+++ b/web/src/components/workitems/ActivityTimeline.tsx
@@ -59,27 +59,27 @@ export function ActivityTimeline({ projectKey, itemNumber, sortOrder = 'desc', o
   if (isLoading) return <Spinner size="sm" />
 
   if (!events?.length) {
-    return <p className="text-sm text-gray-400 dark:text-gray-500">{t('activity.noActivity')}</p>
+    return <p className="text-sm text-[var(--foreground-muted)]">{t('activity.noActivity')}</p>
   }
 
   const sorted = sortOrder === 'desc' ? [...events].reverse() : events
 
   return (
     <>
-      <div className="border-l-2 border-gray-200 dark:border-gray-700 pl-4 space-y-4">
+      <div className="border-l-2 border-[var(--border)] pl-4 space-y-4">
         {sorted.map((event) => (
           <div key={event.id} className="relative">
-            <div className="absolute -left-[21px] top-1.5 w-2.5 h-2.5 rounded-full bg-gray-300 dark:bg-gray-600 border-2 border-white dark:border-gray-900" />
+            <div className="absolute -left-[21px] top-1.5 w-2.5 h-2.5 rounded-full bg-[var(--border)] border-2 border-white border-[var(--background)]" />
             <div className="text-sm">
-              <span className="font-medium text-gray-700 dark:text-gray-300">{event.actor?.display_name ?? t('common.system')}</span>
+              <span className="font-medium text-[var(--foreground)]">{event.actor?.display_name ?? t('common.system')}</span>
               {' '}
-              <span className="text-gray-500 dark:text-gray-400">{formatEventLabel(event, t)}</span>
+              <span className="text-[var(--foreground-secondary)]">{formatEventLabel(event, t)}</span>
               <CommentLink event={event} onClick={onCommentClick} t={t} />
               <AttachmentLink event={event} onClick={onAttachmentClick} />
             </div>
             <FieldChangeDiff event={event} members={members} t={t} onExpand={setDiffTarget} />
             <CommentPreview event={event} t={t} onExpand={setDiffTarget} />
-            <span className="text-xs text-gray-400 dark:text-gray-500">{new Date(event.created_at).toLocaleString()}</span>
+            <span className="text-xs text-[var(--foreground-muted)]">{new Date(event.created_at).toLocaleString()}</span>
           </div>
         ))}
       </div>
@@ -143,7 +143,7 @@ function FieldChangeDiff({ event, members, t, onExpand }: { event: WorkItemEvent
 
     return (
       <div
-        className={`mt-1 mb-1 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-xs font-mono overflow-hidden ${hasMore ? 'cursor-pointer hover:border-gray-300 dark:hover:border-gray-600' : ''}`}
+        className={`mt-1 mb-1 rounded-md border border-[var(--border)] bg-[var(--surface-secondary)] text-xs font-mono overflow-hidden ${hasMore ? 'cursor-pointer hover:border-[var(--border)] dark:hover:border-[var(--border)]' : ''}`}
         onClick={hasMore ? handleExpandModal : undefined}
         role={hasMore ? 'button' : undefined}
         tabIndex={hasMore ? 0 : undefined}
@@ -162,7 +162,7 @@ function FieldChangeDiff({ event, members, t, onExpand }: { event: WorkItemEvent
           return <DiffLineView key={gi} line={group[0]} />
         })}
         {hasMore && (
-          <div className="px-3 py-1 text-xs text-gray-500 dark:text-gray-400 text-left">
+          <div className="px-3 py-1 text-xs text-[var(--foreground-secondary)] text-left">
             {t('common.showMoreLines', { count: changedLines.length - COLLAPSED_LINES })}
           </div>
         )}
@@ -185,14 +185,14 @@ function FieldChangeDiff({ event, members, t, onExpand }: { event: WorkItemEvent
 
   return (
     <div
-      className={`mt-1 mb-1 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-xs font-mono overflow-hidden ${expandable ? 'cursor-pointer hover:border-gray-300 dark:hover:border-gray-600' : ''}`}
+      className={`mt-1 mb-1 rounded-md border border-[var(--border)] bg-[var(--surface-secondary)] text-xs font-mono overflow-hidden ${expandable ? 'cursor-pointer hover:border-[var(--border)] dark:hover:border-[var(--border)]' : ''}`}
       onClick={handleClick}
       role={expandable ? 'button' : undefined}
       tabIndex={expandable ? 0 : undefined}
       onKeyDown={expandable ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick() } } : undefined}
     >
       {resolvedOld && (
-        <div className="px-3 py-1.5 bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-b border-gray-200 dark:border-gray-700">
+        <div className="px-3 py-1.5 bg-red-50 dark:bg-red-900/30 text-red-800 text-[var(--danger)] border-b border-[var(--border)]">
           <span className="select-none text-red-400 mr-2">&minus;</span>
           {truncate(resolvedOld)}
         </div>
@@ -343,12 +343,12 @@ function DiffLineView({ line, wordSpans, className }: { line: DiffLine; wordSpan
   const isAdd = line.type === 'add'
 
   const bg = isRemove
-    ? 'bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300'
+    ? 'bg-red-50 dark:bg-red-900/30 text-red-800 text-[var(--danger)]'
     : isAdd
       ? 'bg-green-50 dark:bg-green-900/30 text-green-800 dark:text-green-300'
-      : 'text-gray-600 dark:text-gray-400'
+      : 'text-[var(--foreground-secondary)]'
 
-  const symbolColor = isRemove ? 'text-red-400' : isAdd ? 'text-green-400' : 'text-gray-400'
+  const symbolColor = isRemove ? 'text-red-400' : isAdd ? 'text-green-400' : 'text-[var(--foreground-muted)]'
   const symbol = isRemove ? '\u2212' : isAdd ? '+' : ' '
 
   return (
@@ -409,7 +409,7 @@ function CommentPreview({ event, t, onExpand }: { event: WorkItemEvent; t: TFunc
 
     return (
       <div
-        className={`mt-1 mb-1 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-xs font-mono overflow-hidden ${hasMore ? 'cursor-pointer hover:border-gray-300 dark:hover:border-gray-600' : ''}`}
+        className={`mt-1 mb-1 rounded-md border border-[var(--border)] bg-[var(--surface-secondary)] text-xs font-mono overflow-hidden ${hasMore ? 'cursor-pointer hover:border-[var(--border)] dark:hover:border-[var(--border)]' : ''}`}
         onClick={hasMore ? handleExpandModal : undefined}
         role={hasMore ? 'button' : undefined}
         tabIndex={hasMore ? 0 : undefined}
@@ -428,7 +428,7 @@ function CommentPreview({ event, t, onExpand }: { event: WorkItemEvent; t: TFunc
           return <DiffLineView key={gi} line={group[0]} />
         })}
         {hasMore && (
-          <div className="px-3 py-1 text-xs text-gray-500 dark:text-gray-400 text-left">
+          <div className="px-3 py-1 text-xs text-[var(--foreground-secondary)] text-left">
             {t('common.showMoreLines', { count: changedLines.length - COLLAPSED_LINES })}
           </div>
         )}
@@ -443,11 +443,11 @@ function CommentPreview({ event, t, onExpand }: { event: WorkItemEvent; t: TFunc
   const displayText = expanded ? preview : firstLines(preview, 2)
 
   return (
-    <div className="mt-1 mb-1 rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-xs overflow-hidden">
-      <div className="px-3 py-1.5 text-gray-600 dark:text-gray-400 whitespace-pre-wrap">{displayText}</div>
+    <div className="mt-1 mb-1 rounded-md border border-[var(--border)] bg-[var(--surface-secondary)] text-xs overflow-hidden">
+      <div className="px-3 py-1.5 text-[var(--foreground-secondary)] whitespace-pre-wrap">{displayText}</div>
       {needsExpand && (
         <button
-          className="w-full px-3 py-1 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 text-left"
+          className="w-full px-3 py-1 text-xs text-[var(--foreground-secondary)] hover:text-[var(--foreground)] hover:bg-[var(--surface-hover)] text-left"
           onClick={() => setExpanded(!expanded)}
         >
           {expanded ? t('common.showLess') : t('common.showMore')}
@@ -467,7 +467,7 @@ function CommentLink({ event, onClick, t }: { event: WorkItemEvent; onClick?: (c
       <>
         {' '}
         <button
-          className="text-indigo-600 dark:text-indigo-400 hover:underline"
+          className="text-[var(--primary)] hover:underline"
           onClick={() => onClick(commentId)}
         >
           {t('activity.aComment')}
@@ -476,7 +476,7 @@ function CommentLink({ event, onClick, t }: { event: WorkItemEvent; onClick?: (c
     )
   }
 
-  return <span className="text-gray-500 dark:text-gray-400"> {t('activity.aComment')}</span>
+  return <span className="text-[var(--foreground-secondary)]"> {t('activity.aComment')}</span>
 }
 
 function AttachmentLink({ event, onClick }: { event: WorkItemEvent; onClick?: (attachmentId: string) => void }) {
@@ -490,7 +490,7 @@ function AttachmentLink({ event, onClick }: { event: WorkItemEvent; onClick?: (a
       <>
         {' '}
         <button
-          className="text-indigo-600 dark:text-indigo-400 hover:underline"
+          className="text-[var(--primary)] hover:underline"
           onClick={() => onClick(attachmentId)}
         >
           {filename}
@@ -499,5 +499,5 @@ function AttachmentLink({ event, onClick }: { event: WorkItemEvent; onClick?: (a
     )
   }
 
-  return <span className="text-gray-600 dark:text-gray-300"> {filename}</span>
+  return <span className="text-[var(--foreground-secondary)]"> {filename}</span>
 }
diff --git a/web/src/components/workitems/AttachmentList.tsx b/web/src/components/workitems/AttachmentList.tsx
index 5dae461f..58c441e5 100644
--- a/web/src/components/workitems/AttachmentList.tsx
+++ b/web/src/components/workitems/AttachmentList.tsx
@@ -97,10 +97,10 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
     <div className="space-y-4">
       {/* Upload form */}
       {!readOnly && (
-        <div className="space-y-2 pb-3 border-b border-gray-100 dark:border-gray-700">
+        <div className="space-y-2 pb-3 border-b border-[var(--border)]">
           <input
             type="text"
-            className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-1.5 text-sm"
+            className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-1.5 text-sm"
             placeholder={t('attachments.commentPlaceholder')}
             value={comment}
             onChange={(e) => setComment(e.target.value)}
@@ -109,14 +109,14 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
             <input
               ref={fileInputRef}
               type="file"
-              className="text-sm text-gray-500 file:mr-2 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-sm file:bg-indigo-50 file:text-indigo-600 dark:file:bg-indigo-900/30 dark:file:text-indigo-400 hover:file:bg-indigo-100"
+              className="text-sm text-[var(--foreground-secondary)] file:mr-2 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-sm file:bg-[var(--primary-muted)] file:text-[var(--primary)]  dark:file:text-[var(--primary)] hover:file:bg-[var(--primary-muted)]"
               onChange={handleFileSelect}
               disabled={uploadMutation.isPending}
             />
             {uploadMutation.isPending && <Spinner size="sm" />}
           </div>
           {uploadMutation.isError && (
-            <p className="text-xs text-red-500">{t('attachments.uploadFailed')}</p>
+            <p className="text-xs text-[var(--danger)]">{t('attachments.uploadFailed')}</p>
           )}
         </div>
       )}
@@ -126,8 +126,8 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
         <div
           key={a.id}
           ref={a.id === highlightedAttachmentId ? highlightRef : undefined}
-          className={`flex items-start gap-3 border-b border-gray-100 dark:border-gray-700 pb-3 rounded-md transition-colors duration-700 ${
-            a.id === highlightedAttachmentId ? 'bg-indigo-50 dark:bg-indigo-900/30 ring-1 ring-indigo-300 dark:ring-indigo-600 px-2 py-2 -mx-2' : ''
+          className={`flex items-start gap-3 border-b border-[var(--border)] pb-3 rounded-md transition-colors duration-200 ${
+            a.id === highlightedAttachmentId ? 'bg-[var(--primary-muted)] ring-1 ring-indigo-300 dark:ring-indigo-600 px-2 py-2 -mx-2' : ''
           }`}
         >
           <div className="flex-1 min-w-0">
@@ -140,7 +140,7 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
                     handleDownload(a.id, a.filename)
                   }
                 }}
-                className="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:underline whitespace-nowrap text-left cursor-pointer"
+                className="text-sm font-medium text-[var(--primary)] hover:underline whitespace-nowrap text-left cursor-pointer"
               >
                 {a.filename}
               </button>
@@ -149,7 +149,7 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
               <div className="flex items-center gap-1 mt-0.5">
                 <input
                   type="text"
-                  className="text-xs border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded px-1.5 py-0.5 flex-1"
+                  className="text-xs border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] rounded px-1.5 py-0.5 flex-1"
                   value={editCommentDraft}
                   onChange={(e) => setEditCommentDraft(e.target.value)}
                   onKeyDown={(e) => {
@@ -162,20 +162,20 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
                   autoFocus
                 />
                 <button
-                  className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline"
+                  className="text-xs text-[var(--primary)] hover:underline"
                   onClick={() => {
                     updateCommentMutation.mutate({ attachmentId: a.id, comment: editCommentDraft })
                     setEditingCommentId(null)
                   }}
                 >{t('common.save')}</button>
                 <button
-                  className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                  className="text-xs text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
                   onClick={() => setEditingCommentId(null)}
                 >{t('common.cancel')}</button>
               </div>
             ) : a.comment ? (
               <p
-                className={`text-xs text-gray-500 dark:text-gray-400 mt-0.5 rounded ${canManageAttachment(a.uploader_id) ? 'hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default' : ''}`}
+                className={`text-xs text-[var(--foreground-secondary)] mt-0.5 rounded ${canManageAttachment(a.uploader_id) ? 'hover:bg-[var(--surface-hover)] cursor-default' : ''}`}
                 onDoubleClick={() => {
                   if (canManageAttachment(a.uploader_id)) {
                     setEditingCommentId(a.id)
@@ -184,7 +184,7 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
                 }}
               >{a.comment}</p>
             ) : null}
-            <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
+            <p className="text-xs text-[var(--foreground-muted)] mt-0.5">
               {formatFileSize(a.size_bytes)} &middot; {uploaderName(a.uploader_id)} &middot; {new Date(a.created_at).toLocaleString()}
             </p>
           </div>
@@ -192,7 +192,7 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
             {canManageAttachment(a.uploader_id) && (
               <Tooltip content={t('attachments.editDescription')}>
                 <button
-                  className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                  className="p-1 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] rounded hover:bg-[var(--surface-hover)]"
                   onClick={() => {
                     setEditingCommentId(a.id)
                     setEditCommentDraft(a.comment ?? '')
@@ -206,7 +206,7 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
             )}
             <Tooltip content={t('preview.download')}>
               <button
-                className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                className="p-1 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] rounded hover:bg-[var(--surface-hover)]"
                 onClick={() => handleDownload(a.id, a.filename)}
               >
                 <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
@@ -217,7 +217,7 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
             {canManageAttachment(a.uploader_id) && (
               <Tooltip content={t('common.delete')}>
                 <button
-                  className="p-1 text-red-400 hover:text-red-600 dark:hover:text-red-300 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                  className="p-1 text-red-400 hover:text-[var(--danger)] dark:hover:text-red-300 rounded hover:bg-[var(--surface-hover)]"
                   onClick={() => setDeleteTarget(a)}
                 >
                   <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
@@ -231,12 +231,12 @@ export function AttachmentList({ projectKey, itemNumber, sortOrder = 'desc', hig
       ))}
 
       {(attachments ?? []).length === 0 && (
-        <p className="text-sm text-gray-400 italic">{t('attachments.noAttachments')}</p>
+        <p className="text-sm text-[var(--foreground-muted)] italic">{t('attachments.noAttachments')}</p>
       )}
 
       {/* Delete confirmation modal */}
       <Modal open={!!deleteTarget} onClose={() => setDeleteTarget(null)} title={t('attachments.deleteTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           {t('attachments.deleteConfirm')} <strong>{deleteTarget?.filename}</strong>
         </p>
         <div className="flex justify-end gap-3">
diff --git a/web/src/components/workitems/BoardView.tsx b/web/src/components/workitems/BoardView.tsx
index 0d7e4b51..4922e27a 100644
--- a/web/src/components/workitems/BoardView.tsx
+++ b/web/src/components/workitems/BoardView.tsx
@@ -45,7 +45,7 @@ export function BoardView({ projectKey, items, statuses, transitionsMap, onItemC
   }
 
   const categoryDot: Record<string, string> = {
-    todo: 'bg-gray-400',
+    todo: 'bg-[var(--foreground-muted)]',
     in_progress: 'bg-blue-400',
     done: 'bg-green-400',
     cancelled: 'bg-red-400',
@@ -139,7 +139,7 @@ export function BoardView({ projectKey, items, statuses, transitionsMap, onItemC
           <button
             type="button"
             aria-label={t('workitems.board.scrollLeft')}
-            className="pointer-events-auto sticky top-1/2 -translate-y-1/2 ml-1 flex items-center justify-center w-8 h-8 rounded-full bg-white/90 dark:bg-gray-800/90 border border-gray-200 dark:border-gray-600 shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors"
+            className="pointer-events-auto sticky top-1/2 -translate-y-1/2 ml-1 flex items-center justify-center w-8 h-8 rounded-full bg-white/90 bg-[var(--surface)]/90 border border-[var(--border)] shadow-md hover:bg-[var(--surface-hover)] text-[var(--foreground-secondary)] transition-colors"
             onClick={() => scrollBy('left')}
           >
             <ChevronLeft size={20} />
@@ -151,7 +151,7 @@ export function BoardView({ projectKey, items, statuses, transitionsMap, onItemC
           <button
             type="button"
             aria-label={t('workitems.board.scrollRight')}
-            className="pointer-events-auto sticky top-1/2 -translate-y-1/2 -ml-9 flex items-center justify-center w-8 h-8 rounded-full bg-white/90 dark:bg-gray-800/90 border border-gray-200 dark:border-gray-600 shadow-md hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors"
+            className="pointer-events-auto sticky top-1/2 -translate-y-1/2 -ml-9 flex items-center justify-center w-8 h-8 rounded-full bg-white/90 bg-[var(--surface)]/90 border border-[var(--border)] shadow-md hover:bg-[var(--surface-hover)] text-[var(--foreground-secondary)] transition-colors"
             onClick={() => scrollBy('right')}
           >
             <ChevronRight size={20} />
@@ -163,9 +163,9 @@ export function BoardView({ projectKey, items, statuses, transitionsMap, onItemC
           const isValidTarget = draggedItem !== null && canDropOnStatus(status.name)
           const isHovered = hoveredColumn === status.name
           const columnClasses = isHovered
-            ? 'border-2 border-dashed border-indigo-400 dark:border-indigo-500 bg-indigo-50/50 dark:bg-indigo-900/20 rounded-lg'
+            ? 'border-2 border-dashed border-[var(--primary-border)] dark:border-[var(--primary)] bg-[var(--primary-muted)]/50  rounded-lg'
             : isValidTarget
-              ? 'border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg'
+              ? 'border-2 border-dashed border-[var(--border)] rounded-lg'
               : draggedItem !== null
                 ? 'border-2 border-transparent rounded-lg opacity-60'
                 : ''
@@ -180,9 +180,9 @@ export function BoardView({ projectKey, items, statuses, transitionsMap, onItemC
               onDrop={(e) => handleColumnDrop(e, status.name)}
             >
               <div className="flex items-center gap-2 mb-3 px-1">
-                <span className={`w-2.5 h-2.5 rounded-full ${categoryDot[status.category] ?? 'bg-gray-400'}`} />
-                <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">{t(`workitems.statuses.${status.name}`, { defaultValue: status.display_name })}</h3>
-                <span className="text-xs text-gray-400 dark:text-gray-500">{itemsByStatus.get(status.name)?.length ?? 0}</span>
+                <span className={`w-2.5 h-2.5 rounded-full ${categoryDot[status.category] ?? 'bg-[var(--foreground-muted)]'}`} />
+                <h3 className="text-sm font-medium text-[var(--foreground)]">{t(`workitems.statuses.${status.name}`, { defaultValue: status.display_name })}</h3>
+                <span className="text-xs text-[var(--foreground-muted)]">{itemsByStatus.get(status.name)?.length ?? 0}</span>
               </div>
               <div className="space-y-2">
                 {(itemsByStatus.get(status.name) ?? []).map((item) => (
@@ -244,7 +244,7 @@ function BoardCard({
 
   return (
     <div
-      className={`bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-3 shadow-sm hover:shadow-md cursor-pointer relative ${isDragging ? 'opacity-50' : ''}`}
+      className={`bg-[var(--surface)] rounded-lg border border-[var(--border)] p-3 shadow-sm hover:shadow-md cursor-pointer relative ${isDragging ? 'opacity-50' : ''}`}
       draggable={!readOnly}
       onClick={onClick}
       onDragStart={(e) => {
@@ -255,27 +255,27 @@ function BoardCard({
       onDragEnd={onDragEnd}
     >
       <div className="flex items-center gap-1.5 mb-1">
-        <span className={`text-xs font-bold font-mono ${isCompleted ? 'text-gray-400 dark:text-gray-500' : 'text-gray-600 dark:text-gray-400'}`}>{item.display_id}</span>
+        <span className={`text-xs font-bold font-mono ${isCompleted ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground-secondary)]'}`}>{item.display_id}</span>
         <span className={isCompleted ? 'opacity-40' : ''}><TypeBadge type={item.type} /></span>
         <span className={isCompleted ? 'opacity-40' : ''}><PriorityBadge priority={item.priority} /></span>
         {allowed.length > 0 && !readOnly && (
           <div className="relative ml-auto">
             <Tooltip content={t('workitems.view.moveTo')}>
               <button
-                className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-xs px-1"
+                className="text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] text-xs px-1"
                 onClick={(e) => { e.stopPropagation(); setShowMenu(!showMenu) }}
               >
               &hellip;
               </button>
             </Tooltip>
             {showMenu && (
-              <div className="absolute right-0 top-5 z-10 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg py-1 min-w-[140px]">
+              <div className="absolute right-0 top-5 z-10 bg-[var(--surface)] border border-[var(--border)] rounded-md shadow-lg py-1 min-w-[140px]">
                 {allowed.map((toStatus) => {
                   const ws = statuses.find((s) => s.name === toStatus)
                   return (
                     <button
                       key={toStatus}
-                      className="block w-full text-left px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
+                      className="block w-full text-left px-3 py-1.5 text-sm text-[var(--foreground)] hover:bg-[var(--surface-hover)]"
                       onClick={(e) => {
                         e.stopPropagation()
                         onStatusChange(toStatus)
@@ -291,9 +291,9 @@ function BoardCard({
           </div>
         )}
       </div>
-      <p className={`text-sm font-medium line-clamp-2 ${isCompleted ? 'line-through text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}>{item.title}</p>
+      <p className={`text-sm font-medium line-clamp-2 ${isCompleted ? 'line-through text-[var(--foreground-muted)]' : 'text-[var(--foreground)]'}`}>{item.title}</p>
       {item.description && (
-        <p className={`text-xs line-clamp-1 mt-0.5 ${isCompleted ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'}`}>{item.description}</p>
+        <p className={`text-xs line-clamp-1 mt-0.5 ${isCompleted ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-secondary)]'}`}>{item.description}</p>
       )}
       {!isCompleted && item.sla && (
         <div className="mt-1.5">
diff --git a/web/src/components/workitems/CommentList.tsx b/web/src/components/workitems/CommentList.tsx
index 64c96ee6..7a9b27d0 100644
--- a/web/src/components/workitems/CommentList.tsx
+++ b/web/src/components/workitems/CommentList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useComments, useCreateComment, useUpdateComment, useDeleteComment } from '@/hooks/useWorkItems'
@@ -45,7 +46,7 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
   const newBody = draft ?? localBody
   // Ref keeps the latest value so async callbacks (paste-upload) never read a stale draft.
   const draftRef = useRef(newBody)
-  draftRef.current = newBody
+  useEffect(() => { draftRef.current = newBody }, [newBody])
   const setNewBody = useCallback((value: string | ((prev: string) => string)) => {
     if (onDraftChange) {
       if (typeof value === 'function') {
@@ -116,7 +117,7 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
   })
 
   const editBodyRef = useRef(editBody)
-  editBodyRef.current = editBody
+  useEffect(() => { editBodyRef.current = editBody }, [editBody])
   const editPaste = usePasteUpload({
     projectKey,
     itemNumber,
@@ -155,10 +156,10 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
   return (
     <div className="space-y-4">
       {!readOnly && (
-        <div ref={addCommentRef} className="space-y-2 pb-3 border-b border-gray-100 dark:border-gray-700">
+        <div ref={addCommentRef} className="space-y-2 pb-3 border-b border-[var(--border)]">
           <textarea
             ref={newCommentRef}
-            className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm"
+            className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm"
             rows={3}
             placeholder={t('comments.placeholder')}
             value={newBody}
@@ -196,12 +197,12 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
               {createMutation.isPending ? t('comments.adding') : t('comments.add')}
             </Button>
             {showVisibilityToggle && (
-              <label className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none">
+              <label className="flex items-center gap-1.5 text-xs text-[var(--foreground-secondary)] cursor-pointer select-none">
                 <input
                   type="checkbox"
                   checked={commentVisibility === 'public'}
                   onChange={(e) => setCommentVisibility(e.target.checked ? 'public' : 'internal')}
-                  className="h-3.5 w-3.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800"
+                  className="h-3.5 w-3.5 rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] dark:border-[var(--border)] bg-[var(--surface)]"
                 />
                 {t('comments.visibleToCustomer')}
               </label>
@@ -214,14 +215,14 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
         <div
           key={c.id}
           ref={c.id === highlightedCommentId ? highlightRef : undefined}
-          className={`group/comment border-b border-gray-100 dark:border-gray-700 pb-3 rounded-md transition-colors duration-700 ${
-            c.id === highlightedCommentId ? 'bg-indigo-50 dark:bg-indigo-900/30 ring-1 ring-indigo-300 dark:ring-indigo-600 px-2 py-2 -mx-2' : ''
+          className={`group/comment border-b border-[var(--border)] pb-3 rounded-md transition-colors duration-200 ${
+            c.id === highlightedCommentId ? 'bg-[var(--primary-muted)] ring-1 ring-indigo-300 dark:ring-indigo-600 px-2 py-2 -mx-2' : ''
           }`}
         >
           {!addCommentVisible && (
             <div className="flex justify-end mb-1">
               <button
-                className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 flex items-center gap-1"
+                className="text-xs text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] flex items-center gap-1"
                 onClick={() => addCommentRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })}
               >
                 &uarr; {t('common.top')}
@@ -232,7 +233,7 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
             <div className="space-y-2">
               <textarea
                 ref={editCommentRef}
-                className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm"
+                className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm"
                 rows={3}
                 value={editBody}
                 onChange={(e) => setEditBody(e.target.value)}
@@ -271,12 +272,12 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
                 </Button>
                 <Button size="sm" variant="ghost" onClick={() => setEditingId(null)}>{t('common.cancel')}</Button>
                 {showVisibilityToggle && (
-                  <label className="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 cursor-pointer select-none">
+                  <label className="flex items-center gap-1.5 text-xs text-[var(--foreground-secondary)] cursor-pointer select-none">
                     <input
                       type="checkbox"
                       checked={editVisibility === 'public'}
                       onChange={(e) => setEditVisibility(e.target.checked ? 'public' : 'internal')}
-                      className="h-3.5 w-3.5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800"
+                      className="h-3.5 w-3.5 rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] dark:border-[var(--border)] bg-[var(--surface)]"
                     />
                     {t('comments.visibleToCustomer')}
                   </label>
@@ -286,8 +287,8 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
           ) : (
             <>
               {c.anchor && (
-                <div className="mb-2 ml-8 rounded-md border-l-4 border-indigo-300 dark:border-indigo-600 bg-indigo-50/40 dark:bg-indigo-900/20 px-3 py-2">
-                  <div className="flex flex-wrap items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-1">
+                <div className="mb-2 ml-8 rounded-md border-l-4 border-[var(--primary-border)]  bg-[var(--primary-muted)]/40  px-3 py-2">
+                  <div className="flex flex-wrap items-center gap-2 text-xs text-[var(--foreground-secondary)] mb-1">
                     <span>{t('inlineComments.anchorLabel')}</span>
                     {c.anchor.status === 'outdated' && (
                       <span data-testid="inline-comment-outdated-badge" className="inline-flex items-center px-1.5 py-0.5 rounded bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300 text-[10px] uppercase tracking-wide">
@@ -296,14 +297,14 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
                     )}
                     <button
                       type="button"
-                      className="ml-auto text-indigo-600 dark:text-indigo-400 hover:underline text-xs"
+                      className="ml-auto text-[var(--primary)] hover:underline text-xs"
                       data-testid="inline-comment-view"
                       onClick={() => onViewInline?.(c.parent_comment_id ?? c.id)}
                     >
                       {t('inlineComments.view')}
                     </button>
                   </div>
-                  <pre className="text-xs text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-words bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded p-2 overflow-x-auto">
+                  <pre className="text-xs text-[var(--foreground)] whitespace-pre-wrap break-words bg-[var(--surface)] border border-[var(--border)] rounded p-2 overflow-x-auto">
                     {c.anchor.snippet}
                   </pre>
                 </div>
@@ -311,17 +312,17 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
               <div className="flex items-center justify-between gap-2 mb-1">
                 <div className="flex items-center gap-2 min-w-0">
                   <Avatar name={authorName(c.author_id)} avatarUrl={authorAvatarUrl(c.author_id)} size="xs" />
-                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300 shrink-0">{authorName(c.author_id)}</span>
+                  <span className="text-sm font-medium text-[var(--foreground)] shrink-0">{authorName(c.author_id)}</span>
                   <ScrollableDate date={c.created_at} />
-                  {c.edit_count > 0 && <span className="text-xs text-gray-400 dark:text-gray-500 italic shrink-0">{t('comments.editCount', { count: c.edit_count })}</span>}
+                  {c.edit_count > 0 && <span className="text-xs text-[var(--foreground-muted)] italic shrink-0">{t('comments.editCount', { count: c.edit_count })}</span>}
                   {c.visibility !== 'internal' && (() => {
                     // On portal items, public comments are shown with the portal badge
                     const displayAs = (itemVisibility === 'portal' && c.visibility === 'public') ? 'portal' : c.visibility
                     return (
                       <span className={`inline-flex items-center gap-1 text-xs shrink-0 ${
                         displayAs === 'portal' ? 'text-yellow-500 dark:text-yellow-400' :
-                        displayAs === 'public' ? 'text-red-500 dark:text-red-400' :
-                        'text-indigo-500'
+                        displayAs === 'public' ? 'text-[var(--danger)]' :
+                        'text-[var(--primary)]'
                       }`}>
                         {displayAs === 'portal' && <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><path strokeLinecap="round" strokeLinejoin="round" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z" /></svg>}
                         {displayAs === 'public' && <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><path d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z" /></svg>}
@@ -333,26 +334,26 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
                 <div className="flex items-center shrink-0">
                   {user && c.author_id === user.id && (
                     <button
-                      className="group/edit relative inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-700 transition-colors sm:opacity-0 sm:group-hover/comment:opacity-100"
+                      className="group/edit relative inline-flex items-center justify-center w-7 h-7 rounded-md text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:bg-[var(--surface-hover)] transition-colors sm:opacity-0 sm:group-hover/comment:opacity-100"
                       onClick={() => { setEditingId(c.id); setEditBody(c.body); setEditVisibility(c.visibility === 'public' ? 'public' : 'internal') }}
                     >
                       <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
                         <path strokeLinecap="round" strokeLinejoin="round" d="M11.5 2.5a1.5 1.5 0 012.121 2.121L6.5 11.743l-2.5.757.757-2.5L11.5 2.5z" />
                       </svg>
-                      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/edit:opacity-100 transition-opacity">
+                      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-[var(--background)] bg-[var(--surface-secondary)] rounded whitespace-nowrap opacity-0 group-hover/edit:opacity-100 transition-opacity">
                         {t('common.edit')}
                       </span>
                     </button>
                   )}
                   {user && c.author_id === user.id && (
                     <button
-                      className="group/del relative inline-flex items-center justify-center w-7 h-7 rounded-md text-red-400 hover:text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900/30 transition-colors sm:opacity-0 sm:group-hover/comment:opacity-100"
+                      className="group/del relative inline-flex items-center justify-center w-7 h-7 rounded-md text-red-400 hover:text-[var(--danger)] hover:bg-red-50 text-[var(--danger)] dark:hover:text-red-300 dark:hover:bg-red-900/30 transition-colors sm:opacity-0 sm:group-hover/comment:opacity-100"
                       onClick={() => setDeletingId(c.id)}
                     >
                       <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
                         <path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h10M6.5 4.5V3a1 1 0 011-1h1a1 1 0 011 1v1.5M5 4.5v8a1 1 0 001 1h4a1 1 0 001-1v-8" />
                       </svg>
-                      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/del:opacity-100 transition-opacity">
+                      <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-[var(--background)] bg-[var(--surface-secondary)] rounded whitespace-nowrap opacity-0 group-hover/del:opacity-100 transition-opacity">
                         {t('common.delete')}
                       </span>
                     </button>
@@ -360,7 +361,7 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
                 </div>
               </div>
               <div
-                className={`prose prose-sm dark:prose-invert max-w-none text-gray-900 dark:text-gray-100 pl-8 rounded break-words ${user && c.author_id === user.id ? 'border border-transparent hover:border-gray-300 dark:hover:border-gray-600' : ''}`}
+                className={`prose prose-sm dark:prose-invert max-w-none text-[var(--foreground)] pl-8 rounded break-words ${user && c.author_id === user.id ? 'border border-transparent hover:border-[var(--border)] dark:hover:border-[var(--border)]' : ''}`}
                 onDoubleClick={() => {
                   if (user && c.author_id === user.id) {
                     setEditingId(c.id)
@@ -390,7 +391,7 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
       />
 
       <Modal open={!!confirmAction} onClose={() => setConfirmAction(null)} title={t('comments.visibilityConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           {t('comments.visibilityConfirmBody')}
         </p>
         <div className="flex justify-end gap-3">
@@ -403,7 +404,7 @@ export function CommentList({ projectKey, itemNumber, sortOrder = 'desc', highli
 
 
       <Modal open={!!deletingId} onClose={() => setDeletingId(null)} title={t('comments.deleteConfirm')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           {t('comments.deleteBody')}
         </p>
         <div className="flex justify-end gap-3">
diff --git a/web/src/components/workitems/CreateWorkItemModal.tsx b/web/src/components/workitems/CreateWorkItemModal.tsx
index b7e3b069..31c61782 100644
--- a/web/src/components/workitems/CreateWorkItemModal.tsx
+++ b/web/src/components/workitems/CreateWorkItemModal.tsx
@@ -153,7 +153,7 @@ export function CreateWorkItemModal({ open, onClose, lockedProjectKey, onCreated
   const headerRight = project && (
     <span className="flex min-w-0 shrink items-center gap-2.5">
       <ProjectKeyBadge size="nav">{project.key}</ProjectKeyBadge>
-      <span className="truncate text-base font-semibold text-gray-900 dark:text-gray-100">{project.name}</span>
+      <span className="truncate text-base font-semibold text-[var(--foreground)]">{project.name}</span>
     </span>
   )
 
@@ -205,7 +205,7 @@ export function CreateWorkItemModal({ open, onClose, lockedProjectKey, onCreated
       />
 
       <Modal open={confirmDiscard} onClose={() => setConfirmDiscard(false)} title={t('workitems.form.discardTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{t('workitems.form.discardBody')}</p>
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">{t('workitems.form.discardBody')}</p>
         <div className="flex justify-end gap-3">
           <Button variant="secondary" onClick={() => setConfirmDiscard(false)}>{t('workitems.form.discardKeepEditing')}</Button>
           <Button variant="danger" autoFocus onClick={handleClose}>{t('workitems.form.discardConfirm')}</Button>
diff --git a/web/src/components/workitems/DescriptionWithInlineComments.tsx b/web/src/components/workitems/DescriptionWithInlineComments.tsx
index 483c813b..e54ae5d2 100644
--- a/web/src/components/workitems/DescriptionWithInlineComments.tsx
+++ b/web/src/components/workitems/DescriptionWithInlineComments.tsx
@@ -285,7 +285,7 @@ export function DescriptionWithInlineComments({
             type="button"
             data-testid="inline-comment-gutter-icon"
             title={t('inlineComments.gutterTooltip', { count: m.count })}
-            className="absolute left-0 inline-flex items-center justify-center w-6 h-6 rounded-md text-indigo-500 hover:text-indigo-700 hover:bg-indigo-100 dark:hover:bg-indigo-900/40 transition-colors"
+            className="absolute left-0 inline-flex items-center justify-center w-6 h-6 rounded-md text-[var(--primary)] hover:text-[var(--primary)] hover:bg-[var(--primary-muted)]  transition-colors"
             style={{ top: m.top }}
             onClick={() => onOpenThread?.(openThreadRootId === m.rootId ? null : m.rootId)}
           >
@@ -295,7 +295,7 @@ export function DescriptionWithInlineComments({
             {m.count > 1 && (
               <span
                 data-testid="inline-comment-gutter-count"
-                className="absolute -top-1 -right-1 inline-flex items-center justify-center min-w-[14px] h-[14px] px-0.5 rounded-full bg-indigo-600 text-white text-[9px] font-semibold leading-none"
+                className="absolute -top-1 -right-1 inline-flex items-center justify-center min-w-[14px] h-[14px] px-0.5 rounded-full bg-[var(--primary)] text-white text-[9px] font-semibold leading-none"
               >
                 {m.count}
               </span>
@@ -307,7 +307,7 @@ export function DescriptionWithInlineComments({
       <div
         ref={proseRef}
         data-testid="description-body"
-        className={`prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 break-words ${hasInlineComments ? 'pl-9' : ''}`}
+        className={`prose prose-sm dark:prose-invert max-w-none text-[var(--foreground)] break-words ${hasInlineComments ? 'pl-9' : ''}`}
       >
         <Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeSourcePos]} components={baseComponents}>
           {description}
@@ -325,7 +325,7 @@ export function DescriptionWithInlineComments({
             setComposer(pending)
             setPending(null)
           }}
-          className="absolute z-20 inline-flex items-center gap-1 px-2 py-1 rounded-md bg-indigo-600 hover:bg-indigo-700 text-white text-xs shadow-lg"
+          className="absolute z-20 inline-flex items-center gap-1 px-2 py-1 rounded-md bg-[var(--primary)] hover:bg-[var(--primary-hover)] text-white text-xs shadow-lg"
           style={{ top: pending.pos.top, left: pending.pos.left }}
         >
           <svg className="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor">
diff --git a/web/src/components/workitems/DetailSidebar.tsx b/web/src/components/workitems/DetailSidebar.tsx
index 213c283f..e676b1c6 100644
--- a/web/src/components/workitems/DetailSidebar.tsx
+++ b/web/src/components/workitems/DetailSidebar.tsx
@@ -128,11 +128,11 @@ export function DetailSidebar({ item, projectKey, itemNumber, statuses, allowedT
   return (
     <div className="space-y-4">
       {updateError && (
-        <p className="text-xs text-red-600 dark:text-red-400">{t('workitems.detail.updateError')}</p>
+        <p className="text-xs text-[var(--danger)]">{t('workitems.detail.updateError')}</p>
       )}
 
-      <div className="space-y-2 pb-4 border-b border-gray-100 dark:border-gray-700">
-        <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+      <div className="space-y-2 pb-4 border-b border-[var(--border)]">
+        <div className="flex items-center gap-1.5 text-sm text-[var(--foreground-secondary)]">
           <Tooltip content={t('workitems.detail.reporter')}>
             <Megaphone className="h-4 w-4 shrink-0" />
           </Tooltip>
@@ -143,20 +143,20 @@ export function DetailSidebar({ item, projectKey, itemNumber, statuses, allowedT
             </Tooltip>
           )}
         </div>
-        <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+        <div className="flex items-center gap-1.5 text-sm text-[var(--foreground-secondary)]">
           <Tooltip content={t('workitems.detail.created')}>
             <CalendarPlus className="h-4 w-4 shrink-0" />
           </Tooltip>
           <span>{formatRelativeTime(item.created_at)}</span>
         </div>
-        <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+        <div className="flex items-center gap-1.5 text-sm text-[var(--foreground-secondary)]">
           <Tooltip content={t('workitems.detail.updated')}>
             <History className="h-4 w-4 shrink-0" />
           </Tooltip>
           <span>{formatRelativeTime(item.updated_at)}</span>
         </div>
         {item.resolved_at && (
-          <div className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400">
+          <div className="flex items-center gap-1.5 text-sm text-[var(--foreground-secondary)]">
             <Tooltip content={t('workitems.detail.resolved')}>
               <CheckCircle className="h-4 w-4 shrink-0" />
             </Tooltip>
@@ -165,7 +165,7 @@ export function DetailSidebar({ item, projectKey, itemNumber, statuses, allowedT
         )}
       </div>
 
-      <div className="space-y-2 pb-4 border-b border-gray-100 dark:border-gray-700">
+      <div className="space-y-2 pb-4 border-b border-[var(--border)]">
         <Field label={t('timeTracking.estimate')}>
           <Input
             type="text"
@@ -200,10 +200,10 @@ export function DetailSidebar({ item, projectKey, itemNumber, statuses, allowedT
             }}
           />
         </Field>
-        <div className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
+        <div className="text-xs text-[var(--foreground-secondary)] space-y-1">
           <div className="flex justify-between">
             <span>{t('timeTracking.logged')}</span>
-            <span className="font-medium text-gray-700 dark:text-gray-300">
+            <span className="font-medium text-[var(--foreground)]">
               {formatDuration(timeData?.total_logged_seconds ?? 0)}
             </span>
           </div>
@@ -212,9 +212,9 @@ export function DetailSidebar({ item, projectKey, itemNumber, statuses, allowedT
             const pct = Math.min((logged / item.estimated_seconds) * 100, 100)
             const over = logged > item.estimated_seconds
             return (
-              <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
+              <div className="w-full bg-[var(--surface-tertiary)] rounded-full h-1.5">
                 <div
-                  className={`h-1.5 rounded-full transition-all ${over ? 'bg-red-500' : 'bg-indigo-500'}`}
+                  className={`h-1.5 rounded-full transition-all ${over ? 'bg-red-500' : 'bg-[var(--primary-muted)]'}`}
                   style={{ width: `${pct}%` }}
                 />
               </div>
@@ -244,7 +244,7 @@ export function DetailSidebar({ item, projectKey, itemNumber, statuses, allowedT
           ))}
         </Select>
         {statusWarning && (
-          <p className="text-xs text-red-500 mt-1">{t('workitems.detail.statusIncompatible')}</p>
+          <p className="text-xs text-[var(--danger)] mt-1">{t('workitems.detail.statusIncompatible')}</p>
         )}
       </Field>
 
@@ -335,8 +335,8 @@ export function DetailSidebar({ item, projectKey, itemNumber, statuses, allowedT
 
       <div>
         <div className="flex items-center gap-1 mb-1">
-          <label className="block text-xs font-medium text-gray-500 dark:text-gray-400">{t('workitems.form.visibility')}</label>
-          <button type="button" onClick={() => setShowVisibilityInfo(true)} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-500 dark:hover:text-gray-300">
+          <label className="block text-xs font-medium text-[var(--foreground-secondary)]">{t('workitems.form.visibility')}</label>
+          <button type="button" onClick={() => setShowVisibilityInfo(true)} className="text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]">
             <Info className="h-3.5 w-3.5" />
           </button>
         </div>
@@ -374,26 +374,26 @@ export function DetailSidebar({ item, projectKey, itemNumber, statuses, allowedT
       </Field>
 
       {!readOnly && onDelete && (
-        <div className="border-t border-gray-100 dark:border-gray-700 pt-4">
+        <div className="border-t border-[var(--border)] pt-4">
           <Button variant="danger" size="sm" onClick={onDelete}>{t('workitems.detail.deleteItem')}</Button>
         </div>
       )}
 
       <Modal open={showVisibilityInfo} onClose={() => setShowVisibilityInfo(false)} title={t('workitems.form.visibility')}>
-        <ul className="space-y-3 text-sm text-gray-700 dark:text-gray-300">
+        <ul className="space-y-3 text-sm text-[var(--foreground)]">
           <li>
-            <span className="inline-flex items-center gap-1 font-medium text-gray-500 dark:text-gray-400"><Lock className="h-3.5 w-3.5" />{t('workitems.visibilities.internal')}</span>
-            <span className="text-gray-400 dark:text-gray-500"> — </span>
+            <span className="inline-flex items-center gap-1 font-medium text-[var(--foreground-secondary)]"><Lock className="h-3.5 w-3.5" />{t('workitems.visibilities.internal')}</span>
+            <span className="text-[var(--foreground-muted)]"> — </span>
             {t('workitems.visibilities.internal.description')}
           </li>
           <li>
             <span className="inline-flex items-center gap-1 font-medium text-yellow-500 dark:text-yellow-400"><Unlock className="h-3.5 w-3.5" />{t('workitems.visibilities.portal')}</span>
-            <span className="text-gray-400 dark:text-gray-500"> — </span>
+            <span className="text-[var(--foreground-muted)]"> — </span>
             {t('workitems.visibilities.portal.description')}
           </li>
           <li>
-            <span className="inline-flex items-center gap-1 font-medium text-red-500 dark:text-red-400"><Globe className="h-3.5 w-3.5" />{t('workitems.visibilities.public')}</span>
-            <span className="text-gray-400 dark:text-gray-500"> — </span>
+            <span className="inline-flex items-center gap-1 font-medium text-[var(--danger)]"><Globe className="h-3.5 w-3.5" />{t('workitems.visibilities.public')}</span>
+            <span className="text-[var(--foreground-muted)]"> — </span>
             {t('workitems.visibilities.public.description')}
           </li>
         </ul>
@@ -405,16 +405,16 @@ export function DetailSidebar({ item, projectKey, itemNumber, statuses, allowedT
 function Field({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div>
-      <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{label}</label>
+      <label className="block text-xs font-medium text-[var(--foreground-secondary)] mb-1">{label}</label>
       {children}
     </div>
   )
 }
 
 const visibilityConfig = {
-  internal: { icon: Lock, color: 'text-gray-500 dark:text-gray-400' },
+  internal: { icon: Lock, color: 'text-[var(--foreground-secondary)]' },
   portal: { icon: Unlock, color: 'text-yellow-500 dark:text-yellow-400' },
-  public: { icon: Globe, color: 'text-red-500 dark:text-red-400' },
+  public: { icon: Globe, color: 'text-[var(--danger)]' },
 } as const
 
 function VisibilityPicker({ value, onChange, disabled }: { value: string; onChange: (v: string) => void; disabled?: boolean }) {
@@ -440,13 +440,13 @@ function VisibilityPicker({ value, onChange, disabled }: { value: string; onChan
         type="button"
         disabled={disabled}
         onClick={() => !disabled && setOpen(!open)}
-        className={`flex items-center gap-1.5 w-full rounded-md border border-gray-300 dark:border-gray-600 px-3 py-2 text-sm shadow-sm bg-white dark:bg-gray-800 ${disabled ? 'opacity-50 cursor-not-allowed' : 'focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500'}`}
+        className={`flex items-center gap-1.5 w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm bg-[var(--surface)] ${disabled ? 'opacity-50 cursor-not-allowed' : 'focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]'}`}
       >
         <Icon className={`h-3.5 w-3.5 ${cfg.color}`} />
         <span className={cfg.color}>{t(`workitems.visibilities.${value}`)}</span>
       </button>
       {open && (
-        <div className="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg">
+        <div className="absolute z-20 mt-1 w-full bg-[var(--surface)] border border-[var(--border)] rounded-md shadow-lg">
           {VISIBILITIES.map((v) => {
             const c = visibilityConfig[v]
             const VIcon = c.icon
@@ -454,7 +454,7 @@ function VisibilityPicker({ value, onChange, disabled }: { value: string; onChan
               <button
                 key={v}
                 type="button"
-                className={`flex items-center gap-1.5 w-full px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 ${v === value ? 'bg-indigo-50 dark:bg-indigo-900/30' : ''}`}
+                className={`flex items-center gap-1.5 w-full px-3 py-2 text-sm hover:bg-[var(--surface-hover)] ${v === value ? 'bg-[var(--primary-muted)]' : ''}`}
                 onClick={() => { onChange(v); setOpen(false) }}
               >
                 <VIcon className={`h-3.5 w-3.5 ${c.color}`} />
diff --git a/web/src/components/workitems/DiffPreviewModal.tsx b/web/src/components/workitems/DiffPreviewModal.tsx
index 33282d75..e87026c6 100644
--- a/web/src/components/workitems/DiffPreviewModal.tsx
+++ b/web/src/components/workitems/DiffPreviewModal.tsx
@@ -27,10 +27,10 @@ export function DiffPreviewModal({ target, onClose }: DiffPreviewModalProps) {
     <Modal open={!!target} onClose={onClose} size="full">
       <div className="flex flex-col h-full">
         {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 shrink-0">
-          <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate min-w-0">{title}</span>
+        <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)] shrink-0">
+          <span className="text-sm font-medium text-[var(--foreground)] truncate min-w-0">{title}</span>
           <button
-            className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+            className="p-1.5 text-[var(--foreground-muted)] hover:text-[var(--foreground)] rounded hover:bg-[var(--surface-hover)]"
             onClick={onClose}
           >
             <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
@@ -56,7 +56,7 @@ function FieldDiffContent({ oldValue, newValue, diffLines }: { oldValue?: string
   if (diffLines) {
     const groups = pairDiffLines(diffLines)
     return (
-      <div className="max-w-4xl mx-auto rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-sm font-mono overflow-hidden">
+      <div className="max-w-4xl mx-auto rounded-md border border-[var(--border)] bg-[var(--surface-secondary)] text-sm font-mono overflow-hidden">
         {groups.map((group, gi) => {
           if (group.length === 2) {
             const { oldSpans, newSpans } = computeWordDiff(group[0].text, group[1].text)
@@ -75,20 +75,20 @@ function FieldDiffContent({ oldValue, newValue, diffLines }: { oldValue?: string
 
   // Fallback for single-line field changes (no diffLines provided)
   return (
-    <div className="max-w-4xl mx-auto rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-sm font-mono overflow-hidden">
+    <div className="max-w-4xl mx-auto rounded-md border border-[var(--border)] bg-[var(--surface-secondary)] text-sm font-mono overflow-hidden">
       {oldValue && (
         <>
-          <div className="px-4 py-1.5 bg-gray-100 dark:bg-gray-700 text-xs font-sans font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-600">
+          <div className="px-4 py-1.5 bg-[var(--surface-secondary)] text-xs font-sans font-medium text-[var(--foreground-secondary)] border-b border-[var(--border)]">
             {t('activity.diff.removed')}
           </div>
-          <div className="px-4 py-3 bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300 whitespace-pre-wrap break-words border-b border-gray-200 dark:border-gray-700">
+          <div className="px-4 py-3 bg-red-50 dark:bg-red-900/30 text-red-800 text-[var(--danger)] whitespace-pre-wrap break-words border-b border-[var(--border)]">
             {oldValue}
           </div>
         </>
       )}
       {newValue && (
         <>
-          <div className="px-4 py-1.5 bg-gray-100 dark:bg-gray-700 text-xs font-sans font-medium text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-600">
+          <div className="px-4 py-1.5 bg-[var(--surface-secondary)] text-xs font-sans font-medium text-[var(--foreground-secondary)] border-b border-[var(--border)]">
             {t('activity.diff.added')}
           </div>
           <div className="px-4 py-3 bg-green-50 dark:bg-green-900/30 text-green-800 dark:text-green-300 whitespace-pre-wrap break-words">
@@ -103,7 +103,7 @@ function FieldDiffContent({ oldValue, newValue, diffLines }: { oldValue?: string
 function CommentDiffContent({ lines }: { lines: DiffLine[] }) {
   const groups = pairDiffLines(lines)
   return (
-    <div className="max-w-4xl mx-auto rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-sm font-mono overflow-hidden">
+    <div className="max-w-4xl mx-auto rounded-md border border-[var(--border)] bg-[var(--surface-secondary)] text-sm font-mono overflow-hidden">
       {groups.map((group, gi) => {
         if (group.length === 2) {
           const { oldSpans, newSpans } = computeWordDiff(group[0].text, group[1].text)
@@ -193,12 +193,12 @@ function ModalDiffLine({ line, wordSpans }: { line: DiffLine; wordSpans?: WordSp
   const isAdd = line.type === 'add'
 
   const bg = isRemove
-    ? 'px-4 py-0.5 bg-red-50 dark:bg-red-900/30 text-red-800 dark:text-red-300'
+    ? 'px-4 py-0.5 bg-red-50 dark:bg-red-900/30 text-red-800 text-[var(--danger)]'
     : isAdd
       ? 'px-4 py-0.5 bg-green-50 dark:bg-green-900/30 text-green-800 dark:text-green-300'
-      : 'px-4 py-0.5 text-gray-600 dark:text-gray-400'
+      : 'px-4 py-0.5 text-[var(--foreground-secondary)]'
 
-  const symbolColor = isRemove ? 'text-red-400' : isAdd ? 'text-green-400' : 'text-gray-400'
+  const symbolColor = isRemove ? 'text-red-400' : isAdd ? 'text-green-400' : 'text-[var(--foreground-muted)]'
   const symbol = isRemove ? '\u2212' : isAdd ? '+' : ' '
 
   return (
diff --git a/web/src/components/workitems/FilePreviewModal.tsx b/web/src/components/workitems/FilePreviewModal.tsx
index 6167859e..292aaa52 100644
--- a/web/src/components/workitems/FilePreviewModal.tsx
+++ b/web/src/components/workitems/FilePreviewModal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { useState, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Modal } from '@/components/ui/Modal'
@@ -135,14 +136,14 @@ export function FilePreviewModal({ target, onClose }: FilePreviewModalProps) {
     <Modal open={!!target} onClose={onClose} size="full">
      <div ref={containerRef} tabIndex={-1} className="flex flex-col h-full outline-none">
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 dark:border-gray-700 shrink-0" onMouseEnter={() => containerRef.current?.focus()}>
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)] shrink-0" onMouseEnter={() => containerRef.current?.focus()}>
         <div className="min-w-0 mr-4 truncate">
-          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+          <span className="text-sm font-medium text-[var(--foreground)]">
             {info?.filename}
           </span>
           {info?.comment && (
             <Tooltip content={info.comment}>
-              <span className="text-sm text-gray-500 dark:text-gray-400">
+              <span className="text-sm text-[var(--foreground-secondary)]">
                 {' '}&mdash; {info.comment}
               </span>
             </Tooltip>
@@ -151,7 +152,7 @@ export function FilePreviewModal({ target, onClose }: FilePreviewModalProps) {
         <div className="flex items-center gap-2">
           <Tooltip content={t('preview.download')}>
             <button
-              className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+              className="p-1.5 text-[var(--foreground-muted)] hover:text-[var(--foreground)] rounded hover:bg-[var(--surface-hover)]"
               onClick={handleDownload}
             >
               <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
@@ -161,7 +162,7 @@ export function FilePreviewModal({ target, onClose }: FilePreviewModalProps) {
           </Tooltip>
           <Tooltip content={t('preview.close')}>
             <button
-              className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+              className="p-1.5 text-[var(--foreground-muted)] hover:text-[var(--foreground)] rounded hover:bg-[var(--surface-hover)]"
               onClick={onClose}
             >
               <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
@@ -177,7 +178,7 @@ export function FilePreviewModal({ target, onClose }: FilePreviewModalProps) {
         {loading && <Spinner size="lg" />}
 
         {error && (
-          <p className="text-sm text-red-500">{t('preview.loadError')}</p>
+          <p className="text-sm text-[var(--danger)]">{t('preview.loadError')}</p>
         )}
 
         {!loading && !error && info?.previewType === 'image' && blobUrl && (
@@ -203,7 +204,7 @@ export function FilePreviewModal({ target, onClose }: FilePreviewModalProps) {
         )}
 
         {!loading && !error && info?.previewType === 'text' && textContent !== null && (
-          <pre className="text-sm text-gray-800 dark:text-gray-200 whitespace-pre-wrap font-mono bg-gray-50 dark:bg-gray-900 rounded p-4 max-w-4xl w-full self-start">
+          <pre className="text-sm text-[var(--foreground)] whitespace-pre-wrap font-mono bg-[var(--surface-secondary)] dark:bg-[var(--background)] rounded p-4 max-w-4xl w-full self-start">
             {textContent}
           </pre>
         )}
diff --git a/web/src/components/workitems/InboxButton.tsx b/web/src/components/workitems/InboxButton.tsx
index b0af8925..d4c86f3f 100644
--- a/web/src/components/workitems/InboxButton.tsx
+++ b/web/src/components/workitems/InboxButton.tsx
@@ -46,7 +46,7 @@ export function InboxButton({ workItemId, inboxItemId, className = '' }: InboxBu
     <Tooltip content={isInInbox ? t('inbox.removeFromInbox') : t('inbox.sendToInbox')}>
       <button
         onClick={handleClick}
-        className={`${isInInbox ? 'text-indigo-500 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300' : 'text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400'} transition-colors ${className}`}
+        className={`${isInInbox ? 'text-[var(--primary)] dark:text-[var(--primary)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)]' : 'text-[var(--foreground-muted)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)]'} transition-colors ${className}`}
         aria-label={isInInbox ? t('inbox.removeFromInbox') : t('inbox.sendToInbox')}
       >
         <Inbox className="h-4 w-4" />
diff --git a/web/src/components/workitems/InlineCommentComposer.tsx b/web/src/components/workitems/InlineCommentComposer.tsx
index 295d42aa..36dbcff1 100644
--- a/web/src/components/workitems/InlineCommentComposer.tsx
+++ b/web/src/components/workitems/InlineCommentComposer.tsx
@@ -31,18 +31,18 @@ export function InlineCommentComposer({
 
   return (
     <div
-      className="w-80 max-w-[90vw] rounded-md border border-indigo-300 dark:border-indigo-600 bg-white dark:bg-gray-800 shadow-lg p-3"
+      className="w-80 max-w-[90vw] rounded-md border border-[var(--primary-border)]  bg-[var(--surface)] shadow-lg p-3"
       data-testid="inline-comment-composer"
     >
-      <div className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+      <div className="text-xs text-[var(--foreground-secondary)] mb-2">
         {t('inlineComments.composerHeader')}
       </div>
-      <blockquote className="text-xs text-gray-600 dark:text-gray-300 border-l-2 border-indigo-300 dark:border-indigo-600 pl-2 mb-2 line-clamp-3 whitespace-pre-wrap break-words">
+      <blockquote className="text-xs text-[var(--foreground-secondary)] border-l-2 border-[var(--primary-border)]  pl-2 mb-2 line-clamp-3 whitespace-pre-wrap break-words">
         {selectedText}
       </blockquote>
       <textarea
         ref={ref}
-        className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 px-3 py-2 text-sm"
+        className="block w-full rounded-md border border-[var(--border)] dark:bg-[var(--background)] text-[var(--foreground)] px-3 py-2 text-sm"
         rows={3}
         placeholder={t('inlineComments.placeholder')}
         value={body}
diff --git a/web/src/components/workitems/InlineCommentThread.tsx b/web/src/components/workitems/InlineCommentThread.tsx
index 63ea0a44..7284a7d2 100644
--- a/web/src/components/workitems/InlineCommentThread.tsx
+++ b/web/src/components/workitems/InlineCommentThread.tsx
@@ -79,11 +79,11 @@ export function InlineCommentThread({
 
   return (
     <div
-      className="rounded-md border border-indigo-300 dark:border-indigo-600 bg-white dark:bg-gray-800 shadow-lg"
+      className="rounded-md border border-[var(--primary-border)]  bg-[var(--surface)] shadow-lg"
       data-testid="inline-comment-thread"
     >
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-indigo-200 dark:border-indigo-700">
-        <span className="text-xs font-medium text-indigo-700 dark:text-indigo-300">
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-[var(--primary-border)] dark:border-[var(--primary-border)]">
+        <span className="text-xs font-medium text-[var(--primary)]">
           {t('inlineComments.threadHeader')}
         </span>
         {outdated && (
@@ -95,12 +95,12 @@ export function InlineCommentThread({
           </span>
         )}
         {total > 1 && (
-          <span className="ml-auto flex items-center gap-1 text-gray-500 dark:text-gray-400">
+          <span className="ml-auto flex items-center gap-1 text-[var(--foreground-secondary)]">
             <button
               type="button"
               aria-label={t('inlineComments.prevComment')}
               data-testid="inline-comment-prev"
-              className="inline-flex items-center justify-center w-5 h-5 rounded hover:bg-indigo-100 dark:hover:bg-indigo-900/40 hover:text-indigo-600"
+              className="inline-flex items-center justify-center w-5 h-5 rounded hover:bg-[var(--primary-muted)]  hover:text-[var(--primary)]"
               onClick={onPrev}
             >
               <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
@@ -114,7 +114,7 @@ export function InlineCommentThread({
               type="button"
               aria-label={t('inlineComments.nextComment')}
               data-testid="inline-comment-next"
-              className="inline-flex items-center justify-center w-5 h-5 rounded hover:bg-indigo-100 dark:hover:bg-indigo-900/40 hover:text-indigo-600"
+              className="inline-flex items-center justify-center w-5 h-5 rounded hover:bg-[var(--primary-muted)]  hover:text-[var(--primary)]"
               onClick={onNext}
             >
               <svg className="w-3.5 h-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
@@ -127,7 +127,7 @@ export function InlineCommentThread({
           type="button"
           aria-label={t('common.close')}
           data-testid="inline-comment-thread-close"
-          className={`${total > 1 ? '' : 'ml-auto'} text-gray-400 hover:text-gray-600 dark:hover:text-gray-300`}
+          className={`${total > 1 ? '' : 'ml-auto'} text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]`}
           onClick={onClose}
         >
           <svg className="w-4 h-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
@@ -141,12 +141,12 @@ export function InlineCommentThread({
           <div key={c.id} className="px-3 py-2" data-testid="inline-comment-thread-item">
             <div className="flex items-center gap-2 mb-1">
               <Avatar name={authorName(c.author_id)} avatarUrl={authorAvatar(c.author_id)} size="xs" />
-              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              <span className="text-sm font-medium text-[var(--foreground)]">
                 {authorName(c.author_id)}
               </span>
               <ScrollableDate date={c.created_at} />
             </div>
-            <div className="prose prose-sm dark:prose-invert max-w-none text-gray-900 dark:text-gray-100 break-words pl-7">
+            <div className="prose prose-sm dark:prose-invert max-w-none text-[var(--foreground)] break-words pl-7">
               <Markdown remarkPlugins={[remarkGfm]} components={mdComponents}>
                 {c.body}
               </Markdown>
@@ -156,10 +156,10 @@ export function InlineCommentThread({
       </div>
 
       {!readOnly && (
-        <div className="px-3 py-2 border-t border-indigo-200 dark:border-indigo-700">
+        <div className="px-3 py-2 border-t border-[var(--primary-border)] dark:border-[var(--primary-border)]">
           <textarea
             ref={replyRef}
-            className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100 px-3 py-2 text-sm"
+            className="block w-full rounded-md border border-[var(--border)] dark:bg-[var(--background)] text-[var(--foreground)] px-3 py-2 text-sm"
             rows={2}
             placeholder={t('inlineComments.replyPlaceholder')}
             value={replyBody}
diff --git a/web/src/components/workitems/RelationList.tsx b/web/src/components/workitems/RelationList.tsx
index ddf422a9..bb5fea98 100644
--- a/web/src/components/workitems/RelationList.tsx
+++ b/web/src/components/workitems/RelationList.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
@@ -64,17 +65,13 @@ export function RelationList({ projectKey, itemNumber, readOnly = false }: Relat
     }
   }
 
-  /** Check if this relation represents a child (current item is parent) */
-  function isChildRelation(r: Relation) {
-    const isSource = r.source_display_id === currentDisplayId
-    return (isSource && r.relation_type === 'parent_of') || (!isSource && r.relation_type === 'child_of')
-  }
-
   const { children, others } = useMemo(() => {
     const childList: Relation[] = []
     const otherList: Relation[] = []
     for (const r of relations ?? []) {
-      if (isChildRelation(r)) {
+      const isSource = r.source_display_id === currentDisplayId
+      const isChild = (isSource && r.relation_type === 'parent_of') || (!isSource && r.relation_type === 'child_of')
+      if (isChild) {
         childList.push(r)
       } else {
         otherList.push(r)
@@ -96,13 +93,13 @@ export function RelationList({ projectKey, itemNumber, readOnly = false }: Relat
     return (
       <div key={r.id} className="group/relation flex items-center justify-between text-sm py-1.5">
         <div className="flex items-center gap-2 min-w-0">
-          <span className={`shrink-0 ${done ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'}`}>{linked.label}</span>
+          <span className={`shrink-0 ${done ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-secondary)]'}`}>{linked.label}</span>
           <Link
             to={displayIdToPath(linked.displayId)}
             className={`inline-flex items-center rounded-md px-2 py-0.5 text-xs font-bold transition-colors shrink-0 ${
               done
-                ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500'
-                : 'bg-indigo-100 dark:bg-indigo-900/40 text-indigo-700 dark:text-indigo-300 hover:bg-indigo-200 dark:hover:bg-indigo-900/60'
+                ? 'bg-[var(--surface-secondary)] text-[var(--foreground-muted)]'
+                : 'bg-[var(--primary-muted)] text-[var(--primary)] hover:bg-[var(--primary-muted)]/60'
             }`}
           >
             {linked.displayId}
@@ -114,8 +111,8 @@ export function RelationList({ projectKey, itemNumber, readOnly = false }: Relat
             to={displayIdToPath(linked.displayId)}
             className={`truncate transition-colors ${
               done
-                ? 'line-through text-gray-400 dark:text-gray-500'
-                : 'text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400'
+                ? 'line-through text-[var(--foreground-muted)]'
+                : 'text-[var(--foreground)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)]'
             }`}
           >
             {linked.title}
@@ -123,14 +120,14 @@ export function RelationList({ projectKey, itemNumber, readOnly = false }: Relat
         </div>
         {!readOnly && (
           <button
-            className="group/del relative inline-flex items-center justify-center w-7 h-7 rounded-md text-red-400 hover:text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900/30 transition-colors sm:opacity-0 sm:group-hover/relation:opacity-100 shrink-0 ml-2"
+            className="group/del relative inline-flex items-center justify-center w-7 h-7 rounded-md text-red-400 hover:text-[var(--danger)] hover:bg-red-50 text-[var(--danger)] dark:hover:text-red-300 dark:hover:bg-red-900/30 transition-colors sm:opacity-0 sm:group-hover/relation:opacity-100 shrink-0 ml-2"
             onClick={() => deleteMutation.mutate(r.id)}
             aria-label={t('common.remove')}
           >
             <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
               <path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h10M6.5 4.5V3a1 1 0 011-1h1a1 1 0 011 1v1.5M5 4.5v8a1 1 0 001 1h4a1 1 0 001-1v-8" />
             </svg>
-            <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/del:opacity-100 transition-opacity">
+            <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-[var(--background)] bg-[var(--surface-secondary)] rounded whitespace-nowrap opacity-0 group-hover/del:opacity-100 transition-opacity">
               {t('common.remove')}
             </span>
           </button>
@@ -142,7 +139,7 @@ export function RelationList({ projectKey, itemNumber, readOnly = false }: Relat
   return (
     <div className="space-y-4">
       {!readOnly && (
-        <div className="flex flex-col sm:flex-row sm:items-center gap-2 pb-3 border-b border-gray-100 dark:border-gray-700">
+        <div className="flex flex-col sm:flex-row sm:items-center gap-2 pb-3 border-b border-[var(--border)]">
           <div className="sm:flex-1">
             <WorkItemPicker
               projectKey={projectKey}
@@ -179,17 +176,17 @@ export function RelationList({ projectKey, itemNumber, readOnly = false }: Relat
       {children.length > 0 && (
         <div>
           <div className="flex items-center justify-between mb-2">
-            <h4 className="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400">
+            <h4 className="text-xs font-semibold uppercase text-[var(--foreground-secondary)]">
               {t('relations.children')}
             </h4>
-            <span className="text-xs text-gray-400 dark:text-gray-500">
+            <span className="text-xs text-[var(--foreground-muted)]">
               {t('relations.childrenProgress', { completed: childrenCompleted, total: children.length })}
             </span>
           </div>
           <div className="mb-2">
-            <div className="h-1.5 w-full rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
+            <div className="h-1.5 w-full rounded-full bg-[var(--surface-tertiary)] overflow-hidden">
               <div
-                className="h-full rounded-full bg-green-500 dark:bg-green-400 transition-all duration-300"
+                className="h-full rounded-full bg-green-500 dark:bg-green-400 transition-all duration-200"
                 style={{ width: `${children.length > 0 ? (childrenCompleted / children.length) * 100 : 0}%` }}
               />
             </div>
@@ -204,7 +201,7 @@ export function RelationList({ projectKey, itemNumber, readOnly = false }: Relat
       {others.length > 0 && (
         <div>
           {children.length > 0 && (
-            <h4 className="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400 mb-2">
+            <h4 className="text-xs font-semibold uppercase text-[var(--foreground-secondary)] mb-2">
               {t('relations.otherRelations')}
             </h4>
           )}
diff --git a/web/src/components/workitems/SaveSearchModal.tsx b/web/src/components/workitems/SaveSearchModal.tsx
index 93329837..b9774a6d 100644
--- a/web/src/components/workitems/SaveSearchModal.tsx
+++ b/web/src/components/workitems/SaveSearchModal.tsx
@@ -61,10 +61,10 @@ export function SaveSearchModal({
             </Tooltip>
             <div className="relative">
               <div className="absolute inset-0 flex items-center">
-                <div className="w-full border-t border-gray-200 dark:border-gray-700" />
+                <div className="w-full border-t border-[var(--border)]" />
               </div>
               <div className="relative flex justify-center text-xs">
-                <span className="bg-white dark:bg-gray-800 px-2 text-gray-500 dark:text-gray-400 uppercase">
+                <span className="bg-[var(--surface)] px-2 text-[var(--foreground-secondary)] uppercase">
                   {t('common.or')}
                 </span>
               </div>
@@ -74,12 +74,12 @@ export function SaveSearchModal({
 
         <div className="space-y-3">
           {showUpdateOption && (
-            <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            <p className="text-sm font-medium text-[var(--foreground)]">
               {t('savedSearches.saveAsNew')}
             </p>
           )}
           <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
               {t('savedSearches.nameLabel')}
             </label>
             <Input
@@ -97,9 +97,9 @@ export function SaveSearchModal({
                 type="checkbox"
                 checked={shared}
                 onChange={(e) => setShared(e.target.checked)}
-                className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700"
+                className="rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] dark:border-[var(--border)] bg-[var(--surface-secondary)]"
               />
-              <span className="text-sm text-gray-700 dark:text-gray-300">
+              <span className="text-sm text-[var(--foreground)]">
                 {t('savedSearches.sharedToggle')}
               </span>
             </label>
diff --git a/web/src/components/workitems/SavedSearchSelector.tsx b/web/src/components/workitems/SavedSearchSelector.tsx
index d3a9770c..6fa11a66 100644
--- a/web/src/components/workitems/SavedSearchSelector.tsx
+++ b/web/src/components/workitems/SavedSearchSelector.tsx
@@ -105,15 +105,15 @@ export function SavedSearchSelector({
 
   // Shared search filter + search input
   const searchInput = (
-    <div className={variant === 'mobile' ? 'px-0 pb-2' : 'p-2 border-b border-gray-200 dark:border-gray-700'}>
+    <div className={variant === 'mobile' ? 'px-0 pb-2' : 'p-2 border-b border-[var(--border)]'}>
       <div className="relative">
-        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-400" />
+        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[var(--foreground-muted)]" />
         <input
           type="text"
           value={filterText}
           onChange={(e) => setFilterText(e.target.value)}
           placeholder={t('savedSearches.searchPlaceholder')}
-          className="w-full pl-8 pr-3 py-1.5 text-sm rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+          className="w-full pl-8 pr-3 py-1.5 text-sm rounded border border-[var(--border)] bg-[var(--surface-secondary)] text-[var(--foreground)] focus:outline-none focus:ring-1 focus:ring-[var(--focus-ring)]"
           autoFocus={variant === 'desktop'}
         />
       </div>
@@ -124,14 +124,14 @@ export function SavedSearchSelector({
     return (
       <div className={scrollable ? 'max-h-64 overflow-y-auto py-1' : 'py-1'}>
         {filteredUser.length === 0 && filteredShared.length === 0 && (
-          <p className="px-3 py-4 text-sm text-gray-500 dark:text-gray-400 text-center">
+          <p className="px-3 py-4 text-sm text-[var(--foreground-secondary)] text-center">
             {t('savedSearches.empty')}
           </p>
         )}
 
         {filteredUser.length > 0 && (
           <>
-            <p className="px-3 py-1 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            <p className="px-3 py-1 text-xs font-semibold text-[var(--foreground-secondary)] uppercase tracking-wider">
               {t('savedSearches.mySearches')}
             </p>
             {filteredUser.map((s) => (
@@ -156,8 +156,8 @@ export function SavedSearchSelector({
 
         {filteredShared.length > 0 && (
           <>
-            {filteredUser.length > 0 && <div className="my-1 border-t border-gray-200 dark:border-gray-700" />}
-            <p className="px-3 py-1 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+            {filteredUser.length > 0 && <div className="my-1 border-t border-[var(--border)]" />}
+            <p className="px-3 py-1 text-xs font-semibold text-[var(--foreground-secondary)] uppercase tracking-wider">
               {t('savedSearches.shared')}
             </p>
             {filteredShared.map((s) => (
@@ -201,8 +201,8 @@ export function SavedSearchSelector({
           onClick={() => setMobileMode(mobileMode === 'edit' ? 'browse' : 'edit')}
           className={`p-2.5 rounded-md border transition-colors ${
             mobileMode === 'edit'
-              ? 'bg-indigo-50 text-indigo-700 border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700'
-              : 'border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
+              ? 'bg-[var(--primary-muted)] text-[var(--primary)] border-[var(--primary-border)]  dark:text-[var(--primary)] dark:border-[var(--primary-border)]'
+              : 'border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)]'
           }`}
           aria-label={t('savedSearches.editMode')}
         >
@@ -212,8 +212,8 @@ export function SavedSearchSelector({
           onClick={() => setMobileMode(mobileMode === 'order' ? 'browse' : 'order')}
           className={`p-2.5 rounded-md border transition-colors ${
             mobileMode === 'order'
-              ? 'bg-indigo-50 text-indigo-700 border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700'
-              : 'border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
+              ? 'bg-[var(--primary-muted)] text-[var(--primary)] border-[var(--primary-border)]  dark:text-[var(--primary)] dark:border-[var(--primary-border)]'
+              : 'border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)]'
           }`}
           aria-label={t('savedSearches.orderMode')}
         >
@@ -229,12 +229,12 @@ export function SavedSearchSelector({
         <>
           <button
             onClick={() => setOpen(true)}
-            className="relative shrink-0 p-2.5 rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+            className="relative shrink-0 p-2.5 rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)]"
             aria-label={t('savedSearches.placeholder')}
           >
             <FolderSearch className="h-5 w-5" />
             {activeSearch && (
-              <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-indigo-600 text-[10px] font-bold text-white">
+              <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--primary)] text-[10px] font-bold text-white">
                 1
               </span>
             )}
@@ -255,8 +255,8 @@ export function SavedSearchSelector({
             onClick={() => setOpen(!open)}
             className={`flex items-center gap-1.5 px-3 py-2 w-full text-sm font-medium rounded-md border transition-colors ${
               activeSearch
-                ? 'bg-indigo-50 text-indigo-700 border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700'
-                : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700'
+                ? 'bg-[var(--primary-muted)] text-[var(--primary)] border-[var(--primary-border)]  dark:text-[var(--primary)] dark:border-[var(--primary-border)]'
+                : 'bg-white text-[var(--foreground-secondary)] border-[var(--border)] hover:bg-[var(--surface-secondary)] text-[var(--foreground-muted)] dark:border-[var(--border)] hover:bg-[var(--surface-hover)]'
             }`}
           >
             <span className="truncate">{buttonLabel}</span>
@@ -267,7 +267,7 @@ export function SavedSearchSelector({
           </button>
 
           {open && (
-            <div className="absolute left-0 top-full mt-1 w-[22rem] z-50 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800">
+            <div className="absolute left-0 top-full mt-1 w-[22rem] z-50 rounded-md border border-[var(--border)] bg-white shadow-lg dark:border-[var(--border)] bg-[var(--surface)]">
               {desktopContent}
             </div>
           )}
@@ -294,7 +294,7 @@ export function SavedSearchSelector({
       {/* Delete confirmation modal */}
       <Modal open={!!deleting} onClose={() => setDeleting(null)} title={t('savedSearches.deleteConfirmTitle')}>
         <div className="space-y-4">
-          <p className="text-sm text-gray-700 dark:text-gray-300">
+          <p className="text-sm text-[var(--foreground)]">
             <Trans i18nKey="savedSearches.deleteConfirmBody" values={{ name: deleting?.name }} components={{ strong: <strong /> }} />
           </p>
           <div className="flex justify-end gap-2">
@@ -338,14 +338,14 @@ function SearchEntry({
     <div
       className={`group flex items-center gap-1 px-3 py-1.5 cursor-pointer overflow-hidden ${
         isActive
-          ? 'bg-indigo-50 dark:bg-indigo-900/20'
-          : 'hover:bg-gray-100 dark:hover:bg-gray-700'
+          ? 'bg-[var(--primary-muted)]'
+          : 'hover:bg-[var(--surface-hover)]'
       }`}
     >
       <button
         onClick={onSelect}
         className={`flex-1 min-w-0 text-left text-sm truncate ${
-          isActive ? 'text-indigo-700 dark:text-indigo-300 font-medium' : 'text-gray-700 dark:text-gray-300'
+          isActive ? 'text-[var(--primary)] font-medium' : 'text-[var(--foreground)]'
         }`}
       >
         {search.name}
@@ -357,14 +357,14 @@ function SearchEntry({
               <button
                 onClick={(e) => { e.stopPropagation(); onMoveUp() }}
                 disabled={isFirst}
-                className="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:cursor-default"
+                className="p-1 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] disabled:opacity-30 disabled:cursor-default"
               >
                 <ChevronUp className="h-[18px] w-[18px]" />
               </button>
               <button
                 onClick={(e) => { e.stopPropagation(); onMoveDown() }}
                 disabled={isLast}
-                className="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:cursor-default"
+                className="p-1 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] disabled:opacity-30 disabled:cursor-default"
               >
                 <ChevronDown className="h-[18px] w-[18px]" />
               </button>
@@ -374,13 +374,13 @@ function SearchEntry({
             <>
               <button
                 onClick={(e) => { e.stopPropagation(); onRename() }}
-                className="p-1 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                className="p-1 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
               >
                 <Pencil className="h-3 w-3" />
               </button>
               <button
                 onClick={(e) => { e.stopPropagation(); onDelete() }}
-                className="p-1 rounded text-gray-400 hover:text-red-500 dark:hover:text-red-400"
+                className="p-1 rounded text-[var(--foreground-muted)] hover:text-[var(--danger)] dark:hover:text-red-400"
               >
                 <Trash2 className="h-3 w-3" />
               </button>
diff --git a/web/src/components/workitems/StagedAttachmentsField.tsx b/web/src/components/workitems/StagedAttachmentsField.tsx
index c27504d2..800175d7 100644
--- a/web/src/components/workitems/StagedAttachmentsField.tsx
+++ b/web/src/components/workitems/StagedAttachmentsField.tsx
@@ -63,13 +63,13 @@ export function StagedAttachmentsField({ staged, onAdd, onRemove, maxUploadSize,
         onDragLeave={() => setDraggingOver(false)}
         className={`flex min-h-[2.75rem] items-center rounded-md border border-dashed px-2 py-1.5 transition-colors ${
           draggingOver
-            ? 'border-indigo-400 bg-indigo-50 dark:border-indigo-500 dark:bg-indigo-900/20'
-            : 'border-gray-300 dark:border-gray-600'
+            ? 'border-[var(--primary-border)] bg-[var(--primary-muted)] dark:border-[var(--primary)] '
+            : 'border-[var(--border)]'
         } ${disabled && !progress ? 'opacity-50' : ''}`}
       >
         {progress ? (
           <div className="w-full">
-            <div className="mb-1 flex items-baseline justify-between gap-2 text-xs text-gray-500 dark:text-gray-400">
+            <div className="mb-1 flex items-baseline justify-between gap-2 text-xs text-[var(--foreground-secondary)]">
               <span className="truncate">{t('workitems.form.attachmentsUploading', { filename: progress.filename })}</span>
               <span className="shrink-0 tabular-nums">{Math.round(progress.ratio * 100)}%</span>
             </div>
@@ -78,16 +78,16 @@ export function StagedAttachmentsField({ staged, onAdd, onRemove, maxUploadSize,
               aria-valuemin={0}
               aria-valuemax={100}
               aria-valuenow={Math.round(progress.ratio * 100)}
-              className="h-1.5 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700"
+              className="h-1.5 w-full overflow-hidden rounded-full bg-[var(--surface-tertiary)]"
             >
               <div
-                className="h-full rounded-full bg-indigo-600 transition-[width] duration-150 ease-out dark:bg-indigo-500"
+                className="h-full rounded-full bg-[var(--primary)] transition-[width] duration-150 ease-out dark:bg-[var(--primary-muted)]"
                 style={{ width: `${Math.round(progress.ratio * 100)}%` }}
               />
             </div>
           </div>
         ) : staged.length === 0 ? (
-          <p className="w-full text-center text-sm text-gray-400 dark:text-gray-500">
+          <p className="w-full text-center text-sm text-[var(--foreground-muted)]">
             <Trans
               i18nKey="workitems.form.attachmentsDropHint"
               components={{
@@ -96,7 +96,7 @@ export function StagedAttachmentsField({ staged, onAdd, onRemove, maxUploadSize,
                     type="button"
                     onClick={openPicker}
                     disabled={disabled}
-                    className="font-medium text-indigo-600 hover:underline disabled:no-underline dark:text-indigo-400"
+                    className="font-medium text-[var(--primary)] hover:underline disabled:no-underline dark:text-[var(--primary)]"
                   />
                 ),
               }}
@@ -110,19 +110,19 @@ export function StagedAttachmentsField({ staged, onAdd, onRemove, maxUploadSize,
             {staged.map((s) => (
               <span
                 key={s.id}
-                className="inline-flex shrink-0 items-center gap-2 rounded-md border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 px-2 py-1"
+                className="inline-flex shrink-0 items-center gap-2 rounded-md border border-[var(--border)] bg-[var(--surface-secondary)] px-2 py-1"
               >
-                <span className="rounded bg-gray-200 dark:bg-gray-700 px-1 text-[0.625rem] font-semibold tracking-wide text-gray-600 dark:text-gray-300">
+                <span className="rounded bg-[var(--surface-tertiary)] px-1 text-[0.625rem] font-semibold tracking-wide text-[var(--foreground-secondary)]">
                   {fileKind(s.file.name)}
                 </span>
-                <span className="max-w-[14rem] truncate text-sm text-gray-900 dark:text-gray-100">{s.file.name}</span>
-                <span className="text-xs text-gray-400 dark:text-gray-500">{formatFileSize(s.file.size)}</span>
+                <span className="max-w-[14rem] truncate text-sm text-[var(--foreground)]">{s.file.name}</span>
+                <span className="text-xs text-[var(--foreground-muted)]">{formatFileSize(s.file.size)}</span>
                 <button
                   type="button"
                   onClick={() => onRemove(s.id)}
                   disabled={disabled}
                   aria-label={t('workitems.form.attachmentsRemove', { filename: s.file.name })}
-                  className="text-gray-400 hover:text-gray-600 disabled:opacity-50 dark:hover:text-gray-300"
+                  className="text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] disabled:opacity-50 dark:hover:text-[var(--foreground-muted)]"
                 >
                   &times;
                 </button>
@@ -132,7 +132,7 @@ export function StagedAttachmentsField({ staged, onAdd, onRemove, maxUploadSize,
         )}
       </div>
 
-      {error && <p className="mt-1 truncate text-xs text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="mt-1 truncate text-xs text-[var(--danger)]">{error}</p>}
 
       <input
         ref={inputRef}
diff --git a/web/src/components/workitems/TimeEntryList.tsx b/web/src/components/workitems/TimeEntryList.tsx
index cf71f3d0..b3b33757 100644
--- a/web/src/components/workitems/TimeEntryList.tsx
+++ b/web/src/components/workitems/TimeEntryList.tsx
@@ -121,7 +121,7 @@ export function TimeEntryList({ projectKey, itemNumber, sortOrder = 'desc', read
   return (
     <div className="space-y-4">
       {!readOnly && (
-        <div className="pb-3 border-b border-gray-100 dark:border-gray-700 space-y-2">
+        <div className="pb-3 border-b border-[var(--border)] space-y-2">
           <div className="flex gap-2 items-center">
             <Input
               type="text"
@@ -189,19 +189,19 @@ export function TimeEntryList({ projectKey, itemNumber, sortOrder = 'desc', read
       )}
 
       {sorted.length === 0 && (
-        <p className="text-sm text-gray-400 dark:text-gray-500 italic">{t('timeTracking.noEntries')}</p>
+        <p className="text-sm text-[var(--foreground-muted)] italic">{t('timeTracking.noEntries')}</p>
       )}
 
       {sorted.map((entry) => (
         <div
           key={entry.id}
-          className="group/entry border-b border-gray-100 dark:border-gray-700 pb-3"
+          className="group/entry border-b border-[var(--border)] pb-3"
         >
           <div className="flex items-center justify-between gap-2 mb-1">
             <div className="flex items-center gap-2 min-w-0">
               <Avatar name={authorName(entry.user_id)} avatarUrl={authorAvatarUrl(entry.user_id)} size="xs" />
-              <span className="text-sm font-medium text-gray-700 dark:text-gray-300 shrink-0">{authorName(entry.user_id)}</span>
-              <span className="text-sm font-semibold text-indigo-600 dark:text-indigo-400 shrink-0">
+              <span className="text-sm font-medium text-[var(--foreground)] shrink-0">{authorName(entry.user_id)}</span>
+              <span className="text-sm font-semibold text-[var(--primary)] shrink-0">
                 {formatDuration(entry.duration_seconds)}
               </span>
               <ScrollableDate date={entry.started_at} />
@@ -209,24 +209,24 @@ export function TimeEntryList({ projectKey, itemNumber, sortOrder = 'desc', read
             {user && entry.user_id === user.id && !readOnly && editingId !== entry.id && (
               <div className="flex items-center shrink-0">
                 <button
-                  className="group/edit relative inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-700 transition-colors sm:opacity-0 sm:group-hover/entry:opacity-100"
+                  className="group/edit relative inline-flex items-center justify-center w-7 h-7 rounded-md text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:bg-[var(--surface-hover)] transition-colors sm:opacity-0 sm:group-hover/entry:opacity-100"
                   onClick={() => startEdit(entry)}
                 >
                   <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
                     <path strokeLinecap="round" strokeLinejoin="round" d="M11.5 2.5a1.5 1.5 0 012.121 2.121L6.5 11.743l-2.5.757.757-2.5L11.5 2.5z" />
                   </svg>
-                  <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/edit:opacity-100 transition-opacity">
+                  <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-[var(--background)] bg-[var(--surface-secondary)] rounded whitespace-nowrap opacity-0 group-hover/edit:opacity-100 transition-opacity">
                     {t('common.edit')}
                   </span>
                 </button>
                 <button
-                  className="group/del relative inline-flex items-center justify-center w-7 h-7 rounded-md text-red-400 hover:text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900/30 transition-colors sm:opacity-0 sm:group-hover/entry:opacity-100"
+                  className="group/del relative inline-flex items-center justify-center w-7 h-7 rounded-md text-red-400 hover:text-[var(--danger)] hover:bg-red-50 text-[var(--danger)] dark:hover:text-red-300 dark:hover:bg-red-900/30 transition-colors sm:opacity-0 sm:group-hover/entry:opacity-100"
                   onClick={() => setDeletingId(entry.id)}
                 >
                   <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
                     <path strokeLinecap="round" strokeLinejoin="round" d="M3 4.5h10M6.5 4.5V3a1 1 0 011-1h1a1 1 0 011 1v1.5M5 4.5v8a1 1 0 001 1h4a1 1 0 001-1v-8" />
                   </svg>
-                  <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/del:opacity-100 transition-opacity">
+                  <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-[var(--background)] bg-[var(--surface-secondary)] rounded whitespace-nowrap opacity-0 group-hover/del:opacity-100 transition-opacity">
                     {t('common.delete')}
                   </span>
                 </button>
@@ -234,7 +234,7 @@ export function TimeEntryList({ projectKey, itemNumber, sortOrder = 'desc', read
             )}
           </div>
           {entry.description && editingId !== entry.id && (
-            <p className="text-sm text-gray-600 dark:text-gray-400 pl-8">{entry.description}</p>
+            <p className="text-sm text-[var(--foreground-secondary)] pl-8">{entry.description}</p>
           )}
           {editingId === entry.id && (
             <div className="mt-2 space-y-2">
@@ -299,7 +299,7 @@ export function TimeEntryList({ projectKey, itemNumber, sortOrder = 'desc', read
                 />
                 <button
                   type="button"
-                  className="shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-md border border-indigo-500 text-indigo-600 hover:bg-indigo-50 dark:border-indigo-400 dark:text-indigo-400 dark:hover:bg-indigo-900/30 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-md border border-[var(--primary)] text-[var(--primary)] hover:bg-[var(--primary-muted)] dark:border-[var(--primary-border)] dark:text-[var(--primary)]  transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                   onClick={handleUpdate}
                   disabled={!parseDurationString(editDuration) || updateMutation.isPending}
                   aria-label={t('common.save')}
@@ -308,7 +308,7 @@ export function TimeEntryList({ projectKey, itemNumber, sortOrder = 'desc', read
                 </button>
                 <button
                   type="button"
-                  className="shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-md border border-gray-300 text-gray-500 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors"
+                  className="shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] dark:border-[var(--border)] text-[var(--foreground-muted)] hover:bg-[var(--surface-hover)] transition-colors"
                   onClick={() => setEditingId(null)}
                   aria-label={t('common.cancel')}
                 >
@@ -321,7 +321,7 @@ export function TimeEntryList({ projectKey, itemNumber, sortOrder = 'desc', read
       ))}
 
       <Modal open={!!deletingId} onClose={() => setDeletingId(null)} title={t('timeTracking.deleteTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           {t('timeTracking.deleteConfirm')}
         </p>
         <div className="flex justify-end gap-3">
diff --git a/web/src/components/workitems/WatchButton.tsx b/web/src/components/workitems/WatchButton.tsx
index a5a07fed..68d9ed31 100644
--- a/web/src/components/workitems/WatchButton.tsx
+++ b/web/src/components/workitems/WatchButton.tsx
@@ -35,7 +35,7 @@ export function WatchButton({ projectKey, itemNumber, isWatching, className = ''
     <Tooltip content={isWatching ? t('watchers.unwatch') : t('watchers.watch')}>
       <button
         onClick={handleClick}
-        className={`${isWatching ? 'text-indigo-500 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300' : 'text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400'} transition-colors ${className}`}
+        className={`${isWatching ? 'text-[var(--primary)] dark:text-[var(--primary)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)]' : 'text-[var(--foreground-muted)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)]'} transition-colors ${className}`}
         aria-label={isWatching ? t('watchers.unwatch') : t('watchers.watch')}
       >
         <Bell className="h-4 w-4" />
diff --git a/web/src/components/workitems/WatcherList.tsx b/web/src/components/workitems/WatcherList.tsx
index 52b448a8..c81cb797 100644
--- a/web/src/components/workitems/WatcherList.tsx
+++ b/web/src/components/workitems/WatcherList.tsx
@@ -38,7 +38,7 @@ export function WatcherList({ projectKey, itemNumber, members, currentUserRole }
     const isWatching = !!watcherData.me
     return (
       <div className="space-y-4">
-        <div className="flex items-center gap-2 pb-3 border-b border-gray-100 dark:border-gray-700">
+        <div className="flex items-center gap-2 pb-3 border-b border-[var(--border)]">
           <Button
             className="py-2 text-sm"
             onClick={() => toggleMutation.mutate()}
@@ -49,19 +49,19 @@ export function WatcherList({ projectKey, itemNumber, members, currentUserRole }
           </Button>
         </div>
         {isWatching && (
-          <p className="text-sm text-gray-600 dark:text-gray-400">
+          <p className="text-sm text-[var(--foreground-secondary)]">
             {t('watchers.youAreWatching')}
           </p>
         )}
         {watcherData.other_count > 0 && (
-          <p className="text-sm text-gray-500 dark:text-gray-400">
+          <p className="text-sm text-[var(--foreground-secondary)]">
             {isWatching
               ? t('watchers.otherWatchers', { count: watcherData.other_count })
               : t('watchers.totalWatchers', { count: watcherData.other_count })}
           </p>
         )}
         {!isWatching && watcherData.other_count === 0 && (
-          <p className="text-sm text-gray-400">{t('watchers.noWatchers')}</p>
+          <p className="text-sm text-[var(--foreground-muted)]">{t('watchers.noWatchers')}</p>
         )}
       </div>
     )
@@ -73,7 +73,7 @@ export function WatcherList({ projectKey, itemNumber, members, currentUserRole }
 
   return (
     <div className="space-y-4">
-      <div className="flex flex-col sm:flex-row sm:items-center gap-2 pb-3 border-b border-gray-100 dark:border-gray-700">
+      <div className="flex flex-col sm:flex-row sm:items-center gap-2 pb-3 border-b border-[var(--border)]">
         <Button
           className="py-2 text-sm"
           onClick={() => toggleMutation.mutate()}
@@ -95,7 +95,7 @@ export function WatcherList({ projectKey, itemNumber, members, currentUserRole }
       </div>
 
       {watchers.length === 0 ? (
-        <p className="text-sm text-gray-400">{t('watchers.noWatchers')}</p>
+        <p className="text-sm text-[var(--foreground-muted)]">{t('watchers.noWatchers')}</p>
       ) : (
         <div className="space-y-1">
           {watchers.map((w) => {
@@ -105,17 +105,17 @@ export function WatcherList({ projectKey, itemNumber, members, currentUserRole }
               <div key={w.id} className="group/watcher flex items-center justify-between text-sm py-1.5">
                 <div className="flex items-center gap-2 min-w-0">
                   <Avatar name={w.display_name} avatarUrl={w.avatar_url} size="sm" />
-                  <span className="text-gray-900 dark:text-gray-100 truncate">{w.display_name}</span>
-                  <span className="text-gray-400 dark:text-gray-500 text-xs truncate">{w.email}</span>
+                  <span className="text-[var(--foreground)] truncate">{w.display_name}</span>
+                  <span className="text-[var(--foreground-muted)] text-xs truncate">{w.email}</span>
                   {isSelf && (
-                    <span className="text-xs text-indigo-500 dark:text-indigo-400 font-medium shrink-0">
+                    <span className="text-xs text-[var(--primary)] dark:text-[var(--primary)] font-medium shrink-0">
                       ({t('common.you')})
                     </span>
                   )}
                 </div>
                 {canRemove && (
                   <button
-                    className="inline-flex items-center justify-center w-7 h-7 rounded-md text-red-400 hover:text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900/30 transition-colors sm:opacity-0 sm:group-hover/watcher:opacity-100 shrink-0 ml-2"
+                    className="inline-flex items-center justify-center w-7 h-7 rounded-md text-red-400 hover:text-[var(--danger)] hover:bg-red-50 text-[var(--danger)] dark:hover:text-red-300 dark:hover:bg-red-900/30 transition-colors sm:opacity-0 sm:group-hover/watcher:opacity-100 shrink-0 ml-2"
                     onClick={() => removeMutation.mutate(w.user_id)}
                     aria-label={t('common.remove')}
                   >
@@ -181,11 +181,11 @@ function AddWatcherForm({ members, existingWatcherIds, onAdd, isPending }: AddWa
       </Button>
 
       {open && (
-        <div className="absolute z-20 mt-1 w-64 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg">
+        <div className="absolute z-20 mt-1 w-64 bg-[var(--surface)] border border-[var(--border)] rounded-md shadow-lg">
           <div className="p-2">
             <input
               ref={inputRef}
-              className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface-secondary)] text-[var(--foreground)] px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-[var(--focus-ring)]"
               placeholder={t('userPicker.searchMembers')}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -196,7 +196,7 @@ function AddWatcherForm({ members, existingWatcherIds, onAdd, isPending }: AddWa
               <li key={m.user_id}>
                 <button
                   type="button"
-                  className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100"
+                  className="w-full text-left px-3 py-2 text-sm hover:bg-[var(--surface-hover)] text-[var(--foreground)]"
                   onClick={() => {
                     onAdd(m.user_id)
                     setOpen(false)
@@ -207,14 +207,14 @@ function AddWatcherForm({ members, existingWatcherIds, onAdd, isPending }: AddWa
                     <Avatar name={m.display_name} avatarUrl={m.avatar_url} size="xs" />
                     <div>
                       <div className="font-medium">{m.display_name}</div>
-                      <div className="text-xs text-gray-400">{m.email}</div>
+                      <div className="text-xs text-[var(--foreground-muted)]">{m.email}</div>
                     </div>
                   </div>
                 </button>
               </li>
             ))}
             {filtered.length === 0 && (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">{t('userPicker.noMembersFound')}</li>
+              <li className="px-3 py-2 text-sm text-[var(--foreground-muted)]">{t('userPicker.noMembersFound')}</li>
             )}
           </ul>
         </div>
diff --git a/web/src/components/workitems/WorkItemFilters.tsx b/web/src/components/workitems/WorkItemFilters.tsx
index 7aacb865..68f664e4 100644
--- a/web/src/components/workitems/WorkItemFilters.tsx
+++ b/web/src/components/workitems/WorkItemFilters.tsx
@@ -155,7 +155,7 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
           <Tooltip content={t('workitems.filters.save')}>
             <button
               onClick={onSave}
-              className="relative shrink-0 py-2.5 px-2.5 inline-flex items-center justify-center rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+              className="relative shrink-0 py-2.5 px-2.5 inline-flex items-center justify-center rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)] hover:bg-[var(--surface-hover)]"
               aria-label={t('workitems.filters.save')}
             >
               <Save className="h-4 w-4" />
@@ -169,7 +169,7 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
           <Tooltip content={t('workitems.filters.clearAll')}>
             <button
               onClick={onClearFilters}
-              className="shrink-0 py-2.5 px-2.5 inline-flex items-center justify-center rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+              className="shrink-0 py-2.5 px-2.5 inline-flex items-center justify-center rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)] hover:bg-[var(--surface-hover)]"
               aria-label={t('workitems.filters.clearAll')}
             >
               <Eraser className="h-4 w-4" />
@@ -193,7 +193,7 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
           {search && (
             <button
               onClick={() => onSearchChange('')}
-              className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
               aria-label={t('common.clear')}
             >
               <X className="h-4 w-4" />
@@ -209,12 +209,12 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
         {onSort && (
           <button
             onClick={() => setSortOpen(true)}
-            className="relative shrink-0 p-2.5 rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+            className="relative shrink-0 p-2.5 rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)]"
             aria-label={t('workitems.sort.title')}
           >
             <ArrowUpDown className="h-5 w-5" />
             {!isDefaultSort && (
-              <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-indigo-600 text-[10px] font-bold text-white">
+              <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--primary)] text-[10px] font-bold text-white">
                 !
               </span>
             )}
@@ -222,12 +222,12 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
         )}
         <button
           onClick={() => setFiltersOpen(true)}
-          className="relative shrink-0 p-2.5 rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+          className="relative shrink-0 p-2.5 rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)]"
           aria-label={t('workitems.filters.title')}
         >
           <SlidersHorizontal className="h-5 w-5" />
           {activeFilterCount > 0 && (
-            <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-indigo-600 text-[10px] font-bold text-white">
+            <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--primary)] text-[10px] font-bold text-white">
               {activeFilterCount}
             </span>
           )}
@@ -235,7 +235,7 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
         {onShowDatesChange && (
           <button
             onClick={() => setSettingsOpen(true)}
-            className="relative shrink-0 p-2.5 rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+            className="relative shrink-0 p-2.5 rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)]"
             aria-label={t('workitems.settings.title')}
           >
             <Settings className="h-5 w-5" />
@@ -258,8 +258,8 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
                     onClick={() => onSort(opt.key)}
                     className={`flex-1 text-left px-3 py-2.5 rounded-md text-sm ${
                       isActive
-                        ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300 font-medium'
-                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                        ? 'bg-[var(--primary-muted)] text-[var(--primary)]  dark:text-[var(--primary)] font-medium'
+                        : 'text-[var(--foreground)] hover:bg-[var(--surface-hover)]'
                     }`}
                   >
                     {opt.label}
@@ -271,8 +271,8 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
                           onClick={() => onOrderChange('asc')}
                           className={`px-3 py-2.5 rounded-l-md text-base font-medium border ${
                             order === 'asc'
-                              ? 'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-900/40 dark:text-indigo-300 dark:border-indigo-700'
-                              : 'bg-white text-gray-500 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700'
+                              ? 'bg-[var(--primary-muted)] text-[var(--primary)] border-[var(--primary-border)]  dark:text-[var(--primary)] dark:border-[var(--primary-border)]'
+                              : 'bg-white text-[var(--foreground-secondary)] border-[var(--border)] hover:bg-[var(--surface-secondary)] text-[var(--foreground-muted)] dark:border-[var(--border)] hover:bg-[var(--surface-hover)]'
                           }`}
                         >
                           {'\u2191'}
@@ -283,8 +283,8 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
                           onClick={() => onOrderChange('desc')}
                           className={`px-3 py-2.5 rounded-r-md text-base font-medium border-t border-r border-b ${
                             order === 'desc'
-                              ? 'bg-indigo-100 text-indigo-700 border-indigo-300 dark:bg-indigo-900/40 dark:text-indigo-300 dark:border-indigo-700'
-                              : 'bg-white text-gray-500 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:bg-gray-700'
+                              ? 'bg-[var(--primary-muted)] text-[var(--primary)] border-[var(--primary-border)]  dark:text-[var(--primary)] dark:border-[var(--primary-border)]'
+                              : 'bg-white text-[var(--foreground-secondary)] border-[var(--border)] hover:bg-[var(--surface-secondary)] text-[var(--foreground-muted)] dark:border-[var(--border)] hover:bg-[var(--surface-hover)]'
                           }`}
                         >
                           {'\u2193'}
@@ -303,14 +303,14 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
       {onShowDatesChange && (
         <Modal open={settingsOpen} onClose={() => setSettingsOpen(false)} title={t('workitems.settings.title')} position="top" containerClassName="!pt-[10.3rem]">
           <label className="flex items-center justify-between cursor-pointer">
-            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('workitems.settings.showDates')}</span>
+            <span className="text-sm font-medium text-[var(--foreground)]">{t('workitems.settings.showDates')}</span>
             <button
               type="button"
               role="switch"
               aria-checked={showDates}
               onClick={() => onShowDatesChange(!showDates)}
               className={`relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors ${
-                showDates ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-gray-600'
+                showDates ? 'bg-[var(--primary)]' : 'bg-[var(--surface-tertiary)] dark:bg-[var(--foreground-secondary)]'
               }`}
             >
               <span className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform ${
@@ -329,7 +329,7 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
             {onSave && (
               <button
                 onClick={onSave}
-                className="relative p-2.5 rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+                className="relative p-2.5 rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)] hover:bg-[var(--surface-hover)]"
                 aria-label={t('workitems.filters.save')}
               >
                 <Save className="h-5 w-5" />
@@ -341,7 +341,7 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
             {onClearFilters && (
               <button
                 onClick={onClearFilters}
-                className="p-2.5 rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+                className="p-2.5 rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)] hover:bg-[var(--surface-hover)]"
                 aria-label={t('workitems.filters.clearAll')}
               >
                 <Eraser className="h-5 w-5" />
@@ -353,25 +353,25 @@ export function WorkItemFilters({ filter, onFilterChange, statuses, milestones =
         <div className="space-y-4">
           {!hideTypeFilter && (
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('workitems.filters.allTypes')}</label>
+              <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('workitems.filters.allTypes')}</label>
               <MultiSelect options={typeOptions} selected={filter.type ?? []} onChange={(v) => setArray('type', v)} placeholder={t('workitems.filters.allTypes')} />
             </div>
           )}
           <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('workitems.filters.allPriorities')}</label>
+            <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('workitems.filters.allPriorities')}</label>
             <MultiSelect options={priorityOptions} selected={filter.priority ?? []} onChange={(v) => setArray('priority', v)} placeholder={t('workitems.filters.allPriorities')} />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('workitems.filters.allStatuses')}</label>
+            <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('workitems.filters.allStatuses')}</label>
             <MultiSelect options={statusOptions} selected={filter.status ?? []} onChange={(v) => setArray('status', v)} placeholder={t('workitems.filters.allStatuses')} groupActions={statusGroupActions} />
           </div>
           <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('workitems.filters.allAssignees')}</label>
+            <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('workitems.filters.allAssignees')}</label>
             <MultiSelect options={assigneeOptions} selected={filter.assignee ?? []} onChange={(v) => setArray('assignee', v)} placeholder={t('workitems.filters.allAssignees')} searchable />
           </div>
           {milestones.length > 0 && (
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('workitems.filters.allMilestones')}</label>
+              <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('workitems.filters.allMilestones')}</label>
               <MultiSelect options={milestoneOptions} selected={filter.milestone ?? []} onChange={(v) => setArray('milestone', v)} placeholder={t('workitems.filters.allMilestones')} />
             </div>
           )}
diff --git a/web/src/components/workitems/WorkItemForm.tsx b/web/src/components/workitems/WorkItemForm.tsx
index d9896a5f..efd73d21 100644
--- a/web/src/components/workitems/WorkItemForm.tsx
+++ b/web/src/components/workitems/WorkItemForm.tsx
@@ -337,12 +337,12 @@ export function WorkItemForm({
   const descriptionField = (
     <div className={mode === 'create' ? 'flex min-h-0 flex-1 flex-col' : ''}>
       <div className="flex items-baseline justify-between gap-2 mb-1">
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">{t('workitems.form.description')}</label>
-        <span className="text-xs text-gray-400 dark:text-gray-500">{t('workitems.form.descriptionHint')}</span>
+        <label className="block text-sm font-medium text-[var(--foreground)]">{t('workitems.form.description')}</label>
+        <span className="text-xs text-[var(--foreground-muted)]">{t('workitems.form.descriptionHint')}</span>
       </div>
       <textarea
         ref={descRef}
-        className={`block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed ${mode === 'create' ? 'min-h-0 flex-1 resize-none' : ''}`}
+        className={`block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] disabled:opacity-50 disabled:cursor-not-allowed ${mode === 'create' ? 'min-h-0 flex-1 resize-none' : ''}`}
         rows={4}
         value={description}
         placeholder={t('workitems.form.descriptionPlaceholder')}
@@ -399,7 +399,7 @@ export function WorkItemForm({
 
   const assigneeField = (
     <div>
-      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('workitems.form.assignee')}</label>
+      <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('workitems.form.assignee')}</label>
       <UserPicker members={members} value={assigneeId} onChange={setAssigneeId} disabled={locked} />
     </div>
   )
@@ -442,7 +442,7 @@ export function WorkItemForm({
 
   const watchersField = mode === 'create' && (
     <div>
-      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('watchers.watchersField')}</label>
+      <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('watchers.watchersField')}</label>
       <MultiUserPicker members={members} selectedIds={watcherIds} onChange={setWatcherIds} disabled={locked} />
     </div>
   )
@@ -497,7 +497,7 @@ export function WorkItemForm({
         {visibilityField}
         {dueDateField}
         {milestoneField}
-        {submitError && <p className="text-sm text-red-600 dark:text-red-400">{submitError}</p>}
+        {submitError && <p className="text-sm text-[var(--danger)]">{submitError}</p>}
         <div className="flex justify-end gap-3 pt-2">{actions}</div>
       </form>
     )
@@ -521,7 +521,7 @@ export function WorkItemForm({
             so they don't add to the row's height: revealing "More fields"
             scrolls this column instead of growing the modal.
           */}
-          <div className="border-t border-gray-200 dark:border-gray-700 md:relative md:border-l md:border-t-0">
+          <div className="border-t border-[var(--border)] md:relative md:border-l md:border-t-0">
             <div className="space-y-4 px-6 py-5 md:absolute md:inset-0 md:overflow-y-auto md:overscroll-contain">
               {projectField}
               {typeField}
@@ -538,8 +538,8 @@ export function WorkItemForm({
           </div>
         </div>
       </div>
-      <div className="shrink-0 border-t border-gray-200 px-6 py-4 dark:border-gray-700">
-        {submitError && <p className="mb-2 text-sm text-red-600 dark:text-red-400">{submitError}</p>}
+      <div className="shrink-0 border-t border-[var(--border)] px-6 py-4 dark:border-[var(--border)]">
+        {submitError && <p className="mb-2 text-sm text-[var(--danger)]">{submitError}</p>}
         <div className="flex items-center gap-4">
           {attachmentsField}
           <div className="flex shrink-0 gap-3">{actions}</div>
@@ -591,15 +591,15 @@ function MultiUserPicker({ members, selectedIds, onChange, disabled }: MultiUser
   return (
     <div ref={ref} className="relative">
       <div
-        className={`flex flex-wrap gap-1.5 min-h-[38px] rounded-md border border-gray-300 dark:border-gray-600 px-2 py-1.5 text-sm bg-white dark:bg-gray-800 ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-text'}`}
+        className={`flex flex-wrap gap-1.5 min-h-[38px] rounded-md border border-[var(--border)] px-2 py-1.5 text-sm bg-[var(--surface)] ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-text'}`}
         onClick={() => { if (disabled) return; setOpen(true); setTimeout(() => inputRef.current?.focus(), 0) }}
       >
         {selectedMembers.map((m) => (
-          <span key={m.user_id} className="inline-flex items-center gap-1 rounded-full bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300 px-2 py-0.5 text-xs font-medium">
+          <span key={m.user_id} className="inline-flex items-center gap-1 rounded-full bg-[var(--primary-muted)] text-[var(--primary)] px-2 py-0.5 text-xs font-medium">
             {m.display_name}
             <button
               type="button"
-              className="hover:text-indigo-900 dark:hover:text-indigo-100"
+              className="hover:text-[var(--primary)]"
               onClick={(e) => { e.stopPropagation(); onChange(selectedIds.filter((id) => id !== m.user_id)) }}
             >
               ×
@@ -607,16 +607,16 @@ function MultiUserPicker({ members, selectedIds, onChange, disabled }: MultiUser
           </span>
         ))}
         {selectedMembers.length === 0 && !open && (
-          <span className="text-gray-400 dark:text-gray-500 py-0.5">{t('watchers.pickWatchers')}</span>
+          <span className="text-[var(--foreground-muted)] py-0.5">{t('watchers.pickWatchers')}</span>
         )}
       </div>
 
       {open && (
-        <div className="absolute z-20 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-md shadow-lg">
+        <div className="absolute z-20 mt-1 w-full bg-[var(--surface)] border border-[var(--border)] rounded-md shadow-lg">
           <div className="p-2">
             <input
               ref={inputRef}
-              className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
+              className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface-secondary)] text-[var(--foreground)] px-2 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-[var(--focus-ring)]"
               placeholder={t('userPicker.searchMembers')}
               value={search}
               onChange={(e) => setSearch(e.target.value)}
@@ -627,19 +627,19 @@ function MultiUserPicker({ members, selectedIds, onChange, disabled }: MultiUser
               <li key={m.user_id}>
                 <button
                   type="button"
-                  className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100"
+                  className="w-full text-left px-3 py-2 text-sm hover:bg-[var(--surface-hover)] text-[var(--foreground)]"
                   onClick={() => {
                     onChange([...selectedIds, m.user_id])
                     setSearch('')
                   }}
                 >
                   <div className="font-medium">{m.display_name}</div>
-                  <div className="text-xs text-gray-400">{m.email}</div>
+                  <div className="text-xs text-[var(--foreground-muted)]">{m.email}</div>
                 </button>
               </li>
             ))}
             {filtered.length === 0 && (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">{t('userPicker.noMembersFound')}</li>
+              <li className="px-3 py-2 text-sm text-[var(--foreground-muted)]">{t('userPicker.noMembersFound')}</li>
             )}
           </ul>
         </div>
diff --git a/web/src/components/workitems/WorkItemMobileCard.tsx b/web/src/components/workitems/WorkItemMobileCard.tsx
index bde8c448..79425ed1 100644
--- a/web/src/components/workitems/WorkItemMobileCard.tsx
+++ b/web/src/components/workitems/WorkItemMobileCard.tsx
@@ -30,7 +30,7 @@ interface WorkItemMobileCardProps {
 export function WorkItemMobileCard({ item, statuses, showDates, assigneeName, inboxItemId, isWatching, isCompleted = false, onClick }: WorkItemMobileCardProps) {
   return (
     <div
-      className="relative w-full text-left rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3 shadow-sm hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors cursor-pointer"
+      className="relative w-full text-left rounded-lg border border-[var(--border)] bg-[var(--surface)] p-3 hover:border-[var(--primary-border)] dark:hover:border-[var(--primary-border)] transition-colors cursor-pointer"
       onClick={onClick}
       role="button"
       tabIndex={0}
@@ -46,7 +46,7 @@ export function WorkItemMobileCard({ item, statuses, showDates, assigneeName, in
         <WatchButton projectKey={item.project_key} itemNumber={item.item_number} isWatching={isWatching} />
       </span>
       <ScrollableRow className="mr-5">
-        <span className={`shrink-0 font-mono text-sm font-semibold ${isCompleted ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}`}>{item.display_id}</span>
+        <span className={`shrink-0 font-mono text-sm font-semibold ${isCompleted ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground)]'}`}>{item.display_id}</span>
         <span className={`shrink-0 inline-flex ${isCompleted ? 'opacity-40' : ''}`}><TypeBadge type={item.type} /></span>
         <span className="shrink-0 inline-flex"><StatusBadge status={item.status} statuses={statuses} /></span>
         <span className={`shrink-0 inline-flex ${isCompleted ? 'opacity-40' : ''}`}><PriorityBadge priority={item.priority} /></span>
@@ -55,7 +55,7 @@ export function WorkItemMobileCard({ item, statuses, showDates, assigneeName, in
         )}
       </ScrollableRow>
       {showDates && (
-        <ScrollableRow className={`mr-5 mt-1.5 text-xs ${isCompleted ? 'text-gray-300 dark:text-gray-600' : 'text-gray-400 dark:text-gray-500'}`} contentClassName="gap-3">
+        <ScrollableRow className={`mr-5 mt-1.5 text-xs ${isCompleted ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-muted)]'}`} contentClassName="gap-3">
           <span className="shrink-0 inline-flex items-center gap-1">
             <User className="h-3 w-3" />
             <span className="truncate max-w-[8rem]">{assigneeName}</span>
@@ -67,9 +67,9 @@ export function WorkItemMobileCard({ item, statuses, showDates, assigneeName, in
           {!isCompleted && item.sla && <span className="shrink-0 inline-flex"><SLAIndicator sla={item.sla} /></span>}
         </ScrollableRow>
       )}
-      <p className={`mt-1.5 text-sm font-medium truncate ${isCompleted ? 'line-through text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}>{item.title}</p>
+      <p className={`mt-1.5 text-sm font-medium truncate ${isCompleted ? 'line-through text-[var(--foreground-muted)]' : 'text-[var(--foreground)]'}`}>{item.title}</p>
       {item.description && (
-        <p className={`mt-0.5 text-xs truncate ${isCompleted ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'}`}>{getDescriptionPreview(item.description)}</p>
+        <p className={`mt-0.5 text-xs truncate ${isCompleted ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-secondary)]'}`}>{getDescriptionPreview(item.description)}</p>
       )}
     </div>
   )
diff --git a/web/src/contexts/AuthContext.tsx b/web/src/contexts/AuthContext.tsx
index 9ead1cad..2a646d15 100644
--- a/web/src/contexts/AuthContext.tsx
+++ b/web/src/contexts/AuthContext.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useState, useEffect, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import type { User } from '@/api/auth'
diff --git a/web/src/contexts/BrandContext.tsx b/web/src/contexts/BrandContext.tsx
index 5f57b100..1fd90caf 100644
--- a/web/src/contexts/BrandContext.tsx
+++ b/web/src/contexts/BrandContext.tsx
@@ -1,4 +1,5 @@
-import { createContext, useContext } from 'react'
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useContext, useEffect, useRef } from 'react'
 import type { ReactNode } from 'react'
 import { usePublicSettings } from '@/hooks/useSystemSettings'
 
@@ -18,6 +19,16 @@ export function BrandProvider({ children }: { children: ReactNode }) {
       ? publicSettings.brand_name
       : DEFAULT_BRAND_NAME
 
+  // Keep the browser tab title in sync with the configured brand, without
+  // clobbering page-specific titles (e.g. the work item detail page).
+  const lastBaseTitle = useRef(DEFAULT_BRAND_NAME)
+  useEffect(() => {
+    if (document.title === lastBaseTitle.current) {
+      document.title = brandName
+    }
+    lastBaseTitle.current = brandName
+  }, [brandName])
+
   return (
     <BrandContext.Provider value={{ brandName }}>
       {children}
diff --git a/web/src/contexts/KeyboardShortcutContext.tsx b/web/src/contexts/KeyboardShortcutContext.tsx
index 79e2f6a3..3a9f1cc5 100644
--- a/web/src/contexts/KeyboardShortcutContext.tsx
+++ b/web/src/contexts/KeyboardShortcutContext.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useRef, useCallback, useLayoutEffect } from 'react'
 import type { ReactNode } from 'react'
 import { resolveSequenceKey } from '@/utils/keySequence'
diff --git a/web/src/contexts/LanguageContext.tsx b/web/src/contexts/LanguageContext.tsx
index bc6e6bed..f2039f9d 100644
--- a/web/src/contexts/LanguageContext.tsx
+++ b/web/src/contexts/LanguageContext.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useState, useEffect, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -67,6 +68,7 @@ export function LanguageProvider({ children }: { children: ReactNode }) {
   }, [language, i18n])
 
   useEffect(() => {
+    document.documentElement.lang = language
     document.documentElement.dir = RTL_LANGUAGES.has(language) ? 'rtl' : 'ltr'
   }, [language])
 
diff --git a/web/src/contexts/LayoutContext.tsx b/web/src/contexts/LayoutContext.tsx
index c282711d..ceff4f4a 100644
--- a/web/src/contexts/LayoutContext.tsx
+++ b/web/src/contexts/LayoutContext.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useState, useEffect, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { usePreference, useSetPreference } from '@/hooks/usePreferences'
diff --git a/web/src/contexts/NamespaceContext.tsx b/web/src/contexts/NamespaceContext.tsx
index e8672284..9e0a1422 100644
--- a/web/src/contexts/NamespaceContext.tsx
+++ b/web/src/contexts/NamespaceContext.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react'
 import type { ReactNode } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
diff --git a/web/src/contexts/NavigationGuardContext.tsx b/web/src/contexts/NavigationGuardContext.tsx
index 4096c973..77f8a751 100644
--- a/web/src/contexts/NavigationGuardContext.tsx
+++ b/web/src/contexts/NavigationGuardContext.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useCallback, useRef, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import type { ReactNode, MutableRefObject } from 'react'
diff --git a/web/src/contexts/NotificationContext.tsx b/web/src/contexts/NotificationContext.tsx
index 034b50fd..1a0aa822 100644
--- a/web/src/contexts/NotificationContext.tsx
+++ b/web/src/contexts/NotificationContext.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useState, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { Check, X } from 'lucide-react'
diff --git a/web/src/contexts/SidebarContext.tsx b/web/src/contexts/SidebarContext.tsx
index a72e5109..4e30a49d 100644
--- a/web/src/contexts/SidebarContext.tsx
+++ b/web/src/contexts/SidebarContext.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useKeyboardShortcut } from '@/hooks/useKeyboardShortcut'
diff --git a/web/src/contexts/ThemeContext.tsx b/web/src/contexts/ThemeContext.tsx
index 609fbdc3..f3902643 100644
--- a/web/src/contexts/ThemeContext.tsx
+++ b/web/src/contexts/ThemeContext.tsx
@@ -1,9 +1,11 @@
+/* eslint-disable react-refresh/only-export-components */
 import { createContext, useContext, useState, useEffect, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { usePreference, useSetPreference } from '@/hooks/usePreferences'
 import { useAuth } from '@/contexts/AuthContext'
 
 export type Theme = 'light' | 'dark' | 'system'
+export type ColorTheme = 'default' | 'slate' | 'blue' | 'green' | 'purple'
 export type FontSize = 'small' | 'normal' | 'large'
 
 const fontSizePx: Record<FontSize, string> = {
@@ -15,11 +17,14 @@ const fontSizePx: Record<FontSize, string> = {
 interface ThemeContextValue {
   theme: Theme
   setTheme: (theme: Theme) => void
+  colorTheme: ColorTheme
+  setColorTheme: (colorTheme: ColorTheme) => void
   fontSize: FontSize
   setFontSize: (size: FontSize) => void
 }
 
 const THEME_KEY = 'taskwondo_theme'
+const COLOR_THEME_KEY = 'taskwondo_color_theme'
 const FONT_SIZE_KEY = 'taskwondo_font_size'
 const ThemeContext = createContext<ThemeContextValue | null>(null)
 
@@ -39,20 +44,40 @@ function applyTheme(theme: Theme) {
   }
 }
 
+function applyColorTheme(colorTheme: ColorTheme) {
+  if (colorTheme === 'default') {
+    document.documentElement.removeAttribute('data-theme')
+  } else {
+    document.documentElement.setAttribute('data-theme', colorTheme)
+  }
+}
+
 function applyFontSize(size: FontSize) {
-  document.documentElement.style.fontSize = fontSizePx[size]
+  // Scales every rem-based size in the UI; the root font-size itself additionally
+  // applies the per-script adjustment defined in index.css.
+  document.documentElement.style.setProperty('--app-font-size', fontSizePx[size])
 }
 
 function isValidTheme(v: unknown): v is Theme {
   return v === 'light' || v === 'dark' || v === 'system'
 }
 
+function isValidColorTheme(v: unknown): v is ColorTheme {
+  return v === 'default' || v === 'slate' || v === 'blue' || v === 'green' || v === 'purple'
+}
+
 function getStoredTheme(): Theme {
   const stored = localStorage.getItem(THEME_KEY)
   if (isValidTheme(stored)) return stored
   return 'system'
 }
 
+function getStoredColorTheme(): ColorTheme {
+  const stored = localStorage.getItem(COLOR_THEME_KEY)
+  if (isValidColorTheme(stored)) return stored
+  return 'default'
+}
+
 function isValidFontSize(v: unknown): v is FontSize {
   return v === 'small' || v === 'normal' || v === 'large'
 }
@@ -66,10 +91,12 @@ function getStoredFontSize(): FontSize {
 export function ThemeProvider({ children }: { children: ReactNode }) {
   const { user } = useAuth()
   const [theme, setThemeState] = useState<Theme>(getStoredTheme)
+  const [colorTheme, setColorThemeState] = useState<ColorTheme>(getStoredColorTheme)
   const [fontSize, setFontSizeState] = useState<FontSize>(getStoredFontSize)
 
   // Fetch preferences from API when logged in
   const { data: apiTheme } = usePreference<string>(user ? 'theme' : '')
+  const { data: apiColorTheme } = usePreference<string>(user ? 'colorTheme' : '')
   const { data: apiFontSize } = usePreference<string>(user ? 'fontSize' : '')
   const setPreferenceMutation = useSetPreference()
 
@@ -81,6 +108,14 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     }
   }, [apiTheme])
 
+  // Sync API color theme to local state on load
+  useEffect(() => {
+    if (isValidColorTheme(apiColorTheme)) {
+      setColorThemeState(apiColorTheme)
+      localStorage.setItem(COLOR_THEME_KEY, apiColorTheme)
+    }
+  }, [apiColorTheme])
+
   // Sync API font size to local state on load
   useEffect(() => {
     if (isValidFontSize(apiFontSize)) {
@@ -94,6 +129,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     applyTheme(theme)
   }, [theme])
 
+  // Apply color theme whenever it changes
+  useEffect(() => {
+    applyColorTheme(colorTheme)
+  }, [colorTheme])
+
   // Listen for OS color scheme changes when theme is 'system'
   useEffect(() => {
     if (theme !== 'system') return
@@ -119,6 +159,18 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     [user, setPreferenceMutation],
   )
 
+  const setColorTheme = useCallback(
+    (newColorTheme: ColorTheme) => {
+      setColorThemeState(newColorTheme)
+      localStorage.setItem(COLOR_THEME_KEY, newColorTheme)
+      applyColorTheme(newColorTheme)
+      if (user) {
+        setPreferenceMutation.mutate({ key: 'colorTheme', value: newColorTheme })
+      }
+    },
+    [user, setPreferenceMutation],
+  )
+
   const setFontSize = useCallback(
     (newSize: FontSize) => {
       setFontSizeState(newSize)
@@ -132,7 +184,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
   )
 
   return (
-    <ThemeContext.Provider value={{ theme, setTheme, fontSize, setFontSize }}>
+    <ThemeContext.Provider value={{ theme, setTheme, colorTheme, setColorTheme, fontSize, setFontSize }}>
       {children}
     </ThemeContext.Provider>
   )
diff --git a/web/src/hooks/useKeyboardShortcut.ts b/web/src/hooks/useKeyboardShortcut.ts
index 970cf128..4f689818 100644
--- a/web/src/hooks/useKeyboardShortcut.ts
+++ b/web/src/hooks/useKeyboardShortcut.ts
@@ -16,10 +16,10 @@ export function useKeyboardShortcut(
 ) {
   const { isModalOpen } = useKeyboardShortcutContext()
   const callbackRef = useRef(callback)
-  callbackRef.current = callback
+  useEffect(() => { callbackRef.current = callback }, [callback])
 
   const optsRef = useRef(options)
-  optsRef.current = options
+  useEffect(() => { optsRef.current = options }, [options])
 
   useEffect(() => {
     if (!enabled) return
diff --git a/web/src/hooks/useMentionAutocomplete.ts b/web/src/hooks/useMentionAutocomplete.ts
index 00f61b6c..bf8ddb55 100644
--- a/web/src/hooks/useMentionAutocomplete.ts
+++ b/web/src/hooks/useMentionAutocomplete.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react'
+import { useState, useCallback, useRef, useEffect } from 'react'
 
 interface UseMentionAutocompleteOptions {
   value: string
@@ -45,9 +45,9 @@ export function useMentionAutocomplete({ value, onValueChange, textareaRef }: Us
 
   // Refs to avoid stale closures while dropdown is open
   const valueRef = useRef(value)
-  valueRef.current = value
+  useEffect(() => { valueRef.current = value }, [value])
   const onValueChangeRef = useRef(onValueChange)
-  onValueChangeRef.current = onValueChange
+  useEffect(() => { onValueChangeRef.current = onValueChange }, [onValueChange])
 
   const onMentionKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
diff --git a/web/src/hooks/useSearch.ts b/web/src/hooks/useSearch.ts
index 7ca15947..3b549b96 100644
--- a/web/src/hooks/useSearch.ts
+++ b/web/src/hooks/useSearch.ts
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { unifiedSearch } from '@/api/search'
 import type { SearchResult } from '@/api/search'
+import { meetsSearchFloor } from '@/utils/searchRequest'
 
 interface UseSearchOptions {
   query: string
@@ -43,7 +44,7 @@ export function useSearch({ query, limit = 20, project }: UseSearchOptions): Use
   useEffect(() => {
     abortRef.current?.abort()
 
-    if (query.length < 2) {
+    if (!meetsSearchFloor(query)) {
       resetState()
       return
     }
diff --git a/web/src/hooks/useUsers.ts b/web/src/hooks/useUsers.ts
index cf9f18b6..a2528894 100644
--- a/web/src/hooks/useUsers.ts
+++ b/web/src/hooks/useUsers.ts
@@ -1,11 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
 import { searchUsers } from '@/api/users'
+import { meetsSearchFloor } from '@/utils/searchRequest'
 
 export function useSearchUsers(query: string) {
   return useQuery({
     queryKey: ['users', 'search', query],
     queryFn: () => searchUsers(query),
-    enabled: query.length >= 2,
+    enabled: meetsSearchFloor(query),
     staleTime: 30_000,
   })
 }
diff --git a/web/src/hooks/useWorkflows.ts b/web/src/hooks/useWorkflows.ts
index 58235976..016587d0 100644
--- a/web/src/hooks/useWorkflows.ts
+++ b/web/src/hooks/useWorkflows.ts
@@ -70,11 +70,11 @@ export function useProjectWorkflow(projectKey: string, workItemType?: string, na
 
   // Build transitions map from workflow detail
   const transitionsMap = useMemo(() => {
-    if (!workflowQuery.data?.transitions) return undefined
+    const transitions = workflowQuery.data?.transitions
+    if (!transitions) return undefined
     const map: Record<string, WorkflowTransition[]> = {}
-    for (const t of workflowQuery.data.transitions) {
-      if (!map[t.from_status]) map[t.from_status] = []
-      map[t.from_status].push(t)
+    for (const t of transitions) {
+      (map[t.from_status] ??= []).push(t)
     }
     return map
   }, [workflowQuery.data?.transitions])
diff --git a/web/src/i18n/ar.json b/web/src/i18n/ar.json
index 3783ade4..ca03b405 100644
--- a/web/src/i18n/ar.json
+++ b/web/src/i18n/ar.json
@@ -74,6 +74,7 @@
   "admin.authentication.microsoft.description": "السماح للمستخدمين بتسجيل الدخول باستخدام حساب Microsoft الخاص بهم.",
   "admin.authentication.microsoft.title": "Microsoft",
   "admin.authentication.oauth.changeOrder": "تغيير الترتيب",
+  "admin.authentication.oauth.errorValidation": "خطأ في الإعدادات: {{detail}}",
   "admin.authentication.oauth.clientId": "معرّف العميل",
   "admin.authentication.oauth.clientSecret": "سر العميل",
   "admin.authentication.oauth.notConfigured": "غير مُهيأ. أضف بيانات الاعتماد لتفعيل هذا المزود.",
@@ -81,6 +82,23 @@
   "admin.authentication.oauth.redirectUriHint": "يتم تحديده تلقائيًا",
   "admin.authentication.oauth.saveError": "فشل في حفظ الإعدادات.",
   "admin.authentication.oauth.saved": "تم حفظ الإعدادات.",
+  "admin.authentication.sso.title": "SSO مخصص (OIDC)",
+  "admin.authentication.sso.description": "السماح للمستخدمين بتسجيل الدخول باستخدام موفر هوية OpenID Connect مخصص.",
+  "admin.authentication.sso.issuer": "عنوان URL للمُصدر",
+  "admin.authentication.sso.issuerPlaceholder": "https://idp.example.com",
+  "admin.authentication.sso.issuerHelp": "عنوان URL لمُصدر OIDC. يُستخدم لاكتشاف .well-known/openid-configuration.",
+  "admin.authentication.sso.scopes": "النطاقات",
+  "admin.authentication.sso.scopesPlaceholder": "openid, profile, email",
+  "admin.authentication.sso.scopesHelp": "مفصولة بمسافة أو فاصلة. \"openid\" مطلوب دائمًا. الافتراضي: openid, profile, email.",
+  "admin.authentication.sso.buttonLabel": "تسمية الزر",
+  "admin.authentication.sso.buttonLabelPlaceholder": "تسجيل الدخول باستخدام SSO",
+  "admin.authentication.sso.buttonLabelHelp": "النص المعروض على زر تسجيل الدخول. الحد الأقصى 40 حرفًا. اتركه فارغًا للاستخدام الافتراضي.",
+  "admin.authentication.sso.disablePKCE": "تعطيل PKCE",
+  "admin.authentication.sso.disablePKCEHelp": "تعطيل تحدي الرمز S256. قم بالتفعيل فقط إذا كان موفر الهوية الخاص بك لا يدعم PKCE.",
+  "admin.authentication.sso.requireVerifiedEmail": "طلب بريد إلكتروني موثّق",
+  "admin.authentication.sso.requireVerifiedEmailHelp": "السماح بتسجيل الدخول فقط عندما يؤكد موفر الهوية أن بريد المستخدم الإلكتروني موثّق.",
+  "admin.authentication.sso.autoProvision": "توفير تلقائي للحسابات",
+  "admin.authentication.sso.autoProvisionHelp": "إنشاء حسابات تلقائيًا للمستخدمين الذين يسجلون الدخول عبر SSO لأول مرة. عند التعطيل، يمكن فقط للحسابات الموجودة استخدام تسجيل الدخول عبر SSO.",
   "admin.authentication.section.emailPassword": "البريد الإلكتروني وكلمة المرور",
   "admin.authentication.section.oauth": "مزودو OAuth",
   "admin.authentication.section.oauthDescription": "قم بتكوين مزودي تسجيل الدخول الخارجيين. يحدد الترتيب أدناه كيفية ظهورهم في صفحة تسجيل الدخول.",
@@ -161,6 +179,8 @@
   "admin.integrations.smtp.enable": "تفعيل SMTP",
   "admin.integrations.smtp.encryption": "التشفير",
   "admin.integrations.smtp.encryptionNone": "بدون / نص عادي (المنفذ 25)",
+  "admin.integrations.smtp.skipCertVerify": "تخطي التحقق من الشهادة",
+  "admin.integrations.smtp.skipCertVerifyHelp": "عدم التحقق من شهادة TLS الخاصة بالخادم. استخدمها فقط مع الخوادم المستضافة ذاتيًا التي تستخدم شهادات موقعة ذاتيًا أو منتهية الصلاحية.",
   "admin.integrations.smtp.encryptionStarttls": "STARTTLS (المنفذ 587)",
   "admin.integrations.smtp.encryptionTls": "TLS/SSL ضمني (المنفذ 465)",
   "admin.integrations.smtp.fromAddress": "عنوان المرسل",
@@ -370,6 +390,9 @@
   "errors.display_name_required": "اسم العرض مطلوب.",
   "errors.email_already_exists": "يوجد مستخدم بهذا البريد الإلكتروني بالفعل.",
   "errors.last_login_method": "لا يمكنك إلغاء ربط طريقة تسجيل الدخول الوحيدة لديك. عيّن كلمة مرور أولاً.",
+  "errors.sso_email_missing": "فشل تسجيل الدخول عبر SSO: لم يتم إرجاع عنوان بريد إلكتروني من موفر الهوية.",
+  "errors.sso_email_unverified": "فشل تسجيل الدخول عبر SSO: عنوان بريدك الإلكتروني غير موثّق. يرجى التحقق من بريدك الإلكتروني مع موفر الهوية والمحاولة مرة أخرى.",
+  "errors.sso_account_not_provisioned": "فشل تسجيل الدخول عبر SSO: لا يوجد حساب لهذا البريد الإلكتروني. يرجى التواصل مع المسؤول.",
   "errors.namespace_limit_reached": "تم الوصول إلى حد ملكية مساحات الأسماء. تواصل مع المسؤول لزيادة الحد.",
   "errors.namespace_slug_in_use": "معرف مساحة الأسماء \"{{slug}}\" مستخدم بالفعل.",
   "errors.namespace_slug_invalid": "يجب أن يتكون معرف مساحة الأسماء من 2-30 حرفًا أبجديًا رقميًا صغيرًا أو شرطات، ويبدأ بحرف.",
@@ -488,6 +511,11 @@
   "login.noAccount": "ليس لديك حساب؟",
   "login.oauth.authenticating": "جارٍ المصادقة...",
   "login.oauth.backToLogin": "العودة إلى تسجيل الدخول",
+  "login.sso.button": "تسجيل الدخول باستخدام SSO",
+  "login.sso.error": "فشل بدء تسجيل الدخول عبر SSO. حاول مرة أخرى.",
+  "login.sso.authenticating": "جارٍ المصادقة مع SSO...",
+  "login.sso.callbackError": "فشلت مصادقة SSO. حاول مرة أخرى.",
+  "login.sso.backToLogin": "العودة إلى تسجيل الدخول",
   "login.oauth.callbackError": "فشلت المصادقة. حاول مرة أخرى.",
   "login.oauth.error": "فشل بدء تسجيل الدخول. حاول مرة أخرى.",
   "login.or": "أو المتابعة عبر",
@@ -1529,5 +1557,11 @@
   "inlineComments.gutterTooltip_one": "{{count}} تعليق مضمّن",
   "inlineComments.gutterTooltip_other": "{{count}} تعليقات مضمّنة",
   "inlineComments.prevComment": "التعليق السابق",
-  "inlineComments.nextComment": "التعليق التالي"
+  "inlineComments.nextComment": "التعليق التالي",
+  "preferences.colorTheme": "سمة اللون",
+  "preferences.colorThemes.default": "نيلي",
+  "preferences.colorThemes.slate": "حجري",
+  "preferences.colorThemes.blue": "أزرق",
+  "preferences.colorThemes.green": "أخضر",
+  "preferences.colorThemes.purple": "بنفسجي"
 }
diff --git a/web/src/i18n/de.json b/web/src/i18n/de.json
index 0386cf38..018f3620 100644
--- a/web/src/i18n/de.json
+++ b/web/src/i18n/de.json
@@ -74,6 +74,7 @@
   "admin.authentication.microsoft.description": "Benutzern erlauben, sich mit ihrem Microsoft-Konto anzumelden.",
   "admin.authentication.microsoft.title": "Microsoft",
   "admin.authentication.oauth.changeOrder": "Reihenfolge ändern",
+  "admin.authentication.oauth.errorValidation": "Konfigurationsfehler: {{detail}}",
   "admin.authentication.oauth.clientId": "Client-ID",
   "admin.authentication.oauth.clientSecret": "Client-Geheimnis",
   "admin.authentication.oauth.notConfigured": "Nicht konfiguriert. Fügen Sie Zugangsdaten hinzu, um diesen Anbieter zu aktivieren.",
@@ -81,6 +82,23 @@
   "admin.authentication.oauth.redirectUriHint": "automatisch ermittelt",
   "admin.authentication.oauth.saveError": "Konfiguration konnte nicht gespeichert werden.",
   "admin.authentication.oauth.saved": "Konfiguration gespeichert.",
+  "admin.authentication.sso.title": "Benutzerdefinierte SSO (OIDC)",
+  "admin.authentication.sso.description": "Benutzern erlauben, sich mit einem benutzerdefinierten OpenID Connect-Identitätsanbieter anzumelden.",
+  "admin.authentication.sso.issuer": "Issuer-URL",
+  "admin.authentication.sso.issuerPlaceholder": "https://idp.example.com",
+  "admin.authentication.sso.issuerHelp": "Die OIDC-Issuer-URL. Wird für die .well-known/openid-configuration-Erkennung verwendet.",
+  "admin.authentication.sso.scopes": "Bereiche",
+  "admin.authentication.sso.scopesPlaceholder": "openid, profile, email",
+  "admin.authentication.sso.scopesHelp": "Durch Leerzeichen oder Komma getrennt. \"openid\" ist immer erforderlich. Standard: openid, profile, email.",
+  "admin.authentication.sso.buttonLabel": "Schaltflächenbeschriftung",
+  "admin.authentication.sso.buttonLabelPlaceholder": "Mit SSO anmelden",
+  "admin.authentication.sso.buttonLabelHelp": "Text, der auf der Anmeldeschaltfläche angezeigt wird. Max. 40 Zeichen. Leer lassen für Standard.",
+  "admin.authentication.sso.disablePKCE": "PKCE deaktivieren",
+  "admin.authentication.sso.disablePKCEHelp": "S256-Code-Challenge deaktivieren. Nur aktivieren, wenn Ihr Identitätsanbieter PKCE nicht unterstützt.",
+  "admin.authentication.sso.requireVerifiedEmail": "Verifizierte E-Mail erforderlich",
+  "admin.authentication.sso.requireVerifiedEmailHelp": "Anmeldung nur erlauben, wenn der Identitätsanbieter bestätigt, dass die E-Mail des Benutzers verifiziert ist.",
+  "admin.authentication.sso.autoProvision": "Konten automatisch bereitstellen",
+  "admin.authentication.sso.autoProvisionHelp": "Automatisch Konten für Benutzer erstellen, die sich zum ersten Mal über SSO anmelden. Wenn deaktiviert, können nur vorhandene Konten die SSO-Anmeldung verwenden.",
   "admin.authentication.section.emailPassword": "E-Mail & Passwort",
   "admin.authentication.section.oauth": "OAuth-Anbieter",
   "admin.authentication.section.oauthDescription": "Externe Anmeldeanbieter konfigurieren. Die Reihenfolge unten bestimmt die Anzeige auf der Anmeldeseite.",
@@ -161,6 +179,8 @@
   "admin.integrations.smtp.enable": "SMTP aktivieren",
   "admin.integrations.smtp.encryption": "Verschlüsselung",
   "admin.integrations.smtp.encryptionNone": "Keine / Klartext (Port 25)",
+  "admin.integrations.smtp.skipCertVerify": "Zertifikatsprüfung überspringen",
+  "admin.integrations.smtp.skipCertVerifyHelp": "Das Server-TLS-Zertifikat nicht überprüfen. Nur für selbst gehostete Server mit selbstsignierten oder abgelaufenen Zertifikaten verwenden.",
   "admin.integrations.smtp.encryptionStarttls": "STARTTLS (Port 587)",
   "admin.integrations.smtp.encryptionTls": "Implizites TLS/SSL (Port 465)",
   "admin.integrations.smtp.fromAddress": "Absenderadresse",
@@ -370,6 +390,9 @@
   "errors.display_name_required": "Der Anzeigename ist erforderlich.",
   "errors.email_already_exists": "Ein Benutzer mit dieser E-Mail existiert bereits.",
   "errors.last_login_method": "Sie können Ihre einzige Anmeldemethode nicht trennen. Legen Sie zuerst ein Passwort fest.",
+  "errors.sso_email_missing": "SSO-Anmeldung fehlgeschlagen: Vom Identitätsanbieter wurde keine E-Mail-Adresse zurückgegeben.",
+  "errors.sso_email_unverified": "SSO-Anmeldung fehlgeschlagen: Ihre E-Mail-Adresse ist nicht verifiziert. Bitte verifizieren Sie Ihre E-Mail bei Ihrem Identitätsanbieter und versuchen Sie es erneut.",
+  "errors.sso_account_not_provisioned": "SSO-Anmeldung fehlgeschlagen: Für diese E-Mail existiert kein Konto. Bitte kontaktieren Sie einen Administrator.",
   "errors.namespace_limit_reached": "Namespace-Eigentumslimit erreicht. Kontaktieren Sie einen Administrator, um Ihr Limit zu erhöhen.",
   "errors.namespace_slug_in_use": "Der Namespace-Slug \"{{slug}}\" wird bereits verwendet.",
   "errors.namespace_slug_invalid": "Der Namespace-Slug muss 2-30 kleingeschriebene alphanumerische Zeichen oder Bindestriche enthalten und mit einem Buchstaben beginnen.",
@@ -488,6 +511,11 @@
   "login.noAccount": "Noch kein Konto?",
   "login.oauth.authenticating": "Authentifizierung...",
   "login.oauth.backToLogin": "Zurück zur Anmeldung",
+  "login.sso.button": "Mit SSO anmelden",
+  "login.sso.error": "SSO-Anmeldung konnte nicht gestartet werden. Bitte erneut versuchen.",
+  "login.sso.authenticating": "Authentifizierung mit SSO...",
+  "login.sso.callbackError": "SSO-Authentifizierung fehlgeschlagen. Bitte erneut versuchen.",
+  "login.sso.backToLogin": "Zurück zur Anmeldung",
   "login.oauth.callbackError": "Authentifizierung fehlgeschlagen. Bitte erneut versuchen.",
   "login.oauth.error": "Anmeldung konnte nicht gestartet werden. Bitte erneut versuchen.",
   "login.or": "oder weiter mit",
@@ -1529,5 +1557,11 @@
   "inlineComments.gutterTooltip_one": "{{count}} Inline-Kommentar",
   "inlineComments.gutterTooltip_other": "{{count}} Inline-Kommentare",
   "inlineComments.prevComment": "Vorheriger Kommentar",
-  "inlineComments.nextComment": "Nächster Kommentar"
+  "inlineComments.nextComment": "Nächster Kommentar",
+  "preferences.colorTheme": "Farbthema",
+  "preferences.colorThemes.default": "Standard",
+  "preferences.colorThemes.slate": "Schiefer",
+  "preferences.colorThemes.blue": "Blau",
+  "preferences.colorThemes.green": "Grün",
+  "preferences.colorThemes.purple": "Lila"
 }
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index 6401b97f..3ef15f8b 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -47,7 +47,6 @@
   "common.autoRefresh30s": "30s",
   "common.autoRefresh1m": "1m",
   "common.autoRefresh5m": "5m",
-
   "errors.namespace_slug_invalid": "Namespace slug must be 2-30 lowercase alphanumeric characters or hyphens, starting with a letter.",
   "errors.namespace_slug_reserved": "Namespace slug \"{{slug}}\" is reserved.",
   "errors.namespace_slug_in_use": "Namespace slug \"{{slug}}\" is already in use.",
@@ -59,15 +58,12 @@
   "errors.project_limit_reached": "Project ownership limit reached. Contact an administrator to increase your limit.",
   "errors.email_already_exists": "A user with this email already exists.",
   "errors.last_login_method": "You cannot unlink your only sign-in method. Set a password first.",
-
   "brand.name": "Taskwondo",
-
   "nav.preferences": "Preferences",
   "nav.help": "Help",
   "nav.signOut": "Sign out",
   "nav.search": "Search",
   "nav.home": "Home",
-
   "login.title": "Sign in to {{brandName}}",
   "login.email": "Email",
   "login.password": "Password",
@@ -99,9 +95,16 @@
   "login.oauth.authenticating": "Authenticating...",
   "login.oauth.callbackError": "Authentication failed. Please try again.",
   "login.oauth.backToLogin": "Back to sign in",
+  "login.sso.button": "Sign in with SSO",
+  "login.sso.error": "Failed to start SSO login. Please try again.",
+  "login.sso.authenticating": "Authenticating with SSO...",
+  "login.sso.callbackError": "SSO authentication failed. Please try again.",
+  "login.sso.backToLogin": "Back to sign in",
+  "errors.sso_email_missing": "SSO login failed: no email address was returned by the identity provider.",
+  "errors.sso_email_unverified": "SSO login failed: your email address is not verified. Please verify your email with your identity provider and try again.",
+  "errors.sso_account_not_provisioned": "SSO login failed: no account exists for this email. Please contact an administrator.",
   "login.noAccount": "Don't have an account?",
   "login.createAccount": "Create an account",
-
   "register.title": "Create your account",
   "register.displayName": "Display Name",
   "register.email": "Email",
@@ -113,7 +116,6 @@
   "register.backToLogin": "Back to sign in",
   "register.haveAccount": "Already have an account?",
   "register.signIn": "Sign in",
-
   "verifyEmail.title": "Set your password",
   "verifyEmail.description": "Choose a password to complete your account setup.",
   "verifyEmail.password": "Password",
@@ -123,9 +125,7 @@
   "verifyEmail.error": "Verification failed. The link may have expired.",
   "verifyEmail.mismatch": "Passwords do not match.",
   "verifyEmail.tooShort": "Password must be at least 8 characters.",
-
   "login.forgotPassword": "Forgot your password?",
-
   "forgotPassword.title": "Reset your password",
   "forgotPassword.description": "Enter your email address and we'll send you a link to reset your password.",
   "forgotPassword.email": "Email",
@@ -135,7 +135,6 @@
   "forgotPassword.checkEmail": "Check your email",
   "forgotPassword.checkEmailDescription": "If an account exists with that email, we've sent a password reset link. The link expires in 1 hour.",
   "forgotPassword.backToLogin": "Back to sign in",
-
   "resetPassword.title": "Set a new password",
   "resetPassword.description": "Choose a new password for your account.",
   "resetPassword.password": "New Password",
@@ -146,7 +145,6 @@
   "resetPassword.mismatch": "Passwords do not match.",
   "resetPassword.tooShort": "Password must be at least 8 characters.",
   "resetPassword.backToLogin": "Back to sign in",
-
   "projects.title": "Projects",
   "projects.new": "New Project",
   "projects.empty": "No projects yet. Create one to get started.",
@@ -164,7 +162,6 @@
   "projects.table.inProgress": "In Progress",
   "projects.table.total": "Total",
   "projects.table.members": "Members",
-
   "projects.create.title": "New Project",
   "projects.create.name": "Name",
   "projects.create.namePlaceholder": "My Project",
@@ -173,7 +170,6 @@
   "projects.create.keyHint": "1-5 uppercase letters/digits, must start with a letter",
   "projects.create.description": "Description",
   "projects.create.descriptionPlaceholder": "Optional description",
-
   "projects.settings.title": "Settings",
   "projects.settings.subtitle": "Manage your project settings.",
   "projects.settings.tab.general": "General",
@@ -195,7 +191,6 @@
   "projects.settings.workflowUpdated": "Workflow mapping updated.",
   "projects.settings.workflowUpdateError": "Failed to update workflow mapping.",
   "projects.settings.selectWorkflow": "Select a workflow...",
-
   "projects.settings.complexity": "Complexity",
   "projects.settings.complexityDescription": "Define allowed complexity values for work items. Leave empty for free-form numeric input.",
   "projects.settings.complexityValues": "Allowed values",
@@ -204,7 +199,6 @@
   "projects.settings.complexitySaved": "Complexity values updated.",
   "projects.settings.complexityCleared": "Complexity values cleared. Free-form input enabled.",
   "projects.settings.complexityInvalid": "All values must be positive integers.",
-
   "projects.settings.dangerZone": "Danger Zone",
   "projects.settings.deleteProject": "Delete",
   "projects.settings.deleteWarning": "All work items, comments, and relations in this project will be permanently deleted.",
@@ -213,7 +207,6 @@
   "projects.settings.deleteConfirmType": "Please type <bold>{{projectKey}}</bold> to confirm.",
   "projects.settings.deleteConfirmButton": "I understand, delete this project",
   "projects.settings.deleteThisProject": "Delete this project",
-
   "projects.settings.members": "Members",
   "projects.settings.membersDescription": "Manage who has access to this project and their roles.",
   "projects.settings.addMember": "Add Member",
@@ -250,7 +243,6 @@
   "projects.settings.roles.viewer.description": "Read-only access to the project and its work items.",
   "projects.settings.roles.customer.description": "External user with access to the support portal only.",
   "projects.settings.addUser": "Add user",
-
   "projects.overview.openWorkItems": "Open Work Items",
   "projects.overview.tasks": "Tasks",
   "projects.overview.tickets": "Tickets",
@@ -274,14 +266,11 @@
   "projects.overview.seriesCancelled": "Cancelled",
   "projects.settings.hiddenMembers_one": "+ {{count}} other member",
   "projects.settings.hiddenMembers_other": "+ {{count}} other members",
-
   "projects.switcher.title": "Switch Project",
   "projects.switcher.search": "Search projects...",
   "projects.switcher.showAllNamespaces": "All namespaces",
-
   "projects.placeholder.comingSoon": "{{title}} view coming soon.",
   "projects.queuesComingSoon": "Queues coming soon",
-
   "sidebar.overview": "Overview",
   "sidebar.items": "Items",
   "sidebar.queues": "Queues",
@@ -293,7 +282,6 @@
   "sidebar.expand": "Expand sidebar",
   "sidebar.menu": "Menu",
   "sidebar.projects": "Projects",
-
   "workitems.title": "Work Items",
   "workitems.titleShort": "Items",
   "workitems.new": "New Item",
@@ -308,26 +296,22 @@
   "workitems.dropToAttach": "Drop files to attach",
   "workitems.selected": "{{count}} selected",
   "workitems.attached": "Attached \"{{filename}}\"",
-
   "workitems.view.list": "List",
   "workitems.view.board": "Board",
   "workitems.view.moveTo": "Move to...",
   "workitems.board.scrollLeft": "Scroll to previous status column",
   "workitems.board.scrollRight": "Scroll to next status column",
-
   "workitems.table.id": "ID",
   "workitems.table.type": "Type",
   "workitems.table.title": "Title",
   "workitems.table.status": "Status",
   "workitems.table.priority": "Priority",
   "workitems.table.updated": "Updated",
-
   "workitems.bulk.changeStatus": "Change status...",
   "workitems.bulk.assign": "Assign...",
   "workitems.bulk.unassign": "Unassign",
   "workitems.bulk.milestone": "Set milestone...",
   "workitems.bulk.transitionError": "Invalid status transition for: {{items}}",
-
   "workitems.form.project": "Project",
   "workitems.form.projectPlaceholder": "Select project",
   "workitems.form.projectSearchPlaceholder": "Search projects...",
@@ -367,9 +351,7 @@
   "workitems.form.attachmentsUploadFailed": "The work item was created, but these attachments failed to upload: {{files}}",
   "workitems.form.attachmentsLinkFailed": "The work item was created, but its description could not be updated with the attachment links.",
   "workitems.detail.updateError": "Failed to update. Please try again.",
-
   "workitems.detail.complexity": "Complexity",
-
   "workitems.detail.description": "Description",
   "workitems.detail.descriptionEditHint": "Double-click to edit",
   "workitems.detail.noDescription": "No description. Double-click to add.",
@@ -380,7 +362,6 @@
   "workitems.deleteSelectedTitle": "Delete Work Items",
   "workitems.deleteSelectedBody_one": "Are you sure you want to delete {{count}} work item? This action cannot be undone.",
   "workitems.deleteSelectedBody_other": "Are you sure you want to delete {{count}} work items? This action cannot be undone.",
-
   "workitems.detail.reporter": "Reporter",
   "workitems.detail.reporterNotMember": "This user is deactivated or no longer a member of this project",
   "workitems.detail.created": "Created",
@@ -388,7 +369,6 @@
   "workitems.detail.resolved": "Resolved",
   "workitems.detail.statusIncompatible": "Status must be updated for the new type's workflow.",
   "workitems.detail.selectStatus": "Select a status...",
-
   "workitems.filters.title": "Filters",
   "workitems.filters.search": "Search items... ( / )",
   "workitems.filters.allTypes": "Type",
@@ -400,9 +380,7 @@
   "workitems.filters.members": "Members",
   "workitems.filters.statusGroupOpen": "Open",
   "workitems.filters.statusGroupClosed": "Closed",
-
   "workitems.card.updatedAt": "Updated at {{date}}",
-
   "workitems.sort.title": "Sort by",
   "workitems.sort.created": "Date created",
   "workitems.sort.updated": "Date updated",
@@ -414,18 +392,15 @@
   "workitems.sort.sla": "SLA Deadline",
   "workitems.sort.asc": "Ascending",
   "workitems.sort.desc": "Descending",
-
   "workitems.types.task": "Task",
   "workitems.types.ticket": "Ticket",
   "workitems.types.bug": "Bug",
   "workitems.types.feedback": "Feedback",
   "workitems.types.epic": "Epic",
-
   "workitems.priorities.low": "Low",
   "workitems.priorities.medium": "Medium",
   "workitems.priorities.high": "High",
   "workitems.priorities.critical": "Critical",
-
   "workitems.statuses.backlog": "Backlog",
   "workitems.statuses.open": "Open",
   "workitems.statuses.in_progress": "In Progress",
@@ -438,25 +413,21 @@
   "workitems.statuses.waiting_on_customer": "Waiting on Customer",
   "workitems.statuses.resolved": "Resolved",
   "workitems.statuses.closed": "Closed",
-
   "workitems.visibilities.internal": "internal",
   "workitems.visibilities.internal.description": "Only project members can see this item",
   "workitems.visibilities.portal": "portal",
   "workitems.visibilities.portal.description": "Customers see limited info, members see everything",
   "workitems.visibilities.public": "public",
   "workitems.visibilities.public.description": "Anyone with the link sees limited info, members see everything",
-
   "workitems.settings.title": "Settings",
   "workitems.settings.showDates": "Show dates",
   "workitems.mobile.created": "Created",
   "workitems.mobile.updated": "Updated",
-
   "tabs.comments": "Comments",
   "tabs.activity": "Activity",
   "tabs.relations": "Relations",
   "tabs.attachments": "Attachments",
   "tabs.time": "Time",
-
   "comments.add": "Add Comment",
   "comments.adding": "Adding...",
   "comments.visibleToCustomer": "Visible to customer",
@@ -471,7 +442,6 @@
   "comments.unsavedBody": "You have an unsaved comment. If you leave, your comment will be lost.",
   "comments.discard": "Discard",
   "comments.keepEditing": "Keep editing",
-
   "inlineComments.commentButton": "Comment",
   "inlineComments.composerHeader": "Comment on the selected text",
   "inlineComments.placeholder": "Write a comment... (Cmd/Ctrl+Enter to submit, Esc to cancel)",
@@ -487,7 +457,6 @@
   "inlineComments.gutterTooltip_other": "{{count}} inline comments",
   "inlineComments.prevComment": "Previous comment",
   "inlineComments.nextComment": "Next comment",
-
   "activity.noActivity": "No activity yet.",
   "activity.createdItem": "created this item",
   "activity.addedComment": "added",
@@ -510,12 +479,10 @@
   "activity.fields.queue_id": "Queue",
   "activity.fields.complexity": "Complexity",
   "activity.fields.estimated_seconds": "Estimate",
-
   "activity.diff.title": "{{field}} change",
   "activity.diff.commentTitle": "Comment edit diff",
   "activity.diff.removed": "Removed",
   "activity.diff.added": "Added",
-
   "relations.types.blocks": "blocks",
   "relations.types.blocked_by": "blocked by",
   "relations.types.relates_to": "relates to",
@@ -528,7 +495,6 @@
   "relations.children": "Children",
   "relations.childrenProgress": "{{completed}}/{{total}} completed",
   "relations.otherRelations": "Other Relations",
-
   "attachments.noAttachments": "No attachments yet.",
   "attachments.uploadFailed": "Upload failed. Please try again.",
   "attachments.uploadFailedInline": "[Upload failed: {{filename}}]",
@@ -536,7 +502,6 @@
   "attachments.deleteTitle": "Delete Attachment",
   "attachments.deleteConfirm": "Are you sure you want to delete this attachment?",
   "attachments.editDescription": "Edit description",
-
   "timeTracking.logTime": "Log Time",
   "timeTracking.logging": "Logging...",
   "timeTracking.hours": "Hours",
@@ -551,25 +516,19 @@
   "timeTracking.estimatePlaceholder": "e.g. 2h 30m",
   "timeTracking.estimateInvalid": "Use formats like 2h, 30m, or 2h 30m.",
   "timeTracking.logged": "Logged",
-
   "preview.download": "Download",
   "preview.close": "Close",
   "preview.loadError": "Failed to load file preview.",
-
   "multiSelect.selected": "{{count}} selected",
-
   "userPicker.unassigned": "Unassigned",
   "userPicker.unknownUser": "Unknown user",
   "userPicker.searchMembers": "Search members...",
   "userPicker.noMembersFound": "No members found",
-
   "workItemPicker.searchPlaceholder": "Search by title or ID...",
   "workItemPicker.noItems": "No items found",
-
   "mention.title": "Insert link",
   "mention.searchPlaceholder": "Search to insert link...",
   "mention.noResults": "No results found",
-
   "preferences.title": "Preferences",
   "preferences.navTitle": "User Preferences",
   "preferences.sidebar.profile": "Profile",
@@ -619,11 +578,9 @@
   "preferences.layouts.centeredDesc": "Content constrained to a fixed width",
   "preferences.layouts.expanded": "Expanded",
   "preferences.layouts.expandedDesc": "Content uses the full viewport width",
-
   "preferences.completedItems": "Completed Items",
   "preferences.strikethroughCompleted": "Strikethrough completed and cancelled items",
   "preferences.strikethroughCompletedDesc": "Show a line through the title of done and cancelled work items in lists, boards, and cards.",
-
   "preferences.apiKeys": "API Keys",
   "preferences.apiKeys.manage": "Manage API Keys",
   "preferences.apiKeys.description": "API keys allow programmatic access to the API on your behalf.",
@@ -662,7 +619,6 @@
   "preferences.apiKeys.renameKey": "Rename API Key",
   "preferences.apiKeys.deleteConfirmTitle": "Delete API Key",
   "preferences.apiKeys.deleteConfirmBody": "Are you sure you want to delete the API key <bold>{{name}}</bold>? Any applications using this key will lose access.",
-
   "preferences.authentication.title": "Authentication",
   "preferences.authentication.description": "Manage your password, connected accounts, and API keys.",
   "preferences.authentication.tabs.password": "Password",
@@ -680,7 +636,6 @@
   "preferences.authentication.connectedAccounts.unlinkConfirmTitle": "Unlink Account",
   "preferences.authentication.connectedAccounts.unlinkConfirmBody": "Are you sure you want to unlink your <bold>{{provider}}</bold> account? You will no longer be able to sign in with this provider.",
   "preferences.authentication.connectedAccounts.unlinkFailed": "Failed to unlink account.",
-
   "preferences.sidebar.notifications": "Notifications",
   "preferences.notifications.title": "Notifications",
   "preferences.notifications.description": "Configure email notifications. Global notifications apply across all projects. Per-project notifications can be customized for each project.",
@@ -708,7 +663,6 @@
   "preferences.notifications.addedToProject": "Added to project",
   "preferences.notifications.addedToProjectDesc": "When you are added to a project",
   "preferences.notifications.comingSoon": "Coming soon",
-
   "shortcuts.title": "Keyboard Shortcuts",
   "shortcuts.then": "then",
   "shortcuts.navigation": "Navigation",
@@ -741,9 +695,7 @@
   "shortcuts.general": "General",
   "shortcuts.general.showShortcuts": "Show keyboard shortcuts",
   "shortcuts.general.closeModal": "Close modal",
-
   "nav.systemSettings": "System Settings",
-
   "admin.title": "System Settings",
   "admin.titleShort": "System",
   "admin.sidebar.general": "General",
@@ -753,7 +705,6 @@
   "admin.sidebar.authentication": "Authentication",
   "admin.sidebar.features": "Features",
   "admin.sidebar.apiKeys": "API Keys",
-
   "admin.apiKeys.title": "System API Keys",
   "admin.apiKeys.description": "Manage system-wide API keys with granular resource-based permissions. These keys are not tied to any user account.",
   "admin.apiKeys.createNew": "Create System API Key",
@@ -788,24 +739,20 @@
   "admin.apiKeys.accessRead": "Read",
   "admin.apiKeys.accessWrite": "Write",
   "admin.apiKeys.accessReadWrite": "Read & Write",
-
   "admin.general.title": "General",
   "admin.general.description": "Configure general system settings.",
   "admin.general.brand.title": "Brand",
   "admin.general.brand.name": "Brand name",
   "admin.general.brand.nameHelp": "The name displayed in the navigation bar and login page. Leave empty to use the default.",
   "admin.general.brand.saved": "Brand name saved.",
-
   "admin.general.projectLimit.title": "Project Limits",
   "admin.general.projectLimit.label": "Max projects per user",
   "admin.general.projectLimit.help": "Default limit for non-admin users. Set to 0 for unlimited. Admins are always exempt. Override per user in the list below.",
   "admin.general.projectLimit.saved": "Project limit saved.",
-
   "admin.general.namespaceLimit.title": "Namespace Limits",
   "admin.general.namespaceLimit.label": "Max namespaces per user",
   "admin.general.namespaceLimit.help": "Default limit for non-admin users. Set to 0 for unlimited. Admins are always exempt. Override per user in the list below.",
   "admin.general.namespaceLimit.saved": "Namespace limit saved.",
-
   "admin.users.title": "Users",
   "admin.users.description": "Manage user accounts, roles, and project access.",
   "admin.users.name": "Name",
@@ -822,10 +769,8 @@
   "admin.users.filterAll": "All users",
   "admin.users.noUsers": "No users found.",
   "admin.users.noProjects": "Not a member of any projects.",
-
   "admin.users.roles.admin": "Admin",
   "admin.users.roles.user": "User",
-
   "admin.users.addToProject": "Add to project",
   "admin.users.selectProject": "Select a project...",
   "admin.users.projectRole": "Role",
@@ -841,15 +786,12 @@
   "admin.users.maxNamespacesDefault": "default",
   "admin.users.maxNamespacesHelp": "Per-user namespace limit. Empty = default, 0 = unlimited.",
   "admin.users.alreadyMember": "User is already a member of this project.",
-
   "admin.users.disableConfirmTitle": "Disable User",
   "admin.users.disableConfirmBody": "Are you sure you want to disable <bold>{{name}}</bold>? They will not be able to log in.",
   "admin.users.disableConfirmButton": "Disable",
-
   "admin.users.removeFromProjectTitle": "Remove from Project",
   "admin.users.removeFromProjectBody": "Are you sure you want to remove <bold>{{name}}</bold> from <bold>{{project}}</bold>?",
   "admin.users.removeFromProjectButton": "Remove",
-
   "admin.users.createUser": "New User",
   "admin.users.createUserTitle": "Create New User",
   "admin.users.createUserDescription": "The user will be created with a temporary password that must be changed on first login.",
@@ -858,16 +800,13 @@
   "admin.users.createUserButton": "Create User",
   "admin.users.createUserError": "Failed to create user.",
   "admin.users.emailExists": "A user with this email already exists.",
-
   "admin.users.temporaryPasswordTitle": "Temporary Password",
   "admin.users.temporaryPasswordDescription": "Temporary password for {{name}}:",
   "admin.users.temporaryPasswordWarning": "This password will only be shown once. Make sure to copy it now.",
-
   "admin.users.resetPasswordTitle": "Reset Password",
   "admin.users.resetPasswordBody": "Generate a new temporary password for <bold>{{name}}</bold>? They will need to change it on next login.",
   "admin.users.resetPasswordButton": "Reset Password",
   "admin.users.resetPasswordError": "Failed to reset password.",
-
   "admin.workflows.title": "Workflows",
   "admin.workflows.description": "Manage system-wide workflows available to all projects.",
   "admin.workflows.noWorkflows": "No system workflows yet.",
@@ -876,7 +815,6 @@
   "admin.workflows.selectWorkflow": "Select workflow",
   "admin.workflows.cannotDeleteDefault": "Default workflows cannot be deleted.",
   "admin.workflows.updateError": "Failed to update default workflow.",
-
   "admin.authentication.title": "Authentication",
   "admin.authentication.description": "Control which authentication methods are available.",
   "admin.authentication.section.emailPassword": "Email & Password",
@@ -903,7 +841,24 @@
   "admin.authentication.oauth.saveError": "Failed to save configuration.",
   "admin.authentication.oauth.notConfigured": "Not configured. Add credentials to enable this provider.",
   "admin.authentication.oauth.changeOrder": "Change order",
-
+  "admin.authentication.oauth.errorValidation": "Configuration error: {{detail}}",
+  "admin.authentication.sso.title": "Custom SSO (OIDC)",
+  "admin.authentication.sso.description": "Allow users to sign in with a custom OpenID Connect identity provider.",
+  "admin.authentication.sso.issuer": "Issuer URL",
+  "admin.authentication.sso.issuerPlaceholder": "https://idp.example.com",
+  "admin.authentication.sso.issuerHelp": "The OIDC issuer URL. Used for .well-known/openid-configuration discovery.",
+  "admin.authentication.sso.scopes": "Scopes",
+  "admin.authentication.sso.scopesPlaceholder": "openid, profile, email",
+  "admin.authentication.sso.scopesHelp": "Space or comma separated. \"openid\" is always required. Defaults to: openid, profile, email.",
+  "admin.authentication.sso.buttonLabel": "Button label",
+  "admin.authentication.sso.buttonLabelPlaceholder": "Sign in with SSO",
+  "admin.authentication.sso.buttonLabelHelp": "Text shown on the login button. Max 40 characters. Leave empty for default.",
+  "admin.authentication.sso.disablePKCE": "Disable PKCE",
+  "admin.authentication.sso.disablePKCEHelp": "Disable S256 code challenge. Only enable if your identity provider does not support PKCE.",
+  "admin.authentication.sso.requireVerifiedEmail": "Require verified email",
+  "admin.authentication.sso.requireVerifiedEmailHelp": "Only allow login when the identity provider confirms the user's email is verified.",
+  "admin.authentication.sso.autoProvision": "Auto-provision accounts",
+  "admin.authentication.sso.autoProvisionHelp": "Automatically create accounts for users who sign in via SSO for the first time. When disabled, only existing accounts can use SSO login.",
   "admin.features.title": "Features",
   "admin.features.description": "Enable or disable features globally across the platform.",
   "admin.features.statsTimeline.title": "Activity Graph",
@@ -913,7 +868,6 @@
   "admin.features.semanticSearch.ollamaAvailable": "Ollama is connected and ready.",
   "admin.features.semanticSearch.ollamaUnavailable": "Ollama is not available. Add Ollama to your deployment to enable this feature.",
   "common.experimental": "Experimental",
-
   "admin.integrations.title": "Integrations",
   "admin.integrations.description": "Configure external service integrations.",
   "admin.integrations.smtp.title": "Email (SMTP)",
@@ -932,6 +886,8 @@
   "admin.integrations.smtp.encryptionStarttls": "STARTTLS (port 587)",
   "admin.integrations.smtp.encryptionTls": "Implicit TLS/SSL (port 465)",
   "admin.integrations.smtp.encryptionNone": "None / Plaintext (port 25)",
+  "admin.integrations.smtp.skipCertVerify": "Skip certificate verification",
+  "admin.integrations.smtp.skipCertVerifyHelp": "Do not verify the server TLS certificate. Use only for self-hosted servers with self-signed or expired certificates.",
   "admin.integrations.smtp.fromAddress": "From Address",
   "admin.integrations.smtp.fromAddressPlaceholder": "notifications@company.com",
   "admin.integrations.smtp.fromName": "From Name",
@@ -944,7 +900,6 @@
   "admin.integrations.smtp.testEmailError": "Failed to send test e-mail: {{error}}",
   "admin.integrations.smtp.imapSection": "Inbound (IMAP)",
   "admin.integrations.smtp.imapHelp": "IMAP settings for future inbound e-mail support.",
-
   "changePassword.title": "Change Password",
   "changePassword.description": "You must change your password before continuing.",
   "changePassword.oldPassword": "Current Password",
@@ -955,9 +910,7 @@
   "changePassword.mismatch": "Passwords do not match.",
   "changePassword.tooShort": "Password must be at least 8 characters.",
   "changePassword.error": "Failed to change password.",
-
   "footer.poweredBy": "Powered by <brand>Taskwondo</brand>",
-
   "milestones.title": "Milestones",
   "milestones.description": "Track progress toward goals with milestones.",
   "milestones.create": "New Milestone",
@@ -1012,11 +965,9 @@
   "milestone.dashboard.dangerZone": "Danger Zone",
   "milestone.dashboard.deleteThisMilestone": "Delete this milestone",
   "milestone.dashboard.deleteWarning": "Work items will be unassigned but not deleted. This action cannot be undone.",
-
   "workitems.form.milestone": "Milestone",
   "workitems.filters.allMilestones": "Milestone",
   "workitems.filters.noMilestone": "No milestone",
-
   "workflows.title": "Workflows",
   "workflows.description": "Manage workflows, escalation rules, and SLA settings for this project.",
   "workflows.tab.workflow": "Workflow",
@@ -1058,7 +1009,6 @@
   "workflows.deleteError": "Failed to delete workflow.",
   "workflows.deleteConfirmTitle": "Delete Workflow",
   "workflows.deleteConfirmBody": "Are you sure you want to delete the workflow \"{{name}}\"? This action cannot be undone.",
-
   "sla.title": "SLA Targets",
   "sla.columnHeader": "SLA",
   "sla.titleForType": "SLA Targets for {{type}}",
@@ -1090,7 +1040,6 @@
   "sla.setPerPriority": "Set SLA per priority",
   "sla.perPriorityHint": "Configure different SLA targets for each priority level. Expand a priority section to customize its durations.",
   "sla.overwriteWarning": "Per-priority values were different. Showing Critical priority values. Saving will apply these values to all priorities.",
-
   "escalation.title": "Escalation Lists",
   "escalation.description": "Define named escalation lists with threshold levels and user recipients for SLA notifications.",
   "escalation.create": "New Escalation List",
@@ -1131,7 +1080,6 @@
   "escalation.noSlaWarning": "No SLA targets configured — breach detection won't trigger.",
   "escalation.saveError": "Failed to save escalation list.",
   "escalation.deleteError": "Failed to delete escalation list.",
-
   "businessHours.title": "Business Hours",
   "businessHours.description": "Define business hours for SLA calculations using business_hours calendar mode.",
   "businessHours.days": "Business Days",
@@ -1150,7 +1098,6 @@
   "businessHours.saveSuccess": "Business hours saved.",
   "businessHours.clear": "Clear business hours",
   "businessHours.notConfigured": "Not configured. SLA targets using business_hours mode will fall back to 24/7.",
-
   "welcome.title": "Welcome",
   "welcome.next": "Next",
   "welcome.previous": "Previous",
@@ -1174,7 +1121,6 @@
   "welcome.feed.description": "The feed shows recent activity across all your namespaces and projects — status changes, new comments, and updates from your team. Stay informed about what's happening without checking each project individually.",
   "welcome.watchlist.title": "Watchlist",
   "welcome.watchlist.description": "Add work items from any namespace or project to your watchlist to track their progress without being directly assigned. Get notified of changes to items you care about, even across different projects.",
-
   "projects.settings.invites": "Invite Links",
   "projects.settings.invitesDescription": "Create shareable links to invite people to this project.",
   "projects.settings.createInvite": "Create Invite Link",
@@ -1200,7 +1146,6 @@
   "projects.settings.inviteAdminWarning": "Admin invites grant full project management access. If the link leaks, your project data could be exposed. Use with caution.",
   "projects.settings.inviteCreateError": "Failed to create invite link.",
   "projects.settings.inviteDeleteError": "Failed to revoke invite link.",
-
   "invite.title": "You've been invited",
   "invite.joinAs": "Join <bold>{{projectName}}</bold> as {{role}}",
   "invite.joinNamespaceAs": "Join <bold>{{namespaceName}}</bold> as {{role}}",
@@ -1215,7 +1160,6 @@
   "invite.error": "Failed to join. Please try again.",
   "invite.accepted": "Invite to {{projectName}} accepted",
   "invite.roleNotApplied": "You already have {{existingRole}} access — the {{inviteRole}} invite was not applied.",
-
   "cliAuth.title": "Authorize CLI Access",
   "cliAuth.description": "'{{clientName}}' wants to access your account.",
   "cliAuth.loggedInAs": "Logged in as {{displayName}} ({{email}})",
@@ -1227,7 +1171,6 @@
   "cliAuth.denied": "Authorization denied. You can close this tab.",
   "cliAuth.error": "Authorization failed. Please try again.",
   "cliAuth.missingParams": "Missing required parameters. Please start the login flow from your CLI tool.",
-
   "inbox.title": "Inbox",
   "inbox.empty": "Your inbox is empty",
   "inbox.emptyHint": "Use the inbox icon or press 'i' on a work item to add it here",
@@ -1252,7 +1195,6 @@
   "user.sidebar.watchlist": "Watchlist",
   "user.feedComingSoon": "Feeds coming soon",
   "user.watchlistComingSoon": "Watchlist coming soon",
-
   "savedSearches.title": "Saved Searches",
   "savedSearches.titleShort": "Saved",
   "savedSearches.mySearches": "My Searches",
@@ -1276,7 +1218,6 @@
   "savedSearches.orderMode": "Order",
   "workitems.filters.save": "Save current filters",
   "workitems.filters.clearAll": "Clear all filters",
-
   "watchers.watch": "Watch",
   "watchers.unwatch": "Unwatch",
   "watchers.watchersTab": "Watchers",
@@ -1289,14 +1230,12 @@
   "watchers.totalWatchers_one": "{{count}} watcher",
   "watchers.watchersField": "Watchers",
   "watchers.pickWatchers": "Add watchers...",
-
   "watchlist.title": "Watchlist",
   "watchlist.titleShort": "Watchlist",
   "watchlist.allProjects": "All Projects",
   "watchlist.filterByProject": "Filter by Project",
   "watchlist.empty": "You're not watching any items yet",
   "watchlist.emptyHint": "Use the bell icon on work items to add them to your watchlist",
-
   "search.hint": "Type at least 2 characters to search",
   "search.noResults": "No results found",
   "search.showMore": "Show more results",
@@ -1315,8 +1254,6 @@
   "search.entityType.queue": "Queues",
   "search.entityType.comment": "Comments",
   "search.entityType.attachment": "Attachments",
-
-
   "namespaces.title": "Namespaces",
   "namespaces.namespace": "Namespace",
   "namespaces.default": "public",
@@ -1377,7 +1314,6 @@
   "namespaces.inviteDeleteError": "Failed to revoke invite.",
   "namespaces.revokeInviteConfirmTitle": "Revoke invite",
   "namespaces.revokeInviteConfirmBody": "Are you sure you want to revoke the invite for <bold>{{email}}</bold>?",
-
   "palette.placeholder": "Search or jump to...",
   "palette.group.project": "Project {{project}}",
   "palette.group.user": "Workspace",
@@ -1386,7 +1322,6 @@
   "palette.group.namespace": "Namespaces",
   "palette.nav.switchToNamespace": "Switch to {{name}}",
   "palette.nav.namespaceSettings": "{{name}} settings",
-
   "projects.settings.transferNamespace": "Transfer to another namespace",
   "projects.settings.transferNamespaceDescription": "Move this project to a different namespace.",
   "projects.settings.transfer": "Transfer",
@@ -1397,7 +1332,6 @@
   "projects.settings.selectNamespace": "Select a namespace...",
   "projects.settings.transferConfirmButton": "Transfer project",
   "projects.settings.transferError": "Failed to transfer project.",
-
   "admin.directory.title": "Directory",
   "admin.directory.description": "Manage users, projects, and namespaces across the server.",
   "admin.directory.tab.users": "Users",
@@ -1444,13 +1378,10 @@
   "admin.directory.settings.reservedKeys.empty": "No reserved project keys.",
   "admin.directory.settings.add": "Add",
   "admin.directory.settings.duplicate": "Already in the list.",
-
   "admin.features.namespaces.title": "Namespaces",
   "admin.features.namespaces.description": "Enable namespace support for multi-tenancy. Allows creating isolated project groups with separate project key scopes.",
   "admin.features.namespaces.cannotDisable": "Cannot disable while {{count}} custom namespaces exist. Delete them first.",
-
   "sidebar.teams": "Teams",
-
   "teams.title": "Teams",
   "teams.description": "Manage teams and their members within this project.",
   "teams.create": "Create team",
@@ -1480,7 +1411,6 @@
   "teams.createError": "Failed to create team.",
   "teams.updateError": "Failed to update team.",
   "teams.deleteError": "Failed to delete team.",
-
   "teams.oncall.title": "On-Call",
   "teams.oncall.noRotation": "No on-call rotation configured for this team.",
   "teams.oncall.setUp": "Set Up On-Call",
@@ -1543,7 +1473,6 @@
   "teams.oncall.override.covering": "Covering: {{name}}",
   "teams.oncall.override.invalidTimeRange": "End time must be after start time.",
   "teams.oncall.override.selectMember": "Select a member",
-
   "queues.title": "Queues",
   "queues.description": "Manage inbound work channels for this project.",
   "queues.settings": "Queue Settings",
@@ -1572,7 +1501,6 @@
   "queues.dangerZone": "Danger Zone",
   "queues.dangerZoneDescription": "Deleting a queue will remove all items and settings. This action cannot be undone.",
   "queues.deleteQueue": "Delete queue",
-
   "queues.categories": "Categories",
   "queues.categories.create": "Add category",
   "queues.categories.createCategory": "Create Category",
@@ -1588,7 +1516,6 @@
   "queues.categories.createError": "Failed to create category.",
   "queues.categories.updateError": "Failed to update category.",
   "queues.categories.deleteError": "Failed to delete category.",
-
   "queues.teams": "Assigned Teams",
   "queues.teams.assign": "Assign team",
   "queues.teams.selectTeam": "Select a team...",
@@ -1598,12 +1525,10 @@
   "queues.teams.unassignConfirmBody": "Are you sure you want to unassign <bold>{{name}}</bold> from this queue?",
   "queues.teams.assignError": "Failed to assign team.",
   "queues.teams.unassignError": "Failed to unassign team.",
-
   "queues.workItems": "Queue Items",
   "queues.viewItems": "View items",
   "queues.backToQueues": "Back to queues",
   "queues.noItems": "No items in this queue.",
-
   "portal.noDescription": "No description. Click to add one.",
   "portal.myTickets": "My Tickets",
   "portal.createTicket": "Create Ticket",
@@ -1632,5 +1557,11 @@
   "portal.changedField": "changed {{field}}",
   "portal.errorTitleRequired": "Title is required.",
   "portal.errorQueueRequired": "Please select a queue.",
-  "portal.errorCreateFailed": "Failed to create ticket."
+  "portal.errorCreateFailed": "Failed to create ticket.",
+  "preferences.colorTheme": "Color Theme",
+  "preferences.colorThemes.default": "Indigo",
+  "preferences.colorThemes.slate": "Slate",
+  "preferences.colorThemes.blue": "Blue",
+  "preferences.colorThemes.green": "Green",
+  "preferences.colorThemes.purple": "Purple"
 }
diff --git a/web/src/i18n/es.json b/web/src/i18n/es.json
index 5bf00c1f..cc96e42e 100644
--- a/web/src/i18n/es.json
+++ b/web/src/i18n/es.json
@@ -74,6 +74,7 @@
   "admin.authentication.microsoft.description": "Permitir a los usuarios iniciar sesión con su cuenta de Microsoft.",
   "admin.authentication.microsoft.title": "Microsoft",
   "admin.authentication.oauth.changeOrder": "Cambiar orden",
+  "admin.authentication.oauth.errorValidation": "Error de configuración: {{detail}}",
   "admin.authentication.oauth.clientId": "ID de cliente",
   "admin.authentication.oauth.clientSecret": "Secreto de cliente",
   "admin.authentication.oauth.notConfigured": "No configurado. Agregue credenciales para habilitar este proveedor.",
@@ -81,6 +82,23 @@
   "admin.authentication.oauth.redirectUriHint": "determinado automáticamente",
   "admin.authentication.oauth.saveError": "Error al guardar la configuración.",
   "admin.authentication.oauth.saved": "Configuración guardada.",
+  "admin.authentication.sso.title": "SSO personalizado (OIDC)",
+  "admin.authentication.sso.description": "Permitir a los usuarios iniciar sesión con un proveedor de identidad OpenID Connect personalizado.",
+  "admin.authentication.sso.issuer": "URL del emisor",
+  "admin.authentication.sso.issuerPlaceholder": "https://idp.example.com",
+  "admin.authentication.sso.issuerHelp": "La URL del emisor OIDC. Se utiliza para el descubrimiento de .well-known/openid-configuration.",
+  "admin.authentication.sso.scopes": "Ámbitos",
+  "admin.authentication.sso.scopesPlaceholder": "openid, profile, email",
+  "admin.authentication.sso.scopesHelp": "Separados por espacio o coma. \"openid\" siempre es obligatorio. Predeterminado: openid, profile, email.",
+  "admin.authentication.sso.buttonLabel": "Etiqueta del botón",
+  "admin.authentication.sso.buttonLabelPlaceholder": "Iniciar sesión con SSO",
+  "admin.authentication.sso.buttonLabelHelp": "Texto que se muestra en el botón de inicio de sesión. Máximo 40 caracteres. Dejar vacío para usar el predeterminado.",
+  "admin.authentication.sso.disablePKCE": "Desactivar PKCE",
+  "admin.authentication.sso.disablePKCEHelp": "Desactivar el desafío de código S256. Solo habilitar si su proveedor de identidad no admite PKCE.",
+  "admin.authentication.sso.requireVerifiedEmail": "Requerir correo electrónico verificado",
+  "admin.authentication.sso.requireVerifiedEmailHelp": "Solo permitir el inicio de sesión cuando el proveedor de identidad confirme que el correo electrónico del usuario está verificado.",
+  "admin.authentication.sso.autoProvision": "Aprovisionamiento automático de cuentas",
+  "admin.authentication.sso.autoProvisionHelp": "Crear automáticamente cuentas para usuarios que inician sesión mediante SSO por primera vez. Cuando está desactivado, solo las cuentas existentes pueden usar el inicio de sesión SSO.",
   "admin.authentication.section.emailPassword": "Correo electrónico y contraseña",
   "admin.authentication.section.oauth": "Proveedores OAuth",
   "admin.authentication.section.oauthDescription": "Configurar proveedores de inicio de sesión externos. El orden a continuación determina cómo aparecen en la página de inicio de sesión.",
@@ -161,6 +179,8 @@
   "admin.integrations.smtp.enable": "Habilitar SMTP",
   "admin.integrations.smtp.encryption": "Cifrado",
   "admin.integrations.smtp.encryptionNone": "Ninguno / Texto plano (puerto 25)",
+  "admin.integrations.smtp.skipCertVerify": "Omitir la verificación del certificado",
+  "admin.integrations.smtp.skipCertVerifyHelp": "No verificar el certificado TLS del servidor. Úselo solo con servidores autoalojados con certificados autofirmados o caducados.",
   "admin.integrations.smtp.encryptionStarttls": "STARTTLS (puerto 587)",
   "admin.integrations.smtp.encryptionTls": "TLS/SSL implícito (puerto 465)",
   "admin.integrations.smtp.fromAddress": "Dirección del remitente",
@@ -370,6 +390,9 @@
   "errors.display_name_required": "El nombre para mostrar es obligatorio.",
   "errors.email_already_exists": "Ya existe un usuario con este correo electrónico.",
   "errors.last_login_method": "No puede desvincular su único método de inicio de sesión. Establezca una contraseña primero.",
+  "errors.sso_email_missing": "Error de inicio de sesión SSO: el proveedor de identidad no devolvió ninguna dirección de correo electrónico.",
+  "errors.sso_email_unverified": "Error de inicio de sesión SSO: su dirección de correo electrónico no está verificada. Verifique su correo electrónico con su proveedor de identidad e inténtelo de nuevo.",
+  "errors.sso_account_not_provisioned": "Error de inicio de sesión SSO: no existe una cuenta para este correo electrónico. Póngase en contacto con un administrador.",
   "errors.namespace_limit_reached": "Límite de propiedad de namespaces alcanzado. Contacte a un administrador para aumentar su límite.",
   "errors.namespace_slug_in_use": "El identificador de namespace \"{{slug}}\" ya está en uso.",
   "errors.namespace_slug_invalid": "El identificador del namespace debe tener 2-30 caracteres alfanuméricos en minúsculas o guiones, comenzando con una letra.",
@@ -488,6 +511,11 @@
   "login.noAccount": "¿No tienes una cuenta?",
   "login.oauth.authenticating": "Autenticando...",
   "login.oauth.backToLogin": "Volver al inicio de sesión",
+  "login.sso.button": "Iniciar sesión con SSO",
+  "login.sso.error": "Error al iniciar el inicio de sesión SSO. Inténtelo de nuevo.",
+  "login.sso.authenticating": "Autenticando con SSO...",
+  "login.sso.callbackError": "La autenticación SSO falló. Inténtelo de nuevo.",
+  "login.sso.backToLogin": "Volver al inicio de sesión",
   "login.oauth.callbackError": "Falló la autenticación. Intente de nuevo.",
   "login.oauth.error": "Error al iniciar sesión. Intente de nuevo.",
   "login.or": "o continuar con",
@@ -1529,5 +1557,11 @@
   "inlineComments.gutterTooltip_one": "{{count}} comentario en línea",
   "inlineComments.gutterTooltip_other": "{{count}} comentarios en línea",
   "inlineComments.prevComment": "Comentario anterior",
-  "inlineComments.nextComment": "Comentario siguiente"
+  "inlineComments.nextComment": "Comentario siguiente",
+  "preferences.colorTheme": "Tema de color",
+  "preferences.colorThemes.default": "Índigo",
+  "preferences.colorThemes.slate": "Pizarra",
+  "preferences.colorThemes.blue": "Azul",
+  "preferences.colorThemes.green": "Verde",
+  "preferences.colorThemes.purple": "Púrpura"
 }
diff --git a/web/src/i18n/fr.json b/web/src/i18n/fr.json
index 897c0218..8a92fb26 100644
--- a/web/src/i18n/fr.json
+++ b/web/src/i18n/fr.json
@@ -74,6 +74,7 @@
   "admin.authentication.microsoft.description": "Permettre aux utilisateurs de se connecter avec leur compte Microsoft.",
   "admin.authentication.microsoft.title": "Microsoft",
   "admin.authentication.oauth.changeOrder": "Modifier l'ordre",
+  "admin.authentication.oauth.errorValidation": "Erreur de configuration : {{detail}}",
   "admin.authentication.oauth.clientId": "ID client",
   "admin.authentication.oauth.clientSecret": "Secret client",
   "admin.authentication.oauth.notConfigured": "Non configuré. Ajoutez des identifiants pour activer ce fournisseur.",
@@ -81,6 +82,23 @@
   "admin.authentication.oauth.redirectUriHint": "déterminé automatiquement",
   "admin.authentication.oauth.saveError": "Échec de l'enregistrement de la configuration.",
   "admin.authentication.oauth.saved": "Configuration enregistrée.",
+  "admin.authentication.sso.title": "SSO personnalisé (OIDC)",
+  "admin.authentication.sso.description": "Permettre aux utilisateurs de se connecter avec un fournisseur d'identité OpenID Connect personnalisé.",
+  "admin.authentication.sso.issuer": "URL de l'émetteur",
+  "admin.authentication.sso.issuerPlaceholder": "https://idp.example.com",
+  "admin.authentication.sso.issuerHelp": "L'URL de l'émetteur OIDC. Utilisée pour la découverte .well-known/openid-configuration.",
+  "admin.authentication.sso.scopes": "Portées",
+  "admin.authentication.sso.scopesPlaceholder": "openid, profile, email",
+  "admin.authentication.sso.scopesHelp": "Séparées par des espaces ou des virgules. \"openid\" est toujours requis. Par défaut : openid, profile, email.",
+  "admin.authentication.sso.buttonLabel": "Libellé du bouton",
+  "admin.authentication.sso.buttonLabelPlaceholder": "Se connecter avec SSO",
+  "admin.authentication.sso.buttonLabelHelp": "Texte affiché sur le bouton de connexion. Maximum 40 caractères. Laisser vide pour la valeur par défaut.",
+  "admin.authentication.sso.disablePKCE": "Désactiver PKCE",
+  "admin.authentication.sso.disablePKCEHelp": "Désactiver le défi de code S256. Activer uniquement si votre fournisseur d'identité ne prend pas en charge PKCE.",
+  "admin.authentication.sso.requireVerifiedEmail": "Exiger un e-mail vérifié",
+  "admin.authentication.sso.requireVerifiedEmailHelp": "N'autoriser la connexion que lorsque le fournisseur d'identité confirme que l'e-mail de l'utilisateur est vérifié.",
+  "admin.authentication.sso.autoProvision": "Approvisionnement automatique des comptes",
+  "admin.authentication.sso.autoProvisionHelp": "Créer automatiquement des comptes pour les utilisateurs qui se connectent via SSO pour la première fois. Lorsque désactivé, seuls les comptes existants peuvent utiliser la connexion SSO.",
   "admin.authentication.section.emailPassword": "E-mail et mot de passe",
   "admin.authentication.section.oauth": "Fournisseurs OAuth",
   "admin.authentication.section.oauthDescription": "Configurer les fournisseurs de connexion externes. L'ordre ci-dessous détermine leur affichage sur la page de connexion.",
@@ -161,6 +179,8 @@
   "admin.integrations.smtp.enable": "Activer SMTP",
   "admin.integrations.smtp.encryption": "Chiffrement",
   "admin.integrations.smtp.encryptionNone": "Aucun / Texte brut (port 25)",
+  "admin.integrations.smtp.skipCertVerify": "Ignorer la vérification du certificat",
+  "admin.integrations.smtp.skipCertVerifyHelp": "Ne pas vérifier le certificat TLS du serveur. À n'utiliser que pour les serveurs auto-hébergés avec des certificats auto-signés ou expirés.",
   "admin.integrations.smtp.encryptionStarttls": "STARTTLS (port 587)",
   "admin.integrations.smtp.encryptionTls": "TLS/SSL implicite (port 465)",
   "admin.integrations.smtp.fromAddress": "Adresse d'expédition",
@@ -370,6 +390,9 @@
   "errors.display_name_required": "Le nom d'affichage est obligatoire.",
   "errors.email_already_exists": "Un utilisateur avec cet e-mail existe déjà.",
   "errors.last_login_method": "Vous ne pouvez pas dissocier votre seule méthode de connexion. Définissez d'abord un mot de passe.",
+  "errors.sso_email_missing": "Échec de la connexion SSO : aucune adresse e-mail n'a été retournée par le fournisseur d'identité.",
+  "errors.sso_email_unverified": "Échec de la connexion SSO : votre adresse e-mail n'est pas vérifiée. Veuillez vérifier votre e-mail auprès de votre fournisseur d'identité et réessayer.",
+  "errors.sso_account_not_provisioned": "Échec de la connexion SSO : aucun compte n'existe pour cet e-mail. Veuillez contacter un administrateur.",
   "errors.namespace_limit_reached": "Limite de propriété de namespaces atteinte. Contactez un administrateur pour augmenter votre limite.",
   "errors.namespace_slug_in_use": "Le slug de namespace \"{{slug}}\" est déjà utilisé.",
   "errors.namespace_slug_invalid": "Le slug du namespace doit contenir 2 à 30 caractères alphanumériques minuscules ou tirets, commençant par une lettre.",
@@ -488,6 +511,11 @@
   "login.noAccount": "Vous n'avez pas de compte ?",
   "login.oauth.authenticating": "Authentification...",
   "login.oauth.backToLogin": "Retour à la connexion",
+  "login.sso.button": "Se connecter avec SSO",
+  "login.sso.error": "Échec du lancement de la connexion SSO. Veuillez réessayer.",
+  "login.sso.authenticating": "Authentification avec SSO...",
+  "login.sso.callbackError": "L'authentification SSO a échoué. Veuillez réessayer.",
+  "login.sso.backToLogin": "Retour à la connexion",
   "login.oauth.callbackError": "Échec de l'authentification. Veuillez réessayer.",
   "login.oauth.error": "Échec du lancement de la connexion. Veuillez réessayer.",
   "login.or": "ou continuer avec",
@@ -1529,5 +1557,11 @@
   "inlineComments.gutterTooltip_one": "{{count}} commentaire intégré",
   "inlineComments.gutterTooltip_other": "{{count}} commentaires intégrés",
   "inlineComments.prevComment": "Commentaire précédent",
-  "inlineComments.nextComment": "Commentaire suivant"
+  "inlineComments.nextComment": "Commentaire suivant",
+  "preferences.colorTheme": "Thème de couleur",
+  "preferences.colorThemes.default": "Par défaut",
+  "preferences.colorThemes.slate": "Ardoise",
+  "preferences.colorThemes.blue": "Bleu",
+  "preferences.colorThemes.green": "Vert",
+  "preferences.colorThemes.purple": "Violet"
 }
diff --git a/web/src/i18n/i18n.test.ts b/web/src/i18n/i18n.test.ts
index 6448ffed..6478b6c6 100644
--- a/web/src/i18n/i18n.test.ts
+++ b/web/src/i18n/i18n.test.ts
@@ -34,6 +34,8 @@ const SAME_VALUE_ALLOWED = new Set([
   'admin.integrations.smtp.smtpHostPlaceholder',
   'admin.integrations.smtp.usernamePlaceholder',
   'admin.integrations.smtp.encryptionStarttls',
+  'admin.authentication.sso.issuerPlaceholder',
+  'admin.authentication.sso.scopesPlaceholder',
   'sla.durationPlaceholder',
   'timeTracking.durationPlaceholder',
   'projects.create.keyPlaceholder',
diff --git a/web/src/i18n/ja.json b/web/src/i18n/ja.json
index 402346e3..fb166779 100644
--- a/web/src/i18n/ja.json
+++ b/web/src/i18n/ja.json
@@ -74,6 +74,7 @@
   "admin.authentication.microsoft.description": "ユーザーがMicrosoftアカウントでサインインできるようにします。",
   "admin.authentication.microsoft.title": "Microsoft",
   "admin.authentication.oauth.changeOrder": "順序を変更",
+  "admin.authentication.oauth.errorValidation": "設定エラー: {{detail}}",
   "admin.authentication.oauth.clientId": "クライアントID",
   "admin.authentication.oauth.clientSecret": "クライアントシークレット",
   "admin.authentication.oauth.notConfigured": "未設定です。このプロバイダーを有効にするには認証情報を追加してください。",
@@ -81,6 +82,23 @@
   "admin.authentication.oauth.redirectUriHint": "自動的に決定",
   "admin.authentication.oauth.saveError": "設定の保存に失敗しました。",
   "admin.authentication.oauth.saved": "設定を保存しました。",
+  "admin.authentication.sso.title": "カスタムSSO (OIDC)",
+  "admin.authentication.sso.description": "ユーザーがカスタムOpenID Connectアイデンティティプロバイダーでサインインできるようにします。",
+  "admin.authentication.sso.issuer": "発行者URL",
+  "admin.authentication.sso.issuerPlaceholder": "https://idp.example.com",
+  "admin.authentication.sso.issuerHelp": "OIDC発行者URL。.well-known/openid-configurationの検出に使用されます。",
+  "admin.authentication.sso.scopes": "スコープ",
+  "admin.authentication.sso.scopesPlaceholder": "openid, profile, email",
+  "admin.authentication.sso.scopesHelp": "スペースまたはカンマ区切り。\"openid\"は常に必須です。デフォルト: openid, profile, email。",
+  "admin.authentication.sso.buttonLabel": "ボタンラベル",
+  "admin.authentication.sso.buttonLabelPlaceholder": "SSOでサインイン",
+  "admin.authentication.sso.buttonLabelHelp": "ログインボタンに表示されるテキスト。最大40文字。空欄の場合はデフォルトが使用されます。",
+  "admin.authentication.sso.disablePKCE": "PKCEを無効にする",
+  "admin.authentication.sso.disablePKCEHelp": "S256コードチャレンジを無効にします。アイデンティティプロバイダーがPKCEをサポートしていない場合のみ有効にしてください。",
+  "admin.authentication.sso.requireVerifiedEmail": "確認済みメールアドレスを要求",
+  "admin.authentication.sso.requireVerifiedEmailHelp": "アイデンティティプロバイダーがユーザーのメールアドレスの確認済みを確認した場合のみログインを許可します。",
+  "admin.authentication.sso.autoProvision": "アカウントの自動プロビジョニング",
+  "admin.authentication.sso.autoProvisionHelp": "SSO経由で初めてサインインするユーザーのアカウントを自動的に作成します。無効にすると、既存のアカウントのみがSSOログインを使用できます。",
   "admin.authentication.section.emailPassword": "メールアドレスとパスワード",
   "admin.authentication.section.oauth": "OAuthプロバイダー",
   "admin.authentication.section.oauthDescription": "外部サインインプロバイダーを設定します。以下の順序がログインページでの表示順を決定します。",
@@ -161,6 +179,8 @@
   "admin.integrations.smtp.enable": "SMTPを有効にする",
   "admin.integrations.smtp.encryption": "暗号化",
   "admin.integrations.smtp.encryptionNone": "なし / プレーンテキスト（ポート25）",
+  "admin.integrations.smtp.skipCertVerify": "証明書の検証をスキップ",
+  "admin.integrations.smtp.skipCertVerifyHelp": "サーバーの TLS 証明書の検証を行いません。自己署名証明書または有効期限切れの証明書を使用する自己ホスト型サーバーでのみ使用してください。",
   "admin.integrations.smtp.encryptionStarttls": "STARTTLS（ポート587）",
   "admin.integrations.smtp.encryptionTls": "暗黙的TLS/SSL（ポート465）",
   "admin.integrations.smtp.fromAddress": "送信元アドレス",
@@ -370,6 +390,9 @@
   "errors.display_name_required": "表示名は必須です。",
   "errors.email_already_exists": "このメールアドレスのユーザーは既に存在します。",
   "errors.last_login_method": "唯一のサインイン方法のリンクは解除できません。先にパスワードを設定してください。",
+  "errors.sso_email_missing": "SSOログインに失敗しました: アイデンティティプロバイダーからメールアドレスが返されませんでした。",
+  "errors.sso_email_unverified": "SSOログインに失敗しました: メールアドレスが確認されていません。アイデンティティプロバイダーでメールアドレスを確認してから、再度お試しください。",
+  "errors.sso_account_not_provisioned": "SSOログインに失敗しました: このメールアドレスのアカウントは存在しません。管理者に連絡してください。",
   "errors.namespace_limit_reached": "名前空間の所有制限に達しました。管理者に連絡して制限を引き上げてください。",
   "errors.namespace_slug_in_use": "名前空間スラッグ「{{slug}}」は既に使用されています。",
   "errors.namespace_slug_invalid": "名前空間スラッグは2〜30文字の小文字英数字またはハイフンで、文字で始まる必要があります。",
@@ -488,6 +511,11 @@
   "login.noAccount": "アカウントをお持ちでないですか？",
   "login.oauth.authenticating": "認証中...",
   "login.oauth.backToLogin": "ログインに戻る",
+  "login.sso.button": "SSOでサインイン",
+  "login.sso.error": "SSOログインの開始に失敗しました。再度お試しください。",
+  "login.sso.authenticating": "SSOで認証中...",
+  "login.sso.callbackError": "SSO認証に失敗しました。再度お試しください。",
+  "login.sso.backToLogin": "ログインに戻る",
   "login.oauth.callbackError": "認証に失敗しました。再度お試しください。",
   "login.oauth.error": "ログインの開始に失敗しました。再度お試しください。",
   "login.or": "または次で続行",
@@ -1529,5 +1557,11 @@
   "inlineComments.gutterTooltip_one": "{{count}}件のインラインコメント",
   "inlineComments.gutterTooltip_other": "{{count}}件のインラインコメント",
   "inlineComments.prevComment": "前のコメント",
-  "inlineComments.nextComment": "次のコメント"
+  "inlineComments.nextComment": "次のコメント",
+  "preferences.colorTheme": "カラーテーマ",
+  "preferences.colorThemes.default": "インディゴ",
+  "preferences.colorThemes.slate": "スレート",
+  "preferences.colorThemes.blue": "ブルー",
+  "preferences.colorThemes.green": "グリーン",
+  "preferences.colorThemes.purple": "パープル"
 }
diff --git a/web/src/i18n/ko.json b/web/src/i18n/ko.json
index adef0704..6e2758d8 100644
--- a/web/src/i18n/ko.json
+++ b/web/src/i18n/ko.json
@@ -74,6 +74,7 @@
   "admin.authentication.microsoft.description": "사용자가 Microsoft 계정으로 로그인할 수 있도록 허용합니다.",
   "admin.authentication.microsoft.title": "Microsoft",
   "admin.authentication.oauth.changeOrder": "순서 변경",
+  "admin.authentication.oauth.errorValidation": "구성 오류: {{detail}}",
   "admin.authentication.oauth.clientId": "클라이언트 ID",
   "admin.authentication.oauth.clientSecret": "클라이언트 시크릿",
   "admin.authentication.oauth.notConfigured": "구성되지 않았습니다. 이 공급자를 활성화하려면 자격 증명을 추가하세요.",
@@ -81,6 +82,23 @@
   "admin.authentication.oauth.redirectUriHint": "자동으로 결정됨",
   "admin.authentication.oauth.saveError": "구성 저장에 실패했습니다.",
   "admin.authentication.oauth.saved": "구성이 저장되었습니다.",
+  "admin.authentication.sso.title": "사용자 정의 SSO (OIDC)",
+  "admin.authentication.sso.description": "사용자가 사용자 정의 OpenID Connect 아이덴티티 제공업체로 로그인할 수 있도록 허용합니다.",
+  "admin.authentication.sso.issuer": "발급자 URL",
+  "admin.authentication.sso.issuerPlaceholder": "https://idp.example.com",
+  "admin.authentication.sso.issuerHelp": "OIDC 발급자 URL. .well-known/openid-configuration 검색에 사용됩니다.",
+  "admin.authentication.sso.scopes": "범위",
+  "admin.authentication.sso.scopesPlaceholder": "openid, profile, email",
+  "admin.authentication.sso.scopesHelp": "공백 또는 쉼표로 구분됩니다. \"openid\"는 항상 필수입니다. 기본값: openid, profile, email.",
+  "admin.authentication.sso.buttonLabel": "버튼 라벨",
+  "admin.authentication.sso.buttonLabelPlaceholder": "SSO로 로그인",
+  "admin.authentication.sso.buttonLabelHelp": "로그인 버튼에 표시되는 텍스트. 최대 40자. 비워두면 기본값이 사용됩니다.",
+  "admin.authentication.sso.disablePKCE": "PKCE 비활성화",
+  "admin.authentication.sso.disablePKCEHelp": "S256 코드 챌린지를 비활성화합니다. 아이덴티티 제공업체가 PKCE를 지원하지 않는 경우에만 활성화하세요.",
+  "admin.authentication.sso.requireVerifiedEmail": "확인된 이메일 요구",
+  "admin.authentication.sso.requireVerifiedEmailHelp": "아이덴티티 제공업체가 사용자의 이메일이 확인되었음을 확인할 때만 로그인을 허용합니다.",
+  "admin.authentication.sso.autoProvision": "계정 자동 프로비저닝",
+  "admin.authentication.sso.autoProvisionHelp": "SSO를 통해 처음 로그인하는 사용자의 계정을 자동으로 생성합니다. 비활성화되면 기존 계정만 SSO 로그인을 사용할 수 있습니다.",
   "admin.authentication.section.emailPassword": "이메일 및 비밀번호",
   "admin.authentication.section.oauth": "OAuth 제공업체",
   "admin.authentication.section.oauthDescription": "외부 로그인 제공업체를 구성합니다. 아래 순서가 로그인 페이지에서의 표시 순서를 결정합니다.",
@@ -161,6 +179,8 @@
   "admin.integrations.smtp.enable": "SMTP 활성화",
   "admin.integrations.smtp.encryption": "암호화",
   "admin.integrations.smtp.encryptionNone": "없음 / 평문 (포트 25)",
+  "admin.integrations.smtp.skipCertVerify": "인증서 검증 건너뛰기",
+  "admin.integrations.smtp.skipCertVerifyHelp": "서버 TLS 인증서를 검증하지 않습니다. 자체 서명된 인증서 또는 만료된 인증서를 사용하는 셀프 호스팅 서버에서만 사용하세요.",
   "admin.integrations.smtp.encryptionStarttls": "STARTTLS (포트 587)",
   "admin.integrations.smtp.encryptionTls": "암시적 TLS/SSL (포트 465)",
   "admin.integrations.smtp.fromAddress": "보내는 주소",
@@ -370,6 +390,9 @@
   "errors.display_name_required": "표시 이름은 필수입니다.",
   "errors.email_already_exists": "이 이메일의 사용자가 이미 존재합니다.",
   "errors.last_login_method": "유일한 로그인 수단은 연결을 해제할 수 없습니다. 먼저 비밀번호를 설정하세요.",
+  "errors.sso_email_missing": "SSO 로그인 실패: 아이덴티티 제공업체에서 이메일 주소가 반환되지 않았습니다.",
+  "errors.sso_email_unverified": "SSO 로그인 실패: 이메일 주소가 확인되지 않았습니다. 아이덴티티 제공업체에서 이메일을 확인한 후 다시 시도해 주세요.",
+  "errors.sso_account_not_provisioned": "SSO 로그인 실패: 이 이메일에 대한 계정이 존재하지 않습니다. 관리자에게 문의해 주세요.",
   "errors.namespace_limit_reached": "네임스페이스 소유 제한에 도달했습니다. 관리자에게 연락하여 제한을 늘려주세요.",
   "errors.namespace_slug_in_use": "네임스페이스 슬러그 \"{{slug}}\"은(는) 이미 사용 중입니다.",
   "errors.namespace_slug_invalid": "네임스페이스 슬러그는 2-30자의 소문자 영숫자 또는 하이픈이어야 하며 문자로 시작해야 합니다.",
@@ -488,6 +511,11 @@
   "login.noAccount": "계정이 없으신가요?",
   "login.oauth.authenticating": "인증 중...",
   "login.oauth.backToLogin": "로그인으로 돌아가기",
+  "login.sso.button": "SSO로 로그인",
+  "login.sso.error": "SSO 로그인을 시작하지 못했습니다. 다시 시도해 주세요.",
+  "login.sso.authenticating": "SSO로 인증 중...",
+  "login.sso.callbackError": "SSO 인증에 실패했습니다. 다시 시도해 주세요.",
+  "login.sso.backToLogin": "로그인으로 돌아가기",
   "login.oauth.callbackError": "인증에 실패했습니다. 다시 시도해 주세요.",
   "login.oauth.error": "로그인을 시작하지 못했습니다. 다시 시도해 주세요.",
   "login.or": "또는 다음으로 계속",
@@ -1529,5 +1557,11 @@
   "inlineComments.gutterTooltip_one": "인라인 댓글 {{count}}개",
   "inlineComments.gutterTooltip_other": "인라인 댓글 {{count}}개",
   "inlineComments.prevComment": "이전 댓글",
-  "inlineComments.nextComment": "다음 댓글"
+  "inlineComments.nextComment": "다음 댓글",
+  "preferences.colorTheme": "색상 테마",
+  "preferences.colorThemes.default": "인디고",
+  "preferences.colorThemes.slate": "슬레이트",
+  "preferences.colorThemes.blue": "블루",
+  "preferences.colorThemes.green": "그린",
+  "preferences.colorThemes.purple": "퍼플"
 }
diff --git a/web/src/i18n/pt.json b/web/src/i18n/pt.json
index b9b5152a..57d2cc60 100644
--- a/web/src/i18n/pt.json
+++ b/web/src/i18n/pt.json
@@ -74,6 +74,7 @@
   "admin.authentication.microsoft.description": "Permitir que os usuários façam login com sua conta Microsoft.",
   "admin.authentication.microsoft.title": "Microsoft",
   "admin.authentication.oauth.changeOrder": "Alterar ordem",
+  "admin.authentication.oauth.errorValidation": "Erro de configuração: {{detail}}",
   "admin.authentication.oauth.clientId": "ID do cliente",
   "admin.authentication.oauth.clientSecret": "Segredo do cliente",
   "admin.authentication.oauth.notConfigured": "Não configurado. Adicione credenciais para habilitar este provedor.",
@@ -81,6 +82,23 @@
   "admin.authentication.oauth.redirectUriHint": "determinado automaticamente",
   "admin.authentication.oauth.saveError": "Falha ao salvar a configuração.",
   "admin.authentication.oauth.saved": "Configuração salva.",
+  "admin.authentication.sso.title": "SSO personalizado (OIDC)",
+  "admin.authentication.sso.description": "Permitir que os usuários façam login com um provedor de identidade OpenID Connect personalizado.",
+  "admin.authentication.sso.issuer": "URL do emissor",
+  "admin.authentication.sso.issuerPlaceholder": "https://idp.example.com",
+  "admin.authentication.sso.issuerHelp": "A URL do emissor OIDC. Usada para descoberta .well-known/openid-configuration.",
+  "admin.authentication.sso.scopes": "Escopos",
+  "admin.authentication.sso.scopesPlaceholder": "openid, profile, email",
+  "admin.authentication.sso.scopesHelp": "Separados por espaço ou vírgula. \"openid\" é sempre obrigatório. Padrão: openid, profile, email.",
+  "admin.authentication.sso.buttonLabel": "Rótulo do botão",
+  "admin.authentication.sso.buttonLabelPlaceholder": "Entrar com SSO",
+  "admin.authentication.sso.buttonLabelHelp": "Texto exibido no botão de login. Máximo de 40 caracteres. Deixe vazio para o padrão.",
+  "admin.authentication.sso.disablePKCE": "Desativar PKCE",
+  "admin.authentication.sso.disablePKCEHelp": "Desativar desafio de código S256. Ative apenas se seu provedor de identidade não suportar PKCE.",
+  "admin.authentication.sso.requireVerifiedEmail": "Exigir e-mail verificado",
+  "admin.authentication.sso.requireVerifiedEmailHelp": "Permitir login apenas quando o provedor de identidade confirmar que o e-mail do usuário está verificado.",
+  "admin.authentication.sso.autoProvision": "Provisionamento automático de contas",
+  "admin.authentication.sso.autoProvisionHelp": "Criar automaticamente contas para usuários que fazem login via SSO pela primeira vez. Quando desativado, apenas contas existentes podem usar o login SSO.",
   "admin.authentication.section.emailPassword": "E-mail e Senha",
   "admin.authentication.section.oauth": "Provedores OAuth",
   "admin.authentication.section.oauthDescription": "Configurar provedores de login externos. A ordem abaixo determina como aparecem na página de login.",
@@ -161,6 +179,8 @@
   "admin.integrations.smtp.enable": "Ativar SMTP",
   "admin.integrations.smtp.encryption": "Criptografia",
   "admin.integrations.smtp.encryptionNone": "Nenhuma / Texto simples (porta 25)",
+  "admin.integrations.smtp.skipCertVerify": "Ignorar a verificação do certificado",
+  "admin.integrations.smtp.skipCertVerifyHelp": "Não verificar o certificado TLS do servidor. Use apenas em servidores auto-hospedados com certificados autoassinados ou expirados.",
   "admin.integrations.smtp.encryptionStarttls": "STARTTLS (porta 587)",
   "admin.integrations.smtp.encryptionTls": "TLS/SSL implícito (porta 465)",
   "admin.integrations.smtp.fromAddress": "Endereço do remetente",
@@ -370,6 +390,9 @@
   "errors.display_name_required": "O nome de exibição é obrigatório.",
   "errors.email_already_exists": "Já existe um usuário com este e-mail.",
   "errors.last_login_method": "Você não pode desvincular seu único método de login. Defina uma senha primeiro.",
+  "errors.sso_email_missing": "Falha no login SSO: nenhum endereço de e-mail foi retornado pelo provedor de identidade.",
+  "errors.sso_email_unverified": "Falha no login SSO: seu endereço de e-mail não está verificado. Verifique seu e-mail com seu provedor de identidade e tente novamente.",
+  "errors.sso_account_not_provisioned": "Falha no login SSO: não existe uma conta para este e-mail. Entre em contato com um administrador.",
   "errors.namespace_limit_reached": "Limite de propriedade de namespaces atingido. Entre em contato com um administrador para aumentar seu limite.",
   "errors.namespace_slug_in_use": "O identificador de namespace \"{{slug}}\" já está em uso.",
   "errors.namespace_slug_invalid": "O identificador do namespace deve ter 2-30 caracteres alfanuméricos minúsculos ou hífens, começando com uma letra.",
@@ -488,6 +511,11 @@
   "login.noAccount": "Não tem uma conta?",
   "login.oauth.authenticating": "Autenticando...",
   "login.oauth.backToLogin": "Voltar ao login",
+  "login.sso.button": "Entrar com SSO",
+  "login.sso.error": "Falha ao iniciar o login SSO. Tente novamente.",
+  "login.sso.authenticating": "Autenticando com SSO...",
+  "login.sso.callbackError": "A autenticação SSO falhou. Tente novamente.",
+  "login.sso.backToLogin": "Voltar ao login",
   "login.oauth.callbackError": "Falha na autenticação. Tente novamente.",
   "login.oauth.error": "Falha ao iniciar login. Tente novamente.",
   "login.or": "ou continue com",
@@ -1529,5 +1557,11 @@
   "inlineComments.gutterTooltip_one": "{{count}} comentário em linha",
   "inlineComments.gutterTooltip_other": "{{count}} comentários em linha",
   "inlineComments.prevComment": "Comentário anterior",
-  "inlineComments.nextComment": "Próximo comentário"
+  "inlineComments.nextComment": "Próximo comentário",
+  "preferences.colorTheme": "Tema de cor",
+  "preferences.colorThemes.default": "Índigo",
+  "preferences.colorThemes.slate": "Ardósia",
+  "preferences.colorThemes.blue": "Azul",
+  "preferences.colorThemes.green": "Verde",
+  "preferences.colorThemes.purple": "Roxo"
 }
diff --git a/web/src/i18n/zh.json b/web/src/i18n/zh.json
index f1667340..00477cce 100644
--- a/web/src/i18n/zh.json
+++ b/web/src/i18n/zh.json
@@ -1,20 +1,20 @@
 {
-  "activity.aComment": "一条评论",
-  "activity.addedComment": "添加了",
-  "activity.changed": "更改了{{field}}",
-  "activity.cleared": "清除了{{field}}",
-  "activity.createdItem": "创建了此条目",
-  "activity.deletedComment": "删除了",
+  "activity.aComment": "评论",
+  "activity.addedComment": "添加了评论",
+  "activity.changed": "修改了{{field}}",
+  "activity.cleared": "清空了{{field}}",
+  "activity.createdItem": "创建了工作项",
+  "activity.deletedComment": "删除了评论",
   "activity.diff.added": "新增",
-  "activity.diff.commentTitle": "评论编辑差异",
+  "activity.diff.commentTitle": "评论变更",
   "activity.diff.removed": "删除",
   "activity.diff.title": "{{field}}变更",
-  "activity.editedComment": "编辑了",
+  "activity.editedComment": "编辑了评论",
   "activity.fields.assignee_id": "负责人",
   "activity.fields.complexity": "复杂度",
   "activity.fields.description": "描述",
   "activity.fields.due_date": "截止日期",
-  "activity.fields.estimated_seconds": "预估",
+  "activity.fields.estimated_seconds": "预估时间",
   "activity.fields.labels": "标签",
   "activity.fields.milestone_id": "里程碑",
   "activity.fields.priority": "优先级",
@@ -23,17 +23,17 @@
   "activity.fields.title": "标题",
   "activity.fields.type": "类型",
   "activity.fields.visibility": "可见性",
-  "activity.noActivity": "暂无动态。",
+  "activity.noActivity": "暂无动态",
   "activity.set": "设置了{{field}}",
-  "admin.apiKeys.accessRead": "读取",
+  "admin.apiKeys.accessRead": "只读",
   "admin.apiKeys.accessReadWrite": "读写",
-  "admin.apiKeys.accessWrite": "写入",
+  "admin.apiKeys.accessWrite": "只写",
   "admin.apiKeys.create": "创建",
   "admin.apiKeys.createNew": "创建系统 API 密钥",
   "admin.apiKeys.createdAt": "创建时间",
   "admin.apiKeys.deleteConfirmBody": "确定要删除 <bold>{{name}}</bold> 吗？使用此密钥的所有集成将停止工作。",
   "admin.apiKeys.deleteConfirmTitle": "删除系统 API 密钥",
-  "admin.apiKeys.description": "管理具有细粒度基于资源权限的系统级 API 密钥。这些密钥不绑定到任何用户账号。",
+  "admin.apiKeys.description": "管理系统级 API 密钥，支持细粒度的资源权限控制。这些密钥不绑定任何用户账户。",
   "admin.apiKeys.dismiss": "完成",
   "admin.apiKeys.empty": "暂无系统 API 密钥。",
   "admin.apiKeys.expiration": "过期时间",
@@ -60,20 +60,21 @@
   "admin.apiKeys.resourceMetrics": "指标",
   "admin.apiKeys.title": "系统 API 密钥",
   "admin.authentication.description": "管理可用的身份验证方法。",
-  "admin.authentication.discord.description": "允许用户使用 Discord 账号登录。",
+  "admin.authentication.discord.description": "允许用户使用 Discord 账户登录。",
   "admin.authentication.discord.title": "Discord",
   "admin.authentication.emailLogin.description": "允许用户使用电子邮件地址和密码登录。",
   "admin.authentication.emailLogin.title": "邮箱/密码登录",
-  "admin.authentication.emailRegistration.description": "允许新用户通过验证电子邮件地址来创建账号。",
+  "admin.authentication.emailRegistration.description": "允许新用户通过验证电子邮件地址来创建账户。",
   "admin.authentication.emailRegistration.smtpRequired": "在启用邮箱注册之前，必须在集成设置中配置并启用 SMTP。",
   "admin.authentication.emailRegistration.title": "邮箱注册",
-  "admin.authentication.github.description": "允许用户使用其 GitHub 帐户登录。",
+  "admin.authentication.github.description": "允许用户使用其 GitHub 账户登录。",
   "admin.authentication.github.title": "GitHub",
-  "admin.authentication.google.description": "允许用户使用 Google 账号登录。",
+  "admin.authentication.google.description": "允许用户使用 Google 账户登录。",
   "admin.authentication.google.title": "Google",
   "admin.authentication.microsoft.description": "允许用户使用其 Microsoft 账户登录。",
   "admin.authentication.microsoft.title": "Microsoft",
   "admin.authentication.oauth.changeOrder": "更改顺序",
+  "admin.authentication.oauth.errorValidation": "配置错误：{{detail}}",
   "admin.authentication.oauth.clientId": "客户端 ID",
   "admin.authentication.oauth.clientSecret": "客户端密钥",
   "admin.authentication.oauth.notConfigured": "未配置。添加凭据以启用此提供商。",
@@ -81,6 +82,23 @@
   "admin.authentication.oauth.redirectUriHint": "自动确定",
   "admin.authentication.oauth.saveError": "保存配置失败。",
   "admin.authentication.oauth.saved": "配置已保存。",
+  "admin.authentication.sso.title": "自定义 SSO (OIDC)",
+  "admin.authentication.sso.description": "允许用户使用自定义 OpenID Connect 身份提供商登录。",
+  "admin.authentication.sso.issuer": "发行者 URL",
+  "admin.authentication.sso.issuerPlaceholder": "https://idp.example.com",
+  "admin.authentication.sso.issuerHelp": "OIDC 发行者 URL。用于 .well-known/openid-configuration 发现。",
+  "admin.authentication.sso.scopes": "作用域",
+  "admin.authentication.sso.scopesPlaceholder": "openid, profile, email",
+  "admin.authentication.sso.scopesHelp": "空格或逗号分隔。\"openid\" 始终必需。默认为：openid, profile, email。",
+  "admin.authentication.sso.buttonLabel": "按钮标签",
+  "admin.authentication.sso.buttonLabelPlaceholder": "使用 SSO 登录",
+  "admin.authentication.sso.buttonLabelHelp": "登录按钮上显示的文本。最多 40 个字符。留空使用默认值。",
+  "admin.authentication.sso.disablePKCE": "禁用 PKCE",
+  "admin.authentication.sso.disablePKCEHelp": "禁用 S256 代码挑战。仅当您的身份提供商不支持 PKCE 时才启用。",
+  "admin.authentication.sso.requireVerifiedEmail": "要求验证电子邮件",
+  "admin.authentication.sso.requireVerifiedEmailHelp": "仅当身份提供商确认用户电子邮件已验证时才允许登录。",
+  "admin.authentication.sso.autoProvision": "自动配置账户",
+  "admin.authentication.sso.autoProvisionHelp": "为首次通过 SSO 登录的用户自动创建账户。禁用时，仅现有账户可以使用 SSO 登录。",
   "admin.authentication.section.emailPassword": "电子邮件和密码",
   "admin.authentication.section.oauth": "OAuth 提供商",
   "admin.authentication.section.oauthDescription": "配置外部登录提供商。以下顺序决定了它们在登录页面上的显示方式。",
@@ -147,10 +165,10 @@
   "admin.general.brand.saved": "品牌名称已保存。",
   "admin.general.brand.title": "品牌",
   "admin.general.description": "配置常规系统设置。",
-  "admin.general.namespaceLimit.help": "Default limit for non-admin users. Set to 0 for unlimited. Admins are always exempt. Override per user in the list below.",
-  "admin.general.namespaceLimit.label": "Max namespaces per user",
-  "admin.general.namespaceLimit.saved": "Namespace limit saved.",
-  "admin.general.namespaceLimit.title": "Namespace Limits",
+  "admin.general.namespaceLimit.help": "非管理员用户的默认限制。设为 0 表示无限制。管理员始终不受限制。可在下方列表中为单个用户设置。",
+  "admin.general.namespaceLimit.label": "每用户最大命名空间数",
+  "admin.general.namespaceLimit.saved": "命名空间限制已保存。",
+  "admin.general.namespaceLimit.title": "命名空间限制",
   "admin.general.projectLimit.help": "非管理员用户的默认限额。设置为0表示无限制。管理员始终不受限制。可在下方列表中为每个用户设置覆盖值。",
   "admin.general.projectLimit.label": "每用户最大项目数",
   "admin.general.projectLimit.saved": "项目限额已保存。",
@@ -161,6 +179,8 @@
   "admin.integrations.smtp.enable": "启用 SMTP",
   "admin.integrations.smtp.encryption": "加密",
   "admin.integrations.smtp.encryptionNone": "无 / 明文（端口 25）",
+  "admin.integrations.smtp.skipCertVerify": "跳过证书验证",
+  "admin.integrations.smtp.skipCertVerifyHelp": "不验证服务器 TLS 证书。仅适用于使用自签名或已过期证书的自建服务器。",
   "admin.integrations.smtp.encryptionStarttls": "STARTTLS（端口 587）",
   "admin.integrations.smtp.encryptionTls": "隐式 TLS/SSL（端口 465）",
   "admin.integrations.smtp.fromAddress": "发件人地址",
@@ -218,8 +238,8 @@
   "admin.users.filterAll": "所有用户",
   "admin.users.filterDisabled": "已禁用用户",
   "admin.users.lastLogin": "最后登录",
-  "admin.users.maxNamespacesDefault": "default",
-  "admin.users.maxNamespacesHelp": "Per-user namespace limit. Empty = default, 0 = unlimited.",
+  "admin.users.maxNamespacesDefault": "默认",
+  "admin.users.maxNamespacesHelp": "每用户命名空间限制。留空 = 默认，0 = 无限制。",
   "admin.users.maxProjectsDefault": "默认",
   "admin.users.maxProjectsHelp": "每用户项目限制。空 = 默认，0 = 无限制。",
   "admin.users.name": "姓名",
@@ -250,7 +270,7 @@
   "admin.users.title": "用户",
   "admin.users.updateError": "更新用户失败。",
   "admin.workflows.cannotDeleteDefault": "默认工作流不能删除。",
-  "admin.workflows.defaultMappingDescription": "创建新项目时每种条目类型的默认工作流。",
+  "admin.workflows.defaultMappingDescription": "创建新项目时每种工作项类型的默认工作流。",
   "admin.workflows.defaultMappingTitle": "默认工作流",
   "admin.workflows.description": "管理所有项目可用的系统工作流。",
   "admin.workflows.noWorkflows": "暂无系统工作流。",
@@ -267,11 +287,11 @@
   "brand.name": "Taskwondo",
   "businessHours.clear": "清除工作时间",
   "businessHours.days": "工作日",
-  "businessHours.description": "定义business_hours日历模式下用于SLA计算的工作时间。",
+  "businessHours.description": "定义工作时间日历模式下用于 SLA 计算的工作时间。",
   "businessHours.endHour": "结束时间",
   "businessHours.friday": "周五",
   "businessHours.monday": "周一",
-  "businessHours.notConfigured": "未配置。business_hours模式的SLA目标将回退到24/7。",
+  "businessHours.notConfigured": "未配置。工作时间模式下的 SLA 目标将回退到 24/7。",
   "businessHours.saturday": "周六",
   "businessHours.saveSuccess": "工作时间已保存。",
   "businessHours.searchTimezone": "搜索时区...",
@@ -366,10 +386,13 @@
   "common.system": "系统",
   "common.top": "顶部",
   "common.unknown": "未知",
-  "common.you": "你",
+  "common.you": "您",
   "errors.display_name_required": "显示名称为必填项。",
   "errors.email_already_exists": "此电子邮件的用户已存在。",
   "errors.last_login_method": "无法取消关联您唯一的登录方式。请先设置密码。",
+  "errors.sso_email_missing": "SSO 登录失败：身份提供商未返回电子邮件地址。",
+  "errors.sso_email_unverified": "SSO 登录失败：您的电子邮件地址未验证。请在身份提供商处验证您的电子邮件并重试。",
+  "errors.sso_account_not_provisioned": "SSO 登录失败：此电子邮件没有账户。请联系管理员。",
   "errors.namespace_limit_reached": "命名空间所有权限制已达到。请联系管理员增加您的限制。",
   "errors.namespace_slug_in_use": "命名空间标识 \"{{slug}}\" 已被使用。",
   "errors.namespace_slug_invalid": "命名空间标识必须为2-30个小写字母数字字符或连字符，以字母开头。",
@@ -461,7 +484,7 @@
   "invite.notFound": "此邀请链接无效或已被撤销。",
   "invite.roleNotApplied": "您已拥有{{existingRole}}访问权限 — {{inviteRole}}邀请未被应用。",
   "invite.title": "您已被邀请",
-  "login.createAccount": "创建账号",
+  "login.createAccount": "创建账户",
   "login.discord.authenticating": "正在通过 Discord 认证...",
   "login.discord.backToLogin": "返回登录",
   "login.discord.button": "使用 Discord 登录",
@@ -485,9 +508,14 @@
   "login.microsoft.button": "使用 Microsoft 登录",
   "login.microsoft.callbackError": "Microsoft 身份验证失败，请重试。",
   "login.microsoft.error": "无法启动 Microsoft 登录，请重试。",
-  "login.noAccount": "还没有账号？",
+  "login.noAccount": "还没有账户？",
   "login.oauth.authenticating": "正在认证...",
   "login.oauth.backToLogin": "返回登录",
+  "login.sso.button": "使用 SSO 登录",
+  "login.sso.error": "无法启动 SSO 登录，请重试。",
+  "login.sso.authenticating": "正在使用 SSO 认证...",
+  "login.sso.callbackError": "SSO 认证失败，请重试。",
+  "login.sso.backToLogin": "返回登录",
   "login.oauth.callbackError": "认证失败，请重试。",
   "login.oauth.error": "无法启动登录，请重试。",
   "login.or": "或通过以下方式继续",
@@ -542,13 +570,13 @@
   "milestones.noMilestone": "无里程碑",
   "milestones.noMilestones": "暂无里程碑。",
   "milestones.overdue": "已逾期{{days}}天",
-  "milestones.progress": "{{closed}}/{{total}} 个条目",
-  "milestones.progressNone": "无条目",
+  "milestones.progress": "{{closed}}/{{total}} 个工作项",
+  "milestones.progressNone": "无工作项",
   "milestones.statusClosed": "已关闭",
   "milestones.statusOpen": "开放",
-  "milestones.timeEstimated": "Est: {{time}}",
-  "milestones.timeProgress": "{{percent}}% of estimate used",
-  "milestones.timeSpent": "Spent: {{time}}",
+  "milestones.timeEstimated": "预估: {{time}}",
+  "milestones.timeProgress": "已使用 {{percent}}% 的预估时间",
+  "milestones.timeSpent": "实际: {{time}}",
   "milestones.title": "里程碑",
   "milestones.updateError": "更新里程碑失败。",
   "milestones.updateSuccess": "里程碑已更新。",
@@ -584,7 +612,7 @@
   "namespaces.invitedBadge": "已邀请",
   "namespaces.lastOwnerTooltip": "无法修改最后一个所有者",
   "namespaces.limitCounter": "{{count}}/{{limit}}",
-  "namespaces.limitReached": "Namespace ownership limit reached. Contact an administrator to increase your limit.",
+  "namespaces.limitReached": "已达到命名空间拥有上限。请联系管理员提升限额。",
   "namespaces.members": "成员",
   "namespaces.membersDescription": "管理谁有权访问此命名空间。",
   "namespaces.namespace": "命名空间",
@@ -804,7 +832,7 @@
   "projects.createError": "创建项目失败",
   "projects.empty": "暂无项目，创建一个开始吧。",
   "projects.limitCounter": "{{count}}/{{limit}}",
-  "projects.limitReached": "项目所有权限额已达上限。请联系管理员提高您的限额。",
+  "projects.limitReached": "项目所有权限制已达到。请联系管理员提高您的限额。",
   "projects.loadError": "加载项目失败。",
   "projects.new": "新建项目",
   "projects.noProjectsFound": "未找到项目。",
@@ -818,7 +846,7 @@
   "projects.overview.noActivityData": "暂无活动数据。",
   "projects.overview.noDescription": "暂无描述。",
   "projects.overview.noMembers": "暂无成员。",
-  "projects.overview.openWorkItems": "未关闭条目",
+  "projects.overview.openWorkItems": "未关闭工作项",
   "projects.overview.other": "其他",
   "projects.overview.range_24h": "24小时",
   "projects.overview.range_3d": "3天",
@@ -847,7 +875,7 @@
   "projects.settings.complexityValues": "允许的值",
   "projects.settings.createInvite": "创建邀请链接",
   "projects.settings.dangerZone": "危险操作",
-  "projects.settings.deleteConfirmBody": "此操作<bold>不可撤销</bold>。项目<bold>{{projectKey}}</bold>及其所有条目、评论和关联将被永久删除。",
+  "projects.settings.deleteConfirmBody": "此操作<bold>不可撤销</bold>。项目<bold>{{projectKey}}</bold>及其所有工作项、评论和关联将被永久删除。",
   "projects.settings.deleteConfirmButton": "我已了解，确认删除",
   "projects.settings.deleteConfirmTitle": "删除项目",
   "projects.settings.deleteConfirmType": "请输入<bold>{{projectKey}}</bold>以确认。",
@@ -856,7 +884,7 @@
   "projects.settings.deleteInviteConfirmTitle": "撤销邀请链接",
   "projects.settings.deleteProject": "删除",
   "projects.settings.deleteThisProject": "删除此项目",
-  "projects.settings.deleteWarning": "该项目的所有条目、评论和关联将被永久删除。",
+  "projects.settings.deleteWarning": "该项目的所有工作项、评论和关联将被永久删除。",
   "projects.settings.description": "管理项目设置。",
   "projects.settings.emailInviteButton": "邀请",
   "projects.settings.emailInviteConfirmBody": "向 <bold>{{email}}</bold> 发送邀请邮件，以 <bold>{{role}}</bold> 身份加入此项目？如果用户已有账户，将直接添加。",
@@ -942,7 +970,7 @@
   "projects.settings.workflowUpdateError": "工作流映射更新失败。",
   "projects.settings.workflowUpdated": "工作流映射已更新。",
   "projects.settings.workflows": "工作流",
-  "projects.settings.workflowsDescription": "配置每种工作条目类型使用的工作流。",
+  "projects.settings.workflowsDescription": "配置每种工作项类型使用的工作流。",
   "projects.switcher.search": "搜索项目...",
   "projects.switcher.showAllNamespaces": "所有命名空间",
   "projects.switcher.title": "切换项目",
@@ -1012,15 +1040,15 @@
   "queues.workItems": "队列项目",
   "register.backToLogin": "返回登录",
   "register.checkEmail": "请查看您的邮箱",
-  "register.checkEmailDescription": "我们已向 {{email}} 发送了验证链接。请点击链接设置密码并激活您的账号。",
+  "register.checkEmailDescription": "我们已向 {{email}} 发送了验证链接。请点击链接设置密码并激活您的账户。",
   "register.displayName": "显示名称",
   "register.email": "电子邮件",
   "register.error": "注册失败，请重试。",
-  "register.haveAccount": "已有账号？",
+  "register.haveAccount": "已有账户？",
   "register.signIn": "登录",
-  "register.submit": "创建账号",
-  "register.submitting": "正在创建账号...",
-  "register.title": "创建您的账号",
+  "register.submit": "创建账户",
+  "register.submitting": "正在创建账户...",
+  "register.title": "创建您的账户",
   "relations.children": "子项",
   "relations.childrenProgress": "{{completed}}/{{total}} 已完成",
   "relations.otherRelations": "其他关联",
@@ -1097,26 +1125,26 @@
   "shortcuts.inbox": "收件箱",
   "shortcuts.inbox.moveDown": "下移 / 重新排序下移",
   "shortcuts.inbox.moveUp": "上移 / 重新排序上移",
-  "shortcuts.inbox.open": "打开项目",
+  "shortcuts.inbox.open": "打开工作项",
   "shortcuts.inbox.remove": "从收件箱移除",
-  "shortcuts.inbox.select": "选择项目进行重新排序",
+  "shortcuts.inbox.select": "选择工作项进行重新排序",
   "shortcuts.lists": "列表",
   "shortcuts.lists.deselect": "取消选择",
   "shortcuts.lists.moveDown": "向下移动",
   "shortcuts.lists.moveUp": "向上移动",
-  "shortcuts.lists.open": "打开项目",
+  "shortcuts.lists.open": "打开工作项",
   "shortcuts.lists.select": "选择 / 取消选择",
   "shortcuts.navigation": "导航",
   "shortcuts.navigation.commandPalette": "打开命令面板",
   "shortcuts.navigation.goToInbox": "前往收件箱",
-  "shortcuts.navigation.goToItems": "前往项目",
+  "shortcuts.navigation.goToItems": "前往工作项",
   "shortcuts.navigation.preferences": "用户偏好设置",
   "shortcuts.navigation.toggleSidebar": "切换侧边栏",
   "shortcuts.then": "然后",
   "shortcuts.title": "键盘快捷键",
   "sidebar.collapse": "收起侧栏",
   "sidebar.expand": "展开侧栏",
-  "sidebar.items": "条目",
+  "sidebar.items": "工作项",
   "sidebar.menu": "菜单",
   "sidebar.milestones": "里程碑",
   "sidebar.overview": "概览",
@@ -1125,7 +1153,7 @@
   "sidebar.settings": "设置",
   "sidebar.support": "支持",
   "sidebar.teams": "团队",
-  "sidebar.workflows": "Workflows",
+  "sidebar.workflows": "工作流",
   "sla.blankHint": "留空表示该状态不设置 SLA。",
   "sla.breached": "已违反",
   "sla.calendarMode": "日历",
@@ -1135,7 +1163,7 @@
   "sla.description": "定义此工作项类型在每个状态中允许的最大时间。",
   "sla.duration": "时长",
   "sla.durationInvalid": "无效的时长。请使用 15m、2h、1d、1w 等格式。",
-  "sla.durationPlaceholder": "e.g. 2h, 1d, 1w",
+  "sla.durationPlaceholder": "例如 2h, 1d, 1w",
   "sla.filter": "SLA状态",
   "sla.left": "剩余{{duration}}",
   "sla.mode24x7": "24/7",
@@ -1256,8 +1284,8 @@
   "timeTracking.date": "日期",
   "timeTracking.deleteConfirm": "此时间记录将被永久删除。此操作无法撤销。",
   "timeTracking.deleteTitle": "删除时间记录",
-  "timeTracking.descriptionPlaceholder": "你做了什么？",
-  "timeTracking.durationPlaceholder": "e.g. 30m, 2h",
+  "timeTracking.descriptionPlaceholder": "您做了什么？",
+  "timeTracking.durationPlaceholder": "例如 30m, 2h",
   "timeTracking.estimate": "预估",
   "timeTracking.estimateInvalid": "请使用 2h、30m 或 2h 30m 等格式。",
   "timeTracking.estimatePlaceholder": "例如 2h 30m",
@@ -1277,7 +1305,7 @@
   "userPicker.unassigned": "未分配",
   "userPicker.unknownUser": "未知用户",
   "verifyEmail.confirmPassword": "确认密码",
-  "verifyEmail.description": "选择密码以完成账号设置。",
+  "verifyEmail.description": "选择密码以完成账户设置。",
   "verifyEmail.error": "验证失败。链接可能已过期。",
   "verifyEmail.mismatch": "密码不匹配。",
   "verifyEmail.password": "密码",
@@ -1296,10 +1324,10 @@
   "watchers.watch": "关注",
   "watchers.watchersField": "关注者",
   "watchers.watchersTab": "关注者",
-  "watchers.youAreWatching": "你正在关注此项目",
+  "watchers.youAreWatching": "您正在关注此项目",
   "watchlist.allProjects": "所有项目",
-  "watchlist.empty": "你还没有关注任何项目",
-  "watchlist.emptyHint": "使用工作项上的铃铛图标将其添加到你的关注列表",
+  "watchlist.empty": "您还没有关注任何项目",
+  "watchlist.emptyHint": "使用工作项上的铃铛图标将其添加到您的关注列表",
   "watchlist.filterByProject": "按项目筛选",
   "watchlist.title": "关注列表",
   "watchlist.titleShort": "关注",
@@ -1326,7 +1354,7 @@
   "welcome.workItems.title": "工作项",
   "welcome.workflows.description": "工作流定义了工作项的生命周期 — 可用的状态以及项目之间的转换方式。使用内置工作流或创建自定义工作流以匹配团队的流程。您还可以按工作项类型配置SLA目标，以跟踪响应和解决时间。",
   "welcome.workflows.title": "工作流",
-  "workItemPicker.noItems": "未找到条目",
+  "workItemPicker.noItems": "未找到工作项",
   "workItemPicker.searchPlaceholder": "按标题或ID搜索...",
   "workflows.addTransition": "添加转换",
   "workflows.businessHoursDescription": "配置在工作时间模式下用于SLA计算的工作时间。",
@@ -1382,14 +1410,14 @@
   "workitems.bulk.transitionError": "无效的状态转换：{{items}}",
   "workitems.bulk.unassign": "取消分配",
   "workitems.card.updatedAt": "更新于 {{date}}",
-  "workitems.deleteSelectedBody_one": "确定要删除{{count}}个工作条目吗？此操作不可撤销。",
-  "workitems.deleteSelectedBody_other": "确定要删除{{count}}个工作条目吗？此操作不可撤销。",
-  "workitems.deleteSelectedTitle": "删除工作条目",
+  "workitems.deleteSelectedBody_one": "确定要删除{{count}}个工作项吗？此操作不可撤销。",
+  "workitems.deleteSelectedBody_other": "确定要删除{{count}}个工作项吗？此操作不可撤销。",
+  "workitems.deleteSelectedTitle": "删除工作项",
   "workitems.detail.complexity": "复杂度",
   "workitems.detail.created": "创建时间",
   "workitems.detail.deleteConfirmBody": "确定要删除<bold>{{displayId}}</bold>吗？此操作不可撤销。",
-  "workitems.detail.deleteItem": "删除条目",
-  "workitems.detail.deleteTitle": "删除条目",
+  "workitems.detail.deleteItem": "删除工作项",
+  "workitems.detail.deleteTitle": "删除工作项",
   "workitems.detail.description": "描述",
   "workitems.detail.descriptionEditHint": "双击以编辑",
   "workitems.detail.noDescription": "暂无描述。双击添加。",
@@ -1402,7 +1430,7 @@
   "workitems.detail.updateError": "更新失败，请重试。",
   "workitems.detail.updated": "更新时间",
   "workitems.dropToAttach": "拖放文件以添加附件",
-  "workitems.empty": "未找到条目",
+  "workitems.empty": "未找到工作项",
   "workitems.filters.allAssignees": "负责人",
   "workitems.filters.allMilestones": "里程碑",
   "workitems.filters.allPriorities": "优先级",
@@ -1413,7 +1441,7 @@
   "workitems.filters.members": "成员",
   "workitems.filters.noMilestone": "无里程碑",
   "workitems.filters.save": "保存当前筛选条件",
-  "workitems.filters.search": "搜索条目... ( / )",
+  "workitems.filters.search": "搜索工作项... ( / )",
   "workitems.filters.statusGroupClosed": "已关闭",
   "workitems.filters.statusGroupOpen": "未关闭",
   "workitems.filters.title": "筛选",
@@ -1459,10 +1487,10 @@
   "workitems.form.visibility": "可见性",
   "workitems.mobile.created": "创建于",
   "workitems.mobile.updated": "更新于",
-  "workitems.new": "新建条目",
+  "workitems.new": "新建工作项",
   "workitems.newShort": "新建",
-  "workitems.newTitle": "新建条目",
-  "workitems.notFound": "条目未找到。",
+  "workitems.newTitle": "新建工作项",
+  "workitems.notFound": "工作项未找到。",
   "workitems.priorities.critical": "紧急",
   "workitems.priorities.high": "高",
   "workitems.priorities.low": "低",
@@ -1499,8 +1527,8 @@
   "workitems.table.title": "标题",
   "workitems.table.type": "类型",
   "workitems.table.updated": "更新时间",
-  "workitems.title": "工作条目",
-  "workitems.titleShort": "条目",
+  "workitems.title": "工作项",
+  "workitems.titleShort": "项",
   "workitems.types.bug": "缺陷",
   "workitems.types.epic": "史诗",
   "workitems.types.feedback": "反馈",
@@ -1529,5 +1557,11 @@
   "inlineComments.gutterTooltip_one": "{{count}} 条内联评论",
   "inlineComments.gutterTooltip_other": "{{count}} 条内联评论",
   "inlineComments.prevComment": "上一条评论",
-  "inlineComments.nextComment": "下一条评论"
+  "inlineComments.nextComment": "下一条评论",
+  "preferences.colorTheme": "颜色主题",
+  "preferences.colorThemes.default": "靛蓝",
+  "preferences.colorThemes.slate": "石板灰",
+  "preferences.colorThemes.blue": "蓝色",
+  "preferences.colorThemes.green": "绿色",
+  "preferences.colorThemes.purple": "紫色"
 }
diff --git a/web/src/index.css b/web/src/index.css
index 0bc76722..5789aba9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -3,15 +3,259 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+@theme {
+  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", var(--font-cjk, sans-serif);
+}
+
+:root {
+  /* Root font size (user preference, see ThemeContext) and the per-script optical adjustment applied to it.
+     The fallback matches the 'normal' preference so first paint doesn't jump. */
+  --app-font-size: 17.6px;
+  --app-font-scale: 1;
+
+  /* Background & Surface */
+  --background: #ffffff;
+  --background-secondary: #f9fafb;
+  --surface: #ffffff;
+  --surface-secondary: #f9fafb;
+  --surface-tertiary: #f3f4f6;
+  --surface-hover: #f9fafb;
+  --surface-active: #f3f4f6;
+  
+  /* Text */
+  --foreground: #111827;
+  --foreground-secondary: #6b7280;
+  --foreground-muted: #9ca3af;
+  --text-primary: #111827;
+  --text-secondary: #6b7280;
+  --text-tertiary: #9ca3af;
+  
+  /* Border */
+  --border: #e5e7eb;
+  --border-muted: #f3f4f6;
+  --border-strong: #d1d5db;
+  
+  /* Primary - Indigo */
+  --primary: #4f46e5;
+  --primary-hover: #4338ca;
+  --primary-foreground: #ffffff;
+  --primary-muted: #eef2ff;
+  --primary-border: #c7d2fe;
+  
+  /* Semantic Colors */
+  --success: #10b981;
+  --success-bg: #d1fae5;
+  --warning: #f59e0b;
+  --warning-bg: #fef3c7;
+  --danger: #ef4444;
+  --danger-bg: #fee2e2;
+  --info: #3b82f6;
+  --info-bg: #dbeafe;
+  
+  /* Interactive States */
+  --hover: #f9fafb;
+  --active: #f3f4f6;
+  --focus-ring: #4f46e5;
+  --tooltip-bg: #4b5563;
+  --tooltip-text: #ffffff;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  
+  /* Radius */
+  --radius-sm: 4px;
+  --radius: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  
+  /* Typography Scale */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  
+  /* Scrollbar */
+  --scrollbar-track: #f9fafb;
+  --scrollbar-thumb: #d1d5db;
+}
+
+/* Dark Theme */
+:root.dark {
+  --background: #111827;
+  --background-secondary: #1f2937;
+  --surface: #1f2937;
+  --surface-secondary: #283243;
+  --surface-tertiary: #313d52;
+  --surface-hover: #374151;
+  --surface-active: #4b5563;
+  
+  --foreground: #f9fafb;
+  --foreground-secondary: #d1d5db;
+  --foreground-muted: #9ca3af;
+  --text-primary: #f9fafb;
+  --text-secondary: #d1d5db;
+  --text-tertiary: #9ca3af;
+  
+  --border: #374151;
+  --border-muted: #1f2937;
+  --border-strong: #4b5563;
+  
+  --primary: #6366f1;
+  --primary-hover: #818cf8;
+  --primary-foreground: #ffffff;
+  --primary-muted: #1e1b4b;
+  --primary-border: #4338ca;
+  
+  --success: #34d399;
+  --success-bg: #064e3b;
+  --warning: #fbbf24;
+  --warning-bg: #78350f;
+  --danger: #f87171;
+  --danger-bg: #7f1d1d;
+  --info: #60a5fa;
+  --info-bg: #1e3a8a;
+  
+  --hover: #374151;
+  --active: #4b5563;
+  --focus-ring: #6366f1;
+  --tooltip-bg: #4b5563;
+  --tooltip-text: #f9fafb;
+  
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  
+  --scrollbar-track: #111827;
+  --scrollbar-thumb: #374151;
+}
+
+/* Slate Theme - Neutral Professional */
+:root[data-theme="slate"] {
+  --primary: #475569;
+  --primary-hover: #334155;
+  --primary-foreground: #ffffff;
+  --primary-muted: #f1f5f9;
+  --primary-border: #cbd5e1;
+  
+  --focus-ring: #475569;
+}
+
+:root.dark[data-theme="slate"] {
+  --primary: #94a3b8;
+  --primary-hover: #cbd5e1;
+  --primary-foreground: #0f172a;
+  --primary-muted: #1e293b;
+  --primary-border: #475569;
+  
+  --focus-ring: #94a3b8;
+}
+
+/* Blue Theme - SaaS Enterprise */
+:root[data-theme="blue"] {
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --primary-foreground: #ffffff;
+  --primary-muted: #dbeafe;
+  --primary-border: #93c5fd;
+  
+  --focus-ring: #2563eb;
+}
+
+:root.dark[data-theme="blue"] {
+  --primary: #3b82f6;
+  --primary-hover: #60a5fa;
+  --primary-foreground: #ffffff;
+  --primary-muted: #1e3a8a;
+  --primary-border: #1d4ed8;
+  
+  --focus-ring: #3b82f6;
+}
+
+/* Green Theme - Fresh Natural */
+:root[data-theme="green"] {
+  --primary: #059669;
+  --primary-hover: #047857;
+  --primary-foreground: #ffffff;
+  --primary-muted: #d1fae5;
+  --primary-border: #6ee7b7;
+  
+  --focus-ring: #059669;
+}
+
+:root.dark[data-theme="green"] {
+  --primary: #10b981;
+  --primary-hover: #34d399;
+  --primary-foreground: #ffffff;
+  --primary-muted: #064e3b;
+  --primary-border: #047857;
+  
+  --focus-ring: #10b981;
+}
+
+/* Purple Theme - Creative */
+:root[data-theme="purple"] {
+  --primary: #7c3aed;
+  --primary-hover: #6d28d9;
+  --primary-foreground: #ffffff;
+  --primary-muted: #ede9fe;
+  --primary-border: #c4b5fd;
+  
+  --focus-ring: #7c3aed;
+}
+
+:root.dark[data-theme="purple"] {
+  --primary: #8b5cf6;
+  --primary-hover: #a78bfa;
+  --primary-foreground: #ffffff;
+  --primary-muted: #2e1065;
+  --primary-border: #6d28d9;
+  
+  --focus-ring: #8b5cf6;
+}
+
 html {
+  font-size: calc(var(--app-font-size) * var(--app-font-scale));
   scrollbar-gutter: stable;
-  scrollbar-color: #d1d5db #f9fafb;
-  background-color: #f9fafb;
+  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  background-color: var(--background-secondary);
+}
+
+/*
+ * CJK glyphs fill the whole em box, so at a Latin-tuned size they read as oversized
+ * and heavy. Nudge the root size down and name the local script face explicitly
+ * instead of relying on the generic fallback.
+ */
+:root:lang(zh) {
+  --app-font-scale: 0.909;
+  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC";
+}
+
+:root:lang(ja) {
+  --app-font-scale: 0.909;
+  --font-cjk: "Hiragino Sans", "Yu Gothic", "Noto Sans CJK JP", "Source Han Sans JP";
+}
+
+:root:lang(ko) {
+  --app-font-scale: 0.93;
+  --font-cjk: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Source Han Sans KR";
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 html:where(.dark) {
-  scrollbar-color: #374151 #111827;
-  background-color: #111827;
   color-scheme: dark;
 }
 
diff --git a/web/src/pages/APIKeysPage.tsx b/web/src/pages/APIKeysPage.tsx
index 9bf6da3f..20f05199 100644
--- a/web/src/pages/APIKeysPage.tsx
+++ b/web/src/pages/APIKeysPage.tsx
@@ -115,8 +115,8 @@ export function APIKeysPage() {
             <div className="flex-1 min-w-0">
               <p className="font-medium text-amber-800 dark:text-amber-200 mb-1">{t('preferences.apiKeys.keyCreated')}</p>
               <p className="text-sm text-amber-700 dark:text-amber-300 mb-3">{t('preferences.apiKeys.keyWarning')}</p>
-              <div className="flex items-center gap-2 bg-white dark:bg-gray-800 rounded-md border border-amber-300 dark:border-amber-700 px-3 py-2">
-                <code className="text-sm font-mono text-gray-900 dark:text-gray-100 break-all flex-1">{createdKey.key}</code>
+              <div className="flex items-center gap-2 bg-[var(--surface)] rounded-md border border-amber-300 dark:border-amber-700 px-3 py-2">
+                <code className="text-sm font-mono text-[var(--foreground)] break-all flex-1">{createdKey.key}</code>
                 <CopyButton text={createdKey.key} />
               </div>
             </div>
@@ -128,11 +128,11 @@ export function APIKeysPage() {
       )}
 
       {/* Create Form */}
-      <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
-        <h2 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-4">{t('preferences.apiKeys.createNew')}</h2>
+      <div className="mb-8 rounded-lg border border-[var(--border)] bg-[var(--surface)] p-4">
+        <h2 className="text-sm font-medium text-[var(--foreground)] mb-4">{t('preferences.apiKeys.createNew')}</h2>
         <form onSubmit={handleCreate} className="space-y-4">
           <div>
-            <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">{t('preferences.apiKeys.name')}</label>
+            <label className="block text-sm text-[var(--foreground-secondary)] mb-1">{t('preferences.apiKeys.name')}</label>
             <Input
               value={name}
               onChange={(e) => setName(e.target.value)}
@@ -141,11 +141,11 @@ export function APIKeysPage() {
           </div>
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">{t('preferences.apiKeys.permissions')}</label>
+              <label className="block text-sm text-[var(--foreground-secondary)] mb-1">{t('preferences.apiKeys.permissions')}</label>
               <select
                 value={permission}
                 onChange={(e) => setPermission(e.target.value)}
-                className="w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100"
+                className="w-full rounded-md border border-[var(--border)] bg-white bg-[var(--surface-secondary)] px-3 py-2 text-sm text-[var(--foreground)]"
               >
                 {PERMISSION_OPTIONS.map((opt) => (
                   <option key={opt.value} value={opt.value}>{t(opt.label)}</option>
@@ -153,11 +153,11 @@ export function APIKeysPage() {
               </select>
             </div>
             <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">{t('preferences.apiKeys.expiration')}</label>
+              <label className="block text-sm text-[var(--foreground-secondary)] mb-1">{t('preferences.apiKeys.expiration')}</label>
               <select
                 value={expiration}
                 onChange={(e) => setExpiration(e.target.value)}
-                className="w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100"
+                className="w-full rounded-md border border-[var(--border)] bg-white bg-[var(--surface-secondary)] px-3 py-2 text-sm text-[var(--foreground)]"
               >
                 {EXPIRATION_OPTIONS.map((opt) => (
                   <option key={opt.value} value={opt.value}>{t(opt.label)}</option>
@@ -165,7 +165,7 @@ export function APIKeysPage() {
               </select>
             </div>
           </div>
-          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+          {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
           <Button type="submit" disabled={createMutation.isPending}>
             {createMutation.isPending ? <Spinner className="h-4 w-4" /> : t('preferences.apiKeys.create')}
           </Button>
@@ -176,17 +176,17 @@ export function APIKeysPage() {
       {isLoading ? (
         <div className="flex justify-center py-8"><Spinner /></div>
       ) : !keys || keys.length === 0 ? (
-        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+        <div className="text-center py-8 text-[var(--foreground-secondary)]">
           <Key className="h-8 w-8 mx-auto mb-2 opacity-40" />
           <p>{t('preferences.apiKeys.empty')}</p>
         </div>
       ) : (
-        <div className="rounded-lg border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="rounded-lg border border-[var(--border)] divide-y divide-[var(--border)]">
           {keys.map((key) => {
             const exp = formatExpiration(key)
             const isEditing = editingKeyId === key.id
             return (
-              <div key={key.id} className="p-4 bg-white dark:bg-gray-800 first:rounded-t-lg last:rounded-b-lg">
+              <div key={key.id} className="p-4 bg-[var(--surface)] first:rounded-t-lg last:rounded-b-lg">
                 <div className="flex items-center justify-between">
                   <div className="min-w-0">
                     <div className="flex items-center gap-2 mb-1">
@@ -204,14 +204,14 @@ export function APIKeysPage() {
                           />
                           <button
                             type="submit"
-                            className="p-1 text-gray-400 hover:text-green-600 dark:hover:text-green-400 transition-colors"
+                            className="p-1 text-[var(--foreground-muted)] hover:text-green-600 dark:hover:text-green-400 transition-colors"
                             disabled={renameMutation.isPending}
                           >
                             <Check className="h-4 w-4" />
                           </button>
                           <button
                             type="button"
-                            className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                            className="p-1 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] transition-colors"
                             onClick={() => { setEditingKeyId(null); setEditingName('') }}
                           >
                             <X className="h-4 w-4" />
@@ -219,14 +219,14 @@ export function APIKeysPage() {
                         </form>
                       ) : (
                         <>
-                          <span className="font-medium text-gray-900 dark:text-gray-100">{key.name}</span>
+                          <span className="font-medium text-[var(--foreground)]">{key.name}</span>
                           {savedId === key.id && <Check className="h-4 w-4 text-green-500" />}
                         </>
                       )}
                       <Badge color="gray">{permissionLabel(key.permissions)}</Badge>
                       {exp.expired && <Badge color="red">{exp.text}</Badge>}
                     </div>
-                    <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+                    <div className="flex items-center gap-3 text-xs text-[var(--foreground-secondary)]">
                       <span><code>{key.key_prefix}...</code></span>
                       <span>{t('preferences.apiKeys.createdAt')}: {new Date(key.created_at).toLocaleDateString()}</span>
                       <span>{t('preferences.apiKeys.lastUsed')}: {key.last_used_at ? new Date(key.last_used_at).toLocaleDateString() : t('preferences.apiKeys.lastUsedNever')}</span>
@@ -238,7 +238,7 @@ export function APIKeysPage() {
                     {!isEditing && (
                       <button
                         type="button"
-                        className="p-1.5 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
+                        className="p-1.5 text-[var(--foreground-muted)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)] transition-colors"
                         onClick={() => { setEditingKeyId(key.id); setEditingName(key.name) }}
                         title={t('preferences.apiKeys.rename')}
                       >
@@ -247,7 +247,7 @@ export function APIKeysPage() {
                     )}
                     <button
                       type="button"
-                      className="p-1.5 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                      className="p-1.5 text-[var(--foreground-muted)] hover:text-[var(--danger)] dark:hover:text-red-400 transition-colors"
                       onClick={() => setDeleteTarget(key)}
                     >
                       <Trash2 className="h-4 w-4" />
@@ -267,11 +267,11 @@ export function APIKeysPage() {
         title={t('preferences.apiKeys.deleteConfirmTitle')}
       >
         <div className="p-4">
-          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          <p className="text-sm text-[var(--foreground-secondary)] mb-4">
             <Trans
               i18nKey="preferences.apiKeys.deleteConfirmBody"
               values={{ name: deleteTarget?.name }}
-              components={{ bold: <strong className="font-semibold text-gray-900 dark:text-gray-100" /> }}
+              components={{ bold: <strong className="font-semibold text-[var(--foreground)]" /> }}
             />
           </p>
           <div className="flex justify-end gap-2">
diff --git a/web/src/pages/AppearancePage.tsx b/web/src/pages/AppearancePage.tsx
index 1be94270..4053858d 100644
--- a/web/src/pages/AppearancePage.tsx
+++ b/web/src/pages/AppearancePage.tsx
@@ -1,13 +1,13 @@
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Check } from 'lucide-react'
-import { useTheme, type Theme, type FontSize } from '@/contexts/ThemeContext'
+import { useTheme, type Theme, type ColorTheme, type FontSize } from '@/contexts/ThemeContext'
 import { useLayout, type Layout } from '@/contexts/LayoutContext'
 import { useLanguage } from '@/contexts/LanguageContext'
 import { usePreference, useSetPreference } from '@/hooks/usePreferences'
 export function AppearancePage({ hideCompletedItems = false }: { hideCompletedItems?: boolean } = {}) {
   const { t } = useTranslation()
-  const { theme, setTheme, fontSize, setFontSize } = useTheme()
+  const { theme, setTheme, colorTheme, setColorTheme, fontSize, setFontSize } = useTheme()
   const { layout, setLayout } = useLayout()
   const { language, setLanguage, availableLanguages } = useLanguage()
   const { data: strikethroughPref } = usePreference<boolean>('strikethrough_completed')
@@ -21,6 +21,14 @@ export function AppearancePage({ hideCompletedItems = false }: { hideCompletedIt
     { value: 'system', label: t('preferences.themes.system'), description: t('preferences.themes.systemDesc') },
   ]
 
+  const colorThemes: { value: ColorTheme; label: string; color: string }[] = [
+    { value: 'default', label: t('preferences.colorThemes.default'), color: '#4f46e5' },
+    { value: 'slate', label: t('preferences.colorThemes.slate'), color: '#475569' },
+    { value: 'blue', label: t('preferences.colorThemes.blue'), color: '#2563eb' },
+    { value: 'green', label: t('preferences.colorThemes.green'), color: '#059669' },
+    { value: 'purple', label: t('preferences.colorThemes.purple'), color: '#7c3aed' },
+  ]
+
   const fontSizes: { value: FontSize; label: string; description: string; previewSize: string }[] = [
     { value: 'small', label: t('preferences.fontSizes.smaller'), description: t('preferences.fontSizes.smallerDesc'), previewSize: '14px' },
     { value: 'normal', label: t('preferences.fontSizes.normal'), description: t('preferences.fontSizes.normalDesc'), previewSize: '15.4px' },
@@ -29,11 +37,11 @@ export function AppearancePage({ hideCompletedItems = false }: { hideCompletedIt
 
   return (
     <div>
-      <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-6">{t('preferences.appearance')}</h1>
+      <h1 className="text-xl font-semibold text-[var(--foreground)] mb-6">{t('preferences.appearance')}</h1>
 
       <div className="space-y-8">
         <div>
-          <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+          <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
             {t('preferences.theme')}
           </h2>
           <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
@@ -43,56 +51,86 @@ export function AppearancePage({ hideCompletedItems = false }: { hideCompletedIt
                 onClick={() => setTheme(th.value)}
                 className={`rounded-lg border-2 p-4 text-left transition-colors ${
                   theme === th.value
-                    ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20'
-                    : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600'
+                    ? 'border-[var(--primary)] bg-[var(--primary-muted)]'
+                    : 'border-[var(--border)] bg-[var(--surface)] hover:border-[var(--border)] dark:hover:border-[var(--border)]'
                 }`}
               >
                 {th.value === 'system' ? (
-                  <div className="mb-3 rounded-md border border-gray-300 overflow-hidden flex">
+                  <div className="mb-3 rounded-md border border-[var(--border)] overflow-hidden flex">
                     <div className="w-1/2">
-                      <div className="h-3 bg-white border-b border-gray-200" />
-                      <div className="h-12 flex gap-1 p-1.5 bg-gray-50">
-                        <div className="w-6 rounded bg-gray-200" />
+                      <div className="h-3 bg-white border-b border-[var(--border)]" />
+                      <div className="h-12 flex gap-1 p-1.5 bg-[var(--surface-secondary)]">
+                        <div className="w-6 rounded bg-[var(--surface-tertiary)]" />
                         <div className="flex-1 space-y-1 pt-0.5">
-                          <div className="h-1.5 rounded bg-gray-300 w-3/4" />
-                          <div className="h-1.5 rounded bg-gray-200 w-1/2" />
+                          <div className="h-1.5 rounded bg-[var(--border)] w-3/4" />
+                          <div className="h-1.5 rounded bg-[var(--surface-tertiary)] w-1/2" />
                         </div>
                       </div>
                     </div>
                     <div className="w-1/2">
-                      <div className="h-3 bg-gray-900 border-b border-gray-700" />
-                      <div className="h-12 flex gap-1 p-1.5 bg-gray-900">
-                        <div className="w-6 rounded bg-gray-700" />
+                      <div className="h-3 bg-[var(--background)] border-b border-[var(--border)]" />
+                      <div className="h-12 flex gap-1 p-1.5 bg-[var(--background)]">
+                        <div className="w-6 rounded bg-[var(--surface-secondary)]" />
                         <div className="flex-1 space-y-1 pt-0.5">
-                          <div className="h-1.5 rounded bg-gray-600 w-3/4" />
-                          <div className="h-1.5 rounded bg-gray-700 w-1/2" />
+                          <div className="h-1.5 rounded bg-[var(--foreground-secondary)] w-3/4" />
+                          <div className="h-1.5 rounded bg-[var(--surface-secondary)] w-1/2" />
                         </div>
                       </div>
                     </div>
                   </div>
                 ) : (
                   <div className={`mb-3 rounded-md border overflow-hidden ${
-                    th.value === 'light' ? 'border-gray-200' : 'border-gray-700'
+                    th.value === 'light' ? 'border-[var(--border)]' : 'border-[var(--border)]'
                   }`}>
-                    <div className={`h-3 ${th.value === 'light' ? 'bg-white border-b border-gray-200' : 'bg-gray-900 border-b border-gray-700'}`} />
-                    <div className={`h-12 flex gap-1 p-1.5 ${th.value === 'light' ? 'bg-gray-50' : 'bg-gray-900'}`}>
-                      <div className={`w-8 rounded ${th.value === 'light' ? 'bg-gray-200' : 'bg-gray-700'}`} />
+                    <div className={`h-3 ${th.value === 'light' ? 'bg-white border-b border-[var(--border)]' : 'bg-[var(--background)] border-b border-[var(--border)]'}`} />
+                    <div className={`h-12 flex gap-1 p-1.5 ${th.value === 'light' ? 'bg-[var(--surface-secondary)]' : 'bg-[var(--background)]'}`}>
+                      <div className={`w-8 rounded ${th.value === 'light' ? 'bg-[var(--surface-tertiary)]' : 'bg-[var(--surface-secondary)]'}`} />
                       <div className="flex-1 space-y-1 pt-0.5">
-                        <div className={`h-1.5 rounded ${th.value === 'light' ? 'bg-gray-300' : 'bg-gray-600'} w-3/4`} />
-                        <div className={`h-1.5 rounded ${th.value === 'light' ? 'bg-gray-200' : 'bg-gray-700'} w-1/2`} />
+                        <div className={`h-1.5 rounded ${th.value === 'light' ? 'bg-[var(--border)]' : 'bg-[var(--foreground-secondary)]'} w-3/4`} />
+                        <div className={`h-1.5 rounded ${th.value === 'light' ? 'bg-[var(--surface-tertiary)]' : 'bg-[var(--surface-secondary)]'} w-1/2`} />
                       </div>
                     </div>
                   </div>
                 )}
-                <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{th.label}</p>
-                <p className="text-xs text-gray-500 dark:text-gray-400">{th.description}</p>
+                <p className="text-sm font-medium text-[var(--foreground)]">{th.label}</p>
+                <p className="text-xs text-[var(--foreground-secondary)]">{th.description}</p>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
+            {t('preferences.colorTheme')}
+          </h2>
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
+            {colorThemes.map((ct) => (
+              <button
+                key={ct.value}
+                onClick={() => setColorTheme(ct.value)}
+                className={`rounded-lg border-2 p-4 text-left transition-colors ${
+                  colorTheme === ct.value
+                    ? 'border-[var(--primary)] bg-[var(--primary-muted)]'
+                    : 'border-[var(--border)] bg-[var(--surface)] hover:border-[var(--border)] dark:hover:border-[var(--border)]'
+                }`}
+              >
+                <div className="mb-3 flex items-center gap-2">
+                  <div
+                    className="w-8 h-8 rounded-full border-2 border-white dark:border-[var(--border)] shadow-sm"
+                    style={{ backgroundColor: ct.color }}
+                  />
+                  {colorTheme === ct.value && (
+                    <Check className="h-5 w-5 text-[var(--primary)]" />
+                  )}
+                </div>
+                <p className="text-sm font-medium text-[var(--foreground)]">{ct.label}</p>
               </button>
             ))}
           </div>
         </div>
 
         <div>
-          <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+          <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
             {t('preferences.layout')}
           </h2>
           <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
@@ -105,30 +143,30 @@ export function AppearancePage({ hideCompletedItems = false }: { hideCompletedIt
                 onClick={() => setLayout(lo.value)}
                 className={`rounded-lg border-2 p-4 text-left transition-colors ${
                   layout === lo.value
-                    ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20'
-                    : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600'
+                    ? 'border-[var(--primary)] bg-[var(--primary-muted)]'
+                    : 'border-[var(--border)] bg-[var(--surface)] hover:border-[var(--border)] dark:hover:border-[var(--border)]'
                 }`}
               >
-                <div className="mb-3 rounded-md border border-gray-300 dark:border-gray-600 overflow-hidden">
-                  <div className="h-3 bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600" />
-                  <div className={`h-12 bg-white dark:bg-gray-800 flex items-start pt-1.5 ${
+                <div className="mb-3 rounded-md border border-[var(--border)] overflow-hidden">
+                  <div className="h-3 bg-[var(--surface-secondary)] border-b border-[var(--border)]" />
+                  <div className={`h-12 bg-[var(--surface)] flex items-start pt-1.5 ${
                     lo.value === 'centered' ? 'px-4' : 'px-1.5'
                   }`}>
                     <div className="flex-1 space-y-1">
-                      <div className="h-1.5 rounded bg-gray-300 dark:bg-gray-600 w-3/4" />
-                      <div className="h-1.5 rounded bg-gray-200 dark:bg-gray-700 w-1/2" />
+                      <div className="h-1.5 rounded bg-[var(--border)] w-3/4" />
+                      <div className="h-1.5 rounded bg-[var(--surface-tertiary)] w-1/2" />
                     </div>
                   </div>
                 </div>
-                <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{lo.label}</p>
-                <p className="text-xs text-gray-500 dark:text-gray-400">{lo.description}</p>
+                <p className="text-sm font-medium text-[var(--foreground)]">{lo.label}</p>
+                <p className="text-xs text-[var(--foreground-secondary)]">{lo.description}</p>
               </button>
             ))}
           </div>
         </div>
 
         <div>
-          <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+          <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
             {t('preferences.fontSize')}
           </h2>
           <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
@@ -138,19 +176,19 @@ export function AppearancePage({ hideCompletedItems = false }: { hideCompletedIt
                 onClick={() => setFontSize(fs.value)}
                 className={`rounded-lg border-2 p-4 text-left transition-colors ${
                   fontSize === fs.value
-                    ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20'
-                    : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600'
+                    ? 'border-[var(--primary)] bg-[var(--primary-muted)]'
+                    : 'border-[var(--border)] bg-[var(--surface)] hover:border-[var(--border)] dark:hover:border-[var(--border)]'
                 }`}
               >
-                <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{fs.label}</p>
-                <p className="text-gray-500 dark:text-gray-400 mt-1" style={{ fontSize: fs.previewSize }}>{fs.description}</p>
+                <p className="text-sm font-medium text-[var(--foreground)]">{fs.label}</p>
+                <p className="text-[var(--foreground-secondary)] mt-1" style={{ fontSize: fs.previewSize }}>{fs.description}</p>
               </button>
             ))}
           </div>
         </div>
 
         <div>
-          <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+          <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
             {t('preferences.language')}
           </h2>
           <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
@@ -160,22 +198,22 @@ export function AppearancePage({ hideCompletedItems = false }: { hideCompletedIt
                 onClick={() => setLanguage(lang.value)}
                 className={`rounded-lg border-2 p-4 text-left transition-colors ${
                   language === lang.value
-                    ? 'border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20'
-                    : 'border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600'
+                    ? 'border-[var(--primary)] bg-[var(--primary-muted)]'
+                    : 'border-[var(--border)] bg-[var(--surface)] hover:border-[var(--border)] dark:hover:border-[var(--border)]'
                 }`}
               >
-                <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{lang.nativeLabel}</p>
-                <p className="text-xs text-gray-500 dark:text-gray-400">{lang.label}</p>
+                <p className="text-sm font-medium text-[var(--foreground)]">{lang.nativeLabel}</p>
+                <p className="text-xs text-[var(--foreground-secondary)]">{lang.label}</p>
               </button>
             ))}
           </div>
         </div>
 
         {!hideCompletedItems && <div>
-          <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+          <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
             {t('preferences.completedItems')}
           </h2>
-          <div className="rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3">
+          <div className="rounded-lg border border-[var(--border)] px-4 py-3">
             <label className="flex items-start gap-3 cursor-pointer">
               <input
                 type="checkbox"
@@ -191,18 +229,18 @@ export function AppearancePage({ hideCompletedItems = false }: { hideCompletedIt
                     },
                   )
                 }}
-                className="mt-0.5 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800"
+                className="mt-0.5 h-4 w-4 rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] dark:border-[var(--border)] bg-[var(--surface)]"
               />
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  <span className="text-sm font-medium text-[var(--foreground)]">
                     {t('preferences.strikethroughCompleted')}
                   </span>
                   {savedId === 'strikethrough' && (
                     <Check className="h-4 w-4 text-green-500" />
                   )}
                 </div>
-                <p className="text-xs text-gray-500 dark:text-gray-400">
+                <p className="text-xs text-[var(--foreground-secondary)]">
                   {t('preferences.strikethroughCompletedDesc')}
                 </p>
               </div>
diff --git a/web/src/pages/AuthenticationPage.tsx b/web/src/pages/AuthenticationPage.tsx
index 3217f37e..d2f506de 100644
--- a/web/src/pages/AuthenticationPage.tsx
+++ b/web/src/pages/AuthenticationPage.tsx
@@ -101,19 +101,19 @@ function PasswordTab() {
 
   return (
     <div className="mt-6">
-      <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+      <p className="text-sm text-[var(--foreground-secondary)] mb-6">
         {t(descriptionKey)}
       </p>
       <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
         {hasPassword && (
           <div>
             <div className="flex items-center justify-between mb-1">
-              <label htmlFor="old-password" className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              <label htmlFor="old-password" className="block text-sm font-medium text-[var(--foreground)]">
                 {t('changePassword.oldPassword')}
               </label>
               <Link
                 to="/forgot-password"
-                className="text-xs text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                className="text-xs text-[var(--primary)] hover:text-[var(--primary)] dark:text-[var(--primary)] dark:hover:text-[var(--primary)]"
               >
                 {t('preferences.authentication.password.forgotLink')}
               </Link>
@@ -146,7 +146,7 @@ function PasswordTab() {
           error={confirmPassword.length > 0 && !passwordsMatch ? t('changePassword.mismatch') : undefined}
         />
         {error && (
-          <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+          <p className="text-sm text-[var(--danger)]">{error}</p>
         )}
         <div className="flex items-center gap-2">
           <Button type="submit" disabled={loading || !passwordsMatch}>
@@ -202,32 +202,32 @@ function ConnectedAccountsTab() {
 
   return (
     <div className="mt-6">
-      <p className="text-sm text-gray-500 dark:text-gray-400 mb-6">
+      <p className="text-sm text-[var(--foreground-secondary)] mb-6">
         {t('preferences.authentication.connectedAccounts.description')}
       </p>
 
       {!accounts || accounts.length === 0 ? (
-        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+        <div className="text-center py-8 text-[var(--foreground-secondary)]">
           <Link2 className="h-8 w-8 mx-auto mb-2 opacity-40" />
           <p>{t('preferences.authentication.connectedAccounts.empty')}</p>
         </div>
       ) : (
-        <div className="rounded-lg border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="rounded-lg border border-[var(--border)] divide-y divide-[var(--border)]">
           {accounts.map((account) => (
-            <div key={account.id} className="p-4 bg-white dark:bg-gray-800 first:rounded-t-lg last:rounded-b-lg">
+            <div key={account.id} className="p-4 bg-[var(--surface)] first:rounded-t-lg last:rounded-b-lg">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-3">
                   <div className="shrink-0">
-                    {PROVIDER_ICONS[account.provider] ?? <Link2 className="h-5 w-5 text-gray-400" />}
+                    {PROVIDER_ICONS[account.provider] ?? <Link2 className="h-5 w-5 text-[var(--foreground-muted)]" />}
                   </div>
                   <div>
                     <div className="flex items-center gap-2">
-                      <span className="font-medium text-gray-900 dark:text-gray-100">
+                      <span className="font-medium text-[var(--foreground)]">
                         {providerLabel(account.provider)}
                       </span>
                       <Badge color="gray">{t('preferences.authentication.connectedAccounts.linked')}</Badge>
                     </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                    <div className="text-xs text-[var(--foreground-secondary)] mt-0.5">
                       {account.provider_email && <span>{account.provider_email}</span>}
                       {account.provider_email && account.provider_username && <span> &middot; </span>}
                       {account.provider_username && <span>{account.provider_username}</span>}
@@ -238,7 +238,7 @@ function ConnectedAccountsTab() {
                 </div>
                 <button
                   type="button"
-                  className="p-1.5 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                  className="p-1.5 text-[var(--foreground-muted)] hover:text-[var(--danger)] dark:hover:text-red-400 transition-colors"
                   onClick={() => setUnlinkTarget(account)}
                   title={t('preferences.authentication.connectedAccounts.unlink')}
                 >
@@ -256,15 +256,15 @@ function ConnectedAccountsTab() {
         title={t('preferences.authentication.connectedAccounts.unlinkConfirmTitle')}
       >
         <div className="p-4">
-          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          <p className="text-sm text-[var(--foreground-secondary)] mb-4">
             <Trans
               i18nKey="preferences.authentication.connectedAccounts.unlinkConfirmBody"
               values={{ provider: unlinkTarget ? providerLabel(unlinkTarget.provider) : '' }}
-              components={{ bold: <strong className="font-semibold text-gray-900 dark:text-gray-100" /> }}
+              components={{ bold: <strong className="font-semibold text-[var(--foreground)]" /> }}
             />
           </p>
           {unlinkError && (
-            <p className="text-sm text-red-600 dark:text-red-400 mb-4">{unlinkError}</p>
+            <p className="text-sm text-[var(--danger)] mb-4">{unlinkError}</p>
           )}
           <div className="flex justify-end gap-2">
             <Button variant="secondary" onClick={closeUnlinkModal}>{t('common.cancel')}</Button>
@@ -291,10 +291,10 @@ export function AuthenticationPage() {
   return (
     <div>
       <div className="mb-6">
-        <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+        <h1 className="text-xl font-semibold text-[var(--foreground)]">
           {t('preferences.authentication.title')}
         </h1>
-        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+        <p className="text-sm text-[var(--foreground-secondary)] mt-1">
           {t('preferences.authentication.description')}
         </p>
       </div>
diff --git a/web/src/pages/ChangePasswordPage.tsx b/web/src/pages/ChangePasswordPage.tsx
index f8ff55f3..f6f94c70 100644
--- a/web/src/pages/ChangePasswordPage.tsx
+++ b/web/src/pages/ChangePasswordPage.tsx
@@ -56,13 +56,13 @@ export function ChangePasswordPage() {
   }
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 px-4">
+    <div className="min-h-screen flex flex-col bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
       <div className="flex-1 flex items-center justify-center">
         <div className="max-w-sm w-full">
-          <h1 className="text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-2">
+          <h1 className="text-2xl font-bold text-center text-[var(--foreground)] mb-2">
             {t('changePassword.title', { brandName })}
           </h1>
-          <p className="text-sm text-center text-gray-600 dark:text-gray-400 mb-8">
+          <p className="text-sm text-center text-[var(--foreground-secondary)] mb-8">
             {t('changePassword.description')}
           </p>
           <form onSubmit={handleSubmit} className="space-y-4">
@@ -91,7 +91,7 @@ export function ChangePasswordPage() {
               autoComplete="new-password"
             />
             {error && (
-              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+              <p className="text-sm text-[var(--danger)]">{error}</p>
             )}
             <Button type="submit" disabled={loading} className="w-full">
               {loading ? t('changePassword.submitting') : t('changePassword.submit')}
diff --git a/web/src/pages/CliAuthorizePage.tsx b/web/src/pages/CliAuthorizePage.tsx
index 7d36f317..3a65612d 100644
--- a/web/src/pages/CliAuthorizePage.tsx
+++ b/web/src/pages/CliAuthorizePage.tsx
@@ -28,7 +28,7 @@ export function CliAuthorizePage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+      <div className="min-h-screen flex items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)]">
         <Spinner />
       </div>
     )
@@ -41,9 +41,9 @@ export function CliAuthorizePage() {
 
   if (!callbackPort || callbackPort < 1024 || callbackPort > 65535) {
     return (
-      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+      <div className="min-h-screen flex flex-col items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
         <div className="max-w-md w-full text-center">
-          <p className="text-gray-600 dark:text-gray-400">{t('cliAuth.missingParams')}</p>
+          <p className="text-[var(--foreground-secondary)]">{t('cliAuth.missingParams')}</p>
         </div>
       </div>
     )
@@ -69,7 +69,7 @@ export function CliAuthorizePage() {
 
   if (status === 'success') {
     return (
-      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+      <div className="min-h-screen flex flex-col items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
         <div className="max-w-md w-full text-center">
           <p className="text-lg text-green-600 dark:text-green-400">{t('cliAuth.success')}</p>
         </div>
@@ -79,37 +79,37 @@ export function CliAuthorizePage() {
 
   if (status === 'denied') {
     return (
-      <div className="min-h-screen flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+      <div className="min-h-screen flex flex-col items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
         <div className="max-w-md w-full text-center">
-          <p className="text-lg text-gray-600 dark:text-gray-400">{t('cliAuth.denied')}</p>
+          <p className="text-lg text-[var(--foreground-secondary)]">{t('cliAuth.denied')}</p>
         </div>
       </div>
     )
   }
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 px-4">
+    <div className="min-h-screen flex flex-col bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
       <div className="flex-1 flex items-center justify-center">
         <div className="max-w-md w-full">
-          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-8">
-            <h1 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6 text-center">
+          <div className="bg-[var(--surface)] rounded-lg shadow-sm border border-[var(--border)] p-8">
+            <h1 className="text-xl font-bold text-[var(--foreground)] mb-6 text-center">
               {t('cliAuth.title')}
             </h1>
 
-            <p className="text-gray-700 dark:text-gray-300 mb-4 text-center">
+            <p className="text-[var(--foreground)] mb-4 text-center">
               {t('cliAuth.description', { clientName })}
             </p>
 
-            <p className="text-sm text-gray-500 dark:text-gray-400 mb-2 text-center">
+            <p className="text-sm text-[var(--foreground-secondary)] mb-2 text-center">
               {t('cliAuth.loggedInAs', { displayName: user.display_name, email: user.email })}
             </p>
 
-            <p className="text-sm text-gray-500 dark:text-gray-400 mb-8 text-center">
+            <p className="text-sm text-[var(--foreground-secondary)] mb-8 text-center">
               {t('cliAuth.permissions')}
             </p>
 
             {status === 'error' && (
-              <p className="text-sm text-red-600 dark:text-red-400 mb-4 text-center">{t('cliAuth.error')}</p>
+              <p className="text-sm text-[var(--danger)] mb-4 text-center">{t('cliAuth.error')}</p>
             )}
 
             <div className="flex gap-3">
diff --git a/web/src/pages/DirectoryUsersTab.tsx b/web/src/pages/DirectoryUsersTab.tsx
index 5a912213..2e32d6c7 100644
--- a/web/src/pages/DirectoryUsersTab.tsx
+++ b/web/src/pages/DirectoryUsersTab.tsx
@@ -50,7 +50,7 @@ function compareValues(a: string | number, b: string | number, order: 'asc' | 'd
 function SortIndicator({ active, direction }: { active: boolean; direction?: 'asc' | 'desc' }) {
   if (!active) {
     return (
-      <svg className="w-3 h-3 text-gray-300 dark:text-gray-600" viewBox="0 0 10 14" fill="currentColor">
+      <svg className="w-3 h-3 text-[var(--foreground-secondary)]" viewBox="0 0 10 14" fill="currentColor">
         <path d="M5 0L9 5H1L5 0Z" />
         <path d="M5 14L1 9H9L5 14Z" />
       </svg>
@@ -58,13 +58,13 @@ function SortIndicator({ active, direction }: { active: boolean; direction?: 'as
   }
   if (direction === 'asc') {
     return (
-      <svg className="w-3 h-3 text-indigo-600 dark:text-indigo-400" viewBox="0 0 10 7" fill="currentColor">
+      <svg className="w-3 h-3 text-[var(--primary)]" viewBox="0 0 10 7" fill="currentColor">
         <path d="M5 0L10 7H0L5 0Z" />
       </svg>
     )
   }
   return (
-    <svg className="w-3 h-3 text-indigo-600 dark:text-indigo-400" viewBox="0 0 10 7" fill="currentColor">
+    <svg className="w-3 h-3 text-[var(--primary)]" viewBox="0 0 10 7" fill="currentColor">
       <path d="M5 7L0 0H10L5 7Z" />
     </svg>
   )
@@ -92,7 +92,7 @@ function SortableHeader({
     <button
       type="button"
       onClick={() => onSort(sortKey)}
-      className={`flex items-center gap-1 ${justify} text-xs font-medium uppercase tracking-wider text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 cursor-pointer select-none ${className ?? ''}`}
+      className={`flex items-center gap-1 ${justify} text-xs font-medium uppercase tracking-wider text-[var(--foreground-muted)] hover:text-[var(--foreground)] cursor-pointer select-none ${className ?? ''}`}
     >
       <span>{children}</span>
       <SortIndicator active={active} direction={active ? order : undefined} />
@@ -401,11 +401,11 @@ export function DirectoryUsersTab() {
       </div>
 
       {error && (
-        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+        <p className="text-sm text-[var(--danger)]">{error}</p>
       )}
 
       {filteredUsers.length === 0 ? (
-        <p className="text-sm text-gray-500 dark:text-gray-400">{t('admin.users.noUsers')}</p>
+        <p className="text-sm text-[var(--foreground-secondary)]">{t('admin.users.noUsers')}</p>
       ) : (
         (() => {
           const dataCols = namespacesEnabled ? 6 : 5
@@ -413,10 +413,10 @@ export function DirectoryUsersTab() {
             gridTemplateColumns: `25% repeat(${dataCols}, minmax(0, 1fr)) 2rem`,
           }
           return (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+        <div className="border border-[var(--border)] rounded-lg overflow-hidden">
           {/* Desktop column headers */}
           <div
-            className="hidden sm:grid items-center gap-3 px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"
+            className="hidden sm:grid items-center gap-3 px-3 py-2 bg-[var(--surface-secondary)] border-b border-[var(--border)]"
             style={gridStyle}
           >
             <SortableHeader sortKey="name" active={sortBy === 'name'} order={sortOrder} onSort={handleSort}>
@@ -444,7 +444,7 @@ export function DirectoryUsersTab() {
             </SortableHeader>
             <span aria-hidden="true" />
           </div>
-          <div className="divide-y divide-gray-200 dark:divide-gray-700">
+          <div className="divide-y divide-[var(--border)]">
           {filteredUsers.map((u) => {
             const isSelf = u.id === currentUser?.id
             const isExpanded = expandedUserId === u.id
@@ -453,21 +453,21 @@ export function DirectoryUsersTab() {
               <div key={u.id}>
                 {/* Desktop row */}
                 <div
-                  className="hidden sm:grid items-center gap-3 px-3 py-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                  className="hidden sm:grid items-center gap-3 px-3 py-3 cursor-pointer hover:bg-[var(--surface-hover)]/50"
                   style={gridStyle}
                   onClick={() => setExpandedUserId(isExpanded ? null : u.id)}
                 >
                   <div className="flex items-center gap-3 min-w-0">
-                    <button className="text-gray-400 shrink-0" type="button">
+                    <button className="text-[var(--foreground-muted)] shrink-0" type="button">
                       {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                     </button>
                     <Avatar name={u.display_name} avatarUrl={u.avatar_url} size="sm" />
                     <div className="min-w-0 flex-1">
-                      <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                      <p className="text-sm font-medium text-[var(--foreground)] truncate">
                         {u.display_name}
-                        {isSelf && <span className="ml-1 text-xs text-gray-400">({t('common.you')})</span>}
+                        {isSelf && <span className="ml-1 text-xs text-[var(--foreground-muted)]">({t('common.you')})</span>}
                       </p>
-                      <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{u.email}</p>
+                      <p className="text-xs text-[var(--foreground-secondary)] truncate">{u.email}</p>
                     </div>
                   </div>
                   <div className="flex items-center justify-center gap-1 min-w-0" onClick={(e) => e.stopPropagation()}>
@@ -477,14 +477,14 @@ export function DirectoryUsersTab() {
                           <input
                             type="number"
                             min={0}
-                            className="w-14 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-1 py-1 text-xs text-center shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                            className="w-14 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-1 py-1 text-xs text-center focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                             placeholder={t('admin.users.maxProjectsDefault')}
                             value={getUserLimitDisplay(u)}
                             onChange={(e) => handleUserLimitChange(u.id, e.target.value)}
                             onKeyDown={(e) => { if (e.key === 'Enter') handleUserLimitSave(u.id, u.max_projects) }}
                           />
                           <button
-                            className={`px-1 py-1 rounded-md border ${isUserLimitDirty(u) ? 'border-indigo-400 text-indigo-600 hover:bg-indigo-50 dark:border-indigo-500 dark:text-indigo-400 dark:hover:bg-indigo-900/30' : 'border-gray-300 text-gray-300 cursor-default dark:border-gray-600 dark:text-gray-600'}`}
+                            className={`px-1 py-1 rounded-md border ${isUserLimitDirty(u) ? 'border-[var(--primary-border)] text-[var(--primary)] hover:bg-[var(--primary-muted)] dark:border-[var(--primary)] dark:text-[var(--primary)] ' : 'border-[var(--border)] text-[var(--foreground-muted)] cursor-default dark:border-[var(--border)] text-[var(--foreground-muted)]'}`}
                             onClick={() => isUserLimitDirty(u) && handleUserLimitSave(u.id, u.max_projects)}
                             disabled={!isUserLimitDirty(u)}
                           >
@@ -505,14 +505,14 @@ export function DirectoryUsersTab() {
                             <input
                               type="number"
                               min={0}
-                              className="w-14 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-1 py-1 text-xs text-center shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                              className="w-14 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-1 py-1 text-xs text-center focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                               placeholder={t('admin.users.maxNamespacesDefault')}
                               value={getUserNsLimitDisplay(u)}
                               onChange={(e) => handleUserNsLimitChange(u.id, e.target.value)}
                               onKeyDown={(e) => { if (e.key === 'Enter') handleUserNsLimitSave(u.id, u.max_namespaces) }}
                             />
                             <button
-                              className={`px-1 py-1 rounded-md border ${isUserNsLimitDirty(u) ? 'border-indigo-400 text-indigo-600 hover:bg-indigo-50 dark:border-indigo-500 dark:text-indigo-400 dark:hover:bg-indigo-900/30' : 'border-gray-300 text-gray-300 cursor-default dark:border-gray-600 dark:text-gray-600'}`}
+                              className={`px-1 py-1 rounded-md border ${isUserNsLimitDirty(u) ? 'border-[var(--primary-border)] text-[var(--primary)] hover:bg-[var(--primary-muted)] dark:border-[var(--primary)] dark:text-[var(--primary)] ' : 'border-[var(--border)] text-[var(--foreground-muted)] cursor-default dark:border-[var(--border)] text-[var(--foreground-muted)]'}`}
                               onClick={() => isUserNsLimitDirty(u) && handleUserNsLimitSave(u.id, u.max_namespaces)}
                               disabled={!isUserNsLimitDirty(u)}
                             >
@@ -529,7 +529,7 @@ export function DirectoryUsersTab() {
                   <div className="flex items-center justify-center gap-1 min-w-0" onClick={(e) => e.stopPropagation()}>
                     {!isSelf ? (
                       <select
-                        className="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                        className="rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                         value={u.global_role}
                         onChange={(e) => handleRoleChange(u.id, e.target.value)}
                         disabled={updateUserMutation.isPending}
@@ -557,24 +557,24 @@ export function DirectoryUsersTab() {
                       )
                     ) : (
                       <Button variant="ghost" size="sm" onClick={() => handleEnable(u.id)}>
-                        <span className="text-red-600 dark:text-red-400">{t('admin.users.disabled')}</span>
+                        <span className="text-[var(--danger)]">{t('admin.users.disabled')}</span>
                       </Button>
                     )}
                     {saved[`status:${u.id}`] && (
                       <Check className="h-4 w-4 text-green-500 animate-[pulse_0.6s_ease-in-out_2]" />
                     )}
                   </div>
-                  <div className="text-right text-xs text-gray-400 truncate min-w-0">
+                  <div className="text-right text-xs text-[var(--foreground-muted)] truncate min-w-0">
                     {formatLastLogin(u.last_login_at)}
                   </div>
-                  <div className="text-right text-xs text-gray-400 truncate min-w-0">
+                  <div className="text-right text-xs text-[var(--foreground-muted)] truncate min-w-0">
                     {formatCreated(u.created_at)}
                   </div>
                   <div className="flex items-center justify-end" onClick={(e) => e.stopPropagation()}>
                     {!isSelf && (
                       <Tooltip content={t('admin.users.resetPasswordButton')}>
                         <button
-                          className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                          className="p-1 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
                           onClick={() => setResetTarget(u)}
                         >
                           <KeyRound className="h-4 w-4" />
@@ -586,19 +586,19 @@ export function DirectoryUsersTab() {
 
                 {/* Mobile row */}
                 <div
-                  className="sm:hidden p-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800/50"
+                  className="sm:hidden p-3 cursor-pointer hover:bg-[var(--surface-hover)]/50"
                   onClick={() => setExpandedUserId(isExpanded ? null : u.id)}
                 >
                   <div className="flex items-center gap-3 min-w-0">
-                    <button className="text-gray-400 shrink-0" type="button">
+                    <button className="text-[var(--foreground-muted)] shrink-0" type="button">
                       {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                     </button>
                     <Avatar name={u.display_name} avatarUrl={u.avatar_url} size="sm" />
                     <div className="min-w-0 flex-1 overflow-x-auto scrollbar-none">
                       <p className="text-sm whitespace-nowrap">
-                        <span className="font-medium text-gray-900 dark:text-gray-100">{u.display_name}</span>
-                        {isSelf && <span className="ml-1 text-xs text-gray-400">({t('common.you')})</span>}
-                        <span className="ml-2 text-xs text-gray-500 dark:text-gray-400">{u.email}</span>
+                        <span className="font-medium text-[var(--foreground)]">{u.display_name}</span>
+                        {isSelf && <span className="ml-1 text-xs text-[var(--foreground-muted)]">({t('common.you')})</span>}
+                        <span className="ml-2 text-xs text-[var(--foreground-secondary)]">{u.email}</span>
                       </p>
                     </div>
                   </div>
@@ -608,7 +608,7 @@ export function DirectoryUsersTab() {
                     )}
                     {!isSelf ? (
                       <select
-                        className="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                        className="rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                         value={u.global_role}
                         onChange={(e) => handleRoleChange(u.id, e.target.value)}
                         disabled={updateUserMutation.isPending}
@@ -631,12 +631,12 @@ export function DirectoryUsersTab() {
                       )
                     ) : (
                       <Button variant="ghost" size="sm" onClick={() => handleEnable(u.id)}>
-                        <span className="text-red-600 dark:text-red-400">{t('admin.users.disabled')}</span>
+                        <span className="text-[var(--danger)]">{t('admin.users.disabled')}</span>
                       </Button>
                     )}
                     {!isSelf && (
                       <button
-                        className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                        className="p-1 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
                         onClick={() => setResetTarget(u)}
                       >
                         <KeyRound className="h-4 w-4" />
@@ -676,7 +676,7 @@ export function DirectoryUsersTab() {
 
       {/* Disable user confirmation modal */}
       <Modal open={!!disableTarget} onClose={() => setDisableTarget(null)} title={t('admin.users.disableConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans
             i18nKey="admin.users.disableConfirmBody"
             values={{ name: disableTarget?.display_name }}
@@ -703,7 +703,7 @@ export function DirectoryUsersTab() {
         onClose={() => { setCreateModalOpen(false); setCreateEmail(''); setCreateDisplayName(''); setCreateError(null) }}
         title={t('admin.users.createUserTitle')}
       >
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           {t('admin.users.createUserDescription')}
         </p>
         <div className="space-y-3">
@@ -720,7 +720,7 @@ export function DirectoryUsersTab() {
             onChange={(e) => setCreateEmail(e.target.value)}
           />
           {createError && (
-            <p className="text-sm text-red-600 dark:text-red-400">{createError}</p>
+            <p className="text-sm text-[var(--danger)]">{createError}</p>
           )}
         </div>
         <div className="flex justify-end gap-2 mt-4">
@@ -742,13 +742,13 @@ export function DirectoryUsersTab() {
         onClose={() => { setRevealedPassword(null); setCopied(false) }}
         title={t('admin.users.temporaryPasswordTitle')}
       >
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-3">
           {t('admin.users.temporaryPasswordDescription', { name: revealedUserName })}
         </p>
-        <div className="flex items-center gap-2 bg-gray-100 dark:bg-gray-800 rounded-lg p-3 font-mono text-sm">
-          <span className="flex-1 select-all text-gray-900 dark:text-gray-100">{revealedPassword}</span>
+        <div className="flex items-center gap-2 bg-[var(--surface-secondary)] rounded-lg p-3 font-mono text-sm">
+          <span className="flex-1 select-all text-[var(--foreground)]">{revealedPassword}</span>
           <button
-            className="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+            className="p-1 text-[var(--foreground-muted)] hover:text-[var(--foreground)]"
             onClick={handleCopyPassword}
           >
             {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
@@ -766,7 +766,7 @@ export function DirectoryUsersTab() {
 
       {/* Reset password confirmation modal */}
       <Modal open={!!resetTarget} onClose={() => setResetTarget(null)} title={t('admin.users.resetPasswordTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans
             i18nKey="admin.users.resetPasswordBody"
             values={{ name: resetTarget?.display_name }}
@@ -870,22 +870,22 @@ function UserProjectsPanel({
   return (
     <div className="px-3 pb-3 pl-12 space-y-3">
       {mobileProjectLimit && (
-        <div className="sm:hidden border border-gray-200 dark:border-gray-700 rounded-lg p-3">
-          <label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+        <div className="sm:hidden border border-[var(--border)] rounded-lg p-3">
+          <label className="text-xs font-semibold text-[var(--foreground-secondary)] uppercase tracking-wider">
             {t('admin.general.projectLimit.label')}
           </label>
           <div className="flex items-center gap-2 mt-2">
             <input
               type="number"
               min={0}
-              className="w-14 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-1 py-1 text-xs text-center shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="w-14 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-1 py-1 text-xs text-center focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
               placeholder={t('admin.users.maxProjectsDefault')}
               value={mobileProjectLimit.value}
               onChange={(e) => mobileProjectLimit.onChange(e.target.value)}
               onKeyDown={(e) => { if (e.key === 'Enter') mobileProjectLimit.onSave() }}
             />
             <button
-              className={`px-1 py-1 rounded-md border ${mobileProjectLimit.dirty ? 'border-indigo-400 text-indigo-600 hover:bg-indigo-50 dark:border-indigo-500 dark:text-indigo-400 dark:hover:bg-indigo-900/30' : 'border-gray-300 text-gray-300 cursor-default dark:border-gray-600 dark:text-gray-600'}`}
+              className={`px-1 py-1 rounded-md border ${mobileProjectLimit.dirty ? 'border-[var(--primary-border)] text-[var(--primary)] hover:bg-[var(--primary-muted)] dark:border-[var(--primary)] dark:text-[var(--primary)] ' : 'border-[var(--border)] text-[var(--foreground-muted)] cursor-default dark:border-[var(--border)] text-[var(--foreground-muted)]'}`}
               onClick={() => mobileProjectLimit.dirty && mobileProjectLimit.onSave()}
               disabled={!mobileProjectLimit.dirty}
             >
@@ -898,22 +898,22 @@ function UserProjectsPanel({
         </div>
       )}
       {mobileNamespaceLimit && (
-        <div className="sm:hidden border border-gray-200 dark:border-gray-700 rounded-lg p-3">
-          <label className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+        <div className="sm:hidden border border-[var(--border)] rounded-lg p-3">
+          <label className="text-xs font-semibold text-[var(--foreground-secondary)] uppercase tracking-wider">
             {t('admin.general.namespaceLimit.label')}
           </label>
           <div className="flex items-center gap-2 mt-2">
             <input
               type="number"
               min={0}
-              className="w-14 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-1 py-1 text-xs text-center shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="w-14 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-1 py-1 text-xs text-center focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
               placeholder={t('admin.users.maxNamespacesDefault')}
               value={mobileNamespaceLimit.value}
               onChange={(e) => mobileNamespaceLimit.onChange(e.target.value)}
               onKeyDown={(e) => { if (e.key === 'Enter') mobileNamespaceLimit.onSave() }}
             />
             <button
-              className={`px-1 py-1 rounded-md border ${mobileNamespaceLimit.dirty ? 'border-indigo-400 text-indigo-600 hover:bg-indigo-50 dark:border-indigo-500 dark:text-indigo-400 dark:hover:bg-indigo-900/30' : 'border-gray-300 text-gray-300 cursor-default dark:border-gray-600 dark:text-gray-600'}`}
+              className={`px-1 py-1 rounded-md border ${mobileNamespaceLimit.dirty ? 'border-[var(--primary-border)] text-[var(--primary)] hover:bg-[var(--primary-muted)] dark:border-[var(--primary)] dark:text-[var(--primary)] ' : 'border-[var(--border)] text-[var(--foreground-muted)] cursor-default dark:border-[var(--border)] text-[var(--foreground-muted)]'}`}
               onClick={() => mobileNamespaceLimit.dirty && mobileNamespaceLimit.onSave()}
               disabled={!mobileNamespaceLimit.dirty}
             >
@@ -925,17 +925,17 @@ function UserProjectsPanel({
           </div>
         </div>
       )}
-      <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-3 space-y-3">
-        <h4 className="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+      <div className="border border-[var(--border)] rounded-lg p-3 space-y-3">
+        <h4 className="text-xs font-semibold text-[var(--foreground-secondary)] uppercase tracking-wider">
           {t('admin.users.projects')}
         </h4>
 
-        {error && <p className="text-xs text-red-600 dark:text-red-400">{error}</p>}
+        {error && <p className="text-xs text-[var(--danger)]">{error}</p>}
 
         {isLoading ? (
           <div className="flex justify-center py-2"><Spinner /></div>
         ) : !userProjects || userProjects.length === 0 ? (
-          <p className="text-xs text-gray-400">{t('admin.users.noProjects')}</p>
+          <p className="text-xs text-[var(--foreground-muted)]">{t('admin.users.noProjects')}</p>
         ) : (
           <div className="space-y-1">
             {userProjects.map((p) => {
@@ -944,7 +944,7 @@ function UserProjectsPanel({
                 <div key={p.project_id} className="flex items-center justify-between py-1.5">
                   <div className="flex items-center gap-2 min-w-0">
                     <ProjectKeyBadge>{p.project_key}</ProjectKeyBadge>
-                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{p.project_name}</span>
+                    <span className="text-sm font-medium text-[var(--foreground)] truncate">{p.project_name}</span>
                   </div>
                   <div className="flex items-center gap-2 flex-shrink-0">
                     {saved[`role:${p.project_id}`] && (
@@ -952,7 +952,7 @@ function UserProjectsPanel({
                     )}
                     <Tooltip content={isLastOwner ? t('projects.settings.lastOwnerTooltip') : undefined}>
                       <select
-                        className="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                        className="rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] disabled:opacity-50 disabled:cursor-not-allowed"
                         value={p.role}
                         onChange={(e) => {
                           setError(null)
@@ -975,7 +975,7 @@ function UserProjectsPanel({
                     </Tooltip>
                     <Tooltip content={isLastOwner ? t('projects.settings.lastOwnerTooltip') : undefined}>
                       <button
-                        className={`p-1 ${isLastOwner ? 'text-gray-300 dark:text-gray-600 cursor-not-allowed' : 'text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'}`}
+                        className={`p-1 ${isLastOwner ? 'text-[var(--foreground-secondary)] cursor-not-allowed' : 'text-[var(--danger)] hover:text-red-700 text-[var(--danger)] dark:hover:text-red-300'}`}
                         onClick={() => !isLastOwner && setRemoveTarget({ projectId: p.project_id, projectName: p.project_name })}
                         disabled={isLastOwner}
                       >
@@ -991,9 +991,9 @@ function UserProjectsPanel({
 
         {/* Add to project form */}
         {availableProjects.length > 0 && (
-          <div className="flex gap-2 items-center pt-2 border-t border-gray-100 dark:border-gray-700">
+          <div className="flex gap-2 items-center pt-2 border-t border-[var(--border)]">
             <select
-              className="min-w-0 flex-1 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="min-w-0 flex-1 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
               value={selectedProjectId}
               onChange={(e) => setSelectedProjectId(e.target.value)}
             >
@@ -1003,7 +1003,7 @@ function UserProjectsPanel({
               ))}
             </select>
             <select
-              className="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              className="rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
               value={selectedRole}
               onChange={(e) => setSelectedRole(e.target.value)}
             >
@@ -1023,7 +1023,7 @@ function UserProjectsPanel({
 
       {/* Remove from project confirmation modal */}
       <Modal open={!!removeTarget} onClose={() => setRemoveTarget(null)} title={t('admin.users.removeFromProjectTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans
             i18nKey="admin.users.removeFromProjectBody"
             values={{ name: userName, project: removeTarget?.projectName }}
diff --git a/web/src/pages/ForgotPasswordPage.tsx b/web/src/pages/ForgotPasswordPage.tsx
index cd48610b..076c3de6 100644
--- a/web/src/pages/ForgotPasswordPage.tsx
+++ b/web/src/pages/ForgotPasswordPage.tsx
@@ -31,65 +31,91 @@ export function ForgotPasswordPage() {
 
   if (success) {
     return (
-      <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 px-4">
-        <div className="flex-1 flex items-center justify-center">
-          <div className="max-w-sm w-full text-center">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
-              {t('forgotPassword.checkEmail')}
-            </h1>
-            <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
-              {t('forgotPassword.checkEmailDescription')}
-            </p>
-            <Link
-              to="/login"
-              className="text-sm text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-            >
-              {t('forgotPassword.backToLogin')}
-            </Link>
+      <div className="min-h-screen flex bg-[var(--background)]">
+        <div className="flex-1 flex flex-col">
+          <div className="flex-1 flex items-center justify-center px-6 py-12">
+            <div className="w-full max-w-[360px] text-center">
+              <div className="w-12 h-12 rounded-full bg-[var(--success-bg)] flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-[var(--success)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <h1 className="text-xl font-semibold text-[var(--foreground)] tracking-tight">
+                {t('forgotPassword.checkEmail')}
+              </h1>
+              <p className="mt-2 text-sm text-[var(--foreground-secondary)]">
+                {t('forgotPassword.checkEmailDescription')}
+              </p>
+              <Link
+                to="/login"
+                className="inline-block mt-6 text-sm text-[var(--primary)] hover:text-[var(--primary-hover)] transition-colors"
+              >
+                {t('forgotPassword.backToLogin')}
+              </Link>
+            </div>
+          </div>
+
+          <div className="px-6 pb-6">
+            <PoweredByFooter />
           </div>
         </div>
-        <PoweredByFooter />
       </div>
     )
   }
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 px-4">
-      <div className="flex-1 flex items-center justify-center">
-        <div className="max-w-sm w-full">
-          <h1 className="text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-2">
-            {t('forgotPassword.title')}
-          </h1>
-          <p className="text-center text-sm text-gray-600 dark:text-gray-400 mb-8">
-            {t('forgotPassword.description')}
-          </p>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <Input
-              label={t('forgotPassword.email')}
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              autoComplete="email"
-            />
-            {error && (
-              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
-            )}
-            <Button type="submit" disabled={loading} className="w-full">
-              {loading ? t('forgotPassword.submitting') : t('forgotPassword.submit')}
-            </Button>
-          </form>
-          <p className="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
-            <Link
-              to="/login"
-              className="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-            >
-              {t('forgotPassword.backToLogin')}
-            </Link>
-          </p>
+    <div className="min-h-screen flex bg-[var(--background)]">
+      <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex items-center justify-center px-6 py-12">
+          <div className="w-full max-w-[360px]">
+            <div className="flex items-center gap-2.5 mb-8">
+              <Link to="/login" className="text-[var(--foreground-muted)] hover:text-[var(--foreground)] transition-colors">
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                </svg>
+              </Link>
+            </div>
+
+            <h1 className="text-xl font-semibold text-[var(--foreground)] tracking-tight">
+              {t('forgotPassword.title')}
+            </h1>
+            <p className="mt-1.5 text-sm text-[var(--foreground-secondary)]">
+              {t('forgotPassword.description')}
+            </p>
+
+            <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+              <Input
+                label={t('forgotPassword.email')}
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoComplete="email"
+              />
+              {error && (
+                <p className="text-sm text-[var(--danger)]">{error}</p>
+              )}
+              <Button type="submit" disabled={loading} className="w-full">
+                {loading ? t('forgotPassword.submitting') : t('forgotPassword.submit')}
+              </Button>
+
+              <p className="text-center text-sm text-[var(--foreground-secondary)]">
+                {t('forgotPassword.rememberPassword')}{' '}
+                <Link
+                  to="/login"
+                  className="text-[var(--primary)] hover:text-[var(--primary-hover)] transition-colors"
+                >
+                  {t('forgotPassword.backToLogin')}
+                </Link>
+              </p>
+            </form>
+          </div>
+        </div>
+
+        <div className="px-6 pb-6">
+          <PoweredByFooter />
         </div>
       </div>
-      <PoweredByFooter />
     </div>
   )
 }
diff --git a/web/src/pages/GeneralPage.tsx b/web/src/pages/GeneralPage.tsx
index 363b73b7..9503a373 100644
--- a/web/src/pages/GeneralPage.tsx
+++ b/web/src/pages/GeneralPage.tsx
@@ -41,36 +41,36 @@ export function GeneralPage() {
 
   return (
     <div>
-      <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+      <h2 className="text-xl font-semibold text-[var(--foreground)]">
         {t('preferences.general.title')}
       </h2>
-      <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+      <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
         {t('preferences.general.description')}
       </p>
 
       {isAdmin && (
         <div className="mt-6">
-          <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+          <h3 className="text-sm font-semibold text-[var(--foreground)]">
             {t('preferences.general.adminSection')}
           </h3>
-          <div className="mt-3 rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3">
+          <div className="mt-3 rounded-lg border border-[var(--border)] px-4 py-3">
             <label className="flex items-start gap-3 cursor-pointer">
               <input
                 type="checkbox"
                 checked={currentValue}
                 onChange={handleToggle}
-                className="mt-0.5 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800"
+                className="mt-0.5 h-4 w-4 rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] dark:border-[var(--border)] bg-[var(--surface)]"
               />
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2">
-                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                  <span className="text-sm font-medium text-[var(--foreground)]">
                     {t('preferences.general.hideNonMember')}
                   </span>
                   {savedId === 'hide' && (
                     <Check className="h-4 w-4 text-green-500" />
                   )}
                 </div>
-                <p className="text-xs text-gray-500 dark:text-gray-400">
+                <p className="text-xs text-[var(--foreground-secondary)]">
                   {t('preferences.general.hideNonMemberDesc')}
                 </p>
               </div>
@@ -80,7 +80,7 @@ export function GeneralPage() {
       )}
 
       {!isAdmin && (
-        <p className="mt-6 text-sm text-gray-500 dark:text-gray-400">
+        <p className="mt-6 text-sm text-[var(--foreground-secondary)]">
           {t('preferences.general.noSettings')}
         </p>
       )}
diff --git a/web/src/pages/InboxPage.tsx b/web/src/pages/InboxPage.tsx
index 72940669..a97c2699 100644
--- a/web/src/pages/InboxPage.tsx
+++ b/web/src/pages/InboxPage.tsx
@@ -82,10 +82,10 @@ function InboxRow({ item, isCompleted, isFirst, isLast, isActive, onRemove, onMo
   return (
     <tr
       ref={rowRef}
-      className={`group border-b border-gray-200 dark:border-gray-700
+      className={`group border-b border-[var(--border)]
         ${reorderedId === item.id ? 'animate-[inbox-highlight_1s_ease-in-out]' : ''}
-        ${isRemoving && autoRemove ? 'transition-all duration-300 opacity-0 -translate-y-2' : ''}
-        ${isActive ? 'bg-indigo-50 dark:bg-indigo-900/20' : 'hover:bg-gray-50 dark:hover:bg-gray-800'} cursor-pointer`}
+        ${isRemoving && autoRemove ? 'transition-all duration-200 opacity-0 -translate-y-2' : ''}
+        ${isActive ? 'bg-[var(--primary-muted)]' : 'hover:bg-[var(--surface-hover)]'} cursor-pointer`}
       onClick={() => onClick(item)}
     >
       {/* Reorder arrows */}
@@ -94,7 +94,7 @@ function InboxRow({ item, isCompleted, isFirst, isLast, isActive, onRemove, onMo
           <button
             onClick={() => onMoveUp(item)}
             disabled={isFirst}
-            className={`p-0.5 rounded text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-700 ${isFirst ? 'invisible' : ''}`}
+            className={`p-0.5 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:bg-[var(--surface-hover)] ${isFirst ? 'invisible' : ''}`}
             aria-label={t('inbox.moveUp')}
           >
             <ChevronUp className="h-4 w-4" />
@@ -102,7 +102,7 @@ function InboxRow({ item, isCompleted, isFirst, isLast, isActive, onRemove, onMo
           <button
             onClick={() => onMoveDown(item)}
             disabled={isLast}
-            className={`p-0.5 rounded text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-700 ${isLast ? 'invisible' : ''}`}
+            className={`p-0.5 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:bg-[var(--surface-hover)] ${isLast ? 'invisible' : ''}`}
             aria-label={t('inbox.moveDown')}
           >
             <ChevronDown className="h-4 w-4" />
@@ -110,7 +110,7 @@ function InboxRow({ item, isCompleted, isFirst, isLast, isActive, onRemove, onMo
         </div>
       </td>
       {/* Display ID */}
-      <td style={columnWidths.display_id ? { width: columnWidths.display_id } : undefined} className={`px-3 py-3 text-sm font-mono whitespace-nowrap ${isCompleted && !isRemoving ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400'} ${columnWidths.display_id ? '' : 'w-24'}`}>
+      <td style={columnWidths.display_id ? { width: columnWidths.display_id } : undefined} className={`px-3 py-3 text-sm font-mono whitespace-nowrap ${isCompleted && !isRemoving ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground-secondary)]'} ${columnWidths.display_id ? '' : 'w-24'}`}>
         {item.display_id}
       </td>
       {/* Type */}
@@ -118,8 +118,8 @@ function InboxRow({ item, isCompleted, isFirst, isLast, isActive, onRemove, onMo
         <TypeBadge type={item.type} />
       </td>
       {/* Title */}
-      <td className={`px-3 py-3 text-sm truncate ${item.description && !isCompleted ? 'text-gray-400 dark:text-gray-500' : ''}`}>
-        <span className={isCompleted && !isRemoving ? 'line-through text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}>
+      <td className={`px-3 py-3 text-sm truncate ${item.description && !isCompleted ? 'text-[var(--foreground-muted)]' : ''}`}>
+        <span className={isCompleted && !isRemoving ? 'line-through text-[var(--foreground-muted)]' : 'text-[var(--foreground)]'}>
           {item.title}
         </span>
         {item.description && !isCompleted && (
@@ -139,7 +139,7 @@ function InboxRow({ item, isCompleted, isFirst, isLast, isActive, onRemove, onMo
         <SLAIndicator sla={item.sla} />
       </td>
       {/* Updated */}
-      <td style={columnWidths.updated ? { width: columnWidths.updated } : undefined} className={`px-3 py-3 whitespace-nowrap text-sm text-right ${isCompleted && !isRemoving ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'} ${columnWidths.updated ? '' : 'w-[130px]'}`}>
+      <td style={columnWidths.updated ? { width: columnWidths.updated } : undefined} className={`px-3 py-3 whitespace-nowrap text-sm text-right ${isCompleted && !isRemoving ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-secondary)]'} ${columnWidths.updated ? '' : 'w-[130px]'}`}>
         {new Date(item.updated_at).toLocaleDateString()}
       </td>
       {/* Remove button */}
@@ -149,7 +149,7 @@ function InboxRow({ item, isCompleted, isFirst, isLast, isActive, onRemove, onMo
         ) : (
           <button
             onClick={() => onRemove(item.id)}
-            className="lg:opacity-0 lg:group-hover:opacity-100 text-gray-400 hover:text-red-500 transition-opacity"
+            className="lg:opacity-0 lg:group-hover:opacity-100 text-[var(--foreground-muted)] hover:text-[var(--danger)] transition-opacity"
             aria-label={t('inbox.removeFromInbox')}
           >
             <X className="h-4 w-4" />
@@ -192,10 +192,10 @@ function InboxCard({ item, isCompleted, isFirst, isLast, isActive, editing, onRe
   return (
     <div
       ref={cardRef}
-      className={`flex items-stretch gap-0 rounded-lg border bg-white dark:bg-gray-800 shadow-sm transition-colors
-        ${isActive ? 'border-indigo-400 dark:border-indigo-500 ring-1 ring-indigo-300 dark:ring-indigo-600' : 'border-gray-200 dark:border-gray-700 hover:border-indigo-300 dark:hover:border-indigo-600'}
+      className={`flex items-stretch gap-0 rounded-lg border bg-[var(--surface)] shadow-sm transition-colors
+        ${isActive ? 'border-[var(--primary-border)] dark:border-[var(--primary)] ring-1 ring-indigo-300 dark:ring-indigo-600' : 'border-[var(--border)] hover:border-[var(--primary-border)] dark:hover:border-[var(--primary-border)]'}
         ${reorderedId === item.id ? 'animate-[inbox-highlight_1s_ease-in-out]' : ''}
-        ${isRemoving && autoRemove ? 'transition-all duration-300 opacity-0 -translate-y-2' : ''}`}
+        ${isRemoving && autoRemove ? 'transition-all duration-200 opacity-0 -translate-y-2' : ''}`}
     >
       {/* Card content */}
       <button
@@ -204,13 +204,13 @@ function InboxCard({ item, isCompleted, isFirst, isLast, isActive, editing, onRe
       >
         {/* Line 1: Display ID + badges */}
         <div className="flex items-center gap-2 overflow-x-auto scrollbar-none">
-          <span className={`shrink-0 font-mono text-sm font-semibold ${dimmed ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}`}>{item.display_id}</span>
+          <span className={`shrink-0 font-mono text-sm font-semibold ${dimmed ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground)]'}`}>{item.display_id}</span>
           <span className={`shrink-0 inline-flex ${dimmed ? 'opacity-40' : ''}`}><TypeBadge type={item.type} /></span>
           <span className="shrink-0 inline-flex"><InboxStatusBadge status={item.status} category={item.status_category} /></span>
           <span className={`shrink-0 inline-flex ${dimmed ? 'opacity-40' : ''}`}><PriorityBadge priority={item.priority} /></span>
         </div>
         {/* Line 2: Assignee, Updated, SLA */}
-        <div className={`flex items-center gap-3 mt-1.5 text-xs overflow-x-auto scrollbar-none ${dimmed ? 'text-gray-300 dark:text-gray-600' : 'text-gray-400 dark:text-gray-500'}`}>
+        <div className={`flex items-center gap-3 mt-1.5 text-xs overflow-x-auto scrollbar-none ${dimmed ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-muted)]'}`}>
           <span className="shrink-0 inline-flex items-center gap-1">
             <User className="h-3 w-3" />
             <span className="truncate max-w-[8rem]">{assigneeName}</span>
@@ -222,23 +222,23 @@ function InboxCard({ item, isCompleted, isFirst, isLast, isActive, editing, onRe
           {!dimmed && item.sla && <span className="shrink-0 inline-flex"><SLAIndicator sla={item.sla} /></span>}
         </div>
         {/* Line 3: Title */}
-        <p className={`mt-1.5 text-sm font-medium truncate ${dimmed ? 'line-through text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}>
+        <p className={`mt-1.5 text-sm font-medium truncate ${dimmed ? 'line-through text-[var(--foreground-muted)]' : 'text-[var(--foreground)]'}`}>
           {item.title}
         </p>
         {/* Line 4: Description (first line) */}
         {item.description && (
-          <p className={`mt-0.5 text-xs truncate ${dimmed ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'}`}>
+          <p className={`mt-0.5 text-xs truncate ${dimmed ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-secondary)]'}`}>
             {item.description}
           </p>
         )}
       </button>
       {/* Edit controls — right column, fits within card's natural height */}
       {editing && (
-        <div className="flex flex-col items-center justify-between flex-shrink-0 rounded-r-lg bg-indigo-50 dark:bg-indigo-900/20 border-l border-indigo-200 dark:border-indigo-700/50 px-2 py-1">
+        <div className="flex flex-col items-center justify-between flex-shrink-0 rounded-r-lg bg-[var(--primary-muted)] border-l border-[var(--primary-border)] dark:border-[var(--primary-border)]/50 px-2 py-1">
           {/* Remove at top */}
           <button
             onClick={() => onRemove(item.id)}
-            className="p-1 rounded text-red-400 hover:text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-900/30"
+            className="p-1 rounded text-red-400 hover:text-[var(--danger)] hover:bg-red-100 text-[var(--danger)] dark:hover:text-red-300 dark:hover:bg-red-900/30"
             aria-label={t('inbox.removeFromInbox')}
           >
             <X className="h-3.5 w-3.5" />
@@ -248,7 +248,7 @@ function InboxCard({ item, isCompleted, isFirst, isLast, isActive, editing, onRe
             <button
               onClick={() => onMoveUp(item)}
               disabled={isFirst}
-              className={`p-0.5 rounded text-indigo-400 hover:text-indigo-600 hover:bg-indigo-100 dark:text-indigo-400 dark:hover:text-indigo-300 dark:hover:bg-indigo-800/40 ${isFirst ? 'invisible' : ''}`}
+              className={`p-0.5 rounded text-[var(--primary)] hover:text-[var(--primary)] hover:bg-[var(--primary-muted)] dark:text-[var(--primary)] dark:hover:text-[var(--primary)] hover:bg-[var(--primary-muted)] ${isFirst ? 'invisible' : ''}`}
               aria-label={t('inbox.moveUp')}
             >
               <ChevronUp className="h-4 w-4" />
@@ -256,7 +256,7 @@ function InboxCard({ item, isCompleted, isFirst, isLast, isActive, editing, onRe
             <button
               onClick={() => onMoveDown(item)}
               disabled={isLast}
-              className={`p-0.5 rounded text-indigo-400 hover:text-indigo-600 hover:bg-indigo-100 dark:text-indigo-400 dark:hover:text-indigo-300 dark:hover:bg-indigo-800/40 ${isLast ? 'invisible' : ''}`}
+              className={`p-0.5 rounded text-[var(--primary)] hover:text-[var(--primary)] hover:bg-[var(--primary-muted)] dark:text-[var(--primary)] dark:hover:text-[var(--primary)] hover:bg-[var(--primary-muted)] ${isLast ? 'invisible' : ''}`}
               aria-label={t('inbox.moveDown')}
             >
               <ChevronDown className="h-4 w-4" />
@@ -298,38 +298,7 @@ function InboxListPage() {
   // Column resize drag logic (mirrors DataTable)
   const resizingRef = useRef<{ key: string; startX: number; startWidth: number } | null>(null)
   const onResizeRef = useRef(onColumnResize)
-  onResizeRef.current = onColumnResize
-
-  const handleResizeMove = useRef((e: MouseEvent) => {
-    if (!resizingRef.current) return
-    const { key, startX, startWidth } = resizingRef.current
-    const diff = e.clientX - startX
-    const newWidth = Math.max(40, startWidth + diff)
-    onResizeRef.current?.(key, newWidth)
-  }).current
-
-  const handleResizeEnd = useRef(() => {
-    resizingRef.current = null
-    document.removeEventListener('mousemove', handleResizeMove)
-    document.removeEventListener('mouseup', handleResizeEnd)
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-    document.addEventListener('click', suppressClick, true)
-  }).current
-
-  const suppressClick = useRef((e: MouseEvent) => {
-    e.stopPropagation()
-    e.preventDefault()
-    document.removeEventListener('click', suppressClick, true)
-  }).current
-
-  useEffect(() => {
-    return () => {
-      document.removeEventListener('mousemove', handleResizeMove)
-      document.removeEventListener('mouseup', handleResizeEnd)
-      document.removeEventListener('click', suppressClick, true)
-    }
-  }, [handleResizeMove, handleResizeEnd, suppressClick])
+  useEffect(() => { onResizeRef.current = onColumnResize }, [onColumnResize])
 
   const handleResizeStart = useCallback((e: React.MouseEvent, colKey: string) => {
     e.preventDefault()
@@ -338,11 +307,31 @@ function InboxListPage() {
     if (!th) return
     const startWidth = th.getBoundingClientRect().width
     resizingRef.current = { key: colKey, startX: e.clientX, startWidth }
-    document.addEventListener('mousemove', handleResizeMove)
-    document.addEventListener('mouseup', handleResizeEnd)
+    const handleMove = (e: MouseEvent) => {
+      if (!resizingRef.current) return
+      const { key, startX, startWidth } = resizingRef.current
+      const diff = e.clientX - startX
+      const newWidth = Math.max(40, startWidth + diff)
+      onResizeRef.current?.(key, newWidth)
+    }
+    const handleEnd = () => {
+      resizingRef.current = null
+      document.removeEventListener('mousemove', handleMove)
+      document.removeEventListener('mouseup', handleEnd)
+      document.body.style.cursor = ''
+      document.body.style.userSelect = ''
+      const suppress = (e: MouseEvent) => {
+        e.stopPropagation()
+        e.preventDefault()
+        document.removeEventListener('click', suppress, true)
+      }
+      document.addEventListener('click', suppress, true)
+    }
+    document.addEventListener('mousemove', handleMove)
+    document.addEventListener('mouseup', handleEnd)
     document.body.style.cursor = 'col-resize'
     document.body.style.userSelect = 'none'
-  }, [handleResizeMove, handleResizeEnd])
+  }, [onColumnResize])
 
   const { data: autoRemovePref } = usePreference<boolean>('inbox_auto_remove')
   const autoRemove = autoRemovePref ?? true
@@ -388,7 +377,7 @@ function InboxListPage() {
         <ProjectKeyBadge size="icon">{p.key}</ProjectKeyBadge>
         <span className="truncate">{p.name}</span>
         {showNamespaces && p.namespace_slug && (
-          <span className="ml-auto flex items-center gap-1 text-[0.7rem] text-gray-400 dark:text-gray-500 shrink-0">
+          <span className="ml-auto flex items-center gap-1 text-[0.7rem] text-[var(--foreground-muted)] shrink-0">
             <span>{p.namespace_slug}</span>
             <NamespaceIcon icon={p.namespace_icon ?? 'building2'} color={p.namespace_color ?? 'slate'} className="h-3 w-3" />
           </span>
@@ -604,9 +593,9 @@ function InboxListPage() {
       {/* Header: title + search + actions */}
       <div className="flex items-center justify-between gap-4 mb-4">
         <div className="flex items-center gap-3 min-w-0 shrink lg:shrink-0">
-          <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('inbox.title')}</h1>
+          <h1 className="text-lg font-semibold text-[var(--foreground)]">{t('inbox.title')}</h1>
           {data && (
-            <span className="text-sm text-gray-500 dark:text-gray-400">
+            <span className="text-sm text-[var(--foreground-secondary)]">
               ({data.total})
             </span>
           )}
@@ -628,7 +617,7 @@ function InboxListPage() {
               {searchInput && (
                 <button
                   onClick={() => { setSearchInput(''); searchRef.current?.focus() }}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
                   aria-label={t('common.clear')}
                 >
                   <X className="h-4 w-4" />
@@ -648,14 +637,14 @@ function InboxListPage() {
       <Modal open={settingsOpen} onClose={() => setSettingsOpen(false)} title={t('inbox.settings')}>
         <div className="py-2">
           <label className="flex items-center justify-between cursor-pointer select-none">
-            <span className="text-sm text-gray-700 dark:text-gray-300">{t('inbox.autoRemove')}</span>
+            <span className="text-sm text-[var(--foreground)]">{t('inbox.autoRemove')}</span>
             <button
               type="button"
               role="switch"
               aria-checked={autoRemove}
               onClick={() => setPreferenceMutation.mutate({ key: 'inbox_auto_remove', value: !autoRemove })}
               className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors ${
-                autoRemove ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-gray-600'
+                autoRemove ? 'bg-[var(--primary)]' : 'bg-[var(--surface-tertiary)] dark:bg-[var(--foreground-secondary)]'
               }`}
             >
               <span className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow ring-0 transition-transform ${
@@ -663,7 +652,7 @@ function InboxListPage() {
               }`} />
             </button>
           </label>
-          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('inbox.autoRemoveDescription')}</p>
+          <p className="text-xs text-[var(--foreground-secondary)] mt-1">{t('inbox.autoRemoveDescription')}</p>
         </div>
       </Modal>
 
@@ -685,14 +674,14 @@ function InboxListPage() {
         {/* Auto-hide toggle */}
         <Tooltip content={t('inbox.autoRemoveDescription')}>
           <label className="flex items-center gap-2 cursor-pointer select-none">
-            <span className="text-sm text-gray-600 dark:text-gray-400">{t('inbox.autoRemove')}</span>
+            <span className="text-sm text-[var(--foreground-secondary)]">{t('inbox.autoRemove')}</span>
             <button
               type="button"
               role="switch"
               aria-checked={autoRemove}
               onClick={() => setPreferenceMutation.mutate({ key: 'inbox_auto_remove', value: !autoRemove })}
               className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors ${
-                autoRemove ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-gray-600'
+                autoRemove ? 'bg-[var(--primary)]' : 'bg-[var(--surface-tertiary)] dark:bg-[var(--foreground-secondary)]'
               }`}
             >
               <span className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow ring-0 transition-transform ${
@@ -706,10 +695,10 @@ function InboxListPage() {
           <button
             onClick={() => clearCompletedMutation.mutate()}
             disabled={clearCompletedMutation.isPending || completedItems.length === 0}
-            className={`relative p-2 rounded-lg border border-gray-300 dark:border-gray-600 transition-colors ${
+            className={`relative p-2 rounded-lg border border-[var(--border)] transition-colors ${
               completedItems.length === 0
-                ? 'opacity-40 cursor-not-allowed text-gray-400 dark:text-gray-500'
-                : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300'
+                ? 'opacity-40 cursor-not-allowed text-[var(--foreground-muted)]'
+                : 'text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:text-[var(--foreground)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)] dark:hover:text-[var(--foreground-muted)]'
             }`}
             aria-label={t('inbox.clearCompleted')}
           >
@@ -736,7 +725,7 @@ function InboxListPage() {
       {/* Mobile: Search + project filter + icons */}
       <div className="flex lg:hidden items-center gap-2 mb-4">
         <div className="relative flex-1 min-w-0">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--foreground-muted)]" />
           <Input
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}
@@ -749,7 +738,7 @@ function InboxListPage() {
           {searchInput && (
             <button
               onClick={() => setSearchInput('')}
-              className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+              className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
               aria-label={t('common.clear')}
             >
               <X className="h-4 w-4" />
@@ -761,14 +750,14 @@ function InboxListPage() {
           onClick={() => setProjectFilterOpen(true)}
           className={`relative shrink-0 p-2 rounded-lg border transition-colors ${
             selectedProjects.length > 0
-              ? 'border-indigo-400 bg-indigo-50 text-indigo-600 dark:border-indigo-500 dark:bg-indigo-900/30 dark:text-indigo-400'
-              : 'border-gray-300 dark:border-gray-600 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300'
+              ? 'border-[var(--primary-border)] bg-[var(--primary-muted)] text-[var(--primary)] dark:border-[var(--primary)]  dark:text-[var(--primary)]'
+              : 'border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:text-[var(--foreground)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)] dark:hover:text-[var(--foreground-muted)]'
           }`}
           aria-label={t('inbox.filterByProject')}
         >
           <FolderKanban className="h-5 w-5" />
           {selectedProjects.length > 0 && (
-            <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-indigo-600 text-[10px] font-bold text-white">
+            <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--primary)] text-[10px] font-bold text-white">
               {selectedProjects.length}
             </span>
           )}
@@ -777,10 +766,10 @@ function InboxListPage() {
         <button
           onClick={() => clearCompletedMutation.mutate()}
           disabled={clearCompletedMutation.isPending || completedItems.length === 0}
-          className={`relative shrink-0 p-2 rounded-lg border border-gray-300 dark:border-gray-600 transition-colors ${
+          className={`relative shrink-0 p-2 rounded-lg border border-[var(--border)] transition-colors ${
             completedItems.length === 0
-              ? 'opacity-40 cursor-not-allowed text-gray-400 dark:text-gray-500'
-              : 'text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300'
+              ? 'opacity-40 cursor-not-allowed text-[var(--foreground-muted)]'
+              : 'text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:text-[var(--foreground)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)] dark:hover:text-[var(--foreground-muted)]'
           }`}
           aria-label={t('inbox.clearCompleted')}
         >
@@ -796,8 +785,8 @@ function InboxListPage() {
           onClick={() => setEditing((v) => !v)}
           className={`p-2 rounded-lg border transition-colors ${
             editing
-              ? 'border-indigo-400 bg-indigo-50 text-indigo-600 dark:border-indigo-500 dark:bg-indigo-900/30 dark:text-indigo-400'
-              : 'border-gray-300 dark:border-gray-600 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300'
+              ? 'border-[var(--primary-border)] bg-[var(--primary-muted)] text-[var(--primary)] dark:border-[var(--primary)]  dark:text-[var(--primary)]'
+              : 'border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:text-[var(--foreground)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)] dark:hover:text-[var(--foreground-muted)]'
           }`}
           aria-label={t('common.edit')}
         >
@@ -806,7 +795,7 @@ function InboxListPage() {
         {/* Mobile: settings button */}
         <button
           onClick={() => setSettingsOpen(true)}
-          className="p-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300 transition-colors"
+          className="p-2 rounded-lg border border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:text-[var(--foreground)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)] dark:hover:text-[var(--foreground-muted)] transition-colors"
           aria-label={t('inbox.settings')}
         >
           <Settings className="h-5 w-5" />
@@ -835,7 +824,7 @@ function InboxListPage() {
       </Modal>
 
       {allItems.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-16 text-gray-500 dark:text-gray-400">
+        <div className="flex flex-col items-center justify-center py-16 text-[var(--foreground-secondary)]">
           <Inbox className="h-16 w-16 mb-4 opacity-30" />
           <p className="text-lg font-medium">{t('inbox.empty')}</p>
           <p className="text-sm mt-1">{t('inbox.emptyHint')}</p>
@@ -843,35 +832,35 @@ function InboxListPage() {
       ) : (
         <>
           {/* Desktop table */}
-          <div className="hidden lg:block overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
+          <div className="hidden lg:block overflow-hidden rounded-lg border border-[var(--border)]">
             <table className="w-full table-fixed">
-              <thead className="bg-gray-50 dark:bg-gray-800 group/thead">
+              <thead className="bg-[var(--surface-secondary)] group/thead">
                 <tr>
                   <th className="w-10 px-1 py-3"></th>
-                  <th style={columnWidths.display_id ? { width: columnWidths.display_id } : undefined} className={`relative px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase ${columnWidths.display_id ? '' : 'w-24'}`}>
+                  <th style={columnWidths.display_id ? { width: columnWidths.display_id } : undefined} className={`relative px-3 py-3 text-left text-xs font-medium text-[var(--foreground-secondary)] uppercase ${columnWidths.display_id ? '' : 'w-24'}`}>
                     {t('workitems.table.id')}
-                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-indigo-300/40 hover:!bg-indigo-400/60 active:!bg-indigo-500/60 dark:bg-indigo-500/30 dark:hover:!bg-indigo-400/50 dark:active:!bg-indigo-500/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'display_id')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('display_id') }} />
+                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-[var(--primary)]/40 hover:!bg-[var(--primary-hover)]/60 active:!bg-[var(--primary-muted)]/60 dark:bg-[var(--primary-muted)]/30 hover:!bg-[var(--primary-hover)]/50 dark:active:!bg-[var(--primary-muted)]/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'display_id')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('display_id') }} />
                   </th>
-                  <th style={columnWidths.type ? { width: columnWidths.type } : undefined} className={`relative px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase ${columnWidths.type ? '' : 'w-20'}`}>
+                  <th style={columnWidths.type ? { width: columnWidths.type } : undefined} className={`relative px-3 py-3 text-left text-xs font-medium text-[var(--foreground-secondary)] uppercase ${columnWidths.type ? '' : 'w-20'}`}>
                     {t('workitems.table.type')}
-                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-indigo-300/40 hover:!bg-indigo-400/60 active:!bg-indigo-500/60 dark:bg-indigo-500/30 dark:hover:!bg-indigo-400/50 dark:active:!bg-indigo-500/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'type')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('type') }} />
+                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-[var(--primary)]/40 hover:!bg-[var(--primary-hover)]/60 active:!bg-[var(--primary-muted)]/60 dark:bg-[var(--primary-muted)]/30 hover:!bg-[var(--primary-hover)]/50 dark:active:!bg-[var(--primary-muted)]/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'type')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('type') }} />
                   </th>
-                  <th className="px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">{t('workitems.table.title')}</th>
-                  <th style={columnWidths.status ? { width: columnWidths.status } : undefined} className={`relative px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase ${columnWidths.status ? '' : 'w-28'}`}>
+                  <th className="px-3 py-3 text-left text-xs font-medium text-[var(--foreground-secondary)] uppercase">{t('workitems.table.title')}</th>
+                  <th style={columnWidths.status ? { width: columnWidths.status } : undefined} className={`relative px-3 py-3 text-left text-xs font-medium text-[var(--foreground-secondary)] uppercase ${columnWidths.status ? '' : 'w-28'}`}>
                     {t('workitems.table.status')}
-                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-indigo-300/40 hover:!bg-indigo-400/60 active:!bg-indigo-500/60 dark:bg-indigo-500/30 dark:hover:!bg-indigo-400/50 dark:active:!bg-indigo-500/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'status')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('status') }} />
+                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-[var(--primary)]/40 hover:!bg-[var(--primary-hover)]/60 active:!bg-[var(--primary-muted)]/60 dark:bg-[var(--primary-muted)]/30 hover:!bg-[var(--primary-hover)]/50 dark:active:!bg-[var(--primary-muted)]/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'status')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('status') }} />
                   </th>
-                  <th style={columnWidths.priority ? { width: columnWidths.priority } : undefined} className={`relative px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase ${columnWidths.priority ? '' : 'w-24'}`}>
+                  <th style={columnWidths.priority ? { width: columnWidths.priority } : undefined} className={`relative px-3 py-3 text-left text-xs font-medium text-[var(--foreground-secondary)] uppercase ${columnWidths.priority ? '' : 'w-24'}`}>
                     {t('workitems.table.priority')}
-                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-indigo-300/40 hover:!bg-indigo-400/60 active:!bg-indigo-500/60 dark:bg-indigo-500/30 dark:hover:!bg-indigo-400/50 dark:active:!bg-indigo-500/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'priority')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('priority') }} />
+                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-[var(--primary)]/40 hover:!bg-[var(--primary-hover)]/60 active:!bg-[var(--primary-muted)]/60 dark:bg-[var(--primary-muted)]/30 hover:!bg-[var(--primary-hover)]/50 dark:active:!bg-[var(--primary-muted)]/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'priority')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('priority') }} />
                   </th>
-                  <th style={columnWidths.sla ? { width: columnWidths.sla } : undefined} className={`relative px-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase ${columnWidths.sla ? '' : 'w-[110px]'}`}>
+                  <th style={columnWidths.sla ? { width: columnWidths.sla } : undefined} className={`relative px-3 py-3 text-left text-xs font-medium text-[var(--foreground-secondary)] uppercase ${columnWidths.sla ? '' : 'w-[110px]'}`}>
                     {t('sla.columnHeader')}
-                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-indigo-300/40 hover:!bg-indigo-400/60 active:!bg-indigo-500/60 dark:bg-indigo-500/30 dark:hover:!bg-indigo-400/50 dark:active:!bg-indigo-500/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'sla')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('sla') }} />
+                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-[var(--primary)]/40 hover:!bg-[var(--primary-hover)]/60 active:!bg-[var(--primary-muted)]/60 dark:bg-[var(--primary-muted)]/30 hover:!bg-[var(--primary-hover)]/50 dark:active:!bg-[var(--primary-muted)]/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'sla')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('sla') }} />
                   </th>
-                  <th style={columnWidths.updated ? { width: columnWidths.updated } : undefined} className={`relative px-3 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase ${columnWidths.updated ? '' : 'w-[130px]'}`}>
+                  <th style={columnWidths.updated ? { width: columnWidths.updated } : undefined} className={`relative px-3 py-3 text-right text-xs font-medium text-[var(--foreground-secondary)] uppercase ${columnWidths.updated ? '' : 'w-[130px]'}`}>
                     {t('workitems.table.updated')}
-                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-indigo-300/40 hover:!bg-indigo-400/60 active:!bg-indigo-500/60 dark:bg-indigo-500/30 dark:hover:!bg-indigo-400/50 dark:active:!bg-indigo-500/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'updated')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('updated') }} />
+                    <div className="absolute right-0.5 top-0 bottom-0 w-1.5 cursor-col-resize opacity-0 group-hover/thead:opacity-100 bg-[var(--primary)]/40 hover:!bg-[var(--primary-hover)]/60 active:!bg-[var(--primary-muted)]/60 dark:bg-[var(--primary-muted)]/30 hover:!bg-[var(--primary-hover)]/50 dark:active:!bg-[var(--primary-muted)]/50 transition-opacity z-10" onMouseDown={(e) => handleResizeStart(e, 'updated')} onDoubleClick={(e) => { e.stopPropagation(); resetColumnWidth('updated') }} />
                   </th>
                   <th className="w-10 px-2 py-3"></th>
                 </tr>
@@ -957,7 +946,7 @@ function InboxListPage() {
             setRemoveConfirmItem(null)
           }
         }}>
-          <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+          <p className="text-sm text-[var(--foreground-secondary)] mb-4">
             <Trans i18nKey="inbox.removeConfirmBody" values={{ displayId: removeConfirmItem?.display_id ?? '' }} components={{ bold: <strong /> }} />
           </p>
           <label className="flex items-center gap-2 mb-4 cursor-pointer select-none">
@@ -966,7 +955,7 @@ function InboxListPage() {
               checked={dontShowAgainChecked}
               onChange={(e) => setDontShowAgainChecked(e.target.checked)}
             />
-            <span className="text-sm text-gray-500 dark:text-gray-400">{t('inbox.dontShowAgain')}</span>
+            <span className="text-sm text-[var(--foreground-secondary)]">{t('inbox.dontShowAgain')}</span>
           </label>
           <div className="flex justify-end gap-3">
             <Button type="button" variant="secondary" onClick={() => setRemoveConfirmItem(null)}>{t('common.cancel')}</Button>
@@ -989,7 +978,7 @@ function InboxListPage() {
 function FeedPage() {
   const { t } = useTranslation()
   return (
-    <div className="flex flex-col items-center justify-center h-64 text-gray-500 dark:text-gray-400">
+    <div className="flex flex-col items-center justify-center h-64 text-[var(--foreground-secondary)]">
       <Rss className="h-12 w-12 mb-4 opacity-30" />
       <p className="text-lg font-medium">{t('user.feedComingSoon')}</p>
     </div>
@@ -1030,34 +1019,34 @@ function MobileProjectFilterContent({ projectOptions, selectedProjects, setSelec
           className="text-sm"
         />
       </div>
-      <div className="flex items-center gap-2 px-1 pb-2 border-b border-gray-100 dark:border-gray-700">
-        <button type="button" className="text-xs text-indigo-600 hover:text-indigo-800" onClick={() => setSelectedProjects(filtered.map((o) => o.value))}>
+      <div className="flex items-center gap-2 px-1 pb-2 border-b border-[var(--border)]">
+        <button type="button" className="text-xs text-[var(--primary)] hover:text-[var(--primary-hover)]" onClick={() => setSelectedProjects(filtered.map((o) => o.value))}>
           {t('common.all')}
         </button>
-        <button type="button" className="ml-auto text-xs text-gray-400 hover:text-gray-600" onClick={() => setSelectedProjects([])}>
+        <button type="button" className="ml-auto text-xs text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)]" onClick={() => setSelectedProjects([])}>
           {t('common.none')}
         </button>
       </div>
       <div className="max-h-60 overflow-y-auto space-y-1 pt-1">
         {filtered.length === 0 ? (
-          <p className="text-sm text-gray-400 dark:text-gray-500 py-2">{t('common.noResults')}</p>
+          <p className="text-sm text-[var(--foreground-muted)] py-2">{t('common.noResults')}</p>
         ) : (
           filtered.map((opt) => {
             const p = projectMap.get(opt.value)
             return (
-              <label key={opt.value} className="flex items-center gap-2 px-1 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-sm text-gray-700 dark:text-gray-300 rounded">
+              <label key={opt.value} className="flex items-center gap-2 px-1 py-2 hover:bg-[var(--surface-hover)] cursor-pointer text-sm text-[var(--foreground)] rounded">
                 <input
                   type="checkbox"
                   checked={selectedProjects.includes(opt.value)}
                   onChange={() => setSelectedProjects((prev: string[]) =>
                     prev.includes(opt.value) ? prev.filter((v) => v !== opt.value) : [...prev, opt.value]
                   )}
-                  className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 shrink-0"
+                  className="rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] shrink-0"
                 />
                 <ProjectKeyBadge size="icon">{opt.value}</ProjectKeyBadge>
                 <span className="truncate">{p?.name ?? opt.label}</span>
                 {showNamespaces && p?.namespace_slug && (
-                  <span className="ml-auto flex items-center gap-1 text-[0.7rem] text-gray-400 dark:text-gray-500 shrink-0">
+                  <span className="ml-auto flex items-center gap-1 text-[0.7rem] text-[var(--foreground-muted)] shrink-0">
                     <span>{p.namespace_slug}</span>
                     <NamespaceIcon icon={p.namespace_icon ?? 'building2'} color={p.namespace_color ?? 'slate'} className="h-3 w-3" />
                   </span>
diff --git a/web/src/pages/InviteAcceptPage.tsx b/web/src/pages/InviteAcceptPage.tsx
index 0a01addb..8d85e074 100644
--- a/web/src/pages/InviteAcceptPage.tsx
+++ b/web/src/pages/InviteAcceptPage.tsx
@@ -75,7 +75,7 @@ export function InviteAcceptPage() {
 
   if (isLoading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+      <div className="min-h-screen flex items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)]">
         <Spinner size="lg" />
       </div>
     )
@@ -83,10 +83,10 @@ export function InviteAcceptPage() {
 
   if (fetchError || !inviteInfo) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+      <div className="min-h-screen flex items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
         <div className="max-w-sm w-full text-center">
-          <p className="text-gray-600 dark:text-gray-400 mb-4">{t('invite.notFound')}</p>
-          <a href="/login" className="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">
+          <p className="text-[var(--foreground-secondary)] mb-4">{t('invite.notFound')}</p>
+          <a href="/login" className="text-[var(--primary)] hover:underline text-sm">
             {t('login.oauth.backToLogin')}
           </a>
         </div>
@@ -97,10 +97,10 @@ export function InviteAcceptPage() {
   // Show spinner during auto-accept
   if (autoAccepting) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+      <div className="min-h-screen flex items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)]">
         <div className="text-center">
           <Spinner size="lg" />
-          <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
+          <p className="mt-4 text-sm text-[var(--foreground-secondary)]">
             {t('invite.joining')}
           </p>
         </div>
@@ -110,10 +110,10 @@ export function InviteAcceptPage() {
 
   if (inviteInfo.expired) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+      <div className="min-h-screen flex items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
         <div className="max-w-sm w-full text-center">
-          <p className="text-gray-600 dark:text-gray-400 mb-4">{t('invite.expired')}</p>
-          <a href="/login" className="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">
+          <p className="text-[var(--foreground-secondary)] mb-4">{t('invite.expired')}</p>
+          <a href="/login" className="text-[var(--primary)] hover:underline text-sm">
             {t('login.oauth.backToLogin')}
           </a>
         </div>
@@ -123,10 +123,10 @@ export function InviteAcceptPage() {
 
   if (inviteInfo.full) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+      <div className="min-h-screen flex items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
         <div className="max-w-sm w-full text-center">
-          <p className="text-gray-600 dark:text-gray-400 mb-4">{t('invite.full')}</p>
-          <a href="/login" className="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">
+          <p className="text-[var(--foreground-secondary)] mb-4">{t('invite.full')}</p>
+          <a href="/login" className="text-[var(--primary)] hover:underline text-sm">
             {t('login.oauth.backToLogin')}
           </a>
         </div>
@@ -166,17 +166,17 @@ export function InviteAcceptPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+    <div className="min-h-screen flex items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
       <div className="max-w-sm w-full text-center space-y-6">
-        <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
+        <h1 className="text-2xl font-bold text-[var(--foreground)]">
           {t('invite.title')}
         </h1>
 
-        <p className="text-gray-600 dark:text-gray-400">
+        <p className="text-[var(--foreground-secondary)]">
           <Trans
             i18nKey={joinKey}
             values={{ projectName: resourceDisplayName, namespaceName: resourceDisplayName, role: roleLabel }}
-            components={{ bold: <strong className="text-gray-900 dark:text-gray-100" /> }}
+            components={{ bold: <strong className="text-[var(--foreground)]" /> }}
           />
         </p>
 
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index 784db5db..798bbf03 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -26,24 +26,31 @@ const OAUTH_PROVIDERS: Record<string, { icon: React.ReactNode }> = {
   discord: {
     icon: (
       <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286z" />
+        <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6348.8731-1.3003 1.2157-1.9905a.077.077 0 00-.037-.0967 14.6185 14.6185 0 01-2.0922-.9973.0743.0743 0 00-.0785-.0031c-4.2526 1.9424-7.4501 7.2832-7.4501 12.3896 0 .0647.0031.1294.0062.1939a.0822.0822 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6348.8731-1.3003 1.2157-1.9905a.077.077 0 00-.037-.0967 14.6185 14.6185 0 01-2.0922-.9973.0743.0743 0 00-.0785-.0031c-4.2526 1.9424-7.4501 7.2832-7.4501 12.3896 0 .0647.0031.1294.0062.1939a.0822.0822 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6348.8731-1.3003 1.2157-1.9905a.077.077 0 00-.037-.0967 14.6185 14.6185 0 01-2.0922-.9973.0743.0743 0 00-.0785-.0031c-4.2526 1.9424-7.4501 7.2832-7.4501 12.3896 0 .0647.0031.1294.0062.1939a.0822.0822 0 00.0312.0561"/>
       </svg>
     ),
   },
   github: {
     icon: (
       <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
-        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+        <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
       </svg>
     ),
   },
   microsoft: {
     icon: (
-      <svg className="w-5 h-5 mr-2" viewBox="0 0 23 23">
-        <rect x="1" y="1" width="10" height="10" fill="#F25022"/>
-        <rect x="12" y="1" width="10" height="10" fill="#7FBA00"/>
-        <rect x="1" y="12" width="10" height="10" fill="#00A4EF"/>
-        <rect x="12" y="12" width="10" height="10" fill="#FFB900"/>
+      <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24">
+        <path d="M11.4 24H0V12.6h11.4V24z" fill="#F25022"/>
+        <path d="M24 24H12.6V12.6H24V24z" fill="#7FBA00"/>
+        <path d="M11.4 11.4H0V0h11.4v11.4z" fill="#00A4EF"/>
+        <path d="M24 11.4H12.6V0H24v11.4z" fill="#FFB900"/>
+      </svg>
+    ),
+  },
+  sso: {
+    icon: (
+      <svg className="w-5 h-5 mr-2" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
       </svg>
     ),
   },
@@ -75,8 +82,6 @@ export function LoginPage() {
     }
     const pendingInvite = localStorage.getItem(PENDING_INVITE_KEY)
     if (pendingInvite) {
-      // Don't remove here — InviteAcceptPage will clean up after accepting.
-      // Removing here causes issues with React StrictMode double-rendering.
       return <Navigate to={`/invite/${pendingInvite}`} replace />
     }
     return <Navigate to="/d/projects" replace />
@@ -88,8 +93,6 @@ export function LoginPage() {
     setLoading(true)
     try {
       await login(email, password)
-      // Navigation is handled by the declarative if (user) block above,
-      // which checks for pending invites and redirects accordingly.
     } catch (err) {
       setError(getLocalizedError(err, t, 'login.error'))
     } finally {
@@ -114,7 +117,7 @@ export function LoginPage() {
 
   const providerOrder = Array.isArray(publicSettings?.oauth_provider_order)
     ? publicSettings.oauth_provider_order as string[]
-    : ['discord', 'google', 'github', 'microsoft']
+    : ['discord', 'google', 'github', 'microsoft', 'sso']
 
   const enabledProviders = providers
     ? Object.keys(OAUTH_PROVIDERS)
@@ -130,99 +133,123 @@ export function LoginPage() {
   const emailRegistrationEnabled = providers?.email_registration === true
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 px-4">
-      <div className="flex-1 flex items-center justify-center">
-      <div className="max-w-sm w-full">
-        <h1 className="text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-8">
-          {t('login.title', { brandName })}
-        </h1>
-
-        {emailLoginEnabled && (
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <Input
-              label={t('login.email')}
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              autoComplete="email"
-            />
-            <Input
-              label={t('login.password')}
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              autoComplete="current-password"
-            />
-            {error && (
-              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
-            )}
-            <Button type="submit" disabled={loading} className="w-full">
-              {loading ? t('login.submitting') : t('login.submit')}
-            </Button>
-
-            <p className="text-center text-sm">
-              <Link
-                to="/forgot-password"
-                className="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-              >
-                {t('login.forgotPassword')}
-              </Link>
+    <div className="min-h-screen flex bg-[var(--background)]">
+      <div className="hidden lg:flex lg:w-1/2 bg-[var(--surface-secondary)] flex-col justify-between p-12">
+        <div>
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-[var(--radius-md)] bg-[var(--primary)] flex items-center justify-center">
+              <span className="text-[var(--primary-foreground)] font-bold text-sm">{brandName.charAt(0).toUpperCase()}</span>
+            </div>
+            <span className="text-lg font-semibold text-[var(--foreground)]">{brandName}</span>
+          </div>
+        </div>
+
+        <div className="max-w-md">
+          <h2 className="text-2xl font-semibold text-[var(--foreground)] tracking-tight">
+            {t('login.heroTitle', 'Manage projects with clarity')}
+          </h2>
+          <p className="mt-3 text-[var(--foreground-secondary)] leading-relaxed">
+            {t('login.heroDesc', 'Track work items, collaborate with your team, and deliver projects on time — all in one place.')}
+          </p>
+        </div>
+
+        <PoweredByFooter />
+      </div>
+
+      <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex items-center justify-center px-6 py-12">
+          <div className="w-full max-w-[360px]">
+            <div className="lg:hidden flex items-center gap-2.5 mb-8">
+              <div className="w-8 h-8 rounded-[var(--radius)] bg-[var(--primary)] flex items-center justify-center">
+                <span className="text-[var(--primary-foreground)] font-bold text-xs">{brandName.charAt(0).toUpperCase()}</span>
+              </div>
+              <span className="text-base font-semibold text-[var(--foreground)]">{brandName}</span>
+            </div>
+
+            <h1 className="text-xl font-semibold text-[var(--foreground)] tracking-tight">
+              {t('login.title', { brandName })}
+            </h1>
+            <p className="mt-1.5 text-sm text-[var(--foreground-secondary)]">
+              {t('login.subtitle', 'Sign in to continue')}
             </p>
 
-            {emailRegistrationEnabled && (
-              <p className="text-center text-sm text-gray-600 dark:text-gray-400">
-                {t('login.noAccount')}{' '}
-                <Link
-                  to="/register"
-                  className="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-                >
-                  {t('login.createAccount')}
-                </Link>
-              </p>
+            {enabledProviders.length > 0 && (
+              <div className="mt-6 space-y-2">
+                {enabledProviders.map((p) => (
+                  <button
+                    key={p}
+                    type="button"
+                    onClick={() => handleOAuthLogin(p)}
+                    className="w-full flex items-center justify-center gap-2 rounded-[var(--radius)] border border-[var(--border)] bg-[var(--surface)] px-3 py-2 text-sm font-medium text-[var(--foreground)] hover:bg-[var(--surface-hover)] transition-colors"
+                  >
+                    {OAUTH_PROVIDERS[p]?.icon}
+                    {p === 'sso' ? t('login.sso.button', 'Continue with SSO') : t(`login.${p}.button`, `Continue with ${p.charAt(0).toUpperCase() + p.slice(1)}`)}
+                  </button>
+                ))}
+              </div>
             )}
-          </form>
-        )}
-
-        {!emailLoginEnabled && error && (
-          <p className="text-sm text-red-600 dark:text-red-400 mb-4">{error}</p>
-        )}
 
-        {enabledProviders.length > 0 && (
-          <>
-            {emailLoginEnabled && (
+            {enabledProviders.length > 0 && emailLoginEnabled && (
               <div className="relative my-6">
                 <div className="absolute inset-0 flex items-center">
-                  <div className="w-full border-t border-gray-300 dark:border-gray-600" />
+                  <div className="w-full border-t border-[var(--border)]" />
                 </div>
-                <div className="relative flex justify-center text-sm">
-                  <span className="px-2 bg-gray-50 dark:bg-gray-900 text-gray-500 dark:text-gray-400">
-                    {t('login.or')}
-                  </span>
+                <div className="relative flex justify-center">
+                  <span className="bg-[var(--background)] px-3 text-xs text-[var(--foreground-muted)]">{t('login.orEmail', 'or')}</span>
                 </div>
               </div>
             )}
 
-            <div className="space-y-3">
-              {enabledProviders.map((provider) => (
-                <Button
-                  key={provider}
-                  type="button"
-                  variant="secondary"
-                  className="w-full"
-                  onClick={() => handleOAuthLogin(provider)}
-                >
-                  {OAUTH_PROVIDERS[provider]?.icon}
-                  {t(`login.${provider}.button`)}
+            {emailLoginEnabled && (
+              <form onSubmit={handleSubmit} className="space-y-4">
+                <Input
+                  label={t('login.email')}
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                  autoComplete="email"
+                />
+                <Input
+                  label={t('login.password')}
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                  autoComplete="current-password"
+                />
+                {error && (
+                  <p className="text-sm text-[var(--danger)]">{error}</p>
+                )}
+                <Button type="submit" disabled={loading} className="w-full">
+                  {loading ? t('login.submitting') : t('login.submit')}
                 </Button>
-              ))}
-            </div>
-          </>
-        )}
-      </div>
+
+                <div className="flex items-center justify-between pt-1">
+                  <Link
+                    to="/forgot-password"
+                    className="text-xs text-[var(--foreground-secondary)] hover:text-[var(--primary)] transition-colors"
+                  >
+                    {t('login.forgotPassword')}
+                  </Link>
+                  {emailRegistrationEnabled && (
+                    <Link
+                      to="/register"
+                      className="text-xs text-[var(--foreground-secondary)] hover:text-[var(--primary)] transition-colors"
+                    >
+                      {t('login.createAccount')}
+                    </Link>
+                  )}
+                </div>
+              </form>
+            )}
+          </div>
+        </div>
+
+        <div className="lg:hidden px-6 pb-6">
+          <PoweredByFooter />
+        </div>
       </div>
-      <PoweredByFooter />
     </div>
   )
 }
diff --git a/web/src/pages/MilestoneDashboardPage.tsx b/web/src/pages/MilestoneDashboardPage.tsx
index 2d8a29d0..fde536f3 100644
--- a/web/src/pages/MilestoneDashboardPage.tsx
+++ b/web/src/pages/MilestoneDashboardPage.tsx
@@ -33,7 +33,7 @@ const HEADER_COLLAPSED_PREF = 'milestone_header_collapsed'
 const typeBarColors: Record<string, string> = {
   bug: 'bg-red-500',
   task: 'bg-blue-500',
-  ticket: 'bg-indigo-500',
+  ticket: 'bg-[var(--primary-muted)]',
   feedback: 'bg-yellow-500',
   epic: 'bg-green-500',
 }
@@ -42,7 +42,7 @@ const priorityBarColors: Record<string, string> = {
   critical: 'bg-red-500',
   high: 'bg-yellow-500',
   medium: 'bg-blue-500',
-  low: 'bg-gray-400',
+  low: 'bg-[var(--foreground-muted)]',
 }
 
 const statusCategoryOrder: Record<string, number> = {
@@ -112,7 +112,7 @@ export function MilestoneDashboardPage() {
   }
 
   if (!milestone) {
-    return <p className="text-red-600">{t('common.notFound')}</p>
+    return <p className="text-[var(--danger)]">{t('common.notFound')}</p>
   }
 
   const percent = milestone.total_count > 0 ? Math.round((milestone.closed_count / milestone.total_count) * 100) : 0
@@ -180,12 +180,12 @@ export function MilestoneDashboardPage() {
   return (
     <div className="max-w-4xl space-y-6">
       {/* Breadcrumb */}
-      <nav className="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
-        <Link to={p(`/projects/${projectKey}/milestones`)} className="hover:text-gray-700 dark:hover:text-gray-300">
+      <nav className="flex items-center gap-1 text-sm text-[var(--foreground-secondary)]">
+        <Link to={p(`/projects/${projectKey}/milestones`)} className="hover:text-[var(--foreground)] dark:hover:text-[var(--foreground-muted)]">
           {t('milestone.dashboard.backToMilestones')}
         </Link>
         <ChevronRight className="h-3.5 w-3.5" />
-        <span className="text-gray-900 dark:text-gray-100">{milestone.name}</span>
+        <span className="text-[var(--foreground)]">{milestone.name}</span>
       </nav>
 
       {/* Header */}
@@ -260,12 +260,12 @@ export function MilestoneDashboardPage() {
       {effectiveTab === 'settings' && canManage && (
         <div className="border border-red-300 dark:border-red-800 rounded-lg">
           <div className="px-4 py-3 border-b border-red-300 dark:border-red-800">
-            <h3 className="text-base font-semibold text-red-600">{t('milestone.dashboard.dangerZone')}</h3>
+            <h3 className="text-base font-semibold text-[var(--danger)]">{t('milestone.dashboard.dangerZone')}</h3>
           </div>
           <div className="p-4 flex items-center justify-between gap-4">
             <div>
-              <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{t('milestone.dashboard.deleteThisMilestone')}</p>
-              <p className="text-sm text-gray-500 dark:text-gray-400">{t('milestone.dashboard.deleteWarning')}</p>
+              <p className="text-sm font-medium text-[var(--foreground)]">{t('milestone.dashboard.deleteThisMilestone')}</p>
+              <p className="text-sm text-[var(--foreground-secondary)]">{t('milestone.dashboard.deleteWarning')}</p>
             </div>
             <Button variant="danger" className="min-w-[7.5rem] h-10" onClick={() => { setDeleteError(''); setDeleteOpen(true) }}>
               {t('milestones.deleteConfirmTitle')}
@@ -287,10 +287,10 @@ export function MilestoneDashboardPage() {
 
       {/* Delete confirmation */}
       <Modal open={deleteOpen} onClose={() => setDeleteOpen(false)} title={t('milestones.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans i18nKey="milestones.deleteConfirmBody" values={{ name: milestone.name }} components={{ bold: <strong /> }} />
         </p>
-        {deleteError && <p className="text-sm text-red-600 dark:text-red-400 mb-4">{deleteError}</p>}
+        {deleteError && <p className="text-sm text-[var(--danger)] mb-4">{deleteError}</p>}
         <div className="flex justify-end gap-2">
           <Button variant="secondary" onClick={() => setDeleteOpen(false)}>
             {t('common.cancel')}
@@ -335,7 +335,7 @@ function HeaderSection({
     <span
       className={`inline-flex shrink-0 items-center px-2 py-0.5 text-xs font-medium rounded-full ${
         isClosed
-          ? 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400'
+          ? 'bg-[var(--surface-tertiary)] text-[var(--foreground-secondary)] bg-[var(--surface-secondary)] text-[var(--foreground-muted)]'
           : 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
       }`}
     >
@@ -369,14 +369,14 @@ function HeaderSection({
         className="flex flex-wrap items-center gap-x-3 gap-y-2 cursor-pointer"
         onClick={handleRowClick}
       >
-        <h2 className="min-w-0 truncate text-xl font-semibold text-gray-900 dark:text-gray-100">{milestone.name}</h2>
+        <h2 className="min-w-0 truncate text-xl font-semibold text-[var(--foreground)]">{milestone.name}</h2>
         {statusBadge}
         {milestone.due_date && <DueDateLabel dueDate={milestone.due_date} isClosed={isClosed} />}
 
         {/* Progress bar fills the space between the metadata and the actions */}
-        <div className="flex flex-1 items-center gap-2 min-w-[10rem] text-sm text-gray-500 dark:text-gray-400">
+        <div className="flex flex-1 items-center gap-2 min-w-[10rem] text-sm text-[var(--foreground-secondary)]">
           <span className="whitespace-nowrap">{progressLabel}</span>
-          <div className="flex-1 min-w-[3rem] bg-gray-200 dark:bg-gray-700 rounded-full h-3">
+          <div className="flex-1 min-w-[3rem] bg-[var(--surface-tertiary)] rounded-full h-3">
             <div
               className="bg-green-500 dark:bg-green-400 h-3 rounded-full transition-all"
               style={{ width: `${percent}%` }}
@@ -394,22 +394,22 @@ function HeaderSection({
     <div>
       <div className="flex items-center justify-between gap-2 cursor-pointer" onClick={handleRowClick}>
         <div className="min-w-0 flex-1 flex items-center gap-3 flex-wrap">
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">{milestone.name}</h2>
+          <h2 className="text-xl font-semibold text-[var(--foreground)]">{milestone.name}</h2>
           {statusBadge}
           {milestone.due_date && <DueDateLabel dueDate={milestone.due_date} isClosed={isClosed} />}
         </div>
         {actions}
       </div>
       {milestone.description && (
-        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">{milestone.description}</p>
+        <p className="text-sm text-[var(--foreground-secondary)] mt-1">{milestone.description}</p>
       )}
       {/* Progress bar */}
       <div className="mt-4">
-        <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 mb-1">
+        <div className="flex items-center justify-between text-sm text-[var(--foreground-secondary)] mb-1">
           <span>{progressLabel}</span>
           {milestone.total_count > 0 && <span>{percent}%</span>}
         </div>
-        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
+        <div className="w-full bg-[var(--surface-tertiary)] rounded-full h-3">
           <div
             className="bg-green-500 dark:bg-green-400 h-3 rounded-full transition-all"
             style={{ width: `${percent}%` }}
@@ -434,7 +434,7 @@ function SummaryCounters({
   const counters = [
     { label: t('milestone.dashboard.openItems'), value: milestone.open_count, color: 'text-blue-600 dark:text-blue-400' },
     { label: t('milestone.dashboard.closedItems'), value: milestone.closed_count, color: 'text-green-600 dark:text-green-400' },
-    { label: t('milestone.dashboard.totalItems'), value: milestone.total_count, color: 'text-gray-900 dark:text-gray-100' },
+    { label: t('milestone.dashboard.totalItems'), value: milestone.total_count, color: 'text-[var(--foreground)]' },
   ]
 
   // Add type counts
@@ -443,7 +443,7 @@ function SummaryCounters({
       counters.push({
         label: t(`workitems.types.${type}`, { defaultValue: type }),
         value: counts.open + counts.closed,
-        color: 'text-gray-700 dark:text-gray-300',
+        color: 'text-[var(--foreground)]',
       })
     }
   }
@@ -451,9 +451,9 @@ function SummaryCounters({
   return (
     <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3">
       {counters.map((c) => (
-        <div key={c.label} className="rounded-lg border border-gray-200 dark:border-gray-700 p-3 text-center">
+        <div key={c.label} className="rounded-lg border border-[var(--border)] p-3 text-center">
           <div className={`text-2xl font-bold ${c.color}`}>{c.value}</div>
-          <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{c.label}</div>
+          <div className="text-xs text-[var(--foreground-secondary)] mt-0.5">{c.label}</div>
         </div>
       ))}
     </div>
@@ -483,8 +483,8 @@ function BreakdownChart({
   const maxCount = Math.max(...entries.map(([, v]) => v.open + v.closed), 1)
 
   return (
-    <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-4">
-      <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">{title}</h3>
+    <div className="rounded-lg border border-[var(--border)] p-4">
+      <h3 className="text-sm font-medium text-[var(--foreground)] mb-3">{title}</h3>
       <div className="space-y-2">
         {entries.map(([key, counts]) => {
           const total = counts.open + counts.closed
@@ -499,12 +499,12 @@ function BreakdownChart({
               className="block group"
             >
               <div className="flex items-center justify-between text-xs mb-0.5">
-                <span className="text-gray-700 dark:text-gray-300 group-hover:text-indigo-600 dark:group-hover:text-indigo-400">{label}</span>
-                <span className="text-gray-500 dark:text-gray-400">{total}</span>
+                <span className="text-[var(--foreground)] group-hover:text-[var(--primary)] dark:group-hover:text-[var(--primary)]">{label}</span>
+                <span className="text-[var(--foreground-secondary)]">{total}</span>
               </div>
-              <div className="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-2">
+              <div className="w-full bg-[var(--surface-secondary)] rounded-full h-2">
                 <div
-                  className={`h-2 rounded-full transition-all ${colorMap[key] ?? 'bg-gray-400'}`}
+                  className={`h-2 rounded-full transition-all ${colorMap[key] ?? 'bg-[var(--foreground-muted)]'}`}
                   style={{ width: `${pct}%` }}
                 />
               </div>
@@ -524,15 +524,15 @@ function LabelBreakdown({ labels }: { labels: Record<string, number> }) {
 
   return (
     <div>
-      <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-3">{t('milestone.dashboard.byLabel')}</h3>
+      <h3 className="text-sm font-medium text-[var(--foreground-secondary)] mb-3">{t('milestone.dashboard.byLabel')}</h3>
       <div className="flex flex-wrap gap-2">
         {entries.map(([label, count]) => (
           <span
             key={label}
-            className="inline-flex items-center gap-1.5 rounded-full border border-gray-200 dark:border-gray-700 px-3 py-1 text-xs text-gray-700 dark:text-gray-300"
+            className="inline-flex items-center gap-1.5 rounded-full border border-[var(--border)] px-3 py-1 text-xs text-[var(--foreground)]"
           >
             {label}
-            <span className="font-medium text-gray-900 dark:text-gray-100">{count}</span>
+            <span className="font-medium text-[var(--foreground)]">{count}</span>
           </span>
         ))}
       </div>
@@ -552,35 +552,35 @@ function TimeTrackingSection({ milestone }: { milestone: Milestone }) {
   const timePercent = estimated > 0 ? Math.min(Math.round((spent / estimated) * 100), 100) : 0
 
   return (
-    <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-4">
-      <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3 flex items-center gap-2">
+    <div className="rounded-lg border border-[var(--border)] p-4">
+      <h3 className="text-sm font-medium text-[var(--foreground)] mb-3 flex items-center gap-2">
         <Clock className="h-4 w-4" />
         {t('milestone.dashboard.timeTracking')}
       </h3>
       <div className="grid grid-cols-3 gap-4 text-center mb-3">
         {estimated > 0 && (
           <div>
-            <div className="text-lg font-semibold text-gray-900 dark:text-gray-100">{formatDuration(estimated)}</div>
-            <div className="text-xs text-gray-500 dark:text-gray-400">{t('milestone.dashboard.estimated')}</div>
+            <div className="text-lg font-semibold text-[var(--foreground)]">{formatDuration(estimated)}</div>
+            <div className="text-xs text-[var(--foreground-secondary)]">{t('milestone.dashboard.estimated')}</div>
           </div>
         )}
         {spent > 0 && (
           <div>
-            <div className="text-lg font-semibold text-gray-900 dark:text-gray-100">{formatDuration(spent)}</div>
-            <div className="text-xs text-gray-500 dark:text-gray-400">{t('milestone.dashboard.spent')}</div>
+            <div className="text-lg font-semibold text-[var(--foreground)]">{formatDuration(spent)}</div>
+            <div className="text-xs text-[var(--foreground-secondary)]">{t('milestone.dashboard.spent')}</div>
           </div>
         )}
         {estimated > 0 && (
           <div>
-            <div className={`text-lg font-semibold ${isOver ? 'text-red-500' : 'text-gray-900 dark:text-gray-100'}`}>
+            <div className={`text-lg font-semibold ${isOver ? 'text-[var(--danger)]' : 'text-[var(--foreground)]'}`}>
               {isOver ? t('milestone.dashboard.overBy', { time: formatDuration(Math.abs(remaining)) }) : formatDuration(remaining)}
             </div>
-            <div className="text-xs text-gray-500 dark:text-gray-400">{t('milestone.dashboard.remaining')}</div>
+            <div className="text-xs text-[var(--foreground-secondary)]">{t('milestone.dashboard.remaining')}</div>
           </div>
         )}
       </div>
       {estimated > 0 && (
-        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+        <div className="w-full bg-[var(--surface-tertiary)] rounded-full h-2">
           <div
             className={`h-2 rounded-full transition-all ${isOver ? 'bg-red-500' : 'bg-blue-500'}`}
             style={{ width: `${timePercent}%` }}
@@ -652,7 +652,7 @@ function WorkItemsTable({
       <div className="flex items-center justify-end mb-3">
         <Link
           to={p(`/projects/${projectKey}/items?milestone=${milestoneId}`)}
-          className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline"
+          className="text-xs text-[var(--primary)] hover:underline"
         >
           {t('milestone.dashboard.viewAll')}
         </Link>
@@ -663,11 +663,11 @@ function WorkItemsTable({
           <Spinner />
         </div>
       ) : items.length === 0 ? (
-        <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('milestone.dashboard.noItems')}</p>
+        <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('milestone.dashboard.noItems')}</p>
         </div>
       ) : (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden divide-y divide-gray-200 dark:divide-gray-700 text-sm">
+        <div className="border border-[var(--border)] rounded-lg overflow-hidden divide-y divide-[var(--border)] text-sm">
           {visibleItems.map((item) => {
             const cat = statuses?.find((s) => s.name === item.status)?.category
             return (
@@ -685,18 +685,18 @@ function WorkItemsTable({
             )
           })}
           {(hasHiddenItems || hasMore) && (
-            <div className="border-t border-gray-200 dark:border-gray-700 p-2 text-center">
+            <div className="border-t border-[var(--border)] p-2 text-center">
               {hasHiddenItems && !expanded ? (
                 <button
                   onClick={() => setExpanded(true)}
-                  className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline"
+                  className="text-xs text-[var(--primary)] hover:underline"
                 >
                   {t('milestone.dashboard.showAll', { count: items.length })}
                 </button>
               ) : hasMore ? (
                 <Link
                   to={p(`/projects/${projectKey}/items?milestone=${milestoneId}`)}
-                  className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline"
+                  className="text-xs text-[var(--primary)] hover:underline"
                 >
                   {t('milestone.dashboard.viewAll')}
                 </Link>
@@ -743,7 +743,7 @@ function WorkItemRow({
   return (
     <ScrollableRow
       ref={rowRef}
-      className={isActive ? 'bg-indigo-50 dark:bg-indigo-900/20' : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}
+      className={isActive ? 'bg-[var(--primary-muted)]' : 'hover:bg-[var(--surface-hover)]/50'}
       gradientFrom="from-white dark:from-gray-900"
     >
       <div className="px-3 py-2 shrink-0">
@@ -751,7 +751,7 @@ function WorkItemRow({
           to={p(`/projects/${projectKey}/items/${item.item_number}`)}
           {...linkState}
           onClick={() => onClick?.(item.item_number)}
-          className={`text-xs font-mono ${isCompleted ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400'} hover:text-indigo-600 dark:hover:text-indigo-400`}
+          className={`text-xs font-mono ${isCompleted ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground-secondary)]'} hover:text-[var(--primary)] dark:hover:text-[var(--primary)]`}
         >
           {item.display_id}
         </Link>
@@ -761,7 +761,7 @@ function WorkItemRow({
           to={p(`/projects/${projectKey}/items/${item.item_number}`)}
           {...linkState}
           onClick={() => onClick?.(item.item_number)}
-          className={`hover:text-indigo-600 dark:hover:text-indigo-400 whitespace-nowrap sm:truncate sm:block ${isCompleted ? 'line-through text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
+          className={`hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap sm:truncate sm:block ${isCompleted ? 'line-through text-[var(--foreground-muted)]' : 'text-[var(--foreground)]'}`}
         >
           {item.title}
         </Link>
@@ -779,7 +779,7 @@ function WorkItemRow({
         {member ? (
           <Avatar name={member.display_name} avatarUrl={member.avatar_url} size="xs" />
         ) : (
-          <span className="text-xs text-gray-400 whitespace-nowrap">{t('milestone.dashboard.unassigned')}</span>
+          <span className="text-xs text-[var(--foreground-muted)] whitespace-nowrap">{t('milestone.dashboard.unassigned')}</span>
         )}
       </div>
     </ScrollableRow>
@@ -800,10 +800,10 @@ function DueDateLabel({ dueDate, isClosed }: { dueDate: string; isClosed: boolea
 
   if (isClosed) {
     text = dueDate
-    colorClass = 'text-gray-400 dark:text-gray-500'
+    colorClass = 'text-[var(--foreground-muted)]'
   } else if (diffDays < 0) {
     text = t('milestones.overdue', { days: Math.abs(diffDays) })
-    colorClass = 'text-red-600 dark:text-red-400'
+    colorClass = 'text-[var(--danger)]'
   } else if (diffDays === 0) {
     text = t('milestones.dueToday')
     colorClass = 'text-yellow-600 dark:text-yellow-400'
@@ -812,7 +812,7 @@ function DueDateLabel({ dueDate, isClosed }: { dueDate: string; isClosed: boolea
     colorClass = 'text-yellow-600 dark:text-yellow-400'
   } else {
     text = dueDate
-    colorClass = 'text-gray-400 dark:text-gray-500'
+    colorClass = 'text-[var(--foreground-muted)]'
   }
 
   return <span className={`text-sm ${colorClass}`}>{text}</span>
@@ -860,13 +860,13 @@ function MilestoneEditForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       {(validationError || error) && (
-        <p className="text-sm text-red-600 dark:text-red-400">{validationError || error}</p>
+        <p className="text-sm text-[var(--danger)]">{validationError || error}</p>
       )}
       <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('milestones.name')}</label>
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('milestones.name')}</label>
         <input
           type="text"
-          className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+          className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
           value={name}
           onChange={(e) => setName(e.target.value)}
           required
@@ -874,28 +874,28 @@ function MilestoneEditForm({
         />
       </div>
       <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('common.description')}</label>
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('common.description')}</label>
         <textarea
           rows={3}
-          className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+          className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
         />
       </div>
       <div className="flex gap-4">
         <div className="w-48">
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('milestones.dueDate')}</label>
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('milestones.dueDate')}</label>
           <input
             type="date"
-            className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+            className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
             value={dueDate}
             onChange={(e) => setDueDate(e.target.value)}
           />
         </div>
         <div className="w-48">
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('workitems.form.status')}</label>
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('workitems.form.status')}</label>
           <select
-            className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+            className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
             value={status}
             onChange={(e) => setStatus(e.target.value as 'open' | 'closed')}
           >
diff --git a/web/src/pages/MilestonesPage.tsx b/web/src/pages/MilestonesPage.tsx
index add6bd5b..1f4184bf 100644
--- a/web/src/pages/MilestonesPage.tsx
+++ b/web/src/pages/MilestonesPage.tsx
@@ -65,8 +65,8 @@ export function MilestonesPage() {
     <div className="max-w-3xl space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('milestones.title')}</h2>
-          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('milestones.description')}</p>
+          <h2 className="text-lg font-semibold text-[var(--foreground)]">{t('milestones.title')}</h2>
+          <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('milestones.description')}</p>
         </div>
         {canManage && (
           <Button onClick={() => setEditorOpen(true)} className="border border-transparent">
@@ -76,12 +76,12 @@ export function MilestonesPage() {
         )}
       </div>
 
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
 
       {/* Open milestones */}
       {openMilestones.length === 0 && closedMilestones.length === 0 ? (
-        <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('milestones.noMilestones')}</p>
+        <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('milestones.noMilestones')}</p>
           {canManage && (
             <Button size="sm" variant="secondary" className="mt-3" onClick={() => setEditorOpen(true)}>
               <Plus className="h-4 w-4 mr-1" />
@@ -93,8 +93,8 @@ export function MilestonesPage() {
         <>
           {openMilestones.length > 0 && (
             <div>
-              <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">{t('milestones.statusOpen')} ({openMilestones.length})</h3>
-              <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+              <h3 className="text-sm font-medium text-[var(--foreground-secondary)] mb-2">{t('milestones.statusOpen')} ({openMilestones.length})</h3>
+              <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
                 {openMilestones.map((m) => (
                   <MilestoneCard key={m.id} milestone={m} projectKey={projectKey ?? ''} saved={savedId === m.id} />
                 ))}
@@ -105,14 +105,14 @@ export function MilestonesPage() {
           {closedMilestones.length > 0 && (
             <div>
               <button
-                className="flex items-center gap-1 text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 hover:text-gray-700 dark:hover:text-gray-300"
+                className="flex items-center gap-1 text-sm font-medium text-[var(--foreground-secondary)] mb-2 hover:text-[var(--foreground)] dark:hover:text-[var(--foreground-muted)]"
                 onClick={() => setClosedExpanded(!closedExpanded)}
               >
                 {closedExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
                 {t('milestones.statusClosed')} ({closedMilestones.length})
               </button>
               {closedExpanded && (
-                <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+                <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
                   {closedMilestones.map((m) => (
                     <MilestoneCard key={m.id} milestone={m} projectKey={projectKey ?? ''} saved={savedId === m.id} />
                   ))}
@@ -157,16 +157,16 @@ function MilestoneCard({
   return (
     <Link
       to={p(`/projects/${projectKey}/milestones/${milestone.id}`)}
-      className="block p-4 group hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+      className="block p-4 group hover:bg-[var(--surface-hover)]/50 transition-colors"
     >
       <div className="flex items-start justify-between gap-2">
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2 flex-wrap">
-            <span className="text-lg font-semibold text-gray-900 dark:text-gray-100 group-hover:text-indigo-600 dark:group-hover:text-indigo-400">{milestone.name}</span>
+            <span className="text-lg font-semibold text-[var(--foreground)] group-hover:text-[var(--primary)] dark:group-hover:text-[var(--primary)]">{milestone.name}</span>
             {milestone.due_date && <DueDateLabel dueDate={milestone.due_date} isClosed={milestone.status === 'closed'} />}
           </div>
           {milestone.description && (
-            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{milestone.description}</p>
+            <p className="text-xs text-[var(--foreground-secondary)] mt-1">{milestone.description}</p>
           )}
         </div>
         {saved && (
@@ -178,7 +178,7 @@ function MilestoneCard({
 
       {/* Progress bar */}
       <div className="mt-3">
-        <div className="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 mb-1">
+        <div className="flex items-center justify-between text-sm text-[var(--foreground-secondary)] mb-1">
           <span>
             {milestone.total_count > 0
               ? t('milestones.progress', { closed: milestone.closed_count, total: milestone.total_count })
@@ -186,7 +186,7 @@ function MilestoneCard({
           </span>
           {milestone.total_count > 0 && <span>{percent}%</span>}
         </div>
-        <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-3">
+        <div className="w-full bg-[var(--surface-tertiary)] rounded-full h-3">
           <div
             className="bg-green-500 dark:bg-green-400 h-2 rounded-full transition-all"
             style={{ width: `${percent}%` }}
@@ -196,7 +196,7 @@ function MilestoneCard({
 
       {/* Time tracking summary */}
       {(milestone.total_estimated_seconds > 0 || milestone.total_spent_seconds > 0) && (
-        <div className="mt-2 flex items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
+        <div className="mt-2 flex items-center gap-4 text-xs text-[var(--foreground-secondary)]">
           <Clock className="h-3.5 w-3.5 shrink-0" />
           {milestone.total_estimated_seconds > 0 && (
             <span>
@@ -226,13 +226,13 @@ function TimeProgressBar({ estimated, spent }: { estimated: number; spent: numbe
 
   return (
     <div className="flex items-center gap-1.5 flex-1 min-w-0" title={t('milestones.timeProgress', { percent })}>
-      <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5 min-w-[40px]">
+      <div className="flex-1 bg-[var(--surface-tertiary)] rounded-full h-1.5 min-w-[40px]">
         <div
           className={`h-1.5 rounded-full transition-all ${isOver ? 'bg-red-500 dark:bg-red-400' : 'bg-blue-500 dark:bg-blue-400'}`}
           style={{ width: `${percent}%` }}
         />
       </div>
-      <span className={`shrink-0 ${isOver ? 'text-red-500 dark:text-red-400' : ''}`}>{percent}%</span>
+      <span className={`shrink-0 ${isOver ? 'text-[var(--danger)]' : ''}`}>{percent}%</span>
     </div>
   )
 }
@@ -251,10 +251,10 @@ function DueDateLabel({ dueDate, isClosed }: { dueDate: string; isClosed: boolea
 
   if (isClosed) {
     text = dueDate
-    colorClass = 'text-gray-400 dark:text-gray-500'
+    colorClass = 'text-[var(--foreground-muted)]'
   } else if (diffDays < 0) {
     text = t('milestones.overdue', { days: Math.abs(diffDays) })
-    colorClass = 'text-red-600 dark:text-red-400'
+    colorClass = 'text-[var(--danger)]'
   } else if (diffDays === 0) {
     text = t('milestones.dueToday')
     colorClass = 'text-yellow-600 dark:text-yellow-400'
@@ -263,7 +263,7 @@ function DueDateLabel({ dueDate, isClosed }: { dueDate: string; isClosed: boolea
     colorClass = 'text-yellow-600 dark:text-yellow-400'
   } else {
     text = dueDate
-    colorClass = 'text-gray-400 dark:text-gray-500'
+    colorClass = 'text-[var(--foreground-muted)]'
   }
 
   return <span className={`text-xs ${colorClass}`}>{text}</span>
@@ -305,7 +305,7 @@ function MilestoneForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       {validationError && (
-        <p className="text-sm text-red-600 dark:text-red-400">{validationError}</p>
+        <p className="text-sm text-[var(--danger)]">{validationError}</p>
       )}
       <Input
         label={t('milestones.name')}
@@ -316,12 +316,12 @@ function MilestoneForm({
         autoFocus
       />
       <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
           {t('common.description')}
         </label>
         <textarea
           rows={3}
-          className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+          className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
         />
diff --git a/web/src/pages/NamespaceCreatePage.tsx b/web/src/pages/NamespaceCreatePage.tsx
index cb0346e0..b2308e2d 100644
--- a/web/src/pages/NamespaceCreatePage.tsx
+++ b/web/src/pages/NamespaceCreatePage.tsx
@@ -45,7 +45,7 @@ export function NamespaceCreatePage() {
       <div className={`flex transition-all duration-200 ${collapsed ? 'gap-4' : 'gap-8'}`}>
         <AppSidebar />
         <div className="flex-1 min-w-0 max-w-xl">
-          <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">{t('namespaces.createTitle')}</h1>
+          <h1 className="text-lg font-semibold text-[var(--foreground)] mb-6">{t('namespaces.createTitle')}</h1>
           <form onSubmit={handleCreate} className="space-y-4">
             <Input
               label={t('namespaces.displayName')}
@@ -62,8 +62,8 @@ export function NamespaceCreatePage() {
               maxLength={30}
               required
             />
-            <p className="text-xs text-gray-400 dark:text-gray-500 -mt-3">{t('namespaces.slugHint')}</p>
-            {formError && <p className="text-sm text-red-600 dark:text-red-400">{formError}</p>}
+            <p className="text-xs text-[var(--foreground-muted)] -mt-3">{t('namespaces.slugHint')}</p>
+            {formError && <p className="text-sm text-[var(--danger)]">{formError}</p>}
             <div className="flex justify-end gap-3 pt-2">
               <Button type="button" variant="secondary" onClick={() => navigate(-1)}>{t('common.cancel')}</Button>
               <Button type="submit" disabled={createMutation.isPending || !slug.trim() || !displayName.trim()}>
diff --git a/web/src/pages/NamespaceSettingsPage.tsx b/web/src/pages/NamespaceSettingsPage.tsx
index 5e73ef17..d1d5322a 100644
--- a/web/src/pages/NamespaceSettingsPage.tsx
+++ b/web/src/pages/NamespaceSettingsPage.tsx
@@ -238,8 +238,8 @@ export function NamespaceSettingsPage() {
         <div className="flex-1 min-w-0 max-w-3xl space-y-6">
           {/* Page Header */}
           <div>
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">{t('namespaces.settingsTitle')}</h2>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('namespaces.settingsDescription')}</p>
+            <h2 className="text-xl font-semibold text-[var(--foreground)]">{t('namespaces.settingsTitle')}</h2>
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('namespaces.settingsDescription')}</p>
           </div>
 
           <Tabs tabs={tabs} activeTab={effectiveTab} onTabChange={setActiveTab} />
@@ -262,14 +262,14 @@ export function NamespaceSettingsPage() {
               required
               disabled={!canManage}
             />
-            <p className="text-xs text-gray-400 dark:text-gray-500 -mt-3">{t('namespaces.slugHint')}</p>
+            <p className="text-xs text-[var(--foreground-muted)] -mt-3">{t('namespaces.slugHint')}</p>
 
             {/* Icon & Color pickers + Preview */}
             <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 sm:items-start">
               <div className="flex-1 min-w-0 space-y-4">
                 {/* Icon picker */}
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{t('namespaces.icon')}</label>
+                  <label className="block text-sm font-medium text-[var(--foreground)] mb-2">{t('namespaces.icon')}</label>
                   <div className="overflow-x-auto pb-1 sm:overflow-x-visible sm:pb-0">
                     <div className="grid grid-rows-3 grid-flow-col auto-cols-min gap-2 sm:grid-rows-none sm:grid-flow-row sm:grid-cols-10 sm:gap-1.5">
                       {NAMESPACE_ICONS.map((iconName) => {
@@ -283,8 +283,8 @@ export function NamespaceSettingsPage() {
                             onClick={() => setIconInput(iconName)}
                             className={`p-2 rounded-lg border-2 transition-all ${
                               selected
-                                ? `border-current ${getColorClasses(currentColor).text} bg-gray-100 dark:bg-gray-700`
-                                : 'border-transparent text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800'
+                                ? `border-current ${getColorClasses(currentColor).text} bg-[var(--surface-secondary)]`
+                                : 'border-transparent text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)]'
                             } disabled:opacity-50 disabled:cursor-not-allowed`}
                           >
                             <Icon className="h-5 w-5" />
@@ -297,7 +297,7 @@ export function NamespaceSettingsPage() {
 
                 {/* Color picker */}
                 <div>
-                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{t('namespaces.color')}</label>
+                  <label className="block text-sm font-medium text-[var(--foreground)] mb-2">{t('namespaces.color')}</label>
                   <div className="flex flex-wrap gap-1.5">
                     {NAMESPACE_COLORS.map((c) => {
                       const selected = currentColor === c
@@ -320,15 +320,15 @@ export function NamespaceSettingsPage() {
 
               {/* Preview */}
               <div className="shrink-0">
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{t('namespaces.preview')}</label>
-                <div className="flex flex-col items-center gap-3 rounded-lg border border-gray-200 dark:border-gray-700 px-6 py-5 bg-white dark:bg-gray-800">
+                <label className="block text-sm font-medium text-[var(--foreground)] mb-2">{t('namespaces.preview')}</label>
+                <div className="flex flex-col items-center gap-3 rounded-lg border border-[var(--border)] px-6 py-5 bg-[var(--surface)]">
                   <NamespaceIcon icon={currentIcon} color={currentColor} className="h-10 w-10" />
-                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{currentDisplayName}</span>
+                  <span className="text-sm font-medium text-[var(--foreground)]">{currentDisplayName}</span>
                 </div>
               </div>
             </div>
 
-            {saveError && <p className="text-sm text-red-600 dark:text-red-400">{saveError}</p>}
+            {saveError && <p className="text-sm text-[var(--danger)]">{saveError}</p>}
 
             {canManage && (
               <div className="flex items-center gap-2">
@@ -346,12 +346,12 @@ export function NamespaceSettingsPage() {
           {isOwner && (
             <div className="border border-red-300 dark:border-red-800 rounded-lg">
               <div className="px-4 py-3 border-b border-red-300 dark:border-red-800">
-                <h3 className="text-base font-semibold text-red-600">{t('namespaces.dangerZone')}</h3>
+                <h3 className="text-base font-semibold text-[var(--danger)]">{t('namespaces.dangerZone')}</h3>
               </div>
               <div className="p-4 flex items-center justify-between">
                 <div>
-                  <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{t('namespaces.deleteTitle')}</p>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">{t('namespaces.deleteWarning')}</p>
+                  <p className="text-sm font-medium text-[var(--foreground)]">{t('namespaces.deleteTitle')}</p>
+                  <p className="text-sm text-[var(--foreground-secondary)]">{t('namespaces.deleteWarning')}</p>
                 </div>
                 <Button variant="danger" size="sm" onClick={() => setShowDeleteModal(true)}>
                   {t('namespaces.delete')}
@@ -365,13 +365,13 @@ export function NamespaceSettingsPage() {
           {/* ───── Users tab ───── */}
           {effectiveTab === 'users' && (
           <div className="space-y-6">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('namespaces.membersDescription')}</p>
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('namespaces.membersDescription')}</p>
 
-          {memberError && <p className="text-sm text-red-600 dark:text-red-400">{memberError}</p>}
+          {memberError && <p className="text-sm text-[var(--danger)]">{memberError}</p>}
 
           {canManage && (
-            <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3">
-              <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">{t('namespaces.inviteByEmail')}</h3>
+            <div className="border border-[var(--border)] rounded-lg p-4 space-y-3">
+              <h3 className="text-sm font-medium text-[var(--foreground)]">{t('namespaces.inviteByEmail')}</h3>
               <div className="flex gap-2 items-end">
                 <div className="flex-1 min-w-0">
                   <Input
@@ -382,7 +382,7 @@ export function NamespaceSettingsPage() {
                   />
                 </div>
                 <select
-                  className="shrink-0 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  className="shrink-0 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                   value={newMemberRole}
                   onChange={(e) => setNewMemberRole(e.target.value)}
                 >
@@ -402,7 +402,7 @@ export function NamespaceSettingsPage() {
           )}
 
           {((members && members.length > 0) || pendingEmailInvites.length > 0) && (
-            <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+            <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
               {members?.map((member) => {
                 const isSelf = member.user_id === user?.id
                 const memberIsOwner = member.role === 'owner'
@@ -415,11 +415,11 @@ export function NamespaceSettingsPage() {
                     <div className="flex items-center gap-3 min-w-0">
                       <Avatar name={member.display_name} avatarUrl={member.avatar_url} size="sm" />
                       <div className="min-w-0">
-                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                        <p className="text-sm font-medium text-[var(--foreground)] truncate">
                           {member.display_name}
-                          {isSelf && <span className="ml-1 text-xs text-gray-400">({t('common.you')})</span>}
+                          {isSelf && <span className="ml-1 text-xs text-[var(--foreground-muted)]">({t('common.you')})</span>}
                         </p>
-                        <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{member.email}</p>
+                        <p className="text-xs text-[var(--foreground-secondary)] truncate">{member.email}</p>
                       </div>
                     </div>
                     <div className="flex items-center gap-2 flex-shrink-0 ml-auto">
@@ -428,7 +428,7 @@ export function NamespaceSettingsPage() {
                           {saved[`role:${member.user_id}`] && <Check className="h-5 w-5 text-green-500 animate-[pulse_0.6s_ease-in-out_2]" />}
                           <Tooltip content={isLastOwner ? t('namespaces.lastOwnerTooltip') : undefined}>
                             <select
-                              className="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                              className="rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] disabled:opacity-50 disabled:cursor-not-allowed"
                               value={member.role}
                               onChange={(e) => handleRoleChange(member.user_id, e.target.value)}
                               disabled={updateRoleMutation.isPending || isLastOwner}
@@ -441,7 +441,7 @@ export function NamespaceSettingsPage() {
                           </Tooltip>
                           <Tooltip content={isLastOwner ? t('namespaces.lastOwnerTooltip') : undefined}>
                             <button
-                              className={`p-1 ${isLastOwner ? 'text-gray-300 dark:text-gray-600 cursor-not-allowed' : 'text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'}`}
+                              className={`p-1 ${isLastOwner ? 'text-[var(--foreground-secondary)] cursor-not-allowed' : 'text-[var(--danger)] hover:text-red-700 text-[var(--danger)] dark:hover:text-red-300'}`}
                               onClick={() => !isLastOwner && setRemoveTarget({ userId: member.user_id, name: member.display_name })}
                               disabled={isLastOwner}
                             >
@@ -461,11 +461,11 @@ export function NamespaceSettingsPage() {
               {pendingEmailInvites.map((invite) => (
                 <div key={invite.id} className="flex flex-wrap items-center justify-between gap-2 p-3">
                   <div className="flex items-center gap-3 min-w-0">
-                    <div className="h-8 w-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
-                      <Mail className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    <div className="h-8 w-8 rounded-full bg-[var(--surface-secondary)] flex items-center justify-center flex-shrink-0">
+                      <Mail className="h-4 w-4 text-[var(--foreground-muted)]" />
                     </div>
                     <div className="min-w-0">
-                      <p className="text-sm text-gray-500 dark:text-gray-400 truncate">
+                      <p className="text-sm text-[var(--foreground-secondary)] truncate">
                         {invite.invitee_email}
                       </p>
                     </div>
@@ -477,7 +477,7 @@ export function NamespaceSettingsPage() {
                     </Badge>
                     {canManage && (
                       <button
-                        className="p-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                        className="p-1 text-[var(--danger)] hover:text-red-700 text-[var(--danger)] dark:hover:text-red-300"
                         onClick={() => setRevokeTarget({ id: invite.id, email: invite.invitee_email ?? '' })}
                       >
                         <Trash2 className="h-4 w-4" />
@@ -495,10 +495,10 @@ export function NamespaceSettingsPage() {
 
           {/* Delete confirmation modal */}
           <Modal open={showDeleteModal} onClose={() => setShowDeleteModal(false)} title={t('namespaces.deleteConfirmTitle')}>
-            <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-sm text-[var(--foreground-secondary)] mb-4">
               <Trans i18nKey="namespaces.deleteConfirmBody" values={{ name: namespace.display_name }} components={{ bold: <strong /> }} />
             </p>
-            <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
+            <p className="text-sm text-[var(--foreground-secondary)] mb-2">
               <Trans i18nKey="namespaces.deleteConfirmType" values={{ slug: namespace.slug }} components={{ bold: <strong /> }} />
             </p>
             <Input
@@ -520,7 +520,7 @@ export function NamespaceSettingsPage() {
 
           {/* Remove member confirmation modal */}
           <Modal open={!!removeTarget} onClose={() => setRemoveTarget(null)} title={t('namespaces.removeMemberConfirmTitle')}>
-            <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-sm text-[var(--foreground-secondary)] mb-4">
               <Trans i18nKey="namespaces.removeMemberConfirmBody" values={{ name: removeTarget?.name }} components={{ bold: <strong /> }} />
             </p>
             <div className="flex justify-end gap-2">
@@ -533,7 +533,7 @@ export function NamespaceSettingsPage() {
 
           {/* Revoke invite confirmation modal */}
           <Modal open={!!revokeTarget} onClose={() => setRevokeTarget(null)} title={t('namespaces.revokeInviteConfirmTitle')}>
-            <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-sm text-[var(--foreground-secondary)] mb-4">
               <Trans i18nKey="namespaces.revokeInviteConfirmBody" values={{ email: revokeTarget?.email }} components={{ bold: <strong /> }} />
             </p>
             <div className="flex justify-end gap-2">
@@ -546,7 +546,7 @@ export function NamespaceSettingsPage() {
 
           {/* Email invite confirmation modal */}
           <Modal open={showEmailInviteModal} onClose={() => setShowEmailInviteModal(false)} title={t('namespaces.emailInviteConfirmTitle')}>
-            <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-sm text-[var(--foreground-secondary)] mb-4">
               <Trans
                 i18nKey="namespaces.emailInviteConfirmBody"
                 values={{ email: emailInput, role: t(`namespaces.roles.${newMemberRole}`) }}
diff --git a/web/src/pages/NotificationsPage.tsx b/web/src/pages/NotificationsPage.tsx
index 00ec77a4..3adb97df 100644
--- a/web/src/pages/NotificationsPage.tsx
+++ b/web/src/pages/NotificationsPage.tsx
@@ -83,19 +83,19 @@ export function NotificationsPage() {
 
   return (
     <div>
-      <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+      <h2 className="text-xl font-semibold text-[var(--foreground)]">
         {t('preferences.notifications.title')}
       </h2>
-      <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+      <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
         {t('preferences.notifications.description')}
       </p>
 
       {/* Global notifications section */}
       <div className="mt-6">
-        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+        <h3 className="text-sm font-semibold text-[var(--foreground)]">
           {t('preferences.notifications.globalSection')}
         </h3>
-        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+        <p className="mt-1 text-xs text-[var(--foreground-secondary)]">
           {t('preferences.notifications.globalDescription')}
         </p>
         <div className="mt-3">
@@ -105,15 +105,15 @@ export function NotificationsPage() {
 
       {/* Per-project notifications section */}
       <div className="mt-8">
-        <h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+        <h3 className="text-sm font-semibold text-[var(--foreground)]">
           {t('preferences.notifications.perProjectSection')}
         </h3>
-        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+        <p className="mt-1 text-xs text-[var(--foreground-secondary)]">
           {t('preferences.notifications.perProjectDescription')}
         </p>
         <div className="mt-3 space-y-3">
           {!projects || projects.length === 0 ? (
-            <p className="text-sm text-gray-500 dark:text-gray-400">
+            <p className="text-sm text-[var(--foreground-secondary)]">
               {t('preferences.notifications.noProjects')}
             </p>
           ) : (
@@ -163,7 +163,7 @@ function GlobalNotificationCard() {
   }
 
   return (
-    <div className="rounded-lg border border-gray-200 dark:border-gray-700 px-4 py-3">
+    <div className="rounded-lg border border-[var(--border)] px-4 py-3">
       <div className="space-y-3">
         {globalNotificationOptions.map((option) => (
           <label
@@ -177,18 +177,18 @@ function GlobalNotificationCard() {
               checked={currentPrefs[option.key]}
               onChange={() => handleToggle(option.key)}
               disabled={!option.enabled}
-              className="mt-0.5 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800"
+              className="mt-0.5 h-4 w-4 rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] disabled:opacity-50 dark:border-[var(--border)] bg-[var(--surface)]"
             />
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                <span className="text-sm font-medium text-[var(--foreground)]">
                   {t(option.labelKey)}
                 </span>
                 {savedId === option.key && (
                   <Check className="h-4 w-4 text-green-500" />
                 )}
               </div>
-              <p className="text-xs text-gray-500 dark:text-gray-400">
+              <p className="text-xs text-[var(--foreground-secondary)]">
                 {t(option.descKey)}
               </p>
             </div>
@@ -231,26 +231,26 @@ function ProjectNotificationCard({
   }
 
   return (
-    <div className="rounded-lg border border-gray-200 dark:border-gray-700">
+    <div className="rounded-lg border border-[var(--border)]">
       <button
         onClick={onToggle}
-        className="flex w-full items-center justify-between px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-800/50 rounded-lg transition-colors"
+        className="flex w-full items-center justify-between px-4 py-3 text-left hover:bg-[var(--surface-hover)]/50 rounded-lg transition-colors"
       >
         <div className="flex items-center gap-2">
           {isExpanded ? (
-            <ChevronDown className="h-4 w-4 text-gray-400" />
+            <ChevronDown className="h-4 w-4 text-[var(--foreground-muted)]" />
           ) : (
-            <ChevronRight className="h-4 w-4 text-gray-400" />
+            <ChevronRight className="h-4 w-4 text-[var(--foreground-muted)]" />
           )}
-          <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+          <span className="text-sm font-medium text-[var(--foreground)]">
             {projectName}
           </span>
-          <span className="text-xs text-gray-400 dark:text-gray-500">{projectKey}</span>
+          <span className="text-xs text-[var(--foreground-muted)]">{projectKey}</span>
         </div>
       </button>
 
       {isExpanded && (
-        <div className="border-t border-gray-200 dark:border-gray-700 px-4 py-3">
+        <div className="border-t border-[var(--border)] px-4 py-3">
           {isLoading ? (
             <div className="flex justify-center py-4">
               <Spinner />
@@ -269,15 +269,15 @@ function ProjectNotificationCard({
                     checked={currentPrefs[option.key]}
                     onChange={() => handleToggle(option.key)}
                     disabled={!option.enabled}
-                    className="mt-0.5 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800"
+                    className="mt-0.5 h-4 w-4 rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] disabled:opacity-50 dark:border-[var(--border)] bg-[var(--surface)]"
                   />
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2">
-                      <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                      <span className="text-sm font-medium text-[var(--foreground)]">
                         {t(option.labelKey)}
                       </span>
                       {!option.enabled && (
-                        <span className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">
+                        <span className="inline-flex items-center rounded-full bg-[var(--surface-tertiary)] px-2 py-0.5 text-xs font-medium text-[var(--foreground-secondary)] bg-[var(--surface)] text-[var(--foreground-muted)]">
                           {t('preferences.notifications.comingSoon')}
                         </span>
                       )}
@@ -285,7 +285,7 @@ function ProjectNotificationCard({
                         <Check className="h-4 w-4 text-green-500" />
                       )}
                     </div>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                    <p className="text-xs text-[var(--foreground-secondary)]">
                       {t(option.descKey)}
                     </p>
                   </div>
diff --git a/web/src/pages/OAuthCallbackPage.tsx b/web/src/pages/OAuthCallbackPage.tsx
index b8bea6af..0d5bb259 100644
--- a/web/src/pages/OAuthCallbackPage.tsx
+++ b/web/src/pages/OAuthCallbackPage.tsx
@@ -50,10 +50,10 @@ export function OAuthCallbackPage() {
 
   if (error) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
+      <div className="min-h-screen flex items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
         <div className="max-w-sm w-full text-center">
-          <p className="text-sm text-red-600 dark:text-red-400 mb-4">{error}</p>
-          <a href="/login" className="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">
+          <p className="text-sm text-[var(--danger)] mb-4">{error}</p>
+          <a href="/login" className="text-[var(--primary)] hover:underline text-sm">
             {t(`login.${provider ?? 'oauth'}.backToLogin`, t('login.oauth.backToLogin'))}
           </a>
         </div>
@@ -62,10 +62,10 @@ export function OAuthCallbackPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
+    <div className="min-h-screen flex items-center justify-center bg-[var(--surface-secondary)] dark:bg-[var(--background)]">
       <div className="text-center">
         <Spinner size="lg" />
-        <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
+        <p className="mt-4 text-sm text-[var(--foreground-secondary)]">
           {t(`login.${provider ?? 'oauth'}.authenticating`, t('login.oauth.authenticating'))}
         </p>
       </div>
diff --git a/web/src/pages/PortalTicketDetailPage.tsx b/web/src/pages/PortalTicketDetailPage.tsx
index b2ec43f5..6c24ce64 100644
--- a/web/src/pages/PortalTicketDetailPage.tsx
+++ b/web/src/pages/PortalTicketDetailPage.tsx
@@ -182,7 +182,7 @@ export function PortalTicketDetailPage() {
   }
 
   if (!ticket) {
-    return <p className="text-red-600 py-8 text-center">{t('workitems.notFound')}</p>
+    return <p className="text-[var(--danger)] py-8 text-center">{t('workitems.notFound')}</p>
   }
 
   const tabs: { key: Tab; label: string }[] = [
@@ -194,7 +194,7 @@ export function PortalTicketDetailPage() {
     <div>
       <button
         onClick={() => navigate(-1)}
-        className="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 mb-4"
+        className="flex items-center gap-1.5 text-sm text-[var(--foreground-secondary)] hover:text-[var(--foreground)] mb-4"
       >
         <ArrowLeft className="h-4 w-4" />
         {t('portal.backToTickets')}
@@ -203,24 +203,24 @@ export function PortalTicketDetailPage() {
       {/* Header row */}
       <div className="mb-6">
         <div className="flex items-center gap-3 mb-2">
-          <span className="text-base font-bold font-mono text-gray-600 dark:text-gray-400">{ticket.display_id}</span>
+          <span className="text-base font-bold font-mono text-[var(--foreground-secondary)]">{ticket.display_id}</span>
           <StatusBadge status={ticket.status} />
           <PriorityBadge priority={ticket.priority} />
           <Tooltip content={t('portal.created')}>
-            <span className="hidden sm:inline-flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500 ml-auto shrink-0">
+            <span className="hidden sm:inline-flex items-center gap-1 text-xs text-[var(--foreground-muted)] ml-auto shrink-0">
               <CalendarPlus className="h-3.5 w-3.5" />
               {new Date(ticket.created_at).toLocaleString()}
             </span>
           </Tooltip>
           <Tooltip content={t('portal.updated')}>
-            <span className="hidden sm:inline-flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500 shrink-0">
+            <span className="hidden sm:inline-flex items-center gap-1 text-xs text-[var(--foreground-muted)] shrink-0">
               <History className="h-3.5 w-3.5" />
               {new Date(ticket.updated_at).toLocaleString()}
             </span>
           </Tooltip>
         </div>
         {/* Mobile metadata line */}
-        <ScrollableRow className="sm:hidden mb-2" contentClassName="gap-3 text-xs text-gray-400 dark:text-gray-500" gradientFrom="from-gray-50 dark:from-gray-900">
+        <ScrollableRow className="sm:hidden mb-2" contentClassName="gap-3 text-xs text-[var(--foreground-muted)]" gradientFrom="from-gray-50 dark:from-gray-900">
           <span className="inline-flex items-center gap-1 shrink-0">
             <CalendarPlus className="h-3.5 w-3.5" />
             {new Date(ticket.created_at).toLocaleString()}
@@ -238,7 +238,7 @@ export function PortalTicketDetailPage() {
               type="text"
               value={titleDraft}
               onChange={(e) => setTitleDraft(e.target.value)}
-              className="w-full text-xl font-semibold rounded-md border border-gray-300 dark:border-gray-600 px-2 py-1 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-800 dark:text-gray-100"
+              className="w-full text-xl font-semibold rounded-md border border-[var(--border)] px-2 py-1 focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] bg-[var(--surface)] text-[var(--foreground)]"
               autoFocus
               onKeyDown={(e) => {
                 if (e.key === 'Enter') saveTitle()
@@ -256,7 +256,7 @@ export function PortalTicketDetailPage() {
           </div>
         ) : (
           <h1
-            className="text-xl font-semibold text-gray-900 dark:text-gray-100 rounded px-1 -mx-1 cursor-pointer border border-transparent hover:border-gray-300 dark:hover:border-gray-600"
+            className="text-xl font-semibold text-[var(--foreground)] rounded px-1 -mx-1 cursor-pointer border border-transparent hover:border-[var(--border)] dark:hover:border-[var(--border)]"
             onClick={startEditTitle}
             onDoubleClick={startEditTitle}
           >
@@ -268,11 +268,11 @@ export function PortalTicketDetailPage() {
         {/* Editable description */}
         <div className="mt-3 group/desc">
           <div className="flex items-center gap-1 mb-1">
-            <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 cursor-pointer" onClick={startEditDesc}>{t('workitems.detail.description')}</h3>
+            <h3 className="text-sm font-medium text-[var(--foreground-secondary)] cursor-pointer" onClick={startEditDesc}>{t('workitems.detail.description')}</h3>
             {descSaved && <Check className="h-4 w-4 text-green-500" />}
             {!editingDesc && (
               <button
-                className="inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-700 transition-colors opacity-0 group-hover/desc:opacity-100"
+                className="inline-flex items-center justify-center w-7 h-7 rounded-md text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:bg-[var(--surface-hover)] transition-colors opacity-0 group-hover/desc:opacity-100"
                 onClick={startEditDesc}
               >
                 <Pencil className="h-3.5 w-3.5" />
@@ -285,7 +285,7 @@ export function PortalTicketDetailPage() {
                 value={descDraft}
                 onChange={(e) => setDescDraft(e.target.value)}
                 rows={4}
-                className="block w-full rounded-md border border-gray-300 dark:border-gray-600 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-gray-100"
+                className="block w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] bg-[var(--surface)] text-[var(--foreground)]"
                 autoFocus
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) saveDesc()
@@ -303,15 +303,15 @@ export function PortalTicketDetailPage() {
             </div>
           ) : (
             <div
-              className="border border-transparent hover:border-gray-300 dark:hover:border-gray-600 rounded p-2 min-h-[2rem] cursor-pointer"
+              className="border border-transparent hover:border-[var(--border)] dark:hover:border-[var(--border)] rounded p-2 min-h-[2rem] cursor-pointer"
               onClick={startEditDesc}
             >
               {ticket.description ? (
-                <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
+                <p className="text-sm text-[var(--foreground)] whitespace-pre-wrap">
                   {ticket.description}
                 </p>
               ) : (
-                <p className="text-sm text-gray-400 dark:text-gray-500 italic">
+                <p className="text-sm text-[var(--foreground-muted)] italic">
                   {t('portal.noDescription')}
                 </p>
               )}
@@ -321,15 +321,15 @@ export function PortalTicketDetailPage() {
       </div>
 
       {/* Tabs */}
-      <div className="border-b border-gray-200 dark:border-gray-700 mb-4 flex items-center justify-between">
+      <div className="border-b border-[var(--border)] mb-4 flex items-center justify-between">
         <nav className="flex gap-6 pr-8 overflow-x-auto scrollbar-none">
           {tabs.map((tab) => (
             <button
               key={tab.key}
               className={`pb-2 text-sm font-medium border-b-2 whitespace-nowrap ${
                 activeTab === tab.key
-                  ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
-                  : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+                  ? 'border-[var(--primary)] text-[var(--primary)]'
+                  : 'border-transparent text-[var(--foreground-secondary)] hover:text-[var(--foreground)] text-[var(--foreground-muted)] dark:hover:text-[var(--foreground-muted)]'
               }`}
               onClick={() => setActiveTab(tab.key)}
             >
@@ -339,7 +339,7 @@ export function PortalTicketDetailPage() {
         </nav>
         <Tooltip content={sortOrder === 'desc' ? t('common.showingNewestFirst') : t('common.showingOldestFirst')}>
           <button
-            className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 pb-2 flex items-center gap-1"
+            className="text-xs text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] pb-2 flex items-center gap-1"
             onClick={() => setSortOrder((s) => (s === 'desc' ? 'asc' : 'desc'))}
           >
             <span className="text-base lg:text-xs">{sortOrder === 'desc' ? '\u2193' : '\u2191'}</span>
@@ -357,7 +357,7 @@ export function PortalTicketDetailPage() {
               onChange={(e) => setCommentBody(e.target.value)}
               rows={3}
               placeholder={t('portal.commentPlaceholder')}
-              className="block w-full rounded-md border border-gray-300 dark:border-gray-600 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
+              className="block w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] bg-[var(--surface)] text-[var(--foreground)] placeholder-[var(--foreground-muted)]"
               onKeyDown={(e) => {
                 if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleAddComment()
               }}
@@ -370,18 +370,18 @@ export function PortalTicketDetailPage() {
           </div>
 
           {(!comments || comments.length === 0) ? (
-            <p className="text-sm text-gray-500 dark:text-gray-400 py-4 text-center">
+            <p className="text-sm text-[var(--foreground-secondary)] py-4 text-center">
               {t('portal.noComments')}
             </p>
           ) : (
             <div className="space-y-4">
               {(sortOrder === 'desc' ? [...comments].reverse() : comments).map((c: PortalComment) => (
-                <div key={c.id} className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
+                <div key={c.id} className="rounded-lg border border-[var(--border)] bg-[var(--surface)] p-4">
                   <div className="flex items-center gap-2 mb-2">
-                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{c.author_name}</span>
-                    <span className="text-xs text-gray-400 dark:text-gray-500">{new Date(c.created_at).toLocaleString()}</span>
+                    <span className="text-sm font-medium text-[var(--foreground)]">{c.author_name}</span>
+                    <span className="text-xs text-[var(--foreground-muted)]">{new Date(c.created_at).toLocaleString()}</span>
                   </div>
-                  <p className="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{c.body}</p>
+                  <p className="text-sm text-[var(--foreground)] whitespace-pre-wrap">{c.body}</p>
                 </div>
               ))}
             </div>
@@ -395,13 +395,13 @@ export function PortalTicketDetailPage() {
           onDrop={handleDrop}
           onDragOver={handleDragOver}
           onDragLeave={handleDragLeave}
-          className={`space-y-4 rounded-lg transition-colors ${dragging ? 'bg-indigo-50 dark:bg-indigo-900/20 ring-2 ring-indigo-400 ring-dashed' : ''}`}
+          className={`space-y-4 rounded-lg transition-colors ${dragging ? 'bg-[var(--primary-muted)] ring-2 ring-indigo-400 ring-dashed' : ''}`}
         >
           {/* Upload form — matches AttachmentList */}
-          <div className="space-y-2 pb-3 border-b border-gray-100 dark:border-gray-700">
+          <div className="space-y-2 pb-3 border-b border-[var(--border)]">
             <input
               type="text"
-              className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-1.5 text-sm"
+              className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-1.5 text-sm"
               placeholder={t('attachments.commentPlaceholder')}
               value={uploadComment}
               onChange={(e) => setUploadComment(e.target.value)}
@@ -410,24 +410,24 @@ export function PortalTicketDetailPage() {
               <input
                 ref={fileInputRef}
                 type="file"
-                className="text-sm text-gray-500 file:mr-2 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-sm file:bg-indigo-50 file:text-indigo-600 dark:file:bg-indigo-900/30 dark:file:text-indigo-400 hover:file:bg-indigo-100"
+                className="text-sm text-[var(--foreground-secondary)] file:mr-2 file:py-1 file:px-3 file:rounded-md file:border-0 file:text-sm file:bg-[var(--primary-muted)] file:text-[var(--primary)]  dark:file:text-[var(--primary)] hover:file:bg-[var(--primary-muted)]"
                 onChange={handleFileSelect}
                 disabled={uploadMutation.isPending}
               />
               {uploadMutation.isPending && <Spinner size="sm" />}
             </div>
             {uploadMutation.isError && (
-              <p className="text-xs text-red-500">{t('attachments.uploadFailed')}</p>
+              <p className="text-xs text-[var(--danger)]">{t('attachments.uploadFailed')}</p>
             )}
           </div>
 
           {/* Attachment list — matches AttachmentList */}
           {(sortOrder === 'desc' ? [...(attachments ?? [])].reverse() : (attachments ?? [])).map((a: PortalAttachment) => (
-            <div key={a.id} className="flex items-start gap-3 border-b border-gray-100 dark:border-gray-700 pb-3">
+            <div key={a.id} className="flex items-start gap-3 border-b border-[var(--border)] pb-3">
               <div className="flex-1 min-w-0">
                 <button
                   onClick={() => handleAttachmentClick(a)}
-                  className="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:underline whitespace-nowrap text-left cursor-pointer"
+                  className="text-sm font-medium text-[var(--primary)] hover:underline whitespace-nowrap text-left cursor-pointer"
                 >
                   {a.filename}
                 </button>
@@ -435,7 +435,7 @@ export function PortalTicketDetailPage() {
                   <div className="flex items-center gap-1 mt-0.5">
                     <input
                       type="text"
-                      className="text-xs border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 rounded px-1.5 py-0.5 flex-1"
+                      className="text-xs border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] rounded px-1.5 py-0.5 flex-1"
                       value={editCommentDraft}
                       onChange={(e) => setEditCommentDraft(e.target.value)}
                       onKeyDown={(e) => {
@@ -447,16 +447,16 @@ export function PortalTicketDetailPage() {
                       }}
                       autoFocus
                     />
-                    <button className="text-xs text-indigo-600 dark:text-indigo-400 hover:underline" onClick={() => { updateCommentMutation.mutate({ attachmentId: a.id, comment: editCommentDraft }); setEditingCommentId(null) }}>
+                    <button className="text-xs text-[var(--primary)] hover:underline" onClick={() => { updateCommentMutation.mutate({ attachmentId: a.id, comment: editCommentDraft }); setEditingCommentId(null) }}>
                       {t('common.save')}
                     </button>
-                    <button className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" onClick={() => setEditingCommentId(null)}>
+                    <button className="text-xs text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]" onClick={() => setEditingCommentId(null)}>
                       {t('common.cancel')}
                     </button>
                   </div>
                 ) : a.comment ? (
                   <p
-                    className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 cursor-default"
+                    className="text-xs text-[var(--foreground-secondary)] mt-0.5 rounded hover:bg-[var(--surface-hover)] cursor-default"
                     onDoubleClick={() => {
                       {
                         setEditingCommentId(a.id)
@@ -467,14 +467,14 @@ export function PortalTicketDetailPage() {
                     {a.comment}
                   </p>
                 ) : null}
-                <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
+                <p className="text-xs text-[var(--foreground-muted)] mt-0.5">
                   {formatFileSize(a.size_bytes)} &middot; {new Date(a.created_at).toLocaleString()}
                 </p>
               </div>
               <div className="flex items-center gap-1 shrink-0">
                 <Tooltip content={t('attachments.editDescription')}>
                   <button
-                    className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                    className="p-1 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] rounded hover:bg-[var(--surface-hover)]"
                     onClick={() => { setEditingCommentId(a.id); setEditCommentDraft(a.comment ?? '') }}
                   >
                     <Pencil className="h-4 w-4" />
@@ -482,7 +482,7 @@ export function PortalTicketDetailPage() {
                 </Tooltip>
                 <Tooltip content={t('preview.download')}>
                   <button
-                    className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                    className="p-1 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] rounded hover:bg-[var(--surface-hover)]"
                     onClick={() => handleDownload(a.download_url, a.filename)}
                   >
                     <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
@@ -492,7 +492,7 @@ export function PortalTicketDetailPage() {
                 </Tooltip>
                 <Tooltip content={t('common.delete')}>
                   <button
-                    className="p-1 text-red-400 hover:text-red-600 dark:hover:text-red-300 rounded hover:bg-gray-100 dark:hover:bg-gray-700"
+                    className="p-1 text-red-400 hover:text-[var(--danger)] dark:hover:text-red-300 rounded hover:bg-[var(--surface-hover)]"
                     onClick={() => setDeleteTarget(a)}
                   >
                     <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
@@ -505,12 +505,12 @@ export function PortalTicketDetailPage() {
           ))}
 
           {(attachments ?? []).length === 0 && (
-            <p className="text-sm text-gray-400 italic">{t('attachments.noAttachments')}</p>
+            <p className="text-sm text-[var(--foreground-muted)] italic">{t('attachments.noAttachments')}</p>
           )}
 
           {/* Delete confirmation modal */}
           <Modal open={!!deleteTarget} onClose={() => setDeleteTarget(null)} title={t('attachments.deleteTitle')}>
-            <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+            <p className="text-sm text-[var(--foreground-secondary)] mb-4">
               {t('attachments.deleteConfirm')} <strong>{deleteTarget?.filename}</strong>
             </p>
             <div className="flex justify-end gap-3">
diff --git a/web/src/pages/PortalTicketListPage.tsx b/web/src/pages/PortalTicketListPage.tsx
index c5bd35b3..9d9d1320 100644
--- a/web/src/pages/PortalTicketListPage.tsx
+++ b/web/src/pages/PortalTicketListPage.tsx
@@ -93,7 +93,7 @@ export function PortalTicketListPage() {
     <div>
       {/* Mobile header */}
       <div className="flex sm:hidden items-center justify-between mb-6">
-        <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+        <h1 className="text-xl font-semibold text-[var(--foreground)]">
           {t('portal.myTickets')}
         </h1>
         {hasPublicQueue && (
@@ -121,14 +121,14 @@ export function PortalTicketListPage() {
             placeholder={t('portal.ticketTitle')}
           />
           <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
               {t('portal.ticketDescription')}
             </label>
             <textarea
               value={description}
               onChange={(e) => setDescription(e.target.value)}
               rows={4}
-              className="block w-full rounded-md border border-gray-300 dark:border-gray-600 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400"
+              className="block w-full rounded-md border border-[var(--border)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] bg-[var(--surface)] text-[var(--foreground)] placeholder-[var(--foreground-muted)]"
               placeholder={t('portal.ticketDescription')}
             />
           </div>
@@ -138,7 +138,7 @@ export function PortalTicketListPage() {
             ))}
           </Select>
           {createError && (
-            <p className="text-sm text-red-600 dark:text-red-400">{createError}</p>
+            <p className="text-sm text-[var(--danger)]">{createError}</p>
           )}
           <div className="flex justify-end gap-3 pt-2">
             <Button type="button" variant="secondary" onClick={() => { setCreateOpen(false); resetForm() }}>
@@ -153,11 +153,11 @@ export function PortalTicketListPage() {
 
       {/* Desktop header + toolbar (single row) */}
       <div className="hidden sm:flex items-center gap-3 mb-4">
-        <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100 whitespace-nowrap">
+        <h1 className="text-xl font-semibold text-[var(--foreground)] whitespace-nowrap">
           {t('portal.myTickets')}
         </h1>
         <div className="relative flex-1 mx-3">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--foreground-muted)]" />
           <Input
             placeholder={t('common.search')}
             value={search}
@@ -165,7 +165,7 @@ export function PortalTicketListPage() {
             className="pl-9"
           />
         </div>
-        <label className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 cursor-pointer select-none whitespace-nowrap">
+        <label className="flex items-center gap-2 text-sm text-[var(--foreground-secondary)] cursor-pointer select-none whitespace-nowrap">
           {t('portal.hideCompleted')}
           <button
             type="button"
@@ -173,7 +173,7 @@ export function PortalTicketListPage() {
             aria-checked={hideCompleted}
             onClick={() => setPreferenceMutation.mutate({ key: 'portal_hide_completed', value: !hideCompleted })}
             className={`relative inline-flex h-5 w-9 shrink-0 rounded-full border-2 border-transparent transition-colors ${
-              hideCompleted ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-gray-600'
+              hideCompleted ? 'bg-[var(--primary)]' : 'bg-[var(--surface-tertiary)] dark:bg-[var(--foreground-secondary)]'
             }`}
           >
             <span className={`pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow ring-0 transition-transform ${
@@ -201,7 +201,7 @@ export function PortalTicketListPage() {
       {/* Mobile toolbar */}
       <div className="flex sm:hidden items-stretch gap-2 mb-4">
         <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--foreground-muted)]" />
           <Input
             placeholder={t('common.search')}
             value={search}
@@ -211,7 +211,7 @@ export function PortalTicketListPage() {
         </div>
         <button
           onClick={() => setSettingsOpen(true)}
-          className="shrink-0 px-2.5 flex items-center rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+          className="shrink-0 px-2.5 flex items-center rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)]"
           aria-label={t('workitems.settings.title')}
         >
           <Settings className="h-5 w-5" />
@@ -230,14 +230,14 @@ export function PortalTicketListPage() {
       {/* Mobile settings modal */}
       <Modal open={settingsOpen} onClose={() => setSettingsOpen(false)} title={t('workitems.settings.title')} position="top" containerClassName="!pt-[10.5rem]">
         <label className="flex items-center justify-between cursor-pointer">
-          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('portal.hideCompleted')}</span>
+          <span className="text-sm font-medium text-[var(--foreground)]">{t('portal.hideCompleted')}</span>
           <button
             type="button"
             role="switch"
             aria-checked={hideCompleted}
             onClick={() => setPreferenceMutation.mutate({ key: 'portal_hide_completed', value: !hideCompleted })}
             className={`relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors ${
-              hideCompleted ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-gray-600'
+              hideCompleted ? 'bg-[var(--primary)]' : 'bg-[var(--surface-tertiary)] dark:bg-[var(--foreground-secondary)]'
             }`}
           >
             <span className={`pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform ${
@@ -252,7 +252,7 @@ export function PortalTicketListPage() {
           <Spinner size="lg" />
         </div>
       ) : tickets.length === 0 ? (
-        <p className="text-sm text-gray-500 dark:text-gray-400 py-8 text-center">
+        <p className="text-sm text-[var(--foreground-secondary)] py-8 text-center">
           {t('portal.noTickets')}
         </p>
       ) : (
@@ -263,15 +263,15 @@ export function PortalTicketListPage() {
               <Link
                 key={ticket.id}
                 to={`${ticket.item_number}`}
-                className="block rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 hover:border-indigo-300 dark:hover:border-indigo-600 transition-colors"
+                className="block rounded-lg border border-[var(--border)] bg-[var(--surface)] p-4 hover:border-[var(--primary-border)] dark:hover:border-[var(--primary-border)] transition-colors"
               >
                 {/* Desktop: single row */}
                 <div className="hidden sm:flex sm:items-center sm:gap-4">
-                  <span className={`shrink-0 font-mono text-sm font-semibold ${isCompleted ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}`}>
+                  <span className={`shrink-0 font-mono text-sm font-semibold ${isCompleted ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground)]'}`}>
                     {ticket.display_id}
                   </span>
-                  <p className={`flex-1 min-w-0 truncate text-sm ${!isCompleted && ticket.description ? 'text-gray-400 dark:text-gray-500' : ''}`}>
-                    <span className={isCompleted ? 'line-through text-gray-400 dark:text-gray-500' : 'font-medium text-gray-900 dark:text-gray-100'}>
+                  <p className={`flex-1 min-w-0 truncate text-sm ${!isCompleted && ticket.description ? 'text-[var(--foreground-muted)]' : ''}`}>
+                    <span className={isCompleted ? 'line-through text-[var(--foreground-muted)]' : 'font-medium text-[var(--foreground)]'}>
                       {ticket.title}
                     </span>
                     {ticket.description && !isCompleted && (
@@ -280,7 +280,7 @@ export function PortalTicketListPage() {
                   </p>
                   <span className="shrink-0 inline-flex"><StatusBadge status={ticket.status} /></span>
                   <span className={`shrink-0 inline-flex ${isCompleted ? 'opacity-40' : ''}`}><PriorityBadge priority={ticket.priority} /></span>
-                  <div className={`shrink-0 flex items-center gap-3 text-xs ${isCompleted ? 'text-gray-300 dark:text-gray-600' : 'text-gray-400 dark:text-gray-500'}`}>
+                  <div className={`shrink-0 flex items-center gap-3 text-xs ${isCompleted ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-muted)]'}`}>
                     <span className="inline-flex items-center gap-1" title={new Date(ticket.created_at).toLocaleString()}>
                       <CalendarPlus className="h-3.5 w-3.5" />
                       {new Date(ticket.created_at).toLocaleDateString()}
@@ -296,12 +296,12 @@ export function PortalTicketListPage() {
                 <div className="sm:hidden">
                   {/* Row 1: Display ID + badges */}
                   <ScrollableRow contentClassName="gap-2" gradientFrom="from-white dark:from-gray-800">
-                    <span className={`shrink-0 font-mono text-sm font-semibold ${isCompleted ? 'text-gray-400 dark:text-gray-500' : 'text-gray-700 dark:text-gray-300'}`}>{ticket.display_id}</span>
+                    <span className={`shrink-0 font-mono text-sm font-semibold ${isCompleted ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground)]'}`}>{ticket.display_id}</span>
                     <span className="shrink-0 inline-flex"><StatusBadge status={ticket.status} /></span>
                     <span className={`shrink-0 inline-flex ${isCompleted ? 'opacity-40' : ''}`}><PriorityBadge priority={ticket.priority} /></span>
                   </ScrollableRow>
                   {/* Row 2: Dates */}
-                  <ScrollableRow className="mt-1.5" contentClassName={`gap-4 text-xs ${isCompleted ? 'text-gray-300 dark:text-gray-600' : 'text-gray-400 dark:text-gray-500'}`} gradientFrom="from-white dark:from-gray-800">
+                  <ScrollableRow className="mt-1.5" contentClassName={`gap-4 text-xs ${isCompleted ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-muted)]'}`} gradientFrom="from-white dark:from-gray-800">
                     <span className="inline-flex items-center gap-1 shrink-0">
                       <CalendarPlus className="h-3.5 w-3.5" />
                       {new Date(ticket.created_at).toLocaleString()}
@@ -312,12 +312,12 @@ export function PortalTicketListPage() {
                     </span>
                   </ScrollableRow>
                   {/* Row 3: Title */}
-                  <p className={`mt-1.5 text-base font-medium truncate ${isCompleted ? 'line-through text-gray-400 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}>
+                  <p className={`mt-1.5 text-base font-medium truncate ${isCompleted ? 'line-through text-[var(--foreground-muted)]' : 'text-[var(--foreground)]'}`}>
                     {ticket.title}
                   </p>
                   {/* Row 4: Description preview */}
                   {ticket.description && (
-                    <p className={`mt-0.5 text-xs truncate ${isCompleted ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'}`}>
+                    <p className={`mt-0.5 text-xs truncate ${isCompleted ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-secondary)]'}`}>
                       {ticket.description}
                     </p>
                   )}
diff --git a/web/src/pages/PreferencesPage.tsx b/web/src/pages/PreferencesPage.tsx
index da6294f1..5ee3602c 100644
--- a/web/src/pages/PreferencesPage.tsx
+++ b/web/src/pages/PreferencesPage.tsx
@@ -34,8 +34,8 @@ export function PreferencesPage() {
             className={({ isActive }) =>
               `flex shrink-0 flex-col items-center gap-1 py-3 px-4 text-xs font-medium transition-colors ${
                 isActive
-                  ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
-                  : 'text-gray-500 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800'
+                  ? 'bg-[var(--primary-muted)] text-[var(--primary)]  dark:text-[var(--primary)]'
+                  : 'text-[var(--foreground-secondary)] hover:bg-[var(--surface-secondary)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)]'
               }`
             }
           >
diff --git a/web/src/pages/ProfilePage.tsx b/web/src/pages/ProfilePage.tsx
index 6074e923..6c8906d2 100644
--- a/web/src/pages/ProfilePage.tsx
+++ b/web/src/pages/ProfilePage.tsx
@@ -106,14 +106,14 @@ export function ProfilePage() {
 
   return (
     <div>
-      <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-6">
+      <h1 className="text-xl font-semibold text-[var(--foreground)] mb-6">
         {t('preferences.profile.title')}
       </h1>
 
       <div className="space-y-8">
         {/* Display Name */}
         <div>
-          <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+          <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
             {t('preferences.profile.displayName')}
           </h2>
           <div className="flex gap-3 items-center max-w-md">
@@ -134,7 +134,7 @@ export function ProfilePage() {
 
         {/* Profile Picture */}
         <div>
-          <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+          <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
             {t('preferences.profile.picture')}
           </h2>
 
@@ -153,7 +153,7 @@ export function ProfilePage() {
               <div
                 onDrop={handleDrop}
                 onDragOver={(e) => e.preventDefault()}
-                className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-4 text-center hover:border-indigo-400 dark:hover:border-indigo-500 transition-colors"
+                className="border-2 border-dashed border-[var(--border)] rounded-lg p-4 text-center hover:border-[var(--primary-border)] dark:hover:border-[var(--primary)] transition-colors"
               >
                 <input
                   ref={fileInputRef}
@@ -171,22 +171,22 @@ export function ProfilePage() {
                   <Upload className="h-4 w-4 mr-1" />
                   {t('preferences.profile.uploadPicture')}
                 </Button>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                <p className="text-xs text-[var(--foreground-secondary)] mt-2">
                   {t('preferences.profile.dragDrop')}
                 </p>
-                <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
+                <p className="text-xs text-[var(--foreground-muted)] mt-1">
                   {t('preferences.profile.fileRequirements')}
                 </p>
               </div>
 
               {avatarError && (
-                <p className="text-sm text-red-600 dark:text-red-400 mt-2">{avatarError}</p>
+                <p className="text-sm text-[var(--danger)] mt-2">{avatarError}</p>
               )}
 
               {user?.avatar_url && (
                 <button
                   onClick={() => setRemoveConfirmOpen(true)}
-                  className="flex items-center gap-1 text-sm text-red-600 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 mt-3"
+                  className="flex items-center gap-1 text-sm text-[var(--danger)] hover:text-red-700 dark:hover:text-red-300 mt-3"
                   disabled={avatarSaving}
                 >
                   <Trash2 className="h-3.5 w-3.5" />
@@ -204,7 +204,7 @@ export function ProfilePage() {
         onClose={() => setCropImage(null)}
         title={t('preferences.profile.cropTitle')}
       >
-        <div className="relative w-full h-64 bg-gray-900">
+        <div className="relative w-full h-64 bg-[var(--background)]">
           {cropImage && (
             <Cropper
               image={cropImage}
@@ -246,7 +246,7 @@ export function ProfilePage() {
         title={t('preferences.profile.removePicture')}
       >
         <div className="p-4">
-          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          <p className="text-sm text-[var(--foreground-secondary)] mb-4">
             {t('preferences.profile.removePictureConfirm')}
           </p>
           <div className="flex justify-end gap-3">
diff --git a/web/src/pages/ProjectDetailPage.tsx b/web/src/pages/ProjectDetailPage.tsx
index 25dfab56..e19a4c25 100644
--- a/web/src/pages/ProjectDetailPage.tsx
+++ b/web/src/pages/ProjectDetailPage.tsx
@@ -70,7 +70,7 @@ export function ProjectDetailPage() {
   if (error || !project) {
     return (
       <div className="max-w-7xl mx-auto px-4 py-8">
-        <p className="text-red-600">{t('projects.notFound')}</p>
+        <p className="text-[var(--danger)]">{t('projects.notFound')}</p>
       </div>
     )
   }
diff --git a/web/src/pages/ProjectListPage.tsx b/web/src/pages/ProjectListPage.tsx
index 1e0352f3..4abbc488 100644
--- a/web/src/pages/ProjectListPage.tsx
+++ b/web/src/pages/ProjectListPage.tsx
@@ -1,7 +1,7 @@
 import { useState, useMemo, useRef, useEffect } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Search, Plus, Check } from 'lucide-react'
+import { Search, Plus, Check, FolderKanban } from 'lucide-react'
 import { getLocalizedError } from '@/utils/apiError'
 import { useKeyboardShortcut } from '@/hooks/useKeyboardShortcut'
 import { useNamespacePath } from '@/hooks/useNamespacePath'
@@ -14,12 +14,14 @@ import { AppSidebar } from '@/components/AppSidebar'
 import { CreateNamespaceModal } from '@/components/CreateNamespaceModal'
 import { NamespaceIcon } from '@/components/NamespaceIcon'
 import { DataTable } from '@/components/ui/DataTable'
-import { Spinner } from '@/components/ui/Spinner'
 import { Button } from '@/components/ui/Button'
 import { Input } from '@/components/ui/Input'
 import { Modal } from '@/components/ui/Modal'
 import { ProjectKeyBadge } from '@/components/ui/ProjectKeyBadge'
 import { Tooltip } from '@/components/ui/Tooltip'
+import { PageHeader } from '@/components/ui/PageHeader'
+import { EmptyState } from '@/components/ui/EmptyState'
+import { LoadingState } from '@/components/ui/LoadingState'
 import type { Column } from '@/components/ui/DataTable'
 import type { Project } from '@/api/projects'
 
@@ -151,7 +153,7 @@ export function ProjectListPage() {
     {
       key: 'name',
       header: t('projects.table.name'),
-      render: (p) => <span className="font-medium text-gray-900 dark:text-gray-100 truncate block">{p.name}</span>,
+      render: (p) => <span className="font-medium text-[var(--foreground)] truncate block">{p.name}</span>,
     },
     {
       key: 'role',
@@ -159,7 +161,7 @@ export function ProjectListPage() {
       width: '10%',
       className: 'text-right',
       render: (p) => (
-        <span className="text-gray-500 dark:text-gray-400 capitalize">
+        <span className="text-[var(--foreground-secondary)] capitalize">
           {p.member_role ? t(`projects.settings.roles.${p.member_role}`) : ''}
         </span>
       ),
@@ -170,8 +172,8 @@ export function ProjectListPage() {
       width: '12%',
       className: 'text-right',
       render: (p) => p.member_role === 'customer'
-        ? <span className="text-gray-300 dark:text-gray-600">&mdash;</span>
-        : <span className="text-gray-500 dark:text-gray-400">{p.open_count}</span>,
+        ? <span className="text-[var(--foreground-secondary)]">&mdash;</span>
+        : <span className="text-[var(--foreground-secondary)]">{p.open_count}</span>,
     },
     {
       key: 'in_progress',
@@ -179,8 +181,8 @@ export function ProjectListPage() {
       width: '12%',
       className: 'text-right',
       render: (p) => p.member_role === 'customer'
-        ? <span className="text-gray-300 dark:text-gray-600">&mdash;</span>
-        : <span className="text-gray-500 dark:text-gray-400">{p.in_progress_count}</span>,
+        ? <span className="text-[var(--foreground-secondary)]">&mdash;</span>
+        : <span className="text-[var(--foreground-secondary)]">{p.in_progress_count}</span>,
     },
     {
       key: 'total',
@@ -188,8 +190,8 @@ export function ProjectListPage() {
       width: '12%',
       className: 'text-right',
       render: (p) => p.member_role === 'customer'
-        ? <span className="text-gray-300 dark:text-gray-600">&mdash;</span>
-        : <span className="text-gray-500 dark:text-gray-400">{p.item_counter}</span>,
+        ? <span className="text-[var(--foreground-secondary)]">&mdash;</span>
+        : <span className="text-[var(--foreground-secondary)]">{p.item_counter}</span>,
     },
     {
       key: 'members',
@@ -197,8 +199,8 @@ export function ProjectListPage() {
       width: '12%',
       className: 'text-right',
       render: (p) => p.member_role === 'customer'
-        ? <span className="text-gray-300 dark:text-gray-600">&mdash;</span>
-        : <span className="text-gray-500 dark:text-gray-400">{p.member_count}</span>,
+        ? <span className="text-[var(--foreground-secondary)]">&mdash;</span>
+        : <span className="text-[var(--foreground-secondary)]">{p.member_count}</span>,
     },
   ]
 
@@ -228,8 +230,8 @@ export function ProjectListPage() {
       <div className={`${containerClass(true)} py-6`}>
         <div className={`flex transition-all duration-200 ${collapsed ? 'gap-4' : 'gap-8'}`}>
           <AppSidebar />
-          <div className="flex-1 min-w-0 flex items-center justify-center py-24">
-            <Spinner size="lg" />
+          <div className="flex-1 min-w-0">
+            <LoadingState />
           </div>
         </div>
       </div>
@@ -242,7 +244,7 @@ export function ProjectListPage() {
         <div className={`flex transition-all duration-200 ${collapsed ? 'gap-4' : 'gap-8'}`}>
           <AppSidebar />
           <div className="flex-1 min-w-0">
-            <p className="text-red-600">{t('projects.loadError')}</p>
+            <p className="text-[var(--danger)]">{t('projects.loadError')}</p>
           </div>
         </div>
       </div>
@@ -254,14 +256,14 @@ export function ProjectListPage() {
       <div className={`flex transition-all duration-200 ${collapsed ? 'gap-4' : 'gap-8'}`}>
         <AppSidebar />
         <div className="flex-1 min-w-0">
-      <div className="flex items-center justify-between mb-4">
-        <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('projects.title')}</h1>
-        {!isCustomerOnly && <Button onClick={openCreateModal} className="border border-transparent">{t('projects.new')}</Button>}
-      </div>
+      <PageHeader
+        title={t('projects.title')}
+        actions={!isCustomerOnly ? <Button onClick={openCreateModal} className="border border-transparent">{t('projects.new')}</Button> : undefined}
+      />
 
       {/* Search */}
-      <div className="relative mb-4">
-        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+      <div className="relative mb-6">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--foreground-muted)]" />
         <Input
           ref={searchRef}
           value={searchInput}
@@ -275,7 +277,12 @@ export function ProjectListPage() {
       {/* Mobile card view */}
       <div className="sm:hidden space-y-3">
         {projectList.length === 0 ? (
-          <p className="text-center text-sm text-gray-500 dark:text-gray-400 py-12">{t('projects.empty')}</p>
+          <EmptyState
+            icon={FolderKanban}
+            title={t('projects.empty')}
+            description={!isCustomerOnly ? t('projects.emptyDescription') : undefined}
+            action={!isCustomerOnly ? <Button onClick={openCreateModal}>{t('projects.new')}</Button> : undefined}
+          />
         ) : (
           projectList.map((proj) => {
             const isCustomer = proj.member_role === 'customer'
@@ -283,19 +290,19 @@ export function ProjectListPage() {
               <button
                 key={proj.key}
                 onClick={() => navigate(p(`/projects/${proj.key}${isCustomer ? '/support' : ''}`))}
-                className="w-full text-left bg-white dark:bg-gray-800 rounded-lg shadow p-4 active:bg-gray-50 dark:active:bg-gray-700 transition-colors"
+                className="w-full text-left bg-[var(--surface)] rounded-lg border border-[var(--border)] p-4 active:bg-[var(--surface-secondary)] dark:active:bg-[var(--surface-secondary)] transition-colors"
               >
                 <div className="flex items-center gap-3">
                   <ProjectKeyBadge>{proj.key}</ProjectKeyBadge>
-                  <span className="font-medium text-gray-900 dark:text-gray-100 truncate flex-1">{proj.name}</span>
+                  <span className="font-medium text-[var(--foreground)] truncate flex-1">{proj.name}</span>
                   {proj.member_role && (
-                    <span className="text-xs text-gray-400 dark:text-gray-500 capitalize shrink-0">
+                    <span className="text-xs text-[var(--foreground-muted)] capitalize shrink-0">
                       {t(`projects.settings.roles.${proj.member_role}`)}
                     </span>
                   )}
                 </div>
                 {!isCustomer && (
-                  <div className="flex items-center gap-4 mt-2.5 ml-1 text-xs text-gray-500 dark:text-gray-400">
+                  <div className="flex items-center gap-4 mt-2.5 ml-1 text-xs text-[var(--foreground-secondary)]">
                     <Tooltip content={t('projects.table.open')}>
                       <span className="inline-flex items-center gap-1">
                         <IconOpen className="w-3.5 h-3.5" />
@@ -329,7 +336,7 @@ export function ProjectListPage() {
       </div>
 
       {/* Desktop table view */}
-      <div className="hidden sm:block bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
+      <div className="hidden sm:block bg-[var(--surface)] rounded-lg border border-[var(--border)] overflow-hidden">
         <DataTable
           columns={columns}
           data={projectList}
@@ -346,7 +353,7 @@ export function ProjectListPage() {
           <span className="flex items-center gap-3">
             {t('projects.create.title')}
             {!isAdmin && maxProjects > 0 && (
-              <span className={`text-sm font-normal ${atLimit ? 'text-amber-500 dark:text-amber-400' : 'text-gray-500 dark:text-gray-400'}`}>
+              <span className={`text-sm font-normal ${atLimit ? 'text-amber-500 dark:text-amber-400' : 'text-[var(--foreground-secondary)]'}`}>
                 {t('projects.limitCounter', { count: projectCount, limit: maxProjects })}
               </span>
             )}
@@ -374,7 +381,7 @@ export function ProjectListPage() {
             required
             disabled={atLimit}
           />
-          <p className="text-xs text-gray-400 dark:text-gray-500 -mt-3">{t('projects.create.keyHint')}</p>
+          <p className="text-xs text-[var(--foreground-muted)] -mt-3">{t('projects.create.keyHint')}</p>
           <Input
             label={t('projects.create.description')}
             value={description}
@@ -384,23 +391,23 @@ export function ProjectListPage() {
           />
           {showSwitcher && (
             <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
                 {t('namespaces.namespace')}
               </label>
               <button
                 type="button"
                 onClick={() => setShowNsPicker(true)}
                 disabled={atLimit}
-                className="w-full flex items-center gap-2.5 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 px-3 py-2 text-sm text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                className="w-full flex items-center gap-2.5 rounded-md border border-[var(--border)] bg-[var(--surface)] px-3 py-2 text-sm text-left hover:bg-[var(--surface-hover)] transition-colors"
               >
                 <NamespaceIcon icon={selectedNs?.icon ?? 'globe'} color={selectedNs?.color} className="h-4 w-4 shrink-0" />
-                <span className="flex-1 truncate text-gray-900 dark:text-gray-100">
+                <span className="flex-1 truncate text-[var(--foreground)]">
                   {selectedNs?.display_name ?? t('namespaces.selectNamespace')}
                 </span>
               </button>
             </div>
           )}
-          {formError && <p className="text-sm text-red-600 dark:text-red-400">{formError}</p>}
+          {formError && <p className="text-sm text-[var(--danger)]">{formError}</p>}
           <div className="flex justify-end gap-3 pt-2">
             <Button type="button" variant="secondary" onClick={() => setShowCreate(false)}>{t('common.cancel')}</Button>
             <Button type="submit" disabled={atLimit || createMutation.isPending || !name.trim() || !key.trim()}>
@@ -426,27 +433,27 @@ export function ProjectListPage() {
               }}
               className={`w-full text-left px-3 py-3 rounded-md text-sm flex items-center gap-3 ${
                 ns.slug === selectedNamespace
-                  ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300'
-                  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                  ? 'bg-[var(--primary-muted)] text-[var(--primary)]'
+                  : 'text-[var(--foreground)] hover:bg-[var(--surface-hover)]'
               }`}
             >
               <NamespaceIcon icon={ns.icon ?? 'globe'} color={ns.color} className="h-5 w-5 shrink-0" />
               <div className="min-w-0 flex-1">
                 <div className="font-medium">{ns.display_name}</div>
-                <p className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
+                <p className="text-xs text-[var(--foreground-muted)] mt-0.5">
                   {ns.is_default ? t('namespaces.publicHint') : t('namespaces.customHint')}
                 </p>
               </div>
               {ns.slug === selectedNamespace && (
-                <Check className="h-4 w-4 shrink-0 text-indigo-600 dark:text-indigo-400" />
+                <Check className="h-4 w-4 shrink-0 text-[var(--primary)]" />
               )}
             </button>
           ))}
         </div>
-        <div className="border-t border-gray-100 dark:border-gray-700 mt-3 pt-3">
+        <div className="border-t border-[var(--border)] mt-3 pt-3">
           <button
             onClick={() => setShowNsCreate(true)}
-            className="w-full text-left px-3 py-2.5 rounded-md text-sm text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-3"
+            className="w-full text-left px-3 py-2.5 rounded-md text-sm text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)] flex items-center gap-3"
           >
             <Plus className="h-5 w-5" />
             {t('namespaces.createNew')}
diff --git a/web/src/pages/ProjectOverviewPage.tsx b/web/src/pages/ProjectOverviewPage.tsx
index 1f43c5dc..4fd2c541 100644
--- a/web/src/pages/ProjectOverviewPage.tsx
+++ b/web/src/pages/ProjectOverviewPage.tsx
@@ -37,10 +37,10 @@ export function ProjectOverviewPage() {
 
   const panels = [
     { key: 'task', label: t('projects.overview.tasks'), color: 'text-blue-700 dark:text-blue-400', iconBg: 'bg-blue-100 dark:bg-blue-900/30' },
-    { key: 'ticket', label: t('projects.overview.tickets'), color: 'text-indigo-700 dark:text-indigo-300', iconBg: 'bg-indigo-100 dark:bg-indigo-900/30' },
-    { key: 'bug', label: t('projects.overview.bugs'), color: 'text-red-700 dark:text-red-400', iconBg: 'bg-red-100 dark:bg-red-900/30' },
+    { key: 'ticket', label: t('projects.overview.tickets'), color: 'text-[var(--primary)]', iconBg: 'bg-[var(--primary-muted)] ' },
+    { key: 'bug', label: t('projects.overview.bugs'), color: 'text-red-700 text-[var(--danger)]', iconBg: 'bg-red-100 dark:bg-red-900/30' },
     { key: 'other', label: t('projects.overview.other'), color: 'text-yellow-700 dark:text-yellow-400', iconBg: 'bg-yellow-100 dark:bg-yellow-900/30' },
-    { key: 'total', label: t('projects.overview.total'), color: 'text-gray-900 dark:text-gray-100', iconBg: 'bg-gray-200 dark:bg-gray-600' },
+    { key: 'total', label: t('projects.overview.total'), color: 'text-[var(--foreground)]', iconBg: 'bg-[var(--surface-tertiary)] dark:bg-[var(--foreground-secondary)]' },
   ]
 
   const openStatusNames = useMemo(
@@ -116,8 +116,8 @@ export function ProjectOverviewPage() {
             className={({ isActive }) =>
               `flex flex-1 flex-col items-center gap-1 py-3 text-xs font-medium transition-colors shrink-0 min-w-[3.5rem] ${
                 isActive
-                  ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
-                  : 'text-gray-500 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800'
+                  ? 'bg-[var(--primary-muted)] text-[var(--primary)]  dark:text-[var(--primary)]'
+                  : 'text-[var(--foreground-secondary)] hover:bg-[var(--surface-secondary)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)]'
               }`
             }
           >
@@ -128,7 +128,7 @@ export function ProjectOverviewPage() {
       </nav>
 
       <div>
-        <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+        <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
           {t('projects.overview.openWorkItems')}
         </h2>
         {loading ? (
@@ -141,11 +141,11 @@ export function ProjectOverviewPage() {
               <button
                 key={panel.key}
                 onClick={() => navigateToItems(panel.key)}
-                className="rounded-lg border border-gray-200 dark:border-gray-700 p-3 text-left hover:border-indigo-300 dark:hover:border-indigo-600 hover:shadow-md transition-all cursor-pointer"
+                className="rounded-lg border border-[var(--border)] p-3 text-left hover:border-[var(--primary-border)] dark:hover:border-[var(--primary-border)] hover:bg-[var(--surface-hover)]/50 transition-colors cursor-pointer"
               >
                 <div className="flex items-center gap-1.5 mb-1">
                   <span className={`inline-block h-2 w-2 rounded-full ${panel.iconBg}`} />
-                  <span className="text-xs font-medium text-gray-600 dark:text-gray-400">
+                  <span className="text-xs font-medium text-[var(--foreground-secondary)]">
                     {panel.label}
                   </span>
                 </div>
@@ -159,45 +159,45 @@ export function ProjectOverviewPage() {
       <StatsTimelineChart projectKey={projectKey ?? ''} />
 
       <div>
-        <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+        <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
           {t('projects.overview.about')}
         </h2>
-        <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-5">
+        <div className="rounded-lg border border-[var(--border)] p-5">
           {project?.description ? (
-            <div className="prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300 break-words">
+            <div className="prose prose-sm dark:prose-invert max-w-none text-[var(--foreground)] break-words">
               <Markdown remarkPlugins={[remarkGfm]}>{project.description}</Markdown>
             </div>
           ) : (
-            <p className="text-sm text-gray-400 dark:text-gray-500 italic">{t('projects.overview.noDescription')}</p>
+            <p className="text-sm text-[var(--foreground-muted)] italic">{t('projects.overview.noDescription')}</p>
           )}
         </div>
       </div>
 
       <div>
-        <h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">
+        <h2 className="text-sm font-medium text-[var(--foreground-secondary)] uppercase tracking-wide mb-3">
           {t('projects.overview.members')}
         </h2>
-        <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+        <div className="rounded-lg border border-[var(--border)] p-4">
           {membersLoading ? (
             <Spinner />
           ) : !members || members.length === 0 ? (
-            <p className="text-sm text-gray-400 dark:text-gray-500">{t('projects.overview.noMembers')}</p>
+            <p className="text-sm text-[var(--foreground-muted)]">{t('projects.overview.noMembers')}</p>
           ) : (
             <div className="flex flex-wrap gap-3 items-center">
               {members.map((member) => (
                 <div key={member.user_id} className="flex items-center gap-2">
                   <Avatar name={member.display_name} avatarUrl={member.avatar_url} size="sm" />
                   <div className="min-w-0">
-                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                    <p className="text-sm font-medium text-[var(--foreground)] truncate">
                       {member.display_name}
-                      {member.user_id === user?.id && <span className="ml-1 text-xs text-gray-400">({t('common.you')})</span>}
+                      {member.user_id === user?.id && <span className="ml-1 text-xs text-[var(--foreground-muted)]">({t('common.you')})</span>}
                     </p>
-                    <p className="text-xs text-gray-500 dark:text-gray-400 capitalize">{member.role}</p>
+                    <p className="text-xs text-[var(--foreground-secondary)] capitalize">{member.role}</p>
                   </div>
                 </div>
               ))}
               {membersTotalCount != null && membersTotalCount > members.length && (
-                <span className="text-sm text-gray-500 dark:text-gray-400">
+                <span className="text-sm text-[var(--foreground-secondary)]">
                   {t('projects.settings.hiddenMembers', { count: membersTotalCount - members.length })}
                 </span>
               )}
diff --git a/web/src/pages/ProjectSettingsPage.tsx b/web/src/pages/ProjectSettingsPage.tsx
index 17760700..5764ae5d 100644
--- a/web/src/pages/ProjectSettingsPage.tsx
+++ b/web/src/pages/ProjectSettingsPage.tsx
@@ -133,12 +133,12 @@ function RoleSelect({
         type="button"
         onClick={() => !disabled && setOpen(!open)}
         disabled={disabled}
-        className={`flex items-center gap-1.5 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap ${sizeClasses}`}
+        className={`flex items-center gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap ${sizeClasses}`}
         ref={buttonRef}
       >
         <span>{t(`projects.settings.roles.${value}`)}</span>
-        <Info className="h-3 w-3 text-gray-400 shrink-0" />
-        <ChevronDown className="h-3 w-3 text-gray-400 shrink-0" />
+        <Info className="h-3 w-3 text-[var(--foreground-muted)] shrink-0" />
+        <ChevronDown className="h-3 w-3 text-[var(--foreground-muted)] shrink-0" />
       </button>
       {open && createPortal(
         <RoleMenu
@@ -183,7 +183,7 @@ function RoleMenu({
   return (
     <div
       ref={menuRef}
-      className="fixed z-[9999] w-72 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1 max-h-80 overflow-y-auto"
+      className="fixed z-[9999] w-72 rounded-md border border-[var(--border)] bg-[var(--surface)] shadow-lg py-1 max-h-80 overflow-y-auto"
       style={pos}
     >
       {allRoles.map((role) => (
@@ -193,15 +193,15 @@ function RoleMenu({
           onClick={() => { onChange(role); setOpen(false) }}
           className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2 ${
             role === value
-              ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300'
-              : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+              ? 'bg-[var(--primary-muted)] text-[var(--primary)]'
+              : 'text-[var(--foreground)] hover:bg-[var(--surface-hover)]'
           }`}
         >
           <div className="flex-1 min-w-0">
             <div className="font-medium">{t(`projects.settings.roles.${role}`)}</div>
-            <div className="text-xs text-gray-500 dark:text-gray-400">{t(`projects.settings.roles.${role}.description`)}</div>
+            <div className="text-xs text-[var(--foreground-secondary)]">{t(`projects.settings.roles.${role}.description`)}</div>
           </div>
-          <Info className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+          <Info className="h-3.5 w-3.5 text-[var(--foreground-muted)] shrink-0" />
         </button>
       ))}
     </div>
@@ -223,6 +223,16 @@ export function ProjectSettingsPage() {
   const updateRoleMutation = useUpdateMemberRole(projectKey ?? '')
   const removeMemberMutation = useRemoveMember(projectKey ?? '')
   const { data: invites } = useInvites(projectKey ?? '')
+  const pendingEmailInvites = useMemo(
+    () =>
+      invites?.filter(
+        (inv) =>
+          inv.invitee_email &&
+          (inv.max_uses === 0 || inv.use_count < inv.max_uses) &&
+          (!inv.expires_at || new Date(inv.expires_at) >= new Date()),
+      ) ?? [],
+    [invites],
+  )
   const createInviteMutation = useCreateInvite(projectKey ?? '')
   const deleteInviteMutation = useDeleteInvite(projectKey ?? '')
   const assignableRoles = (project?.available_roles ?? []).filter((r: string) => r !== 'owner')
@@ -257,6 +267,7 @@ export function ProjectSettingsPage() {
   const [transferTarget, setTransferTarget] = useState('')
   const [transferConfirm, setTransferConfirm] = useState('')
   const [transferDropdownOpen, setTransferDropdownOpen] = useState(false)
+  const [transferMenuPos, setTransferMenuPos] = useState({ top: 0, left: 0, width: 0 })
   const [transferError, setTransferError] = useState('')
   const transferDropdownRef = useRef<HTMLDivElement>(null)
   const transferButtonRef = useRef<HTMLButtonElement>(null)
@@ -471,23 +482,12 @@ export function ProjectSettingsPage() {
 
   const memberIds = members?.map((m) => m.user_id) ?? []
 
-  const pendingEmailInvites = useMemo(
-    () =>
-      invites?.filter(
-        (inv) =>
-          inv.invitee_email &&
-          (inv.max_uses === 0 || inv.use_count < inv.max_uses) &&
-          (!inv.expires_at || new Date(inv.expires_at) >= new Date()),
-      ) ?? [],
-    [invites],
-  )
-
   return (
     <div className="max-w-3xl space-y-6">
       {/* Page Header */}
       <div>
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">{t('projects.settings.title')}</h2>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('projects.settings.subtitle')}</p>
+        <h2 className="text-xl font-semibold text-[var(--foreground)]">{t('projects.settings.title')}</h2>
+        <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('projects.settings.subtitle')}</p>
       </div>
 
       <Tabs tabs={tabs} activeTab={effectiveTab} onTabChange={setActiveTab} />
@@ -498,7 +498,7 @@ export function ProjectSettingsPage() {
           <form onSubmit={handleSave} className="space-y-4">
             <div className="flex gap-4">
               <div className="w-[30%]">
-                <Input label={t('projects.settings.projectKey')} value={project.key} disabled className="bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed" />
+                <Input label={t('projects.settings.projectKey')} value={project.key} disabled className="bg-[var(--surface-secondary)] text-[var(--foreground-secondary)] cursor-not-allowed" />
               </div>
               <div className="w-[70%]">
                 <Input
@@ -512,14 +512,14 @@ export function ProjectSettingsPage() {
             </div>
 
             <div>
-              <label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+              <label htmlFor="description" className="block text-sm font-medium text-[var(--foreground)] mb-1">
                 {t('common.description')}
               </label>
               <textarea
                 ref={descRef}
                 id="description"
                 rows={12}
-                className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 disabled:opacity-60 disabled:cursor-not-allowed"
+                className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] disabled:opacity-60 disabled:cursor-not-allowed"
                 value={currentDescription}
                 onChange={(e) => setDescription(e.target.value)}
                 onKeyDown={descMention.onMentionKeyDown}
@@ -533,7 +533,7 @@ export function ProjectSettingsPage() {
               />
             </div>
 
-            {saveError && <p className="text-sm text-red-600 dark:text-red-400">{saveError}</p>}
+            {saveError && <p className="text-sm text-[var(--danger)]">{saveError}</p>}
 
             {canManageMembers && (
               <div className="flex items-center gap-2">
@@ -551,13 +551,13 @@ export function ProjectSettingsPage() {
           {canManageMembers && (
             <div className="border border-red-300 dark:border-red-800 rounded-lg">
               <div className="px-4 py-3 border-b border-red-300 dark:border-red-800">
-                <h3 className="text-base font-semibold text-red-600">{t('projects.settings.dangerZone')}</h3>
+                <h3 className="text-base font-semibold text-[var(--danger)]">{t('projects.settings.dangerZone')}</h3>
               </div>
               {hasMultipleNamespaces && (
                 <div className="p-4 flex items-center justify-between border-b border-red-200 dark:border-red-900">
                   <div>
-                    <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{t('projects.settings.transferNamespace')}</p>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('projects.settings.transferNamespaceDescription')}</p>
+                    <p className="text-sm font-medium text-[var(--foreground)]">{t('projects.settings.transferNamespace')}</p>
+                    <p className="text-sm text-[var(--foreground-secondary)]">{t('projects.settings.transferNamespaceDescription')}</p>
                   </div>
                   <Button variant="danger" className="min-w-[7.5rem] h-10" onClick={() => { setTransferTarget(''); setTransferConfirm(''); setTransferError(''); setShowTransferModal(true) }}>
                     <ArrowRightLeft className="h-4 w-4 mr-1" />
@@ -567,8 +567,8 @@ export function ProjectSettingsPage() {
               )}
               <div className="p-4 flex items-center justify-between">
                 <div>
-                  <p className="text-sm font-medium text-gray-900 dark:text-gray-100">{t('projects.settings.deleteThisProject')}</p>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                  <p className="text-sm font-medium text-[var(--foreground)]">{t('projects.settings.deleteThisProject')}</p>
+                  <p className="text-sm text-[var(--foreground-secondary)]">
                     {t('projects.settings.deleteWarning')}
                   </p>
                 </div>
@@ -584,14 +584,14 @@ export function ProjectSettingsPage() {
       {/* ───── Users tab ───── */}
       {effectiveTab === 'users' && (
         <div className="space-y-6">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('projects.settings.membersDescription')}</p>
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('projects.settings.membersDescription')}</p>
 
-          {memberError && <p className="text-sm text-red-600 dark:text-red-400">{memberError}</p>}
+          {memberError && <p className="text-sm text-[var(--danger)]">{memberError}</p>}
 
           {/* Add user form */}
           {canManageMembers && (
-            <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3">
-              <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">{t('projects.settings.addUser')}</h3>
+            <div className="border border-[var(--border)] rounded-lg p-4 space-y-3">
+              <h3 className="text-sm font-medium text-[var(--foreground)]">{t('projects.settings.addUser')}</h3>
               <div className="flex gap-2 items-start">
                 <UserSearchInput
                   excludeUserIds={[...memberIds, ...stagedUsers.map((u) => u.id)]}
@@ -620,14 +620,14 @@ export function ProjectSettingsPage() {
                   {stagedUsers.map((u) => (
                     <span
                       key={u.id}
-                      className="inline-flex items-center gap-2 rounded-full bg-gray-100 dark:bg-gray-700 px-3 py-1 text-xs text-gray-800 dark:text-gray-200"
+                      className="inline-flex items-center gap-2 rounded-full bg-[var(--surface-secondary)] px-3 py-1 text-xs text-[var(--foreground)]"
                     >
                       <Avatar name={u.display_name} avatarUrl={u.avatar_url} size="xs" />
                       <span className="font-medium">{u.display_name}</span>
-                      <span className="text-gray-500 dark:text-gray-400 hidden sm:inline">{u.email}</span>
+                      <span className="text-[var(--foreground-secondary)] hidden sm:inline">{u.email}</span>
                       <button
                         type="button"
-                        className="ml-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+                        className="ml-1 text-[var(--foreground-muted)] hover:text-[var(--foreground)]"
                         onClick={() => handleUnstageUser(u.id)}
                         aria-label={t('common.remove')}
                       >
@@ -642,7 +642,7 @@ export function ProjectSettingsPage() {
 
           {/* Member list */}
           {((members && members.length > 0) || pendingEmailInvites.length > 0) && (
-            <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+            <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
               {members?.map((member) => {
                 const isSelf = member.user_id === user?.id
                 const memberIsOwner = member.role === 'owner'
@@ -655,11 +655,11 @@ export function ProjectSettingsPage() {
                     <div className="flex items-center gap-3 min-w-0">
                       <Avatar name={member.display_name} avatarUrl={member.avatar_url} size="sm" />
                       <div className="min-w-0">
-                        <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
+                        <p className="text-sm font-medium text-[var(--foreground)] truncate">
                           {member.display_name}
-                          {isSelf && <span className="ml-1 text-xs text-gray-400">({t('common.you')})</span>}
+                          {isSelf && <span className="ml-1 text-xs text-[var(--foreground-muted)]">({t('common.you')})</span>}
                         </p>
-                        <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{member.email}</p>
+                        <p className="text-xs text-[var(--foreground-secondary)] truncate">{member.email}</p>
                       </div>
                     </div>
                     <div className="flex items-center gap-2 flex-shrink-0 ml-auto">
@@ -682,7 +682,7 @@ export function ProjectSettingsPage() {
                           </Tooltip>
                           <Tooltip content={isLastOwner ? t('projects.settings.lastOwnerTooltip') : undefined}>
                             <button
-                              className={`p-1 ${isLastOwner ? 'text-gray-300 dark:text-gray-600 cursor-not-allowed' : 'text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300'}`}
+                              className={`p-1 ${isLastOwner ? 'text-[var(--foreground-secondary)] cursor-not-allowed' : 'text-[var(--danger)] hover:text-red-700 text-[var(--danger)] dark:hover:text-red-300'}`}
                               onClick={() => !isLastOwner && setRemoveTarget({ userId: member.user_id, name: member.display_name })}
                               disabled={isLastOwner}
                             >
@@ -700,18 +700,18 @@ export function ProjectSettingsPage() {
                 )
               })}
               {members && membersTotalCount != null && membersTotalCount > members.length && (
-                <div className="py-2 text-sm text-gray-500 dark:text-gray-400 pl-[60px]">
+                <div className="py-2 text-sm text-[var(--foreground-secondary)] pl-[60px]">
                   {t('projects.settings.hiddenMembers', { count: membersTotalCount - members.length })}
                 </div>
               )}
               {pendingEmailInvites.map((invite) => (
                 <div key={invite.id} className="flex flex-wrap items-center justify-between gap-2 p-3">
                   <div className="flex items-center gap-3 min-w-0">
-                    <div className="h-8 w-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center flex-shrink-0">
-                      <Mail className="h-4 w-4 text-gray-400 dark:text-gray-500" />
+                    <div className="h-8 w-8 rounded-full bg-[var(--surface-secondary)] flex items-center justify-center flex-shrink-0">
+                      <Mail className="h-4 w-4 text-[var(--foreground-muted)]" />
                     </div>
                     <div className="min-w-0">
-                      <p className="text-sm text-gray-500 dark:text-gray-400 truncate">
+                      <p className="text-sm text-[var(--foreground-secondary)] truncate">
                         {invite.invitee_email}
                       </p>
                     </div>
@@ -724,7 +724,7 @@ export function ProjectSettingsPage() {
                           {t(`projects.settings.roles.${invite.role}`)}
                         </Badge>
                         <button
-                          className="p-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                          className="p-1 text-[var(--danger)] hover:text-red-700 text-[var(--danger)] dark:hover:text-red-300"
                           onClick={() => setRevokeTarget({ id: invite.id, code: invite.code })}
                         >
                           <Trash2 className="h-4 w-4" />
@@ -749,18 +749,18 @@ export function ProjectSettingsPage() {
       {/* ───── Invites tab ───── */}
       {effectiveTab === 'invites' && (
         <div className="space-y-6">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('projects.settings.invitesDescription')}</p>
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('projects.settings.invitesDescription')}</p>
 
-          {inviteError && <p className="text-sm text-red-600 dark:text-red-400">{inviteError}</p>}
+          {inviteError && <p className="text-sm text-[var(--danger)]">{inviteError}</p>}
 
           {/* Create invite form */}
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3">
-            <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">{t('projects.settings.createInvite')}</h3>
+          <div className="border border-[var(--border)] rounded-lg p-4 space-y-3">
+            <h3 className="text-sm font-medium text-[var(--foreground)]">{t('projects.settings.createInvite')}</h3>
             <div className="flex gap-2 items-end flex-wrap">
               <div>
-                <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{t('projects.settings.inviteRole')}</label>
+                <label className="block text-xs font-medium text-[var(--foreground-secondary)] mb-1">{t('projects.settings.inviteRole')}</label>
                 <select
-                  className="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  className="rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                   value={inviteRole}
                   onChange={(e) => {
                     const role = e.target.value
@@ -777,9 +777,9 @@ export function ProjectSettingsPage() {
                 </select>
               </div>
               <div>
-                <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{t('projects.settings.inviteExpiration')}</label>
+                <label className="block text-xs font-medium text-[var(--foreground-secondary)] mb-1">{t('projects.settings.inviteExpiration')}</label>
                 <select
-                  className="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  className="rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                   value={inviteExpiration}
                   onChange={(e) => setInviteExpiration(e.target.value)}
                 >
@@ -791,11 +791,11 @@ export function ProjectSettingsPage() {
                 </select>
               </div>
               <div>
-                <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{t('projects.settings.inviteMaxUses')}</label>
+                <label className="block text-xs font-medium text-[var(--foreground-secondary)] mb-1">{t('projects.settings.inviteMaxUses')}</label>
                 <input
                   type="number"
                   min="0"
-                  className="w-24 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                  className="w-24 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                   value={inviteMaxUses}
                   onChange={(e) => setInviteMaxUses(e.target.value)}
                   placeholder={t('projects.settings.inviteMaxUsesPlaceholder')}
@@ -840,7 +840,7 @@ export function ProjectSettingsPage() {
 
           {/* Invite list */}
           {invites && invites.length > 0 ? (
-            <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+            <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
               {invites.map((invite) => {
                 const isExpired = invite.expires_at && new Date(invite.expires_at) < new Date()
 
@@ -849,16 +849,16 @@ export function ProjectSettingsPage() {
                     <div className="flex flex-wrap items-center gap-3">
                       <TruncatedName
                         name={invite.created_by_name}
-                        className="text-xs font-semibold text-gray-900 dark:text-gray-100 whitespace-nowrap truncate w-[80px] flex-shrink-0 inline-block"
+                        className="text-xs font-semibold text-[var(--foreground)] whitespace-nowrap truncate w-[80px] flex-shrink-0 inline-block"
                       />
-                      <code className="text-xs bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded text-gray-700 dark:text-gray-300">
+                      <code className="text-xs bg-[var(--surface-secondary)] px-2 py-0.5 rounded text-[var(--foreground)]">
                         {invite.code}
                       </code>
                       <Badge color={ROLE_BADGE_COLORS[invite.role] ?? 'gray'}>
                         {t(`projects.settings.roles.${invite.role}`)}
                       </Badge>
                       {invite.invitee_email && (
-                        <span className="text-xs text-gray-500 dark:text-gray-400 truncate max-w-[160px]" title={invite.invitee_email}>
+                        <span className="text-xs text-[var(--foreground-secondary)] truncate max-w-[160px]" title={invite.invitee_email}>
                           {invite.invitee_email}
                         </span>
                       )}
@@ -866,12 +866,12 @@ export function ProjectSettingsPage() {
                         <Badge color="gray">{t('projects.settings.inviteExpired')}</Badge>
                       )}
                       <div className="ml-auto flex items-center gap-3 flex-shrink-0">
-                        <span className="hidden md:inline text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                        <span className="hidden md:inline text-xs text-[var(--foreground-secondary)] whitespace-nowrap">
                           {invite.max_uses > 0
                             ? t('projects.settings.inviteUsage', { count: invite.use_count, max: invite.max_uses })
                             : t('projects.settings.inviteUsageUnlimited', { count: invite.use_count })}
                         </span>
-                        <span className="hidden md:inline text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                        <span className="hidden md:inline text-xs text-[var(--foreground-secondary)] whitespace-nowrap">
                           {invite.expires_at
                             ? (isExpired
                               ? t('projects.settings.inviteExpired')
@@ -887,7 +887,7 @@ export function ProjectSettingsPage() {
                         </span>
                         <Tooltip content={t('projects.settings.inviteCopy')}>
                           <button
-                            className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                            className="p-1 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
                             onClick={() => {
                               navigator.clipboard.writeText(invite.url)
                               showSaved(`copy:${invite.id}`)
@@ -897,14 +897,14 @@ export function ProjectSettingsPage() {
                           </button>
                         </Tooltip>
                         <button
-                          className="p-1 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                          className="p-1 text-[var(--danger)] hover:text-red-700 text-[var(--danger)] dark:hover:text-red-300"
                           onClick={() => setRevokeTarget({ id: invite.id, code: invite.code })}
                         >
                           <Trash2 className="h-4 w-4" />
                         </button>
                       </div>
                     </div>
-                    <div className="flex items-center gap-3 md:hidden text-xs text-gray-500 dark:text-gray-400">
+                    <div className="flex items-center gap-3 md:hidden text-xs text-[var(--foreground-secondary)]">
                       <span>
                         {invite.max_uses > 0
                           ? t('projects.settings.inviteUsage', { count: invite.use_count, max: invite.max_uses })
@@ -925,7 +925,7 @@ export function ProjectSettingsPage() {
               })}
             </div>
           ) : (
-            <p className="text-sm text-gray-500 dark:text-gray-400">{t('projects.settings.noInvites')}</p>
+            <p className="text-sm text-[var(--foreground-secondary)]">{t('projects.settings.noInvites')}</p>
           )}
         </div>
       )}
@@ -933,11 +933,11 @@ export function ProjectSettingsPage() {
       {/* ───── Work Items tab ───── */}
       {effectiveTab === 'workItems' && (
         <div className="space-y-6">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('projects.settings.complexityDescription')}</p>
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('projects.settings.complexityDescription')}</p>
 
-          {complexityError && <p className="text-sm text-red-600 dark:text-red-400">{complexityError}</p>}
+          {complexityError && <p className="text-sm text-[var(--danger)]">{complexityError}</p>}
 
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3">
+          <div className="border border-[var(--border)] rounded-lg p-4 space-y-3">
             <Input
               label={t('projects.settings.complexityValues')}
               value={complexityInput ?? project.allowed_complexity_values.join(', ')}
@@ -1001,10 +1001,10 @@ export function ProjectSettingsPage() {
 
       {/* Delete confirmation modal */}
       <Modal open={showDeleteModal} onClose={() => setShowDeleteModal(false)} title={t('projects.settings.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans i18nKey="projects.settings.deleteConfirmBody" values={{ projectKey: project.key }} components={{ bold: <strong /> }} />
         </p>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-2">
           <Trans i18nKey="projects.settings.deleteConfirmType" values={{ projectKey: project.key }} components={{ bold: <strong /> }} />
         </p>
         <Input
@@ -1028,7 +1028,7 @@ export function ProjectSettingsPage() {
 
       {/* Remove member confirmation modal */}
       <Modal open={!!removeTarget} onClose={() => setRemoveTarget(null)} title={t('projects.settings.removeMemberConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           {removeTarget?.userId === user?.id ? (
             t('projects.settings.removeSelfConfirmBody')
           ) : (
@@ -1055,7 +1055,7 @@ export function ProjectSettingsPage() {
 
       {/* Revoke invite confirmation modal */}
       <Modal open={!!revokeTarget} onClose={() => setRevokeTarget(null)} title={t('projects.settings.deleteInviteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           {t('projects.settings.deleteInviteConfirmBody')}
         </p>
         <div className="flex justify-end gap-2">
@@ -1084,7 +1084,7 @@ export function ProjectSettingsPage() {
 
       {/* Email invite confirmation modal */}
       <Modal open={showEmailInviteModal} onClose={() => setShowEmailInviteModal(false)} title={t('projects.settings.emailInviteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans
             i18nKey="projects.settings.emailInviteConfirmBody"
             values={{ email: emailInput, role: t(`projects.settings.roles.${newMemberRole}`) }}
@@ -1106,26 +1106,33 @@ export function ProjectSettingsPage() {
 
       {/* Namespace transfer modal */}
       <Modal open={showTransferModal} onClose={() => setShowTransferModal(false)} title={t('projects.settings.transferConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans i18nKey="projects.settings.transferConfirmBody" values={{ projectKey: project.key }} components={{ bold: <strong /> }} />
         </p>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-1">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-1">
           <Trans i18nKey="projects.settings.transferConfirmType" values={{ projectKey: project.key }} components={{ bold: <strong /> }} />
         </p>
         <input
           type="text"
           value={transferConfirm}
           onChange={(e) => setTransferConfirm(e.target.value.toUpperCase())}
-          className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-4"
+          className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] mb-4"
           placeholder={project.key}
         />
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{t('projects.settings.transferTargetNamespace')}</label>
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-1">{t('projects.settings.transferTargetNamespace')}</label>
         <div className="mb-4" ref={transferDropdownRef}>
           <button
             ref={transferButtonRef}
             type="button"
-            onClick={() => setTransferDropdownOpen(!transferDropdownOpen)}
-            className="flex items-center gap-2 w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            onClick={() => {
+              const next = !transferDropdownOpen
+              setTransferDropdownOpen(next)
+              if (next && transferButtonRef.current) {
+                const rect = transferButtonRef.current.getBoundingClientRect()
+                setTransferMenuPos({ top: rect.bottom + 4, left: rect.left, width: rect.width })
+              }
+            }}
+            className="flex items-center gap-2 w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
           >
             {(() => {
               const selected = namespaces.find((ns) => ns.slug === transferTarget)
@@ -1139,22 +1146,22 @@ export function ProjectSettingsPage() {
                   <span className="flex-1 text-left truncate">
                     {selected.display_name}
                   </span>
-                  <span className="text-xs text-gray-400 dark:text-gray-500 shrink-0">{selected.slug}</span>
+                  <span className="text-xs text-[var(--foreground-muted)] shrink-0">{selected.slug}</span>
                 </>
               ) : (
-                <span className="flex-1 text-left text-gray-400 dark:text-gray-500">{t('projects.settings.selectNamespace')}</span>
+                <span className="flex-1 text-left text-[var(--foreground-muted)]">{t('projects.settings.selectNamespace')}</span>
               )
             })()}
-            <ChevronDown className="h-4 w-4 shrink-0 text-gray-400" />
+            <ChevronDown className="h-4 w-4 shrink-0 text-[var(--foreground-muted)]" />
           </button>
           {transferDropdownOpen && createPortal(
             <div
               ref={transferMenuRef}
-              className="fixed z-[9999] rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1 max-h-60 overflow-y-auto"
+              className="fixed z-[9999] rounded-md border border-[var(--border)] bg-[var(--surface)] shadow-lg py-1 max-h-60 overflow-y-auto"
               style={{
-                top: (transferButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 4,
-                left: transferButtonRef.current?.getBoundingClientRect().left ?? 0,
-                width: transferButtonRef.current?.getBoundingClientRect().width ?? 'auto',
+                top: transferMenuPos.top,
+                left: transferMenuPos.left,
+                width: transferMenuPos.width || 'auto',
               }}
             >
               {namespaces
@@ -1169,14 +1176,14 @@ export function ProjectSettingsPage() {
                     }}
                     className={`w-full text-left px-3 py-2 text-sm flex items-center gap-2.5 ${
                       ns.slug === transferTarget
-                        ? 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300'
-                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                        ? 'bg-[var(--primary-muted)] text-[var(--primary)]'
+                        : 'text-[var(--foreground)] hover:bg-[var(--surface-hover)]'
                     }`}
                   >
                     <NamespaceIcon icon={ns.icon} color={ns.color} className="h-4 w-4 shrink-0" />
                     <div className="min-w-0 flex-1">
                       <div className="font-medium truncate">{ns.display_name}</div>
-                      {!ns.is_default && <div className="text-xs text-gray-400 dark:text-gray-500">{ns.slug}</div>}
+                      {!ns.is_default && <div className="text-xs text-[var(--foreground-muted)]">{ns.slug}</div>}
                     </div>
                   </button>
                 ))}
@@ -1184,7 +1191,7 @@ export function ProjectSettingsPage() {
             document.body,
           )}
         </div>
-        {transferError && <p className="text-sm text-red-600 dark:text-red-400 mb-4">{transferError}</p>}
+        {transferError && <p className="text-sm text-[var(--danger)] mb-4">{transferError}</p>}
         <div className="flex justify-end gap-2">
           <Button variant="secondary" onClick={() => setShowTransferModal(false)}>{t('common.cancel')}</Button>
           <Button
diff --git a/web/src/pages/ProjectWorkflowsPage.tsx b/web/src/pages/ProjectWorkflowsPage.tsx
index 3eb4b148..31289c6d 100644
--- a/web/src/pages/ProjectWorkflowsPage.tsx
+++ b/web/src/pages/ProjectWorkflowsPage.tsx
@@ -148,8 +148,8 @@ export function ProjectWorkflowsPage() {
     <div className="max-w-3xl space-y-6">
       {/* Page Header */}
       <div>
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">{t('workflows.title')}</h2>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('workflows.description')}</p>
+        <h2 className="text-xl font-semibold text-[var(--foreground)]">{t('workflows.title')}</h2>
+        <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('workflows.description')}</p>
       </div>
 
       <Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} />
@@ -159,8 +159,8 @@ export function ProjectWorkflowsPage() {
       <div>
         <div className="flex items-center justify-between">
           <div>
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('workflows.definitionsTitle')}</h2>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('workflows.definitionsDescription')}</p>
+            <h2 className="text-lg font-semibold text-[var(--foreground)]">{t('workflows.definitionsTitle')}</h2>
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('workflows.definitionsDescription')}</p>
           </div>
           {canManage && (
             <Button onClick={() => openEditor()} className="border border-transparent">
@@ -171,21 +171,21 @@ export function ProjectWorkflowsPage() {
         </div>
       </div>
 
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
 
       {/* System Workflows */}
       {systemWorkflows.length > 0 && (
         <div>
-          <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2 flex items-center gap-1.5">
+          <h3 className="text-sm font-medium text-[var(--foreground-secondary)] mb-2 flex items-center gap-1.5">
             <Lock className="h-3.5 w-3.5" />
             {t('workflows.systemWorkflows')}
           </h3>
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+          <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
             {systemWorkflows.map((wf) => (
               <div key={wf.id} className="p-4">
                 <div className="flex items-center justify-between mb-2">
                   <div className="flex items-center gap-2">
-                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{wf.name}</span>
+                    <span className="text-sm font-medium text-[var(--foreground)]">{wf.name}</span>
                     <Badge color="gray">{t('common.system')}</Badge>
                   </div>
                   <Tooltip content={t('workflows.viewDetails')}>
@@ -195,7 +195,7 @@ export function ProjectWorkflowsPage() {
                   </Tooltip>
                 </div>
                 {wf.description && (
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mb-2">{wf.description}</p>
+                  <p className="text-xs text-[var(--foreground-secondary)] mb-2">{wf.description}</p>
                 )}
                 <div className="flex flex-wrap gap-1.5">
                   {wf.statuses.map((s) => (
@@ -212,12 +212,12 @@ export function ProjectWorkflowsPage() {
 
       {/* Project Workflows */}
       <div>
-        <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
+        <h3 className="text-sm font-medium text-[var(--foreground-secondary)] mb-2">
           {t('workflows.projectWorkflows')}
         </h3>
         {projectWorkflows.length === 0 ? (
-          <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-            <p className="text-sm text-gray-500 dark:text-gray-400">{t('workflows.noProjectWorkflows')}</p>
+          <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+            <p className="text-sm text-[var(--foreground-secondary)]">{t('workflows.noProjectWorkflows')}</p>
             {canManage && (
               <Button size="sm" variant="secondary" className="mt-3" onClick={() => openEditor()}>
                 <Plus className="h-4 w-4 mr-1" />
@@ -226,14 +226,14 @@ export function ProjectWorkflowsPage() {
             )}
           </div>
         ) : (
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+          <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
             {projectWorkflows.map((wf) => (
               <div key={wf.id} className="p-4">
                 <div className="flex items-center justify-between mb-2">
                   <div>
-                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{wf.name}</span>
+                    <span className="text-sm font-medium text-[var(--foreground)]">{wf.name}</span>
                     {wf.description && (
-                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{wf.description}</p>
+                      <p className="text-xs text-[var(--foreground-secondary)] mt-0.5">{wf.description}</p>
                     )}
                   </div>
                   <div className="flex items-center gap-1">
@@ -252,7 +252,7 @@ export function ProjectWorkflowsPage() {
                         </Tooltip>
                         <Tooltip content={t('common.delete')}>
                           <Button variant="ghost" size="sm" onClick={() => setDeleteTarget({ id: wf.id, name: wf.name })}>
-                            <Trash2 className="h-3.5 w-3.5 text-red-500" />
+                            <Trash2 className="h-3.5 w-3.5 text-[var(--danger)]" />
                           </Button>
                         </Tooltip>
                       </>
@@ -274,18 +274,18 @@ export function ProjectWorkflowsPage() {
 
       {/* Mapping */}
       <div>
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('workflows.mappingTitle')}</h2>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('workflows.mappingDescription')}</p>
+        <h2 className="text-lg font-semibold text-[var(--foreground)]">{t('workflows.mappingTitle')}</h2>
+        <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('workflows.mappingDescription')}</p>
       </div>
 
-      {workflowError && <p className="text-sm text-red-600 dark:text-red-400">{workflowError}</p>}
+      {workflowError && <p className="text-sm text-[var(--danger)]">{workflowError}</p>}
 
-      <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+      <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
         {['task', 'ticket', 'bug', 'feedback', 'epic'].map((itemType) => {
           const mapping = typeWorkflows?.find((tw) => tw.work_item_type === itemType)
           return (
             <div key={itemType} className="flex items-center justify-between p-3">
-              <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              <span className="text-sm font-medium text-[var(--foreground)]">
                 {t(`workitems.types.${itemType}`)}
               </span>
               <div className="flex items-center gap-2">
@@ -293,7 +293,7 @@ export function ProjectWorkflowsPage() {
                   <Check className="h-5 w-5 text-green-500 animate-[pulse_0.6s_ease-in-out_2]" />
                 )}
                 <select
-                  className="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-60 disabled:cursor-not-allowed"
+                  className="rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] disabled:opacity-60 disabled:cursor-not-allowed"
                   value={mapping?.workflow_id ?? ''}
                   onChange={(e) => {
                     setWorkflowError('')
@@ -328,8 +328,8 @@ export function ProjectWorkflowsPage() {
       <div>
         <div className="flex items-center justify-between">
           <div>
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('escalation.title')}</h2>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('escalation.description')}</p>
+            <h2 className="text-lg font-semibold text-[var(--foreground)]">{t('escalation.title')}</h2>
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('escalation.description')}</p>
           </div>
           {canManage && (
             <Button onClick={() => { setEditingEscalationId(null); setEscalationEditorOpen(true) }} className="border border-transparent">
@@ -340,14 +340,14 @@ export function ProjectWorkflowsPage() {
         </div>
       </div>
 
-      {escalationError && <p className="text-sm text-red-600 dark:text-red-400">{escalationError}</p>}
+      {escalationError && <p className="text-sm text-[var(--danger)]">{escalationError}</p>}
 
       {(!escalationLists || escalationLists.length === 0) ? (
-        <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('escalation.noLists')}</p>
+        <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('escalation.noLists')}</p>
         </div>
       ) : (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
           {escalationLists.map((el) => {
             const isExpanded = expandedEscalationIds.has(el.id)
             return (
@@ -366,8 +366,8 @@ export function ProjectWorkflowsPage() {
                       })
                     }}
                   >
-                    {isExpanded ? <ChevronDown className="h-4 w-4 text-gray-400 shrink-0" /> : <ChevronRight className="h-4 w-4 text-gray-400 shrink-0" />}
-                    <span className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{el.name}</span>
+                    {isExpanded ? <ChevronDown className="h-4 w-4 text-[var(--foreground-muted)] shrink-0" /> : <ChevronRight className="h-4 w-4 text-[var(--foreground-muted)] shrink-0" />}
+                    <span className="text-sm font-medium text-[var(--foreground)] truncate">{el.name}</span>
                   </button>
                   <div className="flex items-center gap-1 shrink-0">
                     {escalationSavedId === el.id && <Check className="h-5 w-5 text-green-500 animate-[pulse_0.6s_ease-in-out_2]" />}
@@ -380,7 +380,7 @@ export function ProjectWorkflowsPage() {
                         </Tooltip>
                         <Tooltip content={t('common.delete')}>
                           <Button variant="ghost" size="sm" onClick={() => setEscalationDeleteTarget({ id: el.id, name: el.name })}>
-                            <Trash2 className="h-3.5 w-3.5 text-red-500" />
+                            <Trash2 className="h-3.5 w-3.5 text-[var(--danger)]" />
                           </Button>
                         </Tooltip>
                       </>
@@ -409,7 +409,7 @@ export function ProjectWorkflowsPage() {
                         <div key={lv.id} className="flex items-center gap-3">
                           <ThresholdBadge pct={lv.threshold_pct} />
                           {lv.users.length === 0 && (lv.teams ?? []).length === 0 ? (
-                            <span className="text-xs text-gray-400">{t('escalation.noRecipients')}</span>
+                            <span className="text-xs text-[var(--foreground-muted)]">{t('escalation.noRecipients')}</span>
                           ) : (
                             <ScrollableRecipientList users={lv.users} teams={lv.teams ?? []} />
                           )}
@@ -425,13 +425,13 @@ export function ProjectWorkflowsPage() {
 
       {/* Escalation Mapping */}
       <div>
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('escalation.mappingTitle')}</h2>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('escalation.mappingDescription')}</p>
+        <h2 className="text-lg font-semibold text-[var(--foreground)]">{t('escalation.mappingTitle')}</h2>
+        <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('escalation.mappingDescription')}</p>
       </div>
 
-      {escalationMappingError && <p className="text-sm text-red-600 dark:text-red-400">{escalationMappingError}</p>}
+      {escalationMappingError && <p className="text-sm text-[var(--danger)]">{escalationMappingError}</p>}
 
-      <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+      <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
         {['task', 'ticket', 'bug', 'feedback', 'epic'].map((itemType) => {
           const escMapping = escalationMappings?.find((m) => m.work_item_type === itemType)
           const wfMapping = typeWorkflows?.find((tw) => tw.work_item_type === itemType)
@@ -440,7 +440,7 @@ export function ProjectWorkflowsPage() {
           return (
             <div key={itemType} className="p-3">
               <div className="flex items-center justify-between">
-                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+                <span className="text-sm font-medium text-[var(--foreground)]">
                   {t(`workitems.types.${itemType}`)}
                 </span>
                 <div className="flex items-center gap-2">
@@ -454,7 +454,7 @@ export function ProjectWorkflowsPage() {
                     <Check className="h-5 w-5 text-green-500 animate-[pulse_0.6s_ease-in-out_2]" />
                   )}
                   <select
-                    className="rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-60 disabled:cursor-not-allowed"
+                    className="rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] disabled:opacity-60 disabled:cursor-not-allowed"
                     value={escMapping?.escalation_list_id ?? ''}
                     onChange={(e) => {
                       setEscalationMappingError('')
@@ -487,7 +487,7 @@ export function ProjectWorkflowsPage() {
                   </select>
                   <Tooltip content={canManage ? t('sla.configure') : t('sla.view')}>
                     <button
-                      className="rounded-md border border-gray-300 dark:border-gray-600 p-2 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 disabled:opacity-50 disabled:cursor-not-allowed"
+                      className="rounded-md border border-[var(--border)] p-2 text-[var(--foreground-muted)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)] disabled:opacity-50 disabled:cursor-not-allowed"
                       onClick={() => {
                         if (wfMapping?.workflow_id) {
                           setSlaModalType(itemType)
@@ -518,13 +518,13 @@ export function ProjectWorkflowsPage() {
       {project && (
         <>
           <div>
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('workflows.businessHoursTitle')}</h2>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('workflows.businessHoursDescription')}</p>
+            <h2 className="text-lg font-semibold text-[var(--foreground)]">{t('workflows.businessHoursTitle')}</h2>
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('workflows.businessHoursDescription')}</p>
           </div>
 
-          {bhError && <p className="text-sm text-red-600 dark:text-red-400">{bhError}</p>}
+          {bhError && <p className="text-sm text-[var(--danger)]">{bhError}</p>}
 
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-4">
+          <div className="border border-[var(--border)] rounded-lg p-4 space-y-4">
             {(() => {
               const currentDays = bhDays ?? project.business_hours?.days ?? []
               const currentStart = bhStart ?? project.business_hours?.start_hour ?? 9
@@ -546,7 +546,7 @@ export function ProjectWorkflowsPage() {
               return (
                 <>
                   <div>
-                    <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
                       {t('businessHours.days')}
                     </label>
                     <div className="flex gap-2 flex-wrap">
@@ -557,8 +557,8 @@ export function ProjectWorkflowsPage() {
                           disabled={!canManage}
                           className={`px-3 py-1.5 text-sm rounded-md border transition-colors disabled:opacity-60 disabled:cursor-not-allowed ${
                             currentDays.includes(d.value)
-                              ? 'bg-indigo-100 dark:bg-indigo-900 border-indigo-300 dark:border-indigo-600 text-indigo-700 dark:text-indigo-200'
-                              : 'bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+                              ? 'bg-[var(--primary-muted)] border-[var(--primary-border)] text-[var(--primary)]'
+                              : 'bg-[var(--surface)] border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--surface-hover)]'
                           }`}
                           onClick={() => {
                             const newDays = currentDays.includes(d.value)
@@ -575,11 +575,11 @@ export function ProjectWorkflowsPage() {
 
                   <div className="grid grid-cols-3 gap-4">
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
                         {t('businessHours.startHour')}
                       </label>
                       <select
-                        className="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-60 disabled:cursor-not-allowed"
+                        className="w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] disabled:opacity-60 disabled:cursor-not-allowed"
                         value={currentStart}
                         onChange={(e) => setBhStart(Number(e.target.value))}
                         disabled={!canManage}
@@ -590,11 +590,11 @@ export function ProjectWorkflowsPage() {
                       </select>
                     </div>
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
                         {t('businessHours.endHour')}
                       </label>
                       <select
-                        className="w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-60 disabled:cursor-not-allowed"
+                        className="w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] disabled:opacity-60 disabled:cursor-not-allowed"
                         value={currentEnd}
                         onChange={(e) => setBhEnd(Number(e.target.value))}
                         disabled={!canManage}
@@ -605,7 +605,7 @@ export function ProjectWorkflowsPage() {
                       </select>
                     </div>
                     <div>
-                      <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                      <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
                         {t('businessHours.timezone')}
                       </label>
                       <TimezoneSelect
@@ -706,7 +706,7 @@ export function ProjectWorkflowsPage() {
 
       {/* Escalation Delete confirmation modal */}
       <Modal open={!!escalationDeleteTarget} onClose={() => setEscalationDeleteTarget(null)} title={t('escalation.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-2">
           <Trans i18nKey="escalation.deleteConfirmBody" values={{ name: escalationDeleteTarget?.name }} components={{ bold: <strong /> }} />
         </p>
         {escalationDeleteTarget && escalationMappings?.some((m) => m.escalation_list_id === escalationDeleteTarget.id) && (
@@ -785,7 +785,7 @@ export function ProjectWorkflowsPage() {
 
       {/* Delete confirmation modal */}
       <Modal open={!!deleteTarget} onClose={() => setDeleteTarget(null)} title={t('workflows.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           {t('workflows.deleteConfirmBody', { name: deleteTarget?.name })}
         </p>
         <div className="flex justify-end gap-2">
@@ -842,7 +842,7 @@ function ScrollableRecipientList({
   return (
     <div className="flex items-center gap-1 min-w-0 flex-1">
       {canScrollLeft && (
-        <button type="button" onClick={() => scroll('left')} className="shrink-0 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+        <button type="button" onClick={() => scroll('left')} className="shrink-0 p-0.5 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]">
           <ChevronLeft className="h-3.5 w-3.5" />
         </button>
       )}
@@ -863,7 +863,7 @@ function ScrollableRecipientList({
         {users.map((u) => (
           <span
             key={`user-${u.id}`}
-            className="inline-flex items-center gap-1 shrink-0 rounded-full bg-indigo-50 dark:bg-indigo-900/30 border border-indigo-200 dark:border-indigo-700 px-2 py-0.5 text-xs font-medium text-indigo-700 dark:text-indigo-300"
+            className="inline-flex items-center gap-1 shrink-0 rounded-full bg-[var(--primary-muted)] border border-[var(--primary-border)] dark:border-[var(--primary-border)] px-2 py-0.5 text-xs font-medium text-[var(--primary)]"
           >
             <Avatar name={u.display_name} avatarUrl={u.avatar_url} size="xs" />
             {u.display_name}
@@ -871,7 +871,7 @@ function ScrollableRecipientList({
         ))}
       </div>
       {canScrollRight && (
-        <button type="button" onClick={() => scroll('right')} className="shrink-0 p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+        <button type="button" onClick={() => scroll('right')} className="shrink-0 p-0.5 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]">
           <ChevronRight className="h-3.5 w-3.5" />
         </button>
       )}
@@ -900,11 +900,11 @@ function WorkflowDetailModal({
       ) : (
         <div className="space-y-4">
           {workflow.description && (
-            <p className="text-sm text-gray-600 dark:text-gray-300">{workflow.description}</p>
+            <p className="text-sm text-[var(--foreground-secondary)]">{workflow.description}</p>
           )}
 
           <div>
-            <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">{t('workflows.statuses')}</h4>
+            <h4 className="text-sm font-medium text-[var(--foreground)] mb-2">{t('workflows.statuses')}</h4>
             <div className="flex flex-wrap gap-1.5">
               {workflow.statuses.map((s) => (
                 <Badge key={s.name} color={CATEGORY_COLORS[s.category] ?? 'gray'}>
@@ -915,25 +915,25 @@ function WorkflowDetailModal({
           </div>
 
           <div>
-            <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">{t('workflows.transitions')}</h4>
+            <h4 className="text-sm font-medium text-[var(--foreground)] mb-2">{t('workflows.transitions')}</h4>
             {workflow.transitions.length === 0 ? (
-              <p className="text-sm text-gray-500 dark:text-gray-400">{t('workflows.noTransitions')}</p>
+              <p className="text-sm text-[var(--foreground-secondary)]">{t('workflows.noTransitions')}</p>
             ) : (
               <div className="space-y-1">
                 {workflow.transitions.map((tr) => {
                   const fromStatus = workflow.statuses.find((s) => s.name === tr.from_status)
                   const toStatus = workflow.statuses.find((s) => s.name === tr.to_status)
                   return (
-                    <div key={tr.id} className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+                    <div key={tr.id} className="flex items-center gap-2 text-sm text-[var(--foreground)]">
                       <Badge color={CATEGORY_COLORS[fromStatus?.category ?? ''] ?? 'gray'}>
                         {t(`workitems.statuses.${tr.from_status}`, { defaultValue: fromStatus?.display_name ?? tr.from_status })}
                       </Badge>
-                      <ArrowRight className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+                      <ArrowRight className="h-3.5 w-3.5 text-[var(--foreground-muted)] shrink-0" />
                       <Badge color={CATEGORY_COLORS[toStatus?.category ?? ''] ?? 'gray'}>
                         {t(`workitems.statuses.${tr.to_status}`, { defaultValue: toStatus?.display_name ?? tr.to_status })}
                       </Badge>
                       {tr.name && (
-                        <span className="text-xs text-gray-400 ml-1">({tr.name})</span>
+                        <span className="text-xs text-[var(--foreground-muted)] ml-1">({tr.name})</span>
                       )}
                     </div>
                   )
@@ -1143,7 +1143,7 @@ function WorkflowEditorModal({
     >
       <div className="space-y-5">
         {validationError && (
-          <p className="text-sm text-red-600 dark:text-red-400">{validationError}</p>
+          <p className="text-sm text-[var(--danger)]">{validationError}</p>
         )}
 
         {/* Name */}
@@ -1156,12 +1156,12 @@ function WorkflowEditorModal({
 
         {/* Description */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
             {t('common.description')}
           </label>
           <textarea
             rows={2}
-            className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+            className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             placeholder={t('workflows.descriptionPlaceholder')}
@@ -1170,7 +1170,7 @@ function WorkflowEditorModal({
 
         {/* Status Selection */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
             {t('workflows.selectStatuses')}
           </label>
           <div className="flex flex-wrap gap-2">
@@ -1183,11 +1183,11 @@ function WorkflowEditorModal({
                   onClick={() => toggleStatus(status)}
                   className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium border transition-colors ${
                     isSelected
-                      ? 'bg-indigo-50 border-indigo-300 text-indigo-700 dark:bg-indigo-900/30 dark:border-indigo-600 dark:text-indigo-300'
-                      : 'bg-white border-gray-300 text-gray-600 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700'
+                      ? 'bg-[var(--primary-muted)] border-[var(--primary-border)] text-[var(--primary)]   dark:text-[var(--primary)]'
+                      : 'bg-white border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-secondary)] dark:border-[var(--border)] text-[var(--foreground-muted)] hover:bg-[var(--surface-hover)]'
                   }`}
                 >
-                  {isSelected && <span className="text-indigo-500">&#10003;</span>}
+                  {isSelected && <span className="text-[var(--primary)]">&#10003;</span>}
                   {t(`workitems.statuses.${status.name}`, { defaultValue: status.display_name })}
                   <span className="text-[10px] opacity-60">({status.category})</span>
                 </button>
@@ -1198,7 +1198,7 @@ function WorkflowEditorModal({
           {/* Selected statuses order */}
           {statuses.length > 0 && (
             <div className="mt-3">
-              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">{t('workflows.statusOrder')}</p>
+              <p className="text-xs text-[var(--foreground-secondary)] mb-1">{t('workflows.statusOrder')}</p>
               <div className="flex flex-wrap gap-1.5">
                 {[...statuses].sort((a, b) => a.position - b.position).map((s, idx) => (
                   <Badge key={s.name} color={CATEGORY_COLORS[s.category] ?? 'gray'}>
@@ -1213,7 +1213,7 @@ function WorkflowEditorModal({
         {/* Transitions */}
         <div>
           <div className="flex items-center justify-between mb-2">
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="block text-sm font-medium text-[var(--foreground)]">
               {t('workflows.transitions')}
             </label>
             <Button
@@ -1228,13 +1228,13 @@ function WorkflowEditorModal({
           </div>
 
           {transitions.length === 0 ? (
-            <p className="text-sm text-gray-500 dark:text-gray-400">{t('workflows.noTransitionsYet')}</p>
+            <p className="text-sm text-[var(--foreground-secondary)]">{t('workflows.noTransitionsYet')}</p>
           ) : (
             <div className="space-y-2">
               {transitions.map((tr, idx) => (
                 <div key={idx} className="flex items-center gap-2">
                   <select
-                    className="min-w-0 flex-1 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    className="min-w-0 flex-1 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                     value={tr.from_status}
                     onChange={(e) => updateTransition(idx, 'from_status', e.target.value)}
                   >
@@ -1242,9 +1242,9 @@ function WorkflowEditorModal({
                       <option key={s.name} value={s.name}>{t(`workitems.statuses.${s.name}`, { defaultValue: s.display_name })}</option>
                     ))}
                   </select>
-                  <ArrowRight className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+                  <ArrowRight className="h-3.5 w-3.5 text-[var(--foreground-muted)] shrink-0" />
                   <select
-                    className="min-w-0 flex-1 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    className="min-w-0 flex-1 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                     value={tr.to_status}
                     onChange={(e) => updateTransition(idx, 'to_status', e.target.value)}
                   >
@@ -1254,14 +1254,14 @@ function WorkflowEditorModal({
                   </select>
                   <input
                     type="text"
-                    className="min-w-0 w-16 sm:w-28 shrink rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    className="min-w-0 w-16 sm:w-28 shrink rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                     placeholder={t('workflows.transitionName')}
                     value={tr.name}
                     onChange={(e) => updateTransition(idx, 'name', e.target.value)}
                   />
                   <button
                     type="button"
-                    className="text-gray-400 hover:text-red-500 p-1"
+                    className="text-[var(--foreground-muted)] hover:text-[var(--danger)] p-1"
                     onClick={() => removeTransition(idx)}
                   >
                     <Trash2 className="h-3.5 w-3.5" />
@@ -1273,7 +1273,7 @@ function WorkflowEditorModal({
         </div>
 
         {/* Actions */}
-        <div className="flex justify-end gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+        <div className="flex justify-end gap-2 pt-2 border-t border-[var(--border)]">
           <Button variant="secondary" onClick={onClose}>
             {t('common.cancel')}
           </Button>
diff --git a/web/src/pages/QueueSettingsPage.tsx b/web/src/pages/QueueSettingsPage.tsx
index 2a0f1536..c5dfdc8d 100644
--- a/web/src/pages/QueueSettingsPage.tsx
+++ b/web/src/pages/QueueSettingsPage.tsx
@@ -50,7 +50,7 @@ export function QueueSettingsPage() {
   if (!queue) {
     return (
       <div className="max-w-3xl">
-        <p className="text-red-600 dark:text-red-400">{t('queues.notFound')}</p>
+        <p className="text-[var(--danger)]">{t('queues.notFound')}</p>
       </div>
     )
   }
@@ -66,13 +66,13 @@ export function QueueSettingsPage() {
       <div className="flex items-center gap-3">
         <Link
           to={p(`/projects/${projectKey}/queues`)}
-          className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          className="text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
         >
           <ArrowLeft className="h-5 w-5" />
         </Link>
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{queue.name}</h2>
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('queues.settings')}</p>
+          <h2 className="text-lg font-semibold text-[var(--foreground)]">{queue.name}</h2>
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('queues.settings')}</p>
         </div>
       </div>
 
@@ -93,9 +93,9 @@ export function QueueSettingsPage() {
       {/* Danger Zone */}
       {canManage && (
         <div className="border border-red-200 dark:border-red-800 rounded-lg p-4 mt-8">
-          <h3 className="text-sm font-semibold text-red-600 dark:text-red-400 mb-2">{t('queues.dangerZone')}</h3>
-          <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">{t('queues.dangerZoneDescription')}</p>
-          {deleteError && <p className="text-sm text-red-600 dark:text-red-400 mb-3">{deleteError}</p>}
+          <h3 className="text-sm font-semibold text-[var(--danger)] mb-2">{t('queues.dangerZone')}</h3>
+          <p className="text-sm text-[var(--foreground-secondary)] mb-3">{t('queues.dangerZoneDescription')}</p>
+          {deleteError && <p className="text-sm text-[var(--danger)] mb-3">{deleteError}</p>}
           <Button variant="danger" onClick={() => setDeleteOpen(true)}>
             <Trash2 className="h-3.5 w-3.5 mr-1" />
             {t('queues.deleteQueue')}
@@ -105,7 +105,7 @@ export function QueueSettingsPage() {
 
       {/* Delete queue confirmation */}
       <Modal open={deleteOpen} onClose={() => setDeleteOpen(false)} title={t('queues.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans i18nKey="queues.deleteConfirmBody" values={{ name: queue.name }} components={{ bold: <strong /> }} />
         </p>
         <div className="flex justify-end gap-2">
@@ -191,7 +191,7 @@ function GeneralTab({
 
   return (
     <div className="space-y-6">
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
 
       <Input
         label={t('queues.name')}
@@ -201,12 +201,12 @@ function GeneralTab({
       />
 
       <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
           {t('common.description')}
         </label>
         <textarea
           rows={3}
-          className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 disabled:opacity-50"
+          className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] disabled:opacity-50"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           disabled={!canManage}
@@ -237,7 +237,7 @@ function GeneralTab({
 
       <div className="flex items-center gap-3">
         <Toggle enabled={isPublic} onChange={setIsPublic} disabled={!canManage} label={t('queues.isPublic')} />
-        <span className="text-sm text-gray-700 dark:text-gray-300">{t('queues.isPublic')}</span>
+        <span className="text-sm text-[var(--foreground)]">{t('queues.isPublic')}</span>
       </div>
 
       {canManage && (
@@ -336,7 +336,7 @@ function CategoriesTab({
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('queues.categories')}</h3>
+        <h3 className="text-sm font-medium text-[var(--foreground)]">{t('queues.categories')}</h3>
         {canManage && (
           <Button size="sm" variant="secondary" onClick={() => openEditor()}>
             <Plus className="h-4 w-4 mr-1" />
@@ -345,23 +345,23 @@ function CategoriesTab({
         )}
       </div>
 
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
 
       {sortedCategories.length === 0 ? (
-        <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('queues.categories.noCategories')}</p>
+        <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('queues.categories.noCategories')}</p>
         </div>
       ) : (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
           {sortedCategories.map((cat) => (
             <div key={cat.id} className="p-3 flex items-center justify-between gap-2">
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
-                  <span className="text-xs text-gray-400 dark:text-gray-500 w-6 text-right shrink-0">#{cat.position}</span>
-                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{cat.name}</span>
+                  <span className="text-xs text-[var(--foreground-muted)] w-6 text-right shrink-0">#{cat.position}</span>
+                  <span className="text-sm font-medium text-[var(--foreground)]">{cat.name}</span>
                 </div>
                 {cat.description && (
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 ml-8">{cat.description}</p>
+                  <p className="text-xs text-[var(--foreground-secondary)] mt-0.5 ml-8">{cat.description}</p>
                 )}
               </div>
               <div className="flex items-center gap-1 shrink-0">
@@ -372,7 +372,7 @@ function CategoriesTab({
                       <Pencil className="h-3.5 w-3.5" />
                     </Button>
                     <Button variant="ghost" size="sm" onClick={() => setDeleteTarget(cat)}>
-                      <Trash2 className="h-3.5 w-3.5 text-red-500" />
+                      <Trash2 className="h-3.5 w-3.5 text-[var(--danger)]" />
                     </Button>
                   </>
                 )}
@@ -399,7 +399,7 @@ function CategoriesTab({
 
       {/* Delete confirmation */}
       <Modal open={!!deleteTarget} onClose={() => setDeleteTarget(null)} title={t('queues.categories.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans i18nKey="queues.categories.deleteConfirmBody" values={{ name: deleteTarget?.name }} components={{ bold: <strong /> }} />
         </p>
         <div className="flex justify-end gap-2">
@@ -469,7 +469,7 @@ function CategoryForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       {validationError && (
-        <p className="text-sm text-red-600 dark:text-red-400">{validationError}</p>
+        <p className="text-sm text-[var(--danger)]">{validationError}</p>
       )}
       <Input
         label={t('queues.categories.name')}
@@ -480,12 +480,12 @@ function CategoryForm({
         autoFocus
       />
       <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
           {t('common.description')}
         </label>
         <textarea
           rows={2}
-          className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+          className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
         />
@@ -571,9 +571,9 @@ function TeamsTab({
 
   return (
     <div className="space-y-4">
-      <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('queues.teams')}</h3>
+      <h3 className="text-sm font-medium text-[var(--foreground)]">{t('queues.teams')}</h3>
 
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
 
       {/* Assign team */}
       {canManage && availableTeams.length > 0 && (
@@ -601,24 +601,24 @@ function TeamsTab({
 
       {/* Assigned teams list */}
       {(!queueTeams || queueTeams.length === 0) ? (
-        <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('queues.teams.noTeams')}</p>
+        <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('queues.teams.noTeams')}</p>
         </div>
       ) : (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
           {queueTeams.map((team) => (
             <div key={team.id} className="p-3 flex items-center justify-between gap-2">
               <div className="min-w-0 flex-1">
-                <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{team.name}</span>
+                <span className="text-sm font-medium text-[var(--foreground)]">{team.name}</span>
                 {team.description && (
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{team.description}</p>
+                  <p className="text-xs text-[var(--foreground-secondary)] mt-0.5">{team.description}</p>
                 )}
               </div>
               <div className="flex items-center gap-1 shrink-0">
                 {savedId === team.id && <Check className="h-4 w-4 text-green-500" />}
                 {canManage && (
                   <Button variant="ghost" size="sm" onClick={() => setUnassignTarget(team)}>
-                    <X className="h-3.5 w-3.5 text-red-500" />
+                    <X className="h-3.5 w-3.5 text-[var(--danger)]" />
                   </Button>
                 )}
               </div>
@@ -629,7 +629,7 @@ function TeamsTab({
 
       {/* Unassign confirmation */}
       <Modal open={!!unassignTarget} onClose={() => setUnassignTarget(null)} title={t('queues.teams.unassignConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans i18nKey="queues.teams.unassignConfirmBody" values={{ name: unassignTarget?.name }} components={{ bold: <strong /> }} />
         </p>
         <div className="flex justify-end gap-2">
diff --git a/web/src/pages/QueueWorkItemsPage.tsx b/web/src/pages/QueueWorkItemsPage.tsx
index 136120eb..24b80720 100644
--- a/web/src/pages/QueueWorkItemsPage.tsx
+++ b/web/src/pages/QueueWorkItemsPage.tsx
@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback, useRef } from 'react'
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react'
 import { useNavigate, useParams, Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { useWorkItems, useBulkUpdateWorkItems, type BulkUpdateResult } from '@/hooks/useWorkItems'
@@ -84,10 +84,13 @@ export function QueueWorkItemsPage() {
 
   // Initialize status filter to open statuses once available
   const filterInitRef = useRef(false)
-  if (!filterInitRef.current && defaultOpenStatuses && !filter.status) {
-    filterInitRef.current = true
-    setFilter((prev) => ({ ...prev, status: defaultOpenStatuses }))
-  }
+  useEffect(() => {
+    if (filterInitRef.current) return
+    if (defaultOpenStatuses && !filter.status) {
+      filterInitRef.current = true
+      setFilter((prev) => ({ ...prev, status: defaultOpenStatuses }))
+    }
+  }, [defaultOpenStatuses, filter.status])
 
   const activeFilter = useMemo(() => ({
     ...filter,
@@ -229,7 +232,7 @@ export function QueueWorkItemsPage() {
       sortKey: 'item_number',
       render: (row) => {
         const done = strikethroughEnabled && isItemCompleted(row.status, allStatuses ?? statuses)
-        return <span className={`font-mono ${done ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400'}`}>{row.display_id}</span>
+        return <span className={`font-mono ${done ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground-secondary)]'}`}>{row.display_id}</span>
       },
     },
     {
@@ -253,8 +256,8 @@ export function QueueWorkItemsPage() {
         return (
           <div className="flex items-center gap-1 min-w-0">
             <Tooltip content={row.title} className="relative block min-w-0 flex-1">
-              <span className={`truncate block ${!done && row.description ? 'text-gray-400 dark:text-gray-500' : ''}`}>
-                <span className={done ? 'line-through text-gray-400 dark:text-gray-500' : 'font-medium text-gray-900 dark:text-gray-100'}>{row.title}</span>
+              <span className={`truncate block ${!done && row.description ? 'text-[var(--foreground-muted)]' : ''}`}>
+                <span className={done ? 'line-through text-[var(--foreground-muted)]' : 'font-medium text-[var(--foreground)]'}>{row.title}</span>
                 {row.description && !done && (
                   <span className="font-normal text-xs"> – {getDescriptionPreview(row.description)}</span>
                 )}
@@ -298,7 +301,7 @@ export function QueueWorkItemsPage() {
       sortKey: 'updated_at',
       render: (row) => {
         const done = strikethroughEnabled && isItemCompleted(row.status, allStatuses ?? statuses)
-        return <span className={done ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'}>{new Date(row.updated_at).toLocaleDateString()}</span>
+        return <span className={done ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-secondary)]'}>{new Date(row.updated_at).toLocaleDateString()}</span>
       },
     },
   ]
@@ -317,12 +320,12 @@ export function QueueWorkItemsPage() {
       <div className="flex items-center gap-4">
         <Link
           to={p(`/projects/${projectKey}/queues`)}
-          className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 shrink-0"
+          className="text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] shrink-0"
         >
           <ArrowLeft className="h-5 w-5" />
         </Link>
         <div className="flex items-center gap-2 shrink-0">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
+          <h2 className="text-lg font-semibold text-[var(--foreground)]">
             {queue?.name ?? t('queues.workItems')}
           </h2>
           {queue && (
@@ -332,7 +335,7 @@ export function QueueWorkItemsPage() {
         <div className="grid grid-cols-2 rounded-md shadow-sm shrink-0">
           <button
             className={`flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium rounded-l-md border ${
-              viewMode === 'list' ? 'bg-indigo-50 text-indigo-700 border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700'
+              viewMode === 'list' ? 'bg-[var(--primary-muted)] text-[var(--primary)] border-[var(--primary-border)]  dark:text-[var(--primary)] dark:border-[var(--primary-border)]' : 'bg-white text-[var(--foreground)] border-[var(--border)] hover:bg-[var(--surface-secondary)] text-[var(--foreground)] dark:border-[var(--border)] hover:bg-[var(--surface-hover)]'
             }`}
             onClick={() => setViewMode('list')}
           >
@@ -341,7 +344,7 @@ export function QueueWorkItemsPage() {
           </button>
           <button
             className={`flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium rounded-r-md border-t border-r border-b ${
-              viewMode === 'board' ? 'bg-indigo-50 text-indigo-700 border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700'
+              viewMode === 'board' ? 'bg-[var(--primary-muted)] text-[var(--primary)] border-[var(--primary-border)]  dark:text-[var(--primary)] dark:border-[var(--primary-border)]' : 'bg-white text-[var(--foreground)] border-[var(--border)] hover:bg-[var(--surface-secondary)] text-[var(--foreground)] dark:border-[var(--border)] hover:bg-[var(--surface-hover)]'
             }`}
             onClick={() => setViewMode('board')}
           >
@@ -363,7 +366,7 @@ export function QueueWorkItemsPage() {
               {search && (
                 <button
                   onClick={() => { handleSearchChange(''); searchRef.current?.focus() }}
-                  className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
                   aria-label={t('common.clear')}
                 >
                   <X className="h-4 w-4" />
@@ -392,8 +395,8 @@ export function QueueWorkItemsPage() {
 
       {/* Bulk action toolbar */}
       {!readOnly && selected.size > 0 && (
-        <div className="flex items-center gap-3 rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-4 py-2">
-          <span className="text-sm font-medium text-indigo-700 dark:text-indigo-300">{t('workitems.selected', { count: selected.size })}</span>
+        <div className="flex items-center gap-3 rounded-md bg-[var(--primary-muted)] px-4 py-2">
+          <span className="text-sm font-medium text-[var(--primary)]">{t('workitems.selected', { count: selected.size })}</span>
           <div className="w-40">
             <Select onChange={(e) => handleBulkStatus(e.target.value)} value="">
               <option value="">{t('workitems.bulk.changeStatus')}</option>
@@ -414,7 +417,7 @@ export function QueueWorkItemsPage() {
           <Button variant="ghost" size="sm" onClick={() => { setSelected(new Set()); setBulkError(null) }}>{t('common.clear')}</Button>
           {bulkMutation.isPending && <Spinner size="sm" />}
           {bulkError && (
-            <span className="text-sm text-red-600 dark:text-red-400">{bulkError}</span>
+            <span className="text-sm text-[var(--danger)]">{bulkError}</span>
           )}
         </div>
       )}
@@ -427,10 +430,10 @@ export function QueueWorkItemsPage() {
       ) : viewMode === 'list' ? (
         <>
           {/* Desktop: table view */}
-          <div className="hidden lg:block border dark:border-gray-700 rounded-lg overflow-hidden">
+          <div className="hidden lg:block border border-[var(--border)] rounded-lg overflow-hidden">
             {!readOnly && (
-              <div className="bg-gray-50 dark:bg-gray-800 px-6 py-2 border-b dark:border-gray-700">
-                <label className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+              <div className="bg-[var(--surface-secondary)] px-6 py-2 border-b border-[var(--border)]">
+                <label className="flex items-center gap-2 text-xs text-[var(--foreground-secondary)]">
                   <input
                     type="checkbox"
                     checked={items.length > 0 && selected.size === items.length}
@@ -459,7 +462,7 @@ export function QueueWorkItemsPage() {
           {/* Mobile: card view */}
           <div className="lg:hidden space-y-2">
             {allItems.length === 0 ? (
-              <p className="text-center text-sm text-gray-500 dark:text-gray-400 py-12">{t('queues.noItems')}</p>
+              <p className="text-center text-sm text-[var(--foreground-secondary)] py-12">{t('queues.noItems')}</p>
             ) : (
               allItems.map((item) => {
                 const assigneeName = item.assignee_id
diff --git a/web/src/pages/QueuesPage.tsx b/web/src/pages/QueuesPage.tsx
index 80020f43..c4117e59 100644
--- a/web/src/pages/QueuesPage.tsx
+++ b/web/src/pages/QueuesPage.tsx
@@ -65,8 +65,8 @@ export function QueuesPage() {
     <div className="max-w-3xl space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('queues.title')}</h2>
-          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('queues.description')}</p>
+          <h2 className="text-lg font-semibold text-[var(--foreground)]">{t('queues.title')}</h2>
+          <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('queues.description')}</p>
         </div>
         {canManage && (
           <Button onClick={() => setCreateOpen(true)} className="border border-transparent">
@@ -76,11 +76,11 @@ export function QueuesPage() {
         )}
       </div>
 
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
 
       {(!queues || queues.length === 0) ? (
-        <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('queues.noQueues')}</p>
+        <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('queues.noQueues')}</p>
           {canManage && (
             <Button size="sm" variant="secondary" className="mt-3" onClick={() => setCreateOpen(true)}>
               <Plus className="h-4 w-4 mr-1" />
@@ -89,17 +89,17 @@ export function QueuesPage() {
           )}
         </div>
       ) : (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
           {queues.map((queue) => (
             <Link
               key={queue.id}
               to={p(`/projects/${projectKey}/queues/${queue.id}/items`)}
-              className="block p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors first:rounded-t-lg last:rounded-b-lg"
+              className="block p-4 hover:bg-[var(--surface-hover)] transition-colors first:rounded-t-lg last:rounded-b-lg"
             >
               <div className="flex items-start justify-between gap-2">
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2 flex-wrap">
-                    <span className="text-base font-semibold text-gray-900 dark:text-gray-100">
+                    <span className="text-base font-semibold text-[var(--foreground)]">
                       {queue.name}
                     </span>
                     <Badge color="gray">{t(`queues.types.${queue.queue_type}`)}</Badge>
@@ -108,7 +108,7 @@ export function QueuesPage() {
                     )}
                   </div>
                   {queue.description && (
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{queue.description}</p>
+                    <p className="text-xs text-[var(--foreground-secondary)] mt-1">{queue.description}</p>
                   )}
                 </div>
                 <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.preventDefault()}>
@@ -182,7 +182,7 @@ function QueueCreateForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       {validationError && (
-        <p className="text-sm text-red-600 dark:text-red-400">{validationError}</p>
+        <p className="text-sm text-[var(--danger)]">{validationError}</p>
       )}
       <Input
         label={t('queues.name')}
@@ -193,12 +193,12 @@ function QueueCreateForm({
         autoFocus
       />
       <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
           {t('common.description')}
         </label>
         <textarea
           rows={3}
-          className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+          className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
         />
diff --git a/web/src/pages/RegisterPage.tsx b/web/src/pages/RegisterPage.tsx
index 08e2c817..36f6b3cd 100644
--- a/web/src/pages/RegisterPage.tsx
+++ b/web/src/pages/RegisterPage.tsx
@@ -22,7 +22,6 @@ export function RegisterPage() {
   const [loading, setLoading] = useState(false)
   const [success, setSuccess] = useState(false)
 
-  // Check if registration is enabled
   const registrationEnabled = publicSettings?.auth_email_registration_enabled === true
 
   if (user) {
@@ -50,70 +49,148 @@ export function RegisterPage() {
 
   if (success) {
     return (
-      <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 px-4">
-        <div className="flex-1 flex items-center justify-center">
-          <div className="max-w-sm w-full text-center">
-            <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
-              {t('register.checkEmail')}
-            </h1>
-            <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">
-              {t('register.checkEmailDescription', { email })}
+      <div className="min-h-screen flex bg-[var(--background)]">
+        <div className="hidden lg:flex lg:w-1/2 bg-[var(--surface-secondary)] flex-col justify-between p-12">
+          <div>
+            <div className="flex items-center gap-3">
+              <div className="w-9 h-9 rounded-[var(--radius-md)] bg-[var(--primary)] flex items-center justify-center">
+                <span className="text-[var(--primary-foreground)] font-bold text-sm">{brandName.charAt(0).toUpperCase()}</span>
+              </div>
+              <span className="text-lg font-semibold text-[var(--foreground)]">{brandName}</span>
+            </div>
+          </div>
+
+          <div className="max-w-md">
+            <h2 className="text-2xl font-semibold text-[var(--foreground)] tracking-tight">
+              {t('register.heroTitle', 'Join the team')}
+            </h2>
+            <p className="mt-3 text-[var(--foreground-secondary)] leading-relaxed">
+              {t('register.heroDesc', 'Start managing your projects more effectively.')}
             </p>
-            <Link
-              to="/login"
-              className="text-sm text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-            >
-              {t('register.backToLogin')}
-            </Link>
+          </div>
+
+          <PoweredByFooter />
+        </div>
+
+        <div className="flex-1 flex flex-col">
+          <div className="flex-1 flex items-center justify-center px-6 py-12">
+            <div className="w-full max-w-[360px] text-center">
+              <div className="lg:hidden flex items-center gap-2.5 mb-8 justify-center">
+                <div className="w-8 h-8 rounded-[var(--radius)] bg-[var(--primary)] flex items-center justify-center">
+                  <span className="text-[var(--primary-foreground)] font-bold text-xs">{brandName.charAt(0).toUpperCase()}</span>
+                </div>
+                <span className="text-base font-semibold text-[var(--foreground)]">{brandName}</span>
+              </div>
+
+              <div className="w-12 h-12 rounded-full bg-[var(--success-bg)] flex items-center justify-center mx-auto mb-4">
+                <svg className="w-6 h-6 text-[var(--success)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <h1 className="text-xl font-semibold text-[var(--foreground)] tracking-tight">
+                {t('register.checkEmail')}
+              </h1>
+              <p className="mt-2 text-sm text-[var(--foreground-secondary)]">
+                {t('register.checkEmailDescription', { email })}
+              </p>
+              <Link
+                to="/login"
+                className="inline-block mt-6 text-sm text-[var(--primary)] hover:text-[var(--primary-hover)] transition-colors"
+              >
+                {t('register.backToLogin')}
+              </Link>
+            </div>
+          </div>
+
+          <div className="lg:hidden px-6 pb-6">
+            <PoweredByFooter />
           </div>
         </div>
-        <PoweredByFooter />
       </div>
     )
   }
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 px-4">
-      <div className="flex-1 flex items-center justify-center">
-        <div className="max-w-sm w-full">
-          <h1 className="text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-8">
-            {t('register.title', { brandName })}
-          </h1>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <Input
-              label={t('register.displayName')}
-              value={displayName}
-              onChange={(e) => setDisplayName(e.target.value)}
-              required
-              autoComplete="name"
-            />
-            <Input
-              label={t('register.email')}
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              required
-              autoComplete="email"
-            />
-            {error && (
-              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
-            )}
-            <Button type="submit" disabled={loading} className="w-full">
-              {loading ? t('register.submitting') : t('register.submit')}
-            </Button>
-          </form>
-          <p className="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
-            {t('register.haveAccount')}{' '}
-            <Link
-              to="/login"
-              className="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-            >
-              {t('register.signIn')}
-            </Link>
+    <div className="min-h-screen flex bg-[var(--background)]">
+      <div className="hidden lg:flex lg:w-1/2 bg-[var(--surface-secondary)] flex-col justify-between p-12">
+        <div>
+          <div className="flex items-center gap-3">
+            <div className="w-9 h-9 rounded-[var(--radius-md)] bg-[var(--primary)] flex items-center justify-center">
+              <span className="text-[var(--primary-foreground)] font-bold text-sm">{brandName.charAt(0).toUpperCase()}</span>
+            </div>
+            <span className="text-lg font-semibold text-[var(--foreground)]">{brandName}</span>
+          </div>
+        </div>
+
+        <div className="max-w-md">
+          <h2 className="text-2xl font-semibold text-[var(--foreground)] tracking-tight">
+            {t('register.heroTitle', 'Join the team')}
+          </h2>
+          <p className="mt-3 text-[var(--foreground-secondary)] leading-relaxed">
+            {t('register.heroDesc', 'Start managing your projects more effectively.')}
           </p>
         </div>
+
+        <PoweredByFooter />
+      </div>
+
+      <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex items-center justify-center px-6 py-12">
+          <div className="w-full max-w-[360px]">
+            <div className="lg:hidden flex items-center gap-2.5 mb-8">
+              <div className="w-8 h-8 rounded-[var(--radius)] bg-[var(--primary)] flex items-center justify-center">
+                <span className="text-[var(--primary-foreground)] font-bold text-xs">{brandName.charAt(0).toUpperCase()}</span>
+              </div>
+              <span className="text-base font-semibold text-[var(--foreground)]">{brandName}</span>
+            </div>
+
+            <h1 className="text-xl font-semibold text-[var(--foreground)] tracking-tight">
+              {t('register.title', { brandName })}
+            </h1>
+            <p className="mt-1.5 text-sm text-[var(--foreground-secondary)]">
+              {t('register.subtitle', 'Create your account')}
+            </p>
+
+            <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+              <Input
+                label={t('register.displayName')}
+                value={displayName}
+                onChange={(e) => setDisplayName(e.target.value)}
+                required
+                autoComplete="name"
+              />
+              <Input
+                label={t('register.email')}
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoComplete="email"
+              />
+              {error && (
+                <p className="text-sm text-[var(--danger)]">{error}</p>
+              )}
+              <Button type="submit" disabled={loading} className="w-full">
+                {loading ? t('register.submitting') : t('register.submit')}
+              </Button>
+
+              <p className="text-center text-sm text-[var(--foreground-secondary)]">
+                {t('register.hasAccount')}{' '}
+                <Link
+                  to="/login"
+                  className="text-[var(--primary)] hover:text-[var(--primary-hover)] transition-colors"
+                >
+                  {t('register.backToLogin')}
+                </Link>
+              </p>
+            </form>
+          </div>
+        </div>
+
+        <div className="lg:hidden px-6 pb-6">
+          <PoweredByFooter />
+        </div>
       </div>
-      <PoweredByFooter />
     </div>
   )
 }
diff --git a/web/src/pages/ResetPasswordPage.tsx b/web/src/pages/ResetPasswordPage.tsx
index 43768290..8da9098a 100644
--- a/web/src/pages/ResetPasswordPage.tsx
+++ b/web/src/pages/ResetPasswordPage.tsx
@@ -53,50 +53,64 @@ export function ResetPasswordPage() {
   }
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 px-4">
-      <div className="flex-1 flex items-center justify-center">
-        <div className="max-w-sm w-full">
-          <h1 className="text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-2">
-            {t('resetPassword.title')}
-          </h1>
-          <p className="text-center text-sm text-gray-600 dark:text-gray-400 mb-8">
-            {t('resetPassword.description')}
-          </p>
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <Input
-              label={t('resetPassword.password')}
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              required
-              autoComplete="new-password"
-            />
-            <Input
-              label={t('resetPassword.confirmPassword')}
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              required
-              autoComplete="new-password"
-            />
-            {error && (
-              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
-            )}
-            <Button type="submit" disabled={loading} className="w-full">
-              {loading ? t('resetPassword.submitting') : t('resetPassword.submit')}
-            </Button>
-          </form>
-          <p className="mt-4 text-center text-sm text-gray-600 dark:text-gray-400">
-            <Link
-              to="/login"
-              className="text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-            >
-              {t('resetPassword.backToLogin')}
-            </Link>
-          </p>
+    <div className="min-h-screen flex bg-[var(--background)]">
+      <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex items-center justify-center px-6 py-12">
+          <div className="w-full max-w-[360px]">
+            <div className="flex items-center gap-2.5 mb-8">
+              <Link to="/login" className="text-[var(--foreground-muted)] hover:text-[var(--foreground)] transition-colors">
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                </svg>
+              </Link>
+            </div>
+
+            <h1 className="text-xl font-semibold text-[var(--foreground)] tracking-tight">
+              {t('resetPassword.title')}
+            </h1>
+            <p className="mt-1.5 text-sm text-[var(--foreground-secondary)]">
+              {t('resetPassword.description')}
+            </p>
+
+            <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+              <Input
+                label={t('resetPassword.password')}
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                autoComplete="new-password"
+              />
+              <Input
+                label={t('resetPassword.confirmPassword')}
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+                autoComplete="new-password"
+              />
+              {error && (
+                <p className="text-sm text-[var(--danger)]">{error}</p>
+              )}
+              <Button type="submit" disabled={loading} className="w-full">
+                {loading ? t('resetPassword.submitting') : t('resetPassword.submit')}
+              </Button>
+            </form>
+            <p className="mt-6 text-center text-sm text-[var(--foreground-secondary)]">
+              <Link
+                to="/login"
+                className="text-[var(--primary)] hover:text-[var(--primary-hover)] transition-colors"
+              >
+                {t('resetPassword.backToLogin')}
+              </Link>
+            </p>
+          </div>
+        </div>
+
+        <div className="px-6 pb-6">
+          <PoweredByFooter />
         </div>
       </div>
-      <PoweredByFooter />
     </div>
   )
 }
diff --git a/web/src/pages/SystemAPIKeysPage.tsx b/web/src/pages/SystemAPIKeysPage.tsx
index f181f5d4..636c7221 100644
--- a/web/src/pages/SystemAPIKeysPage.tsx
+++ b/web/src/pages/SystemAPIKeysPage.tsx
@@ -167,10 +167,10 @@ export function SystemAPIKeysPage() {
   return (
     <div className="max-w-3xl">
       <div className="mb-6">
-        <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+        <h1 className="text-xl font-semibold text-[var(--foreground)]">
           {t('admin.apiKeys.title')}
         </h1>
-        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+        <p className="text-sm text-[var(--foreground-secondary)] mt-1">
           {t('admin.apiKeys.description')}
         </p>
       </div>
@@ -187,8 +187,8 @@ export function SystemAPIKeysPage() {
               <p className="text-sm text-amber-700 dark:text-amber-300 mb-3">
                 {t('admin.apiKeys.keyWarning')}
               </p>
-              <div className="flex items-center gap-2 bg-white dark:bg-gray-800 rounded-md border border-amber-300 dark:border-amber-700 px-3 py-2">
-                <code className="text-sm font-mono text-gray-900 dark:text-gray-100 break-all flex-1">
+              <div className="flex items-center gap-2 bg-[var(--surface)] rounded-md border border-amber-300 dark:border-amber-700 px-3 py-2">
+                <code className="text-sm font-mono text-[var(--foreground)] break-all flex-1">
                   {createdKey.key}
                 </code>
                 <CopyButton text={createdKey.key} />
@@ -204,14 +204,14 @@ export function SystemAPIKeysPage() {
       )}
 
       {/* Create Form */}
-      <div className="mb-8 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4">
-        <h2 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-4">
+      <div className="mb-8 rounded-lg border border-[var(--border)] bg-[var(--surface)] p-4">
+        <h2 className="text-sm font-medium text-[var(--foreground)] mb-4">
           {t('admin.apiKeys.createNew')}
         </h2>
         <form onSubmit={handleCreate} className="space-y-4">
           <div className="grid grid-cols-2 gap-4">
             <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
+              <label className="block text-sm text-[var(--foreground-secondary)] mb-1">
                 {t('admin.apiKeys.name')}
               </label>
               <Input
@@ -221,13 +221,13 @@ export function SystemAPIKeysPage() {
               />
             </div>
             <div>
-              <label className="block text-sm text-gray-600 dark:text-gray-400 mb-1">
+              <label className="block text-sm text-[var(--foreground-secondary)] mb-1">
                 {t('admin.apiKeys.expiration')}
               </label>
               <select
                 value={expiration}
                 onChange={(e) => setExpiration(e.target.value)}
-                className="w-full rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100"
+                className="w-full rounded-md border border-[var(--border)] bg-white bg-[var(--surface-secondary)] px-3 py-2 text-sm text-[var(--foreground)]"
               >
                 {EXPIRATION_OPTIONS.map((opt) => (
                   <option key={opt.value} value={opt.value}>
@@ -240,7 +240,7 @@ export function SystemAPIKeysPage() {
 
           {/* Resource Permission Checkboxes */}
           <div>
-            <label className="block text-sm text-gray-600 dark:text-gray-400 mb-2">
+            <label className="block text-sm text-[var(--foreground-secondary)] mb-2">
               {t('admin.apiKeys.permissions')}
             </label>
             <div className="space-y-3">
@@ -248,9 +248,9 @@ export function SystemAPIKeysPage() {
                 <div
                   key={rp.resource}
                   data-testid={`resource-${rp.resource}`}
-                  className="flex items-center gap-4 rounded-md border border-gray-200 dark:border-gray-700 px-3 py-2"
+                  className="flex items-center gap-4 rounded-md border border-[var(--border)] px-3 py-2"
                 >
-                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300 w-28">
+                  <span className="text-sm font-medium text-[var(--foreground)] w-28">
                     {t(rp.labelKey)}
                   </span>
                   <div className="flex gap-2">
@@ -263,8 +263,8 @@ export function SystemAPIKeysPage() {
                           onClick={() => toggleResourcePerm(rp.resource, opt.value)}
                           className={`rounded-md px-3 py-1 text-xs font-medium transition-colors ${
                             isSelected
-                              ? 'bg-indigo-100 text-indigo-700 ring-1 ring-indigo-500 dark:bg-indigo-900/40 dark:text-indigo-300 dark:ring-indigo-400'
-                              : 'bg-gray-100 text-gray-600 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600'
+                              ? 'bg-[var(--primary-muted)] text-[var(--primary)] ring-1 ring-[var(--focus-ring)]  dark:text-[var(--primary)] dark:ring-indigo-400'
+                              : 'bg-[var(--surface-tertiary)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] text-[var(--foreground-muted)] hover:bg-[var(--surface-hover)]'
                           }`}
                         >
                           {t(opt.labelKey)}
@@ -277,7 +277,7 @@ export function SystemAPIKeysPage() {
             </div>
           </div>
 
-          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+          {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
           <Button type="submit" disabled={createMutation.isPending}>
             {createMutation.isPending ? (
               <Spinner className="h-4 w-4" />
@@ -294,19 +294,19 @@ export function SystemAPIKeysPage() {
           <Spinner />
         </div>
       ) : !keys || keys.length === 0 ? (
-        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+        <div className="text-center py-8 text-[var(--foreground-secondary)]">
           <Key className="h-8 w-8 mx-auto mb-2 opacity-40" />
           <p>{t('admin.apiKeys.empty')}</p>
         </div>
       ) : (
-        <div className="rounded-lg border border-gray-200 dark:border-gray-700 divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="rounded-lg border border-[var(--border)] divide-y divide-[var(--border)]">
           {keys.map((key) => {
             const exp = formatExpiration(key)
             const isEditing = editingKeyId === key.id
             return (
               <div
                 key={key.id}
-                className="p-4 bg-white dark:bg-gray-800 first:rounded-t-lg last:rounded-b-lg"
+                className="p-4 bg-[var(--surface)] first:rounded-t-lg last:rounded-b-lg"
               >
                 <div className="flex items-center justify-between">
                   <div className="min-w-0">
@@ -333,14 +333,14 @@ export function SystemAPIKeysPage() {
                           />
                           <button
                             type="submit"
-                            className="p-1 text-gray-400 hover:text-green-600 dark:hover:text-green-400 transition-colors"
+                            className="p-1 text-[var(--foreground-muted)] hover:text-green-600 dark:hover:text-green-400 transition-colors"
                             disabled={renameMutation.isPending}
                           >
                             <Check className="h-4 w-4" />
                           </button>
                           <button
                             type="button"
-                            className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+                            className="p-1 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] transition-colors"
                             onClick={() => {
                               setEditingKeyId(null)
                               setEditingName('')
@@ -351,7 +351,7 @@ export function SystemAPIKeysPage() {
                         </form>
                       ) : (
                         <>
-                          <span className="font-medium text-gray-900 dark:text-gray-100">
+                          <span className="font-medium text-[var(--foreground)]">
                             {key.name}
                           </span>
                           {savedId === key.id && <Check className="h-4 w-4 text-green-500" />}
@@ -360,7 +360,7 @@ export function SystemAPIKeysPage() {
                       <Badge color="blue">{permissionLabels(key.permissions)}</Badge>
                       {exp.expired && <Badge color="red">{exp.text}</Badge>}
                     </div>
-                    <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+                    <div className="flex items-center gap-3 text-xs text-[var(--foreground-secondary)]">
                       <span>
                         <code>{key.key_prefix}...</code>
                       </span>
@@ -390,7 +390,7 @@ export function SystemAPIKeysPage() {
                     {!isEditing && (
                       <button
                         type="button"
-                        className="p-1.5 text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors"
+                        className="p-1.5 text-[var(--foreground-muted)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)] transition-colors"
                         onClick={() => {
                           setEditingKeyId(key.id)
                           setEditingName(key.name)
@@ -402,7 +402,7 @@ export function SystemAPIKeysPage() {
                     )}
                     <button
                       type="button"
-                      className="p-1.5 text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors"
+                      className="p-1.5 text-[var(--foreground-muted)] hover:text-[var(--danger)] dark:hover:text-red-400 transition-colors"
                       onClick={() => setDeleteTarget(key)}
                     >
                       <Trash2 className="h-4 w-4" />
@@ -422,13 +422,13 @@ export function SystemAPIKeysPage() {
         title={t('admin.apiKeys.deleteConfirmTitle')}
       >
         <div className="p-4">
-          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          <p className="text-sm text-[var(--foreground-secondary)] mb-4">
             <Trans
               i18nKey="admin.apiKeys.deleteConfirmBody"
               values={{ name: deleteTarget?.name }}
               components={{
                 bold: (
-                  <strong className="font-semibold text-gray-900 dark:text-gray-100" />
+                  <strong className="font-semibold text-[var(--foreground)]" />
                 ),
               }}
             />
diff --git a/web/src/pages/SystemAuthenticationPage.tsx b/web/src/pages/SystemAuthenticationPage.tsx
index f1d11bf9..ec15402b 100644
--- a/web/src/pages/SystemAuthenticationPage.tsx
+++ b/web/src/pages/SystemAuthenticationPage.tsx
@@ -2,9 +2,10 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { usePublicSettings, useSetSystemSetting, useSMTPConfig, useOAuthConfig, useSetOAuthConfig } from '@/hooks/useSystemSettings'
 import type { OAuthProviderConfig } from '@/api/systemSettings'
+import { getOAuthConfigError } from '@/utils/oauthConfigError'
 import { Toggle } from '@/components/ui/Toggle'
 import { Input } from '@/components/ui/Input'
-import { Spinner } from '@/components/ui/Spinner'
+import { LoadingState } from '@/components/ui/LoadingState'
 import { ExpandableConfigCard } from '@/components/ui/ExpandableConfigCard'
 import { Copy, Check, TriangleAlert, ArrowUp, ArrowDown } from 'lucide-react'
 
@@ -15,6 +16,16 @@ const emptyConfig: OAuthProviderConfig = {
   client_secret: '',
 }
 
+const emptySSOConfig: OAuthProviderConfig = {
+  client_id: '',
+  client_secret: '',
+  issuer: '',
+  scopes: [],
+  button_label: '',
+  disable_pkce: false,
+  require_verified_email: true,
+}
+
 function RedirectUriField({ provider }: { provider: string }) {
   const { t } = useTranslation()
   const [copied, setCopied] = useState(false)
@@ -30,10 +41,10 @@ function RedirectUriField({ provider }: { provider: string }) {
   return (
     <div>
       <label className="block text-sm mb-1">
-        <span className="font-medium text-gray-700 dark:text-gray-300">
+        <span className="font-medium text-[var(--foreground)]">
           {t('admin.authentication.oauth.redirectUri')}
         </span>
-        <span className="ml-1.5 font-normal text-xs text-gray-400 dark:text-gray-500">
+        <span className="ml-1.5 font-normal text-xs text-[var(--foreground-muted)]">
           ({t('admin.authentication.oauth.redirectUriHint')})
         </span>
       </label>
@@ -41,7 +52,7 @@ function RedirectUriField({ provider }: { provider: string }) {
         <input
           value={redirectUri}
           readOnly
-          className="block w-full min-w-0 rounded-md border px-3 py-2 pr-10 text-sm shadow-sm border-gray-300 text-gray-500 bg-gray-50 dark:border-gray-600 dark:bg-gray-800/50 dark:text-gray-400 cursor-default"
+          className="block w-full min-w-0 rounded-md border px-3 py-2 pr-10 text-sm border-[var(--border)] text-[var(--foreground-secondary)] bg-[var(--surface-secondary)] dark:border-[var(--border)] bg-[var(--surface)]/50 text-[var(--foreground-muted)] cursor-default"
         />
         <button
           type="button"
@@ -51,9 +62,9 @@ function RedirectUriField({ provider }: { provider: string }) {
           {copied ? (
             <Check className="h-4 w-4 text-green-500" />
           ) : (
-            <Copy className="h-4 w-4 text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300" />
+            <Copy className="h-4 w-4 text-[var(--foreground-muted)] group-hover:text-[var(--foreground-secondary)] dark:group-hover:text-[var(--foreground-muted)]" />
           )}
-          <span className="absolute bottom-full right-0 mb-1.5 hidden group-hover:block whitespace-nowrap rounded bg-gray-900 dark:bg-gray-700 px-2 py-1 text-xs text-white shadow-lg">
+          <span className="absolute bottom-full right-0 mb-1.5 hidden group-hover:block whitespace-nowrap rounded bg-[var(--background)] bg-[var(--surface-secondary)] px-2 py-1 text-xs text-white shadow-lg">
             {copied ? t('common.copied') : t('common.copy')}
           </span>
         </button>
@@ -67,6 +78,8 @@ interface OAuthProviderDef {
   titleKey: string
   descriptionKey: string
   enabledSettingKey: string
+  /** Extra fields rendered for this provider beyond client id/secret. */
+  sso?: boolean
 }
 
 const OAUTH_PROVIDERS: OAuthProviderDef[] = [
@@ -94,9 +107,16 @@ const OAUTH_PROVIDERS: OAuthProviderDef[] = [
     descriptionKey: 'admin.authentication.microsoft.description',
     enabledSettingKey: 'auth_microsoft_enabled',
   },
+  {
+    provider: 'sso',
+    titleKey: 'admin.authentication.sso.title',
+    descriptionKey: 'admin.authentication.sso.description',
+    enabledSettingKey: 'auth_sso_enabled',
+    sso: true,
+  },
 ]
 
-const DEFAULT_PROVIDER_ORDER = ['discord', 'google', 'github', 'microsoft']
+const DEFAULT_PROVIDER_ORDER = ['discord', 'google', 'github', 'microsoft', 'sso']
 
 function sortProviders(providers: OAuthProviderDef[], order: string[]): OAuthProviderDef[] {
   const orderMap = new Map(order.map((p, i) => [p, i]))
@@ -112,6 +132,7 @@ function OAuthProviderCard({
   titleKey,
   descriptionKey,
   enabledSettingKey,
+  sso,
   enabled,
   onToggleEnabled,
   isFirst,
@@ -123,6 +144,7 @@ function OAuthProviderCard({
   titleKey: string
   descriptionKey: string
   enabledSettingKey: string
+  sso: boolean
   enabled: boolean
   onToggleEnabled: (key: string, value: boolean) => void
   isFirst: boolean
@@ -139,25 +161,28 @@ function OAuthProviderCard({
   const [saveError, setSaveError] = useState('')
   const [secretTouched, setSecretTouched] = useState(false)
 
-  const cfg = localConfig ?? savedConfig ?? emptyConfig
-  const hasExistingConfig = !!(savedConfig && savedConfig.client_id)
+  const cfg = localConfig ?? savedConfig ?? (sso ? emptySSOConfig : emptyConfig)
+  // A custom SSO provider is unusable until its issuer can be discovered, so
+  // an issuer-less config counts as unconfigured even when credentials exist.
+  const hasExistingConfig = !!(savedConfig && savedConfig.client_id && (!sso || savedConfig.issuer))
 
   const updateField = <K extends keyof OAuthProviderConfig>(field: K, value: OAuthProviderConfig[K]) => {
-    setLocalConfig((prev) => ({ ...(prev ?? savedConfig ?? emptyConfig), [field]: value }))
+    setLocalConfig((prev) => ({ ...(prev ?? savedConfig ?? (sso ? emptySSOConfig : emptyConfig)), [field]: value }))
     setSaved(false)
     setSaveError('')
   }
 
   const isDirty = localConfig !== null || secretTouched
 
-  const isFormComplete = () => {
-    return (
-      cfg.client_id.trim() !== '' &&
-      (cfg.client_secret !== '' || (hasExistingConfig && savedConfig?.client_secret === PASSWORD_MASK && !secretTouched))
-    )
-  }
+  const hasCredentials =
+    cfg.client_id.trim() !== '' &&
+    (cfg.client_secret !== '' ||
+      (hasExistingConfig && savedConfig?.client_secret === PASSWORD_MASK && !secretTouched))
 
-  const canSave = isDirty && isFormComplete()
+  const canSave =
+    isDirty &&
+    hasCredentials &&
+    (!sso || (cfg.issuer ?? '').trim() !== '')
 
   const handleSave = () => {
     setSaved(false)
@@ -174,7 +199,7 @@ function OAuthProviderCard({
         setLocalConfig(null)
         setSecretTouched(false)
       },
-      onError: () => setSaveError(t('admin.authentication.oauth.saveError')),
+      onError: (err) => setSaveError(getOAuthConfigError(err, t)),
     })
   }
 
@@ -208,10 +233,10 @@ function OAuthProviderCard({
             type="button"
             disabled={isFirst}
             onClick={onMoveUp}
-            className="group relative rounded p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:cursor-not-allowed"
+            className="group relative rounded p-0.5 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] disabled:opacity-30 disabled:cursor-not-allowed"
           >
             <ArrowUp className="h-4 w-4" />
-            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 hidden group-hover:block whitespace-nowrap rounded bg-gray-900 dark:bg-gray-700 px-2 py-1 text-xs text-white shadow-lg">
+            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 hidden group-hover:block whitespace-nowrap rounded bg-[var(--background)] bg-[var(--surface-secondary)] px-2 py-1 text-xs text-white shadow-lg">
               {t('admin.authentication.oauth.changeOrder')}
             </span>
           </button>
@@ -219,10 +244,10 @@ function OAuthProviderCard({
             type="button"
             disabled={isLast}
             onClick={onMoveDown}
-            className="group relative rounded p-0.5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 disabled:opacity-30 disabled:cursor-not-allowed"
+            className="group relative rounded p-0.5 text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] disabled:opacity-30 disabled:cursor-not-allowed"
           >
             <ArrowDown className="h-4 w-4" />
-            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 hidden group-hover:block whitespace-nowrap rounded bg-gray-900 dark:bg-gray-700 px-2 py-1 text-xs text-white shadow-lg">
+            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 hidden group-hover:block whitespace-nowrap rounded bg-[var(--background)] bg-[var(--surface-secondary)] px-2 py-1 text-xs text-white shadow-lg">
               {t('admin.authentication.oauth.changeOrder')}
             </span>
           </button>
@@ -255,6 +280,80 @@ function OAuthProviderCard({
         }}
       />
       <RedirectUriField provider={provider} />
+
+      {sso && (
+        <>
+          <div className="border-t border-[var(--border)] my-4" />
+          <div>
+            <Input
+              label={t('admin.authentication.sso.issuer')}
+              placeholder={t('admin.authentication.sso.issuerPlaceholder')}
+              value={cfg.issuer ?? ''}
+              onChange={(e) => updateField('issuer', e.target.value)}
+            />
+            <p className="text-xs text-[var(--foreground-secondary)] mt-1">
+              {t('admin.authentication.sso.issuerHelp')}
+            </p>
+          </div>
+          <div>
+            <Input
+              label={t('admin.authentication.sso.scopes')}
+              placeholder={t('admin.authentication.sso.scopesPlaceholder')}
+              value={(cfg.scopes ?? []).join(', ')}
+              onChange={(e) => {
+                const scopes = e.target.value
+                  .split(/[\s,]+/)
+                  .map((s) => s.trim())
+                  .filter((s) => s.length > 0)
+                updateField('scopes', scopes)
+              }}
+            />
+            <p className="text-xs text-[var(--foreground-secondary)] mt-1">
+              {t('admin.authentication.sso.scopesHelp')}
+            </p>
+          </div>
+          <div>
+            <Input
+              label={t('admin.authentication.sso.buttonLabel')}
+              placeholder={t('admin.authentication.sso.buttonLabelPlaceholder')}
+              value={cfg.button_label ?? ''}
+              onChange={(e) => updateField('button_label', e.target.value)}
+              maxLength={40}
+            />
+            <p className="text-xs text-[var(--foreground-secondary)] mt-1">
+              {t('admin.authentication.sso.buttonLabelHelp')}
+            </p>
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-[var(--foreground)]">
+                {t('admin.authentication.sso.disablePKCE')}
+              </label>
+              <p className="text-xs text-[var(--foreground-secondary)] mt-1">
+                {t('admin.authentication.sso.disablePKCEHelp')}
+              </p>
+            </div>
+            <Toggle
+              enabled={cfg.disable_pkce ?? false}
+              onChange={(val) => updateField('disable_pkce', val)}
+            />
+          </div>
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <label className="block text-sm font-medium text-[var(--foreground)]">
+                {t('admin.authentication.sso.requireVerifiedEmail')}
+              </label>
+              <p className="text-xs text-[var(--foreground-secondary)] mt-1">
+                {t('admin.authentication.sso.requireVerifiedEmailHelp')}
+              </p>
+            </div>
+            <Toggle
+              enabled={cfg.require_verified_email ?? true}
+              onChange={(val) => updateField('require_verified_email', val)}
+            />
+          </div>
+        </>
+      )}
     </ExpandableConfigCard>
   )
 }
@@ -266,11 +365,7 @@ export function SystemAuthenticationPage() {
   const setSetting = useSetSystemSetting()
 
   if (settingsLoading || smtpLoading) {
-    return (
-      <div className="flex justify-center py-12">
-        <Spinner />
-      </div>
-    )
+    return <LoadingState />
   }
 
   const settings = publicSettings ?? {}
@@ -301,8 +396,11 @@ export function SystemAuthenticationPage() {
     auth_google_enabled: settings.auth_google_enabled === true,
     auth_github_enabled: settings.auth_github_enabled === true,
     auth_microsoft_enabled: settings.auth_microsoft_enabled === true,
+    auth_sso_enabled: settings.auth_sso_enabled === true,
   }
 
+  const ssoAutoProvisionEnabled = settings.sso_auto_provision_enabled === true
+
   const handleReorder = (index: number, direction: 'up' | 'down') => {
     const currentOrder = sortedProviders.map((p) => p.provider)
     const swapIdx = direction === 'up' ? index - 1 : index + 1
@@ -313,27 +411,27 @@ export function SystemAuthenticationPage() {
   return (
     <div className="max-w-3xl space-y-6">
       <div className="mb-6">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+        <h2 className="text-xl font-semibold text-[var(--foreground)]">
           {t('admin.authentication.title')}
         </h2>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
           {t('admin.authentication.description')}
         </p>
       </div>
 
       {/* Email & Password section */}
-      <h3 className="text-base font-medium text-gray-700 dark:text-gray-300 pt-2">
+      <h3 className="text-base font-medium text-[var(--foreground)] pt-2">
         {t('admin.authentication.section.emailPassword')}
       </h3>
 
       {/* Email/Password Login */}
-      <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-6">
+      <div className="rounded-lg border border-[var(--border)] p-6">
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
+            <h3 className="text-lg font-medium text-[var(--foreground)]">
               {t('admin.authentication.emailLogin.title')}
             </h3>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
               {t('admin.authentication.emailLogin.description')}
             </p>
           </div>
@@ -345,13 +443,13 @@ export function SystemAuthenticationPage() {
       </div>
 
       {/* Email Registration */}
-      <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-6">
+      <div className="rounded-lg border border-[var(--border)] p-6">
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
+            <h3 className="text-lg font-medium text-[var(--foreground)]">
               {t('admin.authentication.emailRegistration.title')}
             </h3>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
               {t('admin.authentication.emailRegistration.description')}
             </p>
           </div>
@@ -370,10 +468,10 @@ export function SystemAuthenticationPage() {
       </div>
 
       {/* OAuth Providers section */}
-      <h3 className="text-base font-medium text-gray-700 dark:text-gray-300 pt-2">
+      <h3 className="text-base font-medium text-[var(--foreground)] pt-2">
         {t('admin.authentication.section.oauth')}
       </h3>
-      <p className="text-sm text-gray-500 dark:text-gray-400 -mt-4">
+      <p className="text-sm text-[var(--foreground-secondary)] -mt-4">
         {t('admin.authentication.section.oauthDescription')}
       </p>
 
@@ -384,6 +482,7 @@ export function SystemAuthenticationPage() {
           titleKey={def.titleKey}
           descriptionKey={def.descriptionKey}
           enabledSettingKey={def.enabledSettingKey}
+          sso={def.sso ?? false}
           enabled={enabledMap[def.enabledSettingKey]}
           onToggleEnabled={handleToggle}
           isFirst={idx === 0}
@@ -392,6 +491,24 @@ export function SystemAuthenticationPage() {
           onMoveDown={() => handleReorder(idx, 'down')}
         />
       ))}
+
+      {/* SSO Auto-provision setting */}
+      <div className="rounded-lg border border-[var(--border)] p-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="text-lg font-medium text-[var(--foreground)]">
+              {t('admin.authentication.sso.autoProvision')}
+            </h3>
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
+              {t('admin.authentication.sso.autoProvisionHelp')}
+            </p>
+          </div>
+          <Toggle
+            enabled={ssoAutoProvisionEnabled}
+            onChange={(val) => handleToggle('sso_auto_provision_enabled', val)}
+          />
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/web/src/pages/SystemDirectoryPage.tsx b/web/src/pages/SystemDirectoryPage.tsx
index 689c33ed..bbec1225 100644
--- a/web/src/pages/SystemDirectoryPage.tsx
+++ b/web/src/pages/SystemDirectoryPage.tsx
@@ -135,7 +135,7 @@ export function SystemDirectoryPage() {
       sortKey: 'name',
       header: t('admin.directory.col.name'),
       hiddenOnMobile: true,
-      render: (row) => <span className="text-gray-900 dark:text-gray-100 font-medium">{row.name}</span>,
+      render: (row) => <span className="text-[var(--foreground)] font-medium">{row.name}</span>,
     },
     {
       key: 'namespace',
@@ -143,7 +143,7 @@ export function SystemDirectoryPage() {
       header: t('admin.directory.col.namespace'),
       hiddenOnMobile: true,
       render: (row) => (
-        <span className="text-gray-600 dark:text-gray-400">{row.namespace_display_name}</span>
+        <span className="text-[var(--foreground-secondary)]">{row.namespace_display_name}</span>
       ),
     },
     {
@@ -153,8 +153,8 @@ export function SystemDirectoryPage() {
       hiddenOnMobile: true,
       render: (row) => (
         <div>
-          <div className="text-gray-900 dark:text-gray-100">{row.owner_display_name}</div>
-          <div className="text-xs text-gray-500 dark:text-gray-400">{row.owner_email}</div>
+          <div className="text-[var(--foreground)]">{row.owner_display_name}</div>
+          <div className="text-xs text-[var(--foreground-secondary)]">{row.owner_email}</div>
         </div>
       ),
     },
@@ -163,21 +163,21 @@ export function SystemDirectoryPage() {
       sortKey: 'members',
       header: t('admin.directory.col.members'),
       className: 'w-24',
-      render: (row) => <span className="text-gray-600 dark:text-gray-400">{row.member_count}</span>,
+      render: (row) => <span className="text-[var(--foreground-secondary)]">{row.member_count}</span>,
     },
     {
       key: 'items',
       sortKey: 'items',
       header: t('admin.directory.col.items'),
       className: 'w-20',
-      render: (row) => <span className="text-gray-600 dark:text-gray-400">{row.item_count}</span>,
+      render: (row) => <span className="text-[var(--foreground-secondary)]">{row.item_count}</span>,
     },
     {
       key: 'storage',
       sortKey: 'storage',
       header: t('admin.directory.col.storage'),
       className: 'w-24',
-      render: (row) => <span className="text-gray-600 dark:text-gray-400">{formatStorageBytes(row.storage_bytes)}</span>,
+      render: (row) => <span className="text-[var(--foreground-secondary)]">{formatStorageBytes(row.storage_bytes)}</span>,
     },
     {
       key: 'created',
@@ -185,7 +185,7 @@ export function SystemDirectoryPage() {
       header: t('admin.directory.col.created'),
       className: 'w-28',
       hiddenOnMobile: true,
-      render: (row) => <span className="text-gray-500 dark:text-gray-400">{formatRelativeTime(row.created_at)}</span>,
+      render: (row) => <span className="text-[var(--foreground-secondary)]">{formatRelativeTime(row.created_at)}</span>,
     },
   ]
 
@@ -202,7 +202,7 @@ export function SystemDirectoryPage() {
       sortKey: 'displayName',
       header: t('admin.directory.col.displayName'),
       hiddenOnMobile: true,
-      render: (row) => <span className="text-gray-900 dark:text-gray-100 font-medium">{row.display_name}</span>,
+      render: (row) => <span className="text-[var(--foreground)] font-medium">{row.display_name}</span>,
     },
     {
       key: 'default',
@@ -216,14 +216,14 @@ export function SystemDirectoryPage() {
       sortKey: 'projects',
       header: t('admin.directory.col.projects'),
       className: 'w-24',
-      render: (row) => <span className="text-gray-600 dark:text-gray-400">{row.project_count}</span>,
+      render: (row) => <span className="text-[var(--foreground-secondary)]">{row.project_count}</span>,
     },
     {
       key: 'members',
       sortKey: 'members',
       header: t('admin.directory.col.members'),
       className: 'w-24',
-      render: (row) => <span className="text-gray-600 dark:text-gray-400">{row.member_count}</span>,
+      render: (row) => <span className="text-[var(--foreground-secondary)]">{row.member_count}</span>,
     },
     {
       key: 'storage',
@@ -231,7 +231,7 @@ export function SystemDirectoryPage() {
       header: t('admin.directory.col.storage'),
       className: 'w-24',
       hiddenOnMobile: true,
-      render: (row) => <span className="text-gray-600 dark:text-gray-400">{formatStorageBytes(row.storage_bytes)}</span>,
+      render: (row) => <span className="text-[var(--foreground-secondary)]">{formatStorageBytes(row.storage_bytes)}</span>,
     },
     {
       key: 'created',
@@ -239,7 +239,7 @@ export function SystemDirectoryPage() {
       header: t('admin.directory.col.created'),
       className: 'w-28',
       hiddenOnMobile: true,
-      render: (row) => <span className="text-gray-500 dark:text-gray-400">{formatRelativeTime(row.created_at)}</span>,
+      render: (row) => <span className="text-[var(--foreground-secondary)]">{formatRelativeTime(row.created_at)}</span>,
     },
   ]
 
@@ -269,28 +269,28 @@ export function SystemDirectoryPage() {
     <div>
       <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
         <div>
-          <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">{t('admin.directory.title')}</h2>
-          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('admin.directory.description')}</p>
+          <h2 className="text-xl font-semibold text-[var(--foreground)]">{t('admin.directory.title')}</h2>
+          <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('admin.directory.description')}</p>
         </div>
         {/* Mobile: single bordered row with horizontal scroll */}
-        <ScrollableRow className="sm:hidden rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2" gradientFrom="from-white dark:from-gray-900">
+        <ScrollableRow className="sm:hidden rounded-lg border border-[var(--border)] px-3 py-2" gradientFrom="from-white dark:from-gray-900">
           {statCards.map((card, i) => (
-            <div key={card.label} className={`flex items-center gap-1.5 shrink-0 ${i < statCards.length - 1 ? 'pr-3 border-r border-gray-200 dark:border-gray-700' : ''}`}>
-              <card.icon className="h-3.5 w-3.5 text-indigo-400" />
-              <span className="text-sm font-bold text-gray-900 dark:text-gray-100">{card.value}</span>
-              <span className="text-xs text-gray-500 dark:text-gray-400">{card.label}</span>
+            <div key={card.label} className={`flex items-center gap-1.5 shrink-0 ${i < statCards.length - 1 ? 'pr-3 border-r border-[var(--border)]' : ''}`}>
+              <card.icon className="h-3.5 w-3.5 text-[var(--primary)]" />
+              <span className="text-sm font-bold text-[var(--foreground)]">{card.value}</span>
+              <span className="text-xs text-[var(--foreground-secondary)]">{card.label}</span>
             </div>
           ))}
         </ScrollableRow>
         {/* Desktop: individual cards */}
         <div className="hidden sm:grid grid-cols-4 gap-3">
           {statCards.map((card) => (
-            <div key={card.label} className="rounded-lg border border-gray-200 dark:border-gray-700 p-3 text-center min-w-[100px]">
+            <div key={card.label} className="rounded-lg border border-[var(--border)] p-3 text-center min-w-[100px]">
               <div className="flex items-center justify-center gap-2">
-                <card.icon className="h-4 w-4 text-indigo-400" />
-                <span className="text-xl font-bold text-gray-900 dark:text-gray-100">{card.value}</span>
+                <card.icon className="h-4 w-4 text-[var(--primary)]" />
+                <span className="text-xl font-bold text-[var(--foreground)]">{card.value}</span>
               </div>
-              <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{card.label}</div>
+              <div className="text-xs text-[var(--foreground-secondary)] mt-0.5">{card.label}</div>
             </div>
           ))}
         </div>
@@ -413,11 +413,11 @@ function ProjectLimitSection() {
   }
 
   return (
-    <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-4 sm:p-6">
-      <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+    <div className="rounded-lg border border-[var(--border)] p-4 sm:p-6">
+      <h3 className="text-sm font-medium text-[var(--foreground)]">
         {t('admin.general.projectLimit.title')}
       </h3>
-      <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+      <p className="mt-1 text-xs text-[var(--foreground-secondary)]">
         {t('admin.general.projectLimit.help')}
       </p>
       <div className="mt-4 flex items-end gap-3">
@@ -472,11 +472,11 @@ function NamespaceLimitSection() {
   }
 
   return (
-    <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-4 sm:p-6">
-      <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+    <div className="rounded-lg border border-[var(--border)] p-4 sm:p-6">
+      <h3 className="text-sm font-medium text-[var(--foreground)]">
         {t('admin.general.namespaceLimit.title')}
       </h3>
-      <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+      <p className="mt-1 text-xs text-[var(--foreground-secondary)]">
         {t('admin.general.namespaceLimit.help')}
       </p>
       <div className="mt-4 flex items-end gap-3">
@@ -545,9 +545,9 @@ function ReservedListSection({
   }
 
   return (
-    <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-4 sm:p-6">
-      <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">{title}</h3>
-      <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">{description}</p>
+    <div className="rounded-lg border border-[var(--border)] p-4 sm:p-6">
+      <h3 className="text-sm font-medium text-[var(--foreground)]">{title}</h3>
+      <p className="mt-1 text-xs text-[var(--foreground-secondary)]">{description}</p>
 
       <div className="mt-4 flex gap-2">
         <Input
@@ -562,24 +562,24 @@ function ReservedListSection({
           {t('admin.directory.settings.add')}
         </Button>
       </div>
-      {error && <p className="mt-1 text-xs text-red-500">{error}</p>}
+      {error && <p className="mt-1 text-xs text-[var(--danger)]">{error}</p>}
 
       <div className="mt-3">
         {isLoading ? (
           <Spinner />
         ) : list.length === 0 ? (
-          <p className="text-sm text-gray-500 dark:text-gray-400">{emptyMessage}</p>
+          <p className="text-sm text-[var(--foreground-secondary)]">{emptyMessage}</p>
         ) : (
           <div className="flex flex-wrap gap-2">
             {list.map((item) => (
               <span
                 key={item}
-                className="inline-flex items-center gap-1 rounded-md bg-gray-100 dark:bg-gray-800 px-2.5 py-1 text-sm font-medium text-gray-700 dark:text-gray-300"
+                className="inline-flex items-center gap-1 rounded-md bg-[var(--surface-secondary)] px-2.5 py-1 text-sm font-medium text-[var(--foreground)]"
               >
                 {item}
                 <button
                   onClick={() => handleRemove(item)}
-                  className="ml-0.5 rounded p-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+                  className="ml-0.5 rounded p-0.5 hover:bg-[var(--surface-tertiary)] hover:bg-[var(--surface-hover)] text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors"
                 >
                   <X className="h-3 w-3" />
                 </button>
diff --git a/web/src/pages/SystemFeaturesPage.tsx b/web/src/pages/SystemFeaturesPage.tsx
index ebcc916d..0aa34a3a 100644
--- a/web/src/pages/SystemFeaturesPage.tsx
+++ b/web/src/pages/SystemFeaturesPage.tsx
@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import { FlaskConical } from 'lucide-react'
 import { usePublicSettings, useSetSystemSetting } from '@/hooks/useSystemSettings'
 import { Toggle } from '@/components/ui/Toggle'
-import { Spinner } from '@/components/ui/Spinner'
+import { LoadingState } from '@/components/ui/LoadingState'
 
 export function SystemFeaturesPage() {
   const { t } = useTranslation()
@@ -10,11 +10,7 @@ export function SystemFeaturesPage() {
   const setSetting = useSetSystemSetting()
 
   if (isLoading) {
-    return (
-      <div className="flex justify-center py-12">
-        <Spinner />
-      </div>
-    )
+    return <LoadingState />
   }
 
   const settings = publicSettings ?? {}
@@ -36,22 +32,22 @@ export function SystemFeaturesPage() {
   return (
     <div className="max-w-3xl space-y-6">
       <div className="mb-6">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+        <h2 className="text-xl font-semibold text-[var(--foreground)]">
           {t('admin.features.title')}
         </h2>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
           {t('admin.features.description')}
         </p>
       </div>
 
       {/* Activity Graph */}
-      <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-6">
+      <div className="rounded-lg border border-[var(--border)] p-6">
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
+            <h3 className="text-lg font-medium text-[var(--foreground)]">
               {t('admin.features.statsTimeline.title')}
             </h3>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
               {t('admin.features.statsTimeline.description')}
             </p>
           </div>
@@ -63,17 +59,17 @@ export function SystemFeaturesPage() {
       </div>
 
       {/* Semantic Search */}
-      <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-6">
+      <div className="rounded-lg border border-[var(--border)] p-6">
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2">
+            <h3 className="text-lg font-medium text-[var(--foreground)] flex items-center gap-2">
               {t('admin.features.semanticSearch.title')}
-              <span className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium bg-gray-100 text-gray-500 dark:bg-gray-700/50 dark:text-gray-400">
+              <span className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium bg-[var(--surface-tertiary)] text-[var(--foreground-secondary)] bg-[var(--surface-secondary)]/50 text-[var(--foreground-muted)]">
                 <FlaskConical className="h-3 w-3" />
                 {t('common.experimental')}
               </span>
             </h3>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
               {t('admin.features.semanticSearch.description')}
             </p>
             {ollamaAvailable !== undefined && (
@@ -92,13 +88,13 @@ export function SystemFeaturesPage() {
         </div>
       </div>
       {/* Namespaces */}
-      <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-6">
+      <div className="rounded-lg border border-[var(--border)] p-6">
         <div className="flex items-center justify-between">
           <div>
-            <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
+            <h3 className="text-lg font-medium text-[var(--foreground)]">
               {t('admin.features.namespaces.title')}
             </h3>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
               {t('admin.features.namespaces.description')}
             </p>
             {hasCustomNamespaces > 0 && namespacesEnabled && (
diff --git a/web/src/pages/SystemGeneralPage.tsx b/web/src/pages/SystemGeneralPage.tsx
index d623315c..647a8405 100644
--- a/web/src/pages/SystemGeneralPage.tsx
+++ b/web/src/pages/SystemGeneralPage.tsx
@@ -4,7 +4,7 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useSystemSetting, useSetSystemSetting } from '@/hooks/useSystemSettings'
 import { Input } from '@/components/ui/Input'
 import { Button } from '@/components/ui/Button'
-import { Spinner } from '@/components/ui/Spinner'
+import { LoadingState } from '@/components/ui/LoadingState'
 
 export function SystemGeneralPage() {
   const { t } = useTranslation()
@@ -37,26 +37,22 @@ export function SystemGeneralPage() {
   const brandDirty = brandName !== (savedBrandName ?? '')
 
   if (isLoading) {
-    return (
-      <div className="flex justify-center py-12">
-        <Spinner />
-      </div>
-    )
+    return <LoadingState />
   }
 
   return (
     <div className="max-w-3xl space-y-6">
       <div className="mb-6">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+        <h2 className="text-xl font-semibold text-[var(--foreground)]">
           {t('admin.general.title')}
         </h2>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
           {t('admin.general.description')}
         </p>
       </div>
 
-      <div className="rounded-lg border border-gray-200 dark:border-gray-700 p-6">
-        <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
+      <div className="rounded-lg border border-[var(--border)] p-6">
+        <h3 className="text-lg font-medium text-[var(--foreground)] mb-4">
           {t('admin.general.brand.title')}
         </h3>
 
@@ -70,7 +66,7 @@ export function SystemGeneralPage() {
             }}
             placeholder="Taskwondo"
           />
-          <p className="text-sm text-gray-500 dark:text-gray-400">
+          <p className="text-sm text-[var(--foreground-secondary)]">
             {t('admin.general.brand.nameHelp')}
           </p>
 
diff --git a/web/src/pages/SystemIntegrationsPage.tsx b/web/src/pages/SystemIntegrationsPage.tsx
index b0dfb8a0..6a1dabdc 100644
--- a/web/src/pages/SystemIntegrationsPage.tsx
+++ b/web/src/pages/SystemIntegrationsPage.tsx
@@ -4,7 +4,7 @@ import { useSMTPConfig, useSetSMTPConfig, useTestSMTP } from '@/hooks/useSystemS
 import type { SMTPConfig } from '@/api/systemSettings'
 import { Input } from '@/components/ui/Input'
 import { Button } from '@/components/ui/Button'
-import { Spinner } from '@/components/ui/Spinner'
+import { LoadingState } from '@/components/ui/LoadingState'
 import { ExpandableConfigCard } from '@/components/ui/ExpandableConfigCard'
 
 const PASSWORD_MASK = '••••••••'
@@ -20,6 +20,7 @@ const defaultConfig: SMTPConfig = {
   encryption: 'starttls',
   from_address: '',
   from_name: '',
+  skip_cert_verify: false,
 }
 
 export function SystemIntegrationsPage() {
@@ -102,11 +103,7 @@ export function SystemIntegrationsPage() {
   const canTest = cfg.enabled && isFormComplete() && !isDirty
 
   if (isLoading) {
-    return (
-      <div className="flex justify-center py-12">
-        <Spinner />
-      </div>
-    )
+    return <LoadingState />
   }
 
   const encryptionOptions: { value: SMTPConfig['encryption']; label: string }[] = [
@@ -118,10 +115,10 @@ export function SystemIntegrationsPage() {
   return (
     <div className="max-w-3xl space-y-6">
       <div className="mb-6">
-        <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100">
+        <h2 className="text-xl font-semibold text-[var(--foreground)]">
           {t('admin.integrations.title')}
         </h2>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+        <p className="mt-1 text-sm text-[var(--foreground-secondary)]">
           {t('admin.integrations.description')}
         </p>
       </div>
@@ -157,7 +154,7 @@ export function SystemIntegrationsPage() {
               </span>
             )}
             {testError && (
-              <span className="text-sm text-red-600 dark:text-red-400">{testError}</span>
+              <span className="text-sm text-[var(--danger)]">{testError}</span>
             )}
           </>
         }
@@ -203,13 +200,13 @@ export function SystemIntegrationsPage() {
           </div>
 
           <div>
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+            <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
               {t('admin.integrations.smtp.encryption')}
             </label>
             <select
               value={cfg.encryption}
               onChange={(e) => updateField('encryption', e.target.value as SMTPConfig['encryption'])}
-              className="block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
+              className="block w-full rounded-md border border-[var(--border)] bg-white px-3 py-2 text-sm focus:border-[var(--primary)] focus:outline-none focus:ring-1 focus:ring-[var(--focus-ring)] dark:border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)]"
             >
               {encryptionOptions.map((opt) => (
                 <option key={opt.value} value={opt.value}>
@@ -219,6 +216,25 @@ export function SystemIntegrationsPage() {
             </select>
           </div>
 
+          {(cfg.encryption === 'tls' || cfg.encryption === 'starttls') && (
+            <label className="flex items-start gap-3 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={cfg.skip_cert_verify}
+                onChange={(e) => updateField('skip_cert_verify', e.target.checked)}
+                className="mt-0.5 h-4 w-4 rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)] dark:border-[var(--border)] bg-[var(--surface)]"
+              />
+              <div className="flex-1 min-w-0">
+                <div className="text-sm font-medium text-[var(--foreground)]">
+                  {t('admin.integrations.smtp.skipCertVerify')}
+                </div>
+                <p className="text-xs text-[var(--foreground-secondary)]">
+                  {t('admin.integrations.smtp.skipCertVerifyHelp')}
+                </p>
+              </div>
+            </label>
+          )}
+
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
             <Input
               label={t('admin.integrations.smtp.fromAddress')}
@@ -236,11 +252,11 @@ export function SystemIntegrationsPage() {
           </div>
 
           {/* IMAP section */}
-          <div className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
-            <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          <div className="border-t border-[var(--border)] pt-4 mt-4">
+            <h4 className="text-sm font-medium text-[var(--foreground)] mb-1">
               {t('admin.integrations.smtp.imapSection')}
             </h4>
-            <p className="text-xs text-gray-500 dark:text-gray-400 mb-3">
+            <p className="text-xs text-[var(--foreground-secondary)] mb-3">
               {t('admin.integrations.smtp.imapHelp')}
             </p>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
diff --git a/web/src/pages/SystemSettingsPage.tsx b/web/src/pages/SystemSettingsPage.tsx
index 7009c529..4e3f993b 100644
--- a/web/src/pages/SystemSettingsPage.tsx
+++ b/web/src/pages/SystemSettingsPage.tsx
@@ -46,8 +46,8 @@ export function SystemSettingsPage() {
             className={({ isActive }) =>
               `flex shrink-0 flex-col items-center gap-1 py-3 px-4 text-xs font-medium transition-colors ${
                 isActive
-                  ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
-                  : 'text-gray-500 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800'
+                  ? 'bg-[var(--primary-muted)] text-[var(--primary)]  dark:text-[var(--primary)]'
+                  : 'text-[var(--foreground-secondary)] hover:bg-[var(--surface-secondary)] text-[var(--foreground-muted)] dark:hover:bg-[var(--surface)]'
               }`
             }
           >
diff --git a/web/src/pages/SystemWorkflowsPage.tsx b/web/src/pages/SystemWorkflowsPage.tsx
index 4c4ccd73..a65cc864 100644
--- a/web/src/pages/SystemWorkflowsPage.tsx
+++ b/web/src/pages/SystemWorkflowsPage.tsx
@@ -77,14 +77,14 @@ export function SystemWorkflowsPage() {
   return (
     <div className="max-w-3xl space-y-6">
       <div>
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('admin.workflows.title')}</h2>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('admin.workflows.description')}</p>
+        <h2 className="text-lg font-semibold text-[var(--foreground)]">{t('admin.workflows.title')}</h2>
+        <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('admin.workflows.description')}</p>
       </div>
 
       {/* Workflow Definitions */}
       <div>
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-medium text-gray-500 dark:text-gray-400">
+          <h3 className="text-sm font-medium text-[var(--foreground-secondary)]">
             {t('workflows.definitionsTitle')}
           </h3>
           <Button onClick={() => openEditor()} className="border border-transparent">
@@ -95,22 +95,22 @@ export function SystemWorkflowsPage() {
       </div>
 
       {(!workflows || workflows.length === 0) ? (
-        <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('admin.workflows.noWorkflows')}</p>
+        <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('admin.workflows.noWorkflows')}</p>
           <Button size="sm" variant="secondary" className="mt-3" onClick={() => openEditor()}>
             <Plus className="h-4 w-4 mr-1" />
             {t('workflows.createFirst')}
           </Button>
         </div>
       ) : (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
           {workflows.map((wf) => (
             <div key={wf.id} className="p-4">
               <div className="flex items-center justify-between mb-2">
                 <div>
-                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{wf.name}</span>
+                  <span className="text-sm font-medium text-[var(--foreground)]">{wf.name}</span>
                   {wf.description && (
-                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{wf.description}</p>
+                    <p className="text-xs text-[var(--foreground-secondary)] mt-0.5">{wf.description}</p>
                   )}
                 </div>
                 <div className="flex items-center gap-1">
@@ -125,12 +125,10 @@ export function SystemWorkflowsPage() {
                       <Pencil className="h-3.5 w-3.5" />
                     </Button>
                   </Tooltip>
-                  <Tooltip content={wf.is_default ? t('admin.workflows.cannotDeleteDefault') : t('common.delete')}>
-                    <span>
-                      <Button variant="ghost" size="sm" onClick={() => setDeleteTarget({ id: wf.id, name: wf.name })} disabled={wf.is_default}>
-                        <Trash2 className={`h-3.5 w-3.5 ${wf.is_default ? 'text-gray-300 dark:text-gray-600' : 'text-red-500'}`} />
-                      </Button>
-                    </span>
+                  <Tooltip content={t('common.delete')}>
+                    <Button variant="ghost" size="sm" onClick={() => setDeleteTarget({ id: wf.id, name: wf.name })}>
+                      <Trash2 className="h-3.5 w-3.5 text-[var(--danger)]" />
+                    </Button>
                   </Tooltip>
                 </div>
               </div>
@@ -148,16 +146,16 @@ export function SystemWorkflowsPage() {
 
       {/* Default Workflow Mapping */}
       <div>
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('admin.workflows.defaultMappingTitle')}</h2>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('admin.workflows.defaultMappingDescription')}</p>
+        <h2 className="text-lg font-semibold text-[var(--foreground)]">{t('admin.workflows.defaultMappingTitle')}</h2>
+        <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('admin.workflows.defaultMappingDescription')}</p>
       </div>
 
-      <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+      <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
         {['task', 'ticket', 'bug', 'feedback', 'epic'].map((itemType) => {
           const currentWfId = (defaultTypeWorkflows as Record<string, string> | undefined)?.[itemType] ?? ''
           return (
             <div key={itemType} className="flex items-center justify-between p-3">
-              <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              <span className="text-sm font-medium text-[var(--foreground)]">
                 {t(`workitems.types.${itemType}`)}
               </span>
               <div className="flex items-center gap-2">
@@ -165,7 +163,7 @@ export function SystemWorkflowsPage() {
                   <Check className="h-5 w-5 text-green-500 animate-[pulse_0.6s_ease-in-out_2]" />
                 )}
                 <select
-                  className="min-w-0 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-60 disabled:cursor-not-allowed"
+                  className="min-w-0 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] disabled:opacity-60 disabled:cursor-not-allowed"
                   value={currentWfId}
                   onChange={(e) => {
                     const updated = { ...(defaultTypeWorkflows as Record<string, string> ?? {}), [itemType]: e.target.value }
@@ -217,7 +215,7 @@ export function SystemWorkflowsPage() {
 
       {/* Delete confirmation modal */}
       <Modal open={!!deleteTarget} onClose={() => setDeleteTarget(null)} title={t('workflows.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           {t('workflows.deleteConfirmBody', { name: deleteTarget?.name })}
         </p>
         <div className="flex justify-end gap-2">
@@ -252,11 +250,11 @@ function SystemWorkflowDetailModal({
       ) : (
         <div className="space-y-4">
           {workflow.description && (
-            <p className="text-sm text-gray-600 dark:text-gray-300">{workflow.description}</p>
+            <p className="text-sm text-[var(--foreground-secondary)]">{workflow.description}</p>
           )}
 
           <div>
-            <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">{t('workflows.statuses')}</h4>
+            <h4 className="text-sm font-medium text-[var(--foreground)] mb-2">{t('workflows.statuses')}</h4>
             <div className="flex flex-wrap gap-1.5">
               {workflow.statuses.map((s) => (
                 <Badge key={s.name} color={CATEGORY_COLORS[s.category] ?? 'gray'}>
@@ -267,25 +265,25 @@ function SystemWorkflowDetailModal({
           </div>
 
           <div>
-            <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">{t('workflows.transitions')}</h4>
+            <h4 className="text-sm font-medium text-[var(--foreground)] mb-2">{t('workflows.transitions')}</h4>
             {workflow.transitions.length === 0 ? (
-              <p className="text-sm text-gray-500 dark:text-gray-400">{t('workflows.noTransitions')}</p>
+              <p className="text-sm text-[var(--foreground-secondary)]">{t('workflows.noTransitions')}</p>
             ) : (
               <div className="space-y-1">
                 {workflow.transitions.map((tr) => {
                   const fromStatus = workflow.statuses.find((s) => s.name === tr.from_status)
                   const toStatus = workflow.statuses.find((s) => s.name === tr.to_status)
                   return (
-                    <div key={tr.id} className="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+                    <div key={tr.id} className="flex items-center gap-2 text-sm text-[var(--foreground)]">
                       <Badge color={CATEGORY_COLORS[fromStatus?.category ?? ''] ?? 'gray'}>
                         {t(`workitems.statuses.${tr.from_status}`, { defaultValue: fromStatus?.display_name ?? tr.from_status })}
                       </Badge>
-                      <ArrowRight className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+                      <ArrowRight className="h-3.5 w-3.5 text-[var(--foreground-muted)] shrink-0" />
                       <Badge color={CATEGORY_COLORS[toStatus?.category ?? ''] ?? 'gray'}>
                         {t(`workitems.statuses.${tr.to_status}`, { defaultValue: toStatus?.display_name ?? tr.to_status })}
                       </Badge>
                       {tr.name && (
-                        <span className="text-xs text-gray-400 ml-1">({tr.name})</span>
+                        <span className="text-xs text-[var(--foreground-muted)] ml-1">({tr.name})</span>
                       )}
                     </div>
                   )
@@ -490,7 +488,7 @@ function SystemWorkflowEditorModal({
     >
       <div className="space-y-5">
         {validationError && (
-          <p className="text-sm text-red-600 dark:text-red-400">{validationError}</p>
+          <p className="text-sm text-[var(--danger)]">{validationError}</p>
         )}
 
         {/* Name */}
@@ -503,12 +501,12 @@ function SystemWorkflowEditorModal({
 
         {/* Description */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
             {t('common.description')}
           </label>
           <textarea
             rows={2}
-            className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+            className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             placeholder={t('workflows.descriptionPlaceholder')}
@@ -517,7 +515,7 @@ function SystemWorkflowEditorModal({
 
         {/* Status Selection */}
         <div>
-          <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
             {t('workflows.selectStatuses')}
           </label>
           <div className="flex flex-wrap gap-2">
@@ -530,11 +528,11 @@ function SystemWorkflowEditorModal({
                   onClick={() => toggleStatus(status)}
                   className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium border transition-colors ${
                     isSelected
-                      ? 'bg-indigo-50 border-indigo-300 text-indigo-700 dark:bg-indigo-900/30 dark:border-indigo-600 dark:text-indigo-300'
-                      : 'bg-white border-gray-300 text-gray-600 hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700'
+                      ? 'bg-[var(--primary-muted)] border-[var(--primary-border)] text-[var(--primary)]   dark:text-[var(--primary)]'
+                      : 'bg-white border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-secondary)] dark:border-[var(--border)] text-[var(--foreground-muted)] hover:bg-[var(--surface-hover)]'
                   }`}
                 >
-                  {isSelected && <span className="text-indigo-500">&#10003;</span>}
+                  {isSelected && <span className="text-[var(--primary)]">&#10003;</span>}
                   {t(`workitems.statuses.${status.name}`, { defaultValue: status.display_name })}
                   <span className="text-[10px] opacity-60">({status.category})</span>
                 </button>
@@ -545,7 +543,7 @@ function SystemWorkflowEditorModal({
           {/* Selected statuses order */}
           {statuses.length > 0 && (
             <div className="mt-3">
-              <p className="text-xs text-gray-500 dark:text-gray-400 mb-1">{t('workflows.statusOrder')}</p>
+              <p className="text-xs text-[var(--foreground-secondary)] mb-1">{t('workflows.statusOrder')}</p>
               <div className="flex flex-wrap gap-1.5">
                 {[...statuses].sort((a, b) => a.position - b.position).map((s, idx) => (
                   <Badge key={s.name} color={CATEGORY_COLORS[s.category] ?? 'gray'}>
@@ -560,7 +558,7 @@ function SystemWorkflowEditorModal({
         {/* Transitions */}
         <div>
           <div className="flex items-center justify-between mb-2">
-            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="block text-sm font-medium text-[var(--foreground)]">
               {t('workflows.transitions')}
             </label>
             <Button
@@ -575,13 +573,13 @@ function SystemWorkflowEditorModal({
           </div>
 
           {transitions.length === 0 ? (
-            <p className="text-sm text-gray-500 dark:text-gray-400">{t('workflows.noTransitionsYet')}</p>
+            <p className="text-sm text-[var(--foreground-secondary)]">{t('workflows.noTransitionsYet')}</p>
           ) : (
             <div className="space-y-2">
               {transitions.map((tr, idx) => (
                 <div key={idx} className="flex items-center gap-2">
                   <select
-                    className="min-w-0 flex-1 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    className="min-w-0 flex-1 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                     value={tr.from_status}
                     onChange={(e) => updateTransition(idx, 'from_status', e.target.value)}
                   >
@@ -589,9 +587,9 @@ function SystemWorkflowEditorModal({
                       <option key={s.name} value={s.name}>{t(`workitems.statuses.${s.name}`, { defaultValue: s.display_name })}</option>
                     ))}
                   </select>
-                  <ArrowRight className="h-3.5 w-3.5 text-gray-400 shrink-0" />
+                  <ArrowRight className="h-3.5 w-3.5 text-[var(--foreground-muted)] shrink-0" />
                   <select
-                    className="min-w-0 flex-1 rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    className="min-w-0 flex-1 rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                     value={tr.to_status}
                     onChange={(e) => updateTransition(idx, 'to_status', e.target.value)}
                   >
@@ -601,14 +599,14 @@ function SystemWorkflowEditorModal({
                   </select>
                   <input
                     type="text"
-                    className="min-w-0 w-16 sm:w-28 shrink rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-2 py-1.5 text-xs shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    className="min-w-0 w-16 sm:w-28 shrink rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)]"
                     placeholder={t('workflows.transitionName')}
                     value={tr.name}
                     onChange={(e) => updateTransition(idx, 'name', e.target.value)}
                   />
                   <button
                     type="button"
-                    className="text-gray-400 hover:text-red-500 p-1"
+                    className="text-[var(--foreground-muted)] hover:text-[var(--danger)] p-1"
                     onClick={() => removeTransition(idx)}
                   >
                     <Trash2 className="h-3.5 w-3.5" />
@@ -620,7 +618,7 @@ function SystemWorkflowEditorModal({
         </div>
 
         {/* Actions */}
-        <div className="flex justify-end gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+        <div className="flex justify-end gap-2 pt-2 border-t border-[var(--border)]">
           <Button variant="secondary" onClick={onClose}>
             {t('common.cancel')}
           </Button>
diff --git a/web/src/pages/TeamDetailPage.tsx b/web/src/pages/TeamDetailPage.tsx
index 15b35b56..7106c26c 100644
--- a/web/src/pages/TeamDetailPage.tsx
+++ b/web/src/pages/TeamDetailPage.tsx
@@ -57,7 +57,7 @@ export function TeamDetailPage() {
   if (!team) {
     return (
       <div className="max-w-3xl">
-        <p className="text-red-600 dark:text-red-400">{t('teams.notFound')}</p>
+        <p className="text-[var(--danger)]">{t('teams.notFound')}</p>
       </div>
     )
   }
@@ -73,13 +73,13 @@ export function TeamDetailPage() {
       <div className="max-w-3xl">
         <Link
           to={p(`/projects/${projectKey}/settings?tab=teams`)}
-          className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
+          className="inline-flex items-center gap-1 text-sm text-[var(--foreground-muted)] hover:text-[var(--foreground)]"
         >
           <ArrowLeft className="h-3.5 w-3.5" />
           {t('sidebar.settings')} / {t('teams.title')}
         </Link>
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mt-1">{team.name}</h2>
-        <p className="text-sm text-gray-500 dark:text-gray-400">{t('teams.detail')}</p>
+        <h2 className="text-lg font-semibold text-[var(--foreground)] mt-1">{team.name}</h2>
+        <p className="text-sm text-[var(--foreground-secondary)]">{t('teams.detail')}</p>
       </div>
 
       <Tabs tabs={tabs} activeTab={activeTab} onTabChange={setActiveTab} />
@@ -174,7 +174,7 @@ function MembersTab({
 
   return (
     <div className="space-y-4">
-      <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('teams.members')}</h3>
+      <h3 className="text-sm font-medium text-[var(--foreground)]">{t('teams.members')}</h3>
 
       {canManage && (
         <div className="flex items-center gap-2" ref={dropdownRef}>
@@ -187,26 +187,26 @@ function MembersTab({
               className="h-10"
             />
             {dropdownOpen && search && (
-              <div className="absolute z-10 mt-1 w-full border border-gray-200 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 shadow-lg">
+              <div className="absolute z-10 mt-1 w-full border border-[var(--border)] rounded-md bg-[var(--surface)] shadow-lg">
                 <ul className="max-h-48 overflow-auto py-1">
                   {filteredAvailable.map((pm) => (
                     <li key={pm.user_id}>
                       <button
                         type="button"
-                        className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2"
+                        className="w-full text-left px-3 py-2 text-sm hover:bg-[var(--surface-hover)] flex items-center gap-2"
                         onClick={() => handleAdd(pm.user_id)}
                         disabled={addMutation.isPending}
                       >
                         <Avatar name={pm.display_name} avatarUrl={pm.avatar_url} size="xs" />
                         <div className="min-w-0 flex-1">
-                          <div className="font-medium text-gray-900 dark:text-gray-100">{pm.display_name}</div>
-                          <div className="text-xs text-gray-400">{pm.email}</div>
+                          <div className="font-medium text-[var(--foreground)]">{pm.display_name}</div>
+                          <div className="text-xs text-[var(--foreground-muted)]">{pm.email}</div>
                         </div>
                       </button>
                     </li>
                   ))}
                   {filteredAvailable.length === 0 && (
-                    <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">{t('common.noResults')}</li>
+                    <li className="px-3 py-2 text-sm text-[var(--foreground-muted)]">{t('common.noResults')}</li>
                   )}
                 </ul>
               </div>
@@ -224,15 +224,15 @@ function MembersTab({
       )}
 
       {teamMembers && teamMembers.length > 0 ? (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
           {teamMembers.map((member) => (
             <div key={member.user_id} className="p-3 flex items-center justify-between gap-2">
               <div className="flex items-center gap-3 min-w-0">
                 {savedUserId === member.user_id && <Check className="h-4 w-4 text-green-500 shrink-0" />}
                 <Avatar name={member.display_name} avatarUrl={member.avatar_url ?? undefined} size="sm" />
                 <div className="min-w-0">
-                  <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{member.display_name}</div>
-                  <div className="text-xs text-gray-400 dark:text-gray-500">{member.email}</div>
+                  <div className="text-sm font-medium text-[var(--foreground)]">{member.display_name}</div>
+                  <div className="text-xs text-[var(--foreground-muted)]">{member.email}</div>
                 </div>
               </div>
               {canManage && (
@@ -241,21 +241,21 @@ function MembersTab({
                   size="sm"
                   onClick={() => setRemoveTarget({ userId: member.user_id, displayName: member.display_name })}
                 >
-                  <Trash2 className="h-3.5 w-3.5 text-red-500" />
+                  <Trash2 className="h-3.5 w-3.5 text-[var(--danger)]" />
                 </Button>
               )}
             </div>
           ))}
         </div>
       ) : (
-        <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('teams.noMembers')}</p>
+        <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('teams.noMembers')}</p>
         </div>
       )}
 
       {/* Remove member confirmation */}
       <Modal open={!!removeTarget} onClose={() => setRemoveTarget(null)} title={t('teams.removeMemberConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans i18nKey="teams.removeMemberConfirmBody" values={{ name: removeTarget?.displayName }} components={{ bold: <strong /> }} />
         </p>
         <div className="flex justify-end gap-2">
@@ -330,7 +330,7 @@ function SettingsTab({
 
   return (
     <div className="space-y-6">
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
 
       <Input
         label={t('teams.name')}
@@ -340,12 +340,12 @@ function SettingsTab({
       />
 
       <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
           {t('common.description')}
         </label>
         <textarea
           rows={3}
-          className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 disabled:opacity-50"
+          className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)] disabled:opacity-50"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           disabled={!canManage}
@@ -364,8 +364,8 @@ function SettingsTab({
       {/* Danger Zone */}
       {canManage && (
         <div className="border border-red-200 dark:border-red-800 rounded-lg p-4 mt-8">
-          <h3 className="text-sm font-semibold text-red-600 dark:text-red-400 mb-2">{t('teams.dangerZone')}</h3>
-          <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">{t('teams.dangerZoneDescription')}</p>
+          <h3 className="text-sm font-semibold text-[var(--danger)] mb-2">{t('teams.dangerZone')}</h3>
+          <p className="text-sm text-[var(--foreground-secondary)] mb-3">{t('teams.dangerZoneDescription')}</p>
           <Button variant="danger" onClick={() => setDeleteOpen(true)}>
             <Trash2 className="h-3.5 w-3.5 mr-1" />
             {t('teams.deleteTeam')}
@@ -375,7 +375,7 @@ function SettingsTab({
 
       {/* Delete confirmation */}
       <Modal open={deleteOpen} onClose={() => setDeleteOpen(false)} title={t('teams.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans i18nKey="teams.deleteConfirmBody" values={{ name: team.name }} components={{ bold: <strong /> }} />
         </p>
         <div className="flex justify-end gap-2">
diff --git a/web/src/pages/TeamsPage.tsx b/web/src/pages/TeamsPage.tsx
index 57f787fb..14e22c3e 100644
--- a/web/src/pages/TeamsPage.tsx
+++ b/web/src/pages/TeamsPage.tsx
@@ -83,8 +83,8 @@ export function TeamsPage() {
     <div className="max-w-3xl space-y-6">
       <div className="flex items-center justify-between">
         <div>
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{t('teams.title')}</h2>
-          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{t('teams.description')}</p>
+          <h2 className="text-lg font-semibold text-[var(--foreground)]">{t('teams.title')}</h2>
+          <p className="mt-1 text-sm text-[var(--foreground-secondary)]">{t('teams.description')}</p>
         </div>
         {canManage && (
           <Button onClick={() => setCreateOpen(true)} className="border border-transparent">
@@ -94,11 +94,11 @@ export function TeamsPage() {
         )}
       </div>
 
-      {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+      {error && <p className="text-sm text-[var(--danger)]">{error}</p>}
 
       {(!teams || teams.length === 0) ? (
-        <div className="border border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
-          <p className="text-sm text-gray-500 dark:text-gray-400">{t('teams.noTeams')}</p>
+        <div className="border border-dashed border-[var(--border)] rounded-lg p-6 text-center">
+          <p className="text-sm text-[var(--foreground-secondary)]">{t('teams.noTeams')}</p>
           {canManage && (
             <Button size="sm" variant="secondary" className="mt-3" onClick={() => setCreateOpen(true)}>
               <Plus className="h-4 w-4 mr-1" />
@@ -107,7 +107,7 @@ export function TeamsPage() {
           )}
         </div>
       ) : (
-        <div className="border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700">
+        <div className="border border-[var(--border)] rounded-lg divide-y divide-[var(--border)]">
           {teams.map((team) => (
             <TeamCard
               key={team.id}
@@ -137,7 +137,7 @@ export function TeamsPage() {
 
       {/* Delete confirmation */}
       <Modal open={!!deleteTarget} onClose={() => setDeleteTarget(null)} title={t('teams.deleteConfirmTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           <Trans i18nKey="teams.deleteConfirmBody" values={{ name: deleteTarget?.name }} components={{ bold: <strong /> }} />
         </p>
         <div className="flex justify-end gap-2">
@@ -181,7 +181,7 @@ function TeamCard({
           <div className="flex items-center gap-2 flex-wrap">
             <Link
               to={pathFn(`/projects/${projectKey}/teams/${team.id}`)}
-              className="text-base font-semibold text-gray-900 dark:text-gray-100 hover:text-indigo-600 dark:hover:text-indigo-400"
+              className="text-base font-semibold text-[var(--foreground)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)]"
             >
               {team.name}
             </Link>
@@ -190,7 +190,7 @@ function TeamCard({
             </Badge>
           </div>
           {team.description && (
-            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{team.description}</p>
+            <p className="text-xs text-[var(--foreground-secondary)] mt-1">{team.description}</p>
           )}
         </div>
         <div className="flex items-center gap-1 shrink-0">
@@ -202,7 +202,7 @@ function TeamCard({
           </Link>
           {canManage && (
             <Button variant="ghost" size="sm" onClick={() => onDelete(team)}>
-              <Trash2 className="h-3.5 w-3.5 text-red-500" />
+              <Trash2 className="h-3.5 w-3.5 text-[var(--danger)]" />
             </Button>
           )}
         </div>
@@ -245,7 +245,7 @@ function TeamCreateForm({
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
       {validationError && (
-        <p className="text-sm text-red-600 dark:text-red-400">{validationError}</p>
+        <p className="text-sm text-[var(--danger)]">{validationError}</p>
       )}
       <Input
         label={t('teams.name')}
@@ -256,12 +256,12 @@ function TeamCreateForm({
         autoFocus
       />
       <div>
-        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-1">
           {t('common.description')}
         </label>
         <textarea
           rows={3}
-          className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+          className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-ring)] focus:border-[var(--primary)]"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
         />
diff --git a/web/src/pages/VerifyEmailPage.tsx b/web/src/pages/VerifyEmailPage.tsx
index c3c6a794..a3e94556 100644
--- a/web/src/pages/VerifyEmailPage.tsx
+++ b/web/src/pages/VerifyEmailPage.tsx
@@ -60,13 +60,13 @@ export function VerifyEmailPage() {
   }
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 px-4">
+    <div className="min-h-screen flex flex-col bg-[var(--surface-secondary)] dark:bg-[var(--background)] px-4">
       <div className="flex-1 flex items-center justify-center">
         <div className="max-w-sm w-full">
-          <h1 className="text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-2">
+          <h1 className="text-2xl font-bold text-center text-[var(--foreground)] mb-2">
             {t('verifyEmail.title', { brandName })}
           </h1>
-          <p className="text-center text-sm text-gray-600 dark:text-gray-400 mb-8">
+          <p className="text-center text-sm text-[var(--foreground-secondary)] mb-8">
             {t('verifyEmail.description')}
           </p>
           <form onSubmit={handleSubmit} className="space-y-4">
@@ -87,7 +87,7 @@ export function VerifyEmailPage() {
               autoComplete="new-password"
             />
             {error && (
-              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+              <p className="text-sm text-[var(--danger)]">{error}</p>
             )}
             <Button type="submit" disabled={loading} className="w-full">
               {loading ? t('verifyEmail.submitting') : t('verifyEmail.submit')}
diff --git a/web/src/pages/WatchlistPage.tsx b/web/src/pages/WatchlistPage.tsx
index 17a7976f..dd424905 100644
--- a/web/src/pages/WatchlistPage.tsx
+++ b/web/src/pages/WatchlistPage.tsx
@@ -60,7 +60,7 @@ function WatchlistSearchBar({ search, onSearchChange }: { search: string; onSear
       {search && (
         <button
           onClick={() => { onSearchChange(''); searchRef.current?.focus() }}
-          className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
           aria-label={t('common.clear')}
         >
           <X className="h-4 w-4" />
@@ -279,7 +279,7 @@ export default function WatchlistPage() {
       sortKey: 'item_number',
       render: (row) => {
         const done = strikethroughEnabled && isItemCompleted(row.status, allStatuses ?? statuses)
-        return <span className={`font-mono ${done ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400'}`}>{row.display_id}</span>
+        return <span className={`font-mono ${done ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground-secondary)]'}`}>{row.display_id}</span>
       },
     },
     {
@@ -303,8 +303,8 @@ export default function WatchlistPage() {
         return (
           <div className="flex items-center gap-1 min-w-0">
             <Tooltip content={row.title} className="relative block min-w-0 flex-1">
-              <span className={`truncate block ${!done && row.description ? 'text-gray-400 dark:text-gray-500' : ''}`}>
-                <span className={done ? 'line-through text-gray-400 dark:text-gray-500' : 'font-medium text-gray-900 dark:text-gray-100'}>{row.title}</span>
+              <span className={`truncate block ${!done && row.description ? 'text-[var(--foreground-muted)]' : ''}`}>
+                <span className={done ? 'line-through text-[var(--foreground-muted)]' : 'font-medium text-[var(--foreground)]'}>{row.title}</span>
                 {row.description && !done && (
                   <span className="font-normal text-xs"> – {getDescriptionPreview(row.description)}</span>
                 )}
@@ -356,7 +356,7 @@ export default function WatchlistPage() {
       sortKey: 'updated_at',
       render: (row) => {
         const done = strikethroughEnabled && isItemCompleted(row.status, allStatuses ?? statuses)
-        return <span className={done ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'}>{new Date(row.updated_at).toLocaleDateString()}</span>
+        return <span className={done ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-secondary)]'}>{new Date(row.updated_at).toLocaleDateString()}</span>
       },
     },
   ]
@@ -365,12 +365,12 @@ export default function WatchlistPage() {
     <div className="space-y-4">
       <div className="flex items-center justify-between gap-4">
         <div className="flex items-center gap-3 min-w-0 shrink lg:shrink-0">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 truncate">
+          <h2 className="text-lg font-semibold text-[var(--foreground)] truncate">
             <span className="lg:hidden">{t('watchlist.titleShort')}</span>
             <span className="hidden lg:inline">{t('watchlist.title')}</span>
           </h2>
           {result && (
-            <span className="text-sm text-gray-500 dark:text-gray-400">
+            <span className="text-sm text-[var(--foreground-secondary)]">
               ({result.meta.total})
             </span>
           )}
@@ -436,12 +436,12 @@ export default function WatchlistPage() {
           <>
             <button
               onClick={() => setProjectModalOpen(true)}
-              className="relative shrink-0 p-2.5 rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+              className="relative shrink-0 p-2.5 rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)]"
               aria-label={t('watchlist.allProjects')}
             >
               <FolderKanban className="h-5 w-5" />
               {selectedProjects.length > 0 && (
-                <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-indigo-600 text-[10px] font-bold text-white">
+                <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--primary)] text-[10px] font-bold text-white">
                   {selectedProjects.length}
                 </span>
               )}
@@ -452,7 +452,7 @@ export default function WatchlistPage() {
                 <span className="flex items-center ml-auto shrink-0">
                   <button
                     onClick={() => handleProjectsChange([])}
-                    className="p-2.5 rounded-md border border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-gray-100 dark:hover:bg-gray-700"
+                    className="p-2.5 rounded-md border border-[var(--border)] text-[var(--foreground-secondary)] hover:text-[var(--primary)] dark:hover:text-[var(--primary)] hover:bg-[var(--surface-hover)]"
                     aria-label={t('workitems.filters.clearAll')}
                   >
                     <Eraser className="h-5 w-5" />
@@ -463,13 +463,13 @@ export default function WatchlistPage() {
               <div className="flex flex-col flex-1 min-h-0">
                 <div className="pb-2">
                   <div className="relative">
-                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-gray-400" />
+                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-[var(--foreground-muted)]" />
                     <input
                       type="text"
                       value={projectSearch}
                       onChange={(e) => setProjectSearch(e.target.value)}
                       placeholder={t('common.search')}
-                      className="w-full pl-8 pr-3 py-1.5 text-sm rounded border border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+                      className="w-full pl-8 pr-3 py-1.5 text-sm rounded border border-[var(--border)] bg-[var(--surface-secondary)] text-[var(--foreground)] focus:outline-none focus:ring-1 focus:ring-[var(--focus-ring)]"
                     />
                   </div>
                 </div>
@@ -479,7 +479,7 @@ export default function WatchlistPage() {
                     .map((opt) => {
                       const checked = selectedProjects.includes(opt.value)
                       return (
-                        <label key={opt.value} className="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-sm text-gray-700 dark:text-gray-300">
+                        <label key={opt.value} className="flex items-center gap-3 px-3 py-2.5 rounded-md hover:bg-[var(--surface-hover)] cursor-pointer text-sm text-[var(--foreground)]">
                           <input
                             type="checkbox"
                             checked={checked}
@@ -487,7 +487,7 @@ export default function WatchlistPage() {
                               const next = checked ? selectedProjects.filter((k) => k !== opt.value) : [...selectedProjects, opt.value]
                               handleProjectsChange(next)
                             }}
-                            className="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+                            className="rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--focus-ring)]"
                           />
                           {opt.label}
                         </label>
@@ -507,7 +507,7 @@ export default function WatchlistPage() {
       ) : allItems.length === 0 && !debouncedSearch && !filter.type?.length && !filter.priority?.length &&
           !filter.status?.length && !filter.assignee?.length && !filter.milestone?.length &&
           selectedProjects.length === 0 ? (
-        <div className="flex flex-col items-center justify-center h-64 text-gray-500 dark:text-gray-400">
+        <div className="flex flex-col items-center justify-center h-64 text-[var(--foreground-secondary)]">
           <Bookmark className="h-12 w-12 mb-4 opacity-30" />
           <p className="text-lg font-medium">{t('watchlist.empty')}</p>
           <p className="text-sm mt-1">{t('watchlist.emptyHint')}</p>
@@ -515,7 +515,7 @@ export default function WatchlistPage() {
       ) : (
         <>
           {/* Desktop: table view */}
-          <div className="hidden lg:block border dark:border-gray-700 rounded-lg overflow-hidden">
+          <div className="hidden lg:block border border-[var(--border)] rounded-lg overflow-hidden">
             <DataTable
               columns={columns}
               data={allItems}
diff --git a/web/src/pages/WorkItemDetailPage.tsx b/web/src/pages/WorkItemDetailPage.tsx
index b27781f9..71ea76c4 100644
--- a/web/src/pages/WorkItemDetailPage.tsx
+++ b/web/src/pages/WorkItemDetailPage.tsx
@@ -31,6 +31,7 @@ import { CopyButton } from '@/components/ui/CopyButton'
 import { SLAIndicator } from '@/components/SLAIndicator'
 import { ScrollableRow } from '@/components/ui/ScrollableRow'
 import { useAuth } from '@/contexts/AuthContext'
+import { useBrand } from '@/contexts/BrandContext'
 import { Settings2, User, Calendar, CalendarPlus, History, Lock, Unlock, Globe, Target } from 'lucide-react'
 import { InboxButton } from '@/components/workitems/InboxButton'
 import { WatchButton } from '@/components/workitems/WatchButton'
@@ -59,6 +60,7 @@ export function WorkItemDetailPage() {
   const { data: allWorkflows } = useProjectWorkflows(projectKey ?? '')
   const { data: milestones } = useMilestones(projectKey ?? '')
   const { user } = useAuth()
+  const { brandName } = useBrand()
   const updateMutation = useUpdateWorkItem(projectKey ?? '')
   const deleteMutation = useDeleteWorkItem(projectKey ?? '')
 
@@ -137,10 +139,10 @@ export function WorkItemDetailPage() {
   // Update browser tab title with work item display ID
   useEffect(() => {
     if (item) {
-      document.title = `${currentDisplayId} ${item.title} - Taskwondo`
+      document.title = `${currentDisplayId} ${item.title} - ${brandName}`
     }
-    return () => { document.title = 'Taskwondo' }
-  }, [item, currentDisplayId])
+    return () => { document.title = brandName }
+  }, [item, currentDisplayId, brandName])
 
   // Clean up deep-link search params after reading them
   useEffect(() => {
@@ -280,7 +282,7 @@ export function WorkItemDetailPage() {
   }
 
   if (!item) {
-    return <p className="text-red-600">{t('workitems.notFound')}</p>
+    return <p className="text-[var(--danger)]">{t('workitems.notFound')}</p>
   }
 
   const allowed = transitionsMap?.[item.status]?.map((tr) => tr.to_status) ?? []
@@ -303,8 +305,8 @@ export function WorkItemDetailPage() {
       onDrop={readOnly ? undefined : handlePageDrop}
     >
       {draggingOver && (
-        <div className="fixed inset-0 z-50 bg-indigo-500/10 border-2 border-dashed border-indigo-400 flex items-center justify-center pointer-events-none">
-          <span className="text-lg font-medium text-indigo-600 dark:text-indigo-400 bg-white dark:bg-gray-900 px-6 py-3 rounded-lg shadow-lg">
+        <div className="fixed inset-0 z-50 bg-[var(--primary-muted)]/10 border-2 border-dashed border-[var(--primary-border)] flex items-center justify-center pointer-events-none">
+          <span className="text-lg font-medium text-[var(--primary)] bg-[var(--surface)] px-6 py-3 rounded-lg shadow-lg">
             {t('workitems.dropToAttach')}
           </span>
         </div>
@@ -313,7 +315,7 @@ export function WorkItemDetailPage() {
       {/* Back link + mobile properties button */}
       <div className="flex items-center">
         <button
-          className="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          className="text-sm text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
           onClick={() => guardedNavigate(backToListUrl)}
         >
           &larr; {t(backLabelKey)}
@@ -323,7 +325,7 @@ export function WorkItemDetailPage() {
           {item && <WatchButton projectKey={projectKey ?? ''} itemNumber={itemNumber} isWatching={isWatching} className="p-1.5" />}
           <button
             onClick={() => setShowProperties(true)}
-            className="p-1.5 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+            className="p-1.5 rounded-md text-[var(--foreground-secondary)] hover:bg-[var(--surface-hover)]"
             aria-label={t('workitems.detail.properties')}
           >
             <Settings2 className="h-5 w-5" />
@@ -340,7 +342,7 @@ export function WorkItemDetailPage() {
               <Tooltip content={copiedId ? t('common.copied') : t('common.clickToCopy')}>
                 <button
                   type="button"
-                  className="text-base lg:text-base font-bold lg:font-semibold font-mono text-gray-600 lg:text-gray-500 dark:text-gray-400 dark:lg:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 cursor-pointer transition-colors"
+                  className="text-base lg:text-base font-bold lg:font-semibold font-mono text-[var(--foreground-secondary)] lg:text-[var(--foreground-secondary)] dark:lg:text-[var(--foreground-muted)] hover:text-[var(--foreground)] cursor-pointer transition-colors"
                   onClick={async (e) => {
                     e.stopPropagation()
                     try {
@@ -367,7 +369,7 @@ export function WorkItemDetailPage() {
               <PriorityBadge priority={item.priority} />
               <span className="hidden lg:inline-flex">
                 <Tooltip content={t('workitems.form.assignee')}>
-                  <span className="inline-flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500">
+                  <span className="inline-flex items-center gap-1 text-xs text-[var(--foreground-muted)]">
                     <User className="h-3.5 w-3.5" />
                     {item.assignee_id
                       ? members?.find(m => m.user_id === item.assignee_id)?.display_name ?? t('userPicker.unassigned')
@@ -376,7 +378,7 @@ export function WorkItemDetailPage() {
                 </Tooltip>
               </span>
               {item.due_date && (
-                <span className="hidden lg:inline-flex items-center gap-1 text-xs text-gray-400 dark:text-gray-500">
+                <span className="hidden lg:inline-flex items-center gap-1 text-xs text-[var(--foreground-muted)]">
                   <Calendar className="h-3.5 w-3.5" />
                   {item.due_date}
                 </span>
@@ -385,8 +387,8 @@ export function WorkItemDetailPage() {
                 <Tooltip content={t(`workitems.visibilities.${item.visibility}.description`)}>
                   <span className={`inline-flex items-center gap-1 text-xs ${
                     item.visibility === 'portal' ? 'text-yellow-500 dark:text-yellow-400' :
-                    item.visibility === 'public' ? 'text-red-500 dark:text-red-400' :
-                    'text-gray-400 dark:text-gray-500'
+                    item.visibility === 'public' ? 'text-[var(--danger)]' :
+                    'text-[var(--foreground-muted)]'
                   }`}>
                     {item.visibility === 'internal' && <Lock className="h-3.5 w-3.5" />}
                     {item.visibility === 'portal' && <Unlock className="h-3.5 w-3.5" />}
@@ -420,12 +422,12 @@ export function WorkItemDetailPage() {
               </span>
               {childrenTotal > 0 && (
                 <span className="hidden lg:inline-flex items-center gap-2 ml-auto">
-                  <span className="text-xs text-gray-400 dark:text-gray-500">
+                  <span className="text-xs text-[var(--foreground-muted)]">
                     {t('relations.childrenProgress', { completed: childrenCompleted, total: childrenTotal })}
                   </span>
-                  <span className="inline-block w-24 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
+                  <span className="inline-block w-24 h-1.5 rounded-full bg-[var(--surface-tertiary)] overflow-hidden">
                     <span
-                      className="block h-full rounded-full bg-green-500 dark:bg-green-400 transition-all duration-300"
+                      className="block h-full rounded-full bg-green-500 dark:bg-green-400 transition-all duration-200"
                       style={{ width: `${(childrenCompleted / childrenTotal) * 100}%` }}
                     />
                   </span>
@@ -434,7 +436,7 @@ export function WorkItemDetailPage() {
             </div>
 
             {/* Mobile metadata line */}
-            <ScrollableRow className="lg:hidden mb-2" contentClassName="gap-3 text-xs text-gray-400 dark:text-gray-500">
+            <ScrollableRow className="lg:hidden mb-2" contentClassName="gap-3 text-xs text-[var(--foreground-muted)]">
               <span className="inline-flex items-center gap-1 shrink-0">
                 <User className="h-3.5 w-3.5" />
                 {item.assignee_id
@@ -459,7 +461,7 @@ export function WorkItemDetailPage() {
               {childrenTotal > 0 && (
                 <span className="inline-flex items-center gap-2 shrink-0">
                   <span>{t('relations.childrenProgress', { completed: childrenCompleted, total: childrenTotal })}</span>
-                  <span className="inline-block w-16 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
+                  <span className="inline-block w-16 h-1.5 rounded-full bg-[var(--surface-tertiary)] overflow-hidden">
                     <span
                       className="block h-full rounded-full bg-green-500 dark:bg-green-400"
                       style={{ width: `${(childrenCompleted / childrenTotal) * 100}%` }}
@@ -473,7 +475,7 @@ export function WorkItemDetailPage() {
             {!readOnly && editingTitle ? (
               <div className="flex gap-2 items-center">
                 <input
-                  className="text-xl font-semibold text-gray-900 dark:text-gray-100 border-b border-indigo-500 outline-none flex-1 bg-transparent"
+                  className="text-xl font-semibold text-[var(--foreground)] border-b border-[var(--primary)] outline-none flex-1 bg-transparent"
                   value={titleDraft}
                   onChange={(e) => setTitleDraft(e.target.value)}
                   onKeyDown={(e) => {
@@ -491,7 +493,7 @@ export function WorkItemDetailPage() {
             ) : (
               <div className="flex items-center gap-2">
                 <h1
-                  className={`text-xl font-semibold text-gray-900 dark:text-gray-100 rounded px-1 -mx-1 ${readOnly ? '' : 'cursor-pointer border border-transparent hover:border-gray-300 dark:hover:border-gray-600'}`}
+                  className={`text-xl font-semibold text-[var(--foreground)] rounded px-1 -mx-1 ${readOnly ? '' : 'cursor-pointer border border-transparent hover:border-[var(--border)] dark:hover:border-[var(--border)]'}`}
                   onClick={readOnly ? undefined : () => { setTitleDraft(item.title); setEditingTitle(true) }}
                 >
                   {item.title}
@@ -505,19 +507,19 @@ export function WorkItemDetailPage() {
           <div className="group/desc">
             <div className="flex items-center gap-1 mb-1">
               <h3
-                className="text-sm font-medium text-gray-500 dark:text-gray-400 select-none"
+                className="text-sm font-medium text-[var(--foreground-secondary)] select-none"
                 onDoubleClick={readOnly ? undefined : () => { setDescDraft(item.description ?? ''); setEditingDesc(true) }}
               >{t('workitems.detail.description')}</h3>
               <ConfirmCheck visible={descConfirmed} />
               {!readOnly && !editingDesc && (
                 <button
-                  className="group/edit relative inline-flex items-center justify-center w-7 h-7 rounded-md text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-500 dark:hover:text-gray-300 dark:hover:bg-gray-700 transition-colors opacity-0 group-hover/desc:opacity-100"
+                  className="group/edit relative inline-flex items-center justify-center w-7 h-7 rounded-md text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] hover:bg-[var(--surface-tertiary)] hover:bg-[var(--surface-hover)] transition-colors opacity-0 group-hover/desc:opacity-100"
                   onClick={() => { setDescDraft(item.description ?? ''); setEditingDesc(true) }}
                 >
                   <svg className="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="1.5">
                     <path strokeLinecap="round" strokeLinejoin="round" d="M11.5 2.5a1.5 1.5 0 012.121 2.121L6.5 11.743l-2.5.757.757-2.5L11.5 2.5z" />
                   </svg>
-                  <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/edit:opacity-100 transition-opacity">
+                  <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-1.5 px-2 py-1 text-xs text-white bg-[var(--background)] bg-[var(--surface-secondary)] rounded whitespace-nowrap opacity-0 group-hover/edit:opacity-100 transition-opacity">
                     {t('common.edit')}
                   </span>
                 </button>
@@ -526,7 +528,7 @@ export function WorkItemDetailPage() {
                 <CopyButton text={item.description} className="opacity-0 group-hover/desc:opacity-100" />
               )}
               {!readOnly && !editingDesc && (
-                <span className="ml-auto text-xs text-gray-400 dark:text-gray-500 opacity-0 group-hover/desc:opacity-100 transition-opacity select-none pointer-events-none">
+                <span className="ml-auto text-xs text-[var(--foreground-muted)] opacity-0 group-hover/desc:opacity-100 transition-opacity select-none pointer-events-none">
                   {t('workitems.detail.descriptionEditHint')}
                 </span>
               )}
@@ -535,7 +537,7 @@ export function WorkItemDetailPage() {
               <div className="space-y-2">
                 <textarea
                   ref={descTextareaRef}
-                  className="block w-full rounded-md border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 px-3 py-2 text-sm"
+                  className="block w-full rounded-md border border-[var(--border)] bg-[var(--surface)] text-[var(--foreground)] px-3 py-2 text-sm"
                   rows={6}
                   value={descDraft}
                   onChange={(e) => setDescDraft(e.target.value)}
@@ -566,7 +568,7 @@ export function WorkItemDetailPage() {
               </div>
             ) : (
               <div
-                className="relative group/descbody border border-transparent hover:border-gray-300 dark:hover:border-gray-600 rounded p-2 min-h-[2rem]"
+                className="relative group/descbody border border-transparent hover:border-[var(--border)] dark:hover:border-[var(--border)] rounded p-2 min-h-[2rem]"
                 onDoubleClick={readOnly ? undefined : () => { setDescDraft(item.description ?? ''); setEditingDesc(true) }}
               >
                 {item.description ? (
@@ -581,7 +583,7 @@ export function WorkItemDetailPage() {
                     onOpenThread={setOpenThreadRootId}
                   />
                 ) : (
-                  <span className="text-sm text-gray-400 dark:text-gray-500 italic">{t('workitems.detail.noDescription')}</span>
+                  <span className="text-sm text-[var(--foreground-muted)] italic">{t('workitems.detail.noDescription')}</span>
                 )}
               </div>
             )}
@@ -589,15 +591,15 @@ export function WorkItemDetailPage() {
 
           {/* Tabs */}
           <div>
-            <div className="border-b border-gray-200 dark:border-gray-700 mb-4 flex items-center justify-between">
+            <div className="border-b border-[var(--border)] mb-4 flex items-center justify-between">
               <nav className="flex gap-6 pr-8 overflow-x-auto scrollbar-none">
                 {tabs.map((tab) => (
                   <button
                     key={tab.key}
                     className={`pb-2 text-sm font-medium border-b-2 whitespace-nowrap ${
                       activeTab === tab.key
-                        ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
-                        : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+                        ? 'border-[var(--primary)] text-[var(--primary)]'
+                        : 'border-transparent text-[var(--foreground-secondary)] hover:text-[var(--foreground)] text-[var(--foreground-muted)] dark:hover:text-[var(--foreground-muted)]'
                     }`}
                     onClick={() => setActiveTab(tab.key)}
                   >
@@ -608,7 +610,7 @@ export function WorkItemDetailPage() {
               {(activeTab === 'comments' || activeTab === 'activity' || activeTab === 'attachments' || activeTab === 'time') && (
                 <Tooltip content={sortOrder === 'desc' ? t('common.showingNewestFirst') : t('common.showingOldestFirst')}>
                   <button
-                    className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 pb-2 flex items-center gap-1"
+                    className="text-xs text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)] pb-2 flex items-center gap-1"
                     onClick={() => setSortOrder((s) => (s === 'desc' ? 'asc' : 'desc'))}
                   >
                   <span className="text-base lg:text-xs">{sortOrder === 'desc' ? '\u2193' : '\u2191'}</span>
@@ -682,7 +684,7 @@ export function WorkItemDetailPage() {
             onSuccess: () => navigate(backToListUrl),
           })
         }}>
-          <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+          <p className="text-sm text-[var(--foreground-secondary)] mb-4">
             <Trans i18nKey="workitems.detail.deleteConfirmBody" values={{ displayId: item.display_id }} components={{ bold: <strong /> }} />
           </p>
           <div className="flex justify-end gap-3">
@@ -701,7 +703,7 @@ export function WorkItemDetailPage() {
 
       {/* Unsaved comment warning */}
       <Modal open={!!pendingPath} onClose={cancelNavigation} title={t('comments.unsavedTitle')}>
-        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+        <p className="text-sm text-[var(--foreground-secondary)] mb-4">
           {t('comments.unsavedBody')}
         </p>
         <div className="flex justify-end gap-3">
diff --git a/web/src/pages/WorkItemListPage.tsx b/web/src/pages/WorkItemListPage.tsx
index 0aae4078..4ebf6d64 100644
--- a/web/src/pages/WorkItemListPage.tsx
+++ b/web/src/pages/WorkItemListPage.tsx
@@ -13,6 +13,7 @@ import { DataTable, type Column } from '@/components/ui/DataTable'
 import { Button } from '@/components/ui/Button'
 import { Select } from '@/components/ui/Select'
 import { Spinner } from '@/components/ui/Spinner'
+import { LoadingState } from '@/components/ui/LoadingState'
 import { Modal } from '@/components/ui/Modal'
 import { PriorityBadge } from '@/components/workitems/PriorityBadge'
 import { TypeBadge } from '@/components/workitems/TypeBadge'
@@ -124,7 +125,7 @@ function WorkItemSearchBar({ search, onSearchChange }: { search: string; onSearc
       {search && (
         <button
           onClick={() => { onSearchChange(''); searchRef.current?.focus() }}
-          className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 rounded text-[var(--foreground-muted)] hover:text-[var(--foreground-secondary)] dark:hover:text-[var(--foreground-muted)]"
           aria-label={t('common.clear')}
         >
           <X className="h-4 w-4" />
@@ -184,32 +185,31 @@ export function WorkItemListPage() {
   }, [allStatuses])
 
   // Capture initial URL state once (before any effects run)
-  const initialUrlRef = useRef<{ hasParams: boolean; filter: SavedFilter; search: string; view: ViewMode; sort: string; order: 'asc' | 'desc' } | null>(null)
-  if (initialUrlRef.current === null) {
+  const [initialUrl] = useState(() => {
     const hasParams = urlHasFilterParams(searchParams)
-    initialUrlRef.current = {
+    return {
       hasParams,
       filter: parseUrlFilter(searchParams),
       search: searchParams.get('q') ?? '',
       view: (searchParams.get('view') === 'board' ? 'board' : 'list') as ViewMode,
       sort: searchParams.get('sort') ?? 'created_at',
-      order: (searchParams.get('order') === 'asc' ? 'asc' : 'desc'),
+      order: (searchParams.get('order') === 'asc' ? 'asc' : 'desc') as 'asc' | 'desc',
     }
-  }
+  })
 
   // Track whether the initial load was from a shared URL (don't save on init).
   // If we have URL params AND a saved view state with the same filters, treat it as a reload
   // (not a shared URL) — this lets us restore activeSearchId while still preventing save-on-init.
-  const loadedFromUrlRef = useRef(initialUrlRef.current.hasParams)
+  const loadedFromUrlRef = useRef(initialUrl.hasParams)
 
   const [filter, setFilter] = useState<WorkItemFilter>(
-    initialUrlRef.current.hasParams ? initialUrlRef.current.filter : {}
+    initialUrl.hasParams ? initialUrl.filter : {}
   )
-  const [filterInitialized, setFilterInitialized] = useState(initialUrlRef.current.hasParams)
-  const [search, setSearch] = useState(initialUrlRef.current.search)
-  const [viewMode, setViewMode] = useState<ViewMode>(initialUrlRef.current.view)
-  const [sort, setSort] = useState(initialUrlRef.current.sort)
-  const [order, setOrder] = useState<'asc' | 'desc'>(initialUrlRef.current.order)
+  const [filterInitialized, setFilterInitialized] = useState(initialUrl.hasParams)
+  const [search, setSearch] = useState(initialUrl.search)
+  const [viewMode, setViewMode] = useState<ViewMode>(initialUrl.view)
+  const [sort, setSort] = useState(initialUrl.sort)
+  const [order, setOrder] = useState<'asc' | 'desc'>(initialUrl.order)
   const [activeSearchId, setActiveSearchId] = useState<string | null>(null)
   const [activeSearchSnapshot, setActiveSearchSnapshot] = useState<{ filter: SavedFilter; search: string; viewMode: ViewMode } | null>(null)
 
@@ -245,7 +245,7 @@ export function WorkItemListPage() {
   const searchIdRestoredRef = useRef(false)
   useEffect(() => {
     if (searchIdRestoredRef.current || !savedViewState || settingsLoading) return
-    if (initialUrlRef.current?.hasParams && savedViewState.activeSearchId) {
+    if (initialUrl.hasParams && savedViewState.activeSearchId) {
       setActiveSearchId(savedViewState.activeSearchId)
       if (savedViewState.activeSearchSnapshot) setActiveSearchSnapshot(savedViewState.activeSearchSnapshot)
       // This is a reload, not a shared URL — allow saving view state changes
@@ -255,7 +255,7 @@ export function WorkItemListPage() {
   }, [savedViewState, settingsLoading])
 
   // Sync URL when filter initializes from settings/defaults (non-URL case)
-  const urlSyncedRef = useRef(initialUrlRef.current.hasParams)
+  const urlSyncedRef = useRef(initialUrl.hasParams)
   useEffect(() => {
     if (!filterInitialized || urlSyncedRef.current) return
     setSearchParams(buildUrlParams(filter, search, viewMode, sort, order), { replace: true })
@@ -265,10 +265,12 @@ export function WorkItemListPage() {
   // Save full view state (debounced) — only on manual user changes
   const saveTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined)
   const saveMutationRef = useRef(saveMutation)
-  saveMutationRef.current = saveMutation
+  useEffect(() => { saveMutationRef.current = saveMutation }, [saveMutation])
   // Use refs so saveViewState always captures the latest values without re-creating
   const stateRefs = useRef({ search, viewMode, sort, order, activeSearchId, activeSearchSnapshot })
-  stateRefs.current = { search, viewMode, sort, order, activeSearchId, activeSearchSnapshot }
+  useEffect(() => {
+    stateRefs.current = { search, viewMode, sort, order, activeSearchId, activeSearchSnapshot }
+  }, [search, viewMode, sort, order, activeSearchId, activeSearchSnapshot])
 
   const saveViewState = useCallback((f: WorkItemFilter) => {
     if (!projectKey || !filterInitialized || loadedFromUrlRef.current) return
@@ -483,7 +485,7 @@ export function WorkItemListPage() {
 
   const deleteMutation = useDeleteWorkItem(projectKey ?? '')
   const bulkMutation = useBulkUpdateWorkItems(projectKey ?? '')
-  const items = result?.data ?? []
+  const items = useMemo(() => result?.data ?? [], [result?.data])
 
   function toggleSelect(itemNumber: number) {
     setSelected((prev) => {
@@ -543,10 +545,7 @@ export function WorkItemListPage() {
 
   const [loadedPages, setLoadedPages] = useState<WorkItem[][]>([])
 
-  const allItems = useMemo(() => {
-    if (loadedPages.length === 0) return items
-    return [...items, ...loadedPages.flat()]
-  }, [items, loadedPages])
+  const allItems = loadedPages.length === 0 ? items : [...items, ...loadedPages.flat()]
 
   const filterKey = JSON.stringify(activeFilter)
   const [prevFilterKey, setPrevFilterKey] = useState(filterKey)
@@ -632,7 +631,7 @@ export function WorkItemListPage() {
       sortKey: 'item_number',
       render: (row) => {
         const done = strikethroughEnabled && isItemCompleted(row.status, allStatuses ?? statuses)
-        return <span className={`font-mono ${done ? 'text-gray-400 dark:text-gray-500' : 'text-gray-500 dark:text-gray-400'}`}>{row.display_id}</span>
+        return <span className={`font-mono ${done ? 'text-[var(--foreground-muted)]' : 'text-[var(--foreground-secondary)]'}`}>{row.display_id}</span>
       },
     },
     {
@@ -656,8 +655,8 @@ export function WorkItemListPage() {
         return (
           <div className="flex items-center gap-1 min-w-0">
             <Tooltip content={row.title} className="relative block min-w-0 flex-1">
-              <span className={`truncate block ${!done && row.description ? 'text-gray-400 dark:text-gray-500' : ''}`}>
-                <span className={done ? 'line-through text-gray-400 dark:text-gray-500' : 'font-medium text-gray-900 dark:text-gray-100'}>{row.title}</span>
+              <span className={`truncate block ${!done && row.description ? 'text-[var(--foreground-muted)]' : ''}`}>
+                <span className={done ? 'line-through text-[var(--foreground-muted)]' : 'font-medium text-[var(--foreground)]'}>{row.title}</span>
                 {row.description && !done && (
                   <span className="font-normal text-xs"> – {getDescriptionPreview(row.description)}</span>
                 )}
@@ -709,7 +708,7 @@ export function WorkItemListPage() {
       sortKey: 'updated_at',
       render: (row) => {
         const done = strikethroughEnabled && isItemCompleted(row.status, allStatuses ?? statuses)
-        return <span className={done ? 'text-gray-300 dark:text-gray-600' : 'text-gray-500 dark:text-gray-400'}>{new Date(row.updated_at).toLocaleDateString()}</span>
+        return <span className={done ? 'text-[var(--foreground-secondary)]' : 'text-[var(--foreground-secondary)]'}>{new Date(row.updated_at).toLocaleDateString()}</span>
       },
     },
   ]
@@ -717,14 +716,14 @@ export function WorkItemListPage() {
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-4">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 shrink-0">
+        <h2 className="text-xl font-semibold text-[var(--foreground)] shrink-0">
           <span className="lg:hidden">{t('workitems.titleShort')}</span>
           <span className="hidden lg:inline">{t('workitems.title')}</span>
         </h2>
-        <div className="grid grid-cols-2 rounded-md shadow-sm shrink-0">
+        <div className="grid grid-cols-2 rounded-md border border-[var(--border)] shrink-0">
           <button
             className={`flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium rounded-l-md border ${
-              viewMode === 'list' ? 'bg-indigo-50 text-indigo-700 border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700'
+              viewMode === 'list' ? 'bg-[var(--primary-muted)] text-[var(--primary)] border-[var(--primary-border)]  dark:text-[var(--primary)] dark:border-[var(--primary-border)]' : 'bg-white text-[var(--foreground)] border-[var(--border)] hover:bg-[var(--surface-secondary)] text-[var(--foreground)] dark:border-[var(--border)] hover:bg-[var(--surface-hover)]'
             }`}
             onClick={() => handleViewChange('list')}
           >
@@ -733,7 +732,7 @@ export function WorkItemListPage() {
           </button>
           <button
             className={`flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium rounded-r-md border-t border-r border-b ${
-              viewMode === 'board' ? 'bg-indigo-50 text-indigo-700 border-indigo-300 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700'
+              viewMode === 'board' ? 'bg-[var(--primary-muted)] text-[var(--primary)] border-[var(--primary-border)]  dark:text-[var(--primary)] dark:border-[var(--primary-border)]' : 'bg-white text-[var(--foreground)] border-[var(--border)] hover:bg-[var(--surface-secondary)] text-[var(--foreground)] dark:border-[var(--border)] hover:bg-[var(--surface-hover)]'
             }`}
             onClick={() => handleViewChange('board')}
           >
@@ -833,8 +832,8 @@ export function WorkItemListPage() {
 
       {/* Bulk action toolbar */}
       {!readOnly && selected.size > 0 && (
-        <div className="flex items-center gap-3 rounded-md bg-indigo-50 dark:bg-indigo-900/30 px-4 py-2">
-          <span className="text-sm font-medium text-indigo-700 dark:text-indigo-300">{t('workitems.selected', { count: selected.size })}</span>
+        <div className="flex items-center gap-3 rounded-md bg-[var(--primary-muted)] px-4 py-2">
+          <span className="text-sm font-medium text-[var(--primary)]">{t('workitems.selected', { count: selected.size })}</span>
           <div className="w-40">
             <Select onChange={(e) => handleBulkStatus(e.target.value)} value="">
               <option value="">{t('workitems.bulk.changeStatus')}</option>
@@ -866,22 +865,20 @@ export function WorkItemListPage() {
           <Button variant="ghost" size="sm" onClick={() => { setSelected(new Set()); setBulkError(null) }}>{t('common.clear')}</Button>
           {bulkMutation.isPending && <Spinner size="sm" />}
           {bulkError && (
-            <span className="text-sm text-red-600 dark:text-red-400">{bulkError}</span>
+            <span className="text-sm text-[var(--danger)]">{bulkError}</span>
           )}
         </div>
       )}
 
       {isLoading ? (
-        <div className="flex justify-center py-12">
-          <Spinner size="lg" />
-        </div>
+        <LoadingState />
       ) : viewMode === 'list' ? (
         <>
           {/* Desktop: table view */}
-          <div className="hidden lg:block border dark:border-gray-700 rounded-lg overflow-hidden">
+          <div className="hidden lg:block border border-[var(--border)] rounded-lg overflow-hidden">
             {!readOnly && (
-              <div className="bg-gray-50 dark:bg-gray-800 px-6 py-2 border-b dark:border-gray-700">
-                <label className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+              <div className="bg-[var(--surface-secondary)] px-6 py-2 border-b border-[var(--border)]">
+                <label className="flex items-center gap-2 text-xs text-[var(--foreground-secondary)]">
                   <input
                     type="checkbox"
                     checked={items.length > 0 && selected.size === items.length}
@@ -914,7 +911,7 @@ export function WorkItemListPage() {
           {/* Mobile: card view */}
           <div className="lg:hidden space-y-2">
             {allItems.length === 0 ? (
-              <p className="text-center text-sm text-gray-500 dark:text-gray-400 py-12">{t('workitems.empty')}</p>
+              <p className="text-center text-sm text-[var(--foreground-secondary)] py-12">{t('workitems.empty')}</p>
             ) : (
               allItems.map((item) => {
                 const assigneeName = item.assignee_id
@@ -988,7 +985,7 @@ export function WorkItemListPage() {
           setSelected(new Set())
           setActiveRow(-1)
         }}>
-          <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
+          <p className="text-sm text-[var(--foreground-secondary)] mb-4">
             {t('workitems.deleteSelectedBody', { count: deleteTargets.length })}
           </p>
           <div className="flex justify-end gap-3">
diff --git a/web/src/utils/oauthConfigError.ts b/web/src/utils/oauthConfigError.ts
new file mode 100644
index 00000000..c0fdc070
--- /dev/null
+++ b/web/src/utils/oauthConfigError.ts
@@ -0,0 +1,42 @@
+import type { TFunction } from 'i18next'
+import { isAxiosError } from 'axios'
+
+interface OAuthErrorBody {
+  error?: {
+    code?: string
+    error_key?: string
+    message?: string
+  }
+}
+
+/**
+ * Localise a failed `PUT /admin/settings/oauth_config/{provider}`.
+ *
+ * The API rejects invalid configs as
+ * `{ code: 'VALIDATION_ERROR', message: 'validation error: issuer must use https' }`
+ * — the sentinel prefix followed by the field-level detail. The detail is
+ * English server text, so we translate the wrapper and append it only when no
+ * dedicated `errors.<error_key>` entry exists, otherwise the raw message would
+ * leak untranslated server internals into the admin UI.
+ */
+export function getOAuthConfigError(err: unknown, t: TFunction): string {
+  const fallback = t('admin.authentication.oauth.saveError')
+  if (!isAxiosError<OAuthErrorBody>(err)) return fallback
+
+  const body = err.response?.data?.error
+  if (!body) return fallback
+
+  if (body.error_key) {
+    const keyed = t(`errors.${body.error_key}`)
+    if (keyed !== `errors.${body.error_key}`) return keyed
+  }
+
+  const message = body.message?.trim()
+  if (!message) return fallback
+
+  if (body.code === 'VALIDATION_ERROR') {
+    const detail = message.replace(/^validation error:\s*/, '')
+    if (detail) return t('admin.authentication.oauth.errorValidation', { detail })
+  }
+  return fallback
+}
diff --git a/web/src/utils/searchRequest.test.ts b/web/src/utils/searchRequest.test.ts
index 85c7c24c..16f11563 100644
--- a/web/src/utils/searchRequest.test.ts
+++ b/web/src/utils/searchRequest.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { buildSearchParams } from './searchRequest'
+import { buildSearchParams, meetsSearchFloor } from './searchRequest'
 
 const params = (...args: Parameters<typeof buildSearchParams>) =>
   Object.fromEntries(buildSearchParams(...args))
@@ -39,3 +39,31 @@ describe('buildSearchParams', () => {
       .toBe('q=a+b%26c&project=T+F')
   })
 })
+
+describe('meetsSearchFloor', () => {
+  it('rejects empty or whitespace-only queries', () => {
+    expect(meetsSearchFloor('')).toBe(false)
+    expect(meetsSearchFloor('   ')).toBe(false)
+  })
+
+  it('requires two characters for latin scripts', () => {
+    expect(meetsSearchFloor('a')).toBe(false)
+    expect(meetsSearchFloor('ab')).toBe(true)
+    expect(meetsSearchFloor('login')).toBe(true)
+  })
+
+  it('accepts a single CJK character — one hanzi is already a word', () => {
+    expect(meetsSearchFloor('猫')).toBe(true)
+    expect(meetsSearchFloor('猫 崩溃')).toBe(true)
+  })
+
+  it('accepts single Hiragana/Katakana/Hangul characters', () => {
+    expect(meetsSearchFloor('ね')).toBe(true)
+    expect(meetsSearchFloor('ガ')).toBe(true)
+    expect(meetsSearchFloor('한')).toBe(true)
+  })
+
+  it('ignores a single latin character padded with CJK punctuation only', () => {
+    expect(meetsSearchFloor('！a！')).toBe(true) // 3 characters: over the length floor anyway
+  })
+})
diff --git a/web/src/utils/searchRequest.ts b/web/src/utils/searchRequest.ts
index 784d3690..e4cff289 100644
--- a/web/src/utils/searchRequest.ts
+++ b/web/src/utils/searchRequest.ts
@@ -19,6 +19,26 @@ export interface UnifiedSearchRequest {
   project?: string | null
 }
 
+/**
+ * Scripts whose characters carry meaning on their own (Chinese, Japanese,
+ * Korean). Postgres tokenizes CJK runs as a single lexeme, so the backend
+ * adds an ILIKE substring fallback for these queries.
+ */
+const CJK_SCRIPT = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u
+
+/**
+ * Whether a query is worth sending to the entity search endpoint.
+ *
+ * The historical floor is two characters, which suppresses noisy single-letter
+ * latin queries — but a single CJK character is already a meaningful word, so
+ * the floor drops to one character for scripts that contain one.
+ */
+export function meetsSearchFloor(query: string): boolean {
+  const trimmed = query.trim()
+  if (trimmed.length === 0) return false
+  return trimmed.length >= 2 || CJK_SCRIPT.test(trimmed)
+}
+
 /** Build the query string for a unified search request. */
 export function buildSearchParams(req: UnifiedSearchRequest): URLSearchParams {
   const params = new URLSearchParams()