/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        capcut: {
          // Surfaces — slightly bluer blacks with warmer panel accent
          black: '#08080a',
          dark: '#111114',
          panel: '#18181c',
          surface: '#22222a',
          surfaceHover: '#2a2a33',
          border: '#33333d',
          borderLight: '#3e3e48',
          // Text
          text: '#ededef',
          muted: '#a0a0aa',
          subtle: '#6e6e78',
          // Brand accents
          blue: '#3aa6ff',
          blueDark: '#1d7cd0',
          blueLight: '#6dc4ff',
          orange: '#ff8a3d',
          red: '#ff4757',
          green: '#3dffa3',
          yellow: '#ffd23d',
          purple: '#a86cff',
          pink: '#ff6ec7',
          // Semantic
          success: '#22c55e',
          warning: '#f59e0b',
          danger: '#ef4444',
          info: '#3aa6ff',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
        mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
      },
      boxShadow: {
        'soft': '0 1px 2px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2)',
        'soft-lg': '0 4px 6px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.3)',
        'glow-blue': '0 0 0 1px rgba(58,166,255,0.4), 0 4px 16px rgba(58,166,255,0.25)',
        'glow-orange': '0 0 0 1px rgba(255,138,61,0.4), 0 4px 16px rgba(255,138,61,0.25)',
        'glow-red': '0 0 0 1px rgba(255,71,87,0.4), 0 4px 16px rgba(255,71,87,0.25)',
        'inner-glow': 'inset 0 1px 0 rgba(255,255,255,0.06)',
      },
      animation: {
        'fade-in': 'fadeIn 200ms ease-out',
        'slide-up': 'slideUp 240ms cubic-bezier(0.16, 1, 0.3, 1)',
        'slide-in-right': 'slideInRight 280ms cubic-bezier(0.16, 1, 0.3, 1)',
        'pulse-soft': 'pulseSoft 2.4s ease-in-out infinite',
        'spin-slow': 'spin 3s linear infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { opacity: '0', transform: 'translateY(8px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        slideInRight: {
          '0%': { opacity: '0', transform: 'translateX(20px)' },
          '100%': { opacity: '1', transform: 'translateX(0)' },
        },
        pulseSoft: {
          '0%, 100%': { opacity: '0.6' },
          '50%': { opacity: '1' },
        },
      },
      transitionTimingFunction: {
        'out-expo': 'cubic-bezier(0.16, 1, 0.3, 1)',
      },
    },
  },
  plugins: [],
};