/** @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': '#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' }),
  ],
}