/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // 自定义颜色主题
      colors: {
        primary: {
          DEFAULT: '#6B46C1', // 深紫色
          light: '#A78BFA',   // 浅紫色
          dark: '#553C9A',    // 更深的紫色
        },
        secondary: {
          DEFAULT: '#1F2937', // 深灰色
          light: '#4B5563',   // 中灰色
          lighter: '#9CA3AF', // 浅灰色
        },
        background: {
          DEFAULT: '#F3F4F6', // 浅灰色背景
          dark: '#111827',    // 深色背景
          card: '#FFFFFF',    // 卡片背景
        }
      },
      // 响应式断点配置
      screens: {
        'xs': '475px',    // 超小屏
        'sm': '640px',    // 小屏（手机横屏）
        'md': '768px',    // 中屏（平板）
        'lg': '1024px',   // 大屏（桌面）
        'xl': '1280px',   // 超大屏
        '2xl': '1536px',  // 超超大屏
      },
      // 字体配置
      fontFamily: {
        'sans': ['Inter', 'system-ui', 'sans-serif'],
      },
      // 间距配置（8px网格系统）
      spacing: {
        '18': '4.5rem',
        '88': '22rem',
        '128': '32rem',
      },
      // 圆角配置
      borderRadius: {
        '4xl': '2rem',
      },
      // 阴影配置
      boxShadow: {
        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
        'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      },
      // 动画配置
      animation: {
        'fade-in': 'fadeIn 0.2s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
  plugins: [],
  // 暗黑模式支持
  darkMode: 'class',
  // 兼容性配置
  corePlugins: {
    preflight: true,
  },
}