import type { Config } from 'tailwindcss';

const config: Config = {
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      colors: {
        canvas: '#0B0E14',
        panel: '#121721',
        panelRaised: '#171E2B',
        border: 'rgba(148, 163, 184, 0.18)',
        accent: '#4C8DFF',
        highlight: '#FFB04C',
        textPrimary: '#F8FAFC',
        textSecondary: '#94A3B8',
        textMuted: '#64748B'
      },
      fontFamily: {
        sans: [
          'Inter',
          'ui-sans-serif',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          'sans-serif'
        ],
        mono: ['"JetBrains Mono"', '"SFMono-Regular"', 'Consolas', 'monospace']
      },
      boxShadow: {
        panel: '0 18px 60px rgba(0, 0, 0, 0.35)',
        glow: '0 0 32px rgba(76, 141, 255, 0.25)'
      },
      backdropBlur: {
        panel: '18px'
      },
      keyframes: {
        shimmer: {
          '0%': { backgroundPosition: '200% 0' },
          '100%': { backgroundPosition: '-200% 0' }
        },
        pulseGlow: {
          '0%, 100%': { boxShadow: '0 0 0 rgba(76, 141, 255, 0)' },
          '50%': { boxShadow: '0 0 26px rgba(76, 141, 255, 0.24)' }
        }
      },
      animation: {
        shimmer: 'shimmer 1.6s linear infinite',
        pulseGlow: 'pulseGlow 2.4s ease-in-out infinite'
      }
    }
  },
  plugins: []
};

export default config;