From d46ec16770adc2ee04ab9edae835030a0e99c70b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Almeida?=
 <57680069+zeval@users.noreply.github.com>
Date: Fri, 31 Jul 2026 10:55:29 +0100
Subject: [PATCH] fix: improve interactive accent contrast (#2075)

---
 apps/packages/ui/src/context-menu.tsx         | 10 +--
 apps/packages/ui/src/dropdown-menu.tsx        | 10 +--
 apps/packages/ui/src/menubar.tsx              | 10 +--
 apps/packages/ui/src/select.tsx               |  2 +-
 apps/packages/ui/src/table.tsx                |  2 +-
 .../[id]/components/instruction-file-list.tsx |  6 +-
 .../office/components/new-task-bottom-bar.tsx |  4 +-
 .../components/new-task-participant-row.tsx   |  2 +-
 .../components/new-task-selector-row.tsx      |  8 +--
 .../app/office/components/new-task-stages.tsx |  8 +--
 apps/web/app/office/page-client.tsx           |  2 +-
 apps/web/app/office/tasks/task-group.tsx      |  6 +-
 apps/web/app/office/tasks/task-sort.tsx       |  4 +-
 .../settings/export/export-file-tree.test.tsx |  2 +-
 .../settings/export/export-file-tree.tsx      |  4 +-
 .../office/workspace/skills/skill-list.tsx    |  4 +-
 .../monaco/diff-viewer-context-menu.tsx       |  9 ++-
 .../editors/tiptap/plan-bubble-menu.tsx       |  4 +-
 .../components/github/multi-pr-ci-popover.tsx |  6 +-
 .../components/review/review-file-tree.tsx    |  4 +-
 apps/web/components/shared/file-tree.test.tsx |  2 +-
 apps/web/components/shared/file-tree.tsx      |  4 +-
 .../components/task/base-branch-picker.tsx    |  6 +-
 .../task/changes-panel-file-row.test.tsx      |  6 +-
 .../task/changes-panel-file-row.tsx           |  4 +-
 .../task/changes-panel-pr-files.tsx           |  6 +-
 .../chat/messages/message-comment-surface.tsx |  2 +-
 .../components/task/file-browser-parts.tsx    |  6 +-
 .../task/mobile/mobile-repos-section.tsx      |  4 +-
 .../task/mobile/mobile-sessions-section.tsx   |  4 +-
 .../task/mobile/mobile-terminals-section.tsx  |  4 +-
 .../task/simple/OfficeSimplePane.tsx          |  2 +-
 .../simple/components/priority-picker.tsx     |  6 +-
 .../task/simple/components/status-picker.tsx  |  6 +-
 .../task/simple/components/sub-issues-row.tsx |  2 +-
 .../task/simple/subtask-stepper.tsx           |  2 +-
 .../components/task/task-pr-picker-dialog.tsx |  4 +-
 .../web/e2e/tests/pr/pr-multi-popover.spec.ts | 70 +++++++++++++++++++
 ...29-interactive-accent-surface-semantics.md | 49 +++++++++++++
 docs/decisions/INDEX.md                       |  1 +
 40 files changed, 213 insertions(+), 84 deletions(-)
 create mode 100644 docs/decisions/2026-07-29-interactive-accent-surface-semantics.md

diff --git a/apps/packages/ui/src/context-menu.tsx b/apps/packages/ui/src/context-menu.tsx
index 506f7cf6ad..31ceb27435 100644
--- a/apps/packages/ui/src/context-menu.tsx
+++ b/apps/packages/ui/src/context-menu.tsx
@@ -76,7 +76,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -97,7 +97,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground data-open:bg-muted data-open:text-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -134,7 +134,7 @@ function ContextMenuCheckboxItem({
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       checked={checked}
@@ -159,7 +159,7 @@ function ContextMenuRadioItem({
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -209,7 +209,7 @@ function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span
     <span
       data-slot="context-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest",
+        "text-muted-foreground group-focus/context-menu-item:text-foreground ml-auto text-[0.625rem] tracking-widest",
         className,
       )}
       {...props}
diff --git a/apps/packages/ui/src/dropdown-menu.tsx b/apps/packages/ui/src/dropdown-menu.tsx
index dbd4d395ef..8bf908662f 100644
--- a/apps/packages/ui/src/dropdown-menu.tsx
+++ b/apps/packages/ui/src/dropdown-menu.tsx
@@ -63,7 +63,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground not-data-[variant=destructive]:focus:[&_.text-muted-foreground:not(svg)]:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -81,7 +81,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground focus:[&_.text-muted-foreground:not(svg)]:text-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       checked={checked}
@@ -115,7 +115,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground focus:[&_.text-muted-foreground:not(svg)]:text-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -168,7 +168,7 @@ function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"spa
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest",
+        "text-muted-foreground group-focus/dropdown-menu-item:text-foreground ml-auto text-[0.625rem] tracking-widest",
         className,
       )}
       {...props}
@@ -193,7 +193,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground focus:[&_.text-muted-foreground:not(svg)]:text-foreground data-open:bg-muted data-open:text-foreground data-open:[&_.text-muted-foreground:not(svg)]:text-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
diff --git a/apps/packages/ui/src/menubar.tsx b/apps/packages/ui/src/menubar.tsx
index 05826cf982..d5a9d50574 100644
--- a/apps/packages/ui/src/menubar.tsx
+++ b/apps/packages/ui/src/menubar.tsx
@@ -87,7 +87,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -105,7 +105,7 @@ function MenubarCheckboxItem({
     <MenubarPrimitive.CheckboxItem
       data-slot="menubar-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       checked={checked}
@@ -130,7 +130,7 @@ function MenubarRadioItem({
     <MenubarPrimitive.RadioItem
       data-slot="menubar-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -180,7 +180,7 @@ function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">)
     <span
       data-slot="menubar-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/menubar-item:text-accent-foreground text-[0.625rem] tracking-widest ml-auto",
+        "text-muted-foreground group-focus/menubar-item:text-foreground text-[0.625rem] tracking-widest ml-auto",
         className,
       )}
       {...props}
@@ -205,7 +205,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-none select-none",
+        "focus:bg-muted focus:text-foreground data-open:bg-muted data-open:text-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-none select-none",
         className,
       )}
       {...props}
diff --git a/apps/packages/ui/src/select.tsx b/apps/packages/ui/src/select.tsx
index fb2fd9dfad..c780705f7d 100644
--- a/apps/packages/ui/src/select.tsx
+++ b/apps/packages/ui/src/select.tsx
@@ -111,7 +111,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-muted focus:text-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
diff --git a/apps/packages/ui/src/table.tsx b/apps/packages/ui/src/table.tsx
index 4e1b14ccde..e795845d98 100644
--- a/apps/packages/ui/src/table.tsx
+++ b/apps/packages/ui/src/table.tsx
@@ -45,7 +45,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-accent/55 focus-within:bg-accent/55 data-[state=selected]:bg-accent/70 border-b transition-colors data-[disabled=true]:opacity-45",
+        "hover:bg-muted focus-within:bg-muted data-[state=selected]:bg-card data-[state=selected]:text-foreground data-[state=selected]:ring-1 data-[state=selected]:ring-inset data-[state=selected]:ring-primary/50 data-[state=selected]:hover:bg-card data-[state=selected]:focus-within:bg-card border-b transition-colors data-[disabled=true]:opacity-45",
         className,
       )}
       {...props}
diff --git a/apps/web/app/office/agents/[id]/components/instruction-file-list.tsx b/apps/web/app/office/agents/[id]/components/instruction-file-list.tsx
index 86f2b6641e..3143dd219d 100644
--- a/apps/web/app/office/agents/[id]/components/instruction-file-list.tsx
+++ b/apps/web/app/office/agents/[id]/components/instruction-file-list.tsx
@@ -104,9 +104,9 @@ function FileRow({
     <button
       onClick={onSelect}
       className={cn(
-        "w-full flex items-center gap-2 px-3 py-1.5 text-left text-sm cursor-pointer",
-        "hover:bg-accent/50 transition-colors",
-        isSelected && "bg-accent",
+        "w-full flex items-center gap-2 border border-transparent px-3 py-1.5 text-left text-sm cursor-pointer",
+        isSelected ? "border-primary/50 bg-card" : "hover:bg-muted",
+        "transition-colors",
       )}
     >
       <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
diff --git a/apps/web/app/office/components/new-task-bottom-bar.tsx b/apps/web/app/office/components/new-task-bottom-bar.tsx
index ab93d2c1f3..e8a29f0bdc 100644
--- a/apps/web/app/office/components/new-task-bottom-bar.tsx
+++ b/apps/web/app/office/components/new-task-bottom-bar.tsx
@@ -69,7 +69,7 @@ function StatusChip({ draft, onUpdate }: Props) {
           <button
             key={opt.value}
             type="button"
-            className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer flex items-center gap-2"
+            className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer flex items-center gap-2"
             onClick={() => onUpdate({ status: opt.value })}
           >
             <IconCircleDot className={`h-3.5 w-3.5 ${opt.className}`} />
@@ -114,7 +114,7 @@ function PriorityChip({ draft, onUpdate }: Props) {
             <button
               key={opt.value}
               type="button"
-              className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer flex items-center gap-2"
+              className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer flex items-center gap-2"
               onClick={() => onUpdate({ priority: opt.value })}
             >
               <Icon className={`h-3.5 w-3.5 ${opt.className}`} />
diff --git a/apps/web/app/office/components/new-task-participant-row.tsx b/apps/web/app/office/components/new-task-participant-row.tsx
index 13675777e4..8d3e8bfd15 100644
--- a/apps/web/app/office/components/new-task-participant-row.tsx
+++ b/apps/web/app/office/components/new-task-participant-row.tsx
@@ -41,7 +41,7 @@ export function ParticipantRow({
             <button
               key={agent.id}
               type="button"
-              className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer flex items-center gap-2"
+              className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer flex items-center gap-2"
               onClick={() => toggle(agent.id)}
             >
               <span
diff --git a/apps/web/app/office/components/new-task-selector-row.tsx b/apps/web/app/office/components/new-task-selector-row.tsx
index 4ed7aadd09..5605df67d3 100644
--- a/apps/web/app/office/components/new-task-selector-row.tsx
+++ b/apps/web/app/office/components/new-task-selector-row.tsx
@@ -40,7 +40,7 @@ function AgentPickerPopover({
       <PopoverContent className="w-48 p-1" align="start">
         <button
           type="button"
-          className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer"
+          className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer"
           onClick={() => onSelect("")}
         >
           Unassigned
@@ -49,7 +49,7 @@ function AgentPickerPopover({
           <button
             key={agent.id}
             type="button"
-            className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer"
+            className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer"
             onClick={() => onSelect(agent.id)}
           >
             {agent.name}
@@ -80,7 +80,7 @@ function ProjectPickerPopover({
       <PopoverContent className="w-48 p-1" align="start">
         <button
           type="button"
-          className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer"
+          className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer"
           onClick={() => onSelect("")}
         >
           No project
@@ -89,7 +89,7 @@ function ProjectPickerPopover({
           <button
             key={project.id}
             type="button"
-            className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer flex items-center gap-2"
+            className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer flex items-center gap-2"
             onClick={() => onSelect(project.id)}
           >
             {project.color && (
diff --git a/apps/web/app/office/components/new-task-stages.tsx b/apps/web/app/office/components/new-task-stages.tsx
index bc03df1efc..0b97cd7ef6 100644
--- a/apps/web/app/office/components/new-task-stages.tsx
+++ b/apps/web/app/office/components/new-task-stages.tsx
@@ -76,7 +76,7 @@ function AgentMultiSelect({
           <button
             key={agent.id}
             type="button"
-            className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer flex items-center gap-2"
+            className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer flex items-center gap-2"
             onClick={() => toggle(agent.id)}
           >
             <span
@@ -116,7 +116,7 @@ function AgentSingleSelect({
       <PopoverContent className="w-48 p-1" align="start">
         <button
           type="button"
-          className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer"
+          className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer"
           onClick={() => onChange("")}
         >
           None
@@ -125,7 +125,7 @@ function AgentSingleSelect({
           <button
             key={agent.id}
             type="button"
-            className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-accent cursor-pointer"
+            className="w-full text-left px-2 py-1.5 text-sm rounded hover:bg-muted cursor-pointer"
             onClick={() => onChange(agent.id)}
           >
             {agent.name}
@@ -150,7 +150,7 @@ export function NewTaskStages({ stages, onUpdate }: Props) {
     <div className="border border-border rounded-lg overflow-hidden">
       <button
         type="button"
-        className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent/50 transition-colors cursor-pointer"
+        className="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-muted transition-colors cursor-pointer"
         onClick={() => onUpdate({ enabled: !stages.enabled })}
       >
         {stages.enabled ? (
diff --git a/apps/web/app/office/page-client.tsx b/apps/web/app/office/page-client.tsx
index e7f1b4b617..d129307783 100644
--- a/apps/web/app/office/page-client.tsx
+++ b/apps/web/app/office/page-client.tsx
@@ -141,7 +141,7 @@ function RecentTaskRow({ task, agents }: { task: RecentTask; agents: AgentProfil
   return (
     <Link
       href={`/office/tasks/${task.id}`}
-      className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accent/50 transition-colors cursor-pointer"
+      className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-muted/50 transition-colors cursor-pointer"
     >
       <StatusIcon status={task.status} className="h-3.5 w-3.5" />
       <span className="font-mono text-xs text-muted-foreground shrink-0 w-14 truncate">
diff --git a/apps/web/app/office/tasks/task-group.tsx b/apps/web/app/office/tasks/task-group.tsx
index 79185a37c2..6fd361e112 100644
--- a/apps/web/app/office/tasks/task-group.tsx
+++ b/apps/web/app/office/tasks/task-group.tsx
@@ -46,8 +46,10 @@ export function TaskGroup({ groupBy, onGroupByChange }: IssueGroupProps) {
               key={opt.value}
               onClick={() => onGroupByChange(opt.value)}
               className={cn(
-                "flex items-center gap-2 px-2 py-1.5 text-sm rounded-md cursor-pointer text-left",
-                groupBy === opt.value ? "bg-accent text-foreground" : "hover:bg-accent/50",
+                "flex items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left text-sm cursor-pointer",
+                groupBy === opt.value
+                  ? "border-primary/50 bg-card text-foreground"
+                  : "hover:bg-muted",
               )}
             >
               {opt.label}
diff --git a/apps/web/app/office/tasks/task-sort.tsx b/apps/web/app/office/tasks/task-sort.tsx
index d903c491b8..381e0dd64a 100644
--- a/apps/web/app/office/tasks/task-sort.tsx
+++ b/apps/web/app/office/tasks/task-sort.tsx
@@ -43,8 +43,8 @@ export function TaskSort({ field, dir, onFieldChange, onDirChange }: IssueSortPr
               key={f.value}
               onClick={() => onFieldChange(f.value)}
               className={cn(
-                "flex items-center gap-2 px-2 py-1.5 text-sm rounded-md cursor-pointer",
-                field === f.value ? "bg-accent text-foreground" : "hover:bg-accent/50",
+                "flex items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-sm cursor-pointer",
+                field === f.value ? "border-primary/50 bg-card text-foreground" : "hover:bg-muted",
               )}
             >
               {f.label}
diff --git a/apps/web/app/office/workspace/settings/export/export-file-tree.test.tsx b/apps/web/app/office/workspace/settings/export/export-file-tree.test.tsx
index 73708d2607..28cf7ae274 100644
--- a/apps/web/app/office/workspace/settings/export/export-file-tree.test.tsx
+++ b/apps/web/app/office/workspace/settings/export/export-file-tree.test.tsx
@@ -141,6 +141,6 @@ describe("ExportFileTree", () => {
   it("previewPath highlights the matching file row", () => {
     renderExport({ previewPath: ALPHA_PATH });
     const row = screen.getByText(ALPHA_NAME).parentElement!;
-    expect(row.className).toContain("bg-accent");
+    expect(row.className).toContain("border-primary/50");
   });
 });
diff --git a/apps/web/app/office/workspace/settings/export/export-file-tree.tsx b/apps/web/app/office/workspace/settings/export/export-file-tree.tsx
index 2c15f44259..56a11521a1 100644
--- a/apps/web/app/office/workspace/settings/export/export-file-tree.tsx
+++ b/apps/web/app/office/workspace/settings/export/export-file-tree.tsx
@@ -119,8 +119,8 @@ function ExportTreeRow({ row, isActive, checkState, onClick, onToggleCheck }: Ex
   return (
     <div
       className={cn(
-        "flex items-center gap-1.5 px-2 py-1 text-sm cursor-pointer hover:bg-accent/50",
-        isActive && "bg-accent",
+        "flex items-center gap-1.5 border border-transparent px-2 py-1 text-sm cursor-pointer",
+        isActive ? "border-primary/50 bg-card" : "hover:bg-muted",
       )}
       style={{ paddingLeft: `${row.depth * 16 + 8}px` }}
       onClick={onClick}
diff --git a/apps/web/app/office/workspace/skills/skill-list.tsx b/apps/web/app/office/workspace/skills/skill-list.tsx
index b311ac8aa8..a4dd431abd 100644
--- a/apps/web/app/office/workspace/skills/skill-list.tsx
+++ b/apps/web/app/office/workspace/skills/skill-list.tsx
@@ -292,8 +292,8 @@ function SkillItemsGroup({
             type="button"
             onClick={() => onSelect(s.id)}
             className={cn(
-              "flex items-center gap-2 px-3 py-2 rounded-md text-sm w-full text-left cursor-pointer",
-              selectedId === s.id ? "bg-accent" : "hover:bg-accent/50",
+              "flex items-center gap-2 rounded-md border border-transparent px-3 py-2 text-sm w-full text-left cursor-pointer",
+              selectedId === s.id ? "border-primary/50 bg-card" : "hover:bg-muted",
             )}
           >
             <IconBoxMultiple className="h-4 w-4 text-muted-foreground shrink-0" />
diff --git a/apps/web/components/editors/monaco/diff-viewer-context-menu.tsx b/apps/web/components/editors/monaco/diff-viewer-context-menu.tsx
index 10f6c64fd4..addfa12751 100644
--- a/apps/web/components/editors/monaco/diff-viewer-context-menu.tsx
+++ b/apps/web/components/editors/monaco/diff-viewer-context-menu.tsx
@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils";
+
 export type ContextMenuState = {
   x: number;
   y: number;
@@ -21,7 +23,7 @@ interface DiffViewerContextMenuProps {
 const menuCls =
   "fixed z-50 min-w-32 rounded-lg border bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 p-1";
 const itemCls =
-  "flex w-full cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground";
+  "flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden focus:bg-muted focus:text-foreground hover:bg-muted hover:text-foreground";
 const separatorCls = "bg-border/50 -mx-1 my-1 h-px";
 
 export function DiffViewerContextMenu({
@@ -58,7 +60,10 @@ export function DiffViewerContextMenu({
           <div className={separatorCls} />
           <button
             role="menuitem"
-            className={`${itemCls} text-destructive focus:text-destructive`}
+            className={cn(
+              itemCls,
+              "text-destructive focus:bg-destructive/10 focus:text-destructive hover:bg-destructive/10 hover:text-destructive",
+            )}
             onClick={() => {
               onRevert(filePath);
               onClose();
diff --git a/apps/web/components/editors/tiptap/plan-bubble-menu.tsx b/apps/web/components/editors/tiptap/plan-bubble-menu.tsx
index c629674bf1..a78eb08f45 100644
--- a/apps/web/components/editors/tiptap/plan-bubble-menu.tsx
+++ b/apps/web/components/editors/tiptap/plan-bubble-menu.tsx
@@ -37,8 +37,8 @@ function ToggleButton({ icon: Icon, isActive, onClick, title, accent }: ToggleBu
       title={title}
       className={cn(
         "p-1.5 rounded cursor-pointer transition-colors",
-        accent ? "text-white bg-accent hover:bg-accent/80" : "hover:bg-muted/80",
-        isActive && "bg-muted text-primary",
+        accent ? "bg-primary text-primary-foreground hover:bg-primary/90" : "hover:bg-muted/80",
+        isActive && "bg-muted text-primary ring-1 ring-inset ring-primary/50",
       )}
       onMouseDown={(e) => e.preventDefault()}
       onClick={onClick}
diff --git a/apps/web/components/github/multi-pr-ci-popover.tsx b/apps/web/components/github/multi-pr-ci-popover.tsx
index c94ed22aae..e92575794b 100644
--- a/apps/web/components/github/multi-pr-ci-popover.tsx
+++ b/apps/web/components/github/multi-pr-ci-popover.tsx
@@ -60,8 +60,10 @@ function PRTab({
       data-active={active ? "true" : "false"}
       onClick={() => onSelect(pr)}
       className={cn(
-        "flex shrink-0 cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-xs whitespace-nowrap transition-colors",
-        active ? "bg-accent text-foreground" : "text-muted-foreground hover:bg-accent/50",
+        "flex shrink-0 cursor-pointer items-center gap-1 rounded-md border border-transparent px-2 py-1 text-xs whitespace-nowrap transition-colors",
+        active
+          ? "border-primary/50 bg-card text-foreground"
+          : "text-muted-foreground hover:bg-muted",
       )}
     >
       <IconGitPullRequest className={cn("h-3.5 w-3.5", getPRStatusColor(pr))} />
diff --git a/apps/web/components/review/review-file-tree.tsx b/apps/web/components/review/review-file-tree.tsx
index 67277040dd..4d20443270 100644
--- a/apps/web/components/review/review-file-tree.tsx
+++ b/apps/web/components/review/review-file-tree.tsx
@@ -187,8 +187,8 @@ function ReviewFileRow({
       data-file-path={file.path}
       data-repository-name={file.repository_name}
       className={cn(
-        "flex items-center gap-1.5 px-2 py-1 cursor-pointer transition-colors group",
-        isSelected ? "bg-accent/50" : "hover:bg-muted/50",
+        "flex items-center gap-1.5 border border-transparent px-2 py-1 cursor-pointer transition-colors group",
+        isSelected ? "border-primary/50 bg-card" : "hover:bg-muted/50",
       )}
       style={{ paddingLeft: `${row.depth * 12 + 8}px` }}
       onClick={() => onSelectFile(key)}
diff --git a/apps/web/components/shared/file-tree.test.tsx b/apps/web/components/shared/file-tree.test.tsx
index 92515fb59e..6617ebd1ab 100644
--- a/apps/web/components/shared/file-tree.test.tsx
+++ b/apps/web/components/shared/file-tree.test.tsx
@@ -120,7 +120,7 @@ describe("FileTree rendering and selection", () => {
     const tree: FileTreeNode[] = [file("a.ts")];
     renderTree(tree, { selectedPath: "a.ts" });
     const row = screen.getByText("a.ts").parentElement!;
-    expect(row.className).toContain("bg-accent");
+    expect(row.className).toContain("border-primary");
   });
 
   it("renderExtra slot is invoked per row and its output appears in the DOM", () => {
diff --git a/apps/web/components/shared/file-tree.tsx b/apps/web/components/shared/file-tree.tsx
index 3da4c86dc5..7340ed4841 100644
--- a/apps/web/components/shared/file-tree.tsx
+++ b/apps/web/components/shared/file-tree.tsx
@@ -157,8 +157,8 @@ function FileTreeRow({
   return (
     <div
       className={cn(
-        "flex items-center gap-1.5 px-2 py-1 text-sm cursor-pointer hover:bg-accent/50",
-        isActive && "bg-accent",
+        "flex items-center gap-1.5 border border-transparent px-2 py-1 text-sm cursor-pointer",
+        isActive ? "border-primary/50 bg-card" : "hover:bg-muted",
         isFocused && "ring-1 ring-ring",
       )}
       style={{ paddingLeft: `${row.depth * 16 + 8}px` }}
diff --git a/apps/web/components/task/base-branch-picker.tsx b/apps/web/components/task/base-branch-picker.tsx
index faa22e85a7..f38d0e18dd 100644
--- a/apps/web/components/task/base-branch-picker.tsx
+++ b/apps/web/components/task/base-branch-picker.tsx
@@ -206,8 +206,8 @@ function BranchListBody({
           aria-selected={b.name === currentBase}
           data-testid={`base-branch-picker-option-${b.name}`}
           className={cn(
-            "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs cursor-pointer hover:bg-accent text-left",
-            b.name === currentBase && "bg-accent/40 font-medium",
+            "flex w-full items-center gap-2 rounded border border-transparent px-2 py-1.5 text-left text-xs cursor-pointer hover:bg-muted",
+            b.name === currentBase && "border-primary/50 bg-card font-medium",
           )}
           onClick={() => onSelect(b.name)}
         >
@@ -246,7 +246,7 @@ export function BaseBranchPicker({
           aria-expanded={logic.open}
           data-testid="base-branch-picker-trigger"
           className={cn(
-            "inline-flex items-center gap-1 cursor-pointer rounded px-1 py-px text-foreground font-medium hover:bg-accent/50",
+            "inline-flex items-center gap-1 cursor-pointer rounded px-1 py-px text-foreground font-medium hover:bg-muted",
             logic.isSaving && "opacity-60 cursor-wait",
           )}
           disabled={logic.isSaving}
diff --git a/apps/web/components/task/changes-panel-file-row.test.tsx b/apps/web/components/task/changes-panel-file-row.test.tsx
index ae619d910d..57a0b66b9b 100644
--- a/apps/web/components/task/changes-panel-file-row.test.tsx
+++ b/apps/web/components/task/changes-panel-file-row.test.tsx
@@ -287,7 +287,7 @@ describe("FileRow tree-mode hover stage action", () => {
 });
 
 describe("FileRow active-tab highlight", () => {
-  it("renders data-active='true' and bg-accent/60 when isActive", () => {
+  it("renders data-active='true' and border-primary when isActive", () => {
     const { container } = render(
       <TooltipProvider>
         <ul>
@@ -309,7 +309,7 @@ describe("FileRow active-tab highlight", () => {
     const row = container.querySelector("[data-changes-file='active.ts']") as HTMLElement | null;
     expect(row).not.toBeNull();
     expect(row!.getAttribute("data-active")).toBe("true");
-    expect(row!.className).toContain("bg-accent/60");
+    expect(row!.className).toContain("border-primary/50");
   });
 
   it("keeps highlight when isActive and isSelected are both true", () => {
@@ -336,6 +336,6 @@ describe("FileRow active-tab highlight", () => {
     expect(row).not.toBeNull();
     expect(row!.getAttribute("data-active")).toBe("true");
     expect(row!.getAttribute("data-selected")).toBe("true");
-    expect(row!.className).toContain("bg-accent/60");
+    expect(row!.className).toContain("border-primary/50");
   });
 });
diff --git a/apps/web/components/task/changes-panel-file-row.tsx b/apps/web/components/task/changes-panel-file-row.tsx
index 4d3aa95a32..832df55cf0 100644
--- a/apps/web/components/task/changes-panel-file-row.tsx
+++ b/apps/web/components/task/changes-panel-file-row.tsx
@@ -93,10 +93,10 @@ export function FileRow({
       data-selected={isSelected ? "true" : "false"}
       data-active={isActive ? "true" : "false"}
       className={cn(
-        "group flex items-center justify-between gap-2 text-sm rounded-md px-2 py-1.5 -mx-1 cursor-pointer",
+        "group flex items-center justify-between gap-2 rounded-md border border-transparent px-2 py-1.5 -mx-1 text-sm cursor-pointer",
         "md:px-1 md:py-0.5",
         isSelected || isActive
-          ? "bg-accent/60 text-accent-foreground hover:bg-accent/50"
+          ? "border-primary/50 bg-card text-foreground hover:bg-muted/70"
           : "hover:bg-muted/60",
       )}
       onClick={handleClick}
diff --git a/apps/web/components/task/changes-panel-pr-files.tsx b/apps/web/components/task/changes-panel-pr-files.tsx
index c9caffeba7..d51550fcd7 100644
--- a/apps/web/components/task/changes-panel-pr-files.tsx
+++ b/apps/web/components/task/changes-panel-pr-files.tsx
@@ -123,8 +123,10 @@ function PRFileRow({
       data-pr-key={file.prKey}
       data-active={isActive ? "true" : "false"}
       className={cn(
-        "group flex items-center justify-between gap-2 text-sm rounded-md px-2 py-1.5 -mx-1 cursor-pointer md:px-1 md:py-0.5",
-        isActive ? "bg-accent/60 text-accent-foreground hover:bg-accent/50" : "hover:bg-muted/60",
+        "group flex items-center justify-between gap-2 rounded-md border border-transparent px-2 py-1.5 -mx-1 text-sm cursor-pointer md:px-1 md:py-0.5",
+        isActive
+          ? "border-primary/50 bg-card text-foreground hover:bg-muted/70"
+          : "hover:bg-muted/60",
       )}
       onClick={() =>
         onOpenDiff(file.path, {
diff --git a/apps/web/components/task/chat/messages/message-comment-surface.tsx b/apps/web/components/task/chat/messages/message-comment-surface.tsx
index a32dcdc82f..17d299a745 100644
--- a/apps/web/components/task/chat/messages/message-comment-surface.tsx
+++ b/apps/web/components/task/chat/messages/message-comment-surface.tsx
@@ -152,7 +152,7 @@ function SelectionCommentTrigger({
         title="Comment (Cmd+Shift+C)"
         aria-label="Comment on selection"
         data-testid="agent-message-comment-trigger"
-        className="flex cursor-pointer items-center justify-center rounded bg-accent text-white transition-transform duration-150 ease-out hover:bg-accent/80 active:scale-[0.96]"
+        className="flex cursor-pointer items-center justify-center rounded bg-primary text-primary-foreground transition-transform duration-150 ease-out hover:bg-primary/90 active:scale-[0.96]"
         style={{ width: size, height: size }}
         onMouseDown={(event) => event.preventDefault()}
         onClick={onOpen}
diff --git a/apps/web/components/task/file-browser-parts.tsx b/apps/web/components/task/file-browser-parts.tsx
index 3d6990e23d..6d8d5451f3 100644
--- a/apps/web/components/task/file-browser-parts.tsx
+++ b/apps/web/components/task/file-browser-parts.tsx
@@ -123,10 +123,8 @@ function getTreeNodeRowClass(
   isDropTarget: boolean,
 ) {
   return cn(
-    "group flex w-full items-center gap-1 px-2 py-0.5 text-left text-sm cursor-pointer",
-    isSelected
-      ? "bg-accent text-accent-foreground hover:bg-accent/80 [&_span]:text-accent-foreground"
-      : "hover:bg-muted",
+    "group flex w-full items-center gap-1 border border-transparent px-2 py-0.5 text-left text-sm cursor-pointer",
+    isSelected ? "border-primary/50 bg-card text-foreground hover:bg-muted/70" : "hover:bg-muted",
     isActive && !isSelected && "bg-muted",
     isActiveFolder && !isSelected && "bg-muted/50",
     isDragging && isSelected && "opacity-50",
diff --git a/apps/web/components/task/mobile/mobile-repos-section.tsx b/apps/web/components/task/mobile/mobile-repos-section.tsx
index 2b15590861..abc652b608 100644
--- a/apps/web/components/task/mobile/mobile-repos-section.tsx
+++ b/apps/web/components/task/mobile/mobile-repos-section.tsx
@@ -110,8 +110,8 @@ function RepoRowItem({
         }
       }}
       data-testid={`mobile-repo-row-${row.repositoryId}`}
-      className={`flex items-center gap-2 px-2 py-2 rounded-md cursor-pointer select-none ${
-        isActive ? "bg-accent" : "hover:bg-accent/50"
+      className={`flex items-center gap-2 border px-2 py-2 rounded-md cursor-pointer select-none ${
+        isActive ? "border-primary/50 bg-card" : "border-transparent hover:bg-muted"
       }`}
     >
       <IconFolder className="h-4 w-4 text-muted-foreground shrink-0" />
diff --git a/apps/web/components/task/mobile/mobile-sessions-section.tsx b/apps/web/components/task/mobile/mobile-sessions-section.tsx
index d447a8e536..e8e572bdf3 100644
--- a/apps/web/components/task/mobile/mobile-sessions-section.tsx
+++ b/apps/web/components/task/mobile/mobile-sessions-section.tsx
@@ -292,8 +292,8 @@ function SessionRowItem({
           }
         }}
         data-testid={`mobile-session-row-${row.id}`}
-        className={`flex items-center gap-2 px-2 py-2 rounded-md cursor-pointer select-none ${
-          isActive ? "bg-accent" : "hover:bg-accent/50"
+        className={`flex items-center gap-2 border px-2 py-2 rounded-md cursor-pointer select-none ${
+          isActive ? "border-primary/50 bg-card" : "border-transparent hover:bg-muted"
         }`}
       >
         {row.isPrimary && showBadges && (
diff --git a/apps/web/components/task/mobile/mobile-terminals-section.tsx b/apps/web/components/task/mobile/mobile-terminals-section.tsx
index 8df71fbda9..7719b5cdee 100644
--- a/apps/web/components/task/mobile/mobile-terminals-section.tsx
+++ b/apps/web/components/task/mobile/mobile-terminals-section.tsx
@@ -39,8 +39,8 @@ function TerminalRow({
         }
       }}
       data-testid={`mobile-terminal-row-${terminal.id}`}
-      className={`flex items-center gap-2 px-2 py-2 rounded-md cursor-pointer select-none ${
-        isActive ? "bg-accent" : "hover:bg-accent/50"
+      className={`flex items-center gap-2 border px-2 py-2 rounded-md cursor-pointer select-none ${
+        isActive ? "border-primary/50 bg-card" : "border-transparent hover:bg-muted"
       }`}
     >
       <IconTerminal2 className="h-4 w-4 text-muted-foreground shrink-0" />
diff --git a/apps/web/components/task/simple/OfficeSimplePane.tsx b/apps/web/components/task/simple/OfficeSimplePane.tsx
index 9c2ad53772..999df81e2b 100644
--- a/apps/web/components/task/simple/OfficeSimplePane.tsx
+++ b/apps/web/components/task/simple/OfficeSimplePane.tsx
@@ -168,7 +168,7 @@ function ChildIssuesList({
           <Link
             key={child.id}
             href={`/office/tasks/${child.id}`}
-            className="flex items-center gap-2 px-4 py-2.5 text-sm hover:bg-accent/50 transition-colors"
+            className="flex cursor-pointer items-center gap-2 px-4 py-2.5 text-sm transition-colors hover:bg-muted/50"
           >
             <StatusIcon status={child.status} className="h-3.5 w-3.5 shrink-0" />
             <span className="text-xs text-muted-foreground font-mono shrink-0">
diff --git a/apps/web/components/task/simple/components/priority-picker.tsx b/apps/web/components/task/simple/components/priority-picker.tsx
index d17082e3cc..61eb67ba50 100644
--- a/apps/web/components/task/simple/components/priority-picker.tsx
+++ b/apps/web/components/task/simple/components/priority-picker.tsx
@@ -71,7 +71,7 @@ export function PriorityPicker({ task }: PriorityPickerProps) {
           aria-haspopup="listbox"
           aria-expanded={open}
           data-testid="priority-picker-trigger"
-          className="inline-flex items-center gap-1.5 cursor-pointer rounded px-2 py-1 hover:bg-accent/50 ml-auto"
+          className="inline-flex items-center gap-1.5 cursor-pointer rounded px-2 py-1 hover:bg-muted ml-auto"
         >
           <CurrentIcon className={cn("h-3.5 w-3.5", current.iconClass)} />
           <span>{current.label}</span>
@@ -89,8 +89,8 @@ export function PriorityPicker({ task }: PriorityPickerProps) {
               aria-selected={task.priority === opt.value}
               data-testid={`priority-picker-option-${opt.value}`}
               className={cn(
-                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm cursor-pointer hover:bg-accent",
-                task.priority === opt.value && "bg-accent/40",
+                "flex w-full items-center gap-2 rounded border border-transparent px-2 py-1.5 text-sm cursor-pointer hover:bg-muted",
+                task.priority === opt.value && "border-primary/50 bg-card",
               )}
               onClick={() => handleSelect(opt.value)}
             >
diff --git a/apps/web/components/task/simple/components/status-picker.tsx b/apps/web/components/task/simple/components/status-picker.tsx
index c67457f0b4..ca63e35dd2 100644
--- a/apps/web/components/task/simple/components/status-picker.tsx
+++ b/apps/web/components/task/simple/components/status-picker.tsx
@@ -96,7 +96,7 @@ export function StatusPicker({ task }: StatusPickerProps) {
           aria-haspopup="listbox"
           aria-expanded={open}
           data-testid="status-picker-trigger"
-          className="inline-flex items-center gap-1.5 cursor-pointer rounded px-2 py-1 hover:bg-accent/50 ml-auto"
+          className="inline-flex items-center gap-1.5 cursor-pointer rounded px-2 py-1 hover:bg-muted ml-auto"
         >
           <StatusIcon status={current} className="h-3.5 w-3.5" />
           <span>{STATUS_LABELS[current] ?? task.status}</span>
@@ -112,8 +112,8 @@ export function StatusPicker({ task }: StatusPickerProps) {
             aria-selected={current === opt.value}
             data-testid={`status-picker-option-${opt.value}`}
             className={cn(
-              "flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm cursor-pointer hover:bg-accent",
-              current === opt.value && "bg-accent/40",
+              "flex w-full items-center gap-2 rounded border border-transparent px-2 py-1.5 text-sm cursor-pointer hover:bg-muted",
+              current === opt.value && "border-primary/50 bg-card",
             )}
             onClick={() => handleSelect(opt.value)}
           >
diff --git a/apps/web/components/task/simple/components/sub-issues-row.tsx b/apps/web/components/task/simple/components/sub-issues-row.tsx
index e3cc9d6707..983b1f70ad 100644
--- a/apps/web/components/task/simple/components/sub-issues-row.tsx
+++ b/apps/web/components/task/simple/components/sub-issues-row.tsx
@@ -26,7 +26,7 @@ export function SubIssuesRow({ task }: SubIssuesRowProps) {
               <li key={child.id}>
                 <Link
                   href={`/office/tasks/${child.id}`}
-                  className="flex items-center gap-1.5 hover:bg-accent/50 rounded px-1.5 py-0.5 cursor-pointer text-xs"
+                  className="flex items-center gap-1.5 hover:bg-muted/50 rounded px-1.5 py-0.5 cursor-pointer text-xs"
                 >
                   <StatusIcon status={child.status} className="h-3 w-3 shrink-0" />
                   <span className="font-mono text-[10px] text-muted-foreground shrink-0">
diff --git a/apps/web/components/task/simple/subtask-stepper.tsx b/apps/web/components/task/simple/subtask-stepper.tsx
index ab84327fd3..fce0e7c7cd 100644
--- a/apps/web/components/task/simple/subtask-stepper.tsx
+++ b/apps/web/components/task/simple/subtask-stepper.tsx
@@ -52,7 +52,7 @@ export function SubtaskStepper({ items, activeHold }: SubtaskStepperProps) {
                 </div>
                 <Link
                   href={`/office/tasks/${child.id}`}
-                  className={`flex items-center gap-2 px-4 py-2.5 text-sm rounded-md hover:bg-accent/50 transition-colors${isBlocked ? " opacity-60" : ""}`}
+                  className={`flex cursor-pointer items-center gap-2 rounded-md px-4 py-2.5 text-sm transition-colors hover:bg-muted/50${isBlocked ? " opacity-60" : ""}`}
                 >
                   <StatusIcon status={child.status} className="h-3.5 w-3.5 shrink-0" />
                   <span className="text-xs text-muted-foreground font-mono shrink-0">
diff --git a/apps/web/components/task/task-pr-picker-dialog.tsx b/apps/web/components/task/task-pr-picker-dialog.tsx
index c1cc7c4463..da8bf339c8 100644
--- a/apps/web/components/task/task-pr-picker-dialog.tsx
+++ b/apps/web/components/task/task-pr-picker-dialog.tsx
@@ -87,7 +87,7 @@ export function TaskPRPickerDialog({ open, onOpenChange, prs, mrs = [] }: TaskPR
               data-pr-row
               data-testid={`task-pr-picker-row-${pr.id}`}
               onClick={() => openPR(pr)}
-              className="flex cursor-pointer items-center gap-2 rounded-md border border-transparent px-2 py-2 text-left text-sm transition-colors hover:border-border hover:bg-accent/40 focus:border-primary/70 focus:outline-none"
+              className="flex cursor-pointer items-center gap-2 rounded-md border border-transparent px-2 py-2 text-left text-sm transition-colors hover:border-border hover:bg-muted/40 focus:border-primary/70 focus:outline-none"
             >
               <IconGitPullRequest className={cn("h-4 w-4 shrink-0", getPRStatusColor(pr))} />
               <span className="min-w-0 flex-1 truncate">
@@ -106,7 +106,7 @@ export function TaskPRPickerDialog({ open, onOpenChange, prs, mrs = [] }: TaskPR
               data-pr-row
               data-testid={`task-mr-picker-row-${mr.id}`}
               onClick={() => openMR(mr)}
-              className="flex min-h-11 cursor-pointer items-center gap-2 rounded-md border border-transparent px-2 py-2 text-left text-sm transition-colors hover:border-border hover:bg-accent/40 focus:border-primary/70 focus:outline-none"
+              className="flex min-h-11 cursor-pointer items-center gap-2 rounded-md border border-transparent px-2 py-2 text-left text-sm transition-colors hover:border-border hover:bg-muted/40 focus:border-primary/70 focus:outline-none"
             >
               <IconGitPullRequest className="h-4 w-4 shrink-0 text-orange-500" />
               <span className="min-w-0 flex-1 truncate">
diff --git a/apps/web/e2e/tests/pr/pr-multi-popover.spec.ts b/apps/web/e2e/tests/pr/pr-multi-popover.spec.ts
index 02aa5bace1..2b072594d6 100644
--- a/apps/web/e2e/tests/pr/pr-multi-popover.spec.ts
+++ b/apps/web/e2e/tests/pr/pr-multi-popover.spec.ts
@@ -12,6 +12,38 @@ type SeedResult = {
   taskId: string;
 };
 
+async function mutedBackgroundColor(page: import("@playwright/test").Page): Promise<string> {
+  return page.evaluate(() => {
+    const sample = document.createElement("div");
+    sample.className = "bg-muted";
+    document.body.append(sample);
+    const color = getComputedStyle(sample).backgroundColor;
+    sample.remove();
+    return color;
+  });
+}
+
+async function foregroundColor(page: import("@playwright/test").Page): Promise<string> {
+  return page.evaluate(() => {
+    const sample = document.createElement("div");
+    sample.className = "text-foreground";
+    document.body.append(sample);
+    const color = getComputedStyle(sample).color;
+    sample.remove();
+    return color;
+  });
+}
+
+async function computedStyle(
+  locator: import("@playwright/test").Locator,
+  property: "backgroundColor" | "color",
+): Promise<string> {
+  return locator.evaluate(
+    (element, styleProperty) => getComputedStyle(element)[styleProperty],
+    property,
+  );
+}
+
 /**
  * Stand up a workspace + workflow + task that reaches the Done column
  * immediately (auto-start + on_turn_complete moves it), mirroring
@@ -216,6 +248,44 @@ test.describe("Multi-PR CI popover", () => {
     await expect(testPage.getByTestId(`pr-topbar-menu-item-${OWNER}-api-77`)).toBeVisible();
   });
 
+  test("uses neutral hover surfaces without recoloring PR status icons", async ({
+    testPage,
+    apiClient,
+    seedData,
+  }) => {
+    test.setTimeout(120_000);
+    const title = "Multi Popover Neutral States";
+    const seed = await seedTask(
+      apiClient,
+      seedData.workspaceId,
+      seedData.agentProfileId,
+      seedData.repositoryId,
+      title,
+    );
+    await associateTwoPRs(apiClient, seed.taskId);
+    const session = await openTaskAndWait(testPage, apiClient, seed, title);
+    const expectedMuted = await mutedBackgroundColor(testPage);
+    const expectedForeground = await foregroundColor(testPage);
+
+    await session.hoverPRTopbar();
+    const inactiveChip = session.prMultiPopoverTab(OWNER, "api", 77);
+    const inactiveChipIcon = inactiveChip.locator("svg");
+    const chipIconColor = await computedStyle(inactiveChipIcon, "color");
+    await inactiveChip.hover();
+    await expect.poll(() => computedStyle(inactiveChip, "backgroundColor")).toBe(expectedMuted);
+    expect(await computedStyle(inactiveChipIcon, "color")).toBe(chipIconColor);
+
+    await session.prTopbarButton().click();
+    const dropdownRow = testPage.getByTestId(`pr-topbar-menu-item-${OWNER}-web-42`);
+    const dropdownIcon = dropdownRow.locator("svg").first();
+    const dropdownSecondaryCopy = dropdownRow.getByText("Failing web PR");
+    const dropdownIconColor = await computedStyle(dropdownIcon, "color");
+    await dropdownRow.focus();
+    await expect.poll(() => computedStyle(dropdownRow, "backgroundColor")).toBe(expectedMuted);
+    await expect.poll(() => computedStyle(dropdownSecondaryCopy, "color")).toBe(expectedForeground);
+    expect(await computedStyle(dropdownIcon, "color")).toBe(dropdownIconColor);
+  });
+
   test('selecting a different PR from the "+" add-panel menu opens its own tab', async ({
     testPage,
     apiClient,
diff --git a/docs/decisions/2026-07-29-interactive-accent-surface-semantics.md b/docs/decisions/2026-07-29-interactive-accent-surface-semantics.md
new file mode 100644
index 0000000000..1ace7e5c54
--- /dev/null
+++ b/docs/decisions/2026-07-29-interactive-accent-surface-semantics.md
@@ -0,0 +1,49 @@
+# ADR-2026-07-29-interactive-accent-surface-semantics: Separate Brand Accent from Interactive Surface Fills
+
+**Status:** accepted
+**Date:** 2026-07-29
+**Area:** frontend
+
+## Context
+
+Kandev's `accent` token is a bright brand color, while several inherited UI
+patterns treated it as a neutral background for hover, focus, open, and selected
+states. That combination reduced text contrast and obscured semantic status
+colors on icons. The problem appeared across shared menu primitives and
+application-specific selectors, so local fixes alone would keep drifting.
+
+## Decision
+
+- Transient interactive states such as hover, focus, and open use a neutral
+  `muted`, `input`, or card-derived surface with the normal foreground.
+- Persistent non-semantic selection uses a neutral or card fill plus a
+  `primary` accent border or inset ring. Components reserve border width or use
+  an inset ring so selection does not change layout.
+- True primary actions use the matched `primary` and `primary-foreground` token
+  pair. Semantic status fills keep their domain-specific colors.
+- Shared menu, context-menu, menubar, select, and table primitives preserve
+  explicit semantic icon colors instead of forcing descendants to an accent
+  foreground.
+- The bright brand `accent` token remains available for intentional brand
+  emphasis, but not as the default interactive surface fill.
+
+No product spec changes are needed because this standard changes visual token
+usage without changing product capabilities, navigation, or workflows.
+
+## Consequences
+
+Selection remains recognizable through the accent boundary without placing
+text or colored icons on a saturated background. Hover and keyboard-focus
+states remain visible in light and dark themes. New interactive components must
+choose transient, selected, primary-action, or semantic-status styling
+explicitly instead of relying on the generic accent-background convention.
+
+## Alternatives Considered
+
+- **Neutralize the global `accent` token.** Rejected because it would remove the
+  existing bright brand color from intentional accent uses and silently alter
+  unrelated surfaces.
+- **Patch only the reported PR controls.** Rejected because the same contrast
+  failure existed in shared primitives and other selectors.
+- **Add another interaction-background token.** Rejected because existing
+  `muted`, `input`, and card surfaces already express the needed neutral states.
diff --git a/docs/decisions/INDEX.md b/docs/decisions/INDEX.md
index 54c1d90fce..ca6efad270 100644
--- a/docs/decisions/INDEX.md
+++ b/docs/decisions/INDEX.md
@@ -88,6 +88,7 @@ Read individual ADRs for full context. Create new ones via `/record decision` or
 | 2026-07-28-coarse-running-busy-signal | [Restore Coarse Running Prompt Admission](2026-07-28-coarse-running-busy-signal.md) | accepted | backend, frontend, protocol | 2026-07-28 |
 | 2026-07-29-agent-stall-user-controlled-recovery | [Keep Agent Stall Recovery User Controlled](2026-07-29-agent-stall-user-controlled-recovery.md) | accepted | backend, frontend, protocol | 2026-07-29 |
 | 2026-07-29-quarantine-retention-override | [Make Quarantine Retention Overridable but Visible](2026-07-29-quarantine-retention-override.md) | accepted | backend, frontend | 2026-07-29 |
+| 2026-07-29-interactive-accent-surface-semantics | [Separate Brand Accent from Interactive Surface Fills](2026-07-29-interactive-accent-surface-semantics.md) | accepted | frontend | 2026-07-29 |
 | 2026-07-30-embedded-editor-executor-capabilities | [Derive Embedded Editor Availability from the Active Executor](2026-07-30-embedded-editor-executor-capabilities.md) | accepted | backend, frontend, protocol | 2026-07-30 |
 | 2026-07-30-session-owned-mcp-observability | [Keep MCP Attachment Evidence Session Owned](2026-07-30-session-owned-mcp-observability.md) | accepted | backend, frontend, protocol, security | 2026-07-30 |
 | 2026-07-30-runtime-task-state-before-running-event | [Publish Task State Before Running Session State](2026-07-30-runtime-task-state-before-running-event.md) | accepted | backend, frontend, protocol, workflow | 2026-07-30 |