/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        // Custom dark theme palette
        accent: {
          warm: '#e8704b', // --color-accent-warm
        },
        text: {
          primary: '#e0e0e0',
          secondary: '#a3a3a3',
          tertiary: '#737373',
        },
        bg: {
          primary: '#171717',
          secondary: '#171717',
          'overlay-light': 'rgba(255, 255, 255, 0.05)',
          'overlay-dark': 'rgba(0, 0, 0, 0.8)',
        },
        border: '#4a4a4a',
        // Semantic colors
        success: '#10b981',
        warning: '#f97316',
        danger: '#ef4444',
        info: '#3b82f6',
      },
      spacing: {
        xs: '0.25rem',
        sm: '0.5rem',
        md: '1rem',
        lg: '1.5rem',
        xl: '2rem',
        '2xl': '3rem',
      },
      borderRadius: {
        sm: '0.375rem',
        md: '0.5rem',
        lg: '0.75rem',
        xl: '1rem',
      },
      boxShadow: {
        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
      },
      animation: {
        spin: 'spin 1s linear infinite',
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}