module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,ts,tsx}",
    "../components/**/*.{vue,ts,tsx}",
    "../index.ts"
  ],
  theme: {
    extend: {
      colors: {
        mosquito: {
          // Primary: Vibrant Orange
          primary: '#FF6B35',
          'primary-light': '#FF8A5B',
          'primary-dark': '#E55A2B',
          // Secondary: Bright Teal
          secondary: '#00D9C0',
          'secondary-light': '#5CEFD9',
          'secondary-dark': '#00B8A3',
          // Accent: Warm Yellow
          accent: '#FFD93D',
          'accent-light': '#FFE56D',
          'accent-dark': '#F5C700',
          // Semantic colors
          success: '#00C781',
          warning: '#FFB800',
          error: '#FF4757',
          info: '#4A90E2',
          // Text & Surface
          ink: '#1A1A2E',
          'ink-light': '#4A4A68',
          muted: '#8B8BA7',
          surface: '#FFFFFF',
          bg: '#FEF9F6',
          // Borders
          line: '#FFE8E0',
          border: 'rgba(255, 107, 53, 0.15)',
          // Legacy support (for components compatibility)
          accent2: '#6AA7FF',
          brand: '#0B3A63'
        }
      },
      fontFamily: {
        display: ['Poppins', 'Noto Sans SC', 'sans-serif'],
        body: ['Noto Sans SC', 'Poppins', 'sans-serif']
      },
      boxShadow: {
        soft: '0 8px 24px rgba(255, 107, 53, 0.12)',
        glow: '0 0 40px rgba(255, 107, 53, 0.2)',
        card: '0 4px 16px rgba(26, 26, 46, 0.06)',
        'card-hover': '0 8px 24px rgba(26, 26, 46, 0.1)'
      },
      borderRadius: {
        '2xl': '20px',
        '3xl': '28px'
      }
    }
  },
  plugins: []
}