import type { Config } from 'tailwindcss'

const defaultTheme = require('tailwindcss/defaultTheme')

const config: Config = {
  mode: 'jit',
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
        inter: ['Inter', 'sans-serif', ...defaultTheme.fontFamily.sans]
      },
      fontSize: {
        xs: ['0.75rem', { lineHeight: '1.25' }],
        sm: ['0.875rem', { lineHeight: '1.25' }],
        base: ['1rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
        lg: ['1.125rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
        xl: ['1.25rem', { lineHeight: '1.25', letterSpacing: '-0.01em' }],
        '2xl': ['1.5rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
        '3xl': ['1.88rem', { lineHeight: '1.33', letterSpacing: '-0.01em' }],
        '4xl': ['2.25rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
        '5xl': ['3rem', { lineHeight: '1.25', letterSpacing: '-0.02em' }],
        '6xl': ['3.75rem', { lineHeight: '1.2', letterSpacing: '-0.02em' }]
      },
      screens: {
        xs: '480px'
      },
      borderWidth: {
        3: '3px'
      },
      minWidth: {
        36: '9rem',
        44: '11rem',
        56: '14rem',
        60: '15rem',
        72: '18rem',
        80: '20rem'
      },
      maxWidth: {
        '8xl': '88rem',
        '9xl': '96rem'
      },
      zIndex: {
        60: '60'
      },
      boxShadow: {
        DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.02)',
        md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.01)',
        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)'
        // neon: '0 0 3px #7f11e0, 0 0 6px #7f11e0, 0 0 9px #7f11e0',
        // 'neon-hover': '0 0 6px #7f11e0, 0 0 12px #7f11e0, 0 0 18px #7f11e0'
      },
      outline: {
        blue: '2px solid rgba(0, 112, 244, 0.5)'
      },
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))'
        },
        'theme-text': {
          principal: '#323338',
          disabled: '#cbd5e1'
        },
        'theme-app': {
          50: '#e1ddeb',
          100: '#bab0d6',
          200: '#9383c1',
          300: '#6c56ac',
          400: '#462997',
          500: '#361e7b',
          600: '#311b70',
          700: '#2c1864',
          800: '#261558',
          900: '#21114d',
          950: '#1b0e41'
        },
        warning: '#3B82F6',
        'warning-dark': '#1E40AF',
        'warning-hover': '#60A5FA',
        'warning-hover-dark': '#2563EB',
        danger: '#EF4444',
        'danger-dark': '#991B1B',
        'danger-hover': '#F87171',
        'danger-hover-dark': '#DC2626',
        success: '#22C55E',
        'success-dark': '#15803D',
        'success-hover': '#34D399',
        'success-hover-dark': '#22C55E'
      }
    }
  },
  plugins: []
}
export default config