/** @type {import('tailwindcss').Config} */
import plugin from 'tailwindcss/plugin';

export default {
  darkMode: ["class"],
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        montserrat: [
          'Montserrat',
          'sans-serif'
        ]
      },
      animation: {
        marquee: 'marquee 10s linear infinite'
      },
      keyframes: {
        marquee: {
          '0%': {
            transform: 'translateX(100%)'
          },
          '100%': {
            transform: 'translateX(-100%)'
          }
        }
      },
      colors: {
        brand: {
          light: '#ef4444',
          DEFAULT: '#dc2626',
          dark: '#b91c1c'
        },
        accent: {
          light: '#f87171',
          DEFAULT: 'hsl(var(--tw-accent))',
          dark: '#dc2626',
          foreground: 'hsl(var(--tw-accent-foreground))'
        },
        neutral: {
          '50': '#f8fafc',
          '100': '#f1f5f9',
          '200': '#e2e8f0',
          '300': '#cbd5e1',
          '400': '#94a3b8',
          '500': '#64748b',
          '600': '#475569',
          '700': '#334155',
          '800': '#1e293b',
          '900': '#0f172a'
        },
        success: {
          light: '#22c55e',
          DEFAULT: '#16a34a',
          dark: '#15803d'
        },
        warning: {
          light: '#facc15',
          DEFAULT: '#eab308',
          dark: '#ca8a04'
        },
        danger: {
          light: '#ef4444',
          DEFAULT: '#dc2626',
          dark: '#b91c1c'
        },
        text: {
          DEFAULT: 'var(--text)',
          secondary: 'var(--text-secondary)',
          light: 'var(--text-light)',
          muted: 'var(--text-muted)',
          inverse: 'var(--text-inverse)',
        },
        slate: {
          DEFAULT: 'var(--slate)',
          light: 'var(--slate-light)',
          50: 'var(--slate-50)',
        },
        primary: {
          DEFAULT: 'hsl(var(--tw-primary))',
          foreground: 'hsl(var(--tw-primary-foreground))',
          dark: 'var(--primary-dark)',
          light: 'var(--primary-light)',
          50: 'var(--primary-50)',
          100: 'var(--primary-100)',
        },
        accent: {
          light: '#f87171',
          DEFAULT: 'hsl(var(--tw-accent))',
          dark: '#dc2626',
          foreground: 'hsl(var(--tw-accent-foreground))',
          50: 'var(--accent-50)',
          100: 'var(--accent-100)',
        },
        lms: {
          DEFAULT: 'var(--lms)',
          dark: 'var(--lms-dark)',
          light: 'var(--lms-light)',
          50: 'var(--lms-50)',
          100: 'var(--lms-100)',
        },
        sms: {
          DEFAULT: 'var(--sms)',
          dark: 'var(--sms-dark)',
          light: 'var(--sms-light)',
          50: 'var(--sms-50)',
          100: 'var(--sms-100)',
        },
        'primary-foreground': '#FFFFFF',
        navigation: '#dfe0db',
        background: 'hsl(var(--tw-background))',
        foreground: 'hsl(var(--tw-foreground))',
        card: {
          DEFAULT: 'hsl(var(--tw-card))',
          foreground: 'hsl(var(--tw-card-foreground))'
        },
        popover: {
          DEFAULT: 'hsl(var(--tw-popover))',
          foreground: 'hsl(var(--tw-popover-foreground))'
        },
        secondary: {
          DEFAULT: 'hsl(var(--tw-secondary))',
          foreground: 'hsl(var(--tw-secondary-foreground))'
        },
        muted: {
          DEFAULT: 'hsl(var(--tw-muted))',
          foreground: 'hsl(var(--tw-muted-foreground))'
        },
        destructive: {
          DEFAULT: 'hsl(var(--tw-destructive))',
          foreground: 'hsl(var(--tw-destructive-foreground))'
        },
        border: 'hsl(var(--tw-border))',
        input: 'hsl(var(--tw-input))',
        ring: 'hsl(var(--tw-ring))',
        chart: {
          '1': 'hsl(var(--tw-chart-1))',
          '2': 'hsl(var(--tw-chart-2))',
          '3': 'hsl(var(--tw-chart-3))',
          '4': 'hsl(var(--tw-chart-4))',
          '5': 'hsl(var(--tw-chart-5))'
        }
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)'
      }
    }
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.custom-utility': {
          display: 'inline-block',
          padding: '0.5rem',
          backgroundColor: '#1b2121',
        },
      });
    }),
    require("tailwindcss-animate")
  ],
};