module.exports = {
  theme: {
    colors: {
      purple: {
        DEFAULT: '#612A60',
        dark: '#3F0C39',
      },
      orange: {
        light: '#EDAA1A',
        DEFAULT: '#DA4926',
        dark: '#9E3D1F',
      },
      teal: {
        DEFAULT: '#1C8B81',
      },
      gray: {
        100: '#F3F3F3',
        200: '#DDDDDD',
        300: '#8C8B8C',
        400: '#636363',
        500: '#333333',
        warm: '#3A3633',
        smoke: '#48535B',
      },
      white: {
        DEFAULT: '#FFFFFF',
      },
      black: {
        DEFAULT: '#000000',
      },
    },
    fontSize: {
      xxs: '12px',
      xs: '14px',
      sm: '16px',
      'base-sm': '18px',
      base: '20px',
      md: '24px',
      'md-lg': '28px',
      lg: '32px',
      xl: '36px',
      xxl: '40px',
      '3xl': '48px',
      '4xl': '56px',
      display: '80px',
    },
    lineHeight: {
      'x-tight': '1.05',
      tight: '1.15',
      narrow: '1.33',
      base: '1.5',
      loose: '2',
    },
    fontFamily: {
      sans: ['freight-sans-pro', 'Helvetica', 'Arial', 'sans-serif'],
      serif: ['freight-text-pro', 'Georgia', 'serif'],
    },
    screens: {
      'mobile-sm': '360px',
      mobile: '480px',
      tablet: '640px',
      'tablet-lg': '880px',
      'hide-mobile-menu': '900px',
      desktop: '1024px',
      'desktop-lg': '1200px',
      'desktop-xl': '1350px',
    },
    spacing: {
      0: '0',
      '1px': '1px',
      '2px': '2px',
      '3px': '3px',
      xxs: '4px',
      xs: '8px',
      sm: '16px',
      base: '24px',
      md: '40px',
      lg: '56px',
      xl: '80px',
      xxl: '96px',
      '3xl': '160px',
      '4xl': '20rem',
      full: '100%',
    },
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
    boxShadow: {
      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
      DEFAULT: '0 2px 8px rgba(0,0,0,0.4);',
      md: '0 3px 12px -1px rgba(0, 0, 0, 0.15)',
      lg:
        '0 29px 70px -40px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
      none: 'none',
    },
    extend: {
      borderRadius: {
        '4xl': '2rem',
      },
      maxWidth: {
        '1/4': '25%',
        '1/3': '33.33%',
        '1/2': '50%',
        '2/3': '66.66%',
        '3/4': '75%',
      },
      outline: {
        blue: '2px solid #0000ff',
        white: '1px dashed #ffffff',
        orange: '1px dashed #DA4926',
      },
      letterSpacing: {
        loose: '1px',
      },
    },
  },
  variants: {
    extend: {
      outline: ['focus-visible'],
      opacity: ['disabled'],
      backgroundColor: ['active'],
    },
  },
};