[Brand] Phase 3: Apply organic shadow system for visual depth

[coderabbitai]

Overview

Apply the defined organic shadow classes to establish proper visual hierarchy.

Problem

Organic shadow classes defined but rarely used:

// tailwind.config.ts - DEFINED
boxShadow: {
  'organic-card': '2px 4px 8px -2px rgb(0 0 0 / 0.08), -1px 2px 4px -1px rgb(0 0 0 / 0.04)',
  'organic-elevated': '4px 8px 16px -4px rgb(0 0 0 / 0.12), -2px 4px 8px -2px rgb(0 0 0 / 0.06)',
  'organic-float': '8px 16px 32px -8px rgb(0 0 0 / 0.16), -4px 8px 16px -4px rgb(0 0 0 / 0.08)',
}

Only 1 instance found using shadows:

// packages/agent-intelligence/src/components/chat/CodeBlock.tsx:16
shadow-organic-card

Result: Flat UI with poor visual hierarchy, cards lack depth.

Implementation Requirements

1. Shadow Hierarchy

• Base cards → shadow-organic-card (subtle depth)
• Elevated surfaces (modals, popovers) → shadow-organic-elevated
• Floating elements (FABs, tooltips) → shadow-organic-float

2. Components Needing Shadows

// Card components
- <View className="bg-surface p-4">
+ <View className="bg-surface p-4 shadow-organic-card">

// Modal/BottomSheet
- <View className="bg-surface rounded-organic-card">
+ <View className="bg-surface rounded-organic-card shadow-organic-elevated">

// Floating Action Button
- <Pressable className="bg-primary rounded-full">
+ <Pressable className="bg-primary rounded-full shadow-organic-float">

3. Target Components

• Card wrappers in all screens
• Modal, Dialog, BottomSheet
• Dropdown menus
• Tooltips
• Floating action buttons
• ApprovalCard, ChatBubble
• Project/Agent detail cards

Success Criteria

• All elevated surfaces use appropriate shadow class
• Clear visual hierarchy established
• Consistent depth across all screens
• No custom shadow styles (use classes)

Priority: MEDIUM

Estimated Effort: 1-2 hours

Dependencies: None

Related: PR #64 (Production UI/UX Research)

Labels

brand, ui, polish, enhancement