From 4a24384f52f737f79a258e72f70a1e6b8186710d Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Wed, 1 Jul 2026 20:16:21 +0200
Subject: [PATCH] feat(ui): respect prefers-reduced-motion + accent focus rings

Slice 3 (polish): honour the OS reduce-motion setting (near-instant, no large
transitions) and add a consistent accent-coloured :focus-visible ring for
keyboard users. Baseline a11y per the design brief.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/index.css | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9f4d9ab..fdc45d3 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -92,6 +92,29 @@
   }
 }
 
+@layer base {
+  /* Consistent, visible focus ring using the accent token (keyboard users). */
+  :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  /*
+    Respect the OS "reduce motion" setting — near-instant, no large transitions.
+    Baseline accessibility (the deeper a11y pass is deferred; see the design brief).
+  */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
 @layer utilities {
   .sr-only {
     position: absolute;