Implement theme variables usable in both Tailwind and styled-components (`theme.ts`)

[tyler-dane]

Replicate the semantic theming strategy so it's possible with both Tailwind and styled-components, allowing for gradual migration away from styled-components.

Context

We currently have a good styling approach with styled-components that implements semantic names and theming. The benefits include:

• Using design tokens that are decoupled from their colors (e.g., color.bg.primary)
• Consistent variable naming for multiple theme support

Instead of fully replacing styled-components usage, we want to allow both Tailwind and styled-components styles to coexist. This will make it possible to gradually migrate to Tailwind, reduce risk, and allow us to reuse semantic theming strategies in both systems.

Migration Strategy

• Extend or refactor our theme configuration (e.g., in theme.ts) to expose semantic variables for both Tailwind and styled-components.
• Ensure design tokens can be referenced in either approach (e.g., via classnames for Tailwind, or via theme object for styled-components).
• Document usage patterns and migration guidelines for contributors.
• Update existing components to demonstrate hybrid usage where appropriate (Tailwind classes + styled-components theme access).
• Allow developers to opt-in to Tailwind for new features/components, while legacy components may continue using styled-components until migrated.

Requirements

• Semantic variable structure must work for both systems
• Support for multiple themes (light/dark)
• Documentation for adding new semantic tokens and migrating components
• No breaking changes for current styled-components usage

Related Issues

• Add tailwind config #1112 (Tailwind migration)
• Light theme #1094 (Theming infrastructure)

Resources

• https://tailwindcss.com/docs/theme
• https://tailwindcss.com/docs/dark-mode