Inline style attributes vs CSS variables: a Tailwind v4 light-mode debug story

TL;DR : I shipped a "light mode for the bingo caller" feature three times. Each attempt rendered as dark navy squares on a white stage — totally unreadable. The bug was the same every time: an inline style={{ background: hue.deep }} in a React component winning over the CSS class meant to control the background. Moving from inline styles to inline CSS custom properties unlocked a theme-aware cascade and finally made the feature ship. The setup I'm building a number bingo caller — the screen that