fix: draw contact form fields like the webmail and quiet the letter headers in the contact list

src/components/contacts/ContactListRow.tsx

@@ -136,6 +136,6 @@ function makeStyles(c: ThemePalette) {
   info: { flex: 1, minWidth: 0 },
   name: { ...typography.bodyMedium, color: c.text },
   subtitle: { ...typography.caption, color: c.textMuted, marginTop: 1 },
-  tertiary: { ...typography.small, color: c.textSecondary, marginTop: 1 },
+  tertiary: { ...typography.caption, color: c.mutedForeground, marginTop: 1 },
   });
 }

src/screens/ContactFormScreen.tsx

@@ -1982,7 +1982,7 @@ function makeStyles(c: ThemePalette) {
     sectionBody: { gap: spacing.sm, paddingLeft: spacing.lg + spacing.xs },
 
     field: { gap: 4 },
-    fieldLabel: { ...typography.caption, color: c.textMuted },
+    fieldLabel: { ...typography.caption, color: c.mutedForeground },
     row2: { flexDirection: 'row', gap: spacing.sm },
 
     input: {
@@ -1990,7 +1990,8 @@ function makeStyles(c: ThemePalette) {
       borderWidth: 1,
       borderColor: c.border,
       borderRadius: radius.sm,
-      backgroundColor: c.surface,
+      // The shared Input: transparent, bordered (webmail contact form).
+      backgroundColor: 'transparent',
       paddingHorizontal: spacing.md,
       paddingVertical: spacing.sm,
       ...typography.body,

src/screens/ContactsScreen.tsx

@@ -758,7 +758,7 @@ function makeStyles(c: ThemePalette) {
     borderBottomWidth: 1,
     borderBottomColor: c.borderLight,
   },
-  sectionHeaderText: { ...typography.small, color: c.primary },
+  sectionHeaderText: { ...typography.captionMedium, color: c.mutedForeground },
 
   separator: { height: 1, backgroundColor: c.borderLight, marginLeft: 68 },