// 새로운 디자인 시스템 색상 (참고 이미지 기반)
export const colors = {
  mint: '#4DD6D3',
  mintLight: '#7EE7E4',
  purple: '#A78BFA',
  purpleLight: '#C4B5FD',
  blue: '#60A5FA',
  blueLight: '#93C5FD',
  pink: '#F472B6',
  pinkLight: '#F9A8D4',
  orange: '#FB923C',
  orangeLight: '#FDBA74',
  gray: {
    50: '#F9FAFB',
    100: '#F3F4F6',
    200: '#E5E7EB',
    300: '#D1D5DB',
    400: '#9CA3AF',
    500: '#6B7280',
    600: '#4B5563',
    700: '#374151',
    800: '#1F2937',
    900: '#111827',
  },
};

// 공통 버튼 그라디언트 스타일
export const buttonGradients = {
  primary: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.blue} 100%)`,
  primaryHover: `linear-gradient(135deg, ${colors.purpleLight} 0%, ${colors.blueLight} 100%)`,
  secondary: `linear-gradient(135deg, ${colors.mint} 0%, ${colors.blue} 100%)`,
  secondaryHover: `linear-gradient(135deg, ${colors.mintLight} 0%, ${colors.blueLight} 100%)`,
  success: `linear-gradient(135deg, ${colors.mint} 0%, #34D399 100%)`,
  successHover: `linear-gradient(135deg, ${colors.mintLight} 0%, #6EE7B7 100%)`,
  error: `linear-gradient(135deg, #EF4444 0%, ${colors.pink} 100%)`,
  errorHover: `linear-gradient(135deg, #F87171 0%, ${colors.pinkLight} 100%)`,
  warning: `linear-gradient(135deg, ${colors.orange} 0%, #FBBF24 100%)`,
  warningHover: `linear-gradient(135deg, ${colors.orangeLight} 0%, #FCD34D 100%)`,
  info: `linear-gradient(135deg, ${colors.blue} 0%, ${colors.mint} 100%)`,
  infoHover: `linear-gradient(135deg, ${colors.blueLight} 0%, ${colors.mintLight} 100%)`,
};

// 공통 버튼 스타일
export const getGradientButtonStyle = (variant: keyof typeof buttonGradients = 'primary') => ({
  background: buttonGradients[variant],
  color: 'white',
  fontWeight: 600,
  borderRadius: 3,
  textTransform: 'none' as const,
  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
  boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
  '&:hover': {
    background: buttonGradients[`${variant}Hover` as keyof typeof buttonGradients],
    transform: 'translateY(-2px)',
    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  },
  '&:active': {
    transform: 'translateY(0)',
  },
});

// 공통 카드 스타일
export const cardStyles = {
  default: {
    borderRadius: 4,
    bgcolor: 'white',
    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
    border: '1px solid',
    borderColor: colors.gray[100],
  },
  hover: {
    '&:hover': {
      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      transform: 'translateY(-4px)',
      borderColor: colors.gray[200],
    },
  },
  clickable: {
    cursor: 'pointer',
    borderRadius: 4,
    bgcolor: 'white',
    boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
    border: '1px solid',
    borderColor: colors.gray[100],
    '&:hover': {
      boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      transform: 'translateY(-4px)',
      borderColor: colors.gray[200],
    },
  },
};

// 공통 컨테이너 스타일
export const containerStyles = {
  page: {
    pt: { xs: 7, sm: 8 },
    minHeight: '100vh',
    bgcolor: colors.gray[50],
    pb: 10,
  },
  section: {
    maxWidth: 'lg',
    mx: 'auto',
    px: { xs: 3, sm: 4, md: 5 },
    py: { xs: 4, sm: 5 },
  },
  centeredForm: {
    minHeight: '100vh',
    display: 'flex',
    flexDirection: 'column' as const,
    justifyContent: 'center',
    alignItems: 'center',
    px: 3,
    py: 8,
    bgcolor: colors.gray[50],
  },
};

// 공통 반응형 텍스트 스타일 (모바일 최적화)
export const responsiveText = {
  h1: {
    fontSize: { xs: '1.5rem', sm: '2.25rem', md: '3rem' }, // 모바일 30px → 24px
    fontWeight: 700,
    color: colors.gray[900],
    letterSpacing: '-0.025em',
  },
  h2: {
    fontSize: { xs: '1.25rem', sm: '1.875rem', md: '2.25rem' }, // 모바일 24px → 20px
    fontWeight: 700,
    color: colors.gray[900],
    letterSpacing: '-0.025em',
  },
  h3: {
    fontSize: { xs: '1.125rem', sm: '1.5rem', md: '1.875rem' }, // 모바일 20px → 18px
    fontWeight: 600,
    color: colors.gray[900],
    letterSpacing: '-0.025em',
  },
  h4: {
    fontSize: { xs: '1rem', sm: '1.25rem', md: '1.5rem' }, // 모바일 18px → 16px
    fontWeight: 600,
    color: colors.gray[800],
  },
  body1: {
    fontSize: { xs: '0.8125rem', sm: '1rem' }, // 모바일 14px → 13px
    color: colors.gray[700],
    lineHeight: 1.5,
  },
  body2: {
    fontSize: { xs: '0.75rem', sm: '0.875rem' }, // 모바일 13px → 12px
    color: colors.gray[600],
    lineHeight: 1.4,
  },
};

// 모바일 최적화 간격 (px 단위, MUI sx에서 사용)
export const spacing = {
  mobile: {
    xs: 2,   // 8px
    sm: 3,   // 12px
    md: 4,   // 16px
    lg: 5,   // 20px
    xl: 6,   // 24px
  },
  desktop: {
    xs: 4,   // 16px
    sm: 6,   // 24px
    md: 8,   // 32px
    lg: 10,  // 40px
    xl: 12,  // 48px
  },
};
