From 17889df2206ae578d2377dc62b4bf935206a4afd Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 31 Mar 2026 15:12:00 +0200
Subject: [PATCH] feat(focus-rings): add --c-focus-ring token to CSS design
 system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Light: #012851 (brand-navy, 14:1 on white)
Dark:  #a1dcd8 (brand-mint, 9.2:1 on canvas)
- @theme inline mapping → Tailwind ring-focus-ring utility
- Global :focus-visible fallback in @layer base
- forced-colors fallback for Windows High Contrast mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/routes/layout.css | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index 41486cc6..15e7d081 100644
--- a/frontend/src/routes/layout.css
+++ b/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;
+	}
 }