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/screens/SettingsScreen.tsx

@@ -5,6 +5,7 @@ import {
 } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { login, logout, loadAuthState } from '../services/auth';
+import { colors } from '../theme';
 
 export function SettingsScreen() {
   const [instanceUrl, setInstanceUrl] = useState('');
@@ -31,8 +32,8 @@ export function SettingsScreen() {
 
   async function handleConnect() {
     if (!instanceUrl.trim()) { Alert.alert('Required', 'Enter the instance URL.'); return; }
-    if (!handle.trim()) { Alert.alert('Required', 'Enter your handle.'); return; }
-    if (!password) { Alert.alert('Required', 'Enter your password.'); return; }
+    if (!handle.trim())      { Alert.alert('Required', 'Enter your handle.'); return; }
+    if (!password)           { Alert.alert('Required', 'Enter your password.'); return; }
 
     setConnecting(true);
     const result = await login(instanceUrl.trim(), handle.trim(), password);
@@ -77,7 +78,7 @@ export function SettingsScreen() {
         value={instanceUrl}
         onChangeText={setInstanceUrl}
         placeholder="https://bincio.example.com"
-        placeholderTextColor="#555"
+        placeholderTextColor={colors.placeholder}
         autoCapitalize="none"
         keyboardType="url"
         editable={!connectedAs}
@@ -101,7 +102,7 @@ export function SettingsScreen() {
             value={handle}
             onChangeText={setHandle}
             placeholder="your-handle"
-            placeholderTextColor="#555"
+            placeholderTextColor={colors.placeholder}
             autoCapitalize="none"
             autoCorrect={false}
           />
@@ -112,7 +113,7 @@ export function SettingsScreen() {
             value={password}
             onChangeText={setPassword}
             placeholder="••••••••"
-            placeholderTextColor="#555"
+            placeholderTextColor={colors.placeholder}
             secureTextEntry
           />
 
@@ -126,7 +127,7 @@ export function SettingsScreen() {
             disabled={connecting}
           >
             {connecting
-              ? <ActivityIndicator color="#fff" />
+              ? <ActivityIndicator color={colors.text} />
               : <Text style={styles.connectBtnText}>Connect</Text>}
           </TouchableOpacity>
         </>
@@ -136,27 +137,32 @@ export function SettingsScreen() {
 
       <View style={styles.row}>
         <Text style={styles.rowLabel}>Kilometre alerts</Text>
-        <Switch value={kmNotifications} onValueChange={handleKmToggle} trackColor={{ true: '#3b82f6' }} />
+        <Switch
+          value={kmNotifications}
+          onValueChange={handleKmToggle}
+          trackColor={{ true: colors.accent }}
+          thumbColor={colors.text}
+        />
       </View>
     </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
-  container: { flex: 1, backgroundColor: '#111' },
-  content: { padding: 24, gap: 12 },
-  sectionTitle: { color: '#888', fontSize: 13, textTransform: 'uppercase', letterSpacing: 0.8, marginTop: 16 },
-  label: { color: '#aaa', fontSize: 14, marginBottom: 4 },
-  input: { backgroundColor: '#1e1e1e', color: '#fff', borderRadius: 10, padding: 14, fontSize: 16 },
-  hint: { color: '#555', fontSize: 13, lineHeight: 18 },
-  connectedBox: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: '#1e1e1e', borderRadius: 10, padding: 14 },
-  connectedLabel: { color: '#22c55e', fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.6 },
-  connectedName: { color: '#fff', fontSize: 16, fontWeight: '600', marginTop: 2 },
-  disconnectBtn: { paddingVertical: 6, paddingHorizontal: 12, borderRadius: 8, borderWidth: 1, borderColor: '#ef4444' },
-  disconnectBtnText: { color: '#ef4444', fontWeight: '600' },
-  connectBtn: { backgroundColor: '#3b82f6', borderRadius: 12, padding: 16, alignItems: 'center', marginTop: 4 },
-  connectBtnDisabled: { opacity: 0.6 },
-  connectBtnText: { color: '#fff', fontSize: 16, fontWeight: '700' },
-  row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: '#1e1e1e', borderRadius: 10, padding: 14 },
-  rowLabel: { color: '#fff', fontSize: 16 },
+  container:          { flex: 1, backgroundColor: colors.bg },
+  content:            { padding: 16, gap: 10 },
+  sectionTitle:       { color: colors.textMuted, fontSize: 11, textTransform: 'uppercase', letterSpacing: 0.8, marginTop: 16 },
+  label:              { color: colors.textSub, fontSize: 13, marginBottom: 2 },
+  input:              { backgroundColor: colors.surface, borderWidth: 1, borderColor: colors.border, color: colors.text, borderRadius: 8, padding: 12, fontSize: 15 },
+  hint:               { color: colors.textMuted, fontSize: 12, lineHeight: 18 },
+  connectedBox:       { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: colors.surface, borderWidth: 1, borderColor: colors.border, borderRadius: 10, padding: 14 },
+  connectedLabel:     { color: colors.success, fontSize: 11, textTransform: 'uppercase', letterSpacing: 0.6 },
+  connectedName:      { color: colors.text, fontSize: 15, fontWeight: '600', marginTop: 2 },
+  disconnectBtn:      { paddingVertical: 6, paddingHorizontal: 12, borderRadius: 8, borderWidth: 1, borderColor: colors.errorBg },
+  disconnectBtnText:  { color: colors.error, fontWeight: '600', fontSize: 13 },
+  connectBtn:         { backgroundColor: colors.surface, borderWidth: 1, borderColor: colors.border, borderRadius: 10, padding: 14, alignItems: 'center', marginTop: 4 },
+  connectBtnDisabled: { opacity: 0.5 },
+  connectBtnText:     { color: colors.text, fontSize: 15, fontWeight: '600' },
+  row:                { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: colors.surface, borderWidth: 1, borderColor: colors.border, borderRadius: 10, padding: 14 },
+  rowLabel:           { color: colors.text, fontSize: 15 },
 });