From 8039d095057e6a7d72e386a30848ccffa979607c Mon Sep 17 00:00:00 2001
From: busya <uglypod@gmail.com>
Date: Tue, 19 May 2026 10:46:00 +0300
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20unify=20Tailwind=20classe?=
 =?UTF-8?q?s=20=E2=80=94=20replace=20hardcoded=20colors=20with=20semantic?=
 =?UTF-8?q?=20design=20tokens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace all bg-blue-600/hover:bg-blue-700 → bg-primary/hover:bg-primary-hover
- Replace all bg-red-600/hover:bg-red-700 → bg-destructive/hover:bg-destructive-hover
- Replace all focus:ring-blue-500 → focus-visible:ring-primary-ring
- Replace all text-blue-600 → text-primary on interactive elements
- Replace all bg-blue-50 → bg-primary-light on UI surfaces
- Replace all bg-red-50 → bg-destructive-light on error surfaces
- Replace all border-blue-200/300 → border-primary-ring
- Replace all border-red-200 → border-destructive-light
- Replace peer-checked:bg-blue-600 → peer-checked:bg-primary (toggles)
- Replace focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 patterns
- Keep status badge patterns (bg-*-100 text-*-700) and hover:bg-blue-50 intact

82 files changed, ~400 changes. Build passes.
---
 frontend/src/components/DashboardGrid.svelte  |  6 +--
 frontend/src/components/MappingTable.svelte   |  2 +-
 frontend/src/components/Navbar.svelte         | 22 ++++----
 frontend/src/components/PasswordPrompt.svelte |  2 +-
 .../components/RepositoryDashboardGrid.svelte |  6 +--
 frontend/src/components/TaskList.svelte       |  4 +-
 frontend/src/components/TaskLogViewer.svelte  |  4 +-
 frontend/src/components/Toast.svelte          |  2 +-
 .../src/components/backups/BackupList.svelte  |  2 +-
 .../components/backups/BackupManager.svelte   |  2 +-
 .../src/components/git/BranchSelector.svelte  |  2 +-
 .../src/components/git/CommitHistory.svelte   |  2 +-
 .../src/components/git/CommitModal.svelte     |  8 +--
 .../components/git/ConflictResolver.svelte    |  8 +--
 .../src/components/git/DeploymentModal.svelte |  6 +--
 .../src/components/git/GitMergeDialog.svelte  |  2 +-
 .../components/git/GitOperationsPanel.svelte  |  2 +-
 .../src/components/git/GitReleasePanel.svelte |  4 +-
 .../components/git/GitWorkspacePanel.svelte   |  4 +-
 frontend/src/components/llm/DocPreview.svelte |  2 +-
 .../src/components/llm/ProviderConfig.svelte  |  8 +--
 .../components/tasks/TaskResultPanel.svelte   |  4 +-
 .../components/tools/ConnectionList.svelte    |  2 +-
 .../src/components/tools/MapperTool.svelte    |  4 +-
 .../assistant/AssistantChatPanel.svelte       |  2 +-
 .../AssistantClarificationCard.svelte         |  2 +-
 .../dataset-review/CompiledSQLPreview.svelte  | 12 ++---
 .../ExecutionMappingReview.svelte             | 16 +++---
 .../LaunchConfirmationPanel.svelte            | 10 ++--
 .../dataset-review/SemanticLayerReview.svelte | 14 ++---
 .../dataset-review/SourceIntakePanel.svelte   | 20 +++----
 .../lib/components/health/HealthMatrix.svelte |  4 +-
 .../lib/components/health/PolicyForm.svelte   | 18 +++----
 .../lib/components/layout/TaskDrawer.svelte   |  4 +-
 .../lib/components/layout/TopNavbar.svelte    |  4 +-
 .../lib/components/reports/ReportCard.svelte  |  2 +-
 .../translate/BulkCorrectionSidebar.svelte    |  6 +--
 .../translate/BulkReplaceModal.svelte         | 12 ++---
 .../translate/CorrectionCell.svelte           |  6 +--
 .../translate/ScheduleConfig.svelte           | 10 ++--
 .../translate/TermCorrectionPopup.svelte      | 12 ++---
 .../TranslationMetricsDashboard.svelte        |  4 +-
 .../translate/TranslationPreview.svelte       | 22 ++++----
 .../TranslationRunGlobalIndicator.svelte      |  6 +--
 .../translate/TranslationRunProgress.svelte   |  4 +-
 .../translate/TranslationRunResult.svelte     |  6 +--
 .../src/lib/components/ui/MultiSelect.svelte  |  6 +--
 frontend/src/pages/Settings.svelte            |  8 +--
 frontend/src/routes/+error.svelte             |  2 +-
 frontend/src/routes/+page.svelte              |  2 +-
 frontend/src/routes/admin/roles/+page.svelte  | 10 ++--
 .../src/routes/admin/settings/+page.svelte    | 16 +++---
 .../routes/admin/settings/llm/+page.svelte    |  2 +-
 frontend/src/routes/admin/users/+page.svelte  | 16 +++---
 frontend/src/routes/dashboards/+page.svelte   | 48 ++++++++---------
 .../src/routes/dashboards/[id]/+page.svelte   |  4 +-
 .../components/DashboardGitManager.svelte     |  2 +-
 frontend/src/routes/datasets/+page.svelte     | 30 +++++------
 .../src/routes/datasets/[id]/+page.svelte     |  6 +--
 .../src/routes/datasets/review/+page.svelte   |  4 +-
 .../review/ReviewWorkspaceHeader.svelte       |  2 +-
 .../review/ReviewWorkspaceLeftSidebar.svelte  |  2 +-
 .../review/ReviewWorkspaceRightRail.svelte    |  4 +-
 .../routes/datasets/review/[id]/+page.svelte  |  6 +--
 frontend/src/routes/login/+page.svelte        | 10 ++--
 frontend/src/routes/reports/+page.svelte      |  2 +-
 frontend/src/routes/settings/+page.svelte     | 36 ++++++-------
 .../settings/DatabaseConnectionsTab.svelte    |  6 +--
 .../routes/settings/EnvironmentsTab.svelte    |  8 +--
 .../routes/settings/FeaturesSettings.svelte   |  6 +--
 .../src/routes/settings/LlmSettings.svelte    |  2 +-
 .../routes/settings/LoggingSettings.svelte    |  4 +-
 .../routes/settings/MigrationSettings.svelte  |  2 +-
 .../routes/settings/StorageSettings.svelte    |  2 +-
 .../routes/settings/automation/+page.svelte   | 10 ++--
 frontend/src/routes/translate/+page.svelte    | 14 ++---
 .../src/routes/translate/[id]/+page.svelte    | 54 +++++++++----------
 .../translate/dictionaries/[id]/+page.svelte  | 12 ++---
 .../src/routes/translate/history/+page.svelte | 18 +++----
 79 files changed, 331 insertions(+), 331 deletions(-)

diff --git a/frontend/src/components/DashboardGrid.svelte b/frontend/src/components/DashboardGrid.svelte
index eec005e9..cd8b1bff 100644
--- a/frontend/src/components/DashboardGrid.svelte
+++ b/frontend/src/components/DashboardGrid.svelte
@@ -200,7 +200,7 @@
               indeterminate={someSelected && !allSelected}
               onchange={(e) =>
                 handleSelectAll((e.target as HTMLInputElement).checked)}
-              class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+              class="h-4 w-4 text-primary border-gray-300 rounded focus-visible:ring-primary-ring"
             />
           </th>
           <th
@@ -258,7 +258,7 @@
                     dashboard.id,
                     (e.target as HTMLInputElement).checked,
                   )}
-                class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                class="h-4 w-4 text-primary border-gray-300 rounded focus-visible:ring-primary-ring"
               />
             </td>
             <td
@@ -294,7 +294,7 @@
                 variant="ghost"
                 size="sm"
                 onclick={() => openGit(dashboard)}
-                class="text-blue-600 hover:text-blue-900"
+                class="text-primary hover:text-blue-900"
               >
                 {$t.git.manage}
               </Button>
diff --git a/frontend/src/components/MappingTable.svelte b/frontend/src/components/MappingTable.svelte
index e6d59cc8..da0681f8 100644
--- a/frontend/src/components/MappingTable.svelte
+++ b/frontend/src/components/MappingTable.svelte
@@ -90,7 +90,7 @@
           </td>
           <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
             {#if mapping}
-              <span class="text-blue-600 font-semibold">{$t.dashboard?.saved }</span>
+              <span class="text-primary font-semibold">{$t.dashboard?.saved }</span>
             {:else if suggestion}
               <span class="text-green-600 font-semibold">{$t.dashboard?.suggested } ({Math.round(suggestion.confidence * 100)}%)</span>
             {:else}
diff --git a/frontend/src/components/Navbar.svelte b/frontend/src/components/Navbar.svelte
index 5e83c291..b8e8e997 100644
--- a/frontend/src/components/Navbar.svelte
+++ b/frontend/src/components/Navbar.svelte
@@ -38,37 +38,37 @@
     <nav class="flex items-center space-x-4">
         <a
             href="/"
-            class="text-gray-600 hover:text-blue-600 font-medium {page.url.pathname === '/' ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
+            class="text-gray-600 hover:text-primary font-medium {page.url.pathname === '/' ? 'text-primary border-b-2 border-blue-600' : ''}"
         >
             {$t.nav.dashboard}
         </a>
         <a
             href="/reports"
-            class="text-gray-600 hover:text-blue-600 font-medium {page.url.pathname.startsWith('/reports') ? 'text-blue-600 border-b-2 border-blue-600' : ''}"
+            class="text-gray-600 hover:text-primary font-medium {page.url.pathname.startsWith('/reports') ? 'text-primary border-b-2 border-blue-600' : ''}"
         >
             {$t.nav.reports}
         </a>
         <div class="relative inline-block group">
-            <button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {page.url.pathname.startsWith('/settings') ? 'text-blue-600 border-b-2 border-blue-600' : ''}">
+            <button class="text-gray-600 hover:text-primary font-medium pb-1 {page.url.pathname.startsWith('/settings') ? 'text-primary border-b-2 border-blue-600' : ''}">
                 {$t.nav.settings}
             </button>
             <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0">
-                <a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_general}</a>
-                <a href="/settings/connections" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_connections}</a>
-                <a href="/settings/git" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.settings_git}</a>
+                <a href="/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary">{$t.nav.settings_general}</a>
+                <a href="/settings/connections" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary">{$t.nav.settings_connections}</a>
+                <a href="/settings/git" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary">{$t.nav.settings_git}</a>
             </div>
         </div>
 
         {#if authState.current?.isAuthenticated && authState.current?.user?.roles?.some(r => r.name === 'Admin')}
             <div class="relative inline-block group">
-                <button class="text-gray-600 hover:text-blue-600 font-medium pb-1 {page.url.pathname.startsWith('/admin') ? 'text-blue-600 border-b-2 border-blue-600' : ''}">
+                <button class="text-gray-600 hover:text-primary font-medium pb-1 {page.url.pathname.startsWith('/admin') ? 'text-primary border-b-2 border-blue-600' : ''}">
                     {$t.nav.admin}
                 </button>
                 <div class="absolute hidden group-hover:block bg-white shadow-lg rounded-md mt-1 py-2 w-48 z-10 border border-gray-100 before:absolute before:-top-2 before:left-0 before:right-0 before:h-2 before:content-[''] right-0">
-                    <a href="/admin/users" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.admin_users}</a>
-                    <a href="/admin/roles" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.admin_roles}</a>
-                    <a href="/admin/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.admin_settings}</a>
-                    <a href="/admin/settings/llm" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">{$t.nav.admin_llm}</a>
+                    <a href="/admin/users" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary">{$t.nav.admin_users}</a>
+                    <a href="/admin/roles" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary">{$t.nav.admin_roles}</a>
+                    <a href="/admin/settings" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary">{$t.nav.admin_settings}</a>
+                    <a href="/admin/settings/llm" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-primary">{$t.nav.admin_llm}</a>
                 </div>
             </div>
         {/if}
