design: align visual style with bincio_autarchive

- Add src/theme.ts with centralised color palette
- Backgrounds: #111 → #09090b, surfaces #1e1e1e → #18181b
- All cards get 1px #27272a borders (matches autarchive cards)
- Text: #fff/#888/#555 → #f4f4f5/#a1a1aa/#71717a
- Accent: #3b82f6 → #60a5fa (autarchive default palette)
- Tab icons: colored emoji → monochromatic Unicode (◉ ☰ ⚙)
- Action buttons use muted palette (#16a34a / #d97706 / #dc2626)
- Keep-awake toggle uses ◑/◌ symbols, border highlights accent on active
- Connect/Scan buttons match autarchive surface+border style

src/navigation/AppNavigator.tsx

@@ -10,36 +10,34 @@ import { SensorPairingScreen } from '../screens/SensorPairingScreen';
 import { SavedRecordingsScreen } from '../screens/SavedRecordingsScreen';
 import { SettingsScreen } from '../screens/SettingsScreen';
 import { RootStackParamList, TabParamList } from '../types';
+import { colors } from '../theme';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 const Tab = createBottomTabNavigator<TabParamList>();
 
+const TAB_ICONS: Record<string, string> = {
+  Recording: '◉',
+  Saved:     '☰',
+  Settings:  '⚙',
+};
+
 function Tabs() {
   return (
     <Tab.Navigator
-      screenOptions={{
-        headerStyle: { backgroundColor: '#111' },
-        headerTintColor: '#fff',
-        tabBarStyle: { backgroundColor: '#111', borderTopColor: '#222' },
-        tabBarActiveTintColor: '#3b82f6',
-        tabBarInactiveTintColor: '#555',
-      }}
+      screenOptions={({ route }) => ({
+        headerStyle: { backgroundColor: colors.bg },
+        headerTintColor: colors.text,
+        tabBarStyle: { backgroundColor: colors.surface, borderTopColor: colors.border },
+        tabBarActiveTintColor: colors.accent,
+        tabBarInactiveTintColor: colors.textMuted,
+        tabBarIcon: ({ color }) => (
+          <Text style={{ color, fontSize: 18 }}>{TAB_ICONS[route.name]}</Text>
+        ),
+      })}
     >
-      <Tab.Screen
-        name="Recording"
-        component={RecordingScreen}
-        options={{ tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>⏺</Text> }}
-      />
-      <Tab.Screen
-        name="Saved"
-        component={SavedRecordingsScreen}
-        options={{ tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>📋</Text> }}
-      />
-      <Tab.Screen
-        name="Settings"
-        component={SettingsScreen}
-        options={{ tabBarIcon: ({ color }) => <Text style={{ color, fontSize: 20 }}>⚙️</Text> }}
-      />
+      <Tab.Screen name="Recording" component={RecordingScreen} />
+      <Tab.Screen name="Saved" component={SavedRecordingsScreen} />
+      <Tab.Screen name="Settings" component={SettingsScreen} />
     </Tab.Navigator>
   );
 }
@@ -49,9 +47,9 @@ export function AppNavigator() {
     <NavigationContainer>
       <Stack.Navigator
         screenOptions={{
-          headerStyle: { backgroundColor: '#111' },
-          headerTintColor: '#fff',
-          contentStyle: { backgroundColor: '#111' },
+          headerStyle: { backgroundColor: colors.bg },
+          headerTintColor: colors.text,
+          contentStyle: { backgroundColor: colors.bg },
         }}
       >
         <Stack.Screen name="Tabs" component={Tabs} options={{ headerShown: false }} />