web/src/constants/theme.js

// Theme Configuration for EcoSpire
export const theme = {
  colors: {
    primary: {
      50: '#e8f5e8',
      100: '#c8e6c9',
      200: '#a8e6a3',
      300: '#6b8e3d',
      400: '#4a7c23',
      500: '#2d5016',
      600: '#1a3d0f',
      700: '#0f2a08',
      800: '#081a04',
      900: '#041002'
    },
    secondary: {
      blue: '#2196F3',
      orange: '#FF9800',
      red: '#f44336',
      brown: '#8D6E63'
    },
    status: {
      success: '#4CAF50',
      warning: '#FF9800',
      error: '#f44336',
      info: '#2196F3'
    }
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
    '2xl': '48px',
    '3xl': '64px'
  },
  borderRadius: {
    sm: '8px',
    md: '12px',
    lg: '16px',
    xl: '20px',
    full: '9999px'
  },
  shadows: {
    sm: '0 2px 8px rgba(26, 61, 15, 0.08)',
    md: '0 4px 20px rgba(26, 61, 15, 0.12)',
    lg: '0 8px 30px rgba(26, 61, 15, 0.16)',
    xl: '0 12px 40px rgba(26, 61, 15, 0.20)'
  },
  breakpoints: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1536px'
  }
};

export default theme;