feat: Default to light theme on mobile devices on first visit

Implements device-aware theme defaults:
- Mobile devices (≤768px): Default to light theme
- Desktop devices (>768px): Default to auto theme
- Saved preferences: Always respected regardless of device

Implementation:
1. FOUC Prevention Script (templates/index.html):
   - Detects device type using window.innerWidth/clientWidth/screen.width
   - Sets initial theme before page render to prevent flash
   - Mobile: 'light', Desktop: 'auto'

2. Theme Initialization (static/js/color-theme.js):
   - Modified initColorTheme() to respect FOUC-detected theme
   - Saves FOUC-detected theme to localStorage for persistence
   - Prevents overwriting mobile detection with 'auto' default

Test Coverage:
- Test 1: Mobile first visit → light theme ✅
- Test 2: Desktop first visit → auto theme ✅
- Test 3: Saved preference honored → dark theme ✅

Files Modified:
- templates/index.html: Added mobile detection in FOUC prevention
- static/js/color-theme.js: Respect FOUC-detected theme
- tests/mjs/49-mobile-light-theme-default.mjs: Comprehensive test suite

Screenshots:
- tests/screenshots/mobile-light-theme-default.png
- tests/screenshots/desktop-auto-theme-default.png

templates/index.html

@@ -42,7 +42,17 @@
     <!-- FOUC Prevention: Apply color theme before page render -->
     <script>
     (function() {
-      const theme = localStorage.getItem('color-theme-mode') || 'auto';
+      let theme = localStorage.getItem('color-theme-mode');
+
+      // If no saved preference, set default based on device type
+      if (!theme) {
+        // Mobile devices default to light theme, desktop to auto
+        // Check multiple properties for better detection
+        const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
+        const isMobile = width <= 768;
+        theme = isMobile ? 'light' : 'auto';
+      }
+
       document.documentElement.setAttribute('data-color-theme', theme);
     })();
     </script>