diff --git a/web/src/lib/theme/applyMetaThemeColor.svelte.ts b/web/src/lib/theme/applyMetaThemeColor.svelte.ts
index acc66895..c32caadf 100644
--- a/web/src/lib/theme/applyMetaThemeColor.svelte.ts
+++ b/web/src/lib/theme/applyMetaThemeColor.svelte.ts
@@ -1,10 +1,13 @@
+import tokens from '$lib/styles/tokens.json';
 import { resolvedTheme } from '$lib/stores/theme.svelte';
 
-// TODO(#375): keep these hex values in sync with tokens.json
-// colors.dark.obsidian / colors.light.obsidian. The duplication is a known
-// drift hazard from #363; consume from the generated CSS layer instead.
-const DARK = '#14171A';
-const LIGHT = '#F8F5EE';
+// Browser address-bar tint matches the page background — colors.<mode>.obsidian
+// is the canonical background token, the same value the runtime CSS variables
+// resolve to for each mode. Reading from tokens.json (not the generated CSS)
+// avoids a getComputedStyle round-trip and keeps the source of truth in one
+// place; if a designer rotates the palette, both surfaces move together.
+const DARK = tokens.colors.dark.obsidian;
+const LIGHT = tokens.colors.light.obsidian;
 
 // applyMetaThemeColor wires a Svelte 5 $effect that keeps a single
 // <meta name="theme-color"> (without a media query) in sync with the