diff --git a/frontend/src/components/AnalyticsDashboard.tsx b/frontend/src/components/AnalyticsDashboard.tsx
index f0ae746..8789326 100644
--- a/frontend/src/components/AnalyticsDashboard.tsx
+++ b/frontend/src/components/AnalyticsDashboard.tsx
@@ -535,7 +535,7 @@ export default function AnalyticsDashboard({ onClose }: { onClose: () => void })
 
   const presetDonutData = useMemo(() => {
     if (!data?.by_preset) return []
-    const colors = ['var(--accent)', 'rgba(212,67,47,0.7)', 'rgba(212,67,47,0.45)', 'rgba(212,67,47,0.25)', 'rgba(212,67,47,0.12)']
+    const colors = ['var(--accent)', 'color-mix(in srgb, var(--accent) 70%, var(--bg))', 'color-mix(in srgb, var(--accent) 50%, var(--bg))', 'color-mix(in srgb, var(--accent) 30%, var(--bg))', 'color-mix(in srgb, var(--accent) 15%, var(--bg))']
     return presetOrder
       .filter(k => data.by_preset[k]?.count > 0)
       .map((k, i) => ({
diff --git a/frontend/src/components/Grid.tsx b/frontend/src/components/Grid.tsx
index fb7650f..c2d90e2 100644
--- a/frontend/src/components/Grid.tsx
+++ b/frontend/src/components/Grid.tsx
@@ -107,8 +107,8 @@ export default function Grid() {
                   x={x} y={y}
                   width={CELL} height={CELL}
                   fill={fill}
-                  stroke="var(--cell-border)"
-                  strokeWidth={0.5}
+                  stroke={isSelected ? 'var(--accent)' : 'var(--cell-border)'}
+                  strokeWidth={isSelected ? 2 : 0.5}
                 />
                 {!isBlack && num && (
                   <text
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 3973de0..cdc1cb4 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -13,58 +13,62 @@
   --text-secondary: #454545;
   --text-tertiary: #4a4a4a;
   --border: #e0dcd8;
-  --border-light: #c5c0ba;
-  --accent: #d4432f;
-  --accent-hover: #ba3825;
-  --accent-soft: rgba(212, 67, 47, 0.06);
+  --border-light: #8f8b85;
+  --accent: #9c2418;
+  --accent-hover: #7e1d13;
+  --accent-soft: rgba(156, 36, 24, 0.07);
+  --btn-primary-text: #ffffff;
   --cell-white: #ffffff;
   --cell-black: #0d0d0d;
   --cell-selected: #f5c888;
   --cell-active: #f0d8a8;
   --cell-border: #8a8480;
-  --correct: #2d7a4f;
-  --incorrect: #c93030;
-  --revealed: #3570a8;
+  --correct: #18603a;
+  --incorrect: #a90f1c;
+  --revealed: #1d5286;
   --ink-color: #3a2820;
   --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
   --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
   --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
   --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
-  --color-error: #ef4444;
-  --color-success: #22c55e;
+  --color-error: #a32020;
+  --color-success: #0f612f;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
     --bg: #111111; --bg-alt: #191919; --surface: #1a1a1a; --surface-raised: #222;
     --text: #ededed; --text-secondary: #b5b5b5; --text-tertiary: #ababab;
-    --border: #2a2a2a; --border-light: #222;
-    --accent: #e8594a; --accent-hover: #d04a3c; --accent-soft: rgba(232, 89, 74, 0.1);
+    --border: #6b6b6b; --border-light: #8a8a8a;
+    --accent: #ee8a82; --accent-hover: #f5a49d; --accent-soft: rgba(238, 138, 130, 0.12); --btn-primary-text: #161313;
     --cell-white: #1e1e1e; --cell-black: #090909;
-    --cell-selected: #5a3818; --cell-active: #4a3020; --cell-border: #555555;
-    --correct: #4cb87a; --incorrect: #e05050; --revealed: #5a9ad8; --ink-color: #d0b090;
+    --cell-selected: #8a6a33; --cell-active: #7c6a3a; --cell-border: #7a7a7a;
+    --correct: #4cb87a; --incorrect: #ed9f9f; --revealed: #7bb4e8; --ink-color: #d0b090;
     --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
     --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
-    --color-error: #f87171;
+    --color-error: #f4a3a3;
     --color-success: #4ade80;
   }
 }
 :root[data-theme="dark"] {
   --bg: #111111; --bg-alt: #191919; --surface: #1a1a1a; --surface-raised: #222;
   --text: #ededed; --text-secondary: #b5b5b5; --text-tertiary: #ababab;
-  --border: #2a2a2a; --border-light: #222;
-  --accent: #e8594a; --accent-hover: #d04a3c; --accent-soft: rgba(232, 89, 74, 0.1);
+  --border: #6b6b6b; --border-light: #8a8a8a;
+  --accent: #ee8a82; --accent-hover: #f5a49d; --accent-soft: rgba(238, 138, 130, 0.12); --btn-primary-text: #161313;
   --cell-white: #1e1e1e; --cell-black: #090909;
-  --cell-selected: #5a3818; --cell-active: #4a3020; --cell-border: #555555;
-  --correct: #4cb87a; --incorrect: #e05050; --revealed: #5a9ad8; --ink-color: #d0b090;
+  --cell-selected: #8a6a33; --cell-active: #7c6a3a; --cell-border: #7a7a7a;
+  --correct: #4cb87a; --incorrect: #ed9f9f; --revealed: #7bb4e8; --ink-color: #d0b090;
   --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
   --shadow-lg: 0 12px 40px rgba(0,0,0,0.4);
-  --color-error: #f87171;
+  --color-error: #f4a3a3;
   --color-success: #4ade80;
 }
-[data-colorblind="protanopia"] { --correct: #3b82f6; --incorrect: #f97316; }
-[data-colorblind="deuteranopia"] { --correct: #3b82f6; --incorrect: #f97316; }
-[data-colorblind="tritanopia"] { --correct: #ef4444; --incorrect: #06b6d4; }
+[data-colorblind="protanopia"] { --correct: #1d6fe0; --incorrect: #b45309; }
+:root[data-theme="dark"][data-colorblind="protanopia"] { --correct: #7db4f0; --incorrect: #f5b078; }
+[data-colorblind="deuteranopia"] { --correct: #1d6fe0; --incorrect: #b45309; }
+:root[data-theme="dark"][data-colorblind="deuteranopia"] { --correct: #7db4f0; --incorrect: #f5b078; }
+[data-colorblind="tritanopia"] { --correct: #dc2626; --incorrect: #0b6a82; }
+:root[data-theme="dark"][data-colorblind="tritanopia"] { --correct: #f1a0a0; --incorrect: #74d0e8; }
 
 .grid-sr-grid {
   position: absolute;
@@ -163,7 +167,7 @@ body { font-family: var(--font-body); background: var(--bg); color: var(--text);
 .btn:active { transform: scale(0.97); }
 .btn:disabled { opacity: 0.3; cursor: default; }
 .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+.btn-primary { background: var(--accent); color: var(--btn-primary-text); border-color: var(--accent); }
 .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
 .btn-sm { font-size: 0.625rem; padding: 0.5rem 0.75rem; min-height: 2.75rem; min-width: 2.75rem; }
 .btn-ghost { border-color: transparent; }
@@ -2648,7 +2652,7 @@ svg text {
 .cv-select { position: relative; display: inline-block; }
 .cv-select-trigger {
   display: flex; align-items: center; gap: 6px; justify-content: space-between;
-  background: var(--surface); border: 1px solid var(--border);
+  background: var(--surface); border: 1px solid var(--border-light);
   color: var(--text); cursor: pointer; min-width: 6rem;
   font-family: var(--font-mono); font-size: 0.688rem;
   padding: 0.375rem 0.625rem;
@@ -2675,7 +2679,7 @@ svg text {
 
 .cv-number {
   display: inline-flex; align-items: center;
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-light);
 }
 .cv-number-btn {
   background: var(--surface); border: none; cursor: pointer;
@@ -3890,3 +3894,9 @@ svg text {
   .settings-body { flex-direction: column; }
   .settings-sidebar { flex-direction: row; overflow-x: auto; }
 }
+
+/* focus-visible contracts for composite controls */
+.cv-number-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.cv-select-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.cv-select-option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }