Dark Mode — Semantic Token Migration

Added

• CSS Custom Property System — Complete :root and .dark variable definitions in index.css covering surfaces, content, edges, focus rings, and ring offsets
• Semantic Tailwind Tokens — bg-surface, text-content, border-edge (and variants) mapped through tailwind.config.js to CSS custom properties for automatic light/dark theming
• Utility Classes — .btn, .btn-primary, .btn-secondary, .btn-danger, .input, .label, .card, .stat-card, .table-container, .table, .money defined once using semantic tokens
• Dark Mode Scrollbar Styling — Custom webkit scrollbar colours for dark theme
• Toast Dark Mode Overrides — Sonner toast notifications styled for dark theme via CSS custom properties
• Styling — speybooks-styling documenting the token system, component patterns, and checklist for future development

Changed

• 53+ component files migrated from hardcoded Tailwind colour classes (bg-gray-50, text-slate-300, border-gray-200, etc.) to semantic tokens — approximately 1,594 token references replaced
• Select component (Select.tsx) rebuilt on Radix UI with semantic tokens, portaled dropdown, and theme-aware highlight states
• DatePicker component (DatePicker.tsx) rebuilt on Radix UI Popover with semantic tokens, portaled calendar, and theme-aware selection states
• Layout and AdminLayout theme toggle dropdowns given solid bg-surface backgrounds with border-edge borders
• Form control outlines switched from ring-edge-strong (which didn’t resolve through ringColor config) to border-edge-strong for reliable visibility in both themes
• Dropdown content panels switched from ring-1 ring-black/5 to border border-edge for dark mode visibility
• Highlighted/selected states in Select and DatePicker changed from hardcoded bg-spey-50 to bg-surface-active for theme consistency

Fixed

• Transparent backgrounds on theme toggle dropdown, customer select, and date picker calendar
• Missing visible borders on Select and DatePicker triggers in both light and dark mode
• Dropdown panels rendering without visible boundaries in dark mode
• Calendar popup lacking solid background when rendered over page content
• Status badge colours and table row hover states not adapting to dark theme
• Sidebar, header, and page backgrounds all using hardcoded light-mode colours

Technical Notes

• ringColor in tailwind.config.js only defines DEFAULT — named variants like ring-edge-strong do not resolve. Use border-* for visible outlines on form controls.
• All floating elements (dropdowns, popovers, modals) must use Radix Portal and include explicit bg-surface + border border-edge to avoid transparency and stacking issues.
• No dark: prefix needed on any semantic token class — the CSS custom properties handle the switch automatically.