From 239963ed89ccf4605a57d0e9ce09b1ecedf7e3fd Mon Sep 17 00:00:00 2001
From: Joerg <joerg@dj7nt.de>
Date: Fri, 23 Jan 2026 11:46:41 +0100
Subject: [PATCH] feat: implement theme switching system with light and dark
 modes

Add complete theme switching system supporting Light Mode, Dark Mode, and
System preference (follows OS setting). Uses CSS custom properties for all
colors and Svelte store for state management with localStorage persistence.

New files:
- src/frontend/src/lib/stores/theme.js: Theme state management store
- src/frontend/src/app.css: CSS variables for light/dark themes
- src/frontend/src/lib/components/ThemeSwitcher.svelte: Theme switcher UI

Updated all components to use CSS variables instead of hardcoded colors:
- Main pages (home, awards, QSOs, settings, auth)
- Admin dashboard and award management pages
- Shared components (BackButton, ErrorDisplay, Loading)

Features:
- localStorage persistence for user preference
- System preference detection via matchMedia API
- FOUC prevention with inline script in app.html
- Smooth theme transitions across entire application

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/frontend/src/app.css                      | 186 ++++++++++++++++
 src/frontend/src/app.html                     |   8 +
 .../src/lib/components/BackButton.svelte      |   8 +-
 .../src/lib/components/ErrorDisplay.svelte    |   8 +-
 .../src/lib/components/Loading.svelte         |   2 +-
 .../src/lib/components/ThemeSwitcher.svelte   | 152 +++++++++++++
 src/frontend/src/lib/stores/theme.js          |  56 +++++
 src/frontend/src/routes/+layout.svelte        |  59 +++--
 src/frontend/src/routes/+page.svelte          | 148 ++++++-------
 src/frontend/src/routes/admin/+page.svelte    | 129 +++++------
 .../src/routes/admin/awards/+page.svelte      |  53 ++---
 .../src/routes/admin/awards/[id]/+page.svelte |  94 ++++----
 .../awards/components/FilterBuilder.svelte    |  47 ++--
 .../awards/components/TestAwardModal.svelte   | 111 +++++-----
 .../routes/admin/awards/create/+page.svelte   |  94 ++++----
 src/frontend/src/routes/awards/+page.svelte   |  65 +++---
 .../src/routes/awards/[id]/+page.svelte       | 208 +++++++++---------
 src/frontend/src/routes/qsos/+page.svelte     | 200 +++++++++--------
 .../routes/qsos/components/QSOStats.svelte    |  10 +-
 .../routes/qsos/components/SyncButton.svelte  |   4 +-
 20 files changed, 1042 insertions(+), 600 deletions(-)
 create mode 100644 src/frontend/src/app.css
 create mode 100644 src/frontend/src/lib/components/ThemeSwitcher.svelte
 create mode 100644 src/frontend/src/lib/stores/theme.js

