module.exports = {
  purge: [],
  theme: {
    screens: {
      tablet: '640px',
      desktop: '1024px',
      'desktop-l': '1280px',
      'desktop-xl': '1680px',
    },
    zIndex: {
      dropdown: 50,
      sticky: 100,
      fixed: 150,
      modalBackdrop: 200,
      modal: 250,
      popover: 300,
      tooltip: 350,
    },
    fontFamily: {
      sans: ['Open Sans'],
    },
    extend: {
      fontSize: {
        'x-small': '12px',
        small: '14px',
        regular: '16px',
        'cta-l': '18px',
        'card-heading': '22px',
        'card-sub': '20px',
        'page-heading': '26px',
      },
      maxWidth: {
        content: '916px',
      },
      spacing: {
        'cta-x-l': '25px',
        'cta-y-l': '20px',
        'px-2': '2px',
        'px-5': '5px',
        'px-8': '8px',
        'px-10': '10px',
        'px-15': '15px',
        'px-20': '20px',
        'px-25': '25px',
        'px-30': '30px',
        'px-35': '35px',
        'px-40': '40px',
        'px-50': '50px',
        'px-100': '100px',
        'px-150': '150px',
      },
      gap: {
        'px-1': '1px',
        'px-2': '2px',
      },
      padding: {
        card: '20px',
      },
      colors: {
        warning: '#be8100',
        brand: '#f70400',
        'ucla-blue': '#5a728a',
        'wild-blue-yonder': '#9cb1c6',
        'dark-cerulean': '#1f466c',
        'cool-grey': '#89949e',
        glitter: '#e9f0f8',
        munsell: '#edeff0',
        onyx: '#171717',
        // active: '#1f466c',
        // inactive: '#3980c6',
        // disabled: '#b0cce8',
        customer: '#e6eff9',
        'font-customer': '#557eb8',
        'active-customer': '#1f466c',
        'inactive-customer': '#557596',
        'disabled-customer': '#d7e6f4',
        branch: '#edeff0',
        'font-branch': '#557eb8',
        'active-branch': '#596470',
        'inactive-branch': '#9ca5b0',
        'disabled-branch': '#c6cbd2',
        'dark-goldenrod': '#be8100',
      },
      boxShadow: {
        input: '0 6px 24px 0 rgba(214, 215, 217, 0.8)',
        'autocomplete-option': '0 6px 8px 0 rgba(214,215,217,.8)',
        card: '0px 0px 10px 0px rgba(220, 226, 233, 0.5)',
      },
      borderRadius: {
        card: '5px',
        customerCard: '10px',
        filter: '20px',
        autocomplete: '30px',
      },
    },
  },
  variants: {},
  plugins: [],
};