diff --git a/docslib/templates/client.css b/docslib/templates/client.css
index 6fcfc13..9176030 100644
--- a/docslib/templates/client.css
+++ b/docslib/templates/client.css
@@ -1,15 +1,18 @@
 :root {
   --shell: #ffffff;
   --surface: #f2f2f2;
-  --elevated: #e5e5e5;
+  --elevated: #d4d4d4;
   --control: #dedede;
   --active: #cacaca;
+  --selection-bg: #111111;
+  --selection-text: #ffffff;
+  --selection-number: #bcbcbc;
   --text: #111111;
   --muted: #6d6d6d;
   --faint: #9a9a9a;
   --border: #c9c9c9;
   --tree-line: #c5c5c5;
-  --shadow: 0 24px 70px rgba(0, 0, 0, .16);
+  --shadow: 0 24px 70px rgba(0, 0, 0, .4);
   color-scheme: light;
 }
 
@@ -19,6 +22,9 @@
   --elevated: #222222;
   --control: #242424;
   --active: #686868;
+  --selection-bg: #f0f0f0;
+  --selection-text: #050505;
+  --selection-number: #555555;
   --text: #f4f4f4;
   --muted: #a5a5a5;
   --faint: #747474;
@@ -58,8 +64,8 @@ button { color: inherit; }
 .tree-link { display: flex; width: 100%; min-height: 32px; align-items: baseline; gap: 5px; padding: 4px 10px; border: 0; border-radius: 18px; color: var(--text); background: transparent; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease; }
 .tree-link:hover { background: var(--control); }
 .tree-link.active { background: var(--active); }
-.sidebar-header-buttons .header-link.active, .desktop-sidebar .tree-link.active, .mobile-menu-view .header-link.active, .mobile-menu-view .tree-link.active { color: #050505; background: #f0f0f0; }
-.desktop-sidebar .tree-link.active .tree-number, .mobile-menu-view .tree-link.active .tree-number { color: #555; }
+.sidebar-header-buttons .header-link.active, .desktop-sidebar .tree-link.active, .mobile-menu-view .header-link.active, .mobile-menu-view .tree-link.active { color: var(--selection-text); background: var(--selection-bg); }
+.desktop-sidebar .tree-link.active .tree-number, .mobile-menu-view .tree-link.active .tree-number { color: var(--selection-number); }
 .tree-number { flex: 0 0 auto; color: var(--muted); }
 .tree-title { min-width: 0; overflow-wrap: anywhere; }
 
diff --git a/tests/test_server.py b/tests/test_server.py
index 0674592..a9dea4d 100644
--- a/tests/test_server.py
+++ b/tests/test_server.py
@@ -78,7 +78,11 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
     assert "flex: 1 1 auto; flex-direction: column" in html
     assert "padding: 0 18px 22px" in html
     assert "--desktop-sidebar-width: clamp(270px, 25vw, 400px)" in html
-    assert ".mobile-menu-view .tree-link.active { color: #050505; background: #f0f0f0; }" in html
+    assert "--selection-bg: #111111" in html
+    assert "--selection-bg: #f0f0f0" in html
+    assert ".mobile-menu-view .tree-link.active { color: var(--selection-text); background: var(--selection-bg); }" in html
+    assert "--elevated: #d4d4d4" in html
+    assert "--shadow: 0 24px 70px rgba(0, 0, 0, .4)" in html
     assert "elements.pageSurface.scrollTo" in html
     assert "font-family: system-ui; font-size: 16px" in html
     assert ".glyph-button, .refresh-glyph { font-family: Arial" in html