Unify design tokens — remove hardcoded hex colors

[grantfox-oss]

Description

There is already a design token system in app/globals.css (--color-primary, --color-card, --color-foreground, --color-muted-foreground, etc.), and it's correctly used in components like frontend/components/ui/transaction-row.tsx via cn(). However, other components ignore this system and use raw hex values instead:

• frontend/components/TransactionCard/TransactionCard.tsx (#23C987, #1A2721, #D2DED8, #95A29C...)
• frontend/components/PaymentBubble/PaymentBubble.tsx
• frontend/components/ui/wallet-badge.tsx

Problem

• Impossible to support dark mode or re-theme the app without touching every component manually.
• Visual inconsistency that's hard to audit (nearly-identical colors repeated with different hex values).
• Defeats the purpose of the token system already defined in globals.css.

Proposal

• Map each hardcoded color to its equivalent token in globals.css (create new tokens where missing, e.g. --color-success for the brand green #23C987).
• Replace inline hex classes (bg-[#23C987], text-[#1A2721]) with token classes (bg-primary, text-foreground, etc.) using cn().
• Add a lint rule (or documented manual review step) to prevent mixing raw bg-[#...] values into new components.

Acceptance criteria

• All components use only tokens from globals.css.
• No stray hex values remain in frontend/components (verifiable with grep -rE "#[0-9A-Fa-f]{6}").
• Document in the frontend README which tokens exist and when to use each one.