feat: add theme system with light/dark mode support

- Add ThemeStore (Zustand) for reactive theme switching
- Add Themes.tsx with THEMES object (defaultLight, defaultDark)
- Add Settings screen with theme switcher and logout button
- Add BaseButton component for reusable themed buttons
- Migrate all components from static currentTheme to useThemeStore()
- Add shadowColor to theme (iOS only, Android uses elevation)
- All text elements now use theme colors (textPrimary, textSecondary, etc.)
- Update tab navigation to include Settings tab
- Move logout from Header to Settings screen

apps/client/src/app/event/[id].tsx

@@ -1,9 +1,11 @@
 import { View, Text, TextInput, Pressable } from "react-native";
 import { useLocalSearchParams } from "expo-router";
 import BaseBackground from "../../components/BaseBackground";
+import { useThemeStore } from "../../stores/ThemeStore";
 
 const EventDetailScreen = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
+  const { theme } = useThemeStore();
 
   // TODO: Fetch event by id using EventService.getById()
   // TODO: Display event details (title, description, start/end time)
@@ -17,23 +19,27 @@ const EventDetailScreen = () => {
   return (
     <BaseBackground>
       <View className="flex-1 p-4">
-        <Text className="text-2xl mb-4">Event Detail</Text>
-        <Text className="text-gray-500 mb-4">ID: {id}</Text>
+        <Text className="text-2xl mb-4" style={{ color: theme.textPrimary }}>Event Detail</Text>
+        <Text className="mb-4" style={{ color: theme.textSecondary }}>ID: {id}</Text>
         <TextInput
           placeholder="Title"
+          placeholderTextColor={theme.textMuted}
           className="w-full border rounded p-2 mb-4"
+          style={{ color: theme.textPrimary, borderColor: theme.borderPrimary, backgroundColor: theme.secondaryBg }}
         />
         <TextInput
           placeholder="Description"
+          placeholderTextColor={theme.textMuted}
           multiline
           className="w-full border rounded p-2 mb-4 h-24"
+          style={{ color: theme.textPrimary, borderColor: theme.borderPrimary, backgroundColor: theme.secondaryBg }}
         />
         <View className="flex-row gap-2">
-          <Pressable className="bg-blue-500 p-3 rounded flex-1">
-            <Text className="text-white text-center">Save</Text>
+          <Pressable className="p-3 rounded flex-1" style={{ backgroundColor: theme.confirmButton }}>
+            <Text className="text-center" style={{ color: theme.buttonText }}>Save</Text>
           </Pressable>
-          <Pressable className="bg-red-500 p-3 rounded flex-1">
-            <Text className="text-white text-center">Delete</Text>
+          <Pressable className="p-3 rounded flex-1" style={{ backgroundColor: theme.rejectButton }}>
+            <Text className="text-center" style={{ color: theme.buttonText }}>Delete</Text>
           </Pressable>
         </View>
       </View>