import type { Config } from 'tailwindcss';
import { sehatTailwindPreset } from '@sehat/design-tokens/tailwind';

const config: Config = {
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    '../../packages/ui/src/**/*.{ts,tsx}',
  ],
  presets: [sehatTailwindPreset as unknown as Partial<Config>],
  theme: {
    extend: {
      animation: {
        'aurora-pan': 'auroraPan 16s ease infinite',
        'float-y': 'floatY 6s ease-in-out infinite',
        'pulse-glow': 'pulseGlow 3s ease-in-out infinite',
        'marquee-x': 'marqueeX 40s linear infinite',
      },
      keyframes: {
        auroraPan: {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
        },
        floatY: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-12px)' },
        },
        pulseGlow: {
          '0%, 100%': { opacity: '0.55', filter: 'blur(28px)' },
          '50%': { opacity: '0.85', filter: 'blur(36px)' },
        },
        marqueeX: {
          '0%': { transform: 'translateX(0)' },
          '100%': { transform: 'translateX(-50%)' },
        },
      },
    },
  },
  plugins: [],
};

export default config;