import type { Config } from 'tailwindcss';

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: '#c20600',
        'bg-primary': '#0a0a0a',
        'bg-secondary': '#121212',
        'bg-tertiary': '#1a1a1a',
        'bg-elevated': '#202020',
        'text-primary': '#d4d4d4',
        'text-secondary': '#a3a3a3',
        'text-muted': '#737373',
        'border-subtle': '#1a1a1a',
        'border-default': '#2a2a2a',
        'border-highlight': '#3a3a3a',
      },
      fontFamily: {
        mono: ['Courier New', 'Courier', 'monospace'],
        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
      },
      spacing: {
        'header': '48px',
        'status': '32px',
      },
      animation: {
        'pulse-slow': 'pulse-slow 3s ease-in-out infinite',
        'fade-in': 'fade-in 0.6s ease-out forwards',
        'fade-in-up': 'fade-in-up 0.6s ease-out forwards',
        'glow': 'glow 2s ease-in-out infinite',
        'data-flow': 'data-flow 1.5s ease-in-out infinite',
      },
      keyframes: {
        'pulse-slow': {
          '0%, 100%': { opacity: '0.4' },
          '50%': { opacity: '1' },
        },
        'fade-in': {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        'fade-in-up': {
          '0%': { opacity: '0', transform: 'translateY(12px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        'glow': {
          '0%, 100%': { boxShadow: '0 0 4px #c2060060' },
          '50%': { boxShadow: '0 0 12px #c20600a0' },
        },
        'data-flow': {
          '0%': { transform: 'translateY(-4px)', opacity: '0' },
          '50%': { opacity: '1' },
          '100%': { transform: 'translateY(4px)', opacity: '0' },
        },
      },
    },
  },
  plugins: [],
} satisfies Config;