/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/frontend/app/**/*.{ts,tsx}',
    './src/frontend/components/**/*.{ts,tsx}',
    './src/frontend/lib/**/*.{ts,tsx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // OKLch-based color palette (dark finance professional)
        background: {
          primary: 'oklch(0.08 0 0)',    // near-black
          secondary: 'oklch(0.12 0 0)',  // dark gray
          tertiary: 'oklch(0.18 0 0)',   // lighter gray
        },
        surface: {
          card: 'oklch(0.15 0 0)',
          hover: 'oklch(0.20 0 0)',
          active: 'oklch(0.25 0 0)',
          elevated: 'oklch(0.20 0 0)',
        },
        text: {
          primary: 'oklch(0.95 0 0)',
          secondary: 'oklch(0.70 0 0)',
          tertiary: 'oklch(0.50 0 0)',
          disabled: 'oklch(0.35 0 0)',
        },
        semantic: {
          positive: 'oklch(0.65 0.18 140)',   // green
          negative: 'oklch(0.55 0.20 20)',     // red
          accent: 'oklch(0.65 0.18 250)',      // blue
          warning: 'oklch(0.70 0.18 80)',      // amber
          critical: 'oklch(0.50 0.22 20)',     // deep red
        },
      },
      fontFamily: {
        display: ['Inter', 'system-ui', 'sans-serif'],
        body: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
      },
      spacing: {
        '1': '0.25rem',
        '2': '0.5rem',
        '3': '0.75rem',
        '4': '1rem',
        '6': '1.5rem',
        '8': '2rem',
        '12': '3rem',
        '16': '4rem',
        '20': '5rem',
      },
      borderRadius: {
        sm: '0.375rem',
        md: '0.5rem',
        lg: '0.75rem',
        xl: '1rem',
        full: '9999px',
      },
      animation: {
        'fade-in': 'fadeIn 0.2s ease-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(8px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
  plugins: [],
}