feat(ui): site-wide UX/UI audit — unified buttons, tokens, accessibility

- Add shared button system (.btn-primary/secondary/tertiary/active) in globals.css
- Replace 40+ hardcoded rgba() values with design tokens across all CSS modules
- Add skip link, :focus-visible indicators, and ARIA landmarks
- Standardise button labels ("+ Compare" / "✓ Comparing") across all components
- Add collapse/minimize toggle to ComparisonToast
- Fix heading hierarchy (h3→h2 in ComparisonView)
- Add aria-live on search results, aria-label on trend SVGs
- Add "Search" nav link, fix footer empty section, unify max-widths
- Darken --text-muted for WCAG AA compliance (4.6:1 contrast ratio)
- Net reduction of ~180 lines through button style deduplication

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

nextjs-app/app/globals.css

@@ -12,7 +12,7 @@
     
     --text-primary: #1a1612;
     --text-secondary: #5c564d;
-    --text-muted: #8a847a;
+    --text-muted: #6d685f;  /* Darkened for WCAG AA (4.6:1 on cream) */
     --text-inverse: #faf7f2;
     
     --accent-coral: #e07256;
@@ -20,8 +20,19 @@
     --accent-teal: #2d7d7d;
     --accent-teal-light: #3a9e9e;
     --accent-gold: #c9a227;
+    --accent-gold-text: #7a6800;  /* WCAG AA safe for text on white/cream */
     --accent-navy: #2c3e50;
 
+    /* Semantic background tints (replaces hardcoded rgba values) */
+    --accent-coral-bg: rgba(224, 114, 86, 0.12);
+    --accent-teal-bg: rgba(45, 125, 125, 0.12);
+    --accent-gold-bg: rgba(201, 162, 39, 0.12);
+
+    /* Trend colours */
+    --trend-up: #16a34a;
+    --trend-down: var(--accent-coral);
+    --trend-stable: var(--text-muted);
+
     /* Button/Action colors */
     --primary: #e07256;
     --primary-dark: #c45a3f;
@@ -67,6 +78,107 @@ body {
     min-height: 100vh;
 }
 
+/* Skip link — visible only on focus for keyboard users */
+.skip-link {
+    position: absolute;
+    top: -100px;
+    left: 1rem;
+    z-index: 10000;
+    padding: 0.5rem 1rem;
+    background: var(--bg-accent);
+    color: var(--text-inverse);
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: var(--radius-md);
+    text-decoration: none;
+    transition: top 0.15s ease;
+}
+.skip-link:focus {
+    top: 0.5rem;
+}
+
+/* Focus indicators — branded and visible on cream background */
+:focus-visible {
+    outline: 2px solid var(--accent-coral);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+}
+
+/* ================================================================
+   Shared button classes — use these across all components
+   ================================================================ */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.375rem;
+    padding: 0.5rem 1rem;
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1;
+    border-radius: 6px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all var(--transition);
+    text-decoration: none;
+    white-space: nowrap;
+}
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Primary: coral background — main CTAs (Search, Compare Now) */
+.btn-primary {
+    background: var(--accent-coral);
+    color: white;
+    border-color: var(--accent-coral);
+}
+.btn-primary:hover:not(:disabled) {
+    background: var(--accent-coral-dark);
+    border-color: var(--accent-coral-dark);
+}
+
+/* Secondary: teal outline — supporting actions (+ Compare) */
+.btn-secondary {
+    background: transparent;
+    color: var(--accent-teal);
+    border-color: var(--accent-teal);
+}
+.btn-secondary:hover:not(:disabled) {
+    background: var(--accent-teal-bg);
+}
+
+/* Tertiary: subtle gray — low-emphasis (View, Clear) */
+.btn-tertiary {
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    border-color: var(--border-color);
+}
+.btn-tertiary:hover:not(:disabled) {
+    background: var(--border-color);
+    color: var(--text-primary);
+}
+
+/* Danger/active: for remove/destructive actions or active toggle state */
+.btn-active {
+    background: var(--accent-teal-bg);
+    color: var(--accent-teal);
+    border-color: var(--accent-teal);
+}
+.btn-active:hover:not(:disabled) {
+    background: transparent;
+    color: var(--accent-coral);
+    border-color: var(--accent-coral);
+}
+
+/* Small variant */
+.btn-sm {
+    padding: 0.3rem 0.625rem;
+    font-size: 0.8125rem;
+}
+
 /* Subtle noise texture overlay - editorial paper feel */
 .noise-overlay {
     position: fixed;

nextjs-app/app/layout.tsx

@@ -67,8 +67,9 @@ export default function RootLayout({
       <body className={`${dmSans.variable} ${playfairDisplay.variable}`}>
         <div className="noise-overlay" />
         <ComparisonProvider>
+          <a href="#main-content" className="skip-link">Skip to main content</a>
           <Navigation />
-          <main className="main">
+          <main id="main-content" className="main">
             {children}
           </main>
           <ComparisonToast />