import type { Config } from 'tailwindcss'

export default {
  content: ['./src/**/*.{ts,tsx}', './index.html'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        bg:        'var(--bg)',
        card:      'var(--card)',
        cardHover: 'var(--cardHover)',
        accent:    'var(--accent)',
        accentHover: 'var(--accentH)',
        surface:   'var(--surface)',
        text:      'var(--text)',
        muted:     'var(--muted)',
        border:    'var(--border)',
      },
      aspectRatio: {
        steam: '460 / 215',
        app: '1 / 1',
      },
      animation: {
        'fade-in':       'fadeIn 0.22s ease-out both',
        'scale-in':      'scaleIn 0.18s ease-out both',
        'slide-in-right':'slideInRight 0.28s cubic-bezier(0.16,1,0.3,1) both',
        'slide-in-up':   'slideInUp 0.22s ease-out both',
        shimmer:         'shimmer 1.4s ease-in-out infinite',
        'bounce-star':   'bounceStar 0.35s ease-out',
        ripple:          'ripple 0.5s ease-out',
      },
      keyframes: {
        fadeIn: {
          from: { opacity: '0', transform: 'translateY(8px)' },
          to:   { opacity: '1', transform: 'translateY(0)' },
        },
        scaleIn: {
          from: { opacity: '0', transform: 'scale(0.93)' },
          to:   { opacity: '1', transform: 'scale(1)' },
        },
        slideInRight: {
          from: { transform: 'translateX(100%)' },
          to:   { transform: 'translateX(0)' },
        },
        slideInUp: {
          from: { opacity: '0', transform: 'translateY(16px)' },
          to:   { opacity: '1', transform: 'translateY(0)' },
        },
        shimmer: {
          '0%, 100%': { opacity: '0.4' },
          '50%':       { opacity: '0.8' },
        },
        bounceStar: {
          '0%':   { transform: 'scale(1)' },
          '40%':  { transform: 'scale(1.45)' },
          '100%': { transform: 'scale(1)' },
        },
        ripple: {
          '0%':   { transform: 'scale(0)', opacity: '0.4' },
          '100%': { transform: 'scale(2.5)', opacity: '0' },
        },
      },
      backdropBlur: { xs: '4px' },
      transitionTimingFunction: {
        spring: 'cubic-bezier(0.16, 1, 0.3, 1)',
      },
    },
  },
  plugins: [],
} satisfies Config