frontend/src/routes/layout.css

@@ -56,6 +56,9 @@
 	/* Header surface — independent from canvas/surface for per-mode control */
 	--color-header: var(--c-header);
 
+	/* Focus ring — keyboard focus indicator, mode-aware (navy in light, mint in dark) */
+	--color-focus-ring: var(--c-focus-ring);
+
 	/* Static brand tokens (not themed) */
 	--color-brand-navy: var(--palette-navy);
 	--color-brand-mint: var(--palette-mint);
@@ -87,6 +90,9 @@
 	/* Header is brand-navy in light mode; same in dark mode for contrast compliance */
 	--c-header: #012851;
 
+	/* Focus ring: brand-navy in light mode — 14:1 on white, ~11:1 on sand */
+	--c-focus-ring: #012851;
+
 	--c-pdf-bg: #ebebeb;
 	--c-pdf-ctrl: #d8d8d8;
 	--c-pdf-text: #333333;
@@ -123,6 +129,9 @@
 		/* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
 		--c-header: #012851;
 
+		/* Focus ring: brand-mint in dark mode — 9.2:1 on canvas, 7.1:1 on surface */
+		--c-focus-ring: #a1dcd8;
+
 		--c-pdf-bg: #010e1e;
 		--c-pdf-ctrl: #011526;
 		--c-pdf-text: #f0efe9;
@@ -155,6 +164,9 @@
 	/* Header at brand-navy: 4.99:1 with ink-3 (WCAG AA ✓), visually above canvas */
 	--c-header: #012851;
 
+	/* Focus ring: brand-mint in dark mode — 9.2:1 on canvas, 7.1:1 on surface */
+	--c-focus-ring: #a1dcd8;
+
 	--c-pdf-bg: #010e1e;
 	--c-pdf-ctrl: #011526;
 	--c-pdf-text: #f0efe9;
@@ -232,4 +244,17 @@
 		text-decoration-thickness: 2px;
 		text-underline-offset: 4px;
 	}
+
+	/* Fallback focus ring for any interactive element not styled with ring-focus-ring */
+	:focus-visible {
+		outline: 2px solid var(--c-focus-ring);
+		outline-offset: 2px;
+	}
+}
+
+/* Ensure focus rings are visible in Windows High Contrast / forced-colors mode */
+@media (forced-colors: active) {
+	:focus-visible {
+		outline: 3px solid ButtonText;
+	}
 }