import type { Config } from 'tailwindcss'

export default {
  darkMode: 'class',
  content: [
    './src/components/**/*.{vue,js,ts}',
    './src/layouts/**/*.vue',
    './src/pages/**/*.vue',
    './src/plugins/**/*.{js,ts}',
    './src/app.vue',
    './src/assets/css/**/*.css'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Peyda', 'Tahoma', 'system-ui', 'sans-serif'],
        heading: ['Rokh', 'Peyda', 'Tahoma', 'sans-serif']
      },
      colors: {
        noro: {
          bg: 'rgb(var(--noro-bg) / <alpha-value>)',
          surface: 'rgb(var(--noro-surface) / <alpha-value>)',
          border: 'rgb(var(--noro-border) / <alpha-value>)',
          text: 'rgb(var(--noro-text) / <alpha-value>)',
          muted: 'rgb(var(--noro-muted) / <alpha-value>)',
          brand: 'rgb(var(--noro-brand) / <alpha-value>)',
        }
      },
      animation: {
        'fade-up': 'fadeUp 0.7s ease-out forwards',
        float: 'float 6s ease-in-out infinite',
        marquee: 'marquee 35s linear infinite'
      },
      keyframes: {
        fadeUp: {
          '0%': { opacity: '0', transform: 'translateY(24px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' }
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-12px)' }
        },
        marquee: {
          '0%': { transform: 'translateX(0)' },
          '100%': { transform: 'translateX(-50%)' }
        }
      }
    }
  },
  plugins: [],
  safelist: [
    'border-noro-brand/20',
    'border-noro-brand/25',
    'border-noro-brand/30',
    'bg-noro-brand/5',
    'bg-noro-brand/10',
    'ring-noro-brand/20',
    'ring-noro-brand/40',
    'hover:border-noro-brand/30',
    'hover:ring-noro-brand/40',
    'shadow-noro-brand/20',
    '!bg-noro-brand/10',
    '!text-noro-brand'
  ]
} satisfies Config