tailwind-css-variable-theme-removal-causes-white-inputslisted

## The problem After a theme system redesign that removes CSS custom properties (e.g., `--color-bg`, `--color-text`) from `globals.css`, text inputs become unreadable — white text on white background. ## Root cause The old design used RGB-channel CSS variables consumed by Tailwind with opacity modifiers: ```css :root { --color-bg: 2 6 23; --color-text: 248 250 252; } ``` Tailwind config referenced them: ```js colors: { bg: 'rgb(var(--color-bg) / <alpha-value>)', text: 'rgb(var(--color-text) / <alpha-value>)', } ``` Components used classes like `bg-bg text-text`. These resolved to actual RGB values via the CSS variables. When the CSS variables are removed (replaced by a hardcoded dark theme like `#05050A`), Tailwind classes referencing `rgb(var(--color-bg) / ...)` resolve to `rgb( / ...)` — which is invalid CSS. Browsers treat invalid color values as transparent or inherit, often defaulting to white in dark-mode contexts. The result: inputs that had `bg-bg text-text` now have transparent backgrounds with white text, or white backgrounds with white text. ## How to diagnose 1. Open DevTools, inspect the input 2. Check computed `background-color` — if it's `transparent` or white when it should be dark, the CSS variable resolution is broken 3. Look for `rgb(var(--` in the computed styles — this indicates dead CSS variable references ## How to fix Replace all `rgb(var(--color-*))` references with hardcoded hex values. For inputs specifically, use explicit colors