const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  './src/**/*.{html,js,ts,jsx,tsx}',
  ],
  theme: {
  extend: {
    colors: {
      'primary': '#4A90C2',
      'primary-dark': '#357ABD',
      'secondary': '#5B9BD5',
      'charter': '#d4af37',
      'charter-light': '#f4d03f',
      'charter-dark': '#1a1a1a',
      'charter-bg': '#2d2d2d',
      'success': '#10B981',
      'warning': '#F59E0B',
      'error': '#EF4444',
      'gray-50': '#F9FAFB',
      'gray-100': '#F3F4F6',
      'gray-200': '#E5E7EB',
      'gray-300': '#D1D5DB',
      'gray-400': '#9CA3AF',
      'gray-500': '#6B7280',
      'gray-600': '#4B5563',
      'gray-700': '#374151',
      'gray-800': '#1F2937',
      'gray-900': '#111827',
    },
    borderRadius: {
      'card': '20rpx',
      'button': '50rpx',
      'small': '12rpx',
      'medium': '16rpx',
    },
    boxShadow: {
      'light': '0 2rpx 12rpx rgba(0, 0, 0, 0.08)',
      'medium': '0 4rpx 20rpx rgba(0, 0, 0, 0.12)',
      'heavy': '0 8rpx 32rpx rgba(0, 0, 0, 0.16)',
      'primary': '0 8rpx 24rpx rgba(74, 144, 194, 0.4)',
      'charter': '0 8rpx 24rpx rgba(212, 175, 55, 0.4)',
    },
    spacing: {
      'card': '32rpx',
      'section': '24rpx',
      'button': '24rpx',
    }
  },
  },
  plugins: [
    iconsPlugin({
      // Select the icon collections you want to use
      collections: getIconCollections(["mdi", "lucide", "heroicons", "heroicons-outline", "heroicons-solid"]),
    }),
  ],
  corePlugins: {
  preflight: false,
  },
}