🍕 chore(theme): unify accent on blue across panel + page + popup + badge

[jjpaulino]

Why

Closes the visual disconnect introduced by the highlight-mode redesign (PR #11): the on-page outline switched to tailwind blue-600, but the panel kept the v1 red accent — so the same selection lit up blue on the page and red in the panel describing it.

Now every accent surface in the extension reads from one source of truth.

Surfaces touched

Surface	Before	After
On-page outlines	`#2563eb` (blue-600)	`#2563eb` (no change)
Panel light theme	`#e22c2c` (red)	`#2563eb`
Panel dark theme	`#ff5c5c` (red-light)	`#60a5fa` (blue-400)
Options light theme	`#e22c2c`	`#2563eb`
Options dark theme	`#ff5c5c`	`#60a5fa`
Popup link	`#e22c2c` (no dark)	`#2563eb` / `#60a5fa`
Toolbar badge	`#e22c2c`	`#60a5fa`

Everything in the panel that uses `var(--cs-accent)` (FAB ring, FAB badge, breadcrumb chip, active-tab underline, primary buttons, tree/recents selection state, focus rings, mode-menu radio bullet, JSON-LD card open state, etc.) follows automatically.

Why blue

• Conventional inspector signal. Chrome DevTools, React DevTools, Vue DevTools all use blue. Muscle memory works for free.
• Editorial brands lean black/white/red. Red outlines compete with content; blue stays out of the way.
• The Clay character icon (beige/cream) is the brand mark. The accent doesn't have to carry brand color and never reliably did.

Why a different blue in dark mode

Blue-600 on a near-black background looks recessed and fails contrast against muted text. Blue-400 is the same hue family but lifts to a comfortable ~4.7:1 ratio on `#0f1115`.

Why the toolbar badge specifically picks blue-400

The browser toolbar isn't theme-aware (Chrome paints it grey on light OS, near-black on dark OS). Blue-600 disappears against dark toolbars; blue-400 stays readable on both.

What didn't change

• `--cs-success` / `--cs-warning` / `--cs-danger` tokens stay green / amber / red. Status badges (Published / Draft), find-match outline, error toasts all unchanged.
• `ACCENT_RGB` in `highlighter.ts` is already blue-600 — kept as is.
• The Clay icon stays beige.
• No new files; all 137 tests pass.

Test plan

• `npm run validate` (typecheck + lint + format + 137 tests)
• `npm run build` clean
• Reload unpacked extension on a Clay page → click any component
  • Page draws a blue outline + label badge (no change)
  • Panel breadcrumb chip is blue (was red)
  • Active-tab underline is blue (was red)
  • FAB component-count badge is blue (was red)
• Switch OS to dark mode → accents stay blue but lighter
• Open Options → accents are blue everywhere
• Open the popup on a Clay page → "Allow / configure" link is blue
• Verify Published/Draft badges (green/amber) and error toasts (red) are unchanged

Made with Cursor