/** @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"
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Plus Jakarta Sans', 'sans-serif'],
      },
      width: {
        '266': '266px',
        '320': '320px',
      },
      height: {
        'screen-80': '80vh'
      },
      colors: {
        "vtd-primary": {
          '50': '#E8F6F8',
          '100': '#B6E2EA',
          '200': '#93D4DF',
          '300': '#62C1D1',
          '400': '#0B5966', //#43B5C8
          '500': '#14A2BA',
          '600': '#1293A9',
          '700': '#0E7384',
          '800': '#0B5966',
          '900': '#0B5966',
        }, // Light mode Datepicker color
        // "vtd-secondary": colors.gray, // Dark mode Datepicker color
        'layout': '#F3F7F9',
        'dark': '#151617',
        'aside': '#2E3536',
        'primary': {
          '50': '#E8F6F8',
          '100': '#B6E2EA',
          '200': '#93D4DF',
          '300': '#62C1D1',
          '400': '#43B5C8',
          '500': '#14A2BA',
          '600': '#1293A9',
          '700': '#0E7384',
          '800': '#0B5966',
          '900': '#0B5966',
        },
        'accent': {
          '50': '#FCFAE8',
          '100': '#F5EFB6',
          '200': '#F0E893',
          '300': '#E9DD62',
          '400': '#E5D643',
          '500': '#DECC14',
          '600': '#CABA12',
          '700': '#9E910E',
          '800': '#7A700B',
          '900': '#5D5608',
        },
        'gray': {
          '50': '#F1F2F2',
          '100': '#D2D7D8',
          '200': '#BCC4C5',
          '300': '#9EA9AB',
          '400': '#8B989A',
          '500': '#6E7E81',
          '600': '#647375',
          '700': '#4E595C',
          '800': '#3D4547',
          '900': '#2E3536',
        }
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/container-queries'),
    require('@headlessui/tailwindcss'),
    require('@headlessui/tailwindcss')({ prefix: 'ui' }),
  ],
}