diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 48b953cc..12cfc63e 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -90,18 +90,16 @@
 {:else}
     <div class="flex flex-col min-h-screen bg-bg-default dark:bg-dark-bg-default pt-16">
         <Header/>
-        <div class="flex-grow flex flex-col">
-            <ToastContainer/>
-            <main class="flex-grow">
-                {#if !authInitialized}
-                    <div class="flex items-center justify-center min-h-[50vh]">
-                        <Spinner size="large" />
-                    </div>
-                {:else}
-                    <Router base="/" {routes} />
-                {/if}
-            </main>
-        </div>
+        <ToastContainer/>
+        <main class="flex-grow">
+            {#if !authInitialized}
+                <div class="flex items-center justify-center min-h-[50vh]">
+                    <Spinner size="large" />
+                </div>
+            {:else}
+                <Router base="/" {routes} />
+            {/if}
+        </main>
         <Footer/>
     </div>
 {/if}
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 34dc3d44..3f0df861 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -52,6 +52,22 @@
 
   --color-code-bg: #0f172a;
 
+  /* Surface tokens for layered UI */
+  --color-surface-overlay: #ffffff;
+  --color-dark-surface-overlay: #1f2937;
+
+  /* Interactive states */
+  --color-interactive-hover: #f9fafb;
+  --color-dark-interactive-hover: #374151;
+
+  /* Skeleton/loading states */
+  --color-skeleton: #e5e7eb;
+  --color-dark-skeleton: #374151;
+
+  /* Tooltip */
+  --color-tooltip-bg: #111827;
+  --color-tooltip-fg: #ffffff;
+
   /* Font Families */
   --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   --font-mono: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
@@ -413,13 +429,6 @@
      Editor Component Styles
      ========================================================================== */
 
-  /* Bare input (no border/background) for inline editing */
-  .form-input-bare {
-    @apply bg-transparent border-0 focus:ring-0 w-full text-sm font-medium
-           text-fg-default dark:text-dark-fg-default
-           placeholder-fg-muted dark:placeholder-dark-fg-muted;
-  }
-
   /* Output container for code execution results */
   .output-container {
     @apply bg-bg-alt dark:bg-dark-bg-alt border border-border-default
@@ -440,7 +449,13 @@
   .output-pre,
   .custom-scrollbar {
     scrollbar-width: thin;
-    scrollbar-color: #9ca3af #e5e7eb; /* neutral-400 neutral-200 */
+    scrollbar-color: var(--color-fg-subtle) var(--color-skeleton);
+  }
+
+  :is(.dark .output-content),
+  :is(.dark .output-pre),
+  :is(.dark .custom-scrollbar) {
+    scrollbar-color: var(--color-dark-fg-subtle) var(--color-dark-skeleton);
   }
 
   .output-content::-webkit-scrollbar,
@@ -501,7 +516,7 @@
 
   /* Small input variant for admin tables */
   .input-sm {
-    @apply px-2 py-1 text-sm border border-gray-300 dark:border-gray-600
-           rounded bg-white dark:bg-gray-700 text-fg-default dark:text-dark-fg-default;
+    @apply px-2 py-1 text-sm border border-border-input dark:border-dark-border-input
+           rounded bg-surface-overlay dark:bg-dark-surface-overlay text-fg-default dark:text-dark-fg-default;
   }
 }
diff --git a/frontend/src/components/ErrorDisplay.svelte b/frontend/src/components/ErrorDisplay.svelte
index 964d38f3..fe9da4ab 100644
--- a/frontend/src/components/ErrorDisplay.svelte
+++ b/frontend/src/components/ErrorDisplay.svelte
@@ -59,7 +59,7 @@
       </button>
       <button
         onclick={goHome}
-        class="flex-1 btn py-2.5 text-sm font-medium bg-bg-default dark:bg-dark-bg-default border border-border-default dark:border-dark-border-default text-fg-default dark:text-dark-fg-default hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        class="flex-1 btn py-2.5 text-sm font-medium bg-bg-default dark:bg-dark-bg-default border border-border-default dark:border-dark-border-default text-fg-default dark:text-dark-fg-default hover:bg-interactive-hover dark:hover:bg-dark-interactive-hover transition-colors"
       >
         Go to Home
       </button>
diff --git a/frontend/src/components/Footer.svelte b/frontend/src/components/Footer.svelte
index f71c0769..f74c6de4 100644
--- a/frontend/src/components/Footer.svelte
+++ b/frontend/src/components/Footer.svelte
@@ -4,8 +4,8 @@
     const githubIcon = `<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/></svg>`;
 </script>
 
-<footer class="relative z-30 bg-bg-alt dark:bg-dark-bg-alt border-t border-border-default dark:border-dark-border-default">
-    <div class="app-container py-12">
+<footer class="relative z-30 mt-8 pt-8 pb-6 bg-bg-alt dark:bg-dark-bg-alt border-t border-border-default dark:border-dark-border-default">
+    <div class="app-container py-6">
 
         <div class="grid grid-cols-1 md:grid-cols-12 gap-8 mb-8">
 
diff --git a/frontend/src/components/NotificationCenter.svelte b/frontend/src/components/NotificationCenter.svelte
index 5d5a64d5..2072b189 100644
--- a/frontend/src/components/NotificationCenter.svelte
+++ b/frontend/src/components/NotificationCenter.svelte
@@ -31,7 +31,7 @@
     }
     
     const priorityColors = {
-        low: 'text-gray-600 dark:text-gray-400',
+        low: 'text-fg-muted dark:text-dark-fg-muted',
         medium: 'text-blue-600 dark:text-blue-400',
         high: 'text-orange-600 dark:text-orange-400',
         urgent: 'text-red-600 dark:text-red-400'
@@ -212,7 +212,7 @@
     }
 </script>
 
-<div class="relative">
+<div class="relative z-40">
     <button
         onclick={toggleDropdown}
         class="btn btn-ghost btn-icon relative"
@@ -228,10 +228,10 @@
     
     {#if showDropdown}
         <div
-            class="absolute right-0 mt-2 w-96 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50"
+            class="absolute right-0 mt-2 w-96 bg-surface-overlay dark:bg-dark-surface-overlay rounded-lg shadow-lg border border-border-default dark:border-dark-border-default z-50"
             transition:fly={{ y: -10, duration: 200 }}
         >
-            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+            <div class="p-4 border-b border-border-default dark:border-dark-border-default">
                 <div class="flex justify-between items-center">
                     <h3 class="font-semibold text-lg">Notifications</h3>
                     {#if $unreadCount > 0}
@@ -251,13 +251,13 @@
                         <span class="loading loading-spinner loading-sm"></span>
                     </div>
                 {:else if $notifications.length === 0}
-                    <div class="p-8 text-center text-gray-500">
+                    <div class="p-8 text-center text-fg-muted dark:text-dark-fg-muted">
                         No notifications yet
                     </div>
                 {:else}
                     {#each $notifications as notification}
                         <div
-                            class="p-4 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+                            class="p-4 border-b border-border-default/50 dark:border-dark-border-default hover:bg-interactive-hover dark:hover:bg-dark-interactive-hover cursor-pointer transition-colors"
                             class:bg-blue-50={notification.status !== 'read'}
                             class:dark:bg-blue-900={notification.status !== 'read'}
                             onclick={() => {
@@ -297,10 +297,10 @@
                                     <p class="font-medium text-sm">
                                         {notification.subject}
                                     </p>
-                                    <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                                    <p class="text-sm text-fg-muted dark:text-dark-fg-muted mt-1">
                                         {notification.body}
                                     </p>
-                                    <p class="text-xs text-gray-500 dark:text-gray-500 mt-2">
+                                    <p class="text-xs text-fg-subtle dark:text-dark-fg-subtle mt-2">
                                         {formatTime(notification.created_at)}
                                     </p>
                                 </div>
@@ -313,7 +313,7 @@
                 {/if}
             </div>
             
-            <div class="p-3 border-t border-gray-200 dark:border-gray-700">
+            <div class="p-3 border-t border-border-default dark:border-dark-border-default">
                 <button
                     onclick={() => {
                         showDropdown = false;
@@ -327,10 +327,3 @@
         </div>
     {/if}
 </div>
-
-<style>
-    /* Ensure dropdown is above other content */
-    .relative {
-        z-index: 40;
-    }
-</style>
diff --git a/frontend/src/components/Spinner.svelte b/frontend/src/components/Spinner.svelte
index 81337b36..2dabee59 100644
--- a/frontend/src/components/Spinner.svelte
+++ b/frontend/src/components/Spinner.svelte
@@ -16,7 +16,7 @@
     primary: 'text-primary dark:text-primary-light',
     white: 'text-white',
     current: 'text-current',
-    muted: 'text-gray-400 dark:text-gray-500'
+    muted: 'text-fg-subtle dark:text-dark-fg-subtle'
   };
 
   let sizeClass = $derived(sizeClasses[size] || sizeClasses.medium);
diff --git a/frontend/src/components/ToastContainer.svelte b/frontend/src/components/ToastContainer.svelte
index 677f338f..a09fc119 100644
--- a/frontend/src/components/ToastContainer.svelte
+++ b/frontend/src/components/ToastContainer.svelte
@@ -64,7 +64,7 @@
     });
 
     function getToastClasses(type: ToastType): string {
-        const base = "toast";
+        const base = "toast-item";
         switch (type) {
             case 'success':
                 return `${base} bg-green-50 border-green-200 text-green-800 dark:bg-green-950 dark:border-green-800 dark:text-green-200`;
@@ -101,7 +101,7 @@
     }
 
     function getTimerClasses(type: ToastType): string {
-        const base = "timer";
+        const base = "toast-timer";
         switch (type) {
             case 'success': return `${base} bg-green-300 dark:bg-green-600`;
             case 'error':   return `${base} bg-red-300 dark:bg-red-600`;
@@ -112,7 +112,7 @@
     }
 </script>
 
-<div class="toasts-container">
+<div class="toast-container">
     {#each toastList as toast (toast.id)}
         <div
              role="alert"
@@ -149,47 +149,4 @@
             {/if}
         </div>
     {/each}
-</div>
-
-<style>
-    .toasts-container {
-        position: fixed;
-        top: 5rem;
-        right: 1.5rem;
-        z-index: 100;
-        width: 100%;
-        max-width: 24rem;
-        pointer-events: none;
-    }
-
-    .toast {
-        position: relative;
-        display: flex;
-        align-items: flex-start;
-        padding: 1rem;
-        margin-bottom: 0.75rem;
-        border-radius: 0.5rem;
-        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-        overflow: hidden;
-        pointer-events: auto;
-        border-width: 1px;
-    }
-
-     .timer {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 3px;
-        transform-origin: left;
-        transition: transform 0.1s linear;
-     }
-
-    @media (max-width: 640px) {
-        .toasts-container {
-            top: 4.5rem;
-            left: 1rem;
-            right: 1rem;
-            max-width: none;
-        }
-    }
-</style>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/frontend/src/components/__tests__/NotificationCenter.test.ts b/frontend/src/components/__tests__/NotificationCenter.test.ts
index 3b8d0cc9..e4e007f8 100644
--- a/frontend/src/components/__tests__/NotificationCenter.test.ts
+++ b/frontend/src/components/__tests__/NotificationCenter.test.ts
@@ -211,7 +211,7 @@ const iconTestCases = [
 ];
 
 const priorityTestCases = [
-  { severity: 'low' as const, css: '.text-gray-600' },
+  { severity: 'low' as const, css: '.text-fg-muted' },
   { severity: 'medium' as const, css: '.text-blue-600' },
   { severity: 'high' as const, css: '.text-orange-600' },
   { severity: 'urgent' as const, css: '.text-red-600' },
diff --git a/frontend/src/components/__tests__/Spinner.test.ts b/frontend/src/components/__tests__/Spinner.test.ts
index 3418df8a..f871f075 100644
--- a/frontend/src/components/__tests__/Spinner.test.ts
+++ b/frontend/src/components/__tests__/Spinner.test.ts
@@ -42,7 +42,7 @@ describe('Spinner', () => {
       { color: 'primary', expectedClass: 'text-primary' },
       { color: 'white', expectedClass: 'text-white' },
       { color: 'current', expectedClass: 'text-current' },
-      { color: 'muted', expectedClass: 'text-gray-400' },
+      { color: 'muted', expectedClass: 'text-fg-subtle' },
     ] as const)('applies $expectedClass for color="$color"', ({ color, expectedClass }) => {
       render(Spinner, { props: { color } });
       expect(getSpinner().classList.contains(expectedClass)).toBe(true);
diff --git a/frontend/src/components/__tests__/ToastContainer.test.ts b/frontend/src/components/__tests__/ToastContainer.test.ts
index 8f9cedfe..351c0412 100644
--- a/frontend/src/components/__tests__/ToastContainer.test.ts
+++ b/frontend/src/components/__tests__/ToastContainer.test.ts
@@ -20,7 +20,7 @@ describe('ToastContainer', () => {
   describe('rendering', () => {
     it('renders empty container when no toasts', () => {
       const { container } = render(ToastContainer);
-      const toastContainer = container.querySelector('.toasts-container');
+      const toastContainer = container.querySelector('.toast-container');
       expect(toastContainer).toBeInTheDocument();
       expect(toastContainer?.children.length).toBe(0);
     });
@@ -83,11 +83,11 @@ describe('ToastContainer', () => {
       addToast('Timed toast', 'info');
 
       await waitFor(() => {
-        const timer = screen.getByRole('alert').querySelector('.timer');
+        const timer = screen.getByRole('alert').querySelector('.toast-timer');
         expect(timer).toBeInTheDocument();
       });
 
-      const timer = screen.getByRole('alert').querySelector('.timer') as HTMLElement;
+      const timer = screen.getByRole('alert').querySelector('.toast-timer') as HTMLElement;
       await vi.advanceTimersByTimeAsync(1000);
 
       await waitFor(() => { expect(timer.style.transform).toContain('scaleX'); });
@@ -194,8 +194,8 @@ describe('ToastContainer', () => {
 
       // Both toasts should have progress bars
       const alerts = screen.getAllByRole('alert');
-      expect(alerts[0].querySelector('.timer')).toBeInTheDocument();
-      expect(alerts[1].querySelector('.timer')).toBeInTheDocument();
+      expect(alerts[0].querySelector('.toast-timer')).toBeInTheDocument();
+      expect(alerts[1].querySelector('.toast-timer')).toBeInTheDocument();
     });
 
     it('cleans up timers on unmount', async () => {
diff --git a/frontend/src/routes/Editor.svelte b/frontend/src/routes/Editor.svelte
index e85562e1..60254f26 100644
--- a/frontend/src/routes/Editor.svelte
+++ b/frontend/src/routes/Editor.svelte
@@ -807,7 +807,7 @@
 <input type="file" accept=".py,text/x-python" bind:this={fileInput} class="hidden" onchange={handleFileUpload}/>
 
 <div class="editor-grid-container space-y-4 md:space-y-0 md:gap-6" in:fade={{ duration: 300 }}>
-    <header class="editor-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+    <div class="editor-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
         <h2 class="text-xl sm:text-2xl font-semibold text-fg-default dark:text-dark-fg-default whitespace-nowrap">
             Code Editor
         </h2>
@@ -846,7 +846,7 @@
         {:else if apiError && !k8sLimits}
             <p class="text-xs text-red-600 dark:text-red-400">{apiError}</p>
         {/if}
-    </header>
+    </div>
 
     <div class="editor-main-code flex flex-col rounded-lg overflow-hidden shadow-md border border-border-default dark:border-dark-border-default">
         <div class="editor-toolbar flex items-center justify-between px-3 py-1 bg-bg-default dark:bg-dark-bg-default border-b border-border-default dark:border-dark-border-default shrink-0">
diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
index dfc8dbe0..0ee845ab 100644
--- a/frontend/src/routes/Home.svelte
+++ b/frontend/src/routes/Home.svelte
@@ -22,10 +22,10 @@
 </script>
 
 {#if ready}
-<div class="overflow-x-hidden">
+<div>
 
   <!-- HERO SECTION - Enhanced responsiveness -->
-  <section class="hero-section relative isolate bg-bg-default dark:bg-dark-bg-default min-h-[80vh] flex items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-20">
+  <section class="hero-section relative isolate overflow-x-clip bg-bg-default dark:bg-dark-bg-default min-h-[80vh] flex items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-20">
      <div class="relative z-10 text-center w-full -mt-4 sm:-mt-6">
         <div class="hero-animate-flyIn" style="--fly-y: -20px; --fly-delay: 100ms;">
              <h1 class="mx-auto max-w-full xl:max-w-7xl text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight text-fg-default dark:text-dark-fg-default leading-tight! px-2 sm:px-4">
diff --git a/frontend/src/routes/Notifications.svelte b/frontend/src/routes/Notifications.svelte
index 4525179b..25ccab97 100644
--- a/frontend/src/routes/Notifications.svelte
+++ b/frontend/src/routes/Notifications.svelte
@@ -108,7 +108,7 @@
 
     // New unified notification rendering: derive icons from tags and colors from severity
     const severityColors: Record<string, string> = {
-        low: 'text-gray-600 dark:text-gray-400',
+        low: 'text-fg-muted dark:text-dark-fg-muted',
         medium: 'text-blue-600 dark:text-blue-400',
         high: 'text-orange-600 dark:text-orange-400',
         urgent: 'text-red-600 dark:text-red-400'
@@ -274,10 +274,3 @@
         {/if}
     </div>
 </div>
-
-<style>
-    /* Ensure dropdown is above other content */
-    .relative {
-        z-index: 40;
-    }
-</style>
diff --git a/frontend/src/routes/admin/AdminEvents.svelte b/frontend/src/routes/admin/AdminEvents.svelte
index c1034ec3..c623973c 100644
--- a/frontend/src/routes/admin/AdminEvents.svelte
+++ b/frontend/src/routes/admin/AdminEvents.svelte
@@ -218,7 +218,7 @@
         if (eventType.includes('.requested')) return 'text-purple-600 dark:text-purple-400';
         if (eventType.includes('.created')) return 'text-indigo-600 dark:text-indigo-400';
         if (eventType.includes('.terminated')) return 'text-orange-600 dark:text-orange-400';
-        return 'text-gray-600 dark:text-gray-400';
+        return 'text-neutral-600 dark:text-neutral-400';
     }
 
     function getEventTypeLabel(eventType: string): string {
@@ -322,17 +322,17 @@
                     </button>
 
                     {#if showExportMenu}
-                        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
+                        <div class="absolute right-0 mt-2 w-48 bg-surface-overlay dark:bg-dark-surface-overlay rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 z-50">
                             <button
                                 onclick={() => { exportEvents('csv'); showExportMenu = false; }}
-                                class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 rounded-t-lg transition-colors"
+                                class="w-full px-4 py-2 text-left hover:bg-interactive-hover dark:hover:bg-dark-interactive-hover flex items-center gap-2 rounded-t-lg transition-colors"
                             >
                                 <FileText size={16} class="text-green-600 dark:text-green-400" />
                                 <span>Export as CSV</span>
                             </button>
                             <button
                                 onclick={() => { exportEvents('json'); showExportMenu = false; }}
-                                class="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 rounded-b-lg transition-colors"
+                                class="w-full px-4 py-2 text-left hover:bg-interactive-hover dark:hover:bg-dark-interactive-hover flex items-center gap-2 rounded-b-lg transition-colors"
                             >
                                 <Code size={16} class="text-blue-600 dark:text-blue-400" />
                                 <span>Export as JSON</span>
@@ -401,7 +401,7 @@
                             <div class="mt-2 space-y-1">
                                 {#each activeReplaySession.failed_event_errors as error}
                                     <div class="p-2 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded text-xs">
-                                        <div class="font-mono text-gray-600 dark:text-gray-400">{error.event_id}</div>
+                                        <div class="font-mono text-neutral-600 dark:text-neutral-400">{error.event_id}</div>
                                         <div class="text-red-700 dark:text-red-300 mt-1">{error.error}</div>
                                     </div>
                                 {/each}
@@ -415,10 +415,10 @@
                         <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-2">Execution Results:</h4>
                         <div class="space-y-2">
                             {#each activeReplaySession.execution_results as result}
-                                <div class="bg-white dark:bg-gray-800 rounded p-2 text-sm">
+                                <div class="bg-surface-overlay dark:bg-dark-surface-overlay rounded p-2 text-sm">
                                     <div class="flex justify-between items-start">
                                         <div>
-                                            <span class="font-mono text-xs text-gray-500">{result.execution_id}</span>
+                                            <span class="font-mono text-xs text-neutral-500">{result.execution_id}</span>
                                             <div class="flex items-center gap-2 mt-1">
                                                 <span class={`px-2 py-0.5 rounded text-xs ${
                                                     result.status === 'completed' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
@@ -428,7 +428,7 @@
                                                     {result.status}
                                                 </span>
                                                 {#if result.execution_time}
-                                                    <span class="text-gray-500 dark:text-gray-400">
+                                                    <span class="text-neutral-500 dark:text-neutral-400">
                                                         {result.execution_time.toFixed(2)}s
                                                     </span>
                                                 {/if}
@@ -683,13 +683,13 @@
                                                 <EventTypeIcon eventType={event.event_type} />
                                             </span>
                                             <!-- Tooltip on hover -->
-                                            <div class="absolute z-10 invisible group-hover:visible bg-gray-900 text-white text-xs rounded py-1 px-2 left-0 top-8 min-w-max">
+                                            <div class="absolute z-10 invisible group-hover:visible bg-tooltip-bg text-white text-xs rounded py-1 px-2 left-0 top-8 min-w-max">
                                                 <div class="font-medium">{event.event_type}</div>
-                                                <div class="text-gray-400 text-[10px] font-mono mt-0.5">
+                                                <div class="text-neutral-400 text-[10px] font-mono mt-0.5">
                                                     {event.event_id.slice(0, 8)}...
                                                 </div>
                                                 <!-- Tooltip arrow -->
-                                                <div class="absolute -top-1 left-2 w-2 h-2 bg-gray-900 transform rotate-45"></div>
+                                                <div class="absolute -top-1 left-2 w-2 h-2 bg-tooltip-bg transform rotate-45"></div>
                                             </div>
                                         </div>
                                     </td>
@@ -717,21 +717,21 @@
                                         <div class="flex gap-1 justify-center">
                                             <button
                                                 onclick={(e) => { e.stopPropagation(); replayEvent(event.event_id); }}
-                                                class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+                                                class="p-1 hover:bg-interactive-hover dark:hover:bg-dark-interactive-hover rounded"
                                                 title="Preview replay"
                                             >
                                                 <Eye size={16} />
                                             </button>
                                             <button
                                                 onclick={(e) => { e.stopPropagation(); replayEvent(event.event_id, false); }}
-                                                class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-blue-600 dark:text-blue-400"
+                                                class="p-1 hover:bg-interactive-hover dark:hover:bg-dark-interactive-hover rounded text-blue-600 dark:text-blue-400"
                                                 title="Replay"
                                             >
                                                 <Play size={16} />
                                             </button>
                                             <button
                                                 onclick={(e) => { e.stopPropagation(); deleteEvent(event.event_id); }}
-                                                class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-red-600 dark:text-red-400"
+                                                class="p-1 hover:bg-interactive-hover dark:hover:bg-dark-interactive-hover rounded text-red-600 dark:text-red-400"
                                                 title="Delete"
                                             >
                                                 <Trash2 size={16} />
@@ -763,12 +763,12 @@
                                                 <EventTypeIcon eventType={event.event_type} />
                                             </span>
                                             <!-- Mobile tooltip -->
-                                            <div class="absolute z-10 invisible group-hover:visible bg-gray-900 text-white text-xs rounded py-1 px-2 left-0 top-7 min-w-max">
+                                            <div class="absolute z-10 invisible group-hover:visible bg-tooltip-bg text-white text-xs rounded py-1 px-2 left-0 top-7 min-w-max">
                                                 <div class="font-medium">{event.event_type}</div>
-                                                <div class="text-gray-400 text-[10px] font-mono mt-0.5">
+                                                <div class="text-neutral-400 text-[10px] font-mono mt-0.5">
                                                     {event.event_id.slice(0, 8)}...
                                                 </div>
-                                                <div class="absolute -top-1 left-2 w-2 h-2 bg-gray-900 transform rotate-45"></div>
+                                                <div class="absolute -top-1 left-2 w-2 h-2 bg-tooltip-bg transform rotate-45"></div>
                                             </div>
                                         </div>
                                         <div class="text-sm text-fg-muted dark:text-dark-fg-muted">
@@ -851,7 +851,7 @@
                                         id="events-page-size"
                                         bind:value={pageSize}
                                         onchange={() => { currentPage = 1; loadEvents(); }}
-                                        class="px-3 py-1.5 pr-8 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 appearance-none cursor-pointer"
+                                        class="px-3 py-1.5 pr-8 rounded-lg border border-neutral-300 dark:border-neutral-600 bg-surface-overlay dark:bg-dark-surface-overlay text-neutral-900 dark:text-neutral-100 text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 appearance-none cursor-pointer"
                                         style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22none%22 viewBox=%220 0 20 20%22><path stroke=%22%236b7280%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 stroke-width=%221.5%22 d=%22M6 8l4 4 4-4%22/></svg>'); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 16px;"
                                     >
                                         <option value={10}>10</option>
@@ -1018,7 +1018,7 @@
     <!-- Replay Preview Modal -->
     <Modal open={showReplayPreview && !!replayPreview} title="Replay Preview" onClose={() => { showReplayPreview = false; replayPreview = null; }} size="md">
         {#if replayPreview}
-            <p class="text-sm text-gray-500 dark:text-gray-400 -mt-2 mb-4">
+            <p class="text-sm text-neutral-500 dark:text-neutral-400 -mt-2 mb-4">
                 Review the events that will be replayed
             </p>
 
@@ -1035,18 +1035,18 @@
 
             {#if replayPreview.events_preview && replayPreview.events_preview.length > 0}
                 <div class="space-y-3">
-                    <h3 class="font-medium text-gray-900 dark:text-white mb-2">Events to Replay:</h3>
+                    <h3 class="font-medium text-fg-default dark:text-dark-fg-default mb-2">Events to Replay:</h3>
                     {#each replayPreview.events_preview as event}
-                        <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
+                        <div class="bg-neutral-50 dark:bg-neutral-800 rounded-lg p-3">
                             <div class="flex justify-between items-start">
                                 <div>
-                                    <div class="font-mono text-xs text-gray-500 dark:text-gray-400 mb-1">{event.event_id}</div>
-                                    <div class="font-medium text-gray-900 dark:text-white">{event.event_type}</div>
+                                    <div class="font-mono text-xs text-neutral-500 dark:text-neutral-400 mb-1">{event.event_id}</div>
+                                    <div class="font-medium text-fg-default dark:text-dark-fg-default">{event.event_type}</div>
                                     {#if event.aggregate_id}
-                                        <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">Aggregate: {event.aggregate_id}</div>
+                                        <div class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">Aggregate: {event.aggregate_id}</div>
                                     {/if}
                                 </div>
-                                <div class="text-sm text-gray-500 dark:text-gray-400">{formatTimestamp(event.timestamp)}</div>
+                                <div class="text-sm text-neutral-500 dark:text-neutral-400">{formatTimestamp(event.timestamp)}</div>
                             </div>
                         </div>
                     {/each}
@@ -1133,9 +1133,9 @@
                             <div class="text-xs text-yellow-700 dark:text-yellow-300">Timeout</div>
                             <div class="text-xl font-semibold text-yellow-800 dark:text-yellow-200">{userOverview.derived_counts.timeout}</div>
                         </div>
-                        <div class="p-3 rounded-lg bg-gray-100 dark:bg-gray-800">
-                            <div class="text-xs text-gray-700 dark:text-gray-300">Cancelled</div>
-                            <div class="text-xl font-semibold text-gray-900 dark:text-gray-100">{userOverview.derived_counts.cancelled}</div>
+                        <div class="p-3 rounded-lg bg-neutral-100 dark:bg-neutral-800">
+                            <div class="text-xs text-neutral-700 dark:text-neutral-300">Cancelled</div>
+                            <div class="text-xl font-semibold text-neutral-900 dark:text-neutral-100">{userOverview.derived_counts.cancelled}</div>
                         </div>
                     </div>
                     <div class="mt-3 text-sm text-fg-muted dark:text-dark-fg-muted">
diff --git a/frontend/src/routes/admin/AdminSagas.svelte b/frontend/src/routes/admin/AdminSagas.svelte
index 0dd94792..9ad62484 100644
--- a/frontend/src/routes/admin/AdminSagas.svelte
+++ b/frontend/src/routes/admin/AdminSagas.svelte
@@ -32,7 +32,7 @@
     let totalItems = $state(0);
 
     const sagaStates: Record<string, { label: string; color: string; bgColor: string; icon: typeof CheckCircle }> = {
-        created: { label: 'Created', color: 'badge-neutral', bgColor: 'bg-gray-50 dark:bg-gray-900/20', icon: Plus },
+        created: { label: 'Created', color: 'badge-neutral', bgColor: 'bg-neutral-50 dark:bg-neutral-900/20', icon: Plus },
         running: { label: 'Running', color: 'badge-info', bgColor: 'bg-blue-50 dark:bg-blue-900/20', icon: Loader },
         compensating: { label: 'Compensating', color: 'badge-warning', bgColor: 'bg-yellow-50 dark:bg-yellow-900/20', icon: AlertTriangle },
         completed: { label: 'Completed', color: 'badge-success', bgColor: 'bg-green-50 dark:bg-green-900/20', icon: CheckCircle },
@@ -84,7 +84,7 @@
     }
 
     function getStateInfo(state: SagaState | string) {
-        return sagaStates[state as SagaState] || { label: state, color: 'badge-neutral', bgColor: 'bg-gray-50', icon: Plus };
+        return sagaStates[state as SagaState] || { label: state, color: 'badge-neutral', bgColor: 'bg-neutral-50', icon: Plus };
     }
 
     function getProgressPercentage(saga: SagaStatusResponse): number {
@@ -359,7 +359,7 @@
             <h3 class="font-semibold mb-3">Execution Steps</h3>
 
             {#if selectedSaga.saga_name === 'execution_saga'}
-                <div class="mb-4 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg overflow-x-auto">
+                <div class="mb-4 p-4 bg-neutral-50 dark:bg-neutral-700/50 rounded-lg overflow-x-auto">
                     <div class="flex items-start justify-between gap-0 min-w-[600px] pb-2">
                         {#each executionSagaSteps as step, index}
                             {@const isCompleted = selectedSaga.completed_steps.includes(step.name)}
@@ -371,7 +371,7 @@
                                 <div class="flex items-center w-full relative h-12">
                                     <div class="flex-1 flex items-center justify-end">
                                         {#if index > 0}
-                                            <div class="h-0.5 w-full {selectedSaga.completed_steps.includes(executionSagaSteps[index - 1].name) && (isCompleted || isCompensated) ? 'bg-green-400' : 'bg-gray-300 dark:bg-gray-600'}"></div>
+                                            <div class="h-0.5 w-full {selectedSaga.completed_steps.includes(executionSagaSteps[index - 1].name) && (isCompleted || isCompensated) ? 'bg-green-400' : 'bg-neutral-300 dark:bg-neutral-600'}"></div>
                                         {/if}
                                     </div>
                                     <div class="relative z-10 mx-1">
@@ -380,7 +380,7 @@
                                              isCompensated ? 'bg-yellow-100 text-yellow-600 border-yellow-300' :
                                              isCurrent ? 'bg-blue-100 text-blue-600 border-blue-300 animate-pulse' :
                                              isFailed ? 'bg-red-100 text-red-600 border-red-300' :
-                                             'bg-gray-100 text-gray-400 border-gray-300 dark:bg-gray-800'}">
+                                             'bg-neutral-100 text-neutral-400 border-neutral-300 dark:bg-neutral-800'}">
                                             {#if isCompleted}<Check class="w-5 h-5" />
                                             {:else if isCompensated}<Undo2 class="w-4 h-4" />
                                             {:else if isCurrent}<div class="w-2 h-2 bg-current rounded-full"></div>
@@ -390,7 +390,7 @@
                                     </div>
                                     <div class="flex-1 flex items-center justify-start">
                                         {#if index < executionSagaSteps.length - 1}
-                                            <div class="h-0.5 w-full {isCompleted && selectedSaga.completed_steps.includes(executionSagaSteps[index + 1].name) ? 'bg-green-400' : 'bg-gray-300 dark:bg-gray-600'}"></div>
+                                            <div class="h-0.5 w-full {isCompleted && selectedSaga.completed_steps.includes(executionSagaSteps[index + 1].name) ? 'bg-green-400' : 'bg-neutral-300 dark:bg-neutral-600'}"></div>
                                         {/if}
                                     </div>
                                 </div>
@@ -434,7 +434,7 @@
         {#if selectedSaga.context_data && Object.keys(selectedSaga.context_data).length > 0}
             <div class="mt-6">
                 <h3 class="font-semibold mb-3">Context Data</h3>
-                <div class="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
+                <div class="p-4 bg-neutral-50 dark:bg-neutral-700/50 rounded-lg">
                     <pre class="text-sm overflow-x-auto">{JSON.stringify(selectedSaga.context_data, null, 2)}</pre>
                 </div>
             </div>
diff --git a/frontend/src/routes/admin/AdminUsers.svelte b/frontend/src/routes/admin/AdminUsers.svelte
index 95761d27..0fa1e74b 100644
--- a/frontend/src/routes/admin/AdminUsers.svelte
+++ b/frontend/src/routes/admin/AdminUsers.svelte
@@ -136,7 +136,7 @@
         sse: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
         websocket: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
         auth: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
-        api: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200',
+        api: 'bg-neutral-100 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-200',
         public: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200'
     };
 
@@ -453,7 +453,7 @@
         {:else if rateLimitConfig}
             <div class="space-y-4">
                 <!-- Quick Settings -->
-                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 bg-gray-50 dark:bg-gray-900">
+                <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg p-4 bg-neutral-50 dark:bg-neutral-900">
                     <div class="flex items-center justify-between mb-3">
                         <h4 class="font-semibold text-fg-default dark:text-dark-fg-default">Quick Settings</h4>
                         <label class="flex items-center gap-2">
@@ -466,7 +466,7 @@
                             <label for="global-multiplier" class="block text-sm font-medium mb-1 text-fg-default dark:text-dark-fg-default">Global Multiplier</label>
                             <input id="global-multiplier" type="number" bind:value={rateLimitConfig.global_multiplier} min="0.01" step="0.1"
                                 class="input w-full" disabled={rateLimitConfig.bypass_rate_limit} />
-                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Multiplies all limits (1.0 = default, 2.0 = double)</p>
+                            <p class="text-xs text-neutral-500 dark:text-neutral-400 mt-1">Multiplies all limits (1.0 = default, 2.0 = double)</p>
                         </div>
                         <div>
                             <label for="admin-notes" class="block text-sm font-medium mb-1 text-fg-default dark:text-dark-fg-default">Admin Notes</label>
@@ -476,7 +476,7 @@
                 </div>
 
                 <!-- Endpoint-Specific Limits -->
-                <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg p-4">
                     <div class="flex justify-between items-center mb-4">
                         <h4 class="font-semibold text-fg-default dark:text-dark-fg-default">Endpoint Rate Limits</h4>
                         <button onclick={() => addNewRule()} class="btn btn-sm btn-primary flex items-center gap-1" disabled={rateLimitConfig.bypass_rate_limit}>
@@ -486,30 +486,30 @@
 
                     <!-- Default Rules -->
                     <div class="mb-4">
-                        <h5 class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Default Global Rules</h5>
+                        <h5 class="text-xs sm:text-sm font-medium text-neutral-600 dark:text-neutral-400 mb-2">Default Global Rules</h5>
                         <div class="space-y-2">
                             {#each defaultRulesWithEffective || [] as rule}
-                                <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900 rounded-lg">
+                                <div class="flex items-center justify-between p-3 bg-neutral-50 dark:bg-neutral-900 rounded-lg">
                                     <div class="flex-1 grid grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-4 items-center">
                                         <div>
-                                            <span class="text-xs text-gray-500 dark:text-gray-400">Endpoint</span>
+                                            <span class="text-xs text-neutral-500 dark:text-neutral-400">Endpoint</span>
                                             <p class="text-sm font-mono text-fg-default dark:text-dark-fg-default">{rule.endpoint_pattern}</p>
                                         </div>
                                         <div>
-                                            <span class="text-xs text-gray-500 dark:text-gray-400">Limit</span>
+                                            <span class="text-xs text-neutral-500 dark:text-neutral-400">Limit</span>
                                             <p class="text-sm text-fg-default dark:text-dark-fg-default">
                                                 {#if rateLimitConfig?.global_multiplier !== 1.0}
-                                                    <span class="line-through text-gray-400">{rule.requests}</span>
+                                                    <span class="line-through text-neutral-400">{rule.requests}</span>
                                                     <span class="font-semibold text-blue-600 dark:text-blue-400">{rule.effective_requests}</span>
                                                 {:else}{rule.requests}{/if} req / {rule.window_seconds}s
                                             </p>
                                         </div>
                                         <div>
-                                            <span class="text-xs text-gray-500 dark:text-gray-400">Group</span>
+                                            <span class="text-xs text-neutral-500 dark:text-neutral-400">Group</span>
                                             <span class="inline-block px-2 py-1 text-xs rounded-full {getGroupColor(rule.group)}">{rule.group}</span>
                                         </div>
                                         <div>
-                                            <span class="text-xs text-gray-500 dark:text-gray-400">Algorithm</span>
+                                            <span class="text-xs text-neutral-500 dark:text-neutral-400">Algorithm</span>
                                             <p class="text-sm text-fg-default dark:text-dark-fg-default">{rule.algorithm}</p>
                                         </div>
                                     </div>
@@ -521,7 +521,7 @@
                     <!-- User-Specific Rules -->
                     {#if rateLimitConfig.rules && rateLimitConfig.rules.length > 0}
                         <div>
-                            <h5 class="text-xs sm:text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">User-Specific Overrides</h5>
+                            <h5 class="text-xs sm:text-sm font-medium text-neutral-600 dark:text-neutral-400 mb-2">User-Specific Overrides</h5>
                             <div class="space-y-2">
                                 {#each rateLimitConfig.rules as rule, index}
                                     <div class="p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
@@ -532,9 +532,9 @@
                                             </div>
                                             <div class="flex items-center gap-1 flex-wrap">
                                                 <input type="number" bind:value={rule.requests} min="1" class="input input-sm w-16" disabled={rateLimitConfig.bypass_rate_limit} />
-                                                <span class="text-xs text-gray-500">/</span>
+                                                <span class="text-xs text-neutral-500">/</span>
                                                 <input type="number" bind:value={rule.window_seconds} min="1" class="input input-sm w-16" disabled={rateLimitConfig.bypass_rate_limit} />
-                                                <span class="text-xs text-gray-500">s</span>
+                                                <span class="text-xs text-neutral-500">s</span>
                                                 {#if rateLimitConfig.global_multiplier !== 1.0}
                                                     <span class="text-xs text-blue-600 dark:text-blue-400 ml-2">(→ {Math.floor(rule.requests * rateLimitConfig.global_multiplier)}/{rule.window_seconds}s)</span>
                                                 {/if}
@@ -560,14 +560,14 @@
 
                 <!-- Current Usage -->
                 {#if rateLimitUsage && Object.keys(rateLimitUsage).length > 0}
-                    <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                    <div class="border border-neutral-200 dark:border-neutral-700 rounded-lg p-4">
                         <div class="flex justify-between items-center mb-3">
                             <h4 class="font-semibold text-fg-default dark:text-dark-fg-default">Current Usage</h4>
                             <button onclick={resetRateLimits} class="btn btn-sm btn-secondary">Reset All Counters</button>
                         </div>
                         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                             {#each Object.entries(rateLimitUsage) as [endpoint, usage]}
-                                <div class="flex justify-between p-2 bg-gray-50 dark:bg-gray-900 rounded">
+                                <div class="flex justify-between p-2 bg-neutral-50 dark:bg-neutral-900 rounded">
                                     <span class="text-sm font-mono text-fg-muted dark:text-dark-fg-muted">{endpoint}</span>
                                     <span class="text-sm font-semibold text-fg-default dark:text-dark-fg-default">{usage.count || usage.tokens_remaining || 0}</span>
                                 </div>
@@ -605,7 +605,7 @@
                 </div>
                 <div>
                     <label for="user-form-password" class="block text-sm font-medium text-fg-muted dark:text-dark-fg-muted mb-1">
-                        Password {!editingUser ? '* ' : ''}{#if editingUser}<span class="text-xs text-gray-500">(leave empty to keep current)</span>{/if}
+                        Password {!editingUser ? '* ' : ''}{#if editingUser}<span class="text-xs text-neutral-500">(leave empty to keep current)</span>{/if}
                     </label>
                     <input id="user-form-password" type="password" bind:value={userForm.password} class="form-input-standard"
                         placeholder={editingUser ? 'Enter new password' : 'Enter password'} disabled={savingUser} autocomplete="new-password" />
diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
index 378e9159..ffd324fe 100644
--- a/frontend/src/styles/components.css
+++ b/frontend/src/styles/components.css
@@ -1,4 +1,46 @@
 @layer components {
+  /* Toast Container */
+  .toast-container {
+    position: fixed;
+    top: 5rem;
+    right: 1.5rem;
+    z-index: 100;
+    width: 100%;
+    max-width: 24rem;
+    pointer-events: none;
+  }
+
+  .toast-item {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    padding: 1rem;
+    margin-bottom: 0.75rem;
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    overflow: hidden;
+    pointer-events: auto;
+    border-width: 1px;
+  }
+
+  .toast-timer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    transform-origin: left;
+    transition: transform 0.1s linear;
+  }
+
+  @media (max-width: 640px) {
+    .toast-container {
+      top: 4.5rem;
+      left: 1rem;
+      right: 1rem;
+      max-width: none;
+    }
+  }
+
   /* Button Extensions */
   .btn-lg {
     @apply px-6 py-3 text-base rounded-md;
@@ -24,7 +66,9 @@
   .form-input-bare {
     @apply bg-transparent border-0 border-b-2 border-neutral-300 dark:border-neutral-600
            focus:border-primary dark:focus:border-primary rounded-none px-1 py-0
-           focus:outline-hidden focus:ring-0 transition-colors;
+           focus:outline-hidden focus:ring-0 transition-colors
+           w-full text-sm font-medium text-fg-default dark:text-dark-fg-default
+           placeholder-fg-muted dark:placeholder-dark-fg-muted;
   }
 
   /* Pagination Controls */
@@ -106,19 +150,19 @@
   }
 
   .modal-container {
-    @apply bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden;
+    @apply bg-surface-overlay dark:bg-dark-surface-overlay rounded-lg shadow-xl max-w-4xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden;
   }
 
   .modal-header {
-    @apply p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center;
+    @apply p-4 sm:p-6 border-b border-border-default dark:border-dark-border-default flex justify-between items-center;
   }
 
   .modal-title {
-    @apply text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100;
+    @apply text-lg sm:text-xl font-semibold text-fg-default dark:text-dark-fg-default;
   }
 
   .modal-close {
-    @apply text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-2xl leading-none;
+    @apply text-fg-muted hover:text-fg-default dark:text-dark-fg-muted dark:hover:text-dark-fg-default text-2xl leading-none;
   }
 
   .modal-body {
@@ -126,7 +170,7 @@
   }
 
   .modal-footer {
-    @apply p-4 sm:p-6 border-t border-gray-200 dark:border-gray-700 flex gap-3 justify-end;
+    @apply p-4 sm:p-6 border-t border-border-default dark:border-dark-border-default flex gap-3 justify-end;
   }
 
   /* Badge/Pill Styles */
@@ -163,7 +207,7 @@
   }
 
   .badge-neutral {
-    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
+    @apply bg-skeleton dark:bg-dark-skeleton text-fg-default dark:text-dark-fg-default;
   }
 
   /* Alert/Notification Styles */
@@ -189,7 +233,7 @@
 
   /* Progress Bar */
   .progress-container {
-    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2;
+    @apply w-full bg-skeleton dark:bg-dark-skeleton rounded-full h-2;
   }
 
   .progress-bar {
@@ -210,11 +254,11 @@
 
   /* Dropdown Menu (Generic) */
   .dropdown-menu {
-    @apply absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50;
+    @apply absolute right-0 mt-2 w-48 bg-surface-overlay dark:bg-dark-surface-overlay rounded-lg shadow-lg border border-border-default dark:border-dark-border-default z-50;
   }
 
   .dropdown-item {
-    @apply w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-2 transition-colors;
+    @apply w-full px-4 py-2 text-left hover:bg-interactive-hover dark:hover:bg-dark-interactive-hover flex items-center gap-2 transition-colors;
   }
 
   .dropdown-item:first-child {
@@ -227,26 +271,26 @@
 
   /* Tooltip */
   .tooltip {
-    @apply absolute bottom-8 right-0 z-10 px-2 py-1 text-xs bg-neutral-800 dark:bg-neutral-200
-           text-white dark:text-neutral-800 rounded shadow-lg opacity-0 group-hover:opacity-100
+    @apply absolute bottom-8 right-0 z-10 px-2 py-1 text-xs bg-tooltip-bg
+           text-tooltip-fg rounded shadow-lg opacity-0 group-hover:opacity-100
            transition-opacity duration-200 pointer-events-none whitespace-nowrap;
   }
 
   /* Loading Skeleton */
   .skeleton {
-    @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
+    @apply animate-pulse bg-skeleton dark:bg-dark-skeleton rounded;
   }
 
   .skeleton-text {
-    @apply h-4 animate-pulse bg-gray-200 dark:bg-gray-700 rounded mb-2;
+    @apply h-4 animate-pulse bg-skeleton dark:bg-dark-skeleton rounded mb-2;
   }
 
   .skeleton-title {
-    @apply h-6 animate-pulse bg-gray-200 dark:bg-gray-700 rounded mb-3;
+    @apply h-6 animate-pulse bg-skeleton dark:bg-dark-skeleton rounded mb-3;
   }
 
   .skeleton-button {
-    @apply h-10 w-24 animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
+    @apply h-10 w-24 animate-pulse bg-skeleton dark:bg-dark-skeleton rounded;
   }
 
   /* Feature Card */
@@ -264,7 +308,7 @@
   }
 
   .empty-state-icon {
-    @apply w-12 h-12 mx-auto mb-4 text-gray-400 dark:text-gray-600;
+    @apply w-12 h-12 mx-auto mb-4 text-fg-subtle dark:text-dark-fg-subtle;
   }
 
   .empty-state-title {
@@ -290,7 +334,7 @@
 
   /* Avatar */
   .avatar {
-    @apply inline-flex items-center justify-center rounded-full bg-gray-500 text-white;
+    @apply inline-flex items-center justify-center rounded-full bg-fg-subtle dark:bg-dark-fg-subtle text-white;
   }
 
   .avatar-sm {
@@ -323,7 +367,7 @@
   }
 
   .tab-item-inactive {
-    @apply border-transparent text-fg-muted dark:text-dark-fg-muted hover:text-fg-default dark:hover:text-dark-fg-default hover:border-gray-300 dark:hover:border-gray-600;
+    @apply border-transparent text-fg-muted dark:text-dark-fg-muted hover:text-fg-default dark:hover:text-dark-fg-default hover:border-border-default dark:hover:border-dark-border-default;
   }
 
   /* Divider */
diff --git a/frontend/src/styles/pages.css b/frontend/src/styles/pages.css
index 4d01f409..7f448d05 100644
--- a/frontend/src/styles/pages.css
+++ b/frontend/src/styles/pages.css
@@ -3,233 +3,256 @@
  * Centralized styles for route components to avoid scattered <style> blocks
  */
 
-/* =============================================================================
-   EDITOR PAGE STYLES
-   ============================================================================= */
+@layer components {
+  /* =============================================================================
+     EDITOR PAGE STYLES
+     ============================================================================= */
 
-/* Editor Grid Layout */
-.editor-grid-container {
+  /* Editor Grid Layout */
+  .editor-grid-container {
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     grid-template-rows: auto auto minmax(300px, 1fr) minmax(200px, 1fr) auto;
     gap: 1rem;
     width: 100%;
+    max-width: 80rem;
+    margin-left: auto;
+    margin-right: auto;
     position: relative;
     min-height: calc(100vh - 8rem);
     max-height: calc(100vh - 8rem);
-    padding: 0;
-}
+    padding: 1rem 1rem 0 1rem;
+  }
+
+  @media (min-width: 640px) {
+    .editor-grid-container {
+      padding: 1.5rem 1.5rem 0 1.5rem;
+    }
+  }
 
-.editor-header {
+  .editor-header {
     grid-row: 1 / 2;
     margin-bottom: 0;
     transition: margin-bottom 0.3s ease;
     position: relative;
     z-index: 10;
-}
+  }
 
-.editor-controls {
+  .editor-controls {
     grid-row: 2 / 3;
-}
+  }
 
-.editor-main-code {
+  .editor-main-code {
     grid-row: 3 / 4;
     min-height: 0;
     display: flex;
     flex-direction: column;
     overflow: hidden;
-}
+  }
 
-.editor-wrapper {
+  .editor-wrapper {
     flex: 1 1 auto;
     min-height: 0;
     overflow: hidden;
     position: relative;
-}
+  }
 
-.editor-wrapper .cm-editor {
+  .editor-wrapper .cm-editor {
     height: 100% !important;
     max-height: 100% !important;
-}
+  }
 
-.editor-wrapper .cm-scroller {
+  .editor-wrapper .cm-scroller {
     overflow: auto !important;
-}
+  }
 
-.editor-toolbar {
+  .editor-toolbar {
     position: sticky;
     top: 0;
     z-index: 5;
     background-color: inherit;
-}
+  }
 
-.editor-main-output {
+  .editor-main-output {
     grid-row: 4 / 5;
     min-height: 0;
     display: flex;
-}
+  }
 
-@media (min-width: 768px) {
+  @media (min-width: 768px) {
     .editor-grid-container {
-        grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
-        grid-template-rows: auto minmax(400px, 1fr) auto;
-        gap: 1rem;
-        min-height: calc(100vh - 8rem);
-        max-height: calc(100vh - 8rem);
+      grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
+      grid-template-rows: auto minmax(400px, 1fr) auto;
+      gap: 1rem;
+      min-height: calc(100vh - 8rem);
+      max-height: calc(100vh - 8rem);
+      padding: 1.5rem 1.5rem 0 1.5rem;
     }
 
     .editor-header {
-        grid-column: 1 / -1;
-        grid-row: 1 / 2;
+      grid-column: 1 / -1;
+      grid-row: 1 / 2;
     }
 
     .editor-main-code {
-        grid-column: 1 / 2;
-        grid-row: 2 / 3;
+      grid-column: 1 / 2;
+      grid-row: 2 / 3;
     }
 
     .editor-main-output {
-        grid-column: 2 / 3;
-        grid-row: 2 / 3;
+      grid-column: 2 / 3;
+      grid-row: 2 / 3;
     }
 
     .editor-controls {
-        grid-column: 1 / -1;
-        grid-row: 3 / 4;
+      grid-column: 1 / -1;
+      grid-row: 3 / 4;
     }
-}
+  }
+
+  @media (min-width: 1024px) {
+    .editor-grid-container {
+      padding: 2rem 2rem 0 2rem;
+    }
+  }
 
-/* Editor-specific scrollbars */
-.editor-wrapper::-webkit-scrollbar {
+  @media (min-width: 1280px) {
+    .editor-grid-container {
+      padding: 2rem 3rem 0 3rem;
+    }
+  }
+
+  /* Editor-specific scrollbars */
+  .editor-wrapper::-webkit-scrollbar {
     width: 8px;
     height: 8px;
-}
+  }
 
-.editor-wrapper::-webkit-scrollbar-track {
+  .editor-wrapper::-webkit-scrollbar-track {
     @apply bg-neutral-200 dark:bg-neutral-700 rounded-b-lg;
-}
+  }
 
-.editor-wrapper::-webkit-scrollbar-thumb {
+  .editor-wrapper::-webkit-scrollbar-thumb {
     @apply bg-neutral-400 dark:bg-neutral-500 rounded;
-}
+  }
 
-.editor-wrapper::-webkit-scrollbar-thumb:hover {
+  .editor-wrapper::-webkit-scrollbar-thumb:hover {
     @apply bg-neutral-500 dark:bg-neutral-400;
-}
+  }
 
-/* Saved scripts container */
-.saved-scripts-container {
+  /* Saved scripts container */
+  .saved-scripts-container {
     max-height: calc(3 * 3.5rem);
     overflow-y: auto;
-}
+  }
 
-.saved-scripts-container li {
+  .saved-scripts-container li {
     min-height: 3.5rem;
-}
+  }
 
-.saved-scripts-container::-webkit-scrollbar {
+  .saved-scripts-container::-webkit-scrollbar {
     width: 6px;
-}
+  }
 
-.saved-scripts-container::-webkit-scrollbar-track {
+  .saved-scripts-container::-webkit-scrollbar-track {
     @apply bg-neutral-100 dark:bg-neutral-800 rounded;
-}
+  }
 
-.saved-scripts-container::-webkit-scrollbar-thumb {
+  .saved-scripts-container::-webkit-scrollbar-thumb {
     @apply bg-neutral-300 dark:bg-neutral-600 rounded;
-}
+  }
 
-.saved-scripts-container::-webkit-scrollbar-thumb:hover {
+  .saved-scripts-container::-webkit-scrollbar-thumb:hover {
     @apply bg-neutral-400 dark:bg-neutral-500;
-}
+  }
 
-/* =============================================================================
-   HOME PAGE STYLES
-   ============================================================================= */
+  /* =============================================================================
+     HOME PAGE STYLES
+     ============================================================================= */
 
-/* Hero section animated background shapes */
-@keyframes shape-float-1 {
+  /* Hero section animated background shapes */
+  @keyframes shape-float-1 {
     0% { transform: translate(0, 0) rotate(0deg) scale(1); }
     25% { transform: translate(-10px, 15px) rotate(10deg) scale(1.05); }
     50% { transform: translate(5px, -10px) rotate(-5deg) scale(1); }
     75% { transform: translate(10px, 5px) rotate(5deg) scale(0.95); }
     100% { transform: translate(0, 0) rotate(0deg) scale(1); }
-}
+  }
 
-@keyframes shape-float-2 {
+  @keyframes shape-float-2 {
     0% { transform: translate(0, 0) rotate(0deg) scale(1); }
     25% { transform: translate(15px, -5px) rotate(-8deg) scale(0.98); }
     50% { transform: translate(-5px, 10px) rotate(12deg) scale(1.02); }
     75% { transform: translate(-10px, -15px) rotate(-3deg) scale(1); }
     100% { transform: translate(0, 0) rotate(0deg) scale(1); }
-}
+  }
 
-/* Hero fly-in animation */
-@keyframes flyInHome {
+  /* Hero fly-in animation */
+  @keyframes flyInHome {
     from { opacity: 0; transform: translateY(var(--fly-y, 20px)); }
     to { opacity: 1; transform: translateY(0); }
-}
+  }
 
-.hero-animate-flyIn {
+  .hero-animate-flyIn {
     animation: flyInHome 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
     animation-delay: var(--fly-delay, 0s);
-}
+  }
 
-[style*="--fly-delay"] {
+  [style*="--fly-delay"] {
     opacity: 0;
-}
+  }
 
-.feature-card {
+  .feature-card {
     position: relative;
-}
+  }
 
-.hero-section::before,
-.hero-section::after {
+  .hero-section::before,
+  .hero-section::after {
     content: '';
     @apply absolute -z-10 rounded-full;
     filter: blur(60px);
     opacity: 0.15;
     will-change: transform;
-}
+  }
 
-:is(.dark .hero-section)::before,
-:is(.dark .hero-section)::after {
+  :is(.dark .hero-section)::before,
+  :is(.dark .hero-section)::after {
     opacity: 0.1;
     filter: blur(70px);
-}
+  }
 
-.hero-section::before {
+  .hero-section::before {
     width: 25rem;
     height: 25rem;
     left: -10rem;
     top: -10rem;
     background-color: var(--color-primary-light);
     animation: shape-float-1 35s ease-in-out infinite;
-}
+  }
 
-@media (min-width: 640px) {
+  @media (min-width: 640px) {
     .hero-section::before {
-        width: 35rem;
-        height: 35rem;
-        left: -15rem;
-        top: -15rem;
+      width: 35rem;
+      height: 35rem;
+      left: -15rem;
+      top: -15rem;
     }
-}
+  }
 
-@media (min-width: 1024px) {
+  @media (min-width: 1024px) {
     .hero-section::before {
-        width: 50rem;
-        height: 50rem;
-        left: -20rem;
-        top: -20rem;
+      width: 50rem;
+      height: 50rem;
+      left: -20rem;
+      top: -20rem;
     }
-}
+  }
 
-:is(.dark .hero-section)::before {
+  :is(.dark .hero-section)::before {
     background-color: var(--color-primary);
-}
+  }
 
-.hero-section::after {
+  .hero-section::after {
     width: 20rem;
     height: 15rem;
     right: -10rem;
@@ -237,37 +260,38 @@
     border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
     background-color: var(--color-secondary);
     animation: shape-float-2 45s ease-in-out infinite;
-}
+  }
 
-@media (min-width: 640px) {
+  @media (min-width: 640px) {
     .hero-section::after {
-        width: 30rem;
-        height: 22rem;
-        right: -12rem;
-        bottom: -7rem;
+      width: 30rem;
+      height: 22rem;
+      right: -12rem;
+      bottom: -7rem;
     }
-}
+  }
 
-@media (min-width: 1024px) {
+  @media (min-width: 1024px) {
     .hero-section::after {
-        width: 40rem;
-        height: 30rem;
-        right: -15rem;
-        bottom: -10rem;
+      width: 40rem;
+      height: 30rem;
+      right: -15rem;
+      bottom: -10rem;
     }
-}
+  }
 
-:is(.dark .hero-section)::after {
+  :is(.dark .hero-section)::after {
     background-color: var(--color-secondary-dark);
     border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
-}
+  }
 
-/* Center lone last card in 2-column grid */
-@media (min-width: 640px) and (max-width: 1023.98px) {
+  /* Center lone last card in 2-column grid */
+  @media (min-width: 640px) and (max-width: 1023.98px) {
     .features-grid > :last-child:nth-child(2n + 1) {
-        grid-column: 1 / -1;
-        justify-self: center;
-        max-width: 36rem;
-        width: 100%;
+      grid-column: 1 / -1;
+      justify-self: center;
+      max-width: 36rem;
+      width: 100%;
     }
+  }
 }