/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        canvas: {
          DEFAULT: '#080808',
          raised: '#121212',
        },
        surface: {
          DEFAULT: '#0f0f0f',
          hover: '#1a1a1a',
          raised: '#1a1a1a',
          border: '#262626',
        },
        accent: {
          DEFAULT: '#2dd4bf',
          hover: '#5eead4',
          muted: '#0d9488',
          foreground: '#0f0f0f',
        },
        fg: {
          DEFAULT: '#f5f5f5',
          muted: '#a3a3a3',
          subtle: '#737373',
        },
        border: {
          DEFAULT: '#262626',
          subtle: '#1f1f1f',
        },
        status: {
          running: '#10b981',
          pending: '#fbbf24',
          waking: '#fbbf24',
          success: '#10b981',
          error: '#f43f5e',
          info: '#38bdf8',
          neutral: '#71717a',
        },
      },
      fontFamily: {
        sans: ['"IBM Plex Sans"', 'ui-sans-serif', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'monospace'],
      },
      boxShadow: {
        card: '0 0 0 1px rgba(38, 38, 38, 1), 0 2px 8px rgba(0, 0, 0, 0.4)',
        'card-hover': '0 0 0 1px rgba(45, 212, 191, 0.3), 0 4px 16px rgba(0, 0, 0, 0.5)',
        glow: '0 0 20px rgba(45, 212, 191, 0.15)',
        'glow-error': '0 0 20px rgba(244, 63, 94, 0.15)',
      },
      borderRadius: {
        card: '0.5rem',
      },
      animation: {
        'fade-in': 'fadeIn 200ms ease-out',
        'scale-in': 'scaleIn 200ms ease-out',
        'slide-up': 'slideUp 200ms ease-out',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        scaleIn: {
          '0%': { opacity: '0', transform: 'scale(0.95)' },
          '100%': { opacity: '1', transform: 'scale(1)' },
        },
        slideUp: {
          '0%': { opacity: '0', transform: 'translateY(8px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
      },
    },
  },
  plugins: [],
}