first implementation of tamagui mobile pages

tamagui.config.ts

@@ -0,0 +1,72 @@
+import { defaultConfig } from '@tamagui/config/v4'
+import { createTamagui } from '@tamagui/core';
+import { shorthands } from '@tamagui/shorthands';
+import { tokens as baseTokens, themes as baseThemes } from '@tamagui/themes';
+import { createAnimations } from '@tamagui/animations-css';
+
+const tokens = {
+  ...baseTokens,
+  color: {
+    ...baseTokens.color,
+    primary: '#007AFF',
+    accent: '#5AD2F4',
+    success: '#2ECC71',
+    warning: '#F5C542',
+    danger: '#FF5F56',
+    surface: '#ffffff',
+    muted: '#f3f4f6',
+  },
+  radius: {
+    ...baseTokens.radius,
+    card: 18,
+    tile: 16,
+    pill: 999,
+  },
+  size: {
+    ...baseTokens.size,
+    card: 18,
+  },
+};
+
+const themes = {
+  ...baseThemes,
+  light: {
+    ...baseThemes.light,
+    primary: tokens.color.primary,
+    accent: tokens.color.accent,
+    background: '#f5f7fb',
+    surface: tokens.color.surface,
+  },
+  dark: {
+    ...baseThemes.dark,
+    primary: tokens.color.primary,
+    accent: tokens.color.accent,
+    background: '#0f172a',
+    surface: '#111827',
+  },
+};
+
+const config = createTamagui({
+  ...defaultConfig,
+  animations: createAnimations({
+    fast: 'ease-in 150ms',
+    medium: 'ease 250ms',
+    slow: 'ease-out 400ms',
+  }),
+  tokens,
+  themes,
+  shorthands,
+  media: {
+    ...defaultConfig.media,
+    xs: { maxWidth: 660 },
+    sm: { maxWidth: 840 },
+    md: { maxWidth: 1024 },
+  },
+});
+
+export type AppConfig = typeof config;
+export default config;
+
+declare module '@tamagui/core' {
+  interface TamaguiCustomConfig extends AppConfig {}
+}