feat: event editing, light/dark theme, device animations, 7-day forecast

app/globals.css

@@ -156,3 +156,66 @@ button:focus-visible {
 .animate-slide-up {
   animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }
+
+/* ————— Light theme ————— */
+.light {
+  --bg: #f5f5fa;
+  --bg-secondary: #eeeef4;
+  --sidebar-bg: rgba(255, 255, 255, 0.8);
+  --card-bg: rgba(255, 255, 255, 0.7);
+  --card-bg-hover: rgba(255, 255, 255, 0.85);
+  --card-border: rgba(0, 0, 0, 0.06);
+  --card-border-hover: rgba(0, 0, 0, 0.1);
+  --text-primary: rgba(0, 0, 0, 0.88);
+  --text-secondary: rgba(0, 0, 0, 0.45);
+  --text-tertiary: rgba(0, 0, 0, 0.2);
+  --accent: #6366f1;
+  --accent-secondary: #0891b2;
+  --accent-glow: rgba(99, 102, 241, 0.12);
+  --glass: rgba(255, 255, 255, 0.5);
+  --glass-border: rgba(0, 0, 0, 0.06);
+  --on-color: #6366f1;
+  --off-color: rgba(0, 0, 0, 0.12);
+}
+
+.light .bg-ambient::before {
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
+}
+.light .bg-ambient::after {
+  background: radial-gradient(circle, rgba(139, 92, 246, 0.04) 0%, transparent 70%);
+}
+
+.light ::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+}
+.light ::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+/* ————— Device animations ————— */
+@keyframes fan-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes light-pulse {
+  0%, 100% { filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.3)); }
+  50% { filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.6)); }
+}
+
+@keyframes device-breathe {
+  0%, 100% { opacity: 0.7; }
+  50% { opacity: 1; }
+}
+
+.fan-spinning {
+  animation: fan-spin 2s linear infinite;
+}
+
+.light-on-pulse {
+  animation: light-pulse 3s ease-in-out infinite;
+}
+
+.device-active-breathe {
+  animation: device-breathe 3s ease-in-out infinite;
+}