fix(ui): raise design tokens to clear WCAG AA contrast

e2e/a11y.spec.ts

@@ -1,31 +1,10 @@
 import AxeBuilder from '@axe-core/playwright'
 import { test, expect, type Page } from './fixture'
 
-// Known preexisting violations — these are design decisions that need
-// product/design sign-off to change (e.g. tweaking brand colors). The spec
-// filters them out so this suite passes today and NEW regressions will still
-// fail. When you accept a violation here, link an issue so it's tracked.
-//
-// .btn-primary: white text on #007AFF gives 4.01:1 (AA needs 4.5:1 for 13px
-// normal). Fixing requires either darkening the brand blue or bumping button
-// text to a size/weight that qualifies as "large text" (3:1 threshold).
-//
-// .nav-item (sidebar nav text "Proxy Profiles" / "About"), .section-description,
-// empty-state paragraphs: all use --text-secondary for visual hierarchy, which
-// at rgba(60,60,67,0.6) doesn't clear AA 4.5:1 on light backgrounds. Global
-// fix: raise --text-secondary opacity to ~0.72 (or #595962), which would push
-// everything above 4.5:1 in one token change.
-const KNOWN_CONTRAST_EXCEPTIONS: Array<string | RegExp> = [
-  /#addProfileBtn/,
-  /#saveAllBtn/,
-  /#saveProfileBtn/,
-  /#importProfilesBtn/,
-  /#exportProfilesBtn/,
-  /\.btn-primary/,
-  /li\[data-section=/,
-  /\.section-description/,
-  /\.empty-state/,
-]
+// Known preexisting violations — filtered here so the suite passes today while
+// NEW regressions still fail. Keep this list minimal and annotated: each entry
+// is a design decision the project has consciously accepted. Empty by default.
+const KNOWN_CONTRAST_EXCEPTIONS: Array<string | RegExp> = []
 
 function isKnownException(target: string[]): boolean {
   return target.some(sel =>

options.css

@@ -1,9 +1,9 @@
 /* Global Styles - Apple Human Interface Guidelines Inspired */
 :root {
   /* Color System */
-  --primary-color: #007AFF;
+  --primary-color: #0062CC;
   --primary-hover: #0051D5;
-  --primary-light: rgba(0, 122, 255, 0.1);
+  --primary-light: rgba(0, 98, 204, 0.1);
   --secondary-color: #5856D6;
   --secondary-hover: #4240C4;
   --success-color: #34C759;
@@ -16,7 +16,7 @@
 
   /* Text Colors */
   --text-primary: rgba(0, 0, 0, 0.85);
-  --text-secondary: rgba(60, 60, 67, 0.6);
+  --text-secondary: rgba(60, 60, 67, 0.76);
   --text-tertiary: rgba(60, 60, 67, 0.3);
   --text-inverse: #FFFFFF;
 
@@ -134,7 +134,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --text-primary: #FFFFFF;
-    --text-secondary: #8E8E93;
+    --text-secondary: #AEAEB2;
     --text-tertiary: #48484A;
 
     --background: #000000;
@@ -364,6 +364,15 @@ html {
   box-shadow: inset 0 1px 3px rgba(0, 122, 255, 0.1);
 }
 
+/* Dark-mode override: --primary-color (#0062CC) isn't readable on the
+   near-black sidebar even with the --primary-light tint. iOS convention
+   (and WCAG AA) here is white text + tinted bg. */
+@media (prefers-color-scheme: dark) {
+  .nav-item.active {
+    color: var(--text-primary);
+  }
+}
+
 .nav-item.active .icon {
   animation: pulse 2s infinite;
 }

popup.css

@@ -9,10 +9,10 @@
 
 :root {
     /* Color System - Apple Human Interface Guidelines */
-    --primary-color: #007AFF;
+    --primary-color: #0062CC;
     --primary-hover: #0051D5;
-    --primary-light: rgba(0, 122, 255, 0.1);
-    --primary-lighter: rgba(0, 122, 255, 0.05);
+    --primary-light: rgba(0, 98, 204, 0.1);
+    --primary-lighter: rgba(0, 98, 204, 0.05);
     --secondary-color: #5856D6;
     --secondary-hover: #4240C4;
     --success-color: #34C759;
@@ -25,7 +25,7 @@
 
     /* Text Colors */
     --text-primary: rgba(0, 0, 0, 0.85);
-    --text-secondary: rgba(60, 60, 67, 0.6);
+    --text-secondary: rgba(60, 60, 67, 0.76);
     --text-tertiary: rgba(60, 60, 67, 0.3);
     --text-inverse: #FFFFFF;
 
@@ -88,7 +88,7 @@
         --surface-bright: rgba(44, 44, 46, 0.9);
         --surface-brightest: rgba(44, 44, 46, 1);
         --text-primary: #FFFFFF;
-        --text-secondary: #8E8E93;
+        --text-secondary: #AEAEB2;
         --text-tertiary: #48484A;
         --border-color: #38383A;
         --border-hover: #48484A;