diff --git a/frontend/src/components/PasswordPrompt.svelte b/frontend/src/components/PasswordPrompt.svelte
index 5f2585ac..79deb420 100644
--- a/frontend/src/components/PasswordPrompt.svelte
+++ b/frontend/src/components/PasswordPrompt.svelte
@@ -124,7 +124,7 @@
 
                                 {#if errorMessage}
                                     <div
-                                        class="mb-4 p-2 bg-red-50 text-red-700 text-xs rounded border border-red-200"
+                                        class="mb-4 p-2 bg-destructive-light text-red-700 text-xs rounded border border-destructive-light"
                                     >
                                         Error: {errorMessage}
                                     </div>
diff --git a/frontend/src/components/RepositoryDashboardGrid.svelte b/frontend/src/components/RepositoryDashboardGrid.svelte
index 90fb7e1c..2e625ab1 100644
--- a/frontend/src/components/RepositoryDashboardGrid.svelte
+++ b/frontend/src/components/RepositoryDashboardGrid.svelte
@@ -510,7 +510,7 @@
   </div>
 
   {#if selectedIds.length > 0}
-    <div class="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-blue-100 bg-blue-50/60 px-3 py-2">
+    <div class="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-blue-100 bg-primary-light/60 px-3 py-2">
       {#if !repositoriesOnly}
         <Button
           size="sm"
@@ -571,7 +571,7 @@
               indeterminate={someSelected && !allSelected}
               onchange={(e) =>
                 handleSelectAll((e.target as HTMLInputElement).checked)}
-              class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+              class="h-4 w-4 text-primary border-gray-300 rounded focus-visible:ring-primary-ring"
             />
           </th>
           <th
@@ -621,7 +621,7 @@
                     dashboard.id,
                     (e.target as HTMLInputElement).checked,
                   )}
-                class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                class="h-4 w-4 text-primary border-gray-300 rounded focus-visible:ring-primary-ring"
               />
             </td>
             <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
diff --git a/frontend/src/components/TaskList.svelte b/frontend/src/components/TaskList.svelte
index dfe8d997..e85694b5 100644
--- a/frontend/src/components/TaskList.svelte
+++ b/frontend/src/components/TaskList.svelte
@@ -70,12 +70,12 @@
       {#each tasks as task (task.id)}
         <li>
           <button
-            class="block w-full text-left transition duration-150 ease-in-out focus:outline-none hover:bg-gray-50 {selectedTaskId === task.id ? 'bg-blue-50' : ''}"
+            class="block w-full text-left transition duration-150 ease-in-out focus:outline-none hover:bg-gray-50 {selectedTaskId === task.id ? 'bg-primary-light' : ''}"
             onclick={() => handleTaskClick(task)}
           >
             <div class="px-4 py-4 sm:px-6">
               <div class="flex items-center justify-between">
-                <div class="text-sm font-medium text-blue-600 truncate">
+                <div class="text-sm font-medium text-primary truncate">
                   {task.plugin_id.toUpperCase()}
                   <span class="ml-2 text-xs text-gray-400 font-mono">{task.id.substring(0, 8)}</span>
                 </div>
diff --git a/frontend/src/components/TaskLogViewer.svelte b/frontend/src/components/TaskLogViewer.svelte
index 6d8bf2a7..f235ce59 100644
--- a/frontend/src/components/TaskLogViewer.svelte
+++ b/frontend/src/components/TaskLogViewer.svelte
@@ -165,7 +165,7 @@
                 <div
                     class="flex flex-col items-center justify-center gap-3 h-full text-slate-500 text-sm p-4 text-center"
                 >
-                    <div class="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center text-red-500 text-lg">
+                    <div class="w-10 h-10 rounded-full bg-destructive-light flex items-center justify-center text-red-500 text-lg">
                         ⚠
                     </div>
                     <span class="font-medium text-red-600">{error}</span>
@@ -259,7 +259,7 @@
                                     class="flex flex-col items-center justify-center h-full p-8 text-center space-y-4"
                                 >
                                     <div
-                                        class="w-14 h-14 rounded-full bg-red-50 flex items-center justify-center text-red-500 shadow-inner"
+                                        class="w-14 h-14 rounded-full bg-destructive-light flex items-center justify-center text-red-500 shadow-inner"
                                     >
                                         <span class="text-3xl">⚠</span>
                                     </div>
diff --git a/frontend/src/components/Toast.svelte b/frontend/src/components/Toast.svelte
index 78391379..6ab1caef 100755
--- a/frontend/src/components/Toast.svelte
+++ b/frontend/src/components/Toast.svelte
@@ -20,7 +20,7 @@
 <div class="fixed bottom-0 right-0 p-4 space-y-2">
     {#each $toasts as toast (toast.id)}
         <div class="p-4 rounded-md shadow-lg text-white
-            {toast.type === 'info' && 'bg-blue-500'}
+            {toast.type === 'info' && 'bg-primary'}
             {toast.type === 'success' && 'bg-green-500'}
             {toast.type === 'error' && 'bg-red-500'}
         ">
diff --git a/frontend/src/components/backups/BackupList.svelte b/frontend/src/components/backups/BackupList.svelte
index cffe603f..528d2564 100644
--- a/frontend/src/components/backups/BackupList.svelte
+++ b/frontend/src/components/backups/BackupList.svelte
@@ -122,7 +122,7 @@
               <Button
                 variant="ghost"
                 size="sm"
-                class="text-blue-600 hover:text-blue-900"
+                class="text-primary hover:text-blue-900"
                 onclick={() => onNavigate(backup.path)}
               >
                 {$t.storage.table.go_to_storage}
diff --git a/frontend/src/components/backups/BackupManager.svelte b/frontend/src/components/backups/BackupManager.svelte
index a3715bf2..23703ab9 100644
--- a/frontend/src/components/backups/BackupManager.svelte
+++ b/frontend/src/components/backups/BackupManager.svelte
@@ -221,7 +221,7 @@
                 <label class="flex items-center gap-3 cursor-pointer group">
                   <div class="relative inline-flex items-center">
                     <input type="checkbox" bind:checked={scheduleEnabled} class="sr-only peer" />
-                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-ring rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
                     <span class="ml-3 text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">{$t.tasks.schedule_enabled}</span>
                   </div>
                 </label>
diff --git a/frontend/src/components/git/BranchSelector.svelte b/frontend/src/components/git/BranchSelector.svelte
index 49c81d8f..ec30c26d 100644
--- a/frontend/src/components/git/BranchSelector.svelte
+++ b/frontend/src/components/git/BranchSelector.svelte
@@ -141,7 +141,7 @@
             size="sm"
             onclick={() => showCreate = !showCreate}
             disabled={loading}
-            class="text-blue-600"
+            class="text-primary"
         >
             + {$t.git.new_branch}
         </Button>
diff --git a/frontend/src/components/git/CommitHistory.svelte b/frontend/src/components/git/CommitHistory.svelte
index 8539983b..b4cec9f5 100644
--- a/frontend/src/components/git/CommitHistory.svelte
+++ b/frontend/src/components/git/CommitHistory.svelte
@@ -69,7 +69,7 @@
         <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">
             {$t.git.history}
         </h3>
-        <Button variant="ghost" size="sm" onclick={loadHistory} class="text-blue-600">
+        <Button variant="ghost" size="sm" onclick={loadHistory} class="text-primary">
             {$t.git.refresh}
         </Button>
     </div>
diff --git a/frontend/src/components/git/CommitModal.svelte b/frontend/src/components/git/CommitModal.svelte
index 3286c485..e2f49839 100644
--- a/frontend/src/components/git/CommitModal.svelte
+++ b/frontend/src/components/git/CommitModal.svelte
@@ -158,7 +158,7 @@
                             <button
                                 onclick={handleGenerateMessage}
                                 disabled={generatingMessage || loading}
-                                class="text-xs text-blue-600 hover:text-blue-800 disabled:opacity-50 flex items-center"
+                                class="text-xs text-primary hover:text-blue-800 disabled:opacity-50 flex items-center"
                             >
                                 {#if generatingMessage}
                                     <span class="animate-spin mr-1">↻</span> {$t.mapper?.generating}
@@ -169,7 +169,7 @@
                         </div>
                         <textarea
                             bind:value={message}
-                            class="w-full border rounded p-2 h-32 focus:ring-2 focus:ring-blue-500 outline-none resize-none"
+                            class="w-full border rounded p-2 h-32 focus-visible:ring-2 focus-visible:ring-primary-ring outline-none resize-none"
                             placeholder={$t.git?.describe_changes}
                         ></textarea>
                     </div>
@@ -202,7 +202,7 @@
                                 {/each}
                                 {#each status.untracked_files as file}
                                     <li
-                                        class="text-blue-600 flex items-center"
+                                        class="text-primary flex items-center"
                                         title={$t.git?.untracked}
                                     >
                                         <span class="mr-2">?</span>
@@ -258,7 +258,7 @@
                         loading ||
                         (!status?.is_dirty &&
                             status?.staged_files?.length === 0)}
-                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+                    class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-hover disabled:opacity-50"
                 >
                     {committing ? $t.git?.committing : $t.git?.commit}
                 </button>
diff --git a/frontend/src/components/git/ConflictResolver.svelte b/frontend/src/components/git/ConflictResolver.svelte
index 6a95be8e..2597668a 100644
--- a/frontend/src/components/git/ConflictResolver.svelte
+++ b/frontend/src/components/git/ConflictResolver.svelte
@@ -112,7 +112,7 @@
                         >
                             <div class="p-0 flex flex-col">
                                 <div
-                                    class="bg-blue-50 px-4 py-1 text-[10px] font-bold text-blue-600 uppercase border-b"
+                                    class="bg-primary-light px-4 py-1 text-[10px] font-bold text-primary uppercase border-b"
                                 >
                                     Your Changes (Mine)
                                 </div>
@@ -124,8 +124,8 @@
                                     class="w-full py-2 text-sm font-medium border-t transition-colors {resolutions[
                                         conflict.file_path
                                     ] === 'mine'
-                                        ? 'bg-blue-600 text-white'
-                                        : 'bg-gray-50 hover:bg-blue-50 text-blue-600'}"
+                                        ? 'bg-primary text-white'
+                                        : 'bg-gray-50 hover:bg-blue-50 text-primary'}"
                                     onclick={() =>
                                         resolve(conflict.file_path, "mine")}
                                 >
@@ -168,7 +168,7 @@
                 </button>
                 <button
                     onclick={handleSave}
-                    class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors shadow-sm"
+                    class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-hover transition-colors shadow-sm"
                 >
                     Resolve & Continue
                 </button>
diff --git a/frontend/src/components/git/DeploymentModal.svelte b/frontend/src/components/git/DeploymentModal.svelte
index 8e8c1565..5e4526ba 100644
--- a/frontend/src/components/git/DeploymentModal.svelte
+++ b/frontend/src/components/git/DeploymentModal.svelte
@@ -177,7 +177,7 @@
                     <select
                         id="deployment-target-env"
                         bind:value={selectedEnv}
-                        class="w-full border rounded p-2 focus:ring-2 focus:ring-blue-500 outline-none bg-white"
+                        class="w-full border rounded p-2 focus-visible:ring-2 focus-visible:ring-primary-ring outline-none bg-white"
                     >
                         {#each deploymentCandidates as env}
                             <option value={env.id}
@@ -187,7 +187,7 @@
                     </select>
                 </div>
                 {#if isProdTarget}
-                    <p class="mb-3 rounded border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-800">
+                    <p class="mb-3 rounded border border-destructive-light bg-destructive-light px-3 py-2 text-xs text-red-800">
                         Внимание: выбрано PROD окружение. Потребуется подтверждение перед deploy.
                     </p>
                 {/if}
@@ -202,7 +202,7 @@
                     <button
                         onclick={handleDeploy}
                         disabled={deploying || !selectedEnv}
-                        class={`px-4 py-2 text-white rounded disabled:opacity-50 flex items-center ${isProdTarget ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700'}`}
+                        class={`px-4 py-2 text-white rounded disabled:opacity-50 flex items-center ${isProdTarget ? 'bg-destructive hover:bg-destructive-hover' : 'bg-green-600 hover:bg-green-700'}`}
                     >
                         {#if deploying}
                             <svg
diff --git a/frontend/src/components/git/GitMergeDialog.svelte b/frontend/src/components/git/GitMergeDialog.svelte
index 8b513c09..97edc73a 100644
--- a/frontend/src/components/git/GitMergeDialog.svelte
+++ b/frontend/src/components/git/GitMergeDialog.svelte
@@ -110,7 +110,7 @@
           onclick={onAbortMerge}
           disabled={mergeAbortInProgress}
           isLoading={mergeAbortInProgress}
-          class="border border-red-300 text-red-700 hover:bg-red-50"
+          class="border border-destructive-ring text-red-700 hover:bg-red-50"
         >
           {$t.git?.unfinished_merge?.abort_merge || 'Abort merge'}
         </Button>
diff --git a/frontend/src/components/git/GitOperationsPanel.svelte b/frontend/src/components/git/GitOperationsPanel.svelte
index 94915055..ac194688 100644
--- a/frontend/src/components/git/GitOperationsPanel.svelte
+++ b/frontend/src/components/git/GitOperationsPanel.svelte
@@ -38,7 +38,7 @@
   <Button
     variant="primary"
     onclick={onDeploy}
-    class={`w-full ${currentEnvStage === 'PROD' ? 'bg-red-600 hover:bg-red-700 focus-visible:ring-red-500' : 'bg-green-600 hover:bg-green-700 focus-visible:ring-green-500'}`}
+    class={`w-full ${currentEnvStage === 'PROD' ? 'bg-destructive hover:bg-destructive-hover focus-visible:ring-red-500' : 'bg-green-600 hover:bg-green-700 focus-visible:ring-green-500'}`}
   >
     🚀 Deploy
   </Button>
diff --git a/frontend/src/components/git/GitReleasePanel.svelte b/frontend/src/components/git/GitReleasePanel.svelte
index f8391dc9..e6819975 100644
--- a/frontend/src/components/git/GitReleasePanel.svelte
+++ b/frontend/src/components/git/GitReleasePanel.svelte
@@ -44,7 +44,7 @@
     onclick={onPromote}
     disabled={promoting || !promoteFromBranch || !promoteToBranch || promoteFromBranch === promoteToBranch}
     isLoading={promoting}
-    class={`w-full ${promoteMode === 'direct' ? 'bg-red-600 hover:bg-red-700 focus-visible:ring-red-500' : ''}`}
+    class={`w-full ${promoteMode === 'direct' ? 'bg-destructive hover:bg-destructive-hover focus-visible:ring-red-500' : ''}`}
   >
     {promoteMode === 'direct'
       ? `Прямой перенос ${promoteFromBranch} ➔ ${promoteToBranch} (unsafe)`
@@ -81,7 +81,7 @@
         ]}
       />
       {#if promoteMode === 'direct'}
-        <div class="rounded-lg border border-red-300 bg-red-50 p-3 text-sm text-red-800">
+        <div class="rounded-lg border border-destructive-ring bg-destructive-light p-3 text-sm text-red-800">
           <div class="font-semibold">Внимание: прямой перенос без MR</div>
           <div class="mt-1">Это обходит процесс аппрува и записывается в audit лог.</div>
         </div>
diff --git a/frontend/src/components/git/GitWorkspacePanel.svelte b/frontend/src/components/git/GitWorkspacePanel.svelte
index 4821c745..4ea264af 100644
--- a/frontend/src/components/git/GitWorkspacePanel.svelte
+++ b/frontend/src/components/git/GitWorkspacePanel.svelte
@@ -42,7 +42,7 @@
       <div class="mb-2 flex items-center justify-between">
         <h3 class="text-sm font-semibold text-slate-700">Сообщение коммита</h3>
         <button
-          class="inline-flex items-center text-xs text-blue-600 hover:text-blue-800 disabled:opacity-50"
+          class="inline-flex items-center text-xs text-primary hover:text-blue-800 disabled:opacity-50"
           onclick={onGenerateMessage}
           disabled={generatingMessage || workspaceLoading}
         >
@@ -51,7 +51,7 @@
       </div>
       <textarea
         bind:value={commitMessage}
-        class={`h-36 w-full resize-none rounded border p-2 outline-none focus:ring-2 focus:ring-blue-500 ${generatingMessage ? 'animate-pulse bg-slate-100' : ''}`}
+        class={`h-36 w-full resize-none rounded border p-2 outline-none focus-visible:ring-2 focus-visible:ring-primary-ring ${generatingMessage ? 'animate-pulse bg-slate-100' : ''}`}
         placeholder="Опишите изменения..."
       ></textarea>
     </div>
diff --git a/frontend/src/components/llm/DocPreview.svelte b/frontend/src/components/llm/DocPreview.svelte
index 27e39c8b..8bc04362 100644
--- a/frontend/src/components/llm/DocPreview.svelte
+++ b/frontend/src/components/llm/DocPreview.svelte
@@ -75,7 +75,7 @@
           {$t.llm.cancel}
         </button>
         <button 
-          class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+          class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-hover disabled:opacity-50"
           onclick={handleSave}
           disabled={isSaving}
         >
diff --git a/frontend/src/components/llm/ProviderConfig.svelte b/frontend/src/components/llm/ProviderConfig.svelte
index 48ae6f11..b615bda9 100644
--- a/frontend/src/components/llm/ProviderConfig.svelte
+++ b/frontend/src/components/llm/ProviderConfig.svelte
@@ -308,7 +308,7 @@
     <h2 class="text-xl font-bold">{$t.llm.providers_title}</h2>
     <button
       type="button"
-      class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition"
+      class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover transition"
       onclick={() => {
         resetForm();
         showForm = true;
@@ -403,7 +403,7 @@
                 </code>
                 <button
                   type="button"
-                  class="shrink-0 rounded bg-blue-600 px-3 py-2 text-xs font-medium text-white hover:bg-blue-700"
+                  class="shrink-0 rounded bg-primary px-3 py-2 text-xs font-medium text-white hover:bg-primary-hover"
                   onclick={() => { formData.api_key = ""; }}
                 >
                   {$t.llm?.change_key || "Change"}
@@ -506,7 +506,7 @@
           </button>
           <button
             type="button"
-            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex-1"
+            class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-hover flex-1"
             onclick={handleSubmit}
           >
             {$t.llm.save}
@@ -544,7 +544,7 @@
         <div class="flex gap-2">
           <button
             type="button"
-            class="text-sm text-blue-600 hover:underline"
+            class="text-sm text-primary hover:underline"
             onclick={() => handleEdit(provider)}
           >
             {$t.common.edit}
diff --git a/frontend/src/components/tasks/TaskResultPanel.svelte b/frontend/src/components/tasks/TaskResultPanel.svelte
index c7b4b5c0..cbda8aa6 100644
--- a/frontend/src/components/tasks/TaskResultPanel.svelte
+++ b/frontend/src/components/tasks/TaskResultPanel.svelte
@@ -79,7 +79,7 @@
         <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">{$t.tasks?.errors}</p>
         <ul class="space-y-2">
           {#each result.failures as failure}
-            <li class="rounded-md border border-red-200 bg-red-50 p-2 text-sm text-red-700">
+            <li class="rounded-md border border-destructive-light bg-destructive-light p-2 text-sm text-red-700">
               {failure.title || failure.id}: {failure.error}
             </li>
           {/each}
@@ -106,7 +106,7 @@
         <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">{$t.tasks?.migration_errors}</p>
         <ul class="space-y-2">
           {#each result.failed_dashboards as failed}
-            <li class="rounded-md border border-red-200 bg-red-50 p-2 text-sm text-red-700">
+            <li class="rounded-md border border-destructive-light bg-destructive-light p-2 text-sm text-red-700">
               {failed.title || failed.id}: {failed.error}
             </li>
           {/each}
diff --git a/frontend/src/components/tools/ConnectionList.svelte b/frontend/src/components/tools/ConnectionList.svelte
index 937e2059..99ab6d26 100644
--- a/frontend/src/components/tools/ConnectionList.svelte
+++ b/frontend/src/components/tools/ConnectionList.svelte
@@ -69,7 +69,7 @@
             {#each connections as conn}
                 <li class="p-6 flex items-center justify-between hover:bg-gray-50 transition-colors">
                     <div>
-                        <div class="text-sm font-medium text-blue-600 truncate">{conn.name}</div>
+                        <div class="text-sm font-medium text-primary truncate">{conn.name}</div>
                         <div class="text-xs text-gray-400 mt-1 font-mono">{conn.type}://{conn.username}@{conn.host}:{conn.port}/{conn.database}</div>
                     </div>
                     <Button
diff --git a/frontend/src/components/tools/MapperTool.svelte b/frontend/src/components/tools/MapperTool.svelte
index 4e7a7443..dedc3d81 100644
--- a/frontend/src/components/tools/MapperTool.svelte
+++ b/frontend/src/components/tools/MapperTool.svelte
@@ -169,11 +169,11 @@
                 <legend class="block text-sm font-medium text-gray-700 mb-2">{$t.mapper.source}</legend>
                 <div class="flex space-x-4">
                     <label class="inline-flex items-center">
-                        <input type="radio" bind:group={source} value="postgres" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" />
+                        <input type="radio" bind:group={source} value="postgres" class="focus-visible:ring-primary-ring h-4 w-4 text-primary border-gray-300" />
                         <span class="ml-2 text-sm text-gray-700">{$t.mapper.source_postgres}</span>
                     </label>
                     <label class="inline-flex items-center">
-                        <input type="radio" bind:group={source} value="excel" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" />
+                        <input type="radio" bind:group={source} value="excel" class="focus-visible:ring-primary-ring h-4 w-4 text-primary border-gray-300" />
                         <span class="ml-2 text-sm text-gray-700">{$t.mapper.source_excel}</span>
                     </label>
                 </div>
diff --git a/frontend/src/lib/components/assistant/AssistantChatPanel.svelte b/frontend/src/lib/components/assistant/AssistantChatPanel.svelte
index b9c7df55..85c656ab 100644
--- a/frontend/src/lib/components/assistant/AssistantChatPanel.svelte
+++ b/frontend/src/lib/components/assistant/AssistantChatPanel.svelte
@@ -772,7 +772,7 @@
                 <div class="truncate pr-4 text-[10px] text-slate-500">{convo.last_message || ""}</div>
               </button>
               <button
-                class="absolute right-1.5 top-1.5 hidden rounded bg-white/80 p-1 text-slate-400 hover:bg-red-50 hover:text-red-500 group-hover:block"
+                class="absolute right-1.5 top-1.5 hidden rounded bg-white/80 p-1 text-slate-400 hover:bg-destructive-light hover:text-destructive group-hover:block"
                 onclick={(e) => removeConversation(e, convo.conversation_id)}
                 title="Удалить диалог"
               >
diff --git a/frontend/src/lib/components/assistant/AssistantClarificationCard.svelte b/frontend/src/lib/components/assistant/AssistantClarificationCard.svelte
index 49ce111c..5139d4e1 100644
--- a/frontend/src/lib/components/assistant/AssistantClarificationCard.svelte
+++ b/frontend/src/lib/components/assistant/AssistantClarificationCard.svelte
@@ -399,7 +399,7 @@
     {/if}
 
     {#if localMessage || localStatus === "saving"}
-      <div class={`mt-3 rounded-xl px-3 py-3 ${localStatus === "error" ? "border border-red-200 bg-red-50 text-red-700" : localStatus === "saving" ? "border border-violet-200 bg-violet-100 text-violet-700" : "border border-emerald-200 bg-emerald-50 text-emerald-800"}`}>
+      <div class={`mt-3 rounded-xl px-3 py-3 ${localStatus === "error" ? "border border-destructive-light bg-destructive-light text-red-700" : localStatus === "saving" ? "border border-violet-200 bg-violet-100 text-violet-700" : "border border-emerald-200 bg-emerald-50 text-emerald-800"}`}>
         {localStatus === "saving" ? $t.dataset_review?.clarification?.messages?.saving || "Saving clarification answer..." : localMessage}
       </div>
     {/if}
diff --git a/frontend/src/lib/components/dataset-review/CompiledSQLPreview.svelte b/frontend/src/lib/components/dataset-review/CompiledSQLPreview.svelte
index e3dbd99d..a1b24e11 100644
--- a/frontend/src/lib/components/dataset-review/CompiledSQLPreview.svelte
+++ b/frontend/src/lib/components/dataset-review/CompiledSQLPreview.svelte
@@ -201,7 +201,7 @@
       </span>
       <button
         type="button"
-        class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-slate-300"
+            class="inline-flex items-center justify-center rounded-xl bg-primary px-4 py-2 text-sm font-medium text-white transition hover:bg-primary-hover disabled:cursor-not-allowed disabled:bg-slate-300"
         onclick={requestPreview}
         disabled={disabled || localStatus === "saving"}
       >
@@ -223,11 +223,11 @@
   <div
     class={`mt-5 rounded-xl border px-4 py-4 text-sm ${
       effectiveState === "failed"
-        ? "border-red-200 bg-red-50 text-red-700"
+        ? "border-destructive-light bg-destructive-light text-red-700"
         : effectiveState === "stale"
           ? "border-amber-200 bg-amber-50 text-amber-800"
           : effectiveState === "pending"
-            ? "border-blue-200 bg-blue-50 text-blue-700"
+            ? "border-primary-ring bg-primary-light text-primary"
             : "border-slate-200 bg-slate-50 text-slate-700"
     }`}
   >
@@ -241,7 +241,7 @@
   {/if}
 
   {#if previewGenerationState === "debouncing"}
-    <div class="mt-3 rounded-xl border border-blue-200 bg-blue-50 px-4 py-3 text-xs text-blue-700">
+    <div class="mt-3 rounded-xl border border-primary-ring bg-primary-light px-4 py-3 text-xs text-primary">
       Preview regeneration requested. Rapid mapping changes keep launch blocked until the current Superset-side preview finishes and returns <span class="font-semibold">ready</span>.
     </div>
   {/if}
@@ -282,7 +282,7 @@
     </div>
   {:else if effectiveState === "failed"}
     {#if previewTechnicalDetails}
-      <div class="mt-5 overflow-hidden rounded-2xl border border-red-200 bg-red-950">
+      <div class="mt-5 overflow-hidden rounded-2xl border border-destructive-light bg-red-950">
         <div class="border-b border-red-900 px-4 py-3 text-sm font-medium text-red-100">
           {$t.dataset_review?.preview?.error_details_title || "Compilation details"}
         </div>
@@ -317,7 +317,7 @@
     <div
       class={`mt-4 rounded-xl px-3 py-3 text-sm ${
         localStatus === "error"
-          ? "border border-red-200 bg-red-50 text-red-700"
+          ? "border border-destructive-light bg-destructive-light text-red-700"
           : "border border-emerald-200 bg-emerald-50 text-emerald-800"
       }`}
     >
diff --git a/frontend/src/lib/components/dataset-review/ExecutionMappingReview.svelte b/frontend/src/lib/components/dataset-review/ExecutionMappingReview.svelte
index 6b8572f2..f069240b 100644
--- a/frontend/src/lib/components/dataset-review/ExecutionMappingReview.svelte
+++ b/frontend/src/lib/components/dataset-review/ExecutionMappingReview.svelte
@@ -410,7 +410,7 @@
     </div>
   {:else}
     {#if missingRequiredCount > 0}
-      <div class="mt-5 rounded-xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+      <div class="mt-5 rounded-xl border border-destructive-light bg-destructive-light px-4 py-4 text-sm text-red-700">
         {$t.dataset_review?.mapping?.required_blockers_notice.replace(
           "{count}",
           String(missingRequiredCount),
@@ -441,7 +441,7 @@
             rowState.missingRequiredValue
               ? isMappingFocused(mapping)
                 ? "border-violet-300 bg-violet-50 shadow-[0_0_0_3px_rgba(139,92,246,0.15)]"
-                : "border-red-200 bg-red-50"
+                : "border-destructive-light bg-destructive-light"
               : rowState.needsExplicitApproval
                 ? isMappingFocused(mapping)
                   ? "border-violet-300 bg-violet-50 shadow-[0_0_0_3px_rgba(139,92,246,0.15)]"
@@ -536,7 +536,7 @@
               {/if}
 
               {#if rowState.missingRequiredValue}
-                <div class="mt-3 rounded-xl border border-red-200 bg-red-50 px-3 py-3 text-sm text-red-700">
+                <div class="mt-3 rounded-xl border border-destructive-light bg-destructive-light px-3 py-3 text-sm text-red-700">
                   {$t.dataset_review?.mapping?.missing_required_value}
                 </div>
               {/if}
@@ -548,7 +548,7 @@
                       {$t.dataset_review?.mapping?.manual_value_label}
                     </span>
                     <input
-                      class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+                      class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus-visible:ring-primary-ring focus-visible:border-primary-ring"
                       bind:value={overrideValueDraft}
                       disabled={disabled || isSaving}
                     />
@@ -559,7 +559,7 @@
                       {$t.dataset_review?.mapping?.manual_note_label}
                     </span>
                     <textarea
-                      class="min-h-24 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+                      class="min-h-24 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus-visible:ring-primary-ring focus-visible:border-primary-ring"
                       bind:value={overrideNoteDraft}
                       disabled={disabled || isSaving}
                     ></textarea>
@@ -568,7 +568,7 @@
                   <div class="flex flex-wrap gap-2">
                     <button
                       type="button"
-                      class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-slate-300"
+                      class="inline-flex items-center justify-center rounded-xl bg-primary px-4 py-2 text-sm font-medium text-white transition hover:bg-primary-hover disabled:cursor-not-allowed disabled:bg-slate-300"
                       onclick={() => saveManualOverride(mapping)}
                       disabled={disabled || isSaving}
                     >
@@ -590,9 +590,9 @@
                 <div
                   class={`mt-4 rounded-xl px-3 py-3 text-sm ${
                     rowMessage.status === "error"
-                      ? "border border-red-200 bg-red-50 text-red-700"
+                      ? "border border-destructive-light bg-destructive-light text-red-700"
                       : rowMessage.status === "saving"
-                        ? "border border-blue-200 bg-blue-50 text-blue-700"
+                        ? "border border-primary-ring bg-primary-light text-primary"
                         : "border border-emerald-200 bg-emerald-50 text-emerald-800"
                   }`}
                 >
diff --git a/frontend/src/lib/components/dataset-review/LaunchConfirmationPanel.svelte b/frontend/src/lib/components/dataset-review/LaunchConfirmationPanel.svelte
index b93b6ef0..138ca2ab 100644
--- a/frontend/src/lib/components/dataset-review/LaunchConfirmationPanel.svelte
+++ b/frontend/src/lib/components/dataset-review/LaunchConfirmationPanel.svelte
@@ -216,7 +216,7 @@
   </div>
 
   {#if panelState === "Blocked"}
-    <div class="mt-5 rounded-xl border border-red-200 bg-red-50 p-4">
+    <div class="mt-5 rounded-xl border border-destructive-light bg-destructive-light p-4">
       <h3 class="text-sm font-semibold text-red-800">
         {$t.dataset_review?.launch?.blocked_title}
       </h3>
@@ -226,7 +226,7 @@
 
       <div class="mt-4 space-y-3">
         {#each launchBlockers as blocker}
-          <div class="rounded-xl border border-red-200 bg-white p-3">
+          <div class="rounded-xl border border-destructive-light bg-white p-3">
             <div class="text-sm font-medium leading-6 text-slate-900 break-words [overflow-wrap:anywhere]">
               {blocker.label}
             </div>
@@ -316,7 +316,7 @@
         type="button"
         onclick={confirmLaunch}
         disabled={disabled || launchStatus === "saving"}
-        class="inline-flex w-full items-center justify-center rounded-xl bg-blue-600 px-4 py-3 text-sm font-medium text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-slate-300"
+        class="inline-flex w-full items-center justify-center rounded-xl bg-primary px-4 py-3 text-sm font-medium text-white transition hover:bg-primary-hover disabled:cursor-not-allowed disabled:bg-slate-300"
       >
         {launchButtonLabel}
       </button>
@@ -378,9 +378,9 @@
     <div
       class={`mt-4 rounded-xl px-3 py-3 text-sm ${
         launchStatus === "error"
-          ? "border border-red-200 bg-red-50 text-red-700"
+          ? "border border-destructive-light bg-destructive-light text-red-700"
           : launchStatus === "saving"
-            ? "border border-blue-200 bg-blue-50 text-blue-700"
+            ? "border border-primary-ring bg-primary-light text-primary"
             : "border border-emerald-200 bg-emerald-50 text-emerald-800"
       }`}
     >
diff --git a/frontend/src/lib/components/dataset-review/SemanticLayerReview.svelte b/frontend/src/lib/components/dataset-review/SemanticLayerReview.svelte
index 594ba7c4..40b6537b 100644
--- a/frontend/src/lib/components/dataset-review/SemanticLayerReview.svelte
+++ b/frontend/src/lib/components/dataset-review/SemanticLayerReview.svelte
@@ -470,7 +470,7 @@
                       {$t.dataset_review?.semantics?.manual_verbose_name_label}
                     </span>
                     <input
-                      class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+                      class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus-visible:ring-primary-ring focus-visible:border-primary-ring"
                       bind:value={draftVerboseName}
                       disabled={isSaving || disabled}
                     />
@@ -481,7 +481,7 @@
                       {$t.dataset_review?.semantics?.manual_description_label}
                     </span>
                     <textarea
-                      class="min-h-24 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+                      class="min-h-24 w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus-visible:ring-primary-ring focus-visible:border-primary-ring"
                       bind:value={draftDescription}
                       disabled={isSaving || disabled}
                     ></textarea>
@@ -492,7 +492,7 @@
                       {$t.dataset_review?.semantics?.manual_display_format_label}
                     </span>
                     <input
-                      class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+                      class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus-visible:ring-primary-ring focus-visible:border-primary-ring"
                       bind:value={draftDisplayFormat}
                       disabled={isSaving || disabled}
                     />
@@ -501,7 +501,7 @@
                   <div class="flex flex-wrap gap-2">
                     <button
                       type="button"
-                      class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-slate-300"
+                      class="inline-flex items-center justify-center rounded-xl bg-primary px-4 py-2 text-sm font-medium text-white transition hover:bg-primary-hover disabled:cursor-not-allowed disabled:bg-slate-300"
                       onclick={() => saveManualOverride(field)}
                       disabled={disabled || isSaving}
                     >
@@ -580,7 +580,7 @@
                             </button>
                             <button
                               type="button"
-                              class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-slate-300"
+                              class="inline-flex items-center justify-center rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white transition hover:bg-primary-hover disabled:cursor-not-allowed disabled:bg-slate-300"
                               onclick={() => acceptCandidate(field, candidate.candidate_id, true)}
                               disabled={disabled || isSaving}
                             >
@@ -598,9 +598,9 @@
                 <div
                   class={`mt-4 rounded-xl px-3 py-3 text-sm ${
                     message.status === "error"
-                      ? "border border-red-200 bg-red-50 text-red-700"
+                      ? "border border-destructive-light bg-destructive-light text-red-700"
                       : message.status === "saving"
-                        ? "border border-blue-200 bg-blue-50 text-blue-700"
+                        ? "border border-primary-ring bg-primary-light text-primary"
                         : "border border-emerald-200 bg-emerald-50 text-emerald-800"
                   }`}
                 >
diff --git a/frontend/src/lib/components/dataset-review/SourceIntakePanel.svelte b/frontend/src/lib/components/dataset-review/SourceIntakePanel.svelte
index 80a623aa..624249b6 100644
--- a/frontend/src/lib/components/dataset-review/SourceIntakePanel.svelte
+++ b/frontend/src/lib/components/dataset-review/SourceIntakePanel.svelte
@@ -182,7 +182,7 @@
 <div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
   <div class="flex flex-col gap-2 md:flex-row md:items-start md:justify-between">
     <div>
-      <p class="text-xs font-semibold uppercase tracking-wide text-blue-700">
+      <p class="text-xs font-semibold uppercase tracking-wide text-primary">
         {$t.dataset_review?.source?.eyebrow}
       </p>
       <h2 class="text-xl font-semibold text-slate-900">
@@ -217,7 +217,7 @@
       type="button"
       class={`rounded-xl border px-4 py-3 text-left transition ${
         isSupersetLinkMode
-          ? "border-blue-500 bg-blue-50 text-blue-900 shadow-sm"
+          ? "border-blue-500 bg-primary-light text-blue-900 shadow-sm"
           : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"
       }`}
       onclick={() => setMode("superset_link")}
@@ -234,7 +234,7 @@
       type="button"
       class={`rounded-xl border px-4 py-3 text-left transition ${
         !isSupersetLinkMode
-          ? "border-blue-500 bg-blue-50 text-blue-900 shadow-sm"
+          ? "border-blue-500 bg-primary-light text-blue-900 shadow-sm"
           : "border-slate-200 bg-white text-slate-700 hover:border-slate-300 hover:bg-slate-50"
       }`}
       onclick={() => setMode("dataset_selection")}
@@ -259,7 +259,7 @@
           {$t.dataset_review?.source?.environment_label}
         </span>
         <select
-          class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+          class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus-visible:ring-primary-ring focus-visible:border-primary-ring"
           bind:value={environmentId}
           onchange={handleInput}
         >
@@ -281,8 +281,8 @@
           <input
             class={`w-full rounded-xl border px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:ring-2 ${
               localError
-                ? "border-red-300 bg-red-50 focus:border-red-400 focus:ring-red-100"
-                : "border-slate-300 bg-white focus:border-blue-500 focus:ring-blue-200"
+                ? "border-red-300 bg-destructive-light focus:border-red-400 focus:ring-red-100"
+                : "border-slate-300 bg-white focus-visible:ring-primary-ring focus-visible:border-primary-ring"
             }`}
             type="url"
             placeholder={$t.dataset_review?.source?.superset_link_placeholder}
@@ -293,8 +293,8 @@
           <input
             class={`w-full rounded-xl border px-3 py-2 text-sm text-slate-900 shadow-sm outline-none transition focus:ring-2 ${
               localError
-                ? "border-red-300 bg-red-50 focus:border-red-400 focus:ring-red-100"
-                : "border-slate-300 bg-white focus:border-blue-500 focus:ring-blue-200"
+                ? "border-red-300 bg-destructive-light focus:border-red-400 focus:ring-red-100"
+                : "border-slate-300 bg-white focus-visible:ring-primary-ring focus-visible:border-primary-ring"
             }`}
             type="text"
             placeholder={$t.dataset_review?.source?.dataset_selection_placeholder}
@@ -308,7 +308,7 @@
     <div
       class={`rounded-xl border px-4 py-3 text-sm ${
         localError
-          ? "border-red-200 bg-red-50 text-red-700"
+          ? "border-destructive-light bg-destructive-light text-red-700"
           : linkLooksRecognized && isSupersetLinkMode
             ? "border-emerald-200 bg-emerald-50 text-emerald-800"
             : "border-slate-200 bg-slate-50 text-slate-600"
@@ -331,7 +331,7 @@
 
       <button
         type="submit"
-        class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-slate-300"
+        class="inline-flex items-center justify-center rounded-xl bg-primary px-4 py-2 text-sm font-medium text-white transition hover:bg-primary-hover disabled:cursor-not-allowed disabled:bg-slate-300"
         disabled={!canSubmit}
       >
         {#if submitting}
diff --git a/frontend/src/lib/components/health/HealthMatrix.svelte b/frontend/src/lib/components/health/HealthMatrix.svelte
index 78958b96..538943ff 100644
--- a/frontend/src/lib/components/health/HealthMatrix.svelte
+++ b/frontend/src/lib/components/health/HealthMatrix.svelte
@@ -43,7 +43,7 @@
       <div class="h-24 w-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
     </div>
   {:else if error}
-    <div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-red-700 dark:text-red-400">
+    <div class="p-4 bg-destructive-light dark:bg-red-900/20 border border-destructive-light dark:border-red-800 rounded-lg text-red-700 dark:text-red-400">
       <p class="font-medium">{$t.health?.load_failed}</p>
       <p class="text-sm">{error}</p>
     </div>
@@ -59,7 +59,7 @@
         <div class="text-xs text-yellow-600 dark:text-yellow-500 uppercase tracking-wider font-semibold">{$t.health?.status_warn}</div>
       </div>
       
-      <div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-center">
+      <div class="p-4 bg-destructive-light dark:bg-red-900/20 border border-destructive-light dark:border-red-800 rounded-lg text-center">
         <div class="text-2xl font-bold text-red-700 dark:text-red-400">🔴 {fail_count}</div>
         <div class="text-xs text-red-600 dark:text-red-500 uppercase tracking-wider font-semibold">{$t.health?.status_fail}</div>
       </div>
diff --git a/frontend/src/lib/components/health/PolicyForm.svelte b/frontend/src/lib/components/health/PolicyForm.svelte
index 1e76863c..cb3e8445 100644
--- a/frontend/src/lib/components/health/PolicyForm.svelte
+++ b/frontend/src/lib/components/health/PolicyForm.svelte
@@ -99,14 +99,14 @@
       <div>
         <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Policy Name</label>
         <input id="name" type="text" bind:value={formData.name} 
-          class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" 
+          class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus-visible:ring-primary-ring focus-visible:border-primary-ring sm:text-sm" 
           placeholder="e.g., Production Morning Check" required disabled={isSubmitting} />
       </div>
 
       <div>
         <label for="env" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Environment</label>
         <select id="env" bind:value={formData.environment_id} 
-          class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" 
+          class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus-visible:ring-primary-ring focus-visible:border-primary-ring sm:text-sm" 
           disabled={isSubmitting}>
           {#each getSafeEnvironments() as env}
             <option value={env.id}>{env.name || env.id}</option>
@@ -138,19 +138,19 @@
         <div>
           <label for="start" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Window Start</label>
           <input id="start" type="time" bind:value={formData.window_start} 
-            class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" 
+            class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus-visible:ring-primary-ring focus-visible:border-primary-ring sm:text-sm" 
             disabled={isSubmitting} />
         </div>
         <div>
           <label for="end" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Window End</label>
           <input id="end" type="time" bind:value={formData.window_end} 
-            class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" 
+            class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus-visible:ring-primary-ring focus-visible:border-primary-ring sm:text-sm" 
             disabled={isSubmitting} />
         </div>
       </div>
 
       {#if formData.dashboard_ids.length > 0}
-        <div class="p-3 bg-blue-50 dark:bg-blue-900/30 rounded-md border border-blue-100 dark:border-blue-800">
+        <div class="p-3 bg-primary-light dark:bg-blue-900/30 rounded-md border border-blue-100 dark:border-blue-800">
           <p class="text-xs text-blue-700 dark:text-blue-300">
             💡 System will automatically distribute {formData.dashboard_ids.length} checks within this {Math.floor(windowDurationMinutes() / 60)}h {windowDurationMinutes() % 60}m window.
           </p>
@@ -165,7 +165,7 @@
       <div>
         <label for="alert" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Alert Condition</label>
         <select id="alert" bind:value={formData.alert_condition} 
-          class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" 
+          class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 rounded-md shadow-sm focus-visible:ring-primary-ring focus-visible:border-primary-ring sm:text-sm" 
           disabled={isSubmitting}>
           {#each alertConditions as cond}
             <option value={cond.id}>{cond.label}</option>
@@ -175,7 +175,7 @@
 
       <div class="flex items-center">
         <input id="notify" type="checkbox" bind:checked={formData.notify_owners} 
-          class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" 
+          class="h-4 w-4 text-primary focus-visible:ring-primary-ring border-gray-300 rounded" 
           disabled={isSubmitting} />
         <label for="notify" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
           Auto-notify Dashboard Owners
@@ -186,12 +186,12 @@
 
   <div class="pt-4 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3">
     <button type="button" onclick={onCancel} 
-      class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600"
+      class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-ring dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600"
       disabled={isSubmitting}>
       Cancel
     </button>
     <button type="submit" 
-      class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
+      class="px-4 py-2 text-sm font-medium text-white bg-primary border border-transparent rounded-md shadow-sm hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-ring disabled:opacity-50"
       disabled={isSubmitting}>
       {isSubmitting ? 'Saving...' : 'Save Policy'}
     </button>
diff --git a/frontend/src/lib/components/layout/TaskDrawer.svelte b/frontend/src/lib/components/layout/TaskDrawer.svelte
index 8ec0b184..6ab3cefd 100644
--- a/frontend/src/lib/components/layout/TaskDrawer.svelte
+++ b/frontend/src/lib/components/layout/TaskDrawer.svelte
@@ -648,7 +648,7 @@
           >
             <div class="mb-3 flex items-center justify-between gap-2">
               <div class="flex items-center gap-2">
-                <div class="p-1.5 bg-blue-50 text-blue-600 rounded-lg">
+                <div class="p-1.5 bg-primary-light text-primary rounded-lg">
                   <Icon name="list" size={14} />
                 </div>
                 <h3 class="text-sm font-bold text-slate-900">
@@ -776,7 +776,7 @@
                 }[task.plugin_id] || task.plugin_id,
               )}
               <button
-                class="group flex flex-col w-full p-4 bg-white border border-slate-200 rounded-xl shadow-sm transition-all hover:border-blue-200 hover:bg-slate-50/50 hover:shadow-md text-left"
+                class="group flex flex-col w-full p-4 bg-white border border-slate-200 rounded-xl shadow-sm transition-all hover:border-primary-ring hover:bg-slate-50/50 hover:shadow-md text-left"
                 onclick={() => selectTask(task)}
               >
                 <div class="flex items-center justify-between gap-2 mb-3">
diff --git a/frontend/src/lib/components/layout/TopNavbar.svelte b/frontend/src/lib/components/layout/TopNavbar.svelte
index 4cec4f30..ebd5d20f 100644
--- a/frontend/src/lib/components/layout/TopNavbar.svelte
+++ b/frontend/src/lib/components/layout/TopNavbar.svelte
@@ -479,7 +479,7 @@
         <select
           class="h-9 rounded-lg border px-3 text-sm font-medium focus:outline-none focus:ring-2
             {isProdContext
-            ? 'border-red-300 bg-red-50 text-red-900 focus:ring-red-200'
+            ? 'border-destructive-ring bg-destructive-light text-red-900 focus:ring-red-200'
             : 'border-slate-300 bg-white text-slate-700 focus:ring-sky-200'}"
           value={globalSelectedEnvId}
           onchange={handleGlobalEnvironmentChange}
@@ -494,7 +494,7 @@
         </select>
         {#if isProdContext}
           <span
-            class="rounded-md bg-red-600 px-2 py-1 text-xs font-bold text-white"
+            class="rounded-md bg-destructive px-2 py-1 text-xs font-bold text-white"
           >
             PROD
           </span>
diff --git a/frontend/src/lib/components/reports/ReportCard.svelte b/frontend/src/lib/components/reports/ReportCard.svelte
index d888b0d4..e76c9f80 100644
--- a/frontend/src/lib/components/reports/ReportCard.svelte
+++ b/frontend/src/lib/components/reports/ReportCard.svelte
@@ -74,7 +74,7 @@
 
 <button
   class="w-full rounded-xl border p-4 text-left shadow-sm transition hover:border-slate-300 hover:bg-slate-50 hover:shadow {selected
-    ? 'border-blue-400 bg-blue-50'
+    ? 'border-blue-400 bg-primary-light'
     : 'border-slate-200 bg-white'}"
   onclick={onSelect}
   aria-label={`${$t.reports?.title} ${report?.report_id || ""} ${$t.reports?.type} ${profileLabel || $t.reports?.unknown_type}`}
diff --git a/frontend/src/lib/components/translate/BulkCorrectionSidebar.svelte b/frontend/src/lib/components/translate/BulkCorrectionSidebar.svelte
index 7f683aa8..9490d9d8 100644
--- a/frontend/src/lib/components/translate/BulkCorrectionSidebar.svelte
+++ b/frontend/src/lib/components/translate/BulkCorrectionSidebar.svelte
@@ -144,7 +144,7 @@
 <!-- Toggle button -->
 <button
   onclick={openSidebar}
-  class="fixed right-0 top-1/3 z-40 flex items-center gap-2 px-3 py-2 bg-blue-600 text-white rounded-l-lg shadow-lg hover:bg-blue-700 transition-all translate-x-0"
+  class="fixed right-0 top-1/3 z-40 flex items-center gap-2 px-3 py-2 bg-primary text-white rounded-l-lg shadow-lg hover:bg-primary-hover transition-all translate-x-0"
   class:translate-x-[360px]={isOpen}
   title={$t.translate?.corrections?.title}
 >
@@ -267,14 +267,14 @@
         <button
           onclick={handleSubmitAll}
           disabled={!selectedDictId || validItemCount === 0}
-          class="w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          class="w-full px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
         >
           {$t.translate?.corrections?.submit_all?.replace('{count}', validItemCount)}
         </button>
       {:else if uxState === 'submitted'}
         <button
           onclick={resetAndClose}
-          class="w-full px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
+          class="w-full px-4 py-2 text-sm font-medium text-white bg-primary rounded-lg hover:bg-primary-hover transition-colors"
         >
           {$t.translate?.common?.close}
         </button>
diff --git a/frontend/src/lib/components/translate/BulkReplaceModal.svelte b/frontend/src/lib/components/translate/BulkReplaceModal.svelte
index 9b3c486d..3235acb9 100644
--- a/frontend/src/lib/components/translate/BulkReplaceModal.svelte
+++ b/frontend/src/lib/components/translate/BulkReplaceModal.svelte
@@ -176,7 +176,7 @@
 								type="text"
 								bind:value={findPattern}
 								placeholder={$t.translate?.bulk_replace?.find_placeholder}
-								class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+								class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
 								onkeydown={(e) => e.key === 'Enter' && handlePreview()}
 							/>
 							<label class="flex items-center gap-1.5 px-3 py-2 border border-gray-300 rounded-lg text-sm cursor-pointer hover:bg-gray-50 transition-colors">
@@ -198,7 +198,7 @@
 							type="text"
 							bind:value={replacementText}
 							placeholder={$t.translate?.bulk_replace?.replace_placeholder}
-							class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+							class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
 							onkeydown={(e) => e.key === 'Enter' && handlePreview()}
 						/>
 					</div>
@@ -221,7 +221,7 @@
 					<button
 						onclick={handlePreview}
 						disabled={!findPattern.trim() || !targetLanguage}
-						class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors text-sm font-medium"
+						class="w-full px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover disabled:opacity-50 transition-colors text-sm font-medium"
 					>
 						{$t.translate?.bulk_replace?.preview_affected}
 					</button>
@@ -229,7 +229,7 @@
 
 				<!-- Preview Error -->
 				{#if uxState === 'preview_error'}
-					<div class="bg-red-50 border border-red-200 rounded-lg p-3">
+					<div class="bg-destructive-light border-destructive-light rounded-lg p-3">
 						<p class="text-sm text-red-700">{errorMessage}</p>
 					</div>
 				{/if}
@@ -360,12 +360,12 @@
 
 				<!-- Apply Error State -->
 				{#if uxState === 'apply_error'}
-					<div class="bg-red-50 border border-red-200 rounded-lg p-3">
+					<div class="bg-destructive-light border-destructive-light rounded-lg p-3">
 						<p class="text-sm text-red-700 mb-2">{errorMessage}</p>
 						<div class="flex gap-2">
 							<button
 								onclick={handleShowConfirm}
-								class="px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+								class="px-3 py-1.5 text-sm bg-destructive text-white rounded-lg hover:bg-destructive-hover transition-colors"
 							>
 								{$t.translate?.bulk_replace?.retry}
 							</button>
diff --git a/frontend/src/lib/components/translate/CorrectionCell.svelte b/frontend/src/lib/components/translate/CorrectionCell.svelte
index ea3e314b..59387cd8 100644
--- a/frontend/src/lib/components/translate/CorrectionCell.svelte
+++ b/frontend/src/lib/components/translate/CorrectionCell.svelte
@@ -156,7 +156,7 @@
 	<div class="flex flex-col gap-1">
 		<input
 			bind:value={editValue}
-			class="border border-blue-300 rounded px-2 py-1 text-sm w-full focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+			class="border border-primary-ring rounded px-2 py-1 text-sm w-full focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
 			autofocus
 			onkeydown={(e) => {
 				if (e.key === 'Enter') saveEdit();
@@ -166,7 +166,7 @@
 		<div class="flex gap-1">
 			<button
 				onclick={saveEdit}
-				class="px-2 py-0.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+				class="px-2 py-0.5 text-xs bg-primary text-white rounded hover:bg-primary-hover transition-colors"
 				title={$t.translate?.corrections?.cell_save}
 			>
 				✓
@@ -269,7 +269,7 @@
 							<span class="text-xs font-medium text-gray-700">{$t.translate?.corrections?.cell_context_data}</span>
 							<button
 								onclick={() => { contextEditMode = !contextEditMode; if (!contextEditMode) editableContextData = contextData ? JSON.parse(JSON.stringify(contextData)) : null; }}
-								class="text-xs text-blue-600 hover:text-blue-700"
+								class="text-xs text-primary hover:text-blue-700"
 							>
 								{contextEditMode ? $t.translate?.corrections?.cell_cancel_edit : $t.translate?.corrections?.cell_edit}
 							</button>
diff --git a/frontend/src/lib/components/translate/ScheduleConfig.svelte b/frontend/src/lib/components/translate/ScheduleConfig.svelte
index d2b5f970..caf0d20d 100644
--- a/frontend/src/lib/components/translate/ScheduleConfig.svelte
+++ b/frontend/src/lib/components/translate/ScheduleConfig.svelte
@@ -169,7 +169,7 @@
 			</svg>
 			<p class="text-sm text-gray-500 mb-1">{$t.translate?.schedule?.no_schedule || 'No schedule configured'}</p>
 			<p class="text-xs text-gray-400 mb-4">{$t.translate?.schedule?.no_schedule_hint || 'Set up a recurring schedule for automatic translations'}</p>
-			<button onclick={() => (uxState = 'editing')} class="px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700">
+			<button onclick={() => (uxState = 'editing')} class="px-4 py-2 text-sm text-white bg-primary rounded-lg hover:bg-primary-hover">
 				{$t.translate?.schedule?.create_schedule || 'Create Schedule'}
 			</button>
 		</div>
@@ -185,7 +185,7 @@
 						bind:value={cronExpression}
 						placeholder="0 2 * * *"
 						disabled={!isEditing}
-						class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-blue-500 disabled:bg-gray-50 disabled:text-gray-500"
+						class="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm font-mono focus-visible:ring-2 focus-visible:ring-primary-ring disabled:bg-gray-50 disabled:text-gray-500"
 					/>
 					<select
 						bind:value={cronExpression}
@@ -224,14 +224,14 @@
 				<div class="flex gap-4">
 					<label class="inline-flex items-center cursor-pointer">
 						<input type="radio" bind:group={executionMode} value="full" class="sr-only peer" disabled={!isEditing} />
-						<div class="px-4 py-2 text-sm border border-gray-300 rounded-lg peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:border-gray-400 {isEditing ? '' : 'opacity-70'}">
+						<div class="px-4 py-2 text-sm border border-gray-300 rounded-lg peer-checked:border-blue-500 peer-checked:bg-primary-light peer-checked:text-blue-700 hover:border-gray-400 {isEditing ? '' : 'opacity-70'}">
 							<div class="font-medium">{$t.translate?.schedule?.mode_full || 'Full'}</div>
 							<div class="text-xs text-gray-500 mt-0.5">{$t.translate?.schedule?.mode_full_desc || 'Translate all rows every run'}</div>
 						</div>
 					</label>
 					<label class="inline-flex items-center cursor-pointer">
 						<input type="radio" bind:group={executionMode} value="new_key_only" class="sr-only peer" disabled={!isEditing} />
-						<div class="px-4 py-2 text-sm border border-gray-300 rounded-lg peer-checked:border-blue-500 peer-checked:bg-blue-50 peer-checked:text-blue-700 hover:border-gray-400 {isEditing ? '' : 'opacity-70'}">
+						<div class="px-4 py-2 text-sm border border-gray-300 rounded-lg peer-checked:border-blue-500 peer-checked:bg-primary-light peer-checked:text-blue-700 hover:border-gray-400 {isEditing ? '' : 'opacity-70'}">
 							<div class="font-medium">{$t.translate?.schedule?.mode_new_keys || 'New Keys Only'}</div>
 							<div class="text-xs text-gray-500 mt-0.5">{$t.translate?.schedule?.mode_new_keys_desc || 'Only translate rows with new key values'}</div>
 						</div>
@@ -274,7 +274,7 @@
 						</button>
 					{/if}
 					{#if uxState === 'editing'}
-						<button onclick={handleSave} class="px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700">
+						<button onclick={handleSave} class="px-4 py-2 text-sm text-white bg-primary rounded-lg hover:bg-primary-hover">
 							{scheduleExists ? ($t.translate?.schedule?.update || 'Update') : ($t.translate?.schedule?.create || 'Create')}
 						</button>
 					{/if}
diff --git a/frontend/src/lib/components/translate/TermCorrectionPopup.svelte b/frontend/src/lib/components/translate/TermCorrectionPopup.svelte
index 1ba62fe7..89bbc828 100644
--- a/frontend/src/lib/components/translate/TermCorrectionPopup.svelte
+++ b/frontend/src/lib/components/translate/TermCorrectionPopup.svelte
@@ -163,7 +163,7 @@
 			{:else if uxState === 'editing'}
 				<div class="space-y-4">
 					{#if sourceLanguage || targetLanguage}
-						<div class="bg-blue-50 border border-blue-200 rounded-lg px-3 py-2 text-xs text-blue-700">
+						<div class="bg-primary-light border-primary-ring rounded-lg px-3 py-2 text-xs text-blue-700">
 							<span class="font-medium">{$t.translate?.term_correction?.language_pair}</span> {sourceLanguage || $t.translate?.term_correction?.detected} → {targetLanguage || languageCode}
 						</div>
 					{/if}
@@ -211,7 +211,7 @@
 												contextData = null;
 												hasEditedContext = true;
 											}}
-											class="text-[11px] px-2 py-1 rounded border border-red-200 text-red-600 hover:bg-red-50"
+											class="text-[11px] px-2 py-1 rounded border border-destructive-light text-red-600 hover:bg-red-50"
 										>
 											{$t.translate?.term_correction?.remove_context}
 										</button>
@@ -242,7 +242,7 @@
 							bind:value={contextUsageNotes}
 							placeholder={$t.translate?.term_correction?.usage_notes_placeholder}
 							rows="2"
-							class="w-full px-3 py-2 border border-gray-300 rounded-lg text-xs focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
+							class="w-full px-3 py-2 border border-gray-300 rounded-lg text-xs focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring resize-none"
 						></textarea>
 					</div>
 
@@ -268,7 +268,7 @@
 							type="text"
 							bind:value={correctedTarget}
 							placeholder={$t.translate?.term_correction?.corrected_placeholder}
-							class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+							class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
 						/>
 					</div>
 					<div>
@@ -290,7 +290,7 @@
 						<button
 							onclick={handleSubmit}
 							disabled={!selectedDictId || !correctedTarget.trim()}
-							class="px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50"
+							class="px-4 py-2 text-sm text-white bg-primary rounded-lg hover:bg-primary-hover disabled:opacity-50"
 						>
 							{$t.translate?.term_correction?.submit_correction}
 						</button>
@@ -331,7 +331,7 @@
 					</svg>
 					<p class="text-sm font-medium text-gray-900">{$t.translate?.term_correction?.submitted}</p>
 					<p class="text-xs text-gray-500 mt-1">{submitResult?.message || ''}</p>
-					<button onclick={handleClose} class="mt-4 px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700">
+					<button onclick={handleClose} class="mt-4 px-4 py-2 text-sm text-white bg-primary rounded-lg hover:bg-primary-hover">
 						{$t.translate?.term_correction?.close}
 					</button>
 				</div>
diff --git a/frontend/src/lib/components/translate/TranslationMetricsDashboard.svelte b/frontend/src/lib/components/translate/TranslationMetricsDashboard.svelte
index 1b048f71..6f620ab6 100644
--- a/frontend/src/lib/components/translate/TranslationMetricsDashboard.svelte
+++ b/frontend/src/lib/components/translate/TranslationMetricsDashboard.svelte
@@ -90,11 +90,11 @@
 
   <!-- Error -->
   {:else if uxState === 'error'}
-    <div class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
+    <div class="bg-destructive-light border-destructive-light rounded-lg p-6 text-center">
       <p class="text-red-700 mb-3">{errorMessage}</p>
       <button
         onclick={handleRefresh}
-        class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm"
+        class="px-4 py-2 bg-destructive text-white rounded-lg hover:bg-destructive-hover transition-colors text-sm"
       >
         {$t.translate?.common?.retry}
       </button>
diff --git a/frontend/src/lib/components/translate/TranslationPreview.svelte b/frontend/src/lib/components/translate/TranslationPreview.svelte
index 053583e5..12c155c5 100644
--- a/frontend/src/lib/components/translate/TranslationPreview.svelte
+++ b/frontend/src/lib/components/translate/TranslationPreview.svelte
@@ -270,7 +270,7 @@
 			{/if}
 			<button
 				onclick={handlePreview}
-				class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
+				class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors text-sm"
 			>
 				{$t.translate?.preview?.run_preview}
 			</button>
@@ -297,7 +297,7 @@
 			<div class="flex items-center gap-3">
 				<button
 					onclick={handlePreview}
-					class="px-4 py-1.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm"
+					class="px-4 py-1.5 bg-destructive text-white rounded-lg hover:bg-destructive-hover transition-colors text-sm"
 				>
 					{$t.translate?.preview?.retry_preview}
 				</button>
@@ -319,23 +319,23 @@
 	{:else if uxState === 'preview_loaded'}
 		<!-- Cost Estimate Card -->
 		{#if costEstimate}
-			<div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-4 mb-4">
+			<div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-primary-ring rounded-lg p-4 mb-4">
 				<h4 class="text-sm font-medium text-blue-800 mb-2">{$t.translate?.preview?.cost_estimate}</h4>
 				<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
 					<div>
-						<span class="text-blue-600">{$t.translate?.preview?.sample_rows}</span>
+						<span class="text-primary">{$t.translate?.preview?.sample_rows}</span>
 						<span class="ml-1 font-semibold">{costEstimate.sample_size}</span>
 					</div>
 					<div>
-						<span class="text-blue-600">{$t.translate?.preview?.sample_tokens}</span>
+						<span class="text-primary">{$t.translate?.preview?.sample_tokens}</span>
 						<span class="ml-1 font-semibold">{costEstimate.sample_total_tokens?.toLocaleString()}</span>
 					</div>
 					<div>
-						<span class="text-blue-600">{$t.translate?.preview?.sample_cost}</span>
+						<span class="text-primary">{$t.translate?.preview?.sample_cost}</span>
 						<span class="ml-1 font-semibold">${costEstimate.sample_cost?.toFixed(6)}</span>
 					</div>
 					<div>
-						<span class="text-blue-600">{$t.translate?.preview?.est_total_cost}</span>
+						<span class="text-primary">{$t.translate?.preview?.est_total_cost}</span>
 						<span class="ml-1 font-semibold">${costEstimate.estimated_cost?.toFixed(6)}</span>
 					</div>
 				</div>
@@ -365,7 +365,7 @@
 					<span class="text-yellow-600">{$t.translate?.preview?.pending_count?.replace('{count}', pendingCount)}</span>
 				{/if}
 				{#if targetLanguages.length > 0}
-					<span class="text-blue-600">{$t.translate?.preview?.languages_count?.replace('{count}', targetLanguages.length)}</span>
+					<span class="text-primary">{$t.translate?.preview?.languages_count?.replace('{count}', targetLanguages.length)}</span>
 				{/if}
 			</div>
 			<div class="flex gap-2">
@@ -397,7 +397,7 @@
 						{#each targetLanguages as lang}
 							<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase min-w-[250px]">
 								<div class="flex items-center gap-1">
-									<span class="font-mono text-blue-600">{lang}</span>
+									<span class="font-mono text-primary">{lang}</span>
 								</div>
 							</th>
 						{/each}
@@ -432,12 +432,12 @@
 									{#if isEditing}
 										<textarea
 											bind:value={editValues[langKey]}
-											class="w-full px-2 py-1 border border-blue-300 rounded text-xs focus:ring-2 focus:ring-blue-500 min-h-[50px]"
+											class="w-full px-2 py-1 border border-primary-ring rounded text-xs focus-visible:ring-2 focus-visible:ring-primary-ring min-h-[50px]"
 										/>
 										<div class="flex gap-1 mt-1">
 											<button
 												onclick={() => saveLangEdit(row.id, lang)}
-												class="px-2 py-0.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"
+												class="px-2 py-0.5 text-xs bg-primary text-white rounded hover:bg-primary-hover"
 											>
 												{$t.translate?.preview?.save_edit}
 											</button>
diff --git a/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte b/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte
index 4edd40b4..559a41f9 100644
--- a/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte
+++ b/frontend/src/lib/components/translate/TranslationRunGlobalIndicator.svelte
@@ -128,7 +128,7 @@
 						<div class="flex items-center gap-2">
 							<button
 								onclick={handleClick}
-								class="text-xs text-blue-600 hover:text-blue-800 underline"
+								class="text-xs text-primary hover:text-blue-800 underline"
 							>
 								{$t.common?.open || 'Open'}
 							</button>
@@ -147,7 +147,7 @@
 					<!-- Progress bar with percentage -->
 					<div class="w-full bg-gray-200 rounded-full h-2.5 mb-2">
 						<div
-							class="bg-blue-600 h-2.5 rounded-full transition-all duration-500"
+							class="bg-primary h-2.5 rounded-full transition-all duration-500"
 							style="width: {Math.min(progressPct, 100)}%"
 						/>
 					</div>
@@ -178,7 +178,7 @@
 			<div
 				class="px-4 py-2 text-white text-sm flex items-center justify-between cursor-pointer"
 				class:bg-green-600={uxState === 'completed' || uxState === 'partial'}
-				class:bg-red-600={uxState === 'failed'}
+				class:bg-destructive={uxState === 'failed'}
 				class:bg-gray-500={uxState === 'cancelled'}
 				onclick={handleClick}
 				role="button"
diff --git a/frontend/src/lib/components/translate/TranslationRunProgress.svelte b/frontend/src/lib/components/translate/TranslationRunProgress.svelte
index b4fea8ff..8391b9d3 100644
--- a/frontend/src/lib/components/translate/TranslationRunProgress.svelte
+++ b/frontend/src/lib/components/translate/TranslationRunProgress.svelte
@@ -92,7 +92,7 @@
 			<!-- Progress bar -->
 			<div class="w-full bg-gray-200 rounded-full h-2.5">
 				<div
-					class="bg-blue-600 h-2.5 rounded-full transition-all duration-500"
+					class="bg-primary h-2.5 rounded-full transition-all duration-500"
 					style="width: {Math.min(progressPct, 100)}%"
 				/>
 			</div>
@@ -179,7 +179,7 @@
 
 	<!-- Failed -->
 	{:else if uxState === 'failed'}
-		<div class="bg-red-50 border border-red-200 rounded-lg p-4">
+		<div class="bg-destructive-light border-destructive-light rounded-lg p-4">
 			<div class="flex items-center justify-between mb-2">
 				<div class="flex items-center gap-2">
 					<span class="text-red-600 text-lg">&#10007;</span>
diff --git a/frontend/src/lib/components/translate/TranslationRunResult.svelte b/frontend/src/lib/components/translate/TranslationRunResult.svelte
index bec8d755..f3823a19 100644
--- a/frontend/src/lib/components/translate/TranslationRunResult.svelte
+++ b/frontend/src/lib/components/translate/TranslationRunResult.svelte
@@ -183,7 +183,7 @@
 						<button
 							onclick={handleRetry}
 							disabled={isRetrying}
-							class="px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 transition-colors"
+							class="px-3 py-1.5 text-xs bg-primary text-white rounded hover:bg-primary-hover disabled:opacity-50 transition-colors"
 						>
 							{isRetrying ? $t.translate?.run?.retrying : $t.translate?.run?.retry_failed}
 						</button>
@@ -363,7 +363,7 @@
 										{#each targetLanguages as lang}
 											<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase min-w-[180px]">
 												<div class="flex items-center gap-1">
-													<span class="font-mono text-blue-600">{lang}</span>
+													<span class="font-mono text-primary">{lang}</span>
 												</div>
 											</th>
 										{/each}
@@ -430,7 +430,7 @@
 															rowKey: row.id
 														};
 													}}
-													class="px-2 py-0.5 text-[10px] bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+													class="px-2 py-0.5 text-[10px] bg-primary text-white rounded hover:bg-primary-hover transition-colors"
 													title="Submit Correction"
 												>
 													{$t.translate?.run?.correct || 'Correct'}
diff --git a/frontend/src/lib/components/ui/MultiSelect.svelte b/frontend/src/lib/components/ui/MultiSelect.svelte
index 41630ebe..5cdedc7d 100644
--- a/frontend/src/lib/components/ui/MultiSelect.svelte
+++ b/frontend/src/lib/components/ui/MultiSelect.svelte
@@ -61,7 +61,7 @@
       value={searchQuery}
       oninput={handleSearchInput}
       placeholder={placeholder}
-      class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm mb-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+      class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm mb-2 focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
     />
   {/if}
 
@@ -78,7 +78,7 @@
     {:else}
       {#each filteredOptions as opt}
         <label
-          class="flex items-center gap-2 px-3 py-2 text-sm hover:bg-blue-50 cursor-pointer transition-colors {selected.includes(opt.code) ? 'bg-blue-50' : ''}"
+          class="flex items-center gap-2 px-3 py-2 text-sm hover:bg-blue-50 cursor-pointer transition-colors {selected.includes(opt.code) ? 'bg-primary-light' : ''}"
           role="option"
           aria-selected={selected.includes(opt.code)}
         >
@@ -86,7 +86,7 @@
             type="checkbox"
             checked={selected.includes(opt.code)}
             onchange={() => toggle(opt.code)}
-            class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            class="rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
           />
           <span class="flex-1">{opt.name}</span>
           <span class="text-xs text-gray-400 font-mono">{opt.code}</span>
diff --git a/frontend/src/pages/Settings.svelte b/frontend/src/pages/Settings.svelte
index 60a7db4c..17940720 100755
--- a/frontend/src/pages/Settings.svelte
+++ b/frontend/src/pages/Settings.svelte
@@ -237,13 +237,13 @@
             </div>
             <div class="md:col-span-2">
                 <label class="flex items-center">
-                    <input type="checkbox" id="enable_belief_state" bind:checked={settings.settings.logging.enable_belief_state} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
+                    <input type="checkbox" id="enable_belief_state" bind:checked={settings.settings.logging.enable_belief_state} class="h-4 w-4 text-primary border-gray-300 rounded" />
                     <span class="ml-2 block text-sm text-gray-900">{$t.settings?.enable_belief_state}</span>
                 </label>
             </div>
         </div>
 
-        <button onclick={handleSaveGlobal} class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-max mt-4">
+        <button onclick={handleSaveGlobal} class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover w-max mt-4">
             {$t.settings?.save_global_settings}
         </button>
     </section>
@@ -311,7 +311,7 @@
                     <input type="password" id="env_pass" bind:value={newEnv.password} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
                 </div>
                 <div class="flex items-center">
-                    <input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
+                    <input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-primary border-gray-300 rounded" />
                     <label for="env_default" class="ml-2 block text-sm text-gray-900">{$t.settings?.env_default}</label>
                 </div>
             </div>
@@ -319,7 +319,7 @@
             <h3 class="text-lg font-medium mb-4 mt-6">{$t.settings?.backup_schedule}</h3>
             <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div class="flex items-center">
-                    <input type="checkbox" id="backup_enabled" bind:checked={newEnv.backup_schedule.enabled} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
+                    <input type="checkbox" id="backup_enabled" bind:checked={newEnv.backup_schedule.enabled} class="h-4 w-4 text-primary border-gray-300 rounded" />
                     <label for="backup_enabled" class="ml-2 block text-sm text-gray-900">{$t.settings?.enable_auto_backups}</label>
                 </div>
                 <div>
diff --git a/frontend/src/routes/+error.svelte b/frontend/src/routes/+error.svelte
index 6602abfb..6623a710 100644
--- a/frontend/src/routes/+error.svelte
+++ b/frontend/src/routes/+error.svelte
@@ -13,7 +13,7 @@
     </p>
     <a
         href="/"
-        class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition-colors"
+        class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary transition-colors"
     >
         Back to Dashboard
     </a>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index fa80e27e..98c74781 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -55,7 +55,7 @@
 
 <div class="flex items-center justify-center min-h-screen">
   <svg
-    class="animate-spin h-8 w-8 text-blue-600"
+    class="animate-spin h-8 w-8 text-primary"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"
diff --git a/frontend/src/routes/admin/roles/+page.svelte b/frontend/src/routes/admin/roles/+page.svelte
index 0b02f4d9..a038bcba 100644
--- a/frontend/src/routes/admin/roles/+page.svelte
+++ b/frontend/src/routes/admin/roles/+page.svelte
@@ -147,7 +147,7 @@
     <div class="flex justify-between items-center mb-6">
       <h1 class="text-2xl font-bold">{$t.admin.roles.title}</h1>
       <button
-        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover"
         onclick={openCreateModal}
       >
         {$t.admin.roles.create}
@@ -177,14 +177,14 @@
                 <td class="px-6 py-4">
                   <div class="flex flex-wrap gap-1">
                     {#each role.permissions as perm}
-                      <span class="px-2 py-0.5 bg-blue-50 text-blue-700 text-xs rounded border border-blue-100">
+                      <span class="px-2 py-0.5 bg-primary-light text-blue-700 text-xs rounded border border-blue-100">
                         {perm.resource}:{perm.action}
                       </span>
                     {/each}
                   </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                  <button onclick={() => openEditModal(role)} class="text-blue-600 hover:text-blue-900 mr-3">{$t.common.edit}</button>
+                  <button onclick={() => openEditModal(role)} class="text-primary hover:text-blue-900 mr-3">{$t.common.edit}</button>
                   <button onclick={() => handleDeleteRole(role)} class="text-red-600 hover:text-red-900">{$t.common.delete}</button>
                 </td>
               </tr>
@@ -218,7 +218,7 @@
                 <legend class="sr-only">{$t.admin.roles.permissions}</legend>
                 {#each permissions as perm}
                   <label class="flex items-center space-x-2 p-1 hover:bg-white rounded cursor-pointer">
-                    <input type="checkbox" value={perm.id} bind:group={roleForm.permissions} class="rounded text-blue-600" />
+                    <input type="checkbox" value={perm.id} bind:group={roleForm.permissions} class="rounded text-primary" />
                     <span class="text-xs">{perm.resource}:{perm.action}</span>
                   </label>
                 {/each}
@@ -227,7 +227,7 @@
             </div>
             <div class="flex justify-end gap-2 pt-4 border-t">
               <button type="button" class="px-4 py-2 text-gray-600" onclick={() => showModal = false}>{$t.common.cancel}</button>
-              <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">{$t.common.save}</button>
+              <button type="submit" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary-hover">{$t.common.save}</button>
             </div>
           </form>
         </div>
diff --git a/frontend/src/routes/admin/settings/+page.svelte b/frontend/src/routes/admin/settings/+page.svelte
index 46b290bf..1923c3b8 100644
--- a/frontend/src/routes/admin/settings/+page.svelte
+++ b/frontend/src/routes/admin/settings/+page.svelte
@@ -182,7 +182,7 @@
     <div class="flex justify-between items-center mb-6">
       <h1 class="text-2xl font-bold">{$t.admin.settings.title}</h1>
       <button
-        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors"
+        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover transition-colors"
         onclick={() => showCreateModal = true}
       >
         {$t.admin.settings.add_mapping}
@@ -251,7 +251,7 @@
               <select
                 id="admin-app-log-level"
                 bind:value={loggingConfig.level}
-                class="w-full border border-gray-300 p-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                class="w-full border border-gray-300 p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-blue-500"
               >
                 {#each LOG_LEVELS as level}
                   <option value={level}>{level}</option>
@@ -265,7 +265,7 @@
               <select
                 id="admin-task-log-level"
                 bind:value={loggingConfig.task_log_level}
-                class="w-full border border-gray-300 p-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                class="w-full border border-gray-300 p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-blue-500"
               >
                 {#each LOG_LEVELS as level}
                   <option value={level}>{level}</option>
@@ -280,7 +280,7 @@
               type="checkbox"
               id="enable_belief_state"
               bind:checked={loggingConfig.enable_belief_state}
-              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+              class="h-4 w-4 text-primary focus-visible:ring-primary-ring border-gray-300 rounded"
             />
             <label for="enable_belief_state" class="ml-2 block text-sm text-gray-700">
               {$t.settings?.enable_belief_state }
@@ -292,7 +292,7 @@
             <button
               onclick={saveLoggingConfig}
               disabled={loggingConfigSaving}
-              class="px-4 py-2 bg-blue-600 text-white rounded font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
+              class="px-4 py-2 bg-primary text-white rounded font-medium hover:bg-primary-hover disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
             >
               {loggingConfigSaving ? ($t.settings?.saving ) : ($t.admin?.settings?.save_configuration )}
             </button>
@@ -319,7 +319,7 @@
                 id="admin-ad-group-dn"
                 type="text"
                 bind:value={newMapping.ad_group}
-                class="w-full border border-gray-300 p-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                class="w-full border border-gray-300 p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-blue-500"
                 placeholder={$t.admin?.settings?.ad_group_placeholder }
                 required
               />
@@ -330,7 +330,7 @@
               <select
                 id="admin-local-role-select"
                 bind:value={newMapping.role_id}
-                class="w-full border border-gray-300 p-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                class="w-full border border-gray-300 p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-blue-500"
                 required
               >
                 <option value="" disabled>{$t.admin.settings.select_role}</option>
@@ -349,7 +349,7 @@
               </button>
               <button
                 type="submit"
-                class="px-6 py-2 bg-blue-600 text-white rounded font-bold hover:bg-blue-700 shadow-md"
+                class="px-6 py-2 bg-primary text-white rounded font-bold hover:bg-primary-hover shadow-md"
               >
                 {$t.common.save}
               </button>
diff --git a/frontend/src/routes/admin/settings/llm/+page.svelte b/frontend/src/routes/admin/settings/llm/+page.svelte
index 25fa7db0..e3fd52bb 100644
--- a/frontend/src/routes/admin/settings/llm/+page.svelte
+++ b/frontend/src/routes/admin/settings/llm/+page.svelte
@@ -304,7 +304,7 @@
 
       <div class="mt-4 flex justify-end">
         <button
-          class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 disabled:opacity-60"
+          class="rounded bg-primary px-4 py-2 text-white hover:bg-primary-hover disabled:opacity-60"
           disabled={savingPrompts}
           onclick={saveSettings}
         >
diff --git a/frontend/src/routes/admin/users/+page.svelte b/frontend/src/routes/admin/users/+page.svelte
index e22a5193..888f3536 100644
--- a/frontend/src/routes/admin/users/+page.svelte
+++ b/frontend/src/routes/admin/users/+page.svelte
@@ -166,7 +166,7 @@
     <div class="flex justify-between items-center mb-6">
       <h1 class="text-2xl font-bold">{$t.admin.users.title}</h1>
       <button
-        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors"
+        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover transition-colors"
         onclick={openCreateModal}
       >
         {$t.admin.users.create}
@@ -221,7 +221,7 @@
                   </span>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-                  <button onclick={() => openEditModal(user)} class="text-blue-600 hover:text-blue-900 mr-3" disabled={deletingUserId === user.id}>{$t.common.edit}</button>
+                  <button onclick={() => openEditModal(user)} class="text-primary hover:text-blue-900 mr-3" disabled={deletingUserId === user.id}>{$t.common.edit}</button>
                   <button
                     onclick={() => handleDeleteUser(user)}
                     class="text-red-600 hover:text-red-900 disabled:opacity-50"
@@ -249,28 +249,28 @@
           }}>
             <div class="mb-4">
               <label for="admin-user-username" class="block text-sm font-medium text-gray-700 mb-1">{$t.admin.users.username}</label>
-              <input id="admin-user-username" type="text" bind:value={userForm.username} class="w-full border border-gray-300 p-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-gray-50" required readonly={isEditing} />
+              <input id="admin-user-username" type="text" bind:value={userForm.username} class="w-full border border-gray-300 p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-blue-500 bg-gray-50" required readonly={isEditing} />
             </div>
             <div class="mb-4">
               <label for="admin-user-email" class="block text-sm font-medium text-gray-700 mb-1">{$t.admin.users.email}</label>
-              <input id="admin-user-email" type="email" bind:value={userForm.email} class="w-full border border-gray-300 p-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required />
+              <input id="admin-user-email" type="email" bind:value={userForm.email} class="w-full border border-gray-300 p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-blue-500" required />
             </div>
             <div class="mb-4">
               <label for="admin-user-password" class="block text-sm font-medium text-gray-700 mb-1">{$t.admin.users.password}</label>
-              <input id="admin-user-password" type="password" bind:value={userForm.password} class="w-full border border-gray-300 p-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required={!isEditing} />
+              <input id="admin-user-password" type="password" bind:value={userForm.password} class="w-full border border-gray-300 p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-blue-500" required={!isEditing} />
               {#if isEditing}
                 <p class="text-xs text-gray-500 mt-1">{$t.admin.users.password_hint}</p>
               {/if}
             </div>
             <div class="mb-4">
               <label class="flex items-center space-x-2 cursor-pointer">
-                <input type="checkbox" bind:checked={userForm.is_active} class="rounded text-blue-600 focus:ring-blue-500" />
+                <input type="checkbox" bind:checked={userForm.is_active} class="rounded text-primary focus-visible:ring-primary-ring" />
                 <span class="text-sm font-medium text-gray-700">{$t.admin.users.active}</span>
               </label>
             </div>
             <div class="mb-6">
               <label for="admin-user-roles" class="block text-sm font-medium text-gray-700 mb-1">{$t.admin.users.roles}</label>
-              <select id="admin-user-roles" multiple bind:value={userForm.roles} class="w-full border border-gray-300 p-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500 h-32">
+              <select id="admin-user-roles" multiple bind:value={userForm.roles} class="w-full border border-gray-300 p-2 rounded focus-visible:ring-2 focus-visible:ring-primary-ring focus:border-blue-500 h-32">
                 {#each roles as role}
                   <option value={role.name}>{role.name}</option>
                 {/each}
@@ -279,7 +279,7 @@
             </div>
             <div class="flex justify-end gap-3 pt-4 border-t">
               <button type="button" class="px-4 py-2 text-gray-600 hover:text-gray-800 font-medium" onclick={() => showModal = false}>{$t.common.cancel}</button>
-              <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded font-bold hover:bg-blue-700 shadow-md transition-colors">{$t.common.save}</button>
+              <button type="submit" class="px-6 py-2 bg-primary text-white rounded font-bold hover:bg-primary-hover shadow-md transition-colors">{$t.common.save}</button>
             </div>
           </form>
         </div>
diff --git a/frontend/src/routes/dashboards/+page.svelte b/frontend/src/routes/dashboards/+page.svelte
index 6b9f7c6d..773361b5 100644
--- a/frontend/src/routes/dashboards/+page.svelte
+++ b/frontend/src/routes/dashboards/+page.svelte
@@ -1501,14 +1501,14 @@
   </div>
 
   {#if effectiveProfileFilter?.applied}
-    <div class="rounded-lg border border-blue-200 bg-blue-50 px-4 py-2 text-sm text-blue-800">
+    <div class="rounded-lg border border-primary-ring bg-primary-light px-4 py-2 text-sm text-blue-800">
       <div class="flex flex-wrap items-center justify-between gap-2">
         <span class="font-medium">
           {$t.profile?.filter_badge_active || "Profile filters active"}
         </span>
         <button
           type="button"
-          class="rounded border border-blue-300 bg-white px-2.5 py-1 text-xs font-medium text-blue-700 hover:bg-blue-100"
+          class="rounded border border-primary bg-white px-2.5 py-1 text-xs font-medium text-blue-700 hover:bg-blue-100"
           onclick={handleTemporaryShowAll}
         >
           {$t.profile?.filter_show_all_temporarily || "Show all dashboards temporarily"}
@@ -1628,7 +1628,7 @@
         <div class="mt-4">
           <button
             type="button"
-            class="rounded border border-blue-300 bg-white px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-50"
+            class="rounded border border-primary bg-white px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-50"
             onclick={handleTemporaryShowAll}
           >
             {$t.profile?.filter_show_all_temporarily || "Show all dashboards temporarily"}
@@ -1672,7 +1672,7 @@
       <div>
         <input
           type="text"
-          class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring"
           placeholder={$t.dashboard?.search}
           oninput={handleSearch}
           value={searchQuery}
@@ -1702,7 +1702,7 @@
                 class="rounded border px-1.5 py-0.5 text-xs transition-colors {hasColumnFilter(
                   'title',
                 )
-                  ? 'border-blue-400 text-blue-700 bg-blue-50'
+                  ? 'border-blue-400 text-blue-700 bg-primary-light'
                   : 'border-gray-300 text-gray-500 hover:text-gray-700'}"
                 onclick={(event) => toggleFilterDropdown("title", event, 256)}
                 title={$t.dashboard?.column_filter}
@@ -1724,7 +1724,7 @@
                   />
                   <div class="mt-2 flex items-center justify-between text-xs">
                     <button
-                      class="text-blue-600 hover:underline"
+                      class="text-primary hover:underline"
                       onclick={() => selectAllColumnFilterValues("title")}
                       >{$t.dashboard?.select_all}</button
                     >
@@ -1767,7 +1767,7 @@
                 class="rounded border px-1.5 py-0.5 text-xs transition-colors {hasColumnFilter(
                   'git_status',
                 )
-                  ? 'border-blue-400 text-blue-700 bg-blue-50'
+                  ? 'border-blue-400 text-blue-700 bg-primary-light'
                   : 'border-gray-300 text-gray-500 hover:text-gray-700'}"
                 onclick={(event) =>
                   toggleFilterDropdown("git_status", event, 256)}
@@ -1793,7 +1793,7 @@
                   />
                   <div class="mt-2 flex items-center justify-between text-xs">
                     <button
-                      class="text-blue-600 hover:underline"
+                      class="text-primary hover:underline"
                       onclick={() => selectAllColumnFilterValues("git_status")}
                       >{$t.dashboard?.select_all}</button
                     >
@@ -1837,7 +1837,7 @@
                 class="rounded border px-1.5 py-0.5 text-xs transition-colors {hasColumnFilter(
                   'llm_status',
                 )
-                  ? 'border-blue-400 text-blue-700 bg-blue-50'
+                  ? 'border-blue-400 text-blue-700 bg-primary-light'
                   : 'border-gray-300 text-gray-500 hover:text-gray-700'}"
                 onclick={(event) =>
                   toggleFilterDropdown("llm_status", event, 256)}
@@ -1863,7 +1863,7 @@
                   />
                   <div class="mt-2 flex items-center justify-between text-xs">
                     <button
-                      class="text-blue-600 hover:underline"
+                      class="text-primary hover:underline"
                       onclick={() => selectAllColumnFilterValues("llm_status")}
                       >{$t.dashboard?.select_all}</button
                     >
@@ -1910,7 +1910,7 @@
                 class="rounded border px-1.5 py-0.5 text-xs transition-colors {hasColumnFilter(
                   'changed_on',
                 )
-                  ? 'border-blue-400 text-blue-700 bg-blue-50'
+                  ? 'border-blue-400 text-blue-700 bg-primary-light'
                   : 'border-gray-300 text-gray-500 hover:text-gray-700'}"
                 onclick={(event) =>
                   toggleFilterDropdown("changed_on", event, 256)}
@@ -1936,7 +1936,7 @@
                   />
                   <div class="mt-2 flex items-center justify-between text-xs">
                     <button
-                      class="text-blue-600 hover:underline"
+                      class="text-primary hover:underline"
                       onclick={() => selectAllColumnFilterValues("changed_on")}
                       >{$t.dashboard?.select_all}</button
                     >
@@ -1980,7 +1980,7 @@
                 class="rounded border px-1.5 py-0.5 text-xs transition-colors {hasColumnFilter(
                   'actor',
                 )
-                  ? 'border-blue-400 text-blue-700 bg-blue-50'
+                  ? 'border-blue-400 text-blue-700 bg-primary-light'
                   : 'border-gray-300 text-gray-500 hover:text-gray-700'}"
                 onclick={(event) => toggleFilterDropdown("actor", event, 288)}
                 title={$t.dashboard?.column_filter}
@@ -2002,7 +2002,7 @@
                   />
                   <div class="mt-2 flex items-center justify-between text-xs">
                     <button
-                      class="text-blue-600 hover:underline"
+                      class="text-primary hover:underline"
                       onclick={() => selectAllColumnFilterValues("actor")}
                       >{$t.dashboard?.select_all}</button
                     >
@@ -2118,8 +2118,8 @@
             <div class="flex items-center">
               <div class="flex items-center gap-1.5">
                 <button
-                  class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-slate-200 bg-white text-blue-600 hover:bg-blue-50 hover:border-blue-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                  onclick={() => handleAction(dashboard, "migrate")}
+class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-slate-200 bg-white text-primary hover:bg-blue-50 hover:border-primary-ring transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          onclick={() => handleAction(dashboard, "migrate")}
                   title={$t.dashboard?.action_migrate}
                 >
                   <svg
@@ -2273,7 +2273,7 @@
           </div>
           <div>
             <select
-              class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+class="px-4 py-2 border border-gray-300 rounded-lg bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring"
               value={pageSize}
               onchange={handlePageSizeChange}
             >
@@ -2452,7 +2452,7 @@
                     class="sr-only peer"
                   />
                   <div
-                    class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"
+                    class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"
                   ></div>
                   <span class="ml-2 text-xs text-gray-500"
                     >{useDbMappings ? $t.common?.on : $t.common?.off}</span
@@ -2464,7 +2464,7 @@
                 <div class="flex items-center justify-between mb-2">
                   {#if availableDbMappings.length > 0}
                     <button
-                      class="text-sm text-blue-600 hover:underline"
+                      class="text-sm text-primary hover:underline"
                       onclick={() => (isEditingMappings = !isEditingMappings)}
                     >
                       {isEditingMappings
@@ -2566,12 +2566,12 @@
             </div>
 
             <!-- Fix Cross-Filters (Spec 022 FR-007) -->
-            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <div class="bg-primary-light border border-primary-ring rounded-lg p-4">
               <label class="flex items-start gap-3 cursor-pointer">
                 <input
                   type="checkbox"
                   bind:checked={fixCrossFilters}
-                  class="mt-0.5 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                  class="mt-0.5 h-4 w-4 rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
                 />
                 <div>
                   <span class="text-sm font-medium text-gray-900"
@@ -2609,7 +2609,7 @@
 
             <!-- Dry Run Summary -->
             {#if targetEnvId && selectedIds.size > 0}
-              <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+              <div class="bg-primary-light border border-primary-ring rounded-lg p-4">
                 {#if isDryRunLoading}
                   <div class="flex items-center gap-2 text-blue-700 text-sm">
                     <svg
@@ -2661,7 +2661,7 @@
                     class="text-sm font-medium text-blue-900 flex items-start gap-2"
                   >
                     <svg
-                      class="w-5 h-5 text-blue-600 mt-0.5 shrink-0"
+                      class="w-5 h-5 text-primary mt-0.5 shrink-0"
                       xmlns="http://www.w3.org/2000/svg"
                       viewBox="0 0 20 20"
                       fill="currentColor"
@@ -2839,7 +2839,7 @@
                         "0 2 * * * (daily at 2 AM)"}
                       bind:value={backupSchedule}
                     />
-                    <button class="text-xs text-blue-600 hover:underline mt-1"
+                    <button class="text-xs text-primary hover:underline mt-1"
                       >{$t.dashboard?.cron_help}</button
                     >
                   </div>
diff --git a/frontend/src/routes/dashboards/[id]/+page.svelte b/frontend/src/routes/dashboards/[id]/+page.svelte
index 21e02088..0753c88f 100644
--- a/frontend/src/routes/dashboards/[id]/+page.svelte
+++ b/frontend/src/routes/dashboards/[id]/+page.svelte
@@ -595,11 +595,11 @@
 
   {#if error}
     <div
-      class="flex items-center justify-between rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-red-700"
+      class="flex items-center justify-between rounded-lg border border-red-300 bg-destructive-light px-4 py-3 text-red-700"
     >
       <span>{error}</span>
       <button
-        class="rounded bg-red-600 px-3 py-1.5 text-white hover:bg-red-700"
+        class="rounded bg-destructive px-3 py-1.5 text-white hover:bg-destructive-hover"
         onclick={loadDashboardDetail}
       >
         {$t.common?.retry}
diff --git a/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte b/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte
index b2f60f77..a89762a5 100644
--- a/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte
+++ b/frontend/src/routes/dashboards/[id]/components/DashboardGitManager.svelte
@@ -94,7 +94,7 @@
 
       <div class="grid gap-2 md:grid-cols-2">
         <button
-          class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-60"
+          class="inline-flex items-center justify-center rounded-lg bg-primary px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-hover disabled:opacity-60"
           onclick={runGitSyncAndOpenCommit}
           disabled={isSyncingGit || !hasChangesToCommit}
         >
diff --git a/frontend/src/routes/datasets/+page.svelte b/frontend/src/routes/datasets/+page.svelte
index afad4d5d..ce4e93fe 100644
--- a/frontend/src/routes/datasets/+page.svelte
+++ b/frontend/src/routes/datasets/+page.svelte
@@ -434,7 +434,7 @@
           "-"}
       </span>
       <button
-        class="px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700"
+        class="px-2 py-1 bg-primary text-white rounded hover:bg-primary-hover"
         onclick={loadDatasets}
       >
         {$t.common?.refresh}
@@ -449,7 +449,7 @@
     >
       <span>{error}</span>
       <button
-        class="px-2 py-1 bg-red-600 text-white rounded hover:bg-red-700"
+        class="px-2 py-1 bg-destructive text-white rounded hover:bg-destructive-hover"
         onclick={loadDatasets}
       >
         {$t.common?.retry}
@@ -528,7 +528,7 @@
       <div>
         <input
           type="text"
-          class="px-2 py-1 border border-gray-300 rounded bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+          class="px-2 py-1 border border-gray-300 rounded bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring"
           placeholder={$t.datasets?.search_placeholder}
           oninput={handleSearch}
           value={searchQuery}
@@ -570,7 +570,7 @@
           <div class="col-span-3 font-medium text-gray-900">
             <a
               href={`/datasets/${dataset.id}?env_id=${selectedEnv}`}
-              class="text-blue-600 hover:text-blue-800 hover:underline"
+              class="text-primary hover:text-blue-800 hover:underline"
             >
               {dataset.table_name}
             </a>
@@ -609,7 +609,7 @@
             {#if dataset.lastTask}
               <button
                 type="button"
-                class="inline-flex items-center gap-2 hover:text-blue-600"
+                class="inline-flex items-center gap-2 hover:text-primary"
                 onclick={() => handleTaskStatusClick(dataset)}
                 aria-label={$t.datasets?.view_task}
               >
@@ -635,7 +635,7 @@
           <div class="col-span-1">
             {#if dataset.actions.includes("map_columns")}
               <button
-                class="px-1 py-0.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700"
+                class="px-1 py-0.5 text-sm bg-primary text-white rounded hover:bg-primary-hover"
                 onclick={() => handleAction(dataset, "map_columns")}
                 aria-label={$t.datasets?.action_map_columns}
               >
@@ -676,7 +676,7 @@
           {#each Array.from({ length: totalPages }, (_, i) => i + 1) as pageNum}
             <button
               class="px-2 py-1 text-sm border rounded {pageNum === currentPage
-                ? 'bg-blue-600 text-white border-blue-600'
+                ? 'bg-primary text-white border-primary'
                 : 'border-gray-300 hover:bg-gray-100'}"
               onclick={() => handlePageChange(pageNum)}
             >
@@ -700,7 +700,7 @@
         </div>
         <div>
           <select
-            class="px-2 py-1 border border-gray-300 rounded bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            class="px-2 py-1 border border-gray-300 rounded bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring"
             value={pageSize}
             onchange={handlePageSizeChange}
           >
@@ -728,13 +728,13 @@
           </div>
           <div class="flex gap-3">
             <button
-              class="px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700"
+              class="px-3 py-1.5 bg-primary text-white rounded hover:bg-primary-hover"
               onclick={() => (showMapColumnsModal = true)}
             >
               {$t.datasets?.action_map_columns}
             </button>
             <button
-              class="px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700"
+              class="px-3 py-1.5 bg-primary text-white rounded hover:bg-primary-hover"
               onclick={() => (showGenerateDocsModal = true)}
             >
               {$t.datasets?.generate_docs}
@@ -797,7 +797,7 @@
               </label>
               <select
                 id="map-source-type"
-                class="w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                class="w-full px-2 py-1 border border-gray-300 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring"
                 bind:value={mapSourceType}
               >
                 <option value="postgresql"
@@ -814,7 +814,7 @@
                 <input
                   id="map-connection-id"
                   type="text"
-                  class="w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  class="w-full px-2 py-1 border border-gray-300 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring"
                   placeholder={$t.datasets?.connection_id_placeholder}
                   bind:value={mapConnectionId}
                 />
@@ -860,7 +860,7 @@
           >
           <button
             type="button"
-            class="px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            class="px-3 py-1.5 bg-primary text-white rounded hover:bg-primary-hover disabled:opacity-50 disabled:cursor-not-allowed"
             onclick={(event) => {
               event.preventDefault();
               handleBulkMapColumns();
@@ -923,7 +923,7 @@
               </label>
               <select
                 id="llm-provider-select"
-                class="w-full px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+                class="w-full px-2 py-1 border border-gray-300 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-ring"
                 bind:value={llmProvider}
               >
                 <option value=""
@@ -959,7 +959,7 @@
             >{$t.common?.cancel}</button
           >
           <button
-            class="px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            class="px-3 py-1.5 bg-primary text-white rounded hover:bg-primary-hover disabled:opacity-50 disabled:cursor-not-allowed"
             onclick={handleBulkGenerateDocs}
             disabled={!llmProvider || selectedIds.size === 0}
           >
diff --git a/frontend/src/routes/datasets/[id]/+page.svelte b/frontend/src/routes/datasets/[id]/+page.svelte
index 41985f77..53b0178d 100644
--- a/frontend/src/routes/datasets/[id]/+page.svelte
+++ b/frontend/src/routes/datasets/[id]/+page.svelte
@@ -102,7 +102,7 @@
       lowerType.includes("float") ||
       lowerType.includes("num")
     ) {
-      return "text-blue-600 bg-blue-50";
+      return "text-primary bg-primary-light";
     } else if (lowerType.includes("date") || lowerType.includes("time")) {
       return "text-green-600 bg-green-50";
     } else if (
@@ -287,7 +287,7 @@
                 onclick={() => navigateToDashboard(dashboard)}
               >
                 <div
-                  class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600"
+                  class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center text-primary"
                 >
                   <svg
                     width="16"
@@ -335,7 +335,7 @@
           <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
             {#each dataset.columns as column}
               <div
-                class="p-3 border border-gray-200 rounded-lg hover:border-blue-300 transition-colors"
+                class="p-3 border border-gray-200 rounded-lg hover:border-primary-ring transition-colors"
               >
                 <div class="flex items-center justify-between mb-2">
                   <span class="font-medium text-gray-900">{column.name}</span>
diff --git a/frontend/src/routes/datasets/review/+page.svelte b/frontend/src/routes/datasets/review/+page.svelte
index 9e2d962d..1d8de833 100644
--- a/frontend/src/routes/datasets/review/+page.svelte
+++ b/frontend/src/routes/datasets/review/+page.svelte
@@ -200,7 +200,7 @@
         {$t.dataset_review?.workspace?.state_label}: {$t.dataset_review?.workspace?.state?.empty || "Empty"}
       </span>
       {#if hasExistingSessions}
-        <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700">
+        <span class="rounded-full bg-primary-light px-3 py-1 text-xs font-medium text-blue-700">
           {$t.dataset_review?.workspace_entry?.resume_available_badge}: {sessions.length}
         </span>
       {/if}
@@ -257,7 +257,7 @@
           onsubmit={handleSourceSubmit}
         />
         {#if submitError}
-          <div class="rounded-2xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">
+          <div class="rounded-2xl border border-destructive-light bg-destructive-light px-4 py-4 text-sm text-red-700">
             {submitError}
           </div>
         {/if}
diff --git a/frontend/src/routes/datasets/review/ReviewWorkspaceHeader.svelte b/frontend/src/routes/datasets/review/ReviewWorkspaceHeader.svelte
index 55f900f5..fa4daf69 100644
--- a/frontend/src/routes/datasets/review/ReviewWorkspaceHeader.svelte
+++ b/frontend/src/routes/datasets/review/ReviewWorkspaceHeader.svelte
@@ -33,7 +33,7 @@
       {$t.dataset_review?.workspace?.state_label}: {getWorkspaceStateLabel(currentWorkspaceState)}
     </span>
     {#if session}
-      <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-medium text-blue-700">
+      <span class="rounded-full bg-primary-light px-3 py-1 text-xs font-medium text-blue-700">
         {$t.dataset_review?.workspace?.readiness_label}: {readinessLabel}
       </span>
     {/if}
diff --git a/frontend/src/routes/datasets/review/ReviewWorkspaceLeftSidebar.svelte b/frontend/src/routes/datasets/review/ReviewWorkspaceLeftSidebar.svelte
index 940f721e..33e1f75d 100644
--- a/frontend/src/routes/datasets/review/ReviewWorkspaceLeftSidebar.svelte
+++ b/frontend/src/routes/datasets/review/ReviewWorkspaceLeftSidebar.svelte
@@ -110,7 +110,7 @@
   <div class="flex flex-wrap gap-2 mt-3">
     <button
       type="button"
-      class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-slate-300"
+      class="inline-flex items-center justify-center rounded-xl bg-primary px-4 py-2 text-sm font-medium text-white transition hover:bg-primary-hover disabled:cursor-not-allowed disabled:bg-slate-300"
       onclick={onPrimaryAction}
       disabled={launchDisabled}
     >
diff --git a/frontend/src/routes/datasets/review/ReviewWorkspaceRightRail.svelte b/frontend/src/routes/datasets/review/ReviewWorkspaceRightRail.svelte
index 5c234164..763b89e0 100644
--- a/frontend/src/routes/datasets/review/ReviewWorkspaceRightRail.svelte
+++ b/frontend/src/routes/datasets/review/ReviewWorkspaceRightRail.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <div class="space-y-5 xl:sticky xl:top-6">
-  <section id="next-action" class="rounded-3xl border border-blue-200 bg-blue-50 p-5 shadow-sm">
+  <section id="next-action" class="rounded-3xl border border-primary-ring bg-primary-light p-5 shadow-sm">
     <p class="text-xs font-semibold uppercase tracking-wide text-blue-700">
       {$t.dataset_review?.workspace?.next_action_card_eyebrow}
     </p>
@@ -60,7 +60,7 @@
       {$t.dataset_review?.workspace?.health_title}
     </h2>
     <div class="mt-4 grid gap-3">
-      <div class="rounded-2xl border border-red-100 bg-red-50 p-3">
+      <div class="rounded-2xl border border-red-100 bg-destructive-light p-3">
         <div class="text-xs uppercase tracking-wide text-red-700">
           {$t.dataset_review?.findings?.blocking_title}
         </div>
diff --git a/frontend/src/routes/datasets/review/[id]/+page.svelte b/frontend/src/routes/datasets/review/[id]/+page.svelte
index 6169c3a9..d5ae17d1 100644
--- a/frontend/src/routes/datasets/review/[id]/+page.svelte
+++ b/frontend/src/routes/datasets/review/[id]/+page.svelte
@@ -195,13 +195,13 @@
     <div class="rounded-2xl border border-slate-200 bg-white p-6 text-sm text-slate-500 shadow-sm">{$t.dataset_review?.workspace?.loading}</div>
   {:else}
     {#if loadError}
-      <div class="rounded-2xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">{loadError}</div>
+      <div class="rounded-2xl border border-destructive-light bg-destructive-light px-4 py-4 text-sm text-red-700">{loadError}</div>
     {/if}
 
     {#if !session}
       <SourceIntakePanel environments={environments} selectedEnvironmentId={selectedEnvironmentId} submitting={isSubmitting} acknowledgment={intakeAcknowledgment} onsubmit={handleSourceSubmit} />
       {#if currentWorkspaceState === "importing"}
-        <section class="rounded-2xl border border-blue-200 bg-blue-50 p-5 shadow-sm">
+        <section class="rounded-2xl border border-primary-ring bg-primary-light p-5 shadow-sm">
           <div class="flex items-start justify-between gap-3">
             <div>
               <p class="text-xs font-semibold uppercase tracking-wide text-blue-700">{$t.dataset_review?.workspace?.import_progress_eyebrow}</p>
@@ -223,7 +223,7 @@
         </section>
       {/if}
       {#if submitError}
-        <div class="rounded-2xl border border-red-200 bg-red-50 px-4 py-4 text-sm text-red-700">{submitError}</div>
+        <div class="rounded-2xl border border-destructive-light bg-destructive-light px-4 py-4 text-sm text-red-700">{submitError}</div>
       {/if}
     {:else}
       <!-- Session stat cards -->
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index d3dd622c..1f3cb2f8 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -85,7 +85,7 @@
     <h2 class="text-2xl font-bold mb-6 text-center">{$t.auth?.login }</h2>
 
     {#if error}
-        <div class="mb-4 p-3 bg-red-100 text-red-700 rounded border border-red-200">
+        <div class="mb-4 p-3 bg-red-100 text-red-700 rounded border border-destructive-light">
             {error}
         </div>
     {/if}
@@ -97,7 +97,7 @@
                 type="text"
                 id="username"
                 bind:value={username}
-                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus-visible:ring-primary-ring focus:border-blue-500"
                 required
             />
         </div>
@@ -108,7 +108,7 @@
                 type="password"
                 id="password"
                 bind:value={password}
-                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
+                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus-visible:ring-primary-ring focus:border-blue-500"
                 required
             />
         </div>
@@ -116,7 +116,7 @@
         <button
             type="submit"
             disabled={loading}
-            class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
+            class="w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-ring disabled:opacity-50"
         >
             {loading ? ($t.auth?.logging_in ) : ($t.auth?.login )}
         </button>
@@ -135,7 +135,7 @@
         <div class="mt-6">
             <button
                 onclick={handleADFSLogin}
-                class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+                class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-ring"
             >
                 {$t.auth?.corporate_sso }
             </button>
diff --git a/frontend/src/routes/reports/+page.svelte b/frontend/src/routes/reports/+page.svelte
index c5fad953..c31b527a 100644
--- a/frontend/src/routes/reports/+page.svelte
+++ b/frontend/src/routes/reports/+page.svelte
@@ -159,7 +159,7 @@
     </div>
   {:else if error}
     <div
-      class="rounded-xl border border-red-200 bg-red-50 p-4 text-red-700 shadow-sm"
+      class="rounded-xl border border-destructive-light bg-destructive-light p-4 text-red-700 shadow-sm"
     >
       <p>{error}</p>
       <button
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 5020f420..11060263 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -147,8 +147,8 @@
     <div class="border-b border-gray-200 mb-6">
       <button
         class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
-        class:text-blue-600={activeTab === "environments"}
-        class:border-blue-600={activeTab === "environments"}
+        class:text-primary={activeTab === "environments"}
+        class:border-primary={activeTab === "environments"}
         class:text-gray-600={activeTab !== "environments"}
         class:border-transparent={activeTab !== "environments"}
         class:hover:text-gray-800={activeTab !== "environments"}
@@ -160,8 +160,8 @@
       </button>
       <button
         class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
-        class:text-blue-600={activeTab === "logging"}
-        class:border-blue-600={activeTab === "logging"}
+        class:text-primary={activeTab === "logging"}
+        class:border-primary={activeTab === "logging"}
         class:text-gray-600={activeTab !== "logging"}
         class:border-transparent={activeTab !== "logging"}
         class:hover:text-gray-800={activeTab !== "logging"}
@@ -173,8 +173,8 @@
       </button>
       <button
         class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
-        class:text-blue-600={activeTab === "connections"}
-        class:border-blue-600={activeTab === "connections"}
+        class:text-primary={activeTab === "connections"}
+        class:border-primary={activeTab === "connections"}
         class:text-gray-600={activeTab !== "connections"}
         class:border-transparent={activeTab !== "connections"}
         class:hover:text-gray-800={activeTab !== "connections"}
@@ -186,8 +186,8 @@
       </button>
       <button
         class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
-        class:text-blue-600={activeTab === "git"}
-        class:border-blue-600={activeTab === "git"}
+        class:text-primary={activeTab === "git"}
+        class:border-primary={activeTab === "git"}
         class:text-gray-600={activeTab !== "git"}
         class:border-transparent={activeTab !== "git"}
         class:hover:text-gray-800={activeTab !== "git"}
@@ -199,8 +199,8 @@
       </button>
       <button
         class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
-        class:text-blue-600={activeTab === "llm"}
-        class:border-blue-600={activeTab === "llm"}
+        class:text-primary={activeTab === "llm"}
+        class:border-primary={activeTab === "llm"}
         class:text-gray-600={activeTab !== "llm"}
         class:border-transparent={activeTab !== "llm"}
         class:hover:text-gray-800={activeTab !== "llm"}
@@ -212,8 +212,8 @@
       </button>
       <button
         class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
-        class:text-blue-600={activeTab === "migration"}
-        class:border-blue-600={activeTab === "migration"}
+        class:text-primary={activeTab === "migration"}
+        class:border-primary={activeTab === "migration"}
         class:text-gray-600={activeTab !== "migration"}
         class:border-transparent={activeTab !== "migration"}
         class:hover:text-gray-800={activeTab !== "migration"}
@@ -225,8 +225,8 @@
       </button>
       <button
         class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
-        class:text-blue-600={activeTab === "storage"}
-        class:border-blue-600={activeTab === "storage"}
+        class:text-primary={activeTab === "storage"}
+        class:border-primary={activeTab === "storage"}
         class:text-gray-600={activeTab !== "storage"}
         class:border-transparent={activeTab !== "storage"}
         class:hover:text-gray-800={activeTab !== "storage"}
@@ -238,8 +238,8 @@
       </button>
       <button
         class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
-        class:text-blue-600={activeTab === "features"}
-        class:border-blue-600={activeTab === "features"}
+        class:text-primary={activeTab === "features"}
+        class:border-primary={activeTab === "features"}
         class:text-gray-600={activeTab !== "features"}
         class:border-transparent={activeTab !== "features"}
         class:hover:text-gray-800={activeTab !== "features"}
@@ -251,8 +251,8 @@
       </button>
       <button
         class="px-4 py-2 text-sm font-medium transition-colors focus:outline-none border-b-2"
-        class:text-blue-600={activeTab === "automation"}
-        class:border-blue-600={activeTab === "automation"}
+        class:text-primary={activeTab === "automation"}
+        class:border-primary={activeTab === "automation"}
         class:text-gray-600={activeTab !== "automation"}
         class:border-transparent={activeTab !== "automation"}
         class:hover:text-gray-800={activeTab !== "automation"}
diff --git a/frontend/src/routes/settings/DatabaseConnectionsTab.svelte b/frontend/src/routes/settings/DatabaseConnectionsTab.svelte
index fe79bdeb..e250655e 100644
--- a/frontend/src/routes/settings/DatabaseConnectionsTab.svelte
+++ b/frontend/src/routes/settings/DatabaseConnectionsTab.svelte
@@ -115,7 +115,7 @@
 
     {#if connections.length > 0 || isConnectionFormVisible}
       <button
-        class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+        class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover"
         onclick={openConnectionForm}
       >
         {$t.connections?.add_new}
@@ -246,7 +246,7 @@
           </button>
           <button
             type="submit"
-            class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
+            class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:bg-primary-hover disabled:cursor-not-allowed disabled:opacity-60"
             disabled={isSubmittingConnection}
           >
             {isSubmittingConnection
@@ -322,7 +322,7 @@
         {$t.settings?.no_external_connections}
       </p>
       <button
-        class="mt-4 rounded border border-blue-600 px-4 py-2 text-blue-600 hover:bg-blue-50"
+        class="mt-4 rounded border border-primary px-4 py-2 text-primary hover:bg-primary-light"
         onclick={() => {
           openConnectionForm();
           void loadConnections();
diff --git a/frontend/src/routes/settings/EnvironmentsTab.svelte b/frontend/src/routes/settings/EnvironmentsTab.svelte
index 77ce237e..1d4b7308 100644
--- a/frontend/src/routes/settings/EnvironmentsTab.svelte
+++ b/frontend/src/routes/settings/EnvironmentsTab.svelte
@@ -155,7 +155,7 @@
   {#if !editingEnvId && !isAddingEnv}
     <div class="flex justify-end mb-6">
       <button
-        class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
+        class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-hover"
         onclick={() => {
           isAddingEnv = true;
           resetEnvForm();
@@ -223,7 +223,7 @@
             type="checkbox"
             id="env_default"
             bind:checked={newEnv.is_default}
-            class="h-4 w-4 text-blue-600 border-gray-300 rounded"
+            class="h-4 w-4 text-primary border-gray-300 rounded"
           />
           <label for="env_default" class="ml-2 block text-sm text-gray-900">{$t.settings?.env_default}</label>
         </div>
@@ -250,7 +250,7 @@
             type="checkbox"
             id="backup_enabled"
             bind:checked={newEnv.backup_schedule.enabled}
-            class="h-4 w-4 text-blue-600 border-gray-300 rounded"
+            class="h-4 w-4 text-primary border-gray-300 rounded"
           />
           <label for="backup_enabled" class="ml-2 block text-sm text-gray-900">{$t.settings?.enable_auto_backups}</label>
         </div>
@@ -282,7 +282,7 @@
         </button>
         <button
           onclick={handleAddOrUpdateEnv}
-          class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+          class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover"
         >
           {editingEnvId ? $t.settings?.env_update : $t.settings?.env_add}
         </button>
diff --git a/frontend/src/routes/settings/FeaturesSettings.svelte b/frontend/src/routes/settings/FeaturesSettings.svelte
index 27915dde..21f655b7 100644
--- a/frontend/src/routes/settings/FeaturesSettings.svelte
+++ b/frontend/src/routes/settings/FeaturesSettings.svelte
@@ -31,7 +31,7 @@
         </div>
         <label class="relative inline-flex items-center cursor-pointer">
           <input id="feature-dataset-review" type="checkbox" class="sr-only peer" bind:checked={settings.features.dataset_review}>
-          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
         </label>
       </div>
 
@@ -47,7 +47,7 @@
         </div>
         <label class="relative inline-flex items-center cursor-pointer">
           <input id="feature-health-monitor" type="checkbox" class="sr-only peer" bind:checked={settings.features.health_monitor}>
-          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
+          <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
         </label>
       </div>
     </div>
@@ -55,7 +55,7 @@
     <div class="mt-6 flex justify-end">
       <button
         onclick={onSave}
-        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover"
       >
         {$t.settings?.save_features || $t.settings?.save_logging || "Save"}
       </button>
diff --git a/frontend/src/routes/settings/LlmSettings.svelte b/frontend/src/routes/settings/LlmSettings.svelte
index edd47be3..7de4adb6 100644
--- a/frontend/src/routes/settings/LlmSettings.svelte
+++ b/frontend/src/routes/settings/LlmSettings.svelte
@@ -214,7 +214,7 @@
 
     <div class="mt-4 flex justify-end">
       <button
-        class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+        class="rounded bg-primary px-4 py-2 text-white hover:bg-primary-hover"
         onclick={onSave}
       >
         {$t.settings?.save_llm_prompts}
diff --git a/frontend/src/routes/settings/LoggingSettings.svelte b/frontend/src/routes/settings/LoggingSettings.svelte
index 495cacd7..888d30d9 100644
--- a/frontend/src/routes/settings/LoggingSettings.svelte
+++ b/frontend/src/routes/settings/LoggingSettings.svelte
@@ -63,7 +63,7 @@
             type="checkbox"
             id="enable_belief_state"
             bind:checked={settings.logging.enable_belief_state}
-            class="h-4 w-4 text-blue-600 border-gray-300 rounded"
+            class="h-4 w-4 text-primary border-gray-300 rounded"
           />
           <span class="ml-2 block text-sm text-gray-900"
             >{$t.settings?.enable_belief_state}</span
@@ -78,7 +78,7 @@
     <div class="mt-6 flex justify-end">
       <button
         onclick={onSave}
-        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover"
       >
         {$t.settings?.save_logging}
       </button>
diff --git a/frontend/src/routes/settings/MigrationSettings.svelte b/frontend/src/routes/settings/MigrationSettings.svelte
index d9278843..f0e23cf9 100644
--- a/frontend/src/routes/settings/MigrationSettings.svelte
+++ b/frontend/src/routes/settings/MigrationSettings.svelte
@@ -92,7 +92,7 @@
       <button
         onclick={saveMigrationSettings}
         disabled={isSavingMigration}
-        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 h-[42px] min-w-[100px] flex items-center justify-center disabled:opacity-50"
+        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover h-[42px] min-w-[100px] flex items-center justify-center disabled:opacity-50"
       >
         {isSavingMigration ? $t.settings?.saving : $t.common?.save}
       </button>
diff --git a/frontend/src/routes/settings/StorageSettings.svelte b/frontend/src/routes/settings/StorageSettings.svelte
index 769e4af0..c0f79356 100644
--- a/frontend/src/routes/settings/StorageSettings.svelte
+++ b/frontend/src/routes/settings/StorageSettings.svelte
@@ -63,7 +63,7 @@
     <div class="mt-6 flex justify-end">
       <button
         onclick={() => onSave()}
-        class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+        class="bg-primary text-white px-4 py-2 rounded hover:bg-primary-hover"
       >
         {$t.settings?.save_storage_config}
       </button>
diff --git a/frontend/src/routes/settings/automation/+page.svelte b/frontend/src/routes/settings/automation/+page.svelte
index 27b9c1c5..2f10888b 100644
--- a/frontend/src/routes/settings/automation/+page.svelte
+++ b/frontend/src/routes/settings/automation/+page.svelte
@@ -185,7 +185,7 @@
     </div>
     {#if !showForm}
       <button onclick={handleAdd} 
-        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+        class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-ring">
         <svg class="-ml-1 mr-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
         </svg>
@@ -197,7 +197,7 @@
   {#if showForm}
     <div class="mb-8">
       <div class="flex items-center mb-4">
-        <button onclick={() => showForm = false} class="text-sm text-blue-600 hover:text-blue-500 flex items-center">
+        <button onclick={() => showForm = false} class="text-sm text-primary hover:text-primary-hover flex items-center">
           <svg class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
           </svg>
@@ -217,7 +217,7 @@
     </div>
   {:else if isLoading}
     <div class="flex justify-center py-12">
-      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
     </div>
   {:else}
     <div class="bg-white dark:bg-gray-800 shadow overflow-hidden sm:rounded-md border border-gray-200 dark:border-gray-700">
@@ -235,7 +235,7 @@
                     </div>
                   </div>
                   <div class="ml-4">
-                    <h3 class="text-sm font-medium text-blue-600 dark:text-blue-400 truncate">{policy.name}</h3>
+                    <h3 class="text-sm font-medium text-primary dark:text-blue-400 truncate">{policy.name}</h3>
                     <div class="mt-1 flex items-center text-xs text-gray-500 dark:text-gray-400">
                       <span class="font-medium">{getEnvName(policy.environment_id)}</span>
                       <span class="mx-2">•</span>
@@ -276,7 +276,7 @@
             <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No policies</h3>
             <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Get started by creating a new automation policy.</p>
             <div class="mt-6">
-              <button onclick={handleAdd} class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+              <button onclick={handleAdd} class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary-ring">
                 Create Policy
               </button>
             </div>
diff --git a/frontend/src/routes/translate/+page.svelte b/frontend/src/routes/translate/+page.svelte
index 1692e0c2..bcbd98cf 100644
--- a/frontend/src/routes/translate/+page.svelte
+++ b/frontend/src/routes/translate/+page.svelte
@@ -119,7 +119,7 @@
     </div>
     <button
       onclick={navigateToCreate}
-      class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+      class="inline-flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors"
     >
       <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
@@ -135,7 +135,7 @@
         onclick={() => filterByStatus(pill.value)}
         class="px-3 py-1.5 text-sm rounded-full border transition-colors
           {statusFilter === pill.value
-            ? 'bg-blue-50 border-blue-300 text-blue-700'
+            ? 'bg-primary-light border-blue-300 text-blue-700'
             : 'bg-white border-gray-200 text-gray-600 hover:border-gray-300'}"
       >
         {pill.label}
@@ -154,11 +154,11 @@
 
   <!-- Error State -->
   {:else if uxState === 'error'}
-    <div class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
+    <div class="bg-destructive-light border border-destructive-light rounded-lg p-6 text-center">
       <p class="text-red-700 mb-3">{error || $t.translate?.jobs?.an_error_occurred}</p>
       <button
         onclick={loadJobs}
-        class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+        class="px-4 py-2 bg-destructive text-white rounded-lg hover:bg-destructive-hover transition-colors"
       >
         {$t.translate?.common?.retry}
       </button>
@@ -174,7 +174,7 @@
         <p class="text-gray-500 mb-2">{$t.translate?.jobs?.no_jobs_filtered.replace('{status}', statusFilter)}</p>
         <button
           onclick={() => filterByStatus('')}
-          class="text-blue-600 hover:text-blue-700 text-sm"
+          class="text-primary hover:text-primary-hover text-sm"
         >
           {$t.translate?.jobs?.clear_filter}
         </button>
@@ -182,7 +182,7 @@
         <p class="text-gray-500 mb-4">{$t.translate?.jobs?.no_jobs}</p>
         <button
           onclick={navigateToCreate}
-          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+          class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors"
         >
           {$t.translate?.jobs?.create_job}
         </button>
@@ -246,7 +246,7 @@
                 <div class="flex items-center gap-1">
                   <button
                     onclick={() => handleDelete(job.id)}
-                    class="px-2 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700"
+                    class="px-2 py-1 text-xs bg-destructive text-white rounded hover:bg-destructive-hover"
                   >
                     {$t.translate?.jobs?.confirm_delete}
                     </button>
diff --git a/frontend/src/routes/translate/[id]/+page.svelte b/frontend/src/routes/translate/[id]/+page.svelte
index de21b4da..62746475 100644
--- a/frontend/src/routes/translate/[id]/+page.svelte
+++ b/frontend/src/routes/translate/[id]/+page.svelte
@@ -672,7 +672,7 @@
       <button
         onclick={handleSave}
         disabled={isSaving}
-        class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
       >
         {isSaving ? $t.translate?.config?.saving : $t.translate?.config?.save}
       </button>
@@ -701,11 +701,11 @@
 
   <!-- Error State -->
   {:else if uxState === 'error'}
-    <div class="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
+    <div class="bg-destructive-light border border-destructive-light rounded-lg p-6 text-center">
       <p class="text-red-700 mb-3">{error || $t.translate?.common?.unknown_error}</p>
       <button
         onclick={() => goto('/translate')}
-        class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+        class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors"
       >
         {$t.translate?.config?.back_to_jobs}
       </button>
@@ -730,7 +730,7 @@
             disabled={tab.id === 'preview' && !configValid}
             class="px-4 py-2.5 text-sm font-medium rounded-t-lg transition-colors
               {activeTab === tab.id
-                ? 'bg-white text-blue-600 border border-b-white border-gray-200 -mb-px'
+                ? 'bg-white text-primary border border-b-white border-gray-200 -mb-px'
                 : 'text-gray-500 hover:text-gray-700 hover:bg-gray-50'}
               {tab.id === 'preview' && !configValid ? 'opacity-40 cursor-not-allowed' : ''}"
             title={tab.id === 'preview' && !configValid ? ($t.translate?.preview?.config_incomplete || 'Configuration incomplete') : ''}
@@ -755,7 +755,7 @@
               <input
                 type="text"
                 bind:value={name}
-                class="w-full px-3 py-2 border rounded-lg text-sm {validationErrors.name ? 'border-red-300 bg-red-50' : 'border-gray-300'} focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                class="w-full px-3 py-2 border rounded-lg text-sm {validationErrors.name ? 'border-red-300 bg-destructive-light' : 'border-gray-300'} focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
                 placeholder={$t.translate?.config?.name_placeholder}
               />
               {#if validationErrors.name}
@@ -767,7 +767,7 @@
               <textarea
                 bind:value={description}
                 rows="2"
-                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
                 placeholder={$t.translate?.config?.description_placeholder}
               />
             </div>
@@ -783,7 +783,7 @@
               <select
                 bind:value={environmentId}
                 onchange={handleEnvChange}
-                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
               >
                 <option value="">{$t.translate?.config?.select_environment}</option>
                 {#each environments as env}
@@ -799,7 +799,7 @@
                 oninput={handleDatasourceSearch}
                 onfocus={() => searchDatasources('')}
                 onblur={() => setTimeout(() => (showDatasourceDropdown = false), 150)}
-                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
                 placeholder={$t.translate?.config?.datasource_search_placeholder || 'Search datasets...'}
               />
               {#if datasourceLoading}
@@ -867,7 +867,7 @@
             </label>
             <select
               bind:value={translationColumn}
-              class="w-full px-3 py-2 border rounded-lg text-sm {validationErrors.translationColumn ? 'border-red-300 bg-red-50' : 'border-gray-300'} focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              class="w-full px-3 py-2 border rounded-lg text-sm {validationErrors.translationColumn ? 'border-red-300 bg-destructive-light' : 'border-gray-300'} focus-visible:ring-2 focus-visible:ring-primary-ring focus-visible:border-primary-ring"
             >
               <option value="">{$t.translate?.config?.select_column}</option>
               {#each columnList as col}
@@ -934,7 +934,7 @@
                     sourceKeyCols = [...sourceKeyCols, ''];
                     targetKeyCols = [...targetKeyCols, ''];
                   }}
-                  class="px-3 py-1 text-xs border border-dashed border-gray-300 rounded text-gray-500 hover:border-blue-300 hover:text-blue-600"
+                  class="px-3 py-1 text-xs border border-dashed border-gray-300 rounded text-gray-500 hover:border-primary-ring hover:text-primary"
                 >
                   {$t.translate?.config?.add_key_column}
                 </button>
@@ -975,7 +975,7 @@
                       value={targetKeyCols[idx] || ''}
                       placeholder={$t.translate?.config?.target_column_placeholder}
                       oninput={(e) => updateTargetKeyCol(idx, e.target.value)}
-                      class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm font-mono focus:ring-2 focus:ring-blue-500"
+                      class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm font-mono focus-visible:ring-2 focus-visible:ring-primary-ring"
                     />
                     <button
                       onclick={() => {
@@ -1032,7 +1032,7 @@
               <input
                 type="text"
                 bind:value={targetSchema}
-                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
                 placeholder={$t.translate?.config?.target_schema_placeholder}
               />
             </div>
@@ -1041,7 +1041,7 @@
               <input
                 type="text"
                 bind:value={targetTable}
-                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
                 placeholder={$t.translate?.config?.target_table_placeholder}
               />
             </div>
@@ -1051,7 +1051,7 @@
               </label>
               <select
                 bind:value={targetDatabaseId}
-                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
                 disabled={!environmentId || databasesLoading}
               >
                 <option value="">{$t.translate?.config?.select_target_database}</option>
@@ -1083,7 +1083,7 @@
                 <input
                   type="text"
                   bind:value={targetColumn}
-                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
                   placeholder="e.g. translated_text"
                 />
                 <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_column_hint}</p>
@@ -1095,7 +1095,7 @@
                 <input
                   type="text"
                   bind:value={targetLanguageColumn}
-                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
                   placeholder="e.g. lang_code"
                 />
                 <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_language_column_hint}</p>
@@ -1107,7 +1107,7 @@
                 <input
                   type="text"
                   bind:value={targetSourceColumn}
-                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
                   placeholder="e.g. source_text"
                 />
                 <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_source_column_hint}</p>
@@ -1119,7 +1119,7 @@
                 <input
                   type="text"
                   bind:value={targetSourceLanguageColumn}
-                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+                  class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
                   placeholder="e.g. src_lang"
                 />
                 <p class="text-xs text-gray-400 mt-1">{$t.translate?.config?.target_source_language_column_hint}</p>
@@ -1161,7 +1161,7 @@
                 bind:value={batchSize}
                 min="1"
                 max="1000"
-                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-primary-ring"
               />
             </div>
             <div>
@@ -1179,7 +1179,7 @@
               <input
                 type="checkbox"
                 bind:checked={includeSourceReference}
-                class="mt-0.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                class="mt-0.5 rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
               />
               <div>
                 <span class="text-sm font-medium text-gray-700">{$t.translate?.config?.include_source_reference || 'Include source language in translations'}</span>
@@ -1196,7 +1196,7 @@
               <input
                 type="checkbox"
                 bind:checked={disableReasoning}
-                class="mt-0.5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                class="mt-0.5 rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
               />
               <div>
                 <span class="text-sm font-medium text-gray-700">{$t.translate?.config?.disable_reasoning || 'Disable reasoning (save tokens)'}</span>
@@ -1229,7 +1229,7 @@
                         dictionaryIds = [...dictionaryIds, dict.id];
                       }
                     }}
-                    class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                    class="rounded border-gray-300 text-primary focus-visible:ring-primary-ring"
                   />
                   <div>
                     <span class="text-sm font-medium text-gray-900">{dict.name}</span>
@@ -1314,7 +1314,7 @@
                   addToast(e?.message || 'Failed to update status', 'error');
                 }
               }}
-              class="ml-auto px-3 py-1 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+              class="ml-auto px-3 py-1 text-xs bg-primary text-white rounded hover:bg-primary-hover transition-colors"
             >
               {$t.translate?.config?.mark_ready || 'Mark as READY'}
             </button>
@@ -1347,10 +1347,10 @@
             </div>
 
             <!-- Full run card -->
-            <div class="border border-blue-200 rounded-lg p-4 {isRunning && isFullRun ? 'bg-blue-50' : 'bg-white'}">
+            <div class="border border-primary-ring rounded-lg p-4 {isRunning && isFullRun ? 'bg-primary-light' : 'bg-white'}">
               <div class="flex items-start gap-3">
                 <div class="flex-shrink-0 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
-                  <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <svg class="w-4 h-4 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                   </svg>
                 </div>
@@ -1360,7 +1360,7 @@
                   <button
                     onclick={() => handleTriggerRun(true)}
                     disabled={isRunning || status === 'DRAFT'}
-                    class="mt-3 px-5 py-1.5 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                    class="mt-3 px-5 py-1.5 text-sm font-medium bg-primary text-white rounded-lg hover:bg-primary-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
                   >
                     {isRunning && isFullRun ? $t.translate?.config?.running : $t.translate?.config?.full_translate}
                   </button>
@@ -1370,7 +1370,7 @@
           </div>
 
           {#if runError}
-            <div class="bg-red-50 border border-red-200 rounded-lg p-3">
+            <div class="bg-destructive-light border border-destructive-light rounded-lg p-3">
               <p class="text-sm text-red-600">{runError}</p>
             </div>
           {/if}
diff --git a/frontend/src/routes/translate/dictionaries/[id]/+page.svelte b/frontend/src/routes/translate/dictionaries/[id]/+page.svelte
index 9775d5ec..5367ec70 100644
--- a/frontend/src/routes/translate/dictionaries/[id]/+page.svelte
+++ b/frontend/src/routes/translate/dictionaries/[id]/+page.svelte
@@ -444,7 +444,7 @@
           {/if}
 
           {#if importErrors.length > 0}
-            <div class="bg-red-50 border border-red-200 text-red-700 rounded-md p-3 text-xs">
+            <div class="bg-destructive-light border border-destructive-light text-red-700 rounded-md p-3 text-xs">
               <p class="font-medium mb-1">{$t.translate?.dictionaries?.import_errors.replace('{count}', importErrors.length)}</p>
               {#each importErrors as err}
                 <p>{_('translate.dictionaries.import_error_line').replace('{line}', err.line).replace('{error}', err.error)}</p>
@@ -559,7 +559,7 @@
             {#if filterSourceLanguage || filterTargetLanguage}
               <button
                 onclick={() => { filterSourceLanguage = ''; filterTargetLanguage = ''; }}
-                class="text-xs text-blue-600 hover:text-blue-700"
+                class="text-xs text-primary hover:text-primary-hover"
               >
                 {$t.translate?.dictionaries?.filter_clear}
               </button>
@@ -581,7 +581,7 @@
             <tbody class="divide-y divide-gray-100">
               {#each filteredEntries as entry}
                 {#if editEntryId === entry.id}
-                  <tr class="bg-blue-50">
+                  <tr class="bg-primary-light">
                     <td class="p-2">
                       <input
                         bind:value={editForm.source_term}
@@ -696,7 +696,7 @@
                                         addToast(e?.message || _('translate.dictionaries.save_failed_toast'), 'error');
                                       }
                                     }}
-                                    class="px-2 py-0.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700"
+                                    class="px-2 py-0.5 text-xs bg-primary text-white rounded hover:bg-primary-hover"
                                   >{$t.translate?.dictionaries?.save_btn}</button>
                                   <button
                                     onclick={() => { expandedEditing = false; }}
@@ -730,7 +730,7 @@
                                       expandedContextData = entry.context_data ? JSON.stringify(entry.context_data, null, 2) : '';
                                       expandedUsageNotes = entry.usage_notes || '';
                                     }}
-                                    class="text-xs text-blue-600 hover:text-blue-700"
+                                    class="text-xs text-primary hover:text-primary-hover"
                                   >{$t.translate?.dictionaries?.edit_btn}</button>
                                 </div>
                                 <div class="bg-white border border-gray-200 rounded p-2">
@@ -755,7 +755,7 @@
                                     expandedContextData = '';
                                     expandedUsageNotes = entry.usage_notes || '';
                                   }}
-                                  class="text-xs text-blue-600 hover:text-blue-700"
+                                  class="text-xs text-primary hover:text-primary-hover"
                                   >{$t.translate?.dictionaries?.add_context}</button>
                               </div>
                             {/if}
diff --git a/frontend/src/routes/translate/history/+page.svelte b/frontend/src/routes/translate/history/+page.svelte
index 98a07b8b..6f0b681e 100644
--- a/frontend/src/routes/translate/history/+page.svelte
+++ b/frontend/src/routes/translate/history/+page.svelte
@@ -179,7 +179,7 @@
 			<h1 class="text-2xl font-bold text-gray-900">{$t.translate?.history?.title}</h1>
 			<p class="text-sm text-gray-500 mt-1">{$t.translate?.history?.subtitle}</p>
 		</div>
-		<button onclick={() => { currentPage = 1; applyFilters(); }} class="px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700">
+		<button onclick={() => { currentPage = 1; applyFilters(); }} class="px-4 py-2 text-sm text-white bg-primary rounded-lg hover:bg-primary-hover">
 			{$t.translate?.history?.refresh}
 		</button>
 	</div>
@@ -195,11 +195,11 @@
 				<p class="text-xs text-green-600 uppercase">{$t.translate?.history?.successful}</p>
 				<p class="text-xl font-bold text-green-700">{totalMetric().successful_runs}</p>
 			</div>
-			<div class="bg-red-50 rounded-lg p-3">
+			<div class="bg-destructive-light rounded-lg p-3">
 				<p class="text-xs text-red-600 uppercase">{$t.translate?.history?.failed}</p>
 				<p class="text-xl font-bold text-red-700">{totalMetric().failed_runs}</p>
 			</div>
-			<div class="bg-blue-50 rounded-lg p-3">
+			<div class="bg-primary-light rounded-lg p-3">
 				<p class="text-xs text-blue-600 uppercase">{$t.translate?.history?.records}</p>
 				<p class="text-xl font-bold text-blue-700">{totalMetric().total_records}</p>
 			</div>
@@ -230,7 +230,7 @@
 				<option value="baseline_expired">{$t.translate?.history?.trigger_baseline_expired}</option>
 			</select>
 			<input type="date" bind:value={filterDateFrom} class="px-3 py-2 border border-gray-300 rounded-lg text-sm" placeholder={$t.translate?.common?.from} />
-			<button onclick={applyFilters} class="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700">
+			<button onclick={applyFilters} class="px-4 py-2 text-sm bg-primary text-white rounded-lg hover:bg-primary-hover">
 				{$t.translate?.history?.filter}
 			</button>
 		</div>
@@ -317,7 +317,7 @@
 							{#if run.status === 'COMPLETED' && (run.skipped_records || 0) > 0}
 								<button
 									onclick={() => handleDownloadSkipped(run.id)}
-									class="text-xs text-blue-600 hover:text-blue-700"
+									class="text-xs text-primary hover:text-primary-hover"
 								>
 									{$t.translate?.history?.skipped_csv}
 								</button>
@@ -399,7 +399,7 @@
 						<p class="text-lg font-bold text-green-700">{selectedRunDetail.successful_records || 0}</p>
 						<p class="text-xs text-green-600">{$t.translate?.history?.success}</p>
 					</div>
-					<div class="bg-red-50 rounded p-3 text-center">
+					<div class="bg-destructive-light rounded p-3 text-center">
 						<p class="text-lg font-bold text-red-700">{selectedRunDetail.failed_records || 0}</p>
 						<p class="text-xs text-red-600">{$t.translate?.history?.failed}</p>
 					</div>
@@ -437,7 +437,7 @@
 						<button
 							onclick={() => handleCancelRun(selectedRunDetail.id)}
 							disabled={cancellingRunId === selectedRunDetail.id}
-							class="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+							class="px-4 py-2 text-sm bg-destructive text-white rounded-lg hover:bg-destructive-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
 						>
 							{cancellingRunId === selectedRunDetail.id
 								? ($t.translate?.run?.cancelling || 'Cancelling...')
@@ -503,7 +503,7 @@
 
 				<!-- Error -->
 				{#if selectedRunDetail.error_message}
-					<div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-6">
+					<div class="bg-destructive-light border border-destructive-light rounded-lg p-3 mb-6">
 						<p class="text-xs font-medium text-red-700">{$t.translate?.history?.error}</p>
 						<p class="text-xs text-red-600 mt-1">{selectedRunDetail.error_message}</p>
 					</div>
@@ -511,7 +511,7 @@
 
 				<!-- Superset ref -->
 				{#if selectedRunDetail.superset_execution_id}
-					<div class="bg-blue-50 rounded-lg p-3 mb-6">
+					<div class="bg-primary-light rounded-lg p-3 mb-6">
 						<p class="text-xs font-medium text-blue-700">{$t.translate?.history?.superset_query_id}</p>
 						<p class="text-xs font-mono text-blue-600 mt-1">{selectedRunDetail.superset_execution_id}</p>
 					</div>