diff --git a/DESIGN-SYSTEM.md b/DESIGN-SYSTEM.md
index 590162f7..daab8dd6 100644
--- a/DESIGN-SYSTEM.md
+++ b/DESIGN-SYSTEM.md
@@ -321,31 +321,37 @@ Color: accent-text
 
 ## Shadows
 
-Shadows communicate **interaction state**, not decoration. Elements earn shadows through user interaction.
+Shadows communicate **interaction state**, not decoration. On dark backgrounds, traditional black shadows are invisible — use **brighter surfaces + faint accent glow** instead.
 
 **Resting state:** No shadows. Elements are flat with 1px borders.
 
-**Hover state (buttons):** Subtle shadow + lift effect. Element feels like it rises off the surface.
-- Primary button hover: `0 2px 8px rgba(34,211,238,0.25)` + `translateY(-1px)` — cyan-tinted shadow
-- Ghost button hover: `0 2px 6px rgba(0,0,0,0.2)` + `translateY(-1px)`
-- Active/click: shadow shrinks, element "presses down" to `translateY(0)`
+**Elevation on dark backgrounds (the principle):** Instead of shadow = darker, elevation = lighter. A "raised" element gets a brighter surface color (`bg-elevated` / `#1c1f2a`) and optionally a very faint cyan glow. This creates perceived depth through contrast.
 
-**Active/selected state (tabs, toggles):** The selected item gets an elevation shadow to feel raised above siblings.
-- Active tab: `0 2px 8px rgba(0,0,0,0.25)` — class: `tab-active-shadow`
+**Hover state (buttons):** Lift effect with accent glow.
 
-**Card hover lift (optional):** For cards that should feel interactive (clickable list items, session cards).
-- Hover: `0 4px 12px rgba(0,0,0,0.2)` + `translateY(-2px)` — class: `card-lift`
-- Active: shadow shrinks to `0 1px 4px rgba(0,0,0,0.15)`
+- Primary button hover: `0 2px 10px rgba(34,211,238,0.2)` + `translateY(-1px)` — cyan glow
+- Ghost button hover: brighter border (`border-hover`) + `translateY(-1px)`, no shadow
+- Active/click: glow fades, element "presses down" to `translateY(0)`
+
+**Active/selected state (tabs, toggles):** Elevated surface + faint accent glow.
+
+- Active tab: `bg-elevated` + `box-shadow: 0 1px 4px rgba(34,211,238,0.08)` — class: `tab-active-shadow`
+
+**Card hover lift (optional):** For clickable cards.
+
+- Hover: brighter border + `0 2px 8px rgba(34,211,238,0.06)` + `translateY(-2px)` — class: `card-lift`
+
+**Overlays:** Flyouts, dropdowns, modals get stronger shadows (they overlay lighter content).
 
-**Overlays:** Flyouts, dropdowns, modals get elevation shadows to separate from content.
 - Drawer/flyout: `4px 0 12px rgba(0,0,0,0.2)`
 - Dropdown: `0 4px 12px rgba(0,0,0,0.3)`
 - Modal: `0 8px 24px rgba(0,0,0,0.4)`
 
 **What NOT to do:**
-- No shadows on resting cards (border only)
+
+- No `rgba(0,0,0,...)` shadows on resting elements (invisible on dark bg)
 - No permanent decorative shadows
-- No colored glow shadows (except primary button cyan tint on hover)
+- No heavy glow effects — accent glow should be barely perceptible (≤ 0.1 opacity)
 
 ---
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 60f3190d..75e0a4e6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -181,11 +181,11 @@
   transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease;
   &:hover {
     filter: brightness(1.1);
-    box-shadow: 0 2px 8px rgba(34, 211, 238, 0.25);
+    box-shadow: 0 2px 10px rgba(34, 211, 238, 0.2);
     transform: translateY(-1px);
   }
   &:active {
-    box-shadow: 0 1px 2px rgba(34, 211, 238, 0.15);
+    box-shadow: 0 0 4px rgba(34, 211, 238, 0.1);
     transform: translateY(0);
   }
 }
@@ -202,32 +202,33 @@
     background: var(--color-bg-elevated);
     color: var(--color-text-primary);
     border-color: var(--color-border-hover);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     transform: translateY(-1px);
   }
   &:active {
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
     transform: translateY(0);
   }
 }
 
-/* ── Interactive shadow patterns ────────────────── */
+/* ── Interactive shadow patterns (dark-mode aware) ── */
+/* On dark backgrounds, use brighter surfaces + faint accent glow
+   instead of black shadows (which are invisible on #0c0d10) */
 
-/* Tab/toggle group: active item gets elevation shadow */
+/* Tab/toggle group: active item gets elevated surface + faint accent glow */
 @utility tab-active-shadow {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  background: var(--color-bg-elevated);
+  box-shadow: 0 1px 4px rgba(34, 211, 238, 0.08);
 }
 
-/* Card hover lift — optional, add to cards that should feel interactive */
+/* Card hover lift — brighter border + subtle accent glow */
 @utility card-lift {
   transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
   &:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    transform: translateY(-2px);
     border-color: var(--color-border-hover);
+    box-shadow: 0 2px 8px rgba(34, 211, 238, 0.06);
+    transform: translateY(-2px);
   }
   &:active {
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+    box-shadow: none;
     transform: translateY(0);
   }
 }