diff --git a/frontend/src/lib/document/TimelineBars.svelte b/frontend/src/lib/document/TimelineBars.svelte
index cac4c180..6466edde 100644
--- a/frontend/src/lib/document/TimelineBars.svelte
+++ b/frontend/src/lib/document/TimelineBars.svelte
@@ -81,18 +81,9 @@ function barHeight(count: number): number {
 </div>
 
 <style>
-:root {
-	--timeline-bar-idle: rgba(161, 220, 216, 0.35);
-	--timeline-bar-outside: var(--c-line);
-}
-
-:global(.dark) {
-	/* 3.33:1 against --c-surface (#011526) — clears WCAG 1.4.11 non-text contrast
-	   for large UI elements; previous #0d3358 measured 1.44:1. */
-	--timeline-bar-idle: #3a6e8c;
-	--timeline-bar-outside: #1a2735;
-}
-
+/* Timeline-specific tokens (--timeline-bar-idle, --timeline-bar-outside) live
+   in layout.css next to the rest of the design tokens; this <style> only
+   consumes them. */
 .bar .bar-fill {
 	background-color: var(--timeline-bar-idle);
 	transition: background-color 100ms ease;
diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index f44f295c..fd4912fe 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -152,6 +152,10 @@
 	--c-badge-unknown-bg: #fdf4e3;
 	--c-badge-unknown-text: #7a5a0a;
 	--c-badge-unknown-border: #f0ddb3;
+
+	/* Timeline density bars (issue #385) */
+	--timeline-bar-idle: rgba(161, 220, 216, 0.35);
+	--timeline-bar-outside: var(--c-line);
 }
 
 /* ─── 5. Dark mode ─────────────────────────────────────────────────────────── */
@@ -223,6 +227,11 @@
 		--c-tag-moss: #70b060;
 		--c-tag-sand: #c0a060;
 		--c-tag-coral: #f07060;
+
+		/* Timeline density bars (issue #385) — 3.33:1 idle vs --c-surface (#011526),
+		   clears WCAG 1.4.11 non-text contrast for large UI elements. */
+		--timeline-bar-idle: #3a6e8c;
+		--timeline-bar-outside: #1a2735;
 	}
 }
 
@@ -290,6 +299,11 @@
 	--c-tag-moss: #70b060;
 	--c-tag-sand: #c0a060;
 	--c-tag-coral: #f07060;
+
+	/* Timeline density bars (issue #385) — 3.33:1 idle vs --c-surface (#011526),
+	   clears WCAG 1.4.11 non-text contrast for large UI elements. */
+	--timeline-bar-idle: #3a6e8c;
+	--timeline-bar-outside: #1a2735;
 }
 
 /* ─── 6. Icon inversion — De Gruyter icons are black SVGs loaded as <img> ──── */