claude take :(

apps/mobile/src/styles/theme.ts

@@ -0,0 +1,190 @@
+/**
+ * Modern Design System Theme
+ * Centralized theme configuration with gradients, colors, shadows, and spacing
+ */
+
+export const theme = {
+    // Color Palette
+    colors: {
+        // Primary colors
+        primary: '#3b82f6',
+        primaryDark: '#2563eb',
+        primaryLight: '#60a5fa',
+
+        // Accent colors
+        purple: '#8b5cf6',
+        purpleDark: '#7c3aed',
+        pink: '#ec4899',
+
+        // Success
+        success: '#10b981',
+        successDark: '#059669',
+        successLight: '#34d399',
+
+        // Warning
+        warning: '#f59e0b',
+        warningDark: '#d97706',
+
+        // Danger
+        danger: '#ef4444',
+        dangerDark: '#dc2626',
+
+        // Neutrals
+        white: '#ffffff',
+        black: '#000000',
+        gray50: '#f9fafb',
+        gray100: '#f3f4f6',
+        gray200: '#e5e7eb',
+        gray300: '#d1d5db',
+        gray400: '#9ca3af',
+        gray500: '#6b7280',
+        gray600: '#4b5563',
+        gray700: '#374151',
+        gray800: '#1f2937',
+        gray900: '#111827',
+
+        // Backgrounds
+        background: '#f5f5f5',
+        backgroundDark: '#0f172a',
+        surface: '#ffffff',
+        surfaceDark: '#1e293b',
+    },
+
+    // Gradient Definitions
+    gradients: {
+        primary: ['#3b82f6', '#8b5cf6'] as const,
+        primaryVertical: ['#3b82f6', '#2563eb'] as const,
+        success: ['#10b981', '#059669'] as const,
+        warning: ['#f59e0b', '#d97706'] as const,
+        danger: ['#ef4444', '#ec4899'] as const,
+        purple: ['#8b5cf6', '#7c3aed'] as const,
+        ocean: ['#06b6d4', '#3b82f6'] as const,
+        sunset: ['#f59e0b', '#ef4444'] as const,
+        forest: ['#10b981', '#059669'] as const,
+        lavender: ['#a78bfa', '#ec4899'] as const,
+        dark: ['#1e293b', '#0f172a'] as const,
+    },
+
+    // Shadow System
+    shadows: {
+        subtle: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 1 },
+            shadowOpacity: 0.05,
+            shadowRadius: 2,
+            elevation: 2,
+        },
+        medium: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 2 },
+            shadowOpacity: 0.1,
+            shadowRadius: 4,
+            elevation: 3,
+        },
+        strong: {
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.15,
+            shadowRadius: 8,
+            elevation: 5,
+        },
+        glow: {
+            shadowColor: '#3b82f6',
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.3,
+            shadowRadius: 12,
+            elevation: 8,
+        },
+        glowDanger: {
+            shadowColor: '#ef4444',
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.3,
+            shadowRadius: 12,
+            elevation: 8,
+        },
+    },
+
+    // Typography
+    typography: {
+        // Font sizes
+        fontSize: {
+            xs: 12,
+            sm: 14,
+            base: 16,
+            lg: 18,
+            xl: 20,
+            '2xl': 24,
+            '3xl': 28,
+            '4xl': 32,
+            '5xl': 36,
+        },
+        // Font weights
+        fontWeight: {
+            normal: '400' as const,
+            medium: '500' as const,
+            semibold: '600' as const,
+            bold: '700' as const,
+            extrabold: '800' as const,
+        },
+        // Line heights
+        lineHeight: {
+            tight: 1.2,
+            normal: 1.5,
+            relaxed: 1.75,
+        },
+    },
+
+    // Spacing Scale
+    spacing: {
+        xs: 4,
+        sm: 8,
+        md: 12,
+        lg: 16,
+        xl: 20,
+        '2xl': 24,
+        '3xl': 32,
+        '4xl': 40,
+        '5xl': 48,
+    },
+
+    // Border Radius
+    borderRadius: {
+        sm: 4,
+        md: 8,
+        lg: 12,
+        xl: 16,
+        '2xl': 20,
+        '3xl': 24,
+        full: 9999,
+    },
+
+    // Animation Timing
+    animation: {
+        duration: {
+            fast: 150,
+            normal: 250,
+            slow: 350,
+        },
+        easing: {
+            easeIn: 'ease-in',
+            easeOut: 'ease-out',
+            easeInOut: 'ease-in-out',
+        },
+    },
+
+    // Glassmorphism
+    glass: {
+        light: {
+            backgroundColor: 'rgba(255, 255, 255, 0.7)',
+            borderWidth: 1,
+            borderColor: 'rgba(255, 255, 255, 0.3)',
+        },
+        dark: {
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            borderWidth: 1,
+            borderColor: 'rgba(255, 255, 255, 0.1)',
+        },
+    },
+};
+
+export type Theme = typeof theme;