fix(a11y): improve focus outline contrast for keyboard navigation

- Increase focus ring opacity from 10% to 50% in focus-ring shortcut
- Add ring-offset-bg for consistent offset coloring
- Update input-base focus states (border-fg/50, ring-fg/30) for better visibility
- Change link focus outline from var(--border) to var(--fg-muted) for WCAG compliance

Fixes #647

Author: JarvisInvestInsight

app/assets/main.css

@@ -129,7 +129,7 @@ a:hover {
 }
 
 a:focus-visible {
-  outline: 2px solid var(--border);
+  outline: 2px solid var(--fg-muted);
   outline-offset: 2px;
   border-radius: 2px;
 }

uno.config.ts

@@ -122,8 +122,8 @@ export default defineConfig({
     ['container', 'max-w-6xl mx-auto px-4 sm:px-6'],
     ['container-sm', 'max-w-4xl mx-auto px-4 sm:px-6'],
 
-    // Focus states - subtle but accessible
-    ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/10 ring-offset-2)'],
+    // Focus states - accessible contrast for keyboard navigation
+    ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/50 ring-offset-2 ring-offset-bg)'],
 
     // Buttons
     [
@@ -152,7 +152,7 @@ export default defineConfig({
     // Form elements
     [
       'input-base',
-      'w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-fg/10)',
+      'w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/50 outline-none ring-1 ring-fg/30)',
     ],
 
     // Tags/badges