diff --git a/frontend/src/styles/base/theme.css b/frontend/src/styles/base/theme.css
index f7581f9..6b7db9f 100644
--- a/frontend/src/styles/base/theme.css
+++ b/frontend/src/styles/base/theme.css
@@ -6,19 +6,20 @@
   --accent-hue-offset: -20deg;
   --dark-hue-offset: 30deg;
   --dark-foreground-hue-offset: 10deg;
+  --surface-hue-shift: -4deg;
 
   /* --- Neutrals --- */
-  --bg: oklch(0.97 0.001 var(--neutral-hue));
-  --surface: oklch(0.985 0.001 var(--neutral-hue));
-  --surface-subtle: oklch(0.96 0.002 var(--neutral-hue));
+  --bg: oklch(0.97 0.001 calc(var(--neutral-hue) + var(--surface-hue-shift)));
+  --surface: oklch(0.985 0.001 calc(var(--neutral-hue) + var(--surface-hue-shift)));
+  --surface-subtle: oklch(0.96 0.002 calc(var(--neutral-hue) + var(--surface-hue-shift)));
   --fg: oklch(0.32 0.005 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
   --muted: oklch(0.54 0.008 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
   --sidebar-fg: oklch(0.56 0.007 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
   --border: oklch(0.92 0.002 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
 
   /* --- Accent (primary) --- */
-  --accent: oklch(0.61 0.2 calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
-  --accent-hover: oklch(0.70 0.02 calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
+  --accent: oklch(0.61 0.16 calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
+  --accent-hover: oklch(0.70 0.12 calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
   --on-accent: oklch(1 0 0);
 
   --folder-icon-back: color-mix(in oklch, var(--accent) 78%, black 8%);
@@ -33,8 +34,8 @@
   --accent-elevated: color-mix(in oklch, var(--accent) 16%, transparent);
   --accent-elevated-strong: color-mix(in oklch, var(--accent) 22%, transparent);
   --accent-outline: color-mix(in oklch, var(--accent) 45%, transparent);
-  --accent-outline-strong: color-mix(in oklch, var(--accent) 90%, transparent);
-  --accent-focus: color-mix(in oklch, var(--accent) 85%, transparent);
+  --accent-outline-strong: color-mix(in oklch, var(--accent) 80%, transparent);
+  --accent-focus: color-mix(in oklch, var(--accent) 75%, transparent);
   --surface-overlay: color-mix(in oklch, white 82%, transparent);
 
   /* -- Selection --- */
@@ -106,16 +107,16 @@
   --dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset));
   --dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset));
 
-  --bg: oklch(0.15 0.01 var(--dark-neutral-hue));
-  --surface: oklch(0.19 0.012 var(--dark-neutral-hue));
-  --surface-subtle: oklch(0.23 0.012 var(--dark-neutral-hue));
+  --bg: oklch(0.15 0.01 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+  --surface: oklch(0.19 0.012 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+  --surface-subtle: oklch(0.23 0.012 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
   --fg: oklch(0.89 0.015 var(--dark-foreground-hue));
   --muted: oklch(0.72 0.02 var(--dark-foreground-hue));
   --sidebar-fg: oklch(0.78 0.02 var(--dark-foreground-hue));
   --border: oklch(0.33 0.01 var(--dark-foreground-hue));
 
-  --accent: oklch(0.75 0.2 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
-  --accent-hover: oklch(0.82 0.16 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
+  --accent: oklch(0.75 0.16 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
+  --accent-hover: oklch(0.82 0.13 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
   --on-accent: oklch(0.15 0.015 var(--dark-foreground-hue));
 
   --folder-icon-back: color-mix(in oklch, var(--accent) 72%, black 12%);
@@ -126,8 +127,8 @@
   --accent-elevated: color-mix(in oklch, var(--accent) 28%, transparent);
   --accent-elevated-strong: color-mix(in oklch, var(--accent) 38%, transparent);
   --accent-outline: color-mix(in oklch, var(--accent) 55%, transparent);
-  --accent-outline-strong: color-mix(in oklch, var(--accent) 90%, transparent);
-  --accent-focus: color-mix(in oklch, var(--accent) 80%, transparent);
+  --accent-outline-strong: color-mix(in oklch, var(--accent) 80%, transparent);
+  --accent-focus: color-mix(in oklch, var(--accent) 72%, transparent);
   --surface-overlay: color-mix(in oklch, black 60%, transparent);
 
   --selection: oklch(0.44 0.04 220deg);
@@ -183,16 +184,16 @@
     --dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset));
     --dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset));
 
-    --bg: oklch(0.15 0.01 var(--dark-neutral-hue));
-    --surface: oklch(0.19 0.012 var(--dark-neutral-hue));
-    --surface-subtle: oklch(0.23 0.012 var(--dark-neutral-hue));
+    --bg: oklch(0.15 0.01 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+    --surface: oklch(0.19 0.012 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+    --surface-subtle: oklch(0.23 0.012 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
     --fg: oklch(0.89 0.015 var(--dark-foreground-hue));
     --muted: oklch(0.72 0.02 var(--dark-foreground-hue));
     --sidebar-fg: oklch(0.78 0.02 var(--dark-foreground-hue));
     --border: oklch(0.33 0.01 var(--dark-foreground-hue));
 
-    --accent: oklch(0.75 0.2 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
-    --accent-hover: oklch(0.82 0.16 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
+    --accent: oklch(0.75 0.16 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
+    --accent-hover: oklch(0.82 0.13 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
     --on-accent: oklch(0.15 0.015 var(--dark-foreground-hue));
 
     --folder-icon-back: color-mix(in oklch, var(--accent) 72%, black 12%);
@@ -203,8 +204,8 @@
     --accent-elevated: color-mix(in oklch, var(--accent) 28%, transparent);
     --accent-elevated-strong: color-mix(in oklch, var(--accent) 38%, transparent);
     --accent-outline: color-mix(in oklch, var(--accent) 55%, transparent);
-    --accent-outline-strong: color-mix(in oklch, var(--accent) 90%, transparent);
-    --accent-focus: color-mix(in oklch, var(--accent) 80%, transparent);
+    --accent-outline-strong: color-mix(in oklch, var(--accent) 80%, transparent);
+    --accent-focus: color-mix(in oklch, var(--accent) 72%, transparent);
     --surface-overlay: color-mix(in oklch, black 60%, transparent);
 
     --selection: oklch(0.44 0.04 220deg);
@@ -292,4 +293,3 @@ a:focus-visible {
 #app {
   height: 100%;
 }
-