first implementation of tamagui mobile pages

docs/mobile-styleguide.md

@@ -0,0 +1,61 @@
+# Mobile Admin UI Style Guide (Fotospiel)
+
+Derived from the provided mocks (`fotospiel-tenant-app/all_events_dashboard.png`, `event_details_dashboard.png`, etc.).
+
+## Typography
+- **Body**: Montserrat Regular, 13px, color `#4b5563`; line-height ~1.4.
+- **Headings**: Montserrat SemiBold/Bold, 18–22px, color `#111827`.
+- **Meta/Labels**: 11–13px, weight 500–600; use uppercase sparingly.
+- **Pills/Status/Emotions**: 11px, weight 600, compact padding.
+
+## Colors
+- Primary: `#007AFF`
+- Accent: `#5AD2F4`
+- Text main: `#111827`; secondary: `#4b5563`; muted: `#6b7280`
+- Background: `#f7f8fb`; Cards: `#ffffff`; Border: `#e5e7eb`
+- Status pills: success `#ecfdf3/#047857`; warning `#fffbeb/#92400e`; muted `#f3f4f6/#374151`
+- Action tiles palette: blue `#60a5fa`, amber `#fbbf24`, purple `#a855f7`, green `#4ade80`, coral `#fb7185`, cyan `#38bdf8`
+
+## Layout & Spacing
+- Screen padding: 16–20px
+- Card radius: 14–16px; pill radius: full
+- Gaps: 8–12px between items; 16–20px between sections
+- Shadows: subtle, opacity 5–10%, soft blur for cards/nav
+
+## Navigation
+- Top bar: back on left, title centered, optional right action; height ~56px; bottom border `#e5e7eb`
+- Bottom nav: fixed, 4 items (Events, My Tasks, Alerts, Profile); active uses primary; inactive muted gray
+- Use press/opacity feedback
+
+## CTAs & FAB
+- Primary CTA: 56px height, full-width, solid primary, radius 14–16px, weight 700–800
+- Secondary: white surface, border `#e5e7eb`, same sizing
+- Prefer a floating action button (FAB) for add/create actions (56px diameter, primary, shadow) instead of inline form buttons
+
+## Cards & Lists
+- Event cards: title 18–20px Bold, date/location rows with icons, status pill, light border, soft shadow
+- KPI tiles: icon bubble, label 12–14px, value 20–22px Bold
+- Featured badge overlay on photos; likes/uploader meta
+- Prefer Tamagui list primitives where possible (`List`/`ListItem` with `YGroup`/`Separator`) for settings-style rows instead of custom rows
+
+## Forms
+- Inputs: 42–48px height, radius 10–12px, border `#e5e7eb`, padding 12px, placeholder muted
+- Segmented controls: pill container; active pill primary
+- Toggles: simple checkbox/switch with clear label
+- Use FAB for submit/primary action where appropriate
+
+## Icons
+- Lucide set; sizes: 16 (meta), 20 (nav), 24 (hero/tiles)
+- Active icons use primary; meta icons gray
+
+## State Handling
+- Loading: skeleton cards/tiles (faded card shapes)
+- Empty: centered card with icon + short copy + CTA/FAB
+- Errors: inline card with red text
+
+## Branding/Preview
+- Preview frames: light border, soft background, show primary/accent swatches and selected fonts (Montserrat)
+
+## Interaction
+- Tap targets ≥44px; press opacity feedback
+- Keep forms low-friction; placeholders clear