diff --git a/src/frontend/src/app.css b/src/frontend/src/app.css
new file mode 100644
index 0000000..cfb18a4
--- /dev/null
+++ b/src/frontend/src/app.css
@@ -0,0 +1,186 @@
+/* Quickawards Theme System - CSS Variables */
+
+/* Light Mode (default) */
+:root, [data-theme="light"] {
+  /* Backgrounds */
+  --bg-body: #f5f5f5;
+  --bg-card: #ffffff;
+  --bg-navbar: #2c3e50;
+  --bg-footer: #2c3e50;
+  --bg-input: #ffffff;
+  --bg-hover: rgba(255, 255, 255, 0.1);
+  --bg-secondary: #f8f9fa;
+  --bg-tertiary: #e9ecef;
+
+  /* Text */
+  --text-primary: #333333;
+  --text-secondary: #666666;
+  --text-muted: #999999;
+  --text-inverted: #ffffff;
+  --text-link: #4a90e2;
+
+  /* Primary colors */
+  --color-primary: #4a90e2;
+  --color-primary-hover: #357abd;
+  --color-primary-light: rgba(74, 144, 226, 0.1);
+
+  /* Secondary colors */
+  --color-secondary: #6c757d;
+  --color-secondary-hover: #5a6268;
+
+  /* Semantic colors */
+  --color-success: #065f46;
+  --color-success-bg: #d1fae5;
+  --color-success-light: #10b981;
+
+  --color-warning: #ffc107;
+  --color-warning-hover: #e0a800;
+  --color-warning-bg: #fff3cd;
+  --color-warning-text: #856404;
+
+  --color-error: #dc3545;
+  --color-error-hover: #c82333;
+  --color-error-bg: #fee2e2;
+  --color-error-text: #991b1b;
+
+  --color-info: #1e40af;
+  --color-info-bg: #dbeafe;
+  --color-info-text: #1e40af;
+
+  /* Badge/status colors */
+  --badge-pending-bg: #fef3c7;
+  --badge-pending-text: #92400e;
+  --badge-running-bg: #dbeafe;
+  --badge-running-text: #1e40af;
+  --badge-completed-bg: #d1fae5;
+  --badge-completed-text: #065f46;
+  --badge-failed-bg: #fee2e2;
+  --badge-failed-text: #991b1b;
+  --badge-cancelled-bg: #f3e8ff;
+  --badge-cancelled-text: #6b21a8;
+  --badge-purple-bg: #8b5cf6;
+  --badge-purple-text: #ffffff;
+
+  /* Borders */
+  --border-color: #e0e0e0;
+  --border-color-light: #e9ecef;
+  --border-radius: 4px;
+  --border-radius-lg: 8px;
+  --border-radius-pill: 12px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
+
+  /* Focus */
+  --focus-ring: 0 0 0 2px rgba(74, 144, 226, 0.2);
+
+  /* Logout button */
+  --color-logout: #ff6b6b;
+  --color-logout-hover: #ff5252;
+  --color-logout-bg: rgba(255, 107, 107, 0.1);
+
+  /* Admin link */
+  --color-admin-bg: #ffc107;
+  --color-admin-hover: #e0a800;
+  --color-admin-text: #000000;
+
+  /* Impersonation banner */
+  --impersonation-bg: #fff3cd;
+  --impersonation-border: #ffc107;
+  --impersonation-text: #856404;
+
+  /* Gradient colors */
+  --gradient-primary: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
+  --gradient-purple: linear-gradient(90deg, #8b5cf6, #a78bfa);
+  --gradient-scheduled: linear-gradient(to right, #f8f7ff, white);
+}
+
+/* Dark Mode */
+[data-theme="dark"] {
+  /* Backgrounds */
+  --bg-body: #1a1a1a;
+  --bg-card: #2d2d2d;
+  --bg-navbar: #1f2937;
+  --bg-footer: #1f2937;
+  --bg-input: #2d2d2d;
+  --bg-hover: rgba(255, 255, 255, 0.1);
+  --bg-secondary: #252525;
+  --bg-tertiary: #333333;
+
+  /* Text */
+  --text-primary: #e0e0e0;
+  --text-secondary: #a0a0a0;
+  --text-muted: #707070;
+  --text-inverted: #ffffff;
+  --text-link: #5ba3f5;
+
+  /* Primary colors */
+  --color-primary: #5ba3f5;
+  --color-primary-hover: #4a8ae4;
+  --color-primary-light: rgba(91, 163, 245, 0.15);
+
+  /* Secondary colors */
+  --color-secondary: #6b7280;
+  --color-secondary-hover: #4b5563;
+
+  /* Semantic colors */
+  --color-success: #10b981;
+  --color-success-bg: #064e3b;
+  --color-success-light: #10b981;
+
+  --color-warning: #fbbf24;
+  --color-warning-hover: #f59e0b;
+  --color-warning-bg: #451a03;
+  --color-warning-text: #fef3c7;
+
+  --color-error: #f87171;
+  --color-error-hover: #ef4444;
+  --color-error-bg: #7f1d1d;
+  --color-error-text: #fecaca;
+
+  --color-info: #3b82f6;
+  --color-info-bg: #1e3a8a;
+  --color-info-text: #93c5fd;
+
+  /* Badge/status colors */
+  --badge-pending-bg: #451a03;
+  --badge-pending-text: #fef3c7;
+  --badge-running-bg: #1e3a8a;
+  --badge-running-text: #93c5fd;
+  --badge-completed-bg: #064e3b;
+  --badge-completed-text: #6ee7b7;
+  --badge-failed-bg: #7f1d1d;
+  --badge-failed-text: #fecaca;
+  --badge-cancelled-bg: #3b0a4d;
+  --badge-cancelled-text: #d8b4fe;
+  --badge-purple-bg: #7c3aed;
+  --badge-purple-text: #ffffff;
+
+  /* Borders */
+  --border-color: #404040;
+  --border-color-light: #4a4a4a;
+
+  /* Focus */
+  --focus-ring: 0 0 0 2px rgba(91, 163, 245, 0.2);
+
+  /* Logout button */
+  --color-logout: #f87171;
+  --color-logout-hover: #ef4444;
+  --color-logout-bg: rgba(248, 113, 113, 0.15);
+
+  /* Admin link */
+  --color-admin-bg: #f59e0b;
+  --color-admin-hover: #d97706;
+  --color-admin-text: #000000;
+
+  /* Impersonation banner */
+  --impersonation-bg: #451a03;
+  --impersonation-border: #f59e0b;
+  --impersonation-text: #fef3c7;
+
+  /* Gradient colors */
+  --gradient-primary: linear-gradient(90deg, #5ba3f5 0%, #4a8ae4 100%);
+  --gradient-purple: linear-gradient(90deg, #7c3aed, #8b5cf6);
+  --gradient-scheduled: linear-gradient(to right, #2d1f3d, #2d2d2d);
+}
diff --git a/src/frontend/src/app.html b/src/frontend/src/app.html
index f273cc5..06153b9 100644
--- a/src/frontend/src/app.html
+++ b/src/frontend/src/app.html
@@ -4,6 +4,14 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
+		<script>
+			// Prevent flash of unstyled content (FOUC)
+			(function() {
+				const theme = localStorage.getItem('theme') || 'light';
+				const isDark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+				document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+			})();
+		</script>
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
diff --git a/src/frontend/src/lib/components/BackButton.svelte b/src/frontend/src/lib/components/BackButton.svelte
index 23ed783..8b856fa 100644
--- a/src/frontend/src/lib/components/BackButton.svelte
+++ b/src/frontend/src/lib/components/BackButton.svelte
@@ -11,10 +11,10 @@
 <style>
   .back-button {
     padding: 0.5rem 1rem;
-    background-color: #6c757d;
+    background-color: var(--color-secondary);
     color: white;
     text-decoration: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-size: 0.9rem;
     font-weight: 500;
     transition: background-color 0.2s;
@@ -22,12 +22,12 @@
   }
 
   .back-button:hover {
-    background-color: #5a6268;
+    background-color: var(--color-secondary-hover);
   }
 
   .back-button.secondary {
     background-color: transparent;
-    color: #4a90e2;
+    color: var(--color-primary);
     padding: 0;
   }
 
diff --git a/src/frontend/src/lib/components/ErrorDisplay.svelte b/src/frontend/src/lib/components/ErrorDisplay.svelte
index 76704a8..20010e5 100644
--- a/src/frontend/src/lib/components/ErrorDisplay.svelte
+++ b/src/frontend/src/lib/components/ErrorDisplay.svelte
@@ -16,21 +16,21 @@
     text-align: center;
     padding: 3rem;
     font-size: 1.1rem;
-    color: #d32f2f;
+    color: var(--color-error);
   }
 
   .btn {
     display: inline-block;
     margin-top: 1rem;
     padding: 0.5rem 1rem;
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
     color: white;
     text-decoration: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-weight: 500;
   }
 
   .btn:hover {
-    background-color: #357abd;
+    background-color: var(--color-primary-hover);
   }
 </style>
diff --git a/src/frontend/src/lib/components/Loading.svelte b/src/frontend/src/lib/components/Loading.svelte
index 20eaa4a..2c043ff 100644
--- a/src/frontend/src/lib/components/Loading.svelte
+++ b/src/frontend/src/lib/components/Loading.svelte
@@ -11,6 +11,6 @@
     text-align: center;
     padding: 3rem;
     font-size: 1.1rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 </style>
diff --git a/src/frontend/src/lib/components/ThemeSwitcher.svelte b/src/frontend/src/lib/components/ThemeSwitcher.svelte
new file mode 100644
index 0000000..bbba761
--- /dev/null
+++ b/src/frontend/src/lib/components/ThemeSwitcher.svelte
@@ -0,0 +1,152 @@
+<script>
+  import { theme } from '$lib/stores/theme.js';
+  import { browser } from '$app/environment';
+
+  let isOpen = false;
+
+  const themes = [
+    { value: 'light', label: 'Light', icon: '☀️' },
+    { value: 'dark', label: 'Dark', icon: '🌙' },
+    { value: 'system', label: 'System', icon: '💻' },
+  ];
+
+  function selectTheme(value) {
+    theme.setTheme(value);
+    isOpen = false;
+  }
+
+  function toggle() {
+    isOpen = !isOpen;
+  }
+
+  // Close dropdown when clicking outside
+  function handleClickOutside(event) {
+    if (!event.target.closest('.theme-switcher')) {
+      isOpen = false;
+    }
+  }
+
+  if (browser) {
+    document.addEventListener('click', handleClickOutside);
+  }
+</script>
+
+<svelte:head>
+  <style>
+    /* Ensure dropdown is above other content */
+    .theme-dropdown {
+      z-index: 1000;
+    }
+  </style>
+</svelte:head>
+
+<div class="theme-switcher">
+  <button
+    class="theme-button"
+    on:click={toggle}
+    aria-label="Change theme"
+    aria-expanded={isOpen}
+  >
+    <span class="current-icon">
+      {#if $theme === 'light'}
+        ☀️
+      {:else if $theme === 'dark'}
+        🌙
+      {:else}
+        💻
+      {/if}
+    </span>
+  </button>
+
+  {#if isOpen}
+    <div class="theme-dropdown">
+      {#each themes as t}
+        <button
+          class="theme-option"
+          class:active={$theme === t.value}
+          on:click={() => selectTheme(t.value)}
+        >
+          <span class="theme-icon">{t.icon}</span>
+          <span class="theme-label">{t.label}</span>
+          {#if $theme === t.value}
+            <span class="checkmark">✓</span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .theme-switcher {
+    position: relative;
+    display: inline-block;
+  }
+
+  .theme-button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--border-radius);
+    transition: background-color 0.2s;
+    color: var(--text-inverted);
+    font-size: 1.25rem;
+  }
+
+  .theme-button:hover {
+    background-color: var(--bg-hover);
+  }
+
+  .theme-dropdown {
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    right: 0;
+    background-color: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--shadow-md);
+    min-width: 140px;
+    overflow: hidden;
+  }
+
+  .theme-option {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    font-size: 0.9rem;
+    color: var(--text-primary);
+    transition: background-color 0.2s;
+  }
+
+  .theme-option:hover {
+    background-color: var(--bg-secondary);
+  }
+
+  .theme-option.active {
+    background-color: var(--bg-secondary);
+    font-weight: 600;
+  }
+
+  .theme-icon {
+    font-size: 1.1rem;
+  }
+
+  .theme-label {
+    flex: 1;
+  }
+
+  .checkmark {
+    color: var(--color-primary);
+    font-weight: bold;
+  }
+</style>
diff --git a/src/frontend/src/lib/stores/theme.js b/src/frontend/src/lib/stores/theme.js
new file mode 100644
index 0000000..be52eae
--- /dev/null
+++ b/src/frontend/src/lib/stores/theme.js
@@ -0,0 +1,56 @@
+import { writable, derived } from 'svelte/store';
+import { browser } from '$app/environment';
+
+/**
+ * Theme store
+ * Manages theme state (light, dark, system) with localStorage persistence
+ */
+function createThemeStore() {
+  // Initialize state from localStorage
+  const initialState = browser ? localStorage.getItem('theme') || 'light' : 'light';
+
+  const { subscribe, set, update } = writable(initialState);
+
+  // Listen for system preference changes
+  let mediaQuery;
+  if (browser) {
+    mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleMediaChange = () => {
+      // Trigger update to recompute isDark
+      update((n) => n);
+    };
+    mediaQuery.addEventListener('change', handleMediaChange);
+  }
+
+  // Derived store for whether dark mode should be active
+  const isDark = derived(initialState, ($theme) => {
+    if (!browser) return false;
+    if ($theme === 'dark') return true;
+    if ($theme === 'light') return false;
+    // system preference
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+
+  return {
+    subscribe,
+    isDark,
+    setTheme: (theme) => {
+      if (browser) {
+        localStorage.setItem('theme', theme);
+        // Apply data-theme attribute to document
+        const isDarkMode = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+        document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
+      }
+      set(theme);
+    },
+    // Initialize theme on client-side
+    init: () => {
+      if (!browser) return;
+      const theme = localStorage.getItem('theme') || 'light';
+      const isDarkMode = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+      document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
+    },
+  };
+}
+
+export const theme = createThemeStore();
diff --git a/src/frontend/src/routes/+layout.svelte b/src/frontend/src/routes/+layout.svelte
index 40626f8..3a49c9e 100644
--- a/src/frontend/src/routes/+layout.svelte
+++ b/src/frontend/src/routes/+layout.svelte
@@ -1,11 +1,20 @@
 <script>
   import { browser } from '$app/environment';
+  import { onMount } from 'svelte';
   import { auth } from '$lib/stores.js';
+  import { theme } from '$lib/stores/theme.js';
   import { goto } from '$app/navigation';
   import { adminAPI, authAPI } from '$lib/api.js';
+  import ThemeSwitcher from '$lib/components/ThemeSwitcher.svelte';
+  import '../app.css';
 
   let stoppingImpersonation = false;
 
+  // Initialize theme on mount
+  onMount(() => {
+    theme.init();
+  });
+
   function handleLogout() {
     auth.logout();
     // Use hard redirect to ensure proper navigation after logout
@@ -62,6 +71,7 @@
             {#if $auth.user?.isAdmin}
               <a href="/admin" class="nav-link admin-link">Admin</a>
             {/if}
+            <ThemeSwitcher />
             <button on:click={handleLogout} class="nav-link logout-btn">Logout</button>
           </div>
         </div>
@@ -111,7 +121,8 @@
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
       Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    background-color: #f5f5f5;
+    background-color: var(--bg-body);
+    color: var(--text-primary);
   }
 
   .app {
@@ -121,8 +132,8 @@
   }
 
   .navbar {
-    background-color: #2c3e50;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background-color: var(--bg-navbar);
+    box-shadow: var(--shadow-md);
   }
 
   .nav-container {
@@ -136,7 +147,7 @@
   }
 
   .nav-brand .callsign {
-    color: white;
+    color: var(--text-inverted);
     font-size: 1.25rem;
     font-weight: 600;
   }
@@ -148,11 +159,12 @@
   }
 
   .nav-link {
-    color: rgba(255, 255, 255, 0.8);
+    color: var(--text-inverted);
+    opacity: 0.8;
     text-decoration: none;
     font-size: 0.95rem;
     padding: 0.5rem 1rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     transition: all 0.2s;
     background: none;
     border: none;
@@ -161,27 +173,27 @@
   }
 
   .nav-link:hover {
-    color: white;
-    background-color: rgba(255, 255, 255, 0.1);
+    opacity: 1;
+    background-color: var(--bg-hover);
   }
 
   .logout-btn {
-    color: #ff6b6b;
+    color: var(--color-logout);
+    opacity: 1;
   }
 
   .logout-btn:hover {
-    color: #ff5252;
-    background-color: rgba(255, 107, 107, 0.1);
+    background-color: var(--color-logout-bg);
   }
 
   .admin-link {
-    background-color: #ffc107;
-    color: #000;
+    background-color: var(--color-admin-bg);
+    color: var(--color-admin-text);
     font-weight: 600;
   }
 
   .admin-link:hover {
-    background-color: #e0a800;
+    background-color: var(--color-admin-hover);
   }
 
   main {
@@ -193,8 +205,9 @@
   }
 
   footer {
-    background-color: #2c3e50;
-    color: rgba(255, 255, 255, 0.7);
+    background-color: var(--bg-footer);
+    color: var(--text-inverted);
+    opacity: 0.7;
     text-align: center;
     padding: 1.5rem;
     margin-top: auto;
@@ -207,8 +220,8 @@
 
   /* Impersonation Banner */
   .impersonation-banner {
-    background-color: #fff3cd;
-    border: 2px solid #ffc107;
+    background-color: var(--impersonation-bg);
+    border: 2px solid var(--impersonation-border);
     padding: 0.75rem 1rem;
   }
 
@@ -228,15 +241,15 @@
   .impersonation-text {
     flex: 1;
     font-size: 0.95rem;
-    color: #856404;
+    color: var(--impersonation-text);
   }
 
   .stop-impersonation-btn {
-    background-color: #ffc107;
-    color: #000;
+    background-color: var(--color-warning);
+    color: var(--impersonation-text);
     border: none;
     padding: 0.5rem 1rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-weight: 600;
     font-size: 0.9rem;
@@ -244,7 +257,7 @@
   }
 
   .stop-impersonation-btn:hover:not(:disabled) {
-    background-color: #e0a800;
+    background-color: var(--color-warning-hover);
   }
 
   .stop-impersonation-btn:disabled {
diff --git a/src/frontend/src/routes/+page.svelte b/src/frontend/src/routes/+page.svelte
index f099d1f..0448b19 100644
--- a/src/frontend/src/routes/+page.svelte
+++ b/src/frontend/src/routes/+page.svelte
@@ -445,13 +445,13 @@
 
   .welcome h1 {
     font-size: 2.5rem;
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 0.5rem;
   }
 
   .subtitle {
     font-size: 1.25rem;
-    color: #666;
+    color: var(--text-secondary);
     margin-bottom: 2rem;
   }
 
@@ -464,12 +464,12 @@
 
   .dashboard h1 {
     font-size: 2rem;
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 0.5rem;
   }
 
   .welcome-section p {
-    color: #666;
+    color: var(--text-secondary);
     font-size: 1.1rem;
     margin-bottom: 2rem;
   }
@@ -482,21 +482,21 @@
   }
 
   .action-card {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-lg);
     padding: 1.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
   }
 
   .action-card h3 {
     margin: 0 0 0.5rem 0;
     font-size: 1.25rem;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .action-card p {
-    color: #666;
+    color: var(--text-secondary);
     margin-bottom: 1rem;
   }
 
@@ -504,7 +504,7 @@
     display: inline-block;
     padding: 0.75rem 1.5rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-size: 1rem;
     font-weight: 500;
     text-decoration: none;
@@ -513,25 +513,25 @@
   }
 
   .btn-primary {
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
     color: white;
   }
 
   .btn-primary:hover {
-    background-color: #357abd;
+    background-color: var(--color-primary-hover);
   }
 
   .btn-secondary {
-    background-color: #6c757d;
+    background-color: var(--color-secondary);
     color: white;
   }
 
   .btn-secondary:hover {
-    background-color: #5a6268;
+    background-color: var(--color-secondary-hover);
   }
 
   .action-card .btn {
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
     color: white;
     width: 100%;
     text-align: center;
@@ -539,25 +539,25 @@
   }
 
   .action-card .btn:hover {
-    background-color: #357abd;
+    background-color: var(--color-primary-hover);
   }
 
   .info-box {
-    background: #f8f9fa;
-    border-left: 4px solid #4a90e2;
+    background: var(--bg-secondary);
+    border-left: 4px solid var(--color-primary);
     padding: 1.5rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
   }
 
   .info-box h3 {
     margin: 0 0 1rem 0;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .info-box ol {
     margin: 0;
     padding-left: 1.5rem;
-    color: #666;
+    color: var(--text-secondary);
     line-height: 1.8;
   }
 
@@ -568,18 +568,18 @@
 
   .section-title {
     font-size: 1.5rem;
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 1rem;
   }
 
   .loading-state,
   .empty-state {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-lg);
     padding: 2rem;
     text-align: center;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .empty-actions {
@@ -597,25 +597,25 @@
   }
 
   .job-card {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-lg);
     padding: 1rem 1.25rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
     transition: box-shadow 0.2s;
   }
 
   .job-card:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+    box-shadow: var(--shadow-md);
   }
 
   .job-card.failed {
-    border-left: 4px solid #dc3545;
+    border-left: 4px solid var(--color-error);
   }
 
   .job-card-scheduled {
-    border-left: 4px solid #8b5cf6;
-    background: linear-gradient(to right, #f8f7ff, white);
+    border-left: 4px solid var(--badge-purple-bg);
+    background: var(--gradient-scheduled);
   }
 
   .job-header {
@@ -637,62 +637,62 @@
 
   .job-name {
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
     font-size: 1.1rem;
   }
 
   .job-id {
     font-size: 0.85rem;
-    color: #999;
+    color: var(--text-muted);
     font-family: monospace;
   }
 
   .status-badge {
     padding: 0.25rem 0.75rem;
-    border-radius: 12px;
+    border-radius: var(--border-radius-pill);
     font-size: 0.85rem;
     font-weight: 500;
     text-transform: capitalize;
   }
 
   .bg-yellow-100 {
-    background-color: #fef3c7;
+    background-color: var(--badge-pending-bg);
   }
 
   .bg-blue-100 {
-    background-color: #dbeafe;
+    background-color: var(--badge-running-bg);
   }
 
   .bg-green-100 {
-    background-color: #d1fae5;
+    background-color: var(--badge-completed-bg);
   }
 
   .bg-red-100 {
-    background-color: #fee2e2;
+    background-color: var(--badge-failed-bg);
   }
 
   .text-yellow-800 {
-    color: #92400e;
+    color: var(--badge-pending-text);
   }
 
   .text-blue-800 {
-    color: #1e40af;
+    color: var(--badge-running-text);
   }
 
   .text-green-800 {
-    color: #065f46;
+    color: var(--badge-completed-text);
   }
 
   .text-red-800 {
-    color: #991b1b;
+    color: var(--badge-failed-text);
   }
 
   .bg-purple-100 {
-    background-color: #f3e8ff;
+    background-color: var(--badge-cancelled-bg);
   }
 
   .text-purple-800 {
-    color: #6b21a8;
+    color: var(--badge-cancelled-text);
   }
 
   .job-badge {
@@ -705,15 +705,15 @@
   }
 
   .scheduled-badge {
-    background-color: #8b5cf6;
-    color: white;
+    background-color: var(--badge-purple-bg);
+    color: var(--badge-purple-text);
   }
 
   .job-meta {
     display: flex;
     gap: 0.75rem;
     font-size: 0.9rem;
-    color: #666;
+    color: var(--text-secondary);
     margin-bottom: 0.5rem;
     flex-wrap: wrap;
   }
@@ -724,14 +724,14 @@
 
   .job-time,
   .job-duration {
-    color: #999;
+    color: var(--text-muted);
   }
 
   .job-error {
-    background: #fee2e2;
-    color: #991b1b;
+    background: var(--color-error-bg);
+    color: var(--color-error-text);
     padding: 0.75rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-size: 0.95rem;
     margin-top: 0.5rem;
   }
@@ -745,29 +745,29 @@
 
   .stat-item {
     font-size: 0.9rem;
-    color: #666;
+    color: var(--text-secondary);
     padding: 0.25rem 0.5rem;
-    background: #f8f9fa;
-    border-radius: 4px;
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius);
   }
 
   .stat-item strong {
-    color: #333;
+    color: var(--text-primary);
   }
 
   .stat-added {
-    color: #065f46;
-    background: #d1fae5;
+    color: var(--color-success);
+    background: var(--color-success-bg);
   }
 
   .stat-updated {
-    color: #1e40af;
-    background: #dbeafe;
+    color: var(--color-info);
+    background: var(--color-info-bg);
   }
 
   .stat-skipped {
-    color: #92400e;
-    background: #fef3c7;
+    color: var(--badge-pending-text);
+    background: var(--badge-pending-bg);
   }
 
   .job-progress {
@@ -775,7 +775,7 @@
   }
 
   .progress-text {
-    color: #1e40af;
+    color: var(--color-info);
     font-size: 0.9rem;
     font-style: italic;
   }
@@ -789,17 +789,17 @@
   .btn-cancel {
     padding: 0.4rem 0.8rem;
     font-size: 0.85rem;
-    border: 1px solid #dc3545;
-    background: white;
-    color: #dc3545;
-    border-radius: 4px;
+    border: 1px solid var(--color-error);
+    background: var(--bg-card);
+    color: var(--color-error);
+    border-radius: var(--border-radius);
     cursor: pointer;
     transition: all 0.2s;
     font-weight: 500;
   }
 
   .btn-cancel:hover:not(:disabled) {
-    background: #dc3545;
+    background: var(--color-error);
     color: white;
   }
 
@@ -820,7 +820,7 @@
 
   .countdown-bar {
     height: 6px;
-    background: #e5e7eb;
+    background: var(--border-color-light);
     border-radius: 3px;
     overflow: hidden;
     margin-bottom: 0.5rem;
@@ -828,7 +828,7 @@
 
   .countdown-progress {
     height: 100%;
-    background: linear-gradient(90deg, #8b5cf6, #a78bfa);
+    background: var(--gradient-purple);
     border-radius: 3px;
     width: 100%;
     animation: pulse-countdown 2s ease-in-out infinite;
@@ -846,7 +846,7 @@
   .countdown-text {
     margin: 0;
     font-size: 0.85rem;
-    color: #8b5cf6;
+    color: var(--badge-purple-bg);
     text-align: center;
     font-weight: 500;
   }
diff --git a/src/frontend/src/routes/admin/+page.svelte b/src/frontend/src/routes/admin/+page.svelte
index b9cfe3d..e03f0a4 100644
--- a/src/frontend/src/routes/admin/+page.svelte
+++ b/src/frontend/src/routes/admin/+page.svelte
@@ -558,19 +558,20 @@
     text-align: center;
     padding: 3rem;
     font-size: 1.2rem;
+    color: var(--text-secondary);
   }
 
   .error {
-    background-color: #fee;
-    border: 1px solid #fcc;
+    background-color: var(--color-error-bg);
+    border: 1px solid var(--color-error);
     padding: 1rem;
-    border-radius: 4px;
-    color: #c00;
+    border-radius: var(--border-radius);
+    color: var(--color-error-text);
   }
 
   h1 {
     margin-bottom: 1.5rem;
-    color: #333;
+    color: var(--text-primary);
   }
 
   /* Tabs */
@@ -578,7 +579,7 @@
     display: flex;
     gap: 0.5rem;
     margin-bottom: 2rem;
-    border-bottom: 2px solid #ddd;
+    border-bottom: 2px solid var(--border-color);
   }
 
   .tab {
@@ -588,30 +589,30 @@
     cursor: pointer;
     font-size: 1rem;
     font-weight: 500;
-    color: #666;
+    color: var(--text-secondary);
     position: relative;
     top: 2px;
   }
 
   .tab:hover {
-    color: #333;
+    color: var(--text-primary);
   }
 
   .tab.active {
-    color: #007bff;
-    border-bottom: 2px solid #007bff;
+    color: var(--color-primary);
+    border-bottom: 2px solid var(--color-primary);
   }
 
   .tab-content {
-    background: white;
+    background: var(--bg-card);
     padding: 1.5rem;
-    border-radius: 4px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-sm);
   }
 
   h2 {
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--text-primary);
   }
 
   /* Stats Grid */
@@ -626,8 +627,8 @@
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     padding: 1.5rem;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--shadow-md);
   }
 
   .stat-card h3 {
@@ -670,9 +671,11 @@
   .search-input,
   .filter-select {
     padding: 0.5rem 0.75rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     font-size: 0.9rem;
+    background: var(--bg-input);
+    color: var(--text-primary);
   }
 
   .search-input {
@@ -687,8 +690,8 @@
   .users-table {
     width: 100%;
     border-collapse: collapse;
-    background: white;
-    border-radius: 4px;
+    background: var(--bg-card);
+    border-radius: var(--border-radius);
     overflow: hidden;
   }
 
@@ -696,23 +699,23 @@
   .users-table td {
     padding: 0.75rem 1rem;
     text-align: left;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .users-table th {
-    background-color: #f5f5f5;
+    background-color: var(--bg-secondary);
     font-weight: 600;
     text-transform: uppercase;
     font-size: 0.8rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .users-table tr:hover {
-    background-color: #f9f9f9;
+    background-color: var(--bg-secondary);
   }
 
   .admin-row {
-    background-color: #fff9e6 !important;
+    background-color: var(--color-warning-bg) !important;
   }
 
   .actions-cell {
@@ -723,7 +726,7 @@
     padding: 0.4rem 0.8rem;
     margin-right: 0.3rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-size: 0.85rem;
     transition: all 0.2s;
@@ -744,21 +747,21 @@
   }
 
   .role-btn {
-    background-color: #ffc107;
+    background-color: var(--color-warning);
     color: #000;
   }
 
   .role-btn:hover:not(:disabled) {
-    background-color: #e0a800;
+    background-color: var(--color-warning-hover);
   }
 
   .delete-btn {
-    background-color: #dc3545;
+    background-color: var(--color-error);
     color: white;
   }
 
   .delete-btn:hover:not(:disabled) {
-    background-color: #c82333;
+    background-color: var(--color-error-hover);
   }
 
   .role-badge {
@@ -774,13 +777,13 @@
   }
 
   .role-badge.user {
-    background-color: #6c757d;
+    background-color: var(--color-secondary);
     color: white;
   }
 
   .users-count {
     margin-top: 1rem;
-    color: #666;
+    color: var(--text-secondary);
     font-style: italic;
   }
 
@@ -792,8 +795,8 @@
   .actions-table {
     width: 100%;
     border-collapse: collapse;
-    background: white;
-    border-radius: 4px;
+    background: var(--bg-card);
+    border-radius: var(--border-radius);
     overflow: hidden;
   }
 
@@ -801,15 +804,15 @@
   .actions-table td {
     padding: 0.75rem 1rem;
     text-align: left;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .actions-table th {
-    background-color: #f5f5f5;
+    background-color: var(--bg-secondary);
     font-weight: 600;
     text-transform: uppercase;
     font-size: 0.8rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .action-type {
@@ -820,12 +823,12 @@
   }
 
   .action-type.impersonate_start {
-    background-color: #ffc107;
+    background-color: var(--color-warning);
     color: #000;
   }
 
   .action-type.impersonate_stop {
-    background-color: #28a745;
+    background-color: var(--color-success-light);
     color: white;
   }
 
@@ -835,14 +838,14 @@
   }
 
   .action-type.user_delete {
-    background-color: #dc3545;
+    background-color: var(--color-error);
     color: white;
   }
 
   .details-json {
-    background-color: #f5f5f5;
+    background-color: var(--bg-secondary);
     padding: 0.5rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-size: 0.8rem;
     max-height: 200px;
     overflow-y: auto;
@@ -851,7 +854,7 @@
   .no-actions {
     text-align: center;
     padding: 2rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   /* Modal */
@@ -869,30 +872,30 @@
   }
 
   .modal-content {
-    background: white;
+    background: var(--bg-card);
     padding: 2rem;
-    border-radius: 8px;
+    border-radius: var(--border-radius-lg);
     max-width: 500px;
     width: 90%;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-md);
   }
 
   .modal-content h2 {
     margin-top: 0;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .modal-content p {
-    color: #666;
+    color: var(--text-secondary);
     line-height: 1.5;
   }
 
   .modal-content .warning {
-    background-color: #fff3cd;
-    border-left: 4px solid #ffc107;
+    background-color: var(--badge-pending-bg);
+    border-left: 4px solid var(--color-warning);
     padding: 1rem;
     margin: 1rem 0;
-    color: #856404;
+    color: var(--badge-pending-text);
   }
 
   .modal-actions {
@@ -905,36 +908,36 @@
   .modal-button {
     padding: 0.75rem 1.5rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-weight: 500;
     transition: all 0.2s;
   }
 
   .modal-button.cancel {
-    background-color: #6c757d;
+    background-color: var(--color-secondary);
     color: white;
   }
 
   .modal-button.cancel:hover {
-    background-color: #5a6268;
+    background-color: var(--color-secondary-hover);
   }
 
   .modal-button.confirm {
-    background-color: #007bff;
+    background-color: var(--color-primary);
     color: white;
   }
 
   .modal-button.confirm:hover {
-    background-color: #0056b3;
+    background-color: var(--color-primary-hover);
   }
 
   .modal-button.delete-confirm {
-    background-color: #dc3545;
+    background-color: var(--color-error);
   }
 
   .modal-button.delete-confirm:hover {
-    background-color: #c82333;
+    background-color: var(--color-error-hover);
   }
 
   .role-options {
@@ -952,7 +955,7 @@
   }
 
   .help-text {
-    color: #666;
+    color: var(--text-secondary);
     font-style: italic;
     margin-bottom: 1rem;
   }
@@ -962,16 +965,16 @@
   }
 
   .awards-info {
-    background-color: #f9f9f9;
+    background-color: var(--bg-secondary);
     border-left: 4px solid #667eea;
     padding: 1.5rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
   }
 
   .awards-info h3 {
     margin-top: 0;
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .awards-info p {
@@ -988,7 +991,7 @@
   }
 
   .awards-info code {
-    background-color: #e0e0e0;
+    background-color: var(--border-color);
     padding: 0.2rem 0.4rem;
     border-radius: 3px;
     font-family: monospace;
diff --git a/src/frontend/src/routes/admin/awards/+page.svelte b/src/frontend/src/routes/admin/awards/+page.svelte
index 0a8063d..b8d01fa 100644
--- a/src/frontend/src/routes/admin/awards/+page.svelte
+++ b/src/frontend/src/routes/admin/awards/+page.svelte
@@ -176,15 +176,15 @@
     text-align: center;
     padding: 3rem;
     font-size: 1.2rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .error {
-    background-color: #fee;
-    border: 1px solid #fcc;
+    background-color: var(--color-error-bg);
+    border: 1px solid var(--color-error);
     padding: 1rem;
-    border-radius: 4px;
-    color: #c00;
+    border-radius: var(--border-radius);
+    color: var(--color-error);
     margin: 2rem;
   }
 
@@ -199,7 +199,7 @@
 
   .header h1 {
     margin: 0;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .filters {
@@ -212,9 +212,11 @@
   .search-input,
   .category-filter {
     padding: 0.5rem 0.75rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     font-size: 0.9rem;
+    background: var(--bg-input);
+    color: var(--text-primary);
   }
 
   .search-input {
@@ -229,7 +231,7 @@
   .btn {
     padding: 0.6rem 1.2rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-weight: 500;
     text-decoration: none;
@@ -238,19 +240,19 @@
   }
 
   .btn-primary {
-    background-color: #667eea;
-    color: white;
+    background-color: var(--color-primary);
+    color: var(--text-inverted);
   }
 
   .btn-primary:hover {
-    background-color: #5568d3;
+    background-color: var(--color-primary-hover);
   }
 
   .awards-table-container {
     overflow-x: auto;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    background: var(--bg-card);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--shadow-sm);
   }
 
   .awards-table {
@@ -262,24 +264,25 @@
   .awards-table td {
     padding: 0.75rem 1rem;
     text-align: left;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-primary);
   }
 
   .awards-table th {
-    background-color: #f5f5f5;
+    background-color: var(--bg-hover);
     font-weight: 600;
     text-transform: uppercase;
     font-size: 0.8rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .awards-table tr:hover {
-    background-color: #f9f9f9;
+    background-color: var(--bg-secondary);
   }
 
   .id-cell {
     font-family: monospace;
-    color: #666;
+    color: var(--text-secondary);
     font-size: 0.9rem;
   }
 
@@ -289,7 +292,7 @@
   }
 
   .name-cell small {
-    color: #888;
+    color: var(--text-muted);
     font-size: 0.85rem;
     margin-top: 0.25rem;
   }
@@ -317,17 +320,17 @@
     padding: 0.4rem 0.8rem;
     margin-right: 0.3rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-size: 0.85rem;
     text-decoration: none;
     display: inline-block;
     transition: all 0.2s;
+    color: var(--text-inverted);
   }
 
   .edit-btn {
     background-color: #3498db;
-    color: white;
   }
 
   .edit-btn:hover {
@@ -336,7 +339,6 @@
 
   .view-btn {
     background-color: #27ae60;
-    color: white;
   }
 
   .view-btn:hover {
@@ -345,7 +347,6 @@
 
   .delete-btn {
     background-color: #e74c3c;
-    color: white;
   }
 
   .delete-btn:hover {
@@ -354,7 +355,7 @@
 
   .count {
     margin-top: 1rem;
-    color: #666;
+    color: var(--text-secondary);
     font-style: italic;
   }
 
diff --git a/src/frontend/src/routes/admin/awards/[id]/+page.svelte b/src/frontend/src/routes/admin/awards/[id]/+page.svelte
index 19f5e8f..1ffd9fe 100644
--- a/src/frontend/src/routes/admin/awards/[id]/+page.svelte
+++ b/src/frontend/src/routes/admin/awards/[id]/+page.svelte
@@ -880,7 +880,7 @@
     text-align: center;
     padding: 3rem;
     font-size: 1.2rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .header {
@@ -894,7 +894,7 @@
 
   .header h1 {
     margin: 0;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .header-actions {
@@ -903,20 +903,20 @@
   }
 
   .error, .validation-errors {
-    background-color: #fee;
-    border: 1px solid #fcc;
+    background-color: var(--color-error-bg);
+    border: 1px solid var(--color-error);
     padding: 1rem;
-    border-radius: 4px;
-    color: #c00;
+    border-radius: var(--border-radius);
+    color: var(--color-error);
     margin-bottom: 1rem;
   }
 
   .validation-warnings {
-    background-color: #fff3cd;
-    border: 1px solid #ffc107;
+    background-color: var(--color-warning-bg);
+    border: 1px solid var(--color-warning);
     padding: 1rem;
-    border-radius: 4px;
-    color: #856404;
+    border-radius: var(--border-radius);
+    color: var(--color-warning);
     margin-bottom: 1rem;
   }
 
@@ -934,7 +934,7 @@
     display: flex;
     gap: 0.5rem;
     margin-bottom: 1.5rem;
-    border-bottom: 2px solid #ddd;
+    border-bottom: 2px solid var(--border-color);
   }
 
   .tab {
@@ -944,25 +944,25 @@
     cursor: pointer;
     font-size: 1rem;
     font-weight: 500;
-    color: #666;
+    color: var(--text-secondary);
     position: relative;
     top: 2px;
   }
 
   .tab:hover {
-    color: #333;
+    color: var(--text-primary);
   }
 
   .tab.active {
-    color: #667eea;
-    border-bottom: 2px solid #667eea;
+    color: var(--color-primary);
+    border-bottom: 2px solid var(--color-primary);
   }
 
   .form-section {
-    background: white;
+    background: var(--bg-card);
     padding: 2rem;
-    border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--shadow-sm);
   }
 
   .form-group {
@@ -973,7 +973,7 @@
     display: block;
     font-weight: 500;
     margin-bottom: 0.5rem;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .form-group input[type="text"],
@@ -982,9 +982,11 @@
   .form-group textarea {
     width: 100%;
     padding: 0.6rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     font-size: 1rem;
+    background: var(--bg-input);
+    color: var(--text-primary);
   }
 
   .form-group textarea {
@@ -995,17 +997,18 @@
   .form-group small {
     display: block;
     margin-top: 0.25rem;
-    color: #888;
+    color: var(--text-muted);
     font-size: 0.85rem;
   }
 
   .btn {
     padding: 0.6rem 1.2rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-weight: 500;
     transition: all 0.2s;
+    color: var(--text-inverted);
   }
 
   .btn:disabled {
@@ -1014,17 +1017,15 @@
   }
 
   .btn-primary {
-    background-color: #667eea;
-    color: white;
+    background-color: var(--color-primary);
   }
 
   .btn-primary:hover:not(:disabled) {
-    background-color: #5568d3;
+    background-color: var(--color-primary-hover);
   }
 
   .btn-secondary {
     background-color: #6c757d;
-    color: white;
   }
 
   .btn-secondary:hover {
@@ -1032,13 +1033,13 @@
   }
 
   .btn-remove {
-    background-color: #e74c3c;
-    color: white;
+    background-color: var(--color-error);
     padding: 0.4rem 0.8rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-size: 0.85rem;
+    color: var(--text-inverted);
   }
 
   .btn-remove:hover {
@@ -1046,7 +1047,7 @@
   }
 
   .help-text {
-    color: #666;
+    color: var(--text-secondary);
     font-style: italic;
     margin-bottom: 1rem;
   }
@@ -1059,10 +1060,10 @@
   }
 
   .mode-group-item {
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     padding: 1rem;
-    background: #f9f9f9;
+    background: var(--bg-secondary);
   }
 
   .mode-group-header {
@@ -1073,17 +1074,18 @@
   }
 
   .mode-group-modes {
-    color: #666;
+    color: var(--text-secondary);
     font-size: 0.9rem;
   }
 
   .add-mode-group {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--border-color);
     padding-top: 2rem;
   }
 
   .add-mode-group h3 {
     margin-bottom: 1rem;
+    color: var(--text-primary);
   }
 
   .mode-selector, .bands-selector {
@@ -1099,6 +1101,7 @@
     gap: 0.5rem;
     padding: 0.25rem;
     cursor: pointer;
+    color: var(--text-primary);
   }
 
   .mode-checkbox input, .band-checkbox input {
@@ -1106,24 +1109,25 @@
   }
 
   .rule-config {
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     padding: 1.5rem;
     margin-bottom: 1.5rem;
-    background: #f9f9f9;
+    background: var(--bg-secondary);
   }
 
   .rule-config h3 {
     margin-top: 0;
     margin-bottom: 1rem;
+    color: var(--text-primary);
   }
 
   .info-box {
-    background-color: #e3f2fd;
-    border-left: 4px solid #2196f3;
+    background-color: var(--color-info-bg);
+    border-left: 4px solid var(--color-info);
     padding: 1rem;
     margin-top: 1rem;
-    color: #0d47a1;
+    color: var(--color-info);
   }
 
   .stations-editor {
@@ -1149,17 +1153,17 @@
 
   .base-rule-config {
     padding-left: 1rem;
-    border-left: 3px solid #ddd;
+    border-left: 3px solid var(--border-color);
   }
 
   .filters-section {
     margin-top: 2rem;
     padding-top: 2rem;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--border-color);
   }
 
   .empty-state {
-    color: #888;
+    color: var(--text-muted);
     font-style: italic;
     text-align: center;
     padding: 1rem;
diff --git a/src/frontend/src/routes/admin/awards/components/FilterBuilder.svelte b/src/frontend/src/routes/admin/awards/components/FilterBuilder.svelte
index 8c5d15d..fb60d97 100644
--- a/src/frontend/src/routes/admin/awards/components/FilterBuilder.svelte
+++ b/src/frontend/src/routes/admin/awards/components/FilterBuilder.svelte
@@ -283,16 +283,16 @@
 
 <style>
   .filter-builder {
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     padding: 1.5rem;
-    background: #fafafa;
+    background: var(--bg-secondary);
   }
 
   .no-filters {
     text-align: center;
     padding: 1rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .filter-group {
@@ -310,7 +310,7 @@
 
   .filter-group-header h4 {
     margin: 0;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .operator-selector {
@@ -323,6 +323,7 @@
     align-items: center;
     gap: 0.5rem;
     cursor: pointer;
+    color: var(--text-primary);
   }
 
   .filter-list {
@@ -332,9 +333,9 @@
   }
 
   .filter-item {
-    background: white;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     padding: 1rem;
   }
 
@@ -348,9 +349,11 @@
   .single-filter select,
   .single-filter input {
     padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     font-size: 0.9rem;
+    background: var(--bg-input);
+    color: var(--text-primary);
   }
 
   .field-select {
@@ -372,7 +375,7 @@
   }
 
   .nested-filter-group {
-    border-left: 3px solid #667eea;
+    border-left: 3px solid var(--color-primary);
     padding-left: 1rem;
   }
 
@@ -385,7 +388,7 @@
 
   .group-label {
     font-weight: 500;
-    color: #667eea;
+    color: var(--color-primary);
   }
 
   .multi-select {
@@ -399,10 +402,11 @@
     align-items: center;
     gap: 0.25rem;
     padding: 0.25rem 0.5rem;
-    background: #f5f5f5;
-    border-radius: 4px;
+    background: var(--bg-hover);
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-size: 0.85rem;
+    color: var(--text-primary);
   }
 
   .checkbox-option input {
@@ -410,11 +414,11 @@
   }
 
   .btn-remove {
-    background-color: #dc3545;
-    color: white;
+    background-color: var(--color-error);
+    color: var(--text-inverted);
     padding: 0.4rem 0.8rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-size: 0.85rem;
   }
@@ -429,21 +433,21 @@
     flex-wrap: wrap;
     margin-top: 1rem;
     padding-top: 1rem;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--border-color);
   }
 
   .btn {
     padding: 0.5rem 1rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-weight: 500;
     font-size: 0.9rem;
+    color: var(--text-inverted);
   }
 
   .btn-secondary {
     background-color: #6c757d;
-    color: white;
   }
 
   .btn-secondary:hover {
@@ -451,8 +455,7 @@
   }
 
   .btn-danger {
-    background-color: #dc3545;
-    color: white;
+    background-color: var(--color-error);
   }
 
   .btn-danger:hover {
diff --git a/src/frontend/src/routes/admin/awards/components/TestAwardModal.svelte b/src/frontend/src/routes/admin/awards/components/TestAwardModal.svelte
index 76a02a0..1ae2546 100644
--- a/src/frontend/src/routes/admin/awards/components/TestAwardModal.svelte
+++ b/src/frontend/src/routes/admin/awards/components/TestAwardModal.svelte
@@ -525,15 +525,15 @@
   }
 
   .modal-content {
-    background: white;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border-radius: var(--border-radius-lg);
     max-width: 800px;
     width: 100%;
     max-height: 90vh;
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-md);
   }
 
   .modal-content.large {
@@ -545,12 +545,12 @@
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .modal-header h2 {
     margin: 0;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .close-btn {
@@ -558,7 +558,7 @@
     border: none;
     font-size: 1.5rem;
     cursor: pointer;
-    color: #888;
+    color: var(--text-muted);
     padding: 0;
     width: 2rem;
     height: 2rem;
@@ -568,7 +568,7 @@
   }
 
   .close-btn:hover {
-    color: #333;
+    color: var(--text-primary);
   }
 
   .modal-body {
@@ -583,38 +583,39 @@
 
   .validation-section h3 {
     margin: 0 0 1rem 0;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .validation-block {
     padding: 1rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     margin-bottom: 1rem;
   }
 
   .validation-block h4 {
     margin: 0 0 0.75rem 0;
     font-size: 1rem;
+    color: var(--text-primary);
   }
 
   .validation-block.errors {
-    background-color: #fee;
-    border-left: 4px solid #dc3545;
+    background-color: var(--color-error-bg);
+    border-left: 4px solid var(--color-error);
   }
 
   .validation-block.warnings {
-    background-color: #fff3cd;
-    border-left: 4px solid #ffc107;
+    background-color: var(--color-warning-bg);
+    border-left: 4px solid var(--color-warning);
   }
 
   .validation-block.info {
-    background-color: #e3f2fd;
-    border-left: 4px solid #2196f3;
+    background-color: var(--color-info-bg);
+    border-left: 4px solid var(--color-info);
   }
 
   .validation-block.success {
-    background-color: #d4edda;
-    border-left: 4px solid #28a745;
+    background-color: var(--color-success-bg);
+    border-left: 4px solid var(--color-success);
   }
 
   .validation-block ul {
@@ -624,32 +625,33 @@
 
   .validation-block li {
     margin-bottom: 0.5rem;
+    color: var(--text-primary);
   }
 
   .severity-error {
-    color: #dc3545;
+    color: var(--color-error);
   }
 
   .severity-warning {
-    color: #856404;
+    color: var(--color-warning);
   }
 
   .severity-info {
-    color: #0d47a1;
+    color: var(--color-info);
   }
 
   .test-config {
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid var(--border-color);
     padding-top: 1.5rem;
   }
 
   .test-config h3 {
     margin: 0 0 0.5rem 0;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .help-text {
-    color: #666;
+    color: var(--text-secondary);
     font-size: 0.9rem;
     margin-bottom: 1rem;
   }
@@ -663,33 +665,37 @@
 
   .user-selector label {
     font-weight: 500;
+    color: var(--text-primary);
   }
 
   .user-selector select {
     flex: 1;
     padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    background: var(--bg-input);
+    color: var(--text-primary);
   }
 
   .test-results {
     margin-top: 1.5rem;
     padding: 1rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
   }
 
   .test-results.error {
-    background-color: #fee;
-    border-left: 4px solid #dc3545;
+    background-color: var(--color-error-bg);
+    border-left: 4px solid var(--color-error);
   }
 
   .test-results.success {
-    background-color: #f9f9f9;
-    border: 1px solid #ddd;
+    background-color: var(--bg-secondary);
+    border: 1px solid var(--border-color);
   }
 
   .test-results h4 {
     margin: 0 0 1rem 0;
+    color: var(--text-primary);
   }
 
   .result-summary {
@@ -704,40 +710,40 @@
     flex-direction: column;
     align-items: center;
     padding: 0.75rem;
-    background: white;
-    border-radius: 4px;
+    background: var(--bg-card);
+    border-radius: var(--border-radius);
   }
 
   .result-item .label {
     font-size: 0.8rem;
-    color: #666;
+    color: var(--text-secondary);
     margin-bottom: 0.25rem;
   }
 
   .result-item .value {
     font-size: 1.25rem;
     font-weight: bold;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .result-item .value.confirmed {
-    color: #28a745;
+    color: var(--color-success);
   }
 
   .result-item .value.progress {
-    color: #667eea;
+    color: var(--color-primary);
   }
 
   .result-warnings {
-    background-color: #fff3cd;
+    background-color: var(--color-warning-bg);
     padding: 0.75rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     margin-bottom: 1rem;
   }
 
   .result-warnings h5 {
     margin: 0 0 0.5rem 0;
-    color: #856404;
+    color: var(--color-warning);
   }
 
   .result-warnings ul {
@@ -746,14 +752,14 @@
   }
 
   .sample-entities {
-    background-color: #e3f2fd;
+    background-color: var(--color-info-bg);
     padding: 0.75rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
   }
 
   .sample-entities h5 {
     margin: 0 0 0.5rem 0;
-    color: #0d47a1;
+    color: var(--color-info);
   }
 
   .entities-list {
@@ -763,24 +769,24 @@
   }
 
   .entity-tag {
-    background-color: white;
+    background-color: var(--bg-card);
     padding: 0.25rem 0.75rem;
     border-radius: 12px;
     font-size: 0.85rem;
-    color: #0d47a1;
+    color: var(--color-info);
   }
 
   .no-matches {
-    background-color: #fff3cd;
+    background-color: var(--color-warning-bg);
     padding: 0.75rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     text-align: center;
-    color: #856404;
+    color: var(--color-warning);
   }
 
   .modal-footer {
     padding: 1rem 1.5rem;
-    border-top: 1px solid #e0e0e0;
+    border-top: 1px solid var(--border-color);
     display: flex;
     justify-content: flex-end;
   }
@@ -788,10 +794,11 @@
   .btn {
     padding: 0.6rem 1.2rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-weight: 500;
     transition: all 0.2s;
+    color: var(--text-inverted);
   }
 
   .btn:disabled {
@@ -800,17 +807,15 @@
   }
 
   .btn-primary {
-    background-color: #667eea;
-    color: white;
+    background-color: var(--color-primary);
   }
 
   .btn-primary:hover:not(:disabled) {
-    background-color: #5568d3;
+    background-color: var(--color-primary-hover);
   }
 
   .btn-secondary {
     background-color: #6c757d;
-    color: white;
   }
 
   .btn-secondary:hover {
diff --git a/src/frontend/src/routes/admin/awards/create/+page.svelte b/src/frontend/src/routes/admin/awards/create/+page.svelte
index 4297e28..612cfcd 100644
--- a/src/frontend/src/routes/admin/awards/create/+page.svelte
+++ b/src/frontend/src/routes/admin/awards/create/+page.svelte
@@ -906,7 +906,7 @@
     text-align: center;
     padding: 3rem;
     font-size: 1.2rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .header {
@@ -920,7 +920,7 @@
 
   .header h1 {
     margin: 0;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .header-actions {
@@ -929,20 +929,20 @@
   }
 
   .error, .validation-errors {
-    background-color: #fee;
-    border: 1px solid #fcc;
+    background-color: var(--color-error-bg);
+    border: 1px solid var(--color-error);
     padding: 1rem;
-    border-radius: 4px;
-    color: #c00;
+    border-radius: var(--border-radius);
+    color: var(--color-error);
     margin-bottom: 1rem;
   }
 
   .validation-warnings {
-    background-color: #fff3cd;
-    border: 1px solid #ffc107;
+    background-color: var(--color-warning-bg);
+    border: 1px solid var(--color-warning);
     padding: 1rem;
-    border-radius: 4px;
-    color: #856404;
+    border-radius: var(--border-radius);
+    color: var(--color-warning);
     margin-bottom: 1rem;
   }
 
@@ -960,7 +960,7 @@
     display: flex;
     gap: 0.5rem;
     margin-bottom: 1.5rem;
-    border-bottom: 2px solid #ddd;
+    border-bottom: 2px solid var(--border-color);
   }
 
   .tab {
@@ -970,25 +970,25 @@
     cursor: pointer;
     font-size: 1rem;
     font-weight: 500;
-    color: #666;
+    color: var(--text-secondary);
     position: relative;
     top: 2px;
   }
 
   .tab:hover {
-    color: #333;
+    color: var(--text-primary);
   }
 
   .tab.active {
-    color: #667eea;
-    border-bottom: 2px solid #667eea;
+    color: var(--color-primary);
+    border-bottom: 2px solid var(--color-primary);
   }
 
   .form-section {
-    background: white;
+    background: var(--bg-card);
     padding: 2rem;
-    border-radius: 8px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-lg);
+    box-shadow: var(--shadow-sm);
   }
 
   .form-group {
@@ -999,7 +999,7 @@
     display: block;
     font-weight: 500;
     margin-bottom: 0.5rem;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .form-group input[type="text"],
@@ -1008,9 +1008,11 @@
   .form-group textarea {
     width: 100%;
     padding: 0.6rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     font-size: 1rem;
+    background: var(--bg-input);
+    color: var(--text-primary);
   }
 
   .form-group textarea {
@@ -1021,17 +1023,18 @@
   .form-group small {
     display: block;
     margin-top: 0.25rem;
-    color: #888;
+    color: var(--text-muted);
     font-size: 0.85rem;
   }
 
   .btn {
     padding: 0.6rem 1.2rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-weight: 500;
     transition: all 0.2s;
+    color: var(--text-inverted);
   }
 
   .btn:disabled {
@@ -1040,17 +1043,15 @@
   }
 
   .btn-primary {
-    background-color: #667eea;
-    color: white;
+    background-color: var(--color-primary);
   }
 
   .btn-primary:hover:not(:disabled) {
-    background-color: #5568d3;
+    background-color: var(--color-primary-hover);
   }
 
   .btn-secondary {
     background-color: #6c757d;
-    color: white;
   }
 
   .btn-secondary:hover {
@@ -1058,13 +1059,13 @@
   }
 
   .btn-remove {
-    background-color: #e74c3c;
-    color: white;
+    background-color: var(--color-error);
     padding: 0.4rem 0.8rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-size: 0.85rem;
+    color: var(--text-inverted);
   }
 
   .btn-remove:hover {
@@ -1072,7 +1073,7 @@
   }
 
   .help-text {
-    color: #666;
+    color: var(--text-secondary);
     font-style: italic;
     margin-bottom: 1rem;
   }
@@ -1085,10 +1086,10 @@
   }
 
   .mode-group-item {
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     padding: 1rem;
-    background: #f9f9f9;
+    background: var(--bg-secondary);
   }
 
   .mode-group-header {
@@ -1099,17 +1100,18 @@
   }
 
   .mode-group-modes {
-    color: #666;
+    color: var(--text-secondary);
     font-size: 0.9rem;
   }
 
   .add-mode-group {
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--border-color);
     padding-top: 2rem;
   }
 
   .add-mode-group h3 {
     margin-bottom: 1rem;
+    color: var(--text-primary);
   }
 
   .mode-selector, .bands-selector {
@@ -1125,6 +1127,7 @@
     gap: 0.5rem;
     padding: 0.25rem;
     cursor: pointer;
+    color: var(--text-primary);
   }
 
   .mode-checkbox input, .band-checkbox input {
@@ -1132,24 +1135,25 @@
   }
 
   .rule-config {
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     padding: 1.5rem;
     margin-bottom: 1.5rem;
-    background: #f9f9f9;
+    background: var(--bg-secondary);
   }
 
   .rule-config h3 {
     margin-top: 0;
     margin-bottom: 1rem;
+    color: var(--text-primary);
   }
 
   .info-box {
-    background-color: #e3f2fd;
-    border-left: 4px solid #2196f3;
+    background-color: var(--color-info-bg);
+    border-left: 4px solid var(--color-info);
     padding: 1rem;
     margin-top: 1rem;
-    color: #0d47a1;
+    color: var(--color-info);
   }
 
   .stations-editor {
@@ -1175,17 +1179,17 @@
 
   .base-rule-config {
     padding-left: 1rem;
-    border-left: 3px solid #ddd;
+    border-left: 3px solid var(--border-color);
   }
 
   .filters-section {
     margin-top: 2rem;
     padding-top: 2rem;
-    border-top: 1px solid #ddd;
+    border-top: 1px solid var(--border-color);
   }
 
   .empty-state {
-    color: #888;
+    color: var(--text-muted);
     font-style: italic;
     text-align: center;
     padding: 1rem;
diff --git a/src/frontend/src/routes/awards/+page.svelte b/src/frontend/src/routes/awards/+page.svelte
index c3ea8b0..768ad98 100644
--- a/src/frontend/src/routes/awards/+page.svelte
+++ b/src/frontend/src/routes/awards/+page.svelte
@@ -180,13 +180,13 @@
 
   h1 {
     font-size: 2.5rem;
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 0.5rem;
   }
 
   .subtitle {
     font-size: 1.25rem;
-    color: #666;
+    color: var(--text-secondary);
     margin-bottom: 2rem;
   }
 
@@ -205,28 +205,29 @@
 
   .filter-group label {
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
     font-size: 0.9rem;
   }
 
   .filter-group select {
     padding: 0.5rem 1rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    background-color: white;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    background-color: var(--bg-input);
     font-size: 0.9rem;
     cursor: pointer;
     min-width: 150px;
+    color: var(--text-primary);
   }
 
   .filter-group select:hover {
-    border-color: #4a90e2;
+    border-color: var(--color-primary);
   }
 
   .filter-group select:focus {
     outline: none;
-    border-color: #4a90e2;
-    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+    border-color: var(--color-primary);
+    box-shadow: var(--focus-ring);
   }
 
   .loading,
@@ -235,11 +236,11 @@
     text-align: center;
     padding: 3rem;
     font-size: 1.1rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .error {
-    color: #d32f2f;
+    color: var(--color-error);
   }
 
   .awards-grid {
@@ -249,11 +250,11 @@
   }
 
   .award-card {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-lg);
     padding: 1.5rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
     display: flex;
     flex-direction: column;
   }
@@ -268,16 +269,16 @@
 
   .award-header h2 {
     font-size: 1.5rem;
-    color: #333;
+    color: var(--text-primary);
     margin: 0;
     flex: 1;
   }
 
   .category {
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
     color: white;
     padding: 0.25rem 0.75rem;
-    border-radius: 12px;
+    border-radius: var(--border-radius-pill);
     font-size: 0.75rem;
     font-weight: 600;
     text-transform: uppercase;
@@ -285,7 +286,7 @@
   }
 
   .description {
-    color: #666;
+    color: var(--text-secondary);
     margin-bottom: 1rem;
     flex-grow: 1;
   }
@@ -295,8 +296,8 @@
     gap: 2rem;
     margin-bottom: 1rem;
     padding: 0.75rem;
-    background-color: #f8f9fa;
-    border-radius: 4px;
+    background-color: var(--bg-secondary);
+    border-radius: var(--border-radius);
   }
 
   .info-item {
@@ -307,14 +308,14 @@
 
   .label {
     font-size: 0.75rem;
-    color: #666;
+    color: var(--text-secondary);
     text-transform: uppercase;
     font-weight: 600;
   }
 
   .value {
     font-size: 1rem;
-    color: #333;
+    color: var(--text-primary);
     font-weight: 500;
   }
 
@@ -325,15 +326,15 @@
   .progress-bar {
     width: 100%;
     height: 8px;
-    background-color: #e0e0e0;
-    border-radius: 4px;
+    background-color: var(--border-color);
+    border-radius: var(--border-radius);
     overflow: hidden;
     margin-bottom: 0.5rem;
   }
 
   .progress-fill {
     height: 100%;
-    background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
+    background: var(--gradient-primary);
     transition: width 0.3s ease;
   }
 
@@ -348,7 +349,7 @@
     text-align: center;
     font-size: 0.875rem;
     font-weight: 600;
-    color: #4a90e2;
+    color: var(--color-primary);
   }
 
   .worked,
@@ -357,20 +358,20 @@
   }
 
   .worked {
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .confirmed {
-    color: #4a90e2;
+    color: var(--color-primary);
   }
 
   .btn {
     display: inline-block;
     padding: 0.75rem 1.5rem;
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
     color: white;
     text-decoration: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-weight: 500;
     text-align: center;
     transition: background-color 0.2s;
@@ -379,6 +380,6 @@
   }
 
   .btn:hover {
-    background-color: #357abd;
+    background-color: var(--color-primary-hover);
   }
 </style>
diff --git a/src/frontend/src/routes/awards/[id]/+page.svelte b/src/frontend/src/routes/awards/[id]/+page.svelte
index dc7855b..c1136a6 100644
--- a/src/frontend/src/routes/awards/[id]/+page.svelte
+++ b/src/frontend/src/routes/awards/[id]/+page.svelte
@@ -916,43 +916,43 @@
     text-align: center;
     padding: 3rem;
     font-size: 1.1rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .error {
-    color: #d32f2f;
+    color: var(--color-error);
   }
 
    .award-table {
-	border: 1px solid #000;
+	border: 1px solid var(--text-primary);
 	border-collapse: collapse;
    }
 
    .award-table td {
-  border: 1px solid #000;
+  border: 1px solid var(--text-primary);
     padding: 0px 3px 0px 3px;
 }
 
    .award-table tfoot {
-    background-color: #f5f5f5;
-    border-top: 2px solid #333;
+    background-color: var(--bg-secondary);
+    border-top: 2px solid var(--text-primary);
    }
 
    .sum-row td {
-    border: 1px solid #000;
+    border: 1px solid var(--text-primary);
     padding: 8px 5px;
     text-align: center;
-    background-color: #f5f5f5;
+    background-color: var(--bg-secondary);
     font-weight: 600;
    }
 
    .sum-label {
     text-align: left !important;
-    color: #333;
+    color: var(--text-primary);
    }
 
    .sum-cell {
-    color: #4a90e2;
+    color: var(--color-primary);
    }
 
   .award-header {
@@ -961,30 +961,30 @@
 
   h1 {
     font-size: 2.5rem;
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 0.5rem;
   }
 
   .description {
     font-size: 1.1rem;
-    color: #666;
+    color: var(--text-secondary);
     margin-bottom: 1rem;
   }
 
   .caption {
-    background-color: #f0f7ff;
-    border-left: 4px solid #4a90e2;
+    background-color: var(--color-primary-light);
+    border-left: 4px solid var(--color-primary);
     padding: 1rem;
     margin-bottom: 1rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-size: 0.95rem;
     line-height: 1.6;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .back-link {
     display: inline-block;
-    color: #4a90e2;
+    color: var(--color-primary);
     text-decoration: none;
     font-weight: 500;
   }
@@ -1001,33 +1001,33 @@
   }
 
   .summary-card {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-lg);
     padding: 1rem;
     text-align: center;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
   }
 
   .summary-card.confirmed {
-    border-color: #4a90e2;
-    background-color: #f0f7ff;
+    border-color: var(--color-primary);
+    background-color: var(--color-primary-light);
   }
 
   .summary-card.worked {
-    border-color: #66bb6a;
-    background-color: #f5fff5;
+    border-color: var(--color-success-light);
+    background-color: var(--color-success-bg);
   }
 
   .summary-card.unworked {
-    border-color: #ffa726;
-    background-color: #fff8f0;
+    border-color: var(--color-warning);
+    background-color: var(--color-warning-bg);
   }
 
   .summary-label {
     display: block;
     font-size: 0.875rem;
-    color: #666;
+    color: var(--text-secondary);
     margin-bottom: 0.25rem;
   }
 
@@ -1035,7 +1035,7 @@
     display: block;
     font-size: 1.5rem;
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .entities-list {
@@ -1045,31 +1045,31 @@
   }
 
   .entity-card {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-lg);
     padding: 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--shadow-sm);
     transition: all 0.2s;
   }
 
   .entity-card:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-md);
   }
 
   .entity-card.confirmed {
-    border-left: 4px solid #4a90e2;
+    border-left: 4px solid var(--color-primary);
   }
 
   .entity-card.worked {
-    border-left: 4px solid #ffa726;
+    border-left: 4px solid var(--color-warning);
   }
 
   .entity-card.unworked {
-    border-left: 4px solid #bdbdbd;
+    border-left: 4px solid var(--text-muted);
     opacity: 0.7;
   }
 
@@ -1080,14 +1080,14 @@
   .entity-name {
     font-size: 1.1rem;
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
     margin-bottom: 0.5rem;
   }
 
   .entity-id {
     font-size: 0.85rem;
     font-weight: 400;
-    color: #999;
+    color: var(--text-muted);
     margin-left: 0.5rem;
   }
 
@@ -1112,7 +1112,7 @@
   .band,
   .mode,
   .date {
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .entity-status {
@@ -1128,33 +1128,33 @@
   }
 
   .status-badge.confirmed {
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
     color: white;
   }
 
   .status-badge.worked {
-    background-color: #ffa726;
+    background-color: var(--color-warning);
     color: white;
   }
 
   .status-badge.unworked {
-    background-color: #e0e0e0;
-    color: #666;
+    background-color: var(--border-color);
+    color: var(--text-secondary);
   }
 
   .btn {
     display: inline-block;
     padding: 0.5rem 1rem;
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
     color: white;
     text-decoration: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-weight: 500;
     margin-top: 1rem;
   }
 
   .btn:hover {
-    background-color: #357abd;
+    background-color: var(--color-primary-hover);
   }
 
   /* QSO Detail Modal Styles */
@@ -1162,15 +1162,15 @@
     cursor: pointer;
     transition: background-color 0.2s;
     padding: 0.25rem 0.5rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
   }
 
   .qso-entry:hover {
-    background-color: #f0f7ff;
+    background-color: var(--color-primary-light);
   }
 
   .qso-entry:focus {
-    outline: 2px solid #4a90e2;
+    outline: 2px solid var(--color-primary);
     outline-offset: -2px;
   }
 
@@ -1191,13 +1191,13 @@
 
   /* Modal Content */
   .modal-content {
-    background: white;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border-radius: var(--border-radius-lg);
     max-width: 700px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-md);
   }
 
   /* Modal Header */
@@ -1206,13 +1206,13 @@
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .modal-header h2 {
     margin: 0;
     font-size: 1.5rem;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .modal-close {
@@ -1227,14 +1227,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #666;
-    border-radius: 4px;
+    color: var(--text-secondary);
+    border-radius: var(--border-radius);
     transition: all 0.2s;
   }
 
   .modal-close:hover {
-    background-color: #f0f0f0;
-    color: #333;
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
   }
 
   /* Modal Body */
@@ -1246,7 +1246,7 @@
   .loading-modal {
     text-align: center;
     padding: 3rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   /* Detail Sections */
@@ -1260,10 +1260,10 @@
 
   .qso-detail-section h3 {
     font-size: 1.1rem;
-    color: #4a90e2;
+    color: var(--color-primary);
     margin: 0 0 1rem 0;
     padding-bottom: 0.5rem;
-    border-bottom: 2px solid #e0e0e0;
+    border-bottom: 2px solid var(--border-color);
   }
 
   /* Detail Grid */
@@ -1281,14 +1281,14 @@
 
   .detail-label {
     font-size: 0.75rem;
-    color: #666;
+    color: var(--text-secondary);
     text-transform: uppercase;
     font-weight: 600;
   }
 
   .detail-value {
     font-size: 0.95rem;
-    color: #333;
+    color: var(--text-primary);
     font-weight: 500;
   }
 
@@ -1301,10 +1301,10 @@
 
   .confirmation-service h4 {
     font-size: 1rem;
-    color: #333;
+    color: var(--text-primary);
     margin: 0 0 1rem 0;
     padding-bottom: 0.5rem;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .confirmation-status-item {
@@ -1324,19 +1324,19 @@
   }
 
   .status-badge.confirmed {
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
     color: white;
   }
 
   .status-badge.not-confirmed,
   .status-badge.no-data {
-    background-color: #e0e0e0;
-    color: #666;
+    background-color: var(--border-color);
+    color: var(--text-secondary);
   }
 
   .status-badge.unknown {
-    background-color: #fff3cd;
-    color: #856404;
+    background-color: var(--badge-pending-bg);
+    color: var(--badge-pending-text);
   }
 
   /* Meta Info */
@@ -1344,18 +1344,18 @@
     display: flex;
     gap: 2rem;
     padding: 1rem;
-    background-color: #f8f9fa;
-    border-radius: 4px;
+    background-color: var(--bg-secondary);
+    border-radius: var(--border-radius);
     font-size: 0.8rem;
   }
 
   .meta-label {
-    color: #666;
+    color: var(--text-secondary);
     font-weight: 600;
   }
 
   .meta-value {
-    color: #333;
+    color: var(--text-primary);
     font-family: monospace;
   }
 
@@ -1365,16 +1365,16 @@
   }
 
   .modal-content::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: var(--bg-secondary);
   }
 
   .modal-content::-webkit-scrollbar-thumb {
-    background: #888;
+    background: var(--text-muted);
     border-radius: 4px;
   }
 
   .modal-content::-webkit-scrollbar-thumb:hover {
-    background: #555;
+    background: var(--text-secondary);
   }
 
   /* Mode Filter */
@@ -1384,44 +1384,44 @@
     gap: 1rem;
     margin-bottom: 1.5rem;
     padding: 1rem;
-    background-color: #f8f9fa;
-    border-radius: 8px;
-    border: 1px solid #e0e0e0;
+    background-color: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
+    border: 1px solid var(--border-color);
   }
 
   .mode-filter label {
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
     margin: 0;
   }
 
   .mode-filter select {
     padding: 0.5rem 2rem 0.5rem 1rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    background-color: white;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    background-color: var(--bg-input);
     font-size: 0.95rem;
-    color: #333;
+    color: var(--text-primary);
     cursor: pointer;
     min-width: 150px;
   }
 
   .mode-filter select:hover {
-    border-color: #4a90e2;
+    border-color: var(--color-primary);
   }
 
   .mode-filter select:focus {
     outline: none;
-    border-color: #4a90e2;
-    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+    border-color: var(--color-primary);
+    box-shadow: var(--focus-ring);
   }
 
   .clear-filter-btn {
     padding: 0.5rem 1rem;
-    background-color: #e0e0e0;
-    color: #333;
+    background-color: var(--border-color);
+    color: var(--text-primary);
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     font-size: 0.9rem;
     font-weight: 500;
@@ -1429,32 +1429,32 @@
   }
 
   .clear-filter-btn:hover {
-    background-color: #d0d0d0;
+    background-color: var(--border-color-light);
   }
 
   /* QSO Count Link */
   .qso-count-link {
     cursor: pointer;
-    color: #4a90e2;
+    color: var(--color-primary);
     font-weight: 500;
     text-decoration: none;
     padding: 0.25rem 0.5rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     transition: background-color 0.2s;
   }
 
   .qso-count-link:hover {
-    background-color: #f0f7ff;
+    background-color: var(--color-primary-light);
     text-decoration: underline;
   }
 
   .qso-count-link:focus {
-    outline: 2px solid #4a90e2;
+    outline: 2px solid var(--color-primary);
     outline-offset: -2px;
   }
 
   .no-qso {
-    color: #999;
+    color: var(--text-muted);
   }
 
   /* QSO List Modal */
@@ -1471,13 +1471,13 @@
   .qso-list-table td {
     padding: 0.75rem;
     text-align: left;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .qso-list-table th {
-    background-color: #f8f9fa;
+    background-color: var(--bg-secondary);
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
     font-size: 0.85rem;
     text-transform: uppercase;
   }
@@ -1488,17 +1488,17 @@
   }
 
   .qso-list-row:hover {
-    background-color: #f0f7ff;
+    background-color: var(--color-primary-light);
   }
 
   .qso-list-row:focus {
-    outline: 2px solid #4a90e2;
+    outline: 2px solid var(--color-primary);
     outline-offset: -2px;
   }
 
   .callsign-cell {
     font-family: monospace;
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
   }
 </style>
diff --git a/src/frontend/src/routes/qsos/+page.svelte b/src/frontend/src/routes/qsos/+page.svelte
index 7ecd508..035475f 100644
--- a/src/frontend/src/routes/qsos/+page.svelte
+++ b/src/frontend/src/routes/qsos/+page.svelte
@@ -899,22 +899,22 @@
 
   .header h1 {
     margin: 0;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .back-button {
     padding: 0.5rem 1rem;
-    background-color: #6c757d;
+    background-color: var(--color-secondary);
     color: white;
     text-decoration: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-size: 0.9rem;
     font-weight: 500;
     transition: background-color 0.2s;
   }
 
   .back-button:hover {
-    background-color: #5a6268;
+    background-color: var(--color-secondary-hover);
   }
 
   .header-buttons {
@@ -924,16 +924,16 @@
   }
 
   .filters {
-    background: #f8f9fa;
+    background: var(--bg-secondary);
     padding: 1rem;
-    border-radius: 8px;
+    border-radius: var(--border-radius-lg);
     margin-bottom: 2rem;
   }
 
   .filters h3 {
     margin: 0;
     font-size: 1rem;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .filters-header {
@@ -947,11 +947,11 @@
 
   .filter-count {
     font-size: 0.875rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .filter-count strong {
-    color: #4a90e2;
+    color: var(--color-primary);
     font-weight: 600;
   }
 
@@ -964,24 +964,28 @@
 
   .filter-row select {
     padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     font-size: 0.9rem;
+    background: var(--bg-input);
+    color: var(--text-primary);
   }
 
   .search-input {
     flex: 1;
     min-width: 200px;
     padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     font-size: 0.9rem;
+    background: var(--bg-input);
+    color: var(--text-primary);
   }
 
   .search-input:focus {
     outline: none;
-    border-color: #4a90e2;
-    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
+    border-color: var(--color-primary);
+    box-shadow: var(--focus-ring);
   }
 
   .checkbox-label {
@@ -994,7 +998,7 @@
   .btn {
     padding: 0.75rem 1.5rem;
     border: none;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-size: 1rem;
     font-weight: 500;
     cursor: pointer;
@@ -1002,12 +1006,12 @@
   }
 
   .btn-primary {
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
     color: white;
   }
 
   .btn-primary:hover:not(:disabled) {
-    background-color: #357abd;
+    background-color: var(--color-primary-hover);
   }
 
   .btn-primary:disabled {
@@ -1016,21 +1020,21 @@
   }
 
   .btn-secondary {
-    background-color: #6c757d;
+    background-color: var(--color-secondary);
     color: white;
   }
 
   .btn-secondary:hover {
-    background-color: #5a6268;
+    background-color: var(--color-secondary-hover);
   }
 
   .btn-danger {
-    background-color: #dc3545;
+    background-color: var(--color-error);
     color: white;
   }
 
   .btn-danger:hover:not(:disabled) {
-    background-color: #c82333;
+    background-color: var(--color-error-hover);
   }
 
   .btn-danger:disabled {
@@ -1043,14 +1047,14 @@
     font-size: 0.875rem;
     background: rgba(255, 255, 255, 0.3);
     border: 1px solid rgba(255, 255, 255, 0.5);
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     cursor: pointer;
     color: inherit;
   }
 
   .alert {
     padding: 1rem;
-    border-radius: 8px;
+    border-radius: var(--border-radius-lg);
     margin-bottom: 2rem;
     display: flex;
     flex-direction: column;
@@ -1058,21 +1062,21 @@
   }
 
   .alert-success {
-    background-color: #d4edda;
-    border: 1px solid #c3e6cb;
-    color: #155724;
+    background-color: var(--color-success-bg);
+    border: 1px solid var(--color-success);
+    color: var(--color-success);
   }
 
   .alert-error {
-    background-color: #f8d7da;
-    border: 1px solid #f5c6cb;
-    color: #721c24;
+    background-color: var(--color-error-bg);
+    border: 1px solid var(--color-error);
+    color: var(--color-error);
   }
 
   .alert-info {
-    background-color: #d1ecf1;
-    border: 1px solid #bee5eb;
-    color: #0c5460;
+    background-color: var(--color-info-bg);
+    border: 1px solid var(--color-info);
+    color: var(--color-info);
   }
 
   .alert h3 {
@@ -1090,11 +1094,13 @@
 
   .delete-input {
     padding: 0.5rem;
-    border: 1px solid #ddd;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
     font-size: 1rem;
     margin: 0.5rem 0;
     width: 200px;
+    background: var(--bg-input);
+    color: var(--text-primary);
   }
 
   .delete-buttons {
@@ -1105,8 +1111,8 @@
 
   .qso-table-container {
     overflow-x: auto;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-lg);
   }
 
   .qso-table {
@@ -1118,39 +1124,39 @@
   .qso-table td {
     padding: 0.75rem;
     text-align: left;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .qso-table th {
-    background-color: #f8f9fa;
+    background-color: var(--bg-secondary);
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .qso-table tr:hover {
-    background-color: #f8f9fa;
+    background-color: var(--bg-secondary);
   }
 
   .callsign {
     font-weight: 600;
-    color: #4a90e2;
+    color: var(--color-primary);
   }
 
   .badge {
     padding: 0.25rem 0.5rem;
-    border-radius: 4px;
+    border-radius: var(--border-radius);
     font-size: 0.75rem;
     font-weight: 600;
   }
 
   .badge-success {
-    background-color: #d4edda;
-    color: #155724;
+    background-color: var(--color-success-bg);
+    color: var(--color-success);
   }
 
   .badge-pending {
-    background-color: #fff3cd;
-    color: #856404;
+    background-color: var(--badge-pending-bg);
+    color: var(--badge-pending-text);
   }
 
   .confirmation-list {
@@ -1168,29 +1174,29 @@
   .service-type {
     font-size: 0.7rem;
     font-weight: 600;
-    color: #4a90e2;
+    color: var(--color-primary);
     text-transform: uppercase;
     letter-spacing: 0.5px;
   }
 
   .confirmation-date {
     font-size: 0.875rem;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .loading, .error, .empty {
     text-align: center;
     padding: 3rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .error {
-    color: #dc3545;
+    color: var(--color-error);
   }
 
   .showing {
     text-align: center;
-    color: #666;
+    color: var(--text-secondary);
     font-size: 0.875rem;
     margin-top: 1rem;
   }
@@ -1201,14 +1207,14 @@
     align-items: center;
     margin-top: 1.5rem;
     padding: 1rem;
-    background: #f8f9fa;
-    border-radius: 8px;
+    background: var(--bg-secondary);
+    border-radius: var(--border-radius-lg);
     flex-wrap: wrap;
     gap: 1rem;
   }
 
   .pagination-info {
-    color: #666;
+    color: var(--text-secondary);
     font-size: 0.9rem;
   }
 
@@ -1226,7 +1232,7 @@
 
   .page-ellipsis {
     padding: 0 0.5rem;
-    color: #666;
+    color: var(--text-secondary);
   }
 
   .btn-small {
@@ -1241,16 +1247,16 @@
   }
 
   .import-log {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-lg);
     padding: 1.5rem;
     margin-top: 1rem;
   }
 
   .import-log h3 {
     margin: 0 0 1rem 0;
-    color: #333;
+    color: var(--text-primary);
     font-size: 1.25rem;
   }
 
@@ -1264,15 +1270,15 @@
 
   .log-section h4 {
     margin: 0 0 0.75rem 0;
-    color: #555;
+    color: var(--text-secondary);
     font-size: 1rem;
     font-weight: 600;
   }
 
   .log-table-container {
     overflow-x: auto;
-    border: 1px solid #e0e0e0;
-    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
   }
 
   .log-table {
@@ -1285,13 +1291,13 @@
   .log-table td {
     padding: 0.5rem 0.75rem;
     text-align: left;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .log-table th {
-    background-color: #f8f9fa;
+    background-color: var(--bg-secondary);
     font-weight: 600;
-    color: #333;
+    color: var(--text-primary);
     font-size: 0.85rem;
   }
 
@@ -1300,12 +1306,12 @@
   }
 
   .log-table tr:hover {
-    background-color: #f8f9fa;
+    background-color: var(--bg-secondary);
   }
 
   .log-table .callsign {
     font-weight: 600;
-    color: #4a90e2;
+    color: var(--color-primary);
   }
 
   /* QSO Detail Modal Styles */
@@ -1315,11 +1321,11 @@
   }
 
   .qso-row:hover {
-    background-color: #f0f7ff !important;
+    background-color: var(--color-primary-light) !important;
   }
 
   .qso-row:focus {
-    outline: 2px solid #4a90e2;
+    outline: 2px solid var(--color-primary);
     outline-offset: -2px;
   }
 
@@ -1340,13 +1346,13 @@
 
   /* Modal Content */
   .modal-content {
-    background: white;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border-radius: var(--border-radius-lg);
     max-width: 700px;
     width: 100%;
     max-height: 90vh;
     overflow-y: auto;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    box-shadow: var(--shadow-md);
   }
 
   /* Modal Header */
@@ -1355,13 +1361,13 @@
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .modal-header h2 {
     margin: 0;
     font-size: 1.5rem;
-    color: #333;
+    color: var(--text-primary);
   }
 
   .modal-close {
@@ -1376,14 +1382,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #666;
-    border-radius: 4px;
+    color: var(--text-secondary);
+    border-radius: var(--border-radius);
     transition: all 0.2s;
   }
 
   .modal-close:hover {
-    background-color: #f0f0f0;
-    color: #333;
+    background-color: var(--bg-tertiary);
+    color: var(--text-primary);
   }
 
   /* Modal Body */
@@ -1402,10 +1408,10 @@
 
   .qso-detail-section h3 {
     font-size: 1.1rem;
-    color: #4a90e2;
+    color: var(--color-primary);
     margin: 0 0 1rem 0;
     padding-bottom: 0.5rem;
-    border-bottom: 2px solid #e0e0e0;
+    border-bottom: 2px solid var(--border-color);
   }
 
   /* Detail Grid */
@@ -1423,14 +1429,14 @@
 
   .detail-label {
     font-size: 0.75rem;
-    color: #666;
+    color: var(--text-secondary);
     text-transform: uppercase;
     font-weight: 600;
   }
 
   .detail-value {
     font-size: 0.95rem;
-    color: #333;
+    color: var(--text-primary);
     font-weight: 500;
   }
 
@@ -1443,10 +1449,10 @@
 
   .confirmation-service h4 {
     font-size: 1rem;
-    color: #333;
+    color: var(--text-primary);
     margin: 0 0 1rem 0;
     padding-bottom: 0.5rem;
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--border-color);
   }
 
   .confirmation-status-item {
@@ -1466,19 +1472,19 @@
   }
 
   .status-badge.confirmed {
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
     color: white;
   }
 
   .status-badge.not-confirmed,
   .status-badge.no-data {
-    background-color: #e0e0e0;
-    color: #666;
+    background-color: var(--border-color);
+    color: var(--text-secondary);
   }
 
   .status-badge.unknown {
-    background-color: #fff3cd;
-    color: #856404;
+    background-color: var(--badge-pending-bg);
+    color: var(--badge-pending-text);
   }
 
   /* Meta Info */
@@ -1486,18 +1492,18 @@
     display: flex;
     gap: 2rem;
     padding: 1rem;
-    background-color: #f8f9fa;
-    border-radius: 4px;
+    background-color: var(--bg-secondary);
+    border-radius: var(--border-radius);
     font-size: 0.8rem;
   }
 
   .meta-label {
-    color: #666;
+    color: var(--text-secondary);
     font-weight: 600;
   }
 
   .meta-value {
-    color: #333;
+    color: var(--text-primary);
     font-family: monospace;
   }
 
@@ -1507,15 +1513,15 @@
   }
 
   .modal-content::-webkit-scrollbar-track {
-    background: #f1f1f1;
+    background: var(--bg-secondary);
   }
 
   .modal-content::-webkit-scrollbar-thumb {
-    background: #888;
+    background: var(--text-muted);
     border-radius: 4px;
   }
 
   .modal-content::-webkit-scrollbar-thumb:hover {
-    background: #555;
+    background: var(--text-secondary);
   }
 </style>
diff --git a/src/frontend/src/routes/qsos/components/QSOStats.svelte b/src/frontend/src/routes/qsos/components/QSOStats.svelte
index 4529aa7..36b6f54 100644
--- a/src/frontend/src/routes/qsos/components/QSOStats.svelte
+++ b/src/frontend/src/routes/qsos/components/QSOStats.svelte
@@ -32,9 +32,9 @@
   }
 
   .stat-card {
-    background: white;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius-lg);
     padding: 1.5rem;
     text-align: center;
   }
@@ -42,11 +42,11 @@
   .stat-value {
     font-size: 2rem;
     font-weight: bold;
-    color: #4a90e2;
+    color: var(--color-primary);
   }
 
   .stat-label {
-    color: #666;
+    color: var(--text-secondary);
     margin-top: 0.5rem;
   }
 </style>
diff --git a/src/frontend/src/routes/qsos/components/SyncButton.svelte b/src/frontend/src/routes/qsos/components/SyncButton.svelte
index 3696382..868d631 100644
--- a/src/frontend/src/routes/qsos/components/SyncButton.svelte
+++ b/src/frontend/src/routes/qsos/components/SyncButton.svelte
@@ -23,11 +23,11 @@
 
 <style>
   .lotw-btn {
-    background-color: #4a90e2;
+    background-color: var(--color-primary);
   }
 
   .lotw-btn:hover:not(:disabled) {
-    background-color: #357abd;
+    background-color: var(--color-primary-hover);
   }
 
   .dcl-btn {