diff --git a/src/app/globals.css b/src/app/globals.css
index f5f5e3e..9bb6107 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,71 +1,99 @@
 @import "tailwindcss";
 
+@layer base {
+  :root {
+    --theme-bg-base: #f0f4f2;
+    --theme-bg-surface: #ffffff;
+    --theme-bg-surface-alt: #f4f7f5;
+    --theme-bg-callout: #e8f4f0;
+    --theme-primary: #2a7d7d;
+    --theme-primary-hover: #1f6363;
+    --theme-primary-light: #3a9e9e;
+    --theme-text-heading: #1a2f2f;
+    --theme-text-body: #2d4a4a;
+    --theme-text-secondary: #4a6a6a;
+    --theme-text-muted: #7a9a9a;
+    --theme-border: #c8d8d0;
+    --theme-border-light: #dce8e2;
+    --theme-success: #2d8a4e;
+    --theme-success-bg: #e8f5ed;
+    --theme-error: #c44c4c;
+    --theme-error-bg: #fce8e8;
+    --theme-badge-bg: #e0eeea;
+    --theme-badge-text: #2a6a5a;
+    --theme-danger: #dc3545;
+    --theme-danger-hover: #c82333;
+
+    --theme-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+    --theme-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+    --theme-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
+  }
+
+  :root.dark {
+    --theme-bg-base: #0f1614;
+    --theme-bg-surface: #17221f;
+    --theme-bg-surface-alt: #1e2d28;
+    --theme-bg-callout: #1a332a;
+    --theme-primary: #4ab2b2;
+    --theme-primary-hover: #5ec7c7;
+    --theme-primary-light: #6cd1d1;
+    --theme-text-heading: #e4f0ec;
+    --theme-text-body: #c3d9d3;
+    --theme-text-secondary: #9cb8b0;
+    --theme-text-muted: #6b8a81;
+    --theme-border: #38524a;
+    --theme-border-light: #253832;
+    --theme-success: #4ade80;
+    --theme-success-bg: #143621;
+    --theme-error: #f87171;
+    --theme-error-bg: #3b1c1c;
+    --theme-badge-bg: #214035;
+    --theme-badge-text: #6fd6b8;
+    --theme-danger: #ef4444;
+    --theme-danger-hover: #f87171;
+
+    --theme-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
+    --theme-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
+    --theme-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
+  }
+}
+
 @theme inline {
-  /* ── Sage / Teal palette from reference image ── */
-  --color-bg-base: #f0f4f2;
-  --color-bg-surface: #ffffff;
-  --color-bg-surface-alt: #f4f7f5;
-  --color-bg-callout: #e8f4f0;
-  --color-primary: #2a7d7d;
-  --color-primary-hover: #1f6363;
-  --color-primary-light: #3a9e9e;
-  --color-text-heading: #1a2f2f;
-  --color-text-body: #2d4a4a;
-  --color-text-secondary: #4a6a6a;
-  --color-text-muted: #7a9a9a;
-  --color-border: #c8d8d0;
-  --color-border-light: #dce8e2;
-  --color-success: #2d8a4e;
-  --color-success-bg: #e8f5ed;
-  --color-error: #c44c4c;
-  --color-error-bg: #fce8e8;
-  --color-badge-bg: #e0eeea;
-  --color-badge-text: #2a6a5a;
-  --color-danger: #dc3545;
-  --color-danger-hover: #c82333;
+  /* ── Sage / Teal palette mapped from CSS variables ── */
+  --color-bg-base: var(--theme-bg-base);
+  --color-bg-surface: var(--theme-bg-surface);
+  --color-bg-surface-alt: var(--theme-bg-surface-alt);
+  --color-bg-callout: var(--theme-bg-callout);
+  --color-primary: var(--theme-primary);
+  --color-primary-hover: var(--theme-primary-hover);
+  --color-primary-light: var(--theme-primary-light);
+  --color-text-heading: var(--theme-text-heading);
+  --color-text-body: var(--theme-text-body);
+  --color-text-secondary: var(--theme-text-secondary);
+  --color-text-muted: var(--theme-text-muted);
+  --color-border: var(--theme-border);
+  --color-border-light: var(--theme-border-light);
+  --color-success: var(--theme-success);
+  --color-success-bg: var(--theme-success-bg);
+  --color-error: var(--theme-error);
+  --color-error-bg: var(--theme-error-bg);
+  --color-badge-bg: var(--theme-badge-bg);
+  --color-badge-text: var(--theme-badge-text);
+  --color-danger: var(--theme-danger);
+  --color-danger-hover: var(--theme-danger-hover);
 
   /* Typography */
   --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
 
   /* Shadows */
-  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
-  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
-  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 20px rgba(0, 0, 0, 0.1);
+  --shadow-card: var(--theme-shadow-card);
+  --shadow-card-hover: var(--theme-shadow-card-hover);
+  --shadow-modal: var(--theme-shadow-modal);
 
   /* Animations */
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-@layer base {
-  .dark {
-    --color-bg-base: #0f1614;
-    --color-bg-surface: #17221f;
-    --color-bg-surface-alt: #1e2d28;
-    --color-bg-callout: #1a332a;
-    --color-primary: #4ab2b2;
-    --color-primary-hover: #5ec7c7;
-    --color-primary-light: #6cd1d1;
-    --color-text-heading: #e4f0ec;
-    --color-text-body: #c3d9d3;
-    --color-text-secondary: #9cb8b0;
-    --color-text-muted: #6b8a81;
-    --color-border: #38524a;
-    --color-border-light: #253832;
-    --color-success: #4ade80;
-    --color-success-bg: #143621;
-    --color-error: #f87171;
-    --color-error-bg: #3b1c1c;
-    --color-badge-bg: #214035;
-    --color-badge-text: #6fd6b8;
-    --color-danger: #ef4444;
-    --color-danger-hover: #f87171;
-
-    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
-    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
-    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
-  }
-}
-
 /* ── Base Styles ── */
 body {
   background: var(--color-bg-base);