🤖 Centralize Tailwind color usage with CSS variables

[kylecarbs]

Problem

The codebase had 157 instances of hardcoded hex colors scattered throughout using confusing Tailwind syntax like text-[#808080], bg-[#1e1e1e], and border-[rgba(244,67,54,0.1)]. This makes the color scheme difficult to maintain and update consistently.

Solution

Centralized all colors as semantic CSS variables in src/styles/globals.css using Tailwind v4's @theme directive. These automatically generate corresponding Tailwind utility classes.

Color categories added (40+ new variables):

• Text variants: text-muted-light, text-placeholder, text-bright, text-label, etc.
• Border variants: border-medium, border-darker, border-light, border-subtle, etc.
• Background variants: bg-dark, bg-darker, bg-modal-bg, bg-code-bg, etc.
• Accent variants: bg-accent-hover, bg-accent-dark, text-accent-light, etc.
• Status colors: text-danger-light, text-danger-soft, text-warning, text-success-light
• Toast backgrounds: bg-toast-success-bg, bg-toast-error-bg, with proper opacity
• Semi-transparent overlays: bg-danger-overlay, bg-warning-overlay, bg-white-overlay
• Code highlighting: text-code-type, text-code-keyword, bg-code-keyword-overlay
• Review/diff backgrounds: bg-review-bg-blue, bg-review-bg-info, bg-review-bg-warning

Examples of replacements:

- className="text-[#808080]"
+ className="text-text-muted-light"

- className="bg-[#0e639c] hover:bg-[#1177bb]"
+ className="bg-accent-dark hover:bg-accent-hover"

- className="bg-[rgba(244,67,54,0.1)] border-[#f44336]"
+ className="bg-danger-overlay border-danger"

- className="bg-[var(--color-code-bg)]"
+ className="bg-code-bg"

Impact

• ✅ All 157 hardcoded color instances replaced
• ✅ Consistent naming convention across the codebase
• ✅ Easier to update color scheme globally
• ✅ Type checking passes
• ✅ Better readability: text-text-muted-light is clearer than text-[#808080]

Testing

• make typecheck passes
• make fmt applied
• All existing colors mapped to semantic equivalents with matching HSL values

Generated with cmux