import type { Config } from 'tailwindcss'
import typography from '@tailwindcss/typography'
import forms from '@tailwindcss/forms'
import aspectRatio from '@tailwindcss/aspect-ratio'

const config: Config = {
  darkMode: 'class',
  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: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          hover: 'hsl(var(--accent) / 0.85)',
          soft: 'hsl(var(--accent) / 0.2)',
          foreground: 'hsl(var(--accent-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        success: '#10B981',
        warning: '#F59E0B',
        error: '#EF4444',
        info: '#3B82F6',
        surface: {
          950: 'rgb(var(--surface-950))',
          900: 'rgb(var(--surface-900))',
          850: 'rgb(var(--surface-850))',
          800: 'rgb(var(--surface-800))',
          700: 'rgb(var(--surface-700))',
          600: 'rgb(var(--surface-600))',
          500: 'rgb(var(--surface-500))',
          400: 'rgb(var(--surface-400))',
          overlay: 'rgb(var(--surface-overlay))',
        },
        text: {
          primary: 'rgb(var(--text-primary))',
          secondary: 'rgb(var(--text-secondary))',
          muted: 'rgb(var(--text-muted))',
          disabled: 'rgb(var(--text-disabled))',
        },
        brand: {
          primary: 'rgb(var(--brand-primary))',
          bright: 'rgb(var(--brand-primary-bright))',
          accent: 'rgb(var(--brand-accent))',
          ember: 'rgb(var(--brand-ember))',
          forest: 'rgb(var(--brand-forest))',
          coal: 'rgb(var(--brand-coal))',
          olive: 'rgb(var(--brand-olive))',
          teal: 'rgb(var(--brand-teal))',
          steel: 'rgb(var(--brand-steel))',
        },
        neutral: {
          100: 'rgb(var(--neutral-100))',
          200: 'rgb(var(--neutral-200))',
          300: 'rgb(var(--neutral-300))',
          400: 'rgb(var(--neutral-400))',
        },
        chart: {
          1: 'hsl(var(--chart-1))',
          2: 'hsl(var(--chart-2))',
          3: 'hsl(var(--chart-3))',
          4: 'hsl(var(--chart-4))',
          5: 'hsl(var(--chart-5))',
        },
      },
      fontFamily: {
        sans: [
          'var(--font-kanit)',
          'Kanit',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          'sans-serif',
        ],
        display: [
          'var(--font-rajdhani)',
          'Rajdhani',
          'Kanit',
          'system-ui',
          'sans-serif',
        ],
        mono: ['JetBrains Mono', 'Consolas', 'monospace'],
      },
      spacing: {
        '2xs': 'var(--space-2xs)',
        xs: 'var(--space-xs)',
        sm: 'var(--space-sm)',
        md: 'var(--space-md)',
        lg: 'var(--space-lg)',
        xl: 'var(--space-xl)',
        '2xl': 'var(--space-2xl)',
        '3xl': 'var(--space-3xl)',
      },
      borderRadius: {
        none: 'var(--radius-none)',
        sm: 'var(--radius-sm)',
        DEFAULT: 'var(--radius)',
        md: 'var(--radius-md)',
        lg: 'var(--radius-lg)',
        xl: 'var(--radius-xl)',
        full: 'var(--radius-full)',
      },
      boxShadow: {
        soft: 'var(--shadow-soft)',
        strong: 'var(--shadow-strong)',
        outline: 'var(--shadow-outline)',
      },
      animation: {
        'fade-in': 'fadeIn var(--motion-duration-sm) var(--motion-ease-standard)',
        'fade-out':
          'fadeOut var(--motion-duration-sm) var(--motion-ease-standard)',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        fadeOut: {
          '0%': { opacity: '1' },
          '100%': { opacity: '0' },
        },
      },
      transitionDuration: {
        120: 'var(--motion-duration-xs)',
        200: 'var(--motion-duration-sm)',
        320: 'var(--motion-duration-md)',
        480: 'var(--motion-duration-lg)',
      },
      transitionTimingFunction: {
        standard: 'var(--motion-ease-standard)',
        emphasized: 'var(--motion-ease-emphasized)',
        entrance: 'var(--motion-ease-entrance)',
        exit: 'var(--motion-ease-exit)',
      },
    },
  },
  plugins: [typography, forms, aspectRatio],
}

export default config