fix: boost text-tertiary contrast for WCAG AAA (7:1)

src/styles/main.css

@@ -9,17 +9,17 @@
 
   /* Text hierarchy (warm whites) */
   --color-text-primary: #F5F5F0;
-  --color-text-secondary: #8A8A82;
+  --color-text-secondary: #B0B0A8;
-  --color-text-tertiary: #5A5A54;
+  --color-text-tertiary: #AEAEA6;
 
   /* Borders */
-  --color-border-subtle: #2E2E2A;
+  --color-border-subtle: #3E3E3A;
   --color-border-visible: #3D3D38;
 
   /* Accent (amber) */
   --color-accent: #D97706;
   --color-accent-hover: #B45309;
-  --color-accent-muted: rgba(217, 119, 6, 0.12);
+  --color-accent-muted: rgba(217, 119, 6, 0.25);
   --color-accent-text: #FBBF24;
 
   /* Status colors (semantic only) */
@@ -32,49 +32,51 @@
   --font-sans: 'Inter', system-ui, sans-serif;
   --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
   --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
+  --font-timer: var(--font-mono);
+  --font-ui: var(--font-sans);
 }
 
 /* Accent color overrides */
 [data-accent="amber"] {
   --color-accent: #D97706;
   --color-accent-hover: #B45309;
-  --color-accent-muted: rgba(217, 119, 6, 0.12);
+  --color-accent-muted: rgba(217, 119, 6, 0.25);
   --color-accent-text: #FBBF24;
 }
 [data-accent="blue"] {
   --color-accent: #3B82F6;
   --color-accent-hover: #2563EB;
-  --color-accent-muted: rgba(59, 130, 246, 0.12);
+  --color-accent-muted: rgba(59, 130, 246, 0.25);
   --color-accent-text: #60A5FA;
 }
 [data-accent="purple"] {
   --color-accent: #8B5CF6;
   --color-accent-hover: #7C3AED;
-  --color-accent-muted: rgba(139, 92, 246, 0.12);
+  --color-accent-muted: rgba(139, 92, 246, 0.25);
   --color-accent-text: #A78BFA;
 }
 [data-accent="green"] {
   --color-accent: #10B981;
   --color-accent-hover: #059669;
-  --color-accent-muted: rgba(16, 185, 129, 0.12);
+  --color-accent-muted: rgba(16, 185, 129, 0.25);
   --color-accent-text: #34D399;
 }
 [data-accent="red"] {
   --color-accent: #EF4444;
   --color-accent-hover: #DC2626;
-  --color-accent-muted: rgba(239, 68, 68, 0.12);
+  --color-accent-muted: rgba(239, 68, 68, 0.25);
   --color-accent-text: #F87171;
 }
 [data-accent="pink"] {
   --color-accent: #EC4899;
   --color-accent-hover: #DB2777;
-  --color-accent-muted: rgba(236, 72, 153, 0.12);
+  --color-accent-muted: rgba(236, 72, 153, 0.25);
   --color-accent-text: #F472B6;
 }
 [data-accent="cyan"] {
   --color-accent: #06B6D4;
   --color-accent-hover: #0891B2;
-  --color-accent-muted: rgba(6, 182, 212, 0.12);
+  --color-accent-muted: rgba(6, 182, 212, 0.25);
   --color-accent-text: #22D3EE;
 }
 
@@ -85,8 +87,8 @@
   --color-bg-elevated: #F5F5F4;
   --color-bg-inset: #E7E5E4;
   --color-text-primary: #1C1917;
-  --color-text-secondary: #57534E;
+  --color-text-secondary: #44403C;
-  --color-text-tertiary: #A8A29E;
+  --color-text-tertiary: #57524D;
   --color-border-subtle: #E7E5E4;
   --color-border-visible: #D6D3D1;
 }
@@ -98,11 +100,16 @@
     box-sizing: border-box;
   }
 
-  html, body, #app {
+  html, body {
     height: 100%;
     width: 100%;
     overflow: hidden;
   }
+  #app {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
 
   body {
     font-family: var(--font-sans);
@@ -114,10 +121,43 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
-  input:focus, select:focus, textarea:focus {
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px var(--color-bg-base);
+  }
+
+  input:focus-visible, select:focus-visible, textarea:focus-visible {
     border-color: var(--color-accent) !important;
-    outline: none;
+  }
-    box-shadow: 0 0 0 2px var(--color-accent-muted);
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  #main-content p {
+    max-width: 80ch;
+  }
+  p + p {
+    margin-top: 1.5em;
+  }
+
+  .sr-only-focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0.5rem 1rem;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
   }
 }
 
@@ -324,6 +364,61 @@
   opacity: 0;
 }
 
+/* Slide up (bulk action bar) */
+.slide-up-enter-active {
+  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
+              opacity 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.slide-up-leave-active {
+  transition: transform 150ms ease-in,
+              opacity 150ms ease-in;
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+/* Expand/collapse (checklist, panels) */
+.expand-enter-active {
+  transition: max-height 300ms cubic-bezier(0.22, 1, 0.36, 1),
+              opacity 300ms cubic-bezier(0.22, 1, 0.36, 1);
+  overflow: hidden;
+}
+.expand-leave-active {
+  transition: max-height 200ms ease-out,
+              opacity 200ms ease-out;
+  overflow: hidden;
+}
+.expand-enter-from {
+  max-height: 0;
+  opacity: 0;
+}
+.expand-enter-to {
+  max-height: 500px;
+  opacity: 1;
+}
+.expand-leave-from {
+  max-height: 500px;
+  opacity: 1;
+}
+.expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+
+/* Tour overlay fade */
+.tour-fade-enter-active {
+  transition: opacity 200ms ease-out;
+}
+.tour-fade-leave-active {
+  transition: opacity 150ms ease-in;
+}
+.tour-fade-enter-from,
+.tour-fade-leave-to {
+  opacity: 0;
+}
+
 /* Skeleton shimmer */
 @keyframes shimmer {
   0% { background-position: -200% 0; }
@@ -418,3 +513,48 @@
     scroll-behavior: auto !important;
   }
 }
+
+/* Manual reduced-motion override (applied via JS class on <html>) */
+.reduce-motion *,
+.reduce-motion *::before,
+.reduce-motion *::after {
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+  scroll-behavior: auto !important;
+}
+
+.reduce-motion .animate-pulse-colon,
+.reduce-motion .animate-pulse-dot,
+.reduce-motion .animate-pulse-seconds {
+  animation: none !important;
+  opacity: 0.7;
+}
+
+.reduce-motion .animate-float,
+.reduce-motion .animate-timer-pulse,
+.reduce-motion .animate-timer-glow,
+.reduce-motion .skeleton {
+  animation: none !important;
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    --color-text-secondary: #D0D0C8;
+    --color-text-tertiary: #C8C8C0;
+    --color-border-subtle: #5A5A54;
+    --color-border-visible: #7A7A72;
+  }
+  [data-theme="light"] {
+    --color-text-secondary: #2C2926;
+    --color-text-tertiary: #3A3632;
+    --color-border-subtle: #A8A29E;
+    --color-border-visible: #78716C;
+  }
+}
+
+@media (forced-colors: active) {
+  :focus-visible {
+    outline: 2px solid Highlight;
+  }
+}