/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')
export default {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './src/**/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/vue-tailwind-datepicker/**/*.js',
    './node_modules/@flavorly/vanilla-components/dist/presets/tailwind/all.json'
  ],
  mode: 'jit',
  darkMode: 'class',
  theme: {
    extend: {
      fontFamily: {
        sans: ['Plus Jakarta Sans', 'sans-serif']
      },
      width: {
        266: '266px',
        320: '320px'
      },
      height: {
        'screen-80': '80vh'
      },
      colors: {
        'vtd-primary': {
          50: '#e6eff1',
          100: '#cddee3',
          200: '#9abdc6',
          300: '#689daa',
          400: '#357c8d',
          500: '#035b71',
          600: '#02495a',
          700: '#02495a',
          800: '#01242d',
          900: '#011217'
        },
        layout: '#F3F7F9',
        dark: '#151617',
        aside: '#2E3536',
        primary: {
          50: '#e6eff1',
          100: '#cddee3',
          200: '#9abdc6',
          300: '#689daa',
          400: '#357c8d',
          500: '#035b71',
          600: '#02495a',
          700: '#02495a',
          800: '#01242d',
          900: '#011217'
        },
        secondary: {
          50: '#e5eef7',
          100: '#ccebef',
          200: '#99d7df',
          300: '#66c2d0',
          400: '#33aec0',
          500: '#00a2b9',
          600: '#007b8d',
          700: '#005c6a',
          800: '#003e46',
          900: '#001f23'
        },
        red: {
          50: '#ffe5e5',
          100: '#ffcccc',
          200: '#ff9999',
          300: '#ff6666',
          400: '#ff3333',
          500: '#ff0000',
          600: '#cc0000',
          700: '#990000',
          800: '#660000',
          900: '#330000'
        },
        yellow: {
          50: '#ffffe5',
          100: '#ffffcc',
          200: '#ffff99',
          300: '#ffff66',
          400: '#ffff33',
          500: '#ffff00',
          600: '#cccc00',
          700: '#999900',
          800: '#666600',
          900: '#333300'
        },
        gray: {
          50: '#f9fafb',
          100: '#f3f4f6',
          200: '#e5e7eb',
          300: '#d1d5db',
          400: '#9ca3af',
          500: '#6b7280',
          600: '#4b5563',
          700: '#374151',
          800: '#1f2937',
          900: '#111827'
        }
      }
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
    require('@headlessui/tailwindcss'),
    require('@headlessui/tailwindcss')({ prefix: 'ui' })
  ]
}