video-compliance-ai/frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      // ========================================
      // Colors - 颜色系统
      // ========================================
      colors: {
        // 背景色
        'bg-page': '#0B0B0E',
        'bg-card': '#16161A',
        'bg-elevated': '#1A1A1E',

        // 文字色
        'text-primary': '#FAFAF9',
        'text-secondary': '#A1A1AA',
        'text-tertiary': '#71717A',

        // 强调色
        'accent-indigo': '#6366F1',
        'accent-green': '#32D583',
        'accent-coral': '#E85A4F',
        'accent-amber': '#F59E0B',

        // 边框色
        'border-subtle': '#27272A',

        // 状态色 (带透明度)
        'status-success': 'rgba(50, 213, 131, 0.125)',
        'status-pending': 'rgba(99, 102, 241, 0.125)',
        'status-error': 'rgba(232, 90, 79, 0.125)',
        'status-warning': 'rgba(245, 158, 11, 0.125)',
      },

      // ========================================
      // Typography - 字体系统
      // ========================================
      fontFamily: {
        sans: ['DM Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'sans-serif'],
      },
      fontSize: {
        // 页面标题
        'page-title': ['24px', { lineHeight: '1.3', fontWeight: '700' }],
        // 卡片标题
        'card-title': ['22px', { lineHeight: '1.3', fontWeight: '700' }],
        // 区块标题
        'section-title': ['16px', { lineHeight: '1.4', fontWeight: '600' }],
        // 正文内容
        'body': ['15px', { lineHeight: '1.5', fontWeight: '400' }],
        // 辅助文字
        'caption': ['13px', { lineHeight: '1.5', fontWeight: '400' }],
        // 小标签
        'small': ['12px', { lineHeight: '1.4', fontWeight: '400' }],
        // 底部导航
        'nav': ['11px', { lineHeight: '1.3', fontWeight: '400' }],
      },

      // ========================================
      // Spacing - 间距系统
      // ========================================
      spacing: {
        '4.5': '18px',
        '13': '52px',
        '15': '60px',
        '18': '72px',
        '21': '84px', // bottom nav padding
        '22': '88px',
        '65': '260px', // sidebar width
        '83': '332px',
      },

      // ========================================
      // Border Radius - 圆角系统
      // ========================================
      borderRadius: {
        'card': '12px',
        'btn': '8px',
        'tag': '4px',
      },

      // ========================================
      // Sizes - 尺寸
      // ========================================
      width: {
        'sidebar': '260px',
        'mobile': '402px',
      },
      height: {
        'status-bar': '44px',
        'bottom-nav': '83px',
        'mobile': '874px',
      },
      minHeight: {
        'screen-mobile': '874px',
      },
      maxWidth: {
        'mobile': '402px',
        'desktop': '1440px',
      },

      // ========================================
      // Box Shadow - 阴影
      // ========================================
      boxShadow: {
        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2)',
        'elevated': '0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)',
        'inner-subtle': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.2)',
      },

      // ========================================
      // Animations - 动画
      // ========================================
      animation: {
        'fade-in': 'fadeIn 0.2s ease-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'slide-down': 'slideDown 0.3s ease-out',
        'scale-in': 'scaleIn 0.2s ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { opacity: '0', transform: 'translateY(10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        slideDown: {
          '0%': { opacity: '0', transform: 'translateY(-10px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        scaleIn: {
          '0%': { opacity: '0', transform: 'scale(0.95)' },
          '100%': { opacity: '1', transform: 'scale(1)' },
        },
      },

      // ========================================
      // Backdrop Blur - 毛玻璃效果
      // ========================================
      backdropBlur: {
        xs: '2px',
      },

      // ========================================
      // Z-Index - 层级
      // ========================================
      zIndex: {
        'sidebar': '40',
        'bottom-nav': '50',
        'modal': '60',
        'toast': '70',
      },
    },
  },
  plugins: [],
};