Update app and ignore local artifacts

components/ui/card.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { colors, radius, spacing } from './tokens';
+
+type CardTone = 'surface' | 'sky' | 'skySoft' | 'cobaltSoft' | 'coralSoft';
+type Props = { children: ReactNode; tone?: CardTone; style?: StyleProp<ViewStyle>; padding?: number; testID?: string };
+
+const toneStyle = {
+  surface: { backgroundColor: colors.neutral.surface, borderWidth: 1, borderColor: colors.neutral.border },
+  sky: { backgroundColor: colors.brand.sky },
+  skySoft: { backgroundColor: colors.brand.skySoft },
+  cobaltSoft: { backgroundColor: colors.brand.cobaltSoft },
+  coralSoft: { backgroundColor: colors.brand.coralSoft },
+} as const;
+
+/** Flat grouped surface. Floating elevation is intentionally reserved for overlays. */
+export function Card({ children, tone = 'surface', padding = spacing[5], style, testID }: Props) {
+  return <View testID={testID} style={[styles.base, toneStyle[tone], { padding }, style]}>{children}</View>;
+}
+
+const styles = StyleSheet.create({
+  base: { borderRadius: radius.card },
+});