import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        editor: {
          bg: '#1e1e1e',
          surface: '#252526',
          border: '#3e3e42',
          hover: '#2a2d2e',
          active: '#37373d',
          text: '#cccccc',
          'text-muted': '#858585',
          accent: '#007acc',
          'accent-hover': '#1177bb',
          success: '#4ec9b0',
          warning: '#dcdcaa',
          error: '#f14c4c',
          info: '#75beff',
        },
        sidebar: {
          bg: '#181818',
          hover: '#2a2d2e',
          active: '#37373d',
        },
      },
      fontFamily: {
        mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'monospace'],
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      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: [require('@tailwindcss/typography')],
};
export default config;