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

.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)"}

.beads/last-touched

@@ -1 +1 @@
-fotospiel-app-de7
+fotospiel-app-8iw

.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(() => ({

.tamagui/tamagui.config.cjs

@@ -4160,27 +4160,33 @@ var tokens3 = {
   ...tokens2,
   color: {
     ...tokens2.color,
-    primary: "#FF5C5C",
+    primary: "#4F46E5",
-    accent: "#3D5AFE",
+    // Indigo 600
-    accentSoft: "#E8ECFF",
+    accent: "#F43F5E",
-    success: "#22C55E",
+    // Rose 500
-    warning: "#FBBF24",
+    accentSoft: "#E0E7FF",
+    // Indigo 100
+    success: "#10B981",
+    // Emerald 500
+    warning: "#F59E0B",
+    // Amber 500
     danger: "#EF4444",
+    // Red 500
     surface: "#ffffff",
-    muted: "#FFF6F0",
+    muted: "#F8FAFC",
-    border: "#F3D6C9",
+    // Slate 50
-    text: "#0B132B"
+    border: "#E2E8F0",
+    // Slate 200
+    text: "#0F172A"
+    // Slate 900
   },
   radius: {
-    ...tokens2.radius,
+    // ... existing radius tokens ...
-    card: 20,
+    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",
+    background: "#F1F5F9",
-    backgroundHover: "#FFE8DD",
+    // Slate 100
-    backgroundPress: "#FFE1D2",
+    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",
+    colorHover: "#1E293B",
-    colorPress: "#091024",
+    colorPress: "#1E293B",
-    colorFocus: "#091024",
+    colorFocus: "#1E293B",
     borderColor: tokens3.color.border,
-    borderColorHover: "#EBCABA",
+    borderColorHover: "#CBD5E1",
-    borderColorPress: "#E1BFAE",
+    borderColorPress: "#94A3B8",
-    shadowColor: "rgba(11, 19, 43, 0.16)",
+    shadowColor: "rgba(15, 23, 42, 0.08)",
-    shadowColorPress: "rgba(11, 19, 43, 0.2)",
+    shadowColorPress: "rgba(15, 23, 42, 0.12)",
-    shadowColorFocus: "rgba(11, 19, 43, 0.24)",
+    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,

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 theme = useAdminTheme();
-  const surfaceColor = glassSurfaceStrong ?? surface;
+  
-  const navSurface = glassSurfaceStrong ?? withAlpha(surfaceColor, 0.92);
+  // Modern Glass Background
-  const navBorder = glassBorder ?? border;
+  const navSurface = 'rgba(255, 255, 255, 0.85)';
-  const navShadow = glassShadow ?? shadow;
+  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}
+      shadowOpacity={0.08}
-      shadowRadius={16}
+      shadowRadius={20}
-      shadowOffset={{ width: 0, height: -6 }}
+      shadowOffset={{ width: 0, height: -8 }}
-      // allow for safe-area inset on modern phones
       style={{
         paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)',
-        backdropFilter: 'blur(14px)',
+        backdropFilter: 'blur(20px)',
-        WebkitBackdropFilter: 'blur(14px)',
+        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"
+                minHeight={50}
-                minWidth={88}
-                minHeight={64}
-                paddingHorizontal="$3"
-                paddingVertical="$2"
-                borderRadius={12}
-                backgroundColor={activeState ? activeBg : 'transparent'}
-                gap="$1"
                 style={{
-                  boxShadow: activeState ? `0 10px 22px ${activeShadow}` : undefined,
+                  transform: isPressed ? 'scale(0.92)' : (activeState ? 'scale(1.05)' : 'scale(1)'),
-                  transform: isPressed ? 'scale(0.96)' : 'scale(1)',
+                  transition: 'transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
-                  opacity: isPressed ? 0.9 : 1,
-                  transition: 'transform 140ms ease, background-color 140ms ease, opacity 140ms ease',
                 }}
               >
-                {activeState ? (
+                {activeState && (
                    <YStack 
                       position="absolute" 
-                    top={6}
+                      top={-12} 
-                    width={28}
+                      width={4} 
-                    height={3}
+                      height={4} 
-                    borderRadius={999}
+                      borderRadius={2} 
-                    backgroundColor={accent}
+                      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} />
+                <IconCmp size={ICON_SIZE} color={color} strokeWidth={strokeWidth} />
-                </YStack>
+                
                 <Text
-                  fontSize="$xs"
+                  fontSize={10}
-                  fontWeight="700"
+                  fontWeight={activeState ? "700" : "500"}
-                  fontFamily="$body"
+                  color={color}
-                  color={activeState ? 'white' : muted}
                   textAlign="center"
-                  flexShrink={1}
                 >
                   {item.label}
                 </Text>

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,
+  const theme = useAdminTheme();
-    surface,
+  
-    border,
+  const backgroundColor = theme.background;
-    text,
+  
-    muted,
+  // --- DARK HEADER ---
-    warningBg,
+  const headerSurface = '#0F172A'; // Slate 900
-    warningText,
+  const actionSurface = 'rgba(255, 255, 255, 0.1)';
-    primary,
+  const actionBorder = 'rgba(255, 255, 255, 0.05)';
-    danger,
+  const textColor = 'white';
-    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 [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}`;
-    
+    if (!location.pathname.includes('/billing/shop') && !location.pathname.includes('/welcome')) {
-    // Blacklist transient paths from being saved in tab history
-    const isBlacklisted = 
-      location.pathname.includes('/billing/shop') || 
-      location.pathname.includes('/welcome');
-
-    if (!isBlacklisted) {
       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 () => {
+    return () => window.removeEventListener('focus', handleFocus);
-      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
+  const isEventsIndex = location.pathname === ADMIN_EVENTS_PATH;
-    ? effectiveActive
+  const canSwitchEvents = hasMultipleEvents && !isEventsIndex;
-      ? resolveEventDisplayName(effectiveActive)
-      : hasMultipleEvents
-        ? t('header.selectEvent', 'Select an event')
-        : null
-    : null;
-  const subtitleText = subtitle ?? eventContext ?? '';
   const isMember = user?.role === 'member';
   const memberPermissions = Array.isArray(effectiveActive?.member_permissions) ? effectiveActive?.member_permissions ?? [] : [];
+  
   const allowPermission = (permission: string) => {
-    if (!isMember) {
+    if (!isMember) return true;
-      return true;
+    if (memberPermissions.includes('*') || memberPermissions.includes(permission)) 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">
+    <XStack alignItems="center" space="$2.5">
-      {canSwitchEvents ? (
+      {showQr ? (
-        <HeaderActionButton onPress={() => navigate(ADMIN_EVENTS_PATH)} ariaLabel={t('header.switchEvent', 'Switch event')}>
+        <HeaderActionButton
+          onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
+          ariaLabel={t('header.quickQr', 'Quick QR')}
+        >
           <XStack
-            width={34}
+            width={36}
-            height={34}
+            height={36}
-            borderRadius={12}
+            borderRadius={10}
-            backgroundColor={actionSurface}
+            backgroundColor="rgba(255, 255, 255, 0.15)"
-            borderWidth={1}
-            borderColor={actionBorder}
             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}
+          width={36}
-          height={34}
+          height={36}
-          borderRadius={12}
+          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
+      {/* User Avatar */}
-          onPress={() => navigate(adminPath(`/mobile/events/${effectiveActive?.slug}/qr`))}
+      <Pressable onPress={() => navigate(adminPath('/mobile/profile'))}>
-          ariaLabel={t('header.quickQr', 'Quick QR')}
-        >
         <XStack 
-            width={34}
+           width={36} height={36} borderRadius={18} 
-            height={34}
+           backgroundColor={actionSurface} 
-            borderRadius={12}
+           overflow="hidden" 
-            backgroundColor={primary}
+           alignItems="center" justifyContent="center"
-            alignItems="center"
+           borderWidth={1} borderColor={actionBorder}
-            justifyContent="center"
-            style={{ boxShadow: `0 10px 18px ${withAlpha(primary, 0.32)}` }}
         >
-            <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>
+      </Pressable>
-      ) : null}
+
       {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="$2">
-          <XStack
-            alignItems="center"
-            justifyContent="space-between"
-            minHeight={48}
-            space="$3"
-            flexWrap="wrap"
-          >
             {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
+          <XStack alignItems="center" justifyContent="center" borderRadius={12} backgroundColor={theme.warningBg} paddingVertical="$2" paddingHorizontal="$3">
-            alignItems="center"
+            <Text fontSize="$xs" fontWeight="700" color={theme.warningText}>
-            justifyContent="center"
-            borderRadius={12}
-            backgroundColor={warningBg}
-            paddingVertical="$2"
-            paddingHorizontal="$3"
-          >
-            <Text fontSize="$xs" fontWeight="700" color={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';
-}

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
+  };
+}

resources/js/admin/mobile/theme.ts

@@ -1,48 +1,46 @@
 import { useTheme } from '@tamagui/core';
 
 export const ADMIN_COLORS = {
-  primary: '#FF5C5C',
+  primary: '#4F46E5', // Indigo 600
-  primaryStrong: '#E63B57',
+  primaryStrong: '#4338CA', // Indigo 700
-  accent: '#3D5AFE',
+  accent: '#F43F5E', // Rose 500
-  accentSoft: '#E8ECFF',
+  accentSoft: '#E0E7FF', // Indigo 100
-  accentWarm: '#FFE3D6',
+  accentWarm: '#FFE4E6', // Rose 100
-  warning: '#FBBF24',
+  warning: '#F59E0B', // Amber 500
-  success: '#22C55E',
+  success: '#10B981', // Emerald 500
-  danger: '#EF4444',
+  danger: '#EF4444', // Red 500
-  text: '#0B132B',
+  text: '#0F172A', // Slate 900
-  textMuted: '#54606E',
+  textMuted: '#475569', // Slate 600
-  textSubtle: '#8C99A8',
+  textSubtle: '#64748B', // Slate 500
-  border: '#F3D6C9',
+  border: '#E2E8F0', // Slate 200
   surface: '#FFFFFF',
-  surfaceMuted: '#FFF6F0',
+  surfaceMuted: '#F8FAFC', // Slate 50
-  backdrop: '#0B132B',
+  backdrop: '#0F172A',
 };
 
 export const ADMIN_ACTION_COLORS = {
-  settings: '#00C2A8',
+  settings: '#64748B', // Slate 500
-  tasks: '#FFC857',
+  tasks: '#F43F5E', // Rose 500 (Accent)
-  qr: '#3D5AFE',
+  qr: '#10B981', // Emerald 500
-  images: '#FF7AB6',
+  images: '#4F46E5', // Indigo 600 (Primary)
-  liveShow: '#FF6D00',
+  liveShow: '#F59E0B', // Amber 500
-  liveShowSettings: '#00B0FF',
+  liveShowSettings: '#6366F1', // Indigo 500
-  guests: '#22C55E',
+  guests: '#334155', // Slate 700
-  guestMessages: '#FF8A00',
+  guestMessages: '#4F46E5', 
-  branding: '#00B4D8',
+  branding: '#6366F1',
-  photobooth: '#FF3D71',
+  photobooth: '#8B5CF6', // Violet 500
   recap: '#94A3B8',
-  packages: ADMIN_COLORS.primary,
+  packages: '#4F46E5',
-  analytics: '#22C55E',
+  analytics: '#10B981',
-  invites: '#3D5AFE',
+  invites: '#10B981',
 };
 
 export const ADMIN_GRADIENTS = {
-  primaryCta: `linear-gradient(135deg, ${ADMIN_COLORS.primary}, #FF9A5C, ${ADMIN_COLORS.accent})`,
+  primaryCta: `linear-gradient(135deg, ${ADMIN_COLORS.primary}, ${ADMIN_COLORS.primaryStrong})`,
-  softCard: 'linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,245,238,0.92))',
+  softCard: 'linear-gradient(145deg, rgba(255,255,255,1), rgba(248,250,252,0.95))',
-  loginBackground: 'linear-gradient(135deg, #0b132b, #162040, #0b132b)',
+  loginBackground: 'linear-gradient(135deg, #0F172A, #1E293B, #0F172A)',
-  appBackground:
+  appBackground: 'linear-gradient(180deg, #F1F5F9 0%, #F1F5F9 100%)',
-    '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: 'linear-gradient(180deg, #0F172A 0%, #1E293B 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%)',
 };
 
 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),
+    textStrong: String(theme.text?.val ?? theme.color?.val ?? ADMIN_COLORS.text),
-    muted: String(theme.gray?.val ?? ADMIN_COLORS.textMuted),
+    muted: String(theme.muted?.val ?? ADMIN_COLORS.textMuted),
-    subtle: String(theme.gray8?.val ?? ADMIN_COLORS.textSubtle),
+    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),
+    accentStrong: String(theme.blue11?.val ?? ADMIN_COLORS.primaryStrong),
-    successBg: String(theme.green3?.val ?? '#DCFCE7'),
+    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'),
+    warningBg: String(theme.yellow3?.val ?? '#FEF3C7'),
-    warningBorder: String(theme.yellow6?.val ?? '#FED7AA'),
+    warningBorder: String(theme.yellow6?.val ?? '#FCD34D'),
-    warningText: String(theme.yellow11?.val ?? '#92400E'),
+    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),
+    danger: String(theme.danger?.val ?? ADMIN_COLORS.danger),
-    backdrop: String(theme.gray12?.val ?? ADMIN_COLORS.backdrop),
+    backdrop: String(theme.backgroundStrong?.val ?? ADMIN_COLORS.backdrop),
-    overlay: withAlpha(String(theme.gray12?.val ?? ADMIN_COLORS.backdrop), 0.6),
+    overlay: withAlpha(String(theme.backgroundStrong?.val ?? ADMIN_COLORS.backdrop), 0.6),
-    shadow: String(theme.shadowColor?.val ?? 'rgba(15, 23, 42, 0.12)'),
+    shadow: String(theme.shadowColor?.val ?? 'rgba(15, 23, 42, 0.08)'),
     glassSurface,
     glassSurfaceStrong,
     glassBorder,

resources/js/guest/guest-sw.ts

@@ -1,4 +1,4 @@
-/* eslint-disable no-restricted-globals */
+ 
 /// <reference lib="webworker" />
 
 import { clientsClaim } from 'workbox-core';

tamagui.config.ts

@@ -8,27 +8,24 @@ const tokens = {
   ...baseTokens,
   color: {
     ...baseTokens.color,
-    primary: '#FF5C5C',
+    primary: '#4F46E5', // Indigo 600
-    accent: '#3D5AFE',
+    accent: '#F43F5E', // Rose 500
-    accentSoft: '#E8ECFF',
+    accentSoft: '#E0E7FF', // Indigo 100
-    success: '#22C55E',
+    success: '#10B981', // Emerald 500
-    warning: '#FBBF24',
+    warning: '#F59E0B', // Amber 500
-    danger: '#EF4444',
+    danger: '#EF4444', // Red 500
     surface: '#ffffff',
-    muted: '#FFF6F0',
+    muted: '#F8FAFC', // Slate 50
-    border: '#F3D6C9',
+    border: '#E2E8F0', // Slate 200
-    text: '#0B132B',
+    text: '#0F172A', // Slate 900
   },
   radius: {
-    ...baseTokens.radius,
+// ... existing radius tokens ...
-    card: 20,
+    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',
+    background: '#F1F5F9', // Slate 100
-    backgroundHover: '#FFE8DD',
+    backgroundHover: '#E2E8F0',
-    backgroundPress: '#FFE1D2',
+    backgroundPress: '#CBD5E1',
     backgroundStrong: tokens.color.surface,
-    backgroundTransparent: 'rgba(255, 241, 232, 0)',
+    backgroundTransparent: 'rgba(241, 245, 249, 0)',
     color: tokens.color.text,
-    colorHover: '#091024',
+    colorHover: '#1E293B',
-    colorPress: '#091024',
+    colorPress: '#1E293B',
-    colorFocus: '#091024',
+    colorFocus: '#1E293B',
     borderColor: tokens.color.border,
-    borderColorHover: '#EBCABA',
+    borderColorHover: '#CBD5E1',
-    borderColorPress: '#E1BFAE',
+    borderColorPress: '#94A3B8',
-    shadowColor: 'rgba(11, 19, 43, 0.16)',
+    shadowColor: 'rgba(15, 23, 42, 0.08)',
-    shadowColorPress: 'rgba(11, 19, 43, 0.2)',
+    shadowColorPress: 'rgba(15, 23, 42, 0.12)',
-    shadowColorFocus: 'rgba(11, 19, 43, 0.24)',
+    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,