feat(mobile): Establish design system foundation

[nerioslamaj]

Business Reason

Establish a scalable, maintainable design system for the mobile app that provides:

• Consistent UI/UX across all screens and future features
• Professional, athletic aesthetic aligned with fitness/automotive industry design
• Foundation for rapid feature development with reusable components
• Automatic light/dark theme support for better user experience
• Type-safe design tokens to prevent styling inconsistencies

Proposed Changes

Design System & Tokens

• Created comprehensive design.md with Nike Training Club-inspired design language (monochrome base + red primary)
• Implemented TypeScript design tokens for colors, spacing, typography, component sizes, and animations
• Built useTheme() hook for theme-aware components with automatic light/dark mode support

Infrastructure Updates

• Upgraded Expo SDK 54 → 57 (React Native 0.81 → 0.86)
• Added @expo/ui for native SwiftUI/Jetpack Compose primitives
• Removed NativeWind and Tailwind CSS (replaced with StyleSheet + design tokens)
• Enabled automatic theme switching in app.json

Component Library

• Button component with primary, secondary, and ghost variants
• Text component with typography scale (h1-h4, body, caption, etc.)
• Card component with elevated surface styling
• TextInput component with label and error states
• Migrated LoadingScreen and WrongAudienceScreen to new system

Screen Updates

• Updated sign-in and home screens to use new component library
• All screens now follow design.md specifications
• Consistent styling with design tokens throughout

Documentation

• Updated mobile-components-ui rule for StyleSheet-first approach
• Updated react-native-ui skill to reference design.md as source of truth

How to Verify

1. Install dependencies:

   cd apps/mobile && pnpm install

2. Start the mobile app:

   pnpm nx run mobile:start

3. Verify sign-in screen:

   • Check that the screen uses the new red primary color for buttons
   • Verify inputs have proper rounded borders (12px radius)
   • Test light/dark mode switching in device settings

4. Verify home screen:

   • Sign in and check the "Hello World" screen uses the new Button component
   • Verify Typography follows the design scale (h1 for title, body for description)
   • Test theme switching - should adapt automatically

5. Review design tokens:

   • Open apps/mobile/src/theme/tokens.ts and verify color palette
   • Check apps/mobile/design.md for complete design specifications

6. Test dark mode:

   • Toggle system dark mode on simulator/device
   • Verify all screens adapt correctly with proper contrast
   • Check that borders remain visible in dark mode

Screenshots or Diagrams

See apps/mobile/design.md for:

• Complete color palette (light/dark modes)
• Typography scale
• Spacing system (4px multiples)
• Component specifications with dimensions
• Layout patterns and accessibility guidelines