export const breakpoints = {
  PHABLET: '32em',
  TABLET: '48em',
  PC: '64em',
  WIDESCREEN: '80em'
}

export const colors = {
  white: '#ffffff',
  lightGray: '#f2f2f2',
  darkGray: '#767676',
  offWhite: '#e8d9d94d',
  black: '#231f20',
  purpleBlack: '#413844',
  purple: '#cc33ff',
  lightPurple: '#ffebff',
  red: '#fb3b49'
}

export const space = [0, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80]

export const theme = {
  breakpoints: {
    PHABLET: ' 32em',
    TABLET: '48em',
    PC: '64em',
    WIDESCREEN: '80em'
  },
  fontSizes: [
    12, 14, 16, 20, 24, 32, 48, 64
  ],
  colors: {
    white: '#ffffff',
    lightGray: '#f2f2f2',
    darkGray: '#767676',
    offWhite: '#e8d9d94d',
    black: '#231f20',
    purpleBlack: '#413844',
    purple: '#cc33ff',
    lightPurple: '#ffebff',
    red: '#fb3b49'
  },
  space: [
    0, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80
  ],
  fonts: {
    poppins: 'Poppins, sans-serif',
    inconsolata: 'Inconsolata, sans-serif'
  }
}