/**
 * 设计 Token - 统一的设计规范常量
 * 用于保证全局 UI 组件的一致性
 */

/**
 * 响应式断点（像素值）
 */
export const BREAKPOINTS = {
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  '2xl': 1536,
} as const;

/**
 * Z-Index 层级（避免混乱的 z-index）
 */
export const Z_INDEX = {
  base: 0,
  dropdown: 50,
  sticky: 60,
  overlay: 80,
  modal: 90,
  toast: 100,
  tooltip: 110,
} as const;

/**
 * 间距规范（Tailwind class）
 */
export const SPACING = {
  mobile: {
    padding: {
      page: 'p-4',
      section: 'p-3',
      card: 'p-4',
      input: 'p-2.5',
    },
    gap: {
      small: 'gap-2',
      medium: 'gap-3',
      large: 'gap-4',
    },
    margin: {
      small: 'm-2',
      medium: 'm-3',
      large: 'm-4',
    },
  },
  desktop: {
    padding: {
      page: 'p-6',
      section: 'p-5',
      card: 'p-6',
      input: 'p-3',
    },
    gap: {
      small: 'gap-3',
      medium: 'gap-4',
      large: 'gap-6',
    },
    margin: {
      small: 'm-3',
      medium: 'm-4',
      large: 'm-6',
    },
  },
} as const;

/**
 * 字体大小规范（Tailwind class）
 */
export const TYPOGRAPHY = {
  mobile: {
    h1: 'text-xl',
    h2: 'text-lg',
    h3: 'text-base',
    body: 'text-sm',
    small: 'text-xs',
  },
  desktop: {
    h1: 'text-3xl',
    h2: 'text-2xl',
    h3: 'text-xl',
    body: 'text-base',
    small: 'text-sm',
  },
} as const;

/**
 * 颜色主题（Tailwind class）
 */
export const COLORS = {
  brand: {
    primary: 'text-brand-blue',
    primaryBg: 'bg-brand-blue',
    primaryBorder: 'border-brand-blue',
  },
  status: {
    success: 'text-emerald-400',
    error: 'text-red-400',
    warning: 'text-amber-400',
    info: 'text-sky-400',
  },
  neutral: {
    text: 'text-gray-300',
    textLight: 'text-gray-400',
    textLighter: 'text-gray-500',
    bg: 'bg-gray-800',
    bgLight: 'bg-gray-700',
    bgDark: 'bg-gray-900',
    border: 'border-gray-700',
  },
} as const;

/**
 * 圆角规范
 */
export const RADIUS = {
  small: 'rounded',
  medium: 'rounded-lg',
  large: 'rounded-xl',
  full: 'rounded-full',
} as const;

/**
 * 阴影规范
 */
export const SHADOW = {
  small: 'shadow-sm',
  medium: 'shadow-md',
  large: 'shadow-lg',
  xl: 'shadow-xl',
  '2xl': 'shadow-2xl',
} as const;

/**
 * 过渡动画时长
 */
export const TRANSITION = {
  fast: 'duration-150',
  normal: 'duration-200',
  slow: 'duration-300',
} as const;

/**
 * 组件尺寸
 */
export const SIZES = {
  button: {
    small: 'px-3 py-1.5 text-sm',
    medium: 'px-4 py-2 text-base',
    large: 'px-6 py-3 text-lg',
  },
  input: {
    small: 'px-2.5 py-1.5 text-sm',
    medium: 'px-3 py-2 text-base',
    large: 'px-4 py-3 text-lg',
  },
  icon: {
    small: 'w-4 h-4',
    medium: 'w-5 h-5',
    large: 'w-6 h-6',
  },
} as const;

/**
 * 触摸目标最小尺寸（移动端可访问性）
 */
export const TOUCH_TARGET_MIN_SIZE = 44; // 像素

/**
 * 常用媒体查询字符串
 */
export const MEDIA_QUERIES = {
  mobile: `(max-width: ${BREAKPOINTS.md - 1}px)`,
  tablet: `(min-width: ${BREAKPOINTS.md}px) and (max-width: ${BREAKPOINTS.lg - 1}px)`,
  desktop: `(min-width: ${BREAKPOINTS.lg}px)`,
  smallScreen: `(max-width: ${BREAKPOINTS.sm - 1}px)`,
  largeScreen: `(min-width: ${BREAKPOINTS.xl}px)`,
} as const;


