diff --git a/AGENTS.md b/AGENTS.md
index 314f909..feb4d5c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -140,6 +140,14 @@ conflict on, do an existence check instead.
 flag set to false was silently on. Use the `envBoolean` helper in
 `apps/api/src/lib/config.ts`.
 
+**shadcn's `accent` is a SUBTLE surface, not the brand.** shadcn uses
+`bg-accent` for hover, focus and selected states — dropdown items, command
+rows, ghost buttons. The brand is `primary`. In `tailwind.config.js`, `accent`
+is therefore aliased to `--accent-subtle` and `primary` to `--accent`. Use
+`bg-primary` for a solid brand fill; never `bg-accent`. Mapping them the other
+way makes every hover state paint a full-strength brand block, which in dark
+mode with the monochrome palette is a glaring white slab.
+
 **Grid and flex children need `min-w-0`.** They default to
 `min-width: auto`, meaning they refuse to shrink below their content — and a
 `tabular-nums` figure, a `whitespace-nowrap` badge or a `truncate` title is all
diff --git a/apps/web/src/components/AdminSettings.tsx b/apps/web/src/components/AdminSettings.tsx
index 71103a1..4ef6b34 100644
--- a/apps/web/src/components/AdminSettings.tsx
+++ b/apps/web/src/components/AdminSettings.tsx
@@ -67,7 +67,7 @@ export function AdminSettings() {
       <div className="relative overflow-hidden border-b border-border bg-surface-2 px-4 py-5 sm:px-6">
         <div className="absolute -right-12 -top-20 size-48 rounded-full bg-accent-subtle blur-3xl" aria-hidden />
         <div className="relative flex items-start gap-3">
-          <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-accent text-accent-on">
+          <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-accent-on">
             <ShieldCheck aria-hidden />
           </div>
           <div className="min-w-0">
diff --git a/apps/web/src/components/AllocationSheet.tsx b/apps/web/src/components/AllocationSheet.tsx
index 2e16205..c65f476 100644
--- a/apps/web/src/components/AllocationSheet.tsx
+++ b/apps/web/src/components/AllocationSheet.tsx
@@ -526,8 +526,8 @@ function CommitmentContext({ row, detail, match, quotedPrice }: { row: Availabil
         {match ? <Badge tone={match.score > 0.7 ? 'positive' : 'neutral'}>{percent(match.score)} fit</Badge> : null}
       </div>
       <div className="mt-4 flex h-2 overflow-hidden rounded-full bg-surface">
-        <div className="bg-accent" style={{ width: `${Math.min(100, soldPct * 100)}%` }} />
-        <div className="bg-accent/35" style={{ width: `${Math.min(100 - soldPct * 100, heldPct * 100)}%` }} />
+        <div className="bg-primary" style={{ width: `${Math.min(100, soldPct * 100)}%` }} />
+        <div className="bg-primary/35" style={{ width: `${Math.min(100 - soldPct * 100, heldPct * 100)}%` }} />
       </div>
       <div className="mt-2 grid grid-cols-3 gap-2 text-xs">
         <div><p className="text-muted">Sold</p><p className="nums mt-0.5 font-medium">{compactNumber(row.soldGpuHours)} hrs</p></div>
diff --git a/apps/web/src/components/GoogleSheetsSource.tsx b/apps/web/src/components/GoogleSheetsSource.tsx
index 104d4d8..1aa91cd 100644
--- a/apps/web/src/components/GoogleSheetsSource.tsx
+++ b/apps/web/src/components/GoogleSheetsSource.tsx
@@ -137,7 +137,7 @@ export function GoogleSheetsSource({ onLoaded }: { onLoaded(table: GoogleParsedT
           {files.isLoading ? <Skeleton className="h-40" /> : files.isError ? <ErrorText error={files.error} /> : files.data?.files.length === 0 ? <EmptyState title="No spreadsheets found" description="Try another name or confirm this Google account can see the spreadsheet." /> : (
             <div className="grid gap-2 sm:grid-cols-2">
               {files.data?.files.map((file) => (
-                <button key={file.id} type="button" onClick={() => { setSpreadsheetId(file.id); setSheetId(''); }} className={spreadsheetId === file.id ? 'tap min-w-0 rounded-lg border border-accent bg-accent-subtle p-3 text-left' : 'tap min-w-0 rounded-lg border border-border p-3 text-left hover:bg-surface-2'}>
+                <button key={file.id} type="button" onClick={() => { setSpreadsheetId(file.id); setSheetId(''); }} className={spreadsheetId === file.id ? 'tap min-w-0 rounded-lg border border-primary bg-accent-subtle p-3 text-left' : 'tap min-w-0 rounded-lg border border-border p-3 text-left hover:bg-surface-2'}>
                   <p className="truncate text-sm font-medium">{file.name}</p>
                   <p className="mt-1 text-xs text-muted">{file.modifiedTime ? `Modified ${relativeTime(file.modifiedTime)}` : 'Modified time unavailable'}</p>
                 </button>
diff --git a/apps/web/src/components/PiggyChat.tsx b/apps/web/src/components/PiggyChat.tsx
index 2efd4a5..8afae66 100644
--- a/apps/web/src/components/PiggyChat.tsx
+++ b/apps/web/src/components/PiggyChat.tsx
@@ -264,7 +264,7 @@ function PiggyChatPanel({
 
 function ChatMessage({ message }: { message: TranscriptMessage }) {
   if (message.role === 'user') {
-    return <div className="ml-auto max-w-[88%] rounded-2xl rounded-br-md bg-accent px-4 py-3 text-sm text-accent-on"><p className="whitespace-pre-wrap">{message.content}</p></div>;
+    return <div className="ml-auto max-w-[88%] rounded-2xl rounded-br-md bg-primary px-4 py-3 text-sm text-accent-on"><p className="whitespace-pre-wrap">{message.content}</p></div>;
   }
   return (
     <div className="flex gap-3">
diff --git a/apps/web/src/pages/Capacity.tsx b/apps/web/src/pages/Capacity.tsx
index 26ff986..05a545f 100644
--- a/apps/web/src/pages/Capacity.tsx
+++ b/apps/web/src/pages/Capacity.tsx
@@ -161,9 +161,9 @@ function CapacityCard({ row, writable, onAllocate }: { row: AvailabilityRow; wri
             bar made mostly of unconverted holds is a lie a seller would act on. */}
         <div>
           <div className="flex h-2 overflow-hidden rounded-full bg-surface-2">
-            <div className="bg-accent" style={{ width: `${Math.min(100, soldPct * 100)}%` }} />
+            <div className="bg-primary" style={{ width: `${Math.min(100, soldPct * 100)}%` }} />
             <div
-              className="bg-accent/35"
+              className="bg-primary/35"
               style={{ width: `${Math.min(100 - soldPct * 100, heldPct * 100)}%` }}
             />
           </div>
diff --git a/apps/web/src/pages/CreateProfile.tsx b/apps/web/src/pages/CreateProfile.tsx
index 758cb47..d3ced5e 100644
--- a/apps/web/src/pages/CreateProfile.tsx
+++ b/apps/web/src/pages/CreateProfile.tsx
@@ -95,7 +95,7 @@ export function CreateProfile({
                       className={[
                         'flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors',
                         team === value
-                          ? 'border-accent bg-accent-subtle'
+                          ? 'border-primary bg-accent-subtle'
                           : 'border-border hover:bg-surface-2',
                       ].join(' ')}
                     >
diff --git a/apps/web/src/pages/FactReview.tsx b/apps/web/src/pages/FactReview.tsx
index f5c9a83..9b39b5c 100644
--- a/apps/web/src/pages/FactReview.tsx
+++ b/apps/web/src/pages/FactReview.tsx
@@ -99,7 +99,7 @@ export function FactReview() {
         </Badge>
       </header>
 
-      <Card className="overflow-hidden border-accent/30 bg-accent-subtle/40">
+      <Card className="overflow-hidden border-primary/30 bg-accent-subtle/40">
         <CardContent className="flex gap-3 p-4 sm:p-5">
           <FileCheck2 className="mt-0.5 size-5 shrink-0 text-accent-fg" aria-hidden />
           <div className="min-w-0">
diff --git a/apps/web/src/pages/Imports.tsx b/apps/web/src/pages/Imports.tsx
index e77cc97..5a6af92 100644
--- a/apps/web/src/pages/Imports.tsx
+++ b/apps/web/src/pages/Imports.tsx
@@ -145,7 +145,7 @@ export function Imports() {
               type="button"
               aria-pressed={entity === candidate}
               onClick={() => resetForEntity(candidate)}
-              className={entity === candidate ? 'tap card min-w-0 border-accent p-4 text-left ring-1 ring-accent' : 'tap card min-w-0 p-4 text-left'}
+              className={entity === candidate ? 'tap card min-w-0 border-primary p-4 text-left ring-1 ring-primary' : 'tap card min-w-0 p-4 text-left'}
             >
               <p className="font-semibold">{candidateDefinition.label}</p>
               <p className="mt-1 text-xs leading-relaxed text-muted">{candidateDefinition.description}</p>
diff --git a/apps/web/src/pages/Pipeline.tsx b/apps/web/src/pages/Pipeline.tsx
index 39a0acb..e5b83da 100644
--- a/apps/web/src/pages/Pipeline.tsx
+++ b/apps/web/src/pages/Pipeline.tsx
@@ -184,7 +184,7 @@ function PipelineBoard<T extends { id: string; stage: string; updatedAt: string
                 className={[
                   'tap shrink-0 rounded-full px-3.5 text-sm font-medium transition-colors',
                   stage === currentStage
-                    ? 'bg-accent text-accent-on'
+                    ? 'bg-primary text-accent-on'
                     : 'bg-surface-2 text-muted',
                 ].join(' ')}
               >
diff --git a/apps/web/src/pages/Register.tsx b/apps/web/src/pages/Register.tsx
index 2a35b37..4583e50 100644
--- a/apps/web/src/pages/Register.tsx
+++ b/apps/web/src/pages/Register.tsx
@@ -172,7 +172,7 @@ export function Register({
                     className={[
                       'flex cursor-pointer items-start gap-3 rounded-lg border p-3 transition-colors',
                       team === value
-                        ? 'border-accent bg-accent-subtle'
+                        ? 'border-primary bg-accent-subtle'
                         : 'border-border hover:bg-surface-2',
                     ].join(' ')}
                   >
diff --git a/apps/web/src/pages/Settings.tsx b/apps/web/src/pages/Settings.tsx
index 9d34d09..ada565c 100644
--- a/apps/web/src/pages/Settings.tsx
+++ b/apps/web/src/pages/Settings.tsx
@@ -93,7 +93,7 @@ function Appearance() {
                   title={option.label}
                   className={[
                     'tap relative flex items-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition-colors',
-                    selected ? 'border-accent bg-accent-subtle' : 'border-border hover:bg-surface-2',
+                    selected ? 'border-primary bg-accent-subtle' : 'border-border hover:bg-surface-2',
                   ].join(' ')}
                 >
                   {/*
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 61a0260..433e17c 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -20,8 +20,22 @@ export default {
         foreground: 'hsl(var(--fg))',
         muted: 'hsl(var(--muted))',
         'muted-foreground': 'hsl(var(--muted))',
-        accent: 'hsl(var(--accent))',
-        'accent-foreground': 'hsl(var(--accent-on))',
+        /*
+         * shadcn's `accent` is its SUBTLE hover/selected surface — dropdown
+         * items, command rows, ghost-button hover. It is not the brand colour;
+         * that is `primary`, mapped below.
+         *
+         * Mapping `accent` to --accent (the brand) inverted this, so every
+         * hover state painted a full-strength brand block: in dark mode with
+         * the monochrome "pig" accent that is near-white, which made a selected
+         * command row glare. Aliased to the subtle pair instead, so shadcn
+         * primitives tint the way their authors intended while PIG's own brand
+         * fills use `primary`.
+         */
+        accent: 'hsl(var(--accent-subtle))',
+        'accent-foreground': 'hsl(var(--accent-fg))',
+        /** The brand itself, for PIG's own components that need a solid fill. */
+        brand: 'hsl(var(--accent))',
         'accent-fg': 'hsl(var(--accent-fg))',
         'accent-on': 'hsl(var(--accent-on))',
         'accent-subtle': 'hsl(var(--accent-subtle))',