Add dynamic text color adjustment based on background brightness

Automatically adjusts text color for optimal readability:
- Bright backgrounds: Text switches to dark color (#1a1a1a)
- Dark backgrounds: Text remains white (#ffffff)
- Uses luminance formula (0.299×R + 0.587×G + 0.114×B) for accurate brightness detection
- Analyzes images using canvas to sample 100x100 pixels
- Smooth color transitions (0.5s) between background changes
- Adjusts text shadows for better contrast in each mode
- Event time color adapts (#0066cc for light, #4a9eff for dark)

Technical implementation:
- Added calculateImageBrightness() function in app.js
- Modified updateBackground() to analyze and apply appropriate CSS class
- Added .light-bg and .dark-bg CSS classes for text color themes
- Brightness threshold set at 140 (out of 255)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

static/css/style.css

@@ -11,6 +11,48 @@ body {
     width: 100vw;
     height: 100vh;
     color: #ffffff;
+    transition: color 0.5s ease-in-out;
+}
+
+/* Dark text for bright backgrounds */
+body.light-bg {
+    color: #1a1a1a;
+}
+
+body.light-bg .time,
+body.light-bg .date,
+body.light-bg .current-temp,
+body.light-bg .weather-label,
+body.light-bg .weather-icon,
+body.light-bg .forecast-icon,
+body.light-bg section h2,
+body.light-bg .day-name,
+body.light-bg .day-date,
+body.light-bg .event-title,
+body.light-bg .event-location,
+body.light-bg .joke {
+    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8);
+}
+
+body.light-bg .event-time {
+    color: #0066cc;
+}
+
+body.light-bg .event {
+    border-left-color: #0066cc;
+}
+
+/* White text for dark backgrounds (default) */
+body.dark-bg {
+    color: #ffffff;
+}
+
+body.dark-bg .event-time {
+    color: #4a9eff;
+}
+
+body.dark-bg .event {
+    border-left-color: #4a9eff;
 }
 
 /* Background */