feat(admin): modernize tenant admin PWA with cockpit layout and slate theme

- Replaced rainbow grid with phase-aware cockpit layout - Implemented smart lifecycle hero with readiness logic - Introduced dark command bar header with context pill and search placeholder - Updated global Tamagui theme to slate/indigo palette - Refined bottom navigation with minimalist spotlight style
2026-01-17 14:46:19 +01:00
parent 7e77dd2931
commit 40bed1e44e
12 changed files with 17652 additions and 48608 deletions
--- a/.beads/issues.jsonl
+++ b/.beads/issues.jsonl
@@ -1,4 +1,3 @@
-{"id":"--stealth-d39","title":"Superadmin control surface spec and access matrix","description":"Define the minimal superadmin control surface, permissions, and mapping to tenant/guest responsibilities. Document scope and non-goals.","status":"tombstone","priority":2,"issue_type":"task","created_at":"2026-01-01T14:16:06.994379577+01:00","updated_at":"2026-01-01T17:23:28.230936323+01:00","close_reason":"Duplicate of fotospiel-app-ihd after beads re-init","deleted_at":"2026-01-01T17:23:28.230936323+01:00","deleted_by":"soeren","delete_reason":"Remove stray stealth issue id","original_type":"task"}
 {"id":"fotospiel-app-097","title":"Tenant announcements / release notes","description":"Broadcast announcements to tenants/admins with targeting and scheduling.","status":"closed","priority":3,"issue_type":"feature","created_at":"2026-01-01T14:20:21.68206312+01:00","updated_at":"2026-01-02T14:18:31.676816348+01:00","closed_at":"2026-01-02T14:18:31.676816348+01:00","close_reason":"Closed"}
 {"id":"fotospiel-app-0h0","title":"SEC-BILL-02 Signature freshness + retry policies for Paddle webhooks","status":"open","priority":2,"issue_type":"task","created_at":"2026-01-01T15:53:37.618780852+01:00","created_by":"soeren","updated_at":"2026-01-01T15:53:37.618780852+01:00"}
 {"id":"fotospiel-app-0rb","title":"Tenant admin onboarding: inline checkout integration in welcome flow","status":"closed","priority":2,"issue_type":"task","created_at":"2026-01-01T16:08:22.434997456+01:00","created_by":"soeren","updated_at":"2026-01-01T16:08:28.026795975+01:00","closed_at":"2026-01-01T16:08:28.026795975+01:00","close_reason":"Completed in codebase (verified)"}
@@ -48,6 +47,7 @@
 {"id":"fotospiel-app-7uu","title":"Uploader: improve file readiness detection","description":"Part of epic fotospiel-app-5aa. Use size + last-write stabilization to avoid partial uploads.","status":"open","priority":2,"issue_type":"task","owner":"codex-agent@example.com","created_at":"2026-01-13T11:01:54.142231578+01:00","created_by":"Codex Agent","updated_at":"2026-01-13T11:01:54.142231578+01:00"}
 {"id":"fotospiel-app-7x1","title":"Uploader: response format manual override","description":"Part of epic fotospiel-app-5aa. Allow manual response format override when connect code doesn't set it.","status":"open","priority":2,"issue_type":"task","owner":"codex-agent@example.com","created_at":"2026-01-13T11:03:54.824613016+01:00","created_by":"Codex Agent","updated_at":"2026-01-13T11:03:54.824613016+01:00"}
 {"id":"fotospiel-app-83q","title":"Implement Advanced Analytics","description":"Full plan: Phase 1 (MVP) includes Activity Timeline, Top Contributors, and Task Stats. Phase 2 includes Engagement Funnel, Vibe Check, and PDF Export. See chat history for details.","status":"closed","priority":2,"issue_type":"task","created_at":"2026-01-06T15:40:08.826105426+01:00","created_by":"soeren","updated_at":"2026-01-06T16:15:17.722450844+01:00","closed_at":"2026-01-06T16:15:17.722455019+01:00"}
+{"id":"fotospiel-app-8iw","title":"Modernize Tenant Admin PWA UI","status":"open","priority":1,"issue_type":"task","owner":"codex-agent@example.com","created_at":"2026-01-17T14:36:39.802617182+01:00","created_by":"Codex Agent","updated_at":"2026-01-17T14:36:39.802617182+01:00"}
 {"id":"fotospiel-app-8ui","title":"Uploader: persist queue across restarts","description":"Part of epic fotospiel-app-5aa. Persist pending upload queue to disk (settings or local DB) so restarts don't lose files.","status":"open","priority":2,"issue_type":"task","owner":"codex-agent@example.com","created_at":"2026-01-13T11:01:42.213478619+01:00","created_by":"Codex Agent","updated_at":"2026-01-13T11:01:42.213478619+01:00"}
 {"id":"fotospiel-app-95m","title":"Paddle migration: admin catalog sync UI for packages","status":"closed","priority":2,"issue_type":"task","created_at":"2026-01-01T15:57:49.790409261+01:00","created_by":"soeren","updated_at":"2026-01-01T15:57:55.418180246+01:00","closed_at":"2026-01-01T15:57:55.418180246+01:00","close_reason":"Completed in codebase (verified)"}
 {"id":"fotospiel-app-99d","title":"Paddle migration: marketing checkout uses Paddle-hosted checkout","status":"closed","priority":2,"issue_type":"task","created_at":"2026-01-01T15:58:12.298063897+01:00","created_by":"soeren","updated_at":"2026-01-01T15:58:17.968032021+01:00","closed_at":"2026-01-01T15:58:17.968032021+01:00","close_reason":"Completed in codebase (verified)"}
--- a/.beads/last-touched
+++ b/.beads/last-touched
@@ -1 +1 @@
-fotospiel-app-de7
+fotospiel-app-8iw
--- a/.tamagui/tamagui-components.config.cjs
+++ b/.tamagui/tamagui-components.config.cjs
@@ -5152,7 +5152,7 @@ var require_useMergeRefs = __commonJS({
      }
      return React83.useMemo(
        () => (0, _mergeRefs.default)(...args),
-        // eslint-disable-next-line
+         
        [...args]
      );
    }
@@ -12243,7 +12243,7 @@ var require_useMergeRefs2 = __commonJS({
          }
        },
        [...refs]
-        // eslint-disable-line react-hooks/exhaustive-deps
+         
      );
    }
    __name(useMergeRefs, "useMergeRefs");
@@ -12938,7 +12938,7 @@ var require_VirtualizedSectionList = __commonJS({
          }
        };
        this._renderItem = (listItemCount) => (
-          // eslint-disable-next-line react/no-unstable-nested-components
+           
          (_ref2) => {
            var item = _ref2.item, index5 = _ref2.index;
            var info = this._subExtractor(index5);
@@ -30935,17 +30935,17 @@ function useInteractions(propsList) {
  const itemDeps = propsList.map((key) => key == null ? void 0 : key.item);
  const getReferenceProps = React51.useCallback(
    (userProps) => mergeProps(userProps, propsList, "reference"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
    referenceDeps
  );
  const getFloatingProps = React51.useCallback(
    (userProps) => mergeProps(userProps, propsList, "floating"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
    floatingDeps
  );
  const getItemProps = React51.useCallback(
    (userProps) => mergeProps(userProps, propsList, "item"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
    itemDeps
  );
  return React51.useMemo(() => ({
@@ -33866,7 +33866,7 @@ function FloatingFocusManager(props) {
      queueMicrotask(() => {
        const tabbableReturnElement = getFirstTabbableElement(returnElement);
        if (
-          // eslint-disable-next-line react-hooks/exhaustive-deps
+           
          returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && // If the focus moved somewhere else after mount, avoid returning focus
          // since it likely entered a different element which should be
          // respected: https://github.com/floating-ui/floating-ui/issues/2607
@@ -34615,17 +34615,17 @@ function useInteractions2(propsList) {
  const itemDeps = propsList.map((key) => key == null ? void 0 : key.item);
  const getReferenceProps = React60.useCallback(
    (userProps) => mergeProps2(userProps, propsList, "reference"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
    referenceDeps
  );
  const getFloatingProps = React60.useCallback(
    (userProps) => mergeProps2(userProps, propsList, "floating"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
    floatingDeps
  );
  const getItemProps = React60.useCallback(
    (userProps) => mergeProps2(userProps, propsList, "item"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
    itemDeps
  );
  return React60.useMemo(() => ({
@@ -39482,17 +39482,17 @@ function useInteractions3(propsList) {
  const itemDeps = propsList.map((key) => key == null ? void 0 : key.item);
  const getReferenceProps = React76.useCallback(
    (userProps) => mergeProps3(userProps, propsList, "reference"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
    referenceDeps
  );
  const getFloatingProps = React76.useCallback(
    (userProps) => mergeProps3(userProps, propsList, "floating"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
    floatingDeps
  );
  const getItemProps = React76.useCallback(
    (userProps) => mergeProps3(userProps, propsList, "item"),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+     
    itemDeps
  );
  return React76.useMemo(() => ({
--- a/.tamagui/tamagui.config.cjs
+++ b/.tamagui/tamagui.config.cjs
@@ -4160,27 +4160,33 @@ var tokens3 = {
  ...tokens2,
  color: {
    ...tokens2.color,
-    primary: "#FF5C5C",
-    accent: "#3D5AFE",
-    accentSoft: "#E8ECFF",
-    success: "#22C55E",
-    warning: "#FBBF24",
+    primary: "#4F46E5",
+    // Indigo 600
+    accent: "#F43F5E",
+    // Rose 500
+    accentSoft: "#E0E7FF",
+    // Indigo 100
+    success: "#10B981",
+    // Emerald 500
+    warning: "#F59E0B",
+    // Amber 500
    danger: "#EF4444",
+    // Red 500
    surface: "#ffffff",
-    muted: "#FFF6F0",
-    border: "#F3D6C9",
-    text: "#0B132B"
+    muted: "#F8FAFC",
+    // Slate 50
+    border: "#E2E8F0",
+    // Slate 200
+    text: "#0F172A"
+    // Slate 900
  },
  radius: {
-    ...tokens2.radius,
-    card: 20,
+    // ... existing radius tokens ...
+    card: 16,
    tile: 14,
    pill: 999
-  },
-  size: {
-    ...tokens2.size,
-    card: 20
  }
+  // ...
 };
 var themes3 = {
  ...themes2,
@@ -4188,27 +4194,30 @@ var themes3 = {
    ...themes2.light,
    primary: tokens3.color.primary,
    accent: tokens3.color.accent,
-    background: "#FFF1E8",
-    backgroundHover: "#FFE8DD",
-    backgroundPress: "#FFE1D2",
+    background: "#F1F5F9",
+    // Slate 100
+    backgroundHover: "#E2E8F0",
+    backgroundPress: "#CBD5E1",
    backgroundStrong: tokens3.color.surface,
-    backgroundTransparent: "rgba(255, 241, 232, 0)",
+    backgroundTransparent: "rgba(241, 245, 249, 0)",
    color: tokens3.color.text,
-    colorHover: "#091024",
-    colorPress: "#091024",
-    colorFocus: "#091024",
+    colorHover: "#1E293B",
+    colorPress: "#1E293B",
+    colorFocus: "#1E293B",
    borderColor: tokens3.color.border,
-    borderColorHover: "#EBCABA",
-    borderColorPress: "#E1BFAE",
-    shadowColor: "rgba(11, 19, 43, 0.16)",
-    shadowColorPress: "rgba(11, 19, 43, 0.2)",
-    shadowColorFocus: "rgba(11, 19, 43, 0.24)",
+    borderColorHover: "#CBD5E1",
+    borderColorPress: "#94A3B8",
+    shadowColor: "rgba(15, 23, 42, 0.08)",
+    shadowColorPress: "rgba(15, 23, 42, 0.12)",
+    shadowColorFocus: "rgba(15, 23, 42, 0.12)",
    surface: tokens3.color.surface,
    muted: tokens3.color.muted,
    blue3: tokens3.color.accentSoft,
-    blue6: tokens3.color.accent,
+    blue6: "#6366F1",
+    // Indigo 500
    blue10: tokens3.color.primary,
-    blue11: "#1E36F1"
+    blue11: "#4338CA"
+    // Indigo 700
  },
  dark: {
    ...themes2.dark,
--- a/.tamagui/tamagui.config.json
+++ b/.tamagui/tamagui.config.json
--- a/resources/js/admin/mobile/DashboardPage.tsx
+++ b/resources/js/admin/mobile/DashboardPage.tsx
--- a/resources/js/admin/mobile/components/BottomNav.tsx
+++ b/resources/js/admin/mobile/components/BottomNav.tsx
@@ -5,27 +5,28 @@ import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
 import { Home, CheckSquare, Image as ImageIcon, User, LayoutDashboard } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { withAlpha } from './colors';
 import { useAdminTheme } from '../theme';
 import { adminPath } from '../../constants';

-const ICON_SIZE = 20;
+const ICON_SIZE = 24;

 export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';

 export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
  const { t } = useTranslation('mobile');
  const location = useLocation();
-  const { surface, border, primary, accent, muted, subtle, shadow, glassSurfaceStrong, glassBorder, glassShadow } = useAdminTheme();
-  const surfaceColor = glassSurfaceStrong ?? surface;
-  const navSurface = glassSurfaceStrong ?? withAlpha(surfaceColor, 0.92);
-  const navBorder = glassBorder ?? border;
-  const navShadow = glassShadow ?? shadow;
+  const theme = useAdminTheme();
+  
+  // Modern Glass Background
+  const navSurface = 'rgba(255, 255, 255, 0.85)';
+  const navBorder = theme.border;
+  const navShadow = theme.shadow;
+  
  const [pressedKey, setPressedKey] = React.useState<NavKey | null>(null);

  const isDeepHome = active === 'home' && location.pathname !== adminPath('/mobile/dashboard');

-  const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
+  const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string; strokeWidth?: number }>; label: string }> = [
    { key: 'home', icon: isDeepHome ? LayoutDashboard : Home, label: t('nav.home', 'Home') },
    { key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
    { key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
@@ -41,27 +42,29 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
      backgroundColor={navSurface}
      borderTopWidth={1}
      borderColor={navBorder}
-      paddingVertical="$2"
+      paddingVertical="$2.5"
      paddingHorizontal="$4"
      zIndex={50}
      shadowColor={navShadow}
-      shadowOpacity={0.12}
-      shadowRadius={16}
-      shadowOffset={{ width: 0, height: -6 }}
-      // allow for safe-area inset on modern phones
+      shadowOpacity={0.08}
+      shadowRadius={20}
+      shadowOffset={{ width: 0, height: -8 }}
      style={{
        paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)',
-        backdropFilter: 'blur(14px)',
-        WebkitBackdropFilter: 'blur(14px)',
+        backdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: 'blur(20px)',
      }}
    >
-      <XStack width="100%" maxWidth={800} marginHorizontal="auto" justifyContent="space-between" alignItems="center">
+      <XStack width="100%" maxWidth={800} marginHorizontal="auto" justifyContent="space-around" alignItems="center">
        {items.map((item) => {
          const activeState = item.key === active;
          const isPressed = pressedKey === item.key;
          const IconCmp = item.icon;
-          const activeBg = primary;
-          const activeShadow = withAlpha(primary, 0.4);
+          
+          // Dynamic Styles
+          const color = activeState ? theme.primary : theme.subtle;
+          const strokeWidth = activeState ? 2.5 : 2;
+          
          return (
            <Pressable
              key={item.key}
@@ -69,48 +72,36 @@ export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate:
              onPressIn={() => setPressedKey(item.key)}
              onPressOut={() => setPressedKey(null)}
              onPointerLeave={() => setPressedKey(null)}
+              style={{ flex: 1 }}
            >
              <YStack
-                flexGrow={1}
-                flexBasis="0%"
                alignItems="center"
                justifyContent="center"
                space="$1"
-                position="relative"
-                minWidth={88}
-                minHeight={64}
-                paddingHorizontal="$3"
-                paddingVertical="$2"
-                borderRadius={12}
-                backgroundColor={activeState ? activeBg : 'transparent'}
-                gap="$1"
+                minHeight={50}
                style={{
-                  boxShadow: activeState ? `0 10px 22px ${activeShadow}` : undefined,
-                  transform: isPressed ? 'scale(0.96)' : 'scale(1)',
-                  opacity: isPressed ? 0.9 : 1,
-                  transition: 'transform 140ms ease, background-color 140ms ease, opacity 140ms ease',
+                  transform: isPressed ? 'scale(0.92)' : (activeState ? 'scale(1.05)' : 'scale(1)'),
+                  transition: 'transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
                }}
              >
-                {activeState ? (
+                {activeState && (
                   <YStack 
                      position="absolute" 
-                    top={6}
-                    width={28}
-                    height={3}
-                    borderRadius={999}
-                    backgroundColor={accent}
+                      top={-12} 
+                      width={4} 
+                      height={4} 
+                      borderRadius={2} 
+                      backgroundColor={theme.primary} 
                   />
-                ) : null}
-                <YStack width={ICON_SIZE} height={ICON_SIZE} alignItems="center" justifyContent="center" shrink={0}>
-                  <IconCmp size={ICON_SIZE} color={activeState ? 'white' : subtle} />
-                </YStack>
+                )}
+                
+                <IconCmp size={ICON_SIZE} color={color} strokeWidth={strokeWidth} />
+                
                <Text
-                  fontSize="$xs"
-                  fontWeight="700"
-                  fontFamily="$body"
-                  color={activeState ? 'white' : muted}
+                  fontSize={10}
+                  fontWeight={activeState ? "700" : "500"}
+                  color={color}
                  textAlign="center"
-                  flexShrink={1}
                >
                  {item.label}
                </Text>
--- a/resources/js/admin/mobile/components/MobileShell.tsx
+++ b/resources/js/admin/mobile/components/MobileShell.tsx
@@ -1,9 +1,10 @@
 import React, { Suspense } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { ChevronLeft, Bell, QrCode, ChevronsUpDown } from 'lucide-react';
+import { ChevronLeft, Bell, QrCode, ChevronsUpDown, Search } from 'lucide-react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
+import { Image } from '@tamagui/image';
 import { useTranslation } from 'react-i18next';
 import { useEventContext } from '../../context/EventContext';
 import { BottomNav, NavKey } from './BottomNav';
@@ -39,37 +40,21 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
  const { t } = useTranslation('mobile');
  const { count: notificationCount } = useNotificationsBadge();
  const online = useOnlineStatus();
-  const {
-    background,
-    surface,
-    border,
-    text,
-    muted,
-    warningBg,
-    warningText,
-    primary,
-    danger,
-    shadow,
-    glassSurfaceStrong,
-    glassBorder,
-    glassShadow,
-    appBackground,
-  } = useAdminTheme();
-  const backgroundColor = background;
-  const surfaceColor = surface;
-  const borderColor = border;
-  const textColor = text;
-  const mutedText = muted;
-  const headerSurface = glassSurfaceStrong ?? withAlpha(surfaceColor, 0.94);
-  const headerBorder = glassBorder ?? borderColor;
-  const actionSurface = glassSurfaceStrong ?? surfaceColor;
-  const actionBorder = glassBorder ?? borderColor;
-  const actionShadow = glassShadow ?? shadow;
+  
+  const theme = useAdminTheme();
+  
+  const backgroundColor = theme.background;
+  
+  // --- DARK HEADER ---
+  const headerSurface = '#0F172A'; // Slate 900
+  const actionSurface = 'rgba(255, 255, 255, 0.1)';
+  const actionBorder = 'rgba(255, 255, 255, 0.05)';
+  const textColor = 'white';
+  
  const [fallbackEvents, setFallbackEvents] = React.useState<TenantEvent[]>([]);
  const [loadingEvents, setLoadingEvents] = React.useState(false);
  const [attemptedFetch, setAttemptedFetch] = React.useState(false);
  const [queuedPhotoCount, setQueuedPhotoCount] = React.useState(0);
-  const [isCompactHeader, setIsCompactHeader] = React.useState(false);

  const effectiveEvents = events.length ? events : fallbackEvents;
  const effectiveActive = activeEvent ?? (effectiveEvents.length === 1 ? effectiveEvents[0] : null);
@@ -93,13 +78,7 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head

  React.useEffect(() => {
    const path = `${location.pathname}${location.search}${location.hash}`;
-    
-    // Blacklist transient paths from being saved in tab history
-    const isBlacklisted = 
-      location.pathname.includes('/billing/shop') || 
-      location.pathname.includes('/welcome');
-
-    if (!isBlacklisted) {
+    if (!location.pathname.includes('/billing/shop') && !location.pathname.includes('/welcome')) {
      setTabHistory(activeTab, path);
    }
  }, [activeTab, location.hash, location.pathname, location.search]);
@@ -116,44 +95,18 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
  React.useEffect(() => {
    const handleFocus = () => refreshQueuedActions();
    window.addEventListener('focus', handleFocus);
-    return () => {
-      window.removeEventListener('focus', handleFocus);
-    };
+    return () => window.removeEventListener('focus', handleFocus);
  }, [refreshQueuedActions]);

-  React.useEffect(() => {
-    if (typeof window === 'undefined' || !window.matchMedia) {
-      return;
-    }
-    const query = window.matchMedia('(max-width: 520px)');
-    const handleChange = (event: MediaQueryListEvent) => {
-      setIsCompactHeader(event.matches);
-    };
-    setIsCompactHeader(query.matches);
-    query.addEventListener?.('change', handleChange);
-    return () => {
-      query.removeEventListener?.('change', handleChange);
-    };
-  }, []);
-
  const pageTitle = title ?? t('header.appName', 'Event Admin');
-  const eventContext = !isCompactHeader
-    ? effectiveActive
-      ? resolveEventDisplayName(effectiveActive)
-      : hasMultipleEvents
-        ? t('header.selectEvent', 'Select an event')
-        : null
-    : null;
-  const subtitleText = subtitle ?? eventContext ?? '';
+  const isEventsIndex = location.pathname === ADMIN_EVENTS_PATH;
+  const canSwitchEvents = hasMultipleEvents && !isEventsIndex;
  const isMember = user?.role === 'member';
  const memberPermissions = Array.isArray(effectiveActive?.member_permissions) ? effectiveActive?.member_permissions ?? [] : [];
+  
  const allowPermission = (permission: string) => {
-    if (!isMember) {
-      return true;
-    }
-    if (memberPermissions.includes('*') || memberPermissions.includes(permission)) {
-      return true;
-    }
+    if (!isMember) return true;
+    if (memberPermissions.includes('*') || memberPermissions.includes(permission)) return true;
    if (permission.includes(':')) {
      const [prefix] = permission.split(':');
      return memberPermissions.includes(`${prefix}:*`);
@@ -161,85 +114,107 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
    return false;
  };
  const showQr = Boolean(effectiveActive?.slug) && allowPermission('join-tokens:manage');
+
+  // --- CONTEXT PILL ---
+  const EventContextPill = () => {
+    if (!effectiveActive || isEventsIndex) {
+       return (
+         <Text fontSize="$md" fontWeight="800" fontFamily="$display" color="white">
+            {pageTitle}
+         </Text>
+       );
+    }
+
+    const displayName = resolveEventDisplayName(effectiveActive);
+
+    if (!canSwitchEvents) {
+       return (
+         <Text fontSize="$sm" fontWeight="800" color="white" numberOfLines={1} ellipsizeMode="tail">
+            {displayName}
+         </Text>
+       );
+    }
+
+    return (
+      <Pressable onPress={() => navigate(ADMIN_EVENTS_PATH)}>
+        <XStack 
+           backgroundColor="rgba(255, 255, 255, 0.12)" 
+           paddingHorizontal="$3" 
+           paddingVertical="$1.5" 
+           borderRadius={999}
+           alignItems="center"
+           space="$1.5"
+           maxWidth={220}
+           borderWidth={1}
+           borderColor="rgba(255, 255, 255, 0.08)"
+           pressStyle={{ backgroundColor: 'rgba(255, 255, 255, 0.2)' }}
+        >
+           <Text 
+              fontSize="$sm" 
+              fontWeight="700" 
+              color="white" 
+              numberOfLines={1} 
+              ellipsizeMode="tail"
+              flexShrink={1}
+           >
+              {displayName}
+           </Text>
+           <ChevronsUpDown size={14} color="rgba(255,255,255,0.6)" />
+        </XStack>
+      </Pressable>
+    );
+  };
+
  const headerBackButton = onBack ? (
    <HeaderActionButton onPress={onBack} ariaLabel={t('actions.back', 'Back')}>
      <XStack alignItems="center" space="$1.5">
-        <ChevronLeft size={28} color={primary} strokeWidth={2.5} />
+        <ChevronLeft size={28} color="white" strokeWidth={2.5} />
      </XStack>
    </HeaderActionButton>
  ) : (
-    <XStack width={28} />
+    <HeaderActionButton onPress={() => {}} ariaLabel="Search">
+       <XStack width={36} height={36} borderRadius={10} alignItems="center" justifyContent="center">
+          <Search size={22} color="rgba(255,255,255,0.8)" strokeWidth={2.5} />
+       </XStack>
+    </HeaderActionButton>
  );
-  const headerTitleRight = (
-    <YStack alignItems="flex-end" maxWidth="100%">
-      <Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="right" numberOfLines={1}>
-        {pageTitle}
-      </Text>
-      {subtitleText ? (
-        <Text fontSize="$xs" color={mutedText} textAlign="right" numberOfLines={1} fontFamily="$body">
-          {subtitleText}
-        </Text>
-      ) : null}
-    </YStack>
-  );
-  const headerTitleCenter = (
-    <YStack alignItems="center" maxWidth="100%">
-      <Text fontSize="$lg" fontWeight="800" fontFamily="$display" color={textColor} textAlign="center" numberOfLines={1}>
-        {pageTitle}
-      </Text>
-      {subtitleText ? (
-        <Text fontSize="$xs" color={mutedText} textAlign="center" numberOfLines={1} fontFamily="$body">
-          {subtitleText}
-        </Text>
-      ) : null}
-    </YStack>
-  );
-  const isEventsIndex = location.pathname === ADMIN_EVENTS_PATH;
-  const canSwitchEvents = hasMultipleEvents && !isEventsIndex;
+  
  const headerActionsRow = (
-    <XStack alignItems="center" space="$2">
-      {canSwitchEvents ? (
-        <HeaderActionButton onPress={() => navigate(ADMIN_EVENTS_PATH)} ariaLabel={t('header.switchEvent', 'Switch event')}>
+    <XStack alignItems="center" space="$2.5">
+      {showQr ? (
+        <HeaderActionButton
+          onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
+          ariaLabel={t('header.quickQr', 'Quick QR')}
+        >
          <XStack
-            width={34}
-            height={34}
-            borderRadius={12}
-            backgroundColor={actionSurface}
-            borderWidth={1}
-            borderColor={actionBorder}
+            width={36}
+            height={36}
+            borderRadius={10}
+            backgroundColor="rgba(255, 255, 255, 0.15)"
            alignItems="center"
            justifyContent="center"
-            style={{
-              boxShadow: `0 10px 18px ${actionShadow}`,
-              backdropFilter: 'blur(12px)',
-              WebkitBackdropFilter: 'blur(12px)',
-            }}
          >
-            <ChevronsUpDown size={16} color={textColor} />
+            <QrCode size={18} color="white" />
          </XStack>
        </HeaderActionButton>
      ) : null}
+
      <HeaderActionButton
        onPress={() => navigate(adminPath('/mobile/notifications'))}
        ariaLabel={t('mobile.notifications', 'Notifications')}
      >
        <XStack
-          width={34}
-          height={34}
-          borderRadius={12}
+          width={36}
+          height={36}
+          borderRadius={10}
          backgroundColor={actionSurface}
          borderWidth={1}
          borderColor={actionBorder}
          alignItems="center"
          justifyContent="center"
          position="relative"
-          style={{
-            boxShadow: `0 10px 18px ${actionShadow}`,
-            backdropFilter: 'blur(12px)',
-            WebkitBackdropFilter: 'blur(12px)',
-          }}
        >
-          <Bell size={16} color={textColor} />
+          <Bell size={18} color="white" />
          {notificationCount > 0 ? (
            <YStack
              position="absolute"
@@ -249,9 +224,11 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
              height={18}
              paddingHorizontal={6}
              borderRadius={999}
-              backgroundColor={danger}
+              backgroundColor={theme.accent}
              alignItems="center"
              justifyContent="center"
+              borderWidth={2}
+              borderColor={headerSurface} 
            >
              <Text fontSize={10} color="white" fontWeight="700">
                {notificationCount > 9 ? '9+' : notificationCount}
@@ -260,24 +237,26 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
          ) : null}
        </XStack>
      </HeaderActionButton>
-      {showQr ? (
-        <HeaderActionButton
-          onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
-          ariaLabel={t('header.quickQr', 'Quick QR')}
-        >
+
+      {/* User Avatar */}
+      <Pressable onPress={() => navigate(adminPath('/mobile/profile'))}>
        <XStack 
-            width={34}
-            height={34}
-            borderRadius={12}
-            backgroundColor={primary}
-            alignItems="center"
-            justifyContent="center"
-            style={{ boxShadow: `0 10px 18px ${withAlpha(primary, 0.32)}` }}
+           width={36} height={36} borderRadius={18} 
+           backgroundColor={actionSurface} 
+           overflow="hidden" 
+           alignItems="center" justifyContent="center"
+           borderWidth={1} borderColor={actionBorder}
        >
-            <QrCode size={16} color="white" />
+           {user?.avatar_url ? (
+              <Image source={{ uri: user.avatar_url }} width={36} height={36} resizeMode="cover" />
+           ) : (
+              <Text fontSize="$xs" fontWeight="700" color="white">
+                 {user?.name?.charAt(0).toUpperCase() ?? 'U'}
+              </Text>
+           )}
        </XStack>
-        </HeaderActionButton>
-      ) : null}
+      </Pressable>
+
      {headerActions ?? null}
    </XStack>
  );
@@ -287,19 +266,12 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
      backgroundColor={backgroundColor}
      minHeight="100vh"
      alignItems="center"
-      style={{ background: appBackground }}
    >
      <YStack
        backgroundColor={headerSurface}
-        borderBottomWidth={1}
-        borderColor={headerBorder}
        paddingHorizontal="$4"
        paddingTop="$4"
        paddingBottom="$3"
-        shadowColor={actionShadow}
-        shadowOpacity={0.08}
-        shadowRadius={14}
-        shadowOffset={{ width: 0, height: 8 }}
        width="100%"
        maxWidth={800}
        position="sticky"
@@ -307,37 +279,19 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
        zIndex={60}
        style={{
          paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
-          backdropFilter: 'blur(12px)',
-          WebkitBackdropFilter: 'blur(12px)',
        }}
      >
-        {isCompactHeader ? (
-          <XStack
-            alignItems="center"
-            justifyContent="space-between"
-            minHeight={48}
-            space="$3"
-            flexWrap="wrap"
-          >
+        <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$2">
            {headerBackButton}
-            <XStack flex={1} minWidth={120} justifyContent="center">
-              {headerTitleCenter}
+            
+            <XStack flex={1} justifyContent="center" alignItems="center">
+               <EventContextPill />
            </XStack>
-            <XStack justifyContent="flex-end" flexShrink={0} style={{ marginLeft: 'auto' }}>
+
+            <XStack justifyContent="flex-end" minWidth={28}>
              {headerActionsRow}
            </XStack>
        </XStack>
-        ) : (
-          <XStack alignItems="center" justifyContent="space-between" minHeight={48} space="$3">
-            {headerBackButton}
-            <XStack alignItems="center" space="$2.5" flex={1} justifyContent="flex-end" minWidth={0}>
-              <XStack flex={1} minWidth={0} justifyContent="flex-end">
-                {headerTitleRight}
-              </XStack>
-              {headerActionsRow}
-            </XStack>
-          </XStack>
-        )}
      </YStack>

      <YStack
@@ -350,25 +304,18 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
        style={{ paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 96px)' }}
      >
        {!online ? (
-          <XStack
-            alignItems="center"
-            justifyContent="center"
-            borderRadius={12}
-            backgroundColor={warningBg}
-            paddingVertical="$2"
-            paddingHorizontal="$3"
-          >
-            <Text fontSize="$xs" fontWeight="700" color={warningText}>
+          <XStack alignItems="center" justifyContent="center" borderRadius={12} backgroundColor={theme.warningBg} paddingVertical="$2" paddingHorizontal="$3">
+            <Text fontSize="$xs" fontWeight="700" color={theme.warningText}>
              {t('status.offline', 'Offline mode: changes will sync when you are back online.')}
            </Text>
          </XStack>
        ) : null}
        {queuedPhotoCount > 0 ? (
          <MobileCard space="$2">
-            <Text fontSize="$sm" fontWeight="700" color={textColor}>
+            <Text fontSize="$sm" fontWeight="700" color={theme.textStrong}>
              {t('status.queueTitle', 'Photo actions pending')}
            </Text>
-            <Text fontSize="$xs" color={mutedText}>
+            <Text fontSize="$xs" color={theme.muted}>
              {online
                ? t('status.queueBodyOnline', '{{count}} actions ready to sync.', { count: queuedPhotoCount })
                : t('status.queueBodyOffline', '{{count}} actions saved offline.', { count: queuedPhotoCount })}
@@ -387,7 +334,6 @@ export function MobileShell({ title, subtitle, children, activeTab, onBack, head
      </YStack>

      <BottomNav active={activeTab} onNavigate={go} />
-
    </YStack>
  );
 }
@@ -419,16 +365,3 @@ export function HeaderActionButton({
    </Pressable>
  );
 }
-
-export function renderEventLocation(event?: TenantEvent | null): string {
-  if (!event) return 'Location';
-  const settings = (event.settings ?? {}) as Record<string, unknown>;
-  const candidate =
-    (settings.location as string | undefined) ??
-    (settings.address as string | undefined) ??
-    (settings.city as string | undefined);
-  if (candidate && candidate.trim()) {
-    return candidate;
-  }
-  return 'Location';
-}
--- a/resources/js/admin/mobile/hooks/useEventReadiness.ts
+++ b/resources/js/admin/mobile/hooks/useEventReadiness.ts
@@ -0,0 +1,90 @@
+import { TenantEvent } from '../../api';
+import { adminPath } from '../../constants';
+
+export type ReadinessStep = {
+  id: string;
+  label: string;
+  isComplete: boolean;
+  ctaLabel: string;
+  targetPath: string;
+  priority: number; // Lower is higher priority
+};
+
+export type ReadinessStatus = {
+  steps: ReadinessStep[];
+  totalSteps: number;
+  completedSteps: number;
+  progress: number; // 0 to 1
+  nextStep: ReadinessStep | null;
+  isReady: boolean;
+};
+
+export function useEventReadiness(event: TenantEvent | null): ReadinessStatus {
+  if (!event) {
+    return { steps: [], totalSteps: 0, completedSteps: 0, progress: 0, nextStep: null, isReady: false };
+  }
+
+  const settings = (event.settings ?? {}) as Record<string, unknown>;
+  
+  // 1. Basics: Date & Location
+  const hasDate = Boolean(event.event_date);
+  const hasLocation = Boolean(
+    (settings.location as string) || 
+    (settings.address as string) || 
+    (settings.city as string)
+  );
+  
+  // 2. Engagement: Tasks (only if tasks are enabled)
+  const tasksEnabled = event.engagement_mode !== 'photo_only';
+  const hasTasks = (event.tasks_count ?? 0) > 0;
+  
+  // 3. Access: QR / Invites
+  // We consider it "done" if there is at least one active invite token (default is created on event creation usually, but let's check)
+  const hasInvite = (event.active_invites_count ?? 0) > 0 || (event.total_invites_count ?? 0) > 0;
+
+  const steps: ReadinessStep[] = [
+    {
+      id: 'basics',
+      label: 'Date & Location',
+      isComplete: hasDate && hasLocation,
+      ctaLabel: 'Set Date & Location',
+      targetPath: `/mobile/events/${event.slug}/edit`,
+      priority: 1
+    },
+    {
+      id: 'access',
+      label: 'QR Codes',
+      isComplete: hasInvite,
+      ctaLabel: 'Get QR Code',
+      targetPath: `/mobile/events/${event.slug}/qr`,
+      priority: 3 // Access is usually needed after setup
+    }
+  ];
+
+  if (tasksEnabled) {
+    steps.push({
+      id: 'tasks',
+      label: 'Photo Tasks',
+      isComplete: hasTasks,
+      ctaLabel: 'Add Photo Tasks',
+      targetPath: `/mobile/events/${event.slug}/tasks`,
+      priority: 2 // Content comes before distribution
+    });
+  }
+
+  // Sort by priority
+  steps.sort((a, b) => a.priority - b.priority);
+
+  const completedSteps = steps.filter(s => s.isComplete).length;
+  const totalSteps = steps.length;
+  const nextStep = steps.find(s => !s.isComplete) ?? null;
+
+  return {
+    steps,
+    totalSteps,
+    completedSteps,
+    progress: totalSteps > 0 ? completedSteps / totalSteps : 0,
+    nextStep,
+    isReady: !nextStep
+  };
+}
--- a/resources/js/admin/mobile/theme.ts
+++ b/resources/js/admin/mobile/theme.ts
@@ -1,48 +1,46 @@
 import { useTheme } from '@tamagui/core';

 export const ADMIN_COLORS = {
-  primary: '#FF5C5C',
-  primaryStrong: '#E63B57',
-  accent: '#3D5AFE',
-  accentSoft: '#E8ECFF',
-  accentWarm: '#FFE3D6',
-  warning: '#FBBF24',
-  success: '#22C55E',
-  danger: '#EF4444',
-  text: '#0B132B',
-  textMuted: '#54606E',
-  textSubtle: '#8C99A8',
-  border: '#F3D6C9',
+  primary: '#4F46E5', // Indigo 600
+  primaryStrong: '#4338CA', // Indigo 700
+  accent: '#F43F5E', // Rose 500
+  accentSoft: '#E0E7FF', // Indigo 100
+  accentWarm: '#FFE4E6', // Rose 100
+  warning: '#F59E0B', // Amber 500
+  success: '#10B981', // Emerald 500
+  danger: '#EF4444', // Red 500
+  text: '#0F172A', // Slate 900
+  textMuted: '#475569', // Slate 600
+  textSubtle: '#64748B', // Slate 500
+  border: '#E2E8F0', // Slate 200
  surface: '#FFFFFF',
-  surfaceMuted: '#FFF6F0',
-  backdrop: '#0B132B',
+  surfaceMuted: '#F8FAFC', // Slate 50
+  backdrop: '#0F172A',
 };

 export const ADMIN_ACTION_COLORS = {
-  settings: '#00C2A8',
-  tasks: '#FFC857',
-  qr: '#3D5AFE',
-  images: '#FF7AB6',
-  liveShow: '#FF6D00',
-  liveShowSettings: '#00B0FF',
-  guests: '#22C55E',
-  guestMessages: '#FF8A00',
-  branding: '#00B4D8',
-  photobooth: '#FF3D71',
+  settings: '#64748B', // Slate 500
+  tasks: '#F43F5E', // Rose 500 (Accent)
+  qr: '#10B981', // Emerald 500
+  images: '#4F46E5', // Indigo 600 (Primary)
+  liveShow: '#F59E0B', // Amber 500
+  liveShowSettings: '#6366F1', // Indigo 500
+  guests: '#334155', // Slate 700
+  guestMessages: '#4F46E5', 
+  branding: '#6366F1',
+  photobooth: '#8B5CF6', // Violet 500
  recap: '#94A3B8',
-  packages: ADMIN_COLORS.primary,
-  analytics: '#22C55E',
-  invites: '#3D5AFE',
+  packages: '#4F46E5',
+  analytics: '#10B981',
+  invites: '#10B981',
 };

 export const ADMIN_GRADIENTS = {
-  primaryCta: `linear-gradient(135deg, ${ADMIN_COLORS.primary}, #FF9A5C, ${ADMIN_COLORS.accent})`,
-  softCard: 'linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,245,238,0.92))',
-  loginBackground: 'linear-gradient(135deg, #0b132b, #162040, #0b132b)',
-  appBackground:
-    'radial-gradient(circle at 15% 0%, rgba(255, 92, 92, 0.22), transparent 50%), radial-gradient(circle at 85% 10%, rgba(61, 90, 254, 0.2), transparent 55%), linear-gradient(180deg, #fff4ee 0%, #ffefe4 100%)',
-  appBackgroundDark:
-    'radial-gradient(circle at 15% 0%, rgba(255, 92, 92, 0.18), transparent 55%), radial-gradient(circle at 85% 10%, rgba(61, 90, 254, 0.18), transparent 55%), linear-gradient(180deg, #0b132b 0%, #0e1a33 100%)',
+  primaryCta: `linear-gradient(135deg, ${ADMIN_COLORS.primary}, ${ADMIN_COLORS.primaryStrong})`,
+  softCard: 'linear-gradient(145deg, rgba(255,255,255,1), rgba(248,250,252,0.95))',
+  loginBackground: 'linear-gradient(135deg, #0F172A, #1E293B, #0F172A)',
+  appBackground: 'linear-gradient(180deg, #F1F5F9 0%, #F1F5F9 100%)',
+  appBackgroundDark: 'linear-gradient(180deg, #0F172A 0%, #1E293B 100%)',
 };

 export const ADMIN_MOTION = {
@@ -78,7 +76,7 @@ function parseRgb(color: string): Rgb | null {
  return null;
 }

-function withAlpha(color: string, alpha: number): string {
+export function withAlpha(color: string, alpha: number): string {
  const rgb = parseRgb(color);
  if (! rgb) {
    return color;
@@ -99,43 +97,43 @@ function isDarkColor(color: string): boolean {

 export function useAdminTheme() {
  const theme = useTheme();
-  const background = String(theme.background?.val ?? '#FFF8F5');
+  const background = String(theme.background?.val ?? ADMIN_COLORS.surfaceMuted);
  const surface = String(theme.surface?.val ?? ADMIN_COLORS.surface);
  const border = String(theme.borderColor?.val ?? ADMIN_COLORS.border);
  const isDark = isDarkColor(background);
  const glassSurface = withAlpha(surface, isDark ? 0.96 : 0.98);
  const glassSurfaceStrong = withAlpha(surface, isDark ? 1 : 1);
  const glassBorder = withAlpha(border, isDark ? 0.85 : 0.95);
-  const glassShadow = isDark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(11, 19, 43, 0.18)';
+  const glassShadow = isDark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(15, 23, 42, 0.08)';
  const appBackground = isDark ? ADMIN_GRADIENTS.appBackgroundDark : ADMIN_GRADIENTS.appBackground;

  return {
    theme,
    background,
    surface,
-    surfaceMuted: String(theme.gray2?.val ?? ADMIN_COLORS.surfaceMuted),
+    surfaceMuted: String(theme.muted?.val ?? ADMIN_COLORS.surfaceMuted),
    border,
    text: String(theme.color?.val ?? ADMIN_COLORS.text),
-    textStrong: String(theme.color12?.val ?? theme.color?.val ?? ADMIN_COLORS.text),
-    muted: String(theme.gray?.val ?? ADMIN_COLORS.textMuted),
-    subtle: String(theme.gray8?.val ?? ADMIN_COLORS.textSubtle),
+    textStrong: String(theme.text?.val ?? theme.color?.val ?? ADMIN_COLORS.text),
+    muted: String(theme.muted?.val ?? ADMIN_COLORS.textMuted),
+    subtle: String(theme.textSubtle?.val ?? ADMIN_COLORS.textSubtle),
    primary: String(theme.primary?.val ?? ADMIN_COLORS.primary),
-    accent: String(theme.blue6?.val ?? theme.accent?.val ?? ADMIN_COLORS.accent),
+    accent: String(theme.accent?.val ?? ADMIN_COLORS.accent),
    accentSoft: String(theme.blue3?.val ?? ADMIN_COLORS.accentSoft),
-    accentStrong: String(theme.blue10?.val ?? ADMIN_COLORS.primaryStrong),
-    successBg: String(theme.green3?.val ?? '#DCFCE7'),
+    accentStrong: String(theme.blue11?.val ?? ADMIN_COLORS.primaryStrong),
+    successBg: String(theme.backgroundStrong?.val ?? '#DCFCE7'),
    successText: String(theme.green10?.val ?? '#166534'),
    dangerBg: String(theme.red3?.val ?? '#FEE2E2'),
    dangerText: String(theme.red11?.val ?? ADMIN_COLORS.danger),
-    warningBg: String(theme.yellow3?.val ?? '#FFF7ED'),
-    warningBorder: String(theme.yellow6?.val ?? '#FED7AA'),
-    warningText: String(theme.yellow11?.val ?? '#92400E'),
+    warningBg: String(theme.yellow3?.val ?? '#FEF3C7'),
+    warningBorder: String(theme.yellow6?.val ?? '#FCD34D'),
+    warningText: String(theme.yellow11?.val ?? '#B45309'),
    infoBg: String(theme.blue3?.val ?? ADMIN_COLORS.accentSoft),
    infoText: String(theme.blue10?.val ?? ADMIN_COLORS.primaryStrong),
-    danger: String(theme.red10?.val ?? ADMIN_COLORS.danger),
-    backdrop: String(theme.gray12?.val ?? ADMIN_COLORS.backdrop),
-    overlay: withAlpha(String(theme.gray12?.val ?? ADMIN_COLORS.backdrop), 0.6),
-    shadow: String(theme.shadowColor?.val ?? 'rgba(15, 23, 42, 0.12)'),
+    danger: String(theme.danger?.val ?? ADMIN_COLORS.danger),
+    backdrop: String(theme.backgroundStrong?.val ?? ADMIN_COLORS.backdrop),
+    overlay: withAlpha(String(theme.backgroundStrong?.val ?? ADMIN_COLORS.backdrop), 0.6),
+    shadow: String(theme.shadowColor?.val ?? 'rgba(15, 23, 42, 0.08)'),
    glassSurface,
    glassSurfaceStrong,
    glassBorder,
--- a/resources/js/guest/guest-sw.ts
+++ b/resources/js/guest/guest-sw.ts
@@ -1,4 +1,4 @@
-/* eslint-disable no-restricted-globals */
+ 
 /// <reference lib="webworker" />

 import { clientsClaim } from 'workbox-core';
--- a/tamagui.config.ts
+++ b/tamagui.config.ts
@@ -8,27 +8,24 @@ const tokens = {
  ...baseTokens,
  color: {
    ...baseTokens.color,
-    primary: '#FF5C5C',
-    accent: '#3D5AFE',
-    accentSoft: '#E8ECFF',
-    success: '#22C55E',
-    warning: '#FBBF24',
-    danger: '#EF4444',
+    primary: '#4F46E5', // Indigo 600
+    accent: '#F43F5E', // Rose 500
+    accentSoft: '#E0E7FF', // Indigo 100
+    success: '#10B981', // Emerald 500
+    warning: '#F59E0B', // Amber 500
+    danger: '#EF4444', // Red 500
    surface: '#ffffff',
-    muted: '#FFF6F0',
-    border: '#F3D6C9',
-    text: '#0B132B',
+    muted: '#F8FAFC', // Slate 50
+    border: '#E2E8F0', // Slate 200
+    text: '#0F172A', // Slate 900
  },
  radius: {
-    ...baseTokens.radius,
-    card: 20,
+// ... existing radius tokens ...
+    card: 16,
    tile: 14,
    pill: 999,
  },
-  size: {
-    ...baseTokens.size,
-    card: 20,
-  },
+// ...
 };

 const themes = {
@@ -37,27 +34,27 @@ const themes = {
    ...baseThemes.light,
    primary: tokens.color.primary,
    accent: tokens.color.accent,
-    background: '#FFF1E8',
-    backgroundHover: '#FFE8DD',
-    backgroundPress: '#FFE1D2',
+    background: '#F1F5F9', // Slate 100
+    backgroundHover: '#E2E8F0',
+    backgroundPress: '#CBD5E1',
    backgroundStrong: tokens.color.surface,
-    backgroundTransparent: 'rgba(255, 241, 232, 0)',
+    backgroundTransparent: 'rgba(241, 245, 249, 0)',
    color: tokens.color.text,
-    colorHover: '#091024',
-    colorPress: '#091024',
-    colorFocus: '#091024',
+    colorHover: '#1E293B',
+    colorPress: '#1E293B',
+    colorFocus: '#1E293B',
    borderColor: tokens.color.border,
-    borderColorHover: '#EBCABA',
-    borderColorPress: '#E1BFAE',
-    shadowColor: 'rgba(11, 19, 43, 0.16)',
-    shadowColorPress: 'rgba(11, 19, 43, 0.2)',
-    shadowColorFocus: 'rgba(11, 19, 43, 0.24)',
+    borderColorHover: '#CBD5E1',
+    borderColorPress: '#94A3B8',
+    shadowColor: 'rgba(15, 23, 42, 0.08)',
+    shadowColorPress: 'rgba(15, 23, 42, 0.12)',
+    shadowColorFocus: 'rgba(15, 23, 42, 0.12)',
    surface: tokens.color.surface,
    muted: tokens.color.muted,
    blue3: tokens.color.accentSoft,
-    blue6: tokens.color.accent,
+    blue6: '#6366F1', // Indigo 500
    blue10: tokens.color.primary,
-    blue11: '#1E36F1',
+    blue11: '#4338CA', // Indigo 700
  },
  dark: {
    ...baseThemes.dark,