Implement Option 3: Make AbacusReact theme-aware to automatically
adjust numeral colors based on the document's theme.
**New Features:**
- Add `useSystemTheme` hook that detects theme from document root
- Watches for `data-theme` attribute changes
- Watches for `.light` / `.dark` class changes
- Returns 'light' or 'dark' theme
- SSR-safe with proper fallback
**Changes:**
- AbacusReact now automatically sets dark numeral color (rgba(0,0,0,0.8))
as default when no custom color is provided
- Works on white/translucent abacus frames in both light/dark page themes
- Users can still override with custom `customStyles.numerals.color`
- Theme detection uses MutationObserver for automatic updates
**Exports:**
- Export `useSystemTheme` hook for consumer use
- Export `SystemTheme` type ('light' | 'dark')
**Benefits:**
- Numerals always visible regardless of page theme
- No manual coordination needed
- Works automatically with web app's ThemeContext
- Zero breaking changes (respects existing customStyles)
Fixes numeral visibility issue where white numerals appeared on
white abacus frames in dark mode.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
cbfd8618a9