/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'monospace'],
      },
      colors: {
        docker: {
          DEFAULT: '#2496ED',
          dark: '#1D7CC8',
          light: '#E8F4FD',
        },
        surface: {
          DEFAULT: 'rgb(var(--surface) / <alpha-value>)',
          raised: 'rgb(var(--surface-raised) / <alpha-value>)',
          overlay: 'rgb(var(--surface-overlay) / <alpha-value>)',
          muted: 'rgb(var(--surface-muted) / <alpha-value>)',
        },
        border: {
          DEFAULT: 'rgb(var(--border) / <alpha-value>)',
          strong: 'rgb(var(--border-strong) / <alpha-value>)',
        },
        foreground: {
          DEFAULT: 'rgb(var(--foreground) / <alpha-value>)',
          muted: 'rgb(var(--foreground-muted) / <alpha-value>)',
          faint: 'rgb(var(--foreground-faint) / <alpha-value>)',
        },
        success: '#22C55E',
        warning: '#F59E0B',
        danger: '#EF4444',
      },
      boxShadow: {
        panel: 'var(--shadow-panel)',
        docker: 'var(--shadow-docker)',
      },
      animation: {
        'flow-dash': 'flow-dash 1.4s linear infinite',
        'flow-pulse': 'flow-pulse 2.2s linear infinite',
      },
      keyframes: {
        'flow-dash': { to: { strokeDashoffset: '-48' } },
        'flow-pulse': { to: { strokeDashoffset: '-248' } },
      },
    },
  },
  plugins: [],
}