import type { Config } from 'tailwindcss'

/**
 * Tailwind CSS configuration — {{DESIGN_FLAVOR}} flavor
 * Generated by Traqr Init. Edit freely — this is your code now.
 */
const config: Config = {
{{#IF_DESIGN_DARK_MODE}}
  darkMode: 'class',
{{/IF_DESIGN_DARK_MODE}}
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      colors: {
        design: {
          primary: 'var(--color-design-primary)',
          secondary: 'var(--color-design-secondary)',
          accent: 'var(--color-design-accent)',
          bg: 'var(--color-design-bg)',
          fg: 'var(--color-design-fg)',
          card: 'var(--color-design-card)',
          border: 'var(--color-design-border)',
          muted: 'var(--color-design-muted)',
        },
      },
      fontFamily: {
        sans: ['var(--font-sans)'],
        mono: ['var(--font-mono)'],
      },
      borderRadius: {
        'design-sm': '{{DESIGN_RADIUS_SM}}',
        'design-md': '{{DESIGN_RADIUS_MD}}',
        'design-lg': '{{DESIGN_RADIUS_LG}}',
        'design-card': '{{DESIGN_RADIUS_CARD}}',
      },
{{#IF_DESIGN_ANIMATIONS}}
      keyframes: {
        'design-fade-up': {
          from: { opacity: '0', transform: 'translateY({{DESIGN_ENTRANCE_Y}})' },
          to: { opacity: '1', transform: 'translateY(0)' },
        },
        'design-shimmer': {
          '0%': { backgroundPosition: '-200% 0' },
          '100%': { backgroundPosition: '200% 0' },
        },
      },
      animation: {
        'design-fade-up': 'design-fade-up {{DESIGN_TRANSITION_DURATION}} ease-out',
        'design-shimmer': 'design-shimmer 1.5s ease-in-out infinite',
      },
{{/IF_DESIGN_ANIMATIONS}}
    },
  },
  plugins: [],
}

export default config