/**
 * Mobile Theme
 * Imports design tokens and adapts for React Native
 */

// Import design tokens from UI package
import { colors, spacing, typography, borderRadius, shadows } from '@aethex/ui';

export const theme = {
  colors: {
    // Background
    background: colors.background.primary,
    backgroundSecondary: colors.background.secondary,
    backgroundTertiary: colors.background.tertiary,
    
    // Card
    card: colors.background.tertiary,
    cardElevated: colors.background.elevated,
    
    // Text
    text: colors.text.primary,
    textSecondary: colors.text.secondary,
    textTertiary: colors.text.tertiary,
    textMuted: colors.text.muted,
    
    // Brand
    primary: colors.primary[500],
    primaryLight: colors.primary[400],
    primaryDark: colors.primary[600],
    
    accent: colors.accent[500],
    accentLight: colors.accent[400],
    accentDark: colors.accent[600],
    
    secondary: colors.secondary[500],
    
    // Semantic
    success: colors.success,
    warning: colors.warning,
    error: colors.error,
    info: colors.info,
    
    // Status
    online: colors.status.online,
    idle: colors.status.idle,
    dnd: colors.status.dnd,
    offline: colors.status.offline,
    
    // Effects
    glass: colors.effects.glass,
    glassBorder: colors.effects.glassBorder,
    overlay: colors.effects.overlay,
    
    // Gray scale
    gray50: colors.gray[50],
    gray100: colors.gray[100],
    gray200: colors.gray[200],
    gray300: colors.gray[300],
    gray400: colors.gray[400],
    gray500: colors.gray[500],
    gray600: colors.gray[600],
    gray700: colors.gray[700],
    gray800: colors.gray[800],
    gray900: colors.gray[900],
    gray950: colors.gray[950],
  },
  
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
    xxl: 48,
    xxxl: 64,
  },
  
  typography: {
    fontFamily: typography.fontFamily.sans,
    
    fontSize: {
      xs: 12,
      sm: 14,
      base: 16,
      lg: 18,
      xl: 20,
      xxl: 24,
      xxxl: 28,
      huge: 32,
    },
    
    fontWeight: {
      light: '300' as const,
      normal: '400' as const,
      medium: '500' as const,
      semibold: '600' as const,
      bold: '700' as const,
    },
  },
  
  borderRadius: {
    sm: 6,
    base: 8,
    md: 12,
    lg: 16,
    xl: 18,
    xxl: 24,
    full: 9999,
  },
  
  shadows: {
    sm: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.3,
      shadowRadius: 2,
      elevation: 2,
    },
    md: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.4,
      shadowRadius: 8,
      elevation: 4,
    },
    lg: {
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 8 },
      shadowOpacity: 0.5,
      shadowRadius: 16,
      elevation: 8,
    },
    glow: {
      shadowColor: colors.primary[500],
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.4,
      shadowRadius: 20,
      elevation: 10,
    },
  },
  
  layout: {
    headerHeight: 56,
    tabBarHeight: 56,
    touchTarget: 48,
    messageBubbleMaxWidth: '80%',
  },
};

export type Theme = typeof theme;
