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>
2026-01-23 11:46:41 +01:00
parent d1e4c39ad6
commit 239963ed89
20 changed files with 1042 additions and 600 deletions
--- a/src/frontend/src/app.css
+++ 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);
+}
--- 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>
--- 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;
  }

--- 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>
--- 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>
--- a/src/frontend/src/lib/components/ThemeSwitcher.svelte
+++ 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>
--- a/src/frontend/src/lib/stores/theme.js
+++ 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();
--- 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 {
--- 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;
  }
--- 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;
--- 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;
  }

--- 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;
--- 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 {
--- 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 {
--- 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;
--- 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>
--- 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>
--- 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>
--- 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>
--- 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 {