Update CBS Mobile App codebase

src/modules/insurance/components/InsuranceCategoryChip.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import Ionicons from '@react-native-vector-icons/ionicons';
 
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import type { InsuranceCategory } from '../types';
 import { INSURANCE_CATEGORY_META } from '../types';
 
@@ -79,7 +79,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 13,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
   },
 });
 

src/modules/insurance/components/InsuranceClaimCard.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { Card } from '../../../components';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatCurrency, formatDate } from '../../../utils/formatters';
 import type { InsuranceClaim } from '../types';
 import { InsuranceStatusPill } from './InsuranceStatusPill';
@@ -56,11 +56,11 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 15,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   meta: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   notes: {
     fontSize: 12,
@@ -71,7 +71,7 @@ const styles = StyleSheet.create({
   },
   metricText: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
 });
 

src/modules/insurance/components/InsuranceDocumentItem.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import Ionicons from '@react-native-vector-icons/ionicons';
 
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatDate } from '../../../utils/formatters';
 import type { InsuranceDocument } from '../types';
 import { InsuranceStatusPill } from './InsuranceStatusPill';
@@ -83,11 +83,11 @@ const styles = StyleSheet.create({
   },
   name: {
     fontSize: 14,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   meta: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   reason: {
     fontSize: 11,
@@ -99,7 +99,7 @@ const styles = StyleSheet.create({
   },
   link: {
     fontSize: 12,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
   },
 });
 

src/modules/insurance/components/InsuranceOtpModal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { AppModal, Button, Input } from '../../../components';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 
 interface InsuranceOtpModalProps {
   visible: boolean;
@@ -67,12 +67,12 @@ const styles = StyleSheet.create({
   },
   hintLabel: {
     fontSize: 11,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
   hintValue: {
     fontSize: 16,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
 });

src/modules/insurance/components/InsurancePaymentMethodTile.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import Ionicons from '@react-native-vector-icons/ionicons';
 
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import type { InsurancePaymentMethod } from '../types';
 
 interface InsurancePaymentMethodTileProps {
@@ -103,7 +103,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 14,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   description: {
     fontSize: 12,

src/modules/insurance/components/InsurancePlanCard.tsx

@@ -3,7 +3,7 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import Ionicons from '@react-native-vector-icons/ionicons';
 
 import { Button, Card } from '../../../components';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import type { InsurancePlan } from '../types';
 import { formatCompactCurrency, formatCurrency } from '../../../utils/formatters';
 
@@ -140,11 +140,11 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 16,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   subtitle: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   ratioBadge: {
     minWidth: 68,
@@ -156,11 +156,11 @@ const styles = StyleSheet.create({
   },
   ratioValue: {
     fontSize: 16,
-    fontWeight: '900',
+    fontFamily: fontFamily.bold,
   },
   ratioLabel: {
     fontSize: 10,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
     letterSpacing: 0.5,
   },
   summary: {
@@ -179,17 +179,17 @@ const styles = StyleSheet.create({
   },
   metricLabel: {
     fontSize: 11,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
   metricValue: {
     fontSize: 18,
-    fontWeight: '900',
+    fontFamily: fontFamily.bold,
   },
   metricCaption: {
     fontSize: 11,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   listWrap: {
     gap: 8,
@@ -202,7 +202,7 @@ const styles = StyleSheet.create({
   listText: {
     flex: 1,
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
     lineHeight: 17,
   },
   actionRow: {
@@ -220,7 +220,7 @@ const styles = StyleSheet.create({
   },
   compareLabel: {
     fontSize: 12,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
   },
   selectButton: {
     flex: 1,

src/modules/insurance/components/InsurancePolicyCard.tsx

@@ -3,7 +3,7 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import Ionicons from '@react-native-vector-icons/ionicons';
 
 import { Card } from '../../../components';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatCompactCurrency, formatCurrency, formatDate } from '../../../utils/formatters';
 import type { InsurancePolicy } from '../types';
 import { InsuranceStatusPill } from './InsuranceStatusPill';
@@ -80,11 +80,11 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 16,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   meta: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   metrics: {
     flexDirection: 'row',
@@ -95,13 +95,13 @@ const styles = StyleSheet.create({
   },
   metricLabel: {
     fontSize: 11,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
   metricValue: {
     fontSize: 18,
-    fontWeight: '900',
+    fontFamily: fontFamily.bold,
     marginTop: 4,
   },
   footer: {
@@ -116,7 +116,7 @@ const styles = StyleSheet.create({
   },
   footerText: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
 });
 

src/modules/insurance/components/InsuranceRangeSlider.tsx

@@ -7,7 +7,7 @@ import {
   type LayoutChangeEvent,
 } from 'react-native';
 
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 
 interface InsuranceRangeSliderProps {
   label: string;
@@ -118,13 +118,13 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 12,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
   value: {
     fontSize: 14,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   track: {
     height: 8,

src/modules/insurance/components/InsuranceStatusPill.tsx

@@ -1,33 +1,68 @@
 import React, { memo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { useTheme } from '../../../theme';
+import { textStyles, useTheme } from '../../../theme';
 
 interface InsuranceStatusPillProps {
   status: string;
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  Active: '#10B981',
-  'Renewal Due': '#F59E0B',
-  Expired: '#EF4444',
-  'Grace Period': '#F97316',
-  Submitted: '#3B82F6',
-  'Under Review': '#6366F1',
-  Approved: '#10B981',
-  Rejected: '#EF4444',
-  Settled: '#059669',
-  uploaded: '#3B82F6',
-  verified: '#10B981',
-  rejected: '#EF4444',
+/**
+ * A status as a tinted pill.
+ *
+ * ── WHY THIS HOLDS ROLE NAMES AND NOT COLOURS ───────────────────────────────
+ * This map used to hold twelve hex values, one per status, declared at module
+ * scope where the theme does not exist. That had two consequences: the pills
+ * could not follow a theme change, and the tint behind each one was built as
+ * `${hex}16` — the hue at ~9% alpha over whatever was underneath. On a white
+ * card that is a pale wash; on a dark card it is invisible.
+ *
+ * Naming a role instead lets the theme supply both halves — a legible tone and
+ * a measured tint surface — for whichever ramp is live.
+ *
+ * ── WHY TWELVE STATUSES SHARE FOUR TONES ────────────────────────────────────
+ * Twelve distinct colours is not twelve distinct meanings; it is four, said
+ * twelve ways. A customer reads the WORD to tell "Submitted" from "Under
+ * Review" — the colour only has to say which of four situations they are in:
+ * fine, needs attention, refused, or in progress. Collapsing them is what
+ * makes the colour informative rather than decorative.
+ */
+type Tone = 'success' | 'warning' | 'danger' | 'info';
+
+const STATUS_TONES: Record<string, Tone> = {
+  /* Settled and done. */
+  Active: 'success',
+  Approved: 'success',
+  Settled: 'success',
+  verified: 'success',
+
+  /* Still fine, but the customer has something to do. */
+  'Renewal Due': 'warning',
+  'Grace Period': 'warning',
+
+  /* Refused or lapsed. */
+  Expired: 'danger',
+  Rejected: 'danger',
+  rejected: 'danger',
+
+  /* With the bank, nothing owed by the customer. */
+  Submitted: 'info',
+  'Under Review': 'info',
+  uploaded: 'info',
 };
 
 const InsuranceStatusPillComponent = ({ status }: InsuranceStatusPillProps) => {
   const theme = useTheme();
-  const color = STATUS_COLORS[status] ?? theme.colors.primary;
+  const tone = STATUS_TONES[status];
+
+  // An unmapped status falls back to the brand tint rather than to one of the
+  // four meanings — telling a customer "approved" because a new status string
+  // was not added here would be worse than saying nothing.
+  const color = tone ? theme.colors[tone] : theme.colors.primary;
+  const background = tone ? theme.colors[`${tone}Surface`] : theme.colors.primarySurface;
 
   return (
-    <View style={[styles.pill, { backgroundColor: `${color}16` }]}>
+    <View style={[styles.pill, { backgroundColor: background }]}>
       <Text style={[styles.label, { color }]}>{status}</Text>
     </View>
   );
@@ -40,11 +75,12 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     alignSelf: 'flex-start',
   },
+  // `eyebrow` is the scale entry for exactly this: an 11pt uppercase label
+  // with wide tracking. It is what the hand-rolled
+  // fontSize/fontWeight/textTransform/letterSpacing block here was
+  // approximating.
   label: {
-    fontSize: 11,
-    fontWeight: '800',
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
+    ...textStyles.eyebrow,
   },
 });
 

src/modules/insurance/screens/BuyInsuranceScreen.tsx

@@ -7,7 +7,7 @@ import { Button, Card, Input, ScreenShell } from '../../../components';
 import { ToggleSwitch } from '../../cards/components/ToggleSwitch';
 import { useToast } from '../../../hooks/useToast';
 import type { InsuranceStackParamList } from '../../../navigation/types';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatCompactCurrency, formatCurrency } from '../../../utils/formatters';
 import { InsuranceCategoryChip } from '../components/InsuranceCategoryChip';
 import { InsuranceOtpModal } from '../components/InsuranceOtpModal';
@@ -558,7 +558,7 @@ const styles = StyleSheet.create({
   },
   stepLabel: {
     fontSize: 11,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
@@ -567,7 +567,7 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     fontSize: 16,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   categoryWrap: {
     flexDirection: 'row',
@@ -591,7 +591,7 @@ const styles = StyleSheet.create({
   },
   errorText: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   actionStack: {
     gap: 10,
@@ -603,15 +603,15 @@ const styles = StyleSheet.create({
   },
   summaryTitle: {
     fontSize: 15,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   summaryCopy: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   summaryAmount: {
     fontSize: 13,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
   },
   sectionHeader: {
     flexDirection: 'row',

src/modules/insurance/screens/InsuranceCalculatorScreen.tsx

@@ -5,7 +5,7 @@ import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { useAppDispatch, useAppSelector } from '../../../app/hooks';
 import { Button, Card, Input, ScreenShell } from '../../../components';
 import type { InsuranceStackParamList } from '../../../navigation/types';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatCompactCurrency, formatCurrency } from '../../../utils/formatters';
 import { InsuranceCategoryChip } from '../components/InsuranceCategoryChip';
 import { InsuranceRangeSlider } from '../components/InsuranceRangeSlider';
@@ -211,7 +211,7 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     fontSize: 16,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   categoryWrap: {
     flexDirection: 'row',
@@ -233,13 +233,13 @@ const styles = StyleSheet.create({
   },
   resultLabel: {
     fontSize: 11,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
   resultValue: {
     fontSize: 18,
-    fontWeight: '900',
+    fontFamily: fontFamily.bold,
   },
   recommendation: {
     fontSize: 12,

src/modules/insurance/screens/InsuranceClaimsScreen.tsx

@@ -11,7 +11,7 @@ import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { Button, Card, EmptyState, Input, Loader, ScreenShell } from '../../../components';
 import { useToast } from '../../../hooks/useToast';
 import type { InsuranceStackParamList } from '../../../navigation/types';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatCurrency, formatDate } from '../../../utils/formatters';
 import { InsuranceClaimCard } from '../components/InsuranceClaimCard';
 import { InsuranceDocumentItem } from '../components/InsuranceDocumentItem';
@@ -357,7 +357,7 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     fontSize: 16,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   policyWrap: {
     gap: 10,
@@ -369,7 +369,7 @@ const styles = StyleSheet.create({
   },
   policySummaryTitle: {
     fontSize: 14,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   policySummaryText: {
     fontSize: 12,
@@ -384,7 +384,7 @@ const styles = StyleSheet.create({
   },
   errorText: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   separator: {
     height: 12,

src/modules/insurance/screens/InsuranceComparisonScreen.tsx

@@ -4,7 +4,7 @@ import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 
 import { Button, Card, EmptyState, Loader, ScreenShell } from '../../../components';
 import type { InsuranceStackParamList } from '../../../navigation/types';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatCompactCurrency, formatCurrency } from '../../../utils/formatters';
 import { useCompareInsurancePlansQuery } from '../services/insuranceApi';
 
@@ -122,7 +122,7 @@ const styles = StyleSheet.create({
   },
   rowLabel: {
     fontSize: 11,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
@@ -136,7 +136,7 @@ const styles = StyleSheet.create({
   },
   valueText: {
     fontSize: 14,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
   },
   planColumnWrap: {
     flexDirection: 'row',
@@ -149,11 +149,11 @@ const styles = StyleSheet.create({
   },
   planTitle: {
     fontSize: 15,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   planSubtitle: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   planBullet: {
     fontSize: 12,

src/modules/insurance/screens/InsuranceDashboardScreen.tsx

@@ -13,7 +13,7 @@ import Animated, { FadeInDown } from 'react-native-reanimated';
 
 import { Button, Card, EmptyState, Loader, ScreenShell } from '../../../components';
 import type { InsuranceStackParamList } from '../../../navigation/types';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import {
   formatCompactCurrency,
   formatCurrency,
@@ -306,13 +306,13 @@ const styles = StyleSheet.create({
   },
   heroEyebrow: {
     fontSize: 11,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.6,
   },
   heroTitle: {
     fontSize: 28,
-    fontWeight: '900',
+    fontFamily: fontFamily.bold,
     marginTop: 4,
   },
   heroSubtitle: {
@@ -330,11 +330,11 @@ const styles = StyleSheet.create({
   },
   heroBadgeValue: {
     fontSize: 22,
-    fontWeight: '900',
+    fontFamily: fontFamily.bold,
   },
   heroBadgeLabel: {
     fontSize: 11,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
@@ -350,17 +350,17 @@ const styles = StyleSheet.create({
   },
   metricLabel: {
     fontSize: 11,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
   metricValue: {
     fontSize: 18,
-    fontWeight: '900',
+    fontFamily: fontFamily.bold,
   },
   metricCaption: {
     fontSize: 11,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
     lineHeight: 16,
   },
   sectionCard: {
@@ -368,7 +368,7 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     fontSize: 17,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   actionRow: {
     flexDirection: 'row',
@@ -392,7 +392,7 @@ const styles = StyleSheet.create({
   },
   linkText: {
     fontSize: 12,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   notificationCard: {
     gap: 0,
@@ -410,7 +410,7 @@ const styles = StyleSheet.create({
   },
   notificationTitle: {
     fontSize: 14,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   notificationBody: {
     fontSize: 12,

src/modules/insurance/screens/InsuranceDocumentsScreen.tsx

@@ -11,7 +11,7 @@ import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { Button, Card, EmptyState, Loader, ScreenShell } from '../../../components';
 import { useToast } from '../../../hooks/useToast';
 import type { InsuranceStackParamList } from '../../../navigation/types';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { InsuranceDocumentItem } from '../components/InsuranceDocumentItem';
 import { useGetInsuranceDocumentsQuery, useUploadInsuranceDocumentMutation } from '../services/insuranceApi';
 
@@ -165,7 +165,7 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     fontSize: 16,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   actionRow: {
     flexDirection: 'row',

src/modules/insurance/screens/InsuranceNotificationsScreen.tsx

@@ -12,7 +12,7 @@ import Ionicons from '@react-native-vector-icons/ionicons';
 
 import { Card, EmptyState, Loader, ScreenShell } from '../../../components';
 import type { InsuranceStackParamList } from '../../../navigation/types';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatDate } from '../../../utils/formatters';
 import {
   useGetInsuranceNotificationsQuery,
@@ -27,7 +27,10 @@ export default function InsuranceNotificationsScreen(_props: Props) {
   const [markRead] = useMarkInsuranceNotificationReadMutation();
 
   return (
-    <ScreenShell title="Notifications" subtitle="Premiums, renewals, claim updates, and offers">
+    <ScreenShell
+      // The body is a FlatList, so it owns the scrolling.
+      scrollable={false}
+      title="Notifications" subtitle="Premiums, renewals, claim updates, and offers">
       <FlatList
         data={data ?? []}
         keyExtractor={(item) => item.id}
@@ -107,7 +110,7 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 15,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   body: {
     fontSize: 12,
@@ -115,7 +118,7 @@ const styles = StyleSheet.create({
   },
   date: {
     fontSize: 11,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   unreadWrap: {
     width: 26,

src/modules/insurance/screens/InsurancePoliciesScreen.tsx

@@ -10,7 +10,7 @@ import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 
 import { Button, Card, EmptyState, Loader, ScreenShell } from '../../../components';
 import type { InsuranceStackParamList } from '../../../navigation/types';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatCompactCurrency } from '../../../utils/formatters';
 import { InsurancePolicyCard } from '../components/InsurancePolicyCard';
 import { useGetInsurancePoliciesQuery } from '../services/insuranceApi';
@@ -107,13 +107,13 @@ const styles = StyleSheet.create({
   },
   summaryLabel: {
     fontSize: 11,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
   summaryValue: {
     fontSize: 26,
-    fontWeight: '900',
+    fontFamily: fontFamily.bold,
   },
   summaryCaption: {
     fontSize: 12,

src/modules/insurance/screens/InsurancePolicyDetailsScreen.tsx

@@ -6,7 +6,7 @@ import Ionicons from '@react-native-vector-icons/ionicons';
 import { Button, Card, EmptyState, Loader, ScreenShell } from '../../../components';
 import { useToast } from '../../../hooks/useToast';
 import type { InsuranceStackParamList } from '../../../navigation/types';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatCompactCurrency, formatCurrency, formatDate } from '../../../utils/formatters';
 import { InsuranceStatusPill } from '../components/InsuranceStatusPill';
 import { useGetInsurancePolicyDetailQuery } from '../services/insuranceApi';
@@ -249,11 +249,11 @@ const styles = StyleSheet.create({
   },
   heroTitle: {
     fontSize: 18,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   heroMeta: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   metricGrid: {
     flexDirection: 'row',
@@ -267,17 +267,17 @@ const styles = StyleSheet.create({
   },
   metricLabel: {
     fontSize: 11,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
     textTransform: 'uppercase',
     letterSpacing: 0.5,
   },
   metricValue: {
     fontSize: 18,
-    fontWeight: '900',
+    fontFamily: fontFamily.bold,
   },
   metricCaption: {
     fontSize: 11,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   infoList: {
     gap: 6,
@@ -287,7 +287,7 @@ const styles = StyleSheet.create({
     lineHeight: 18,
   },
   infoStrong: {
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
   },
   actionCard: {
     gap: 12,
@@ -304,7 +304,7 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     fontSize: 16,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   listRow: {
     flexDirection: 'row',
@@ -315,7 +315,7 @@ const styles = StyleSheet.create({
     flex: 1,
     fontSize: 12,
     lineHeight: 18,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   documentRow: {
     flexDirection: 'row',
@@ -330,10 +330,10 @@ const styles = StyleSheet.create({
   },
   documentName: {
     fontSize: 14,
-    fontWeight: '700',
+    fontFamily: fontFamily.bold,
   },
   documentMeta: {
     fontSize: 11,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
 });

src/modules/insurance/screens/InsuranceRenewalsScreen.tsx

@@ -12,7 +12,7 @@ import { Button, Card, EmptyState, Loader, ScreenShell } from '../../../componen
 import { ToggleSwitch } from '../../cards/components/ToggleSwitch';
 import { useToast } from '../../../hooks/useToast';
 import type { InsuranceStackParamList } from '../../../navigation/types';
-import { useTheme } from '../../../theme';
+import { useTheme, fontFamily } from '../../../theme';
 import { formatCurrency, formatDate } from '../../../utils/formatters';
 import { InsuranceOtpModal } from '../components/InsuranceOtpModal';
 import { InsurancePaymentMethodTile } from '../components/InsurancePaymentMethodTile';
@@ -125,7 +125,10 @@ export default function InsuranceRenewalsScreen({ route }: Props) {
   };
 
   return (
-    <ScreenShell title="Renewals" subtitle="Pay premiums and manage auto-renew">
+    <ScreenShell
+      // The body is a FlatList, so it owns the scrolling.
+      scrollable={false}
+      title="Renewals" subtitle="Pay premiums and manage auto-renew">
       <FlatList
         data={filteredDues}
         keyExtractor={(item) => item.id}
@@ -256,7 +259,7 @@ const styles = StyleSheet.create({
   },
   sectionTitle: {
     fontSize: 16,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   dueCard: {
     gap: 12,
@@ -272,11 +275,11 @@ const styles = StyleSheet.create({
   },
   planTitle: {
     fontSize: 15,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   planMeta: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   metricRow: {
     flexDirection: 'row',
@@ -285,11 +288,11 @@ const styles = StyleSheet.create({
   },
   metricLabel: {
     fontSize: 12,
-    fontWeight: '600',
+    fontFamily: fontFamily.semibold,
   },
   metricValue: {
     fontSize: 14,
-    fontWeight: '800',
+    fontFamily: fontFamily.bold,
   },
   separator: {
     height: 12,