// You can adjust these according to your use case
export const breakpoints = ['32em', '48em', '64em', '80em']

export const colors = {
  rausch: '#FF5A5F',
  babu: '#00A699',
  arches: '#FC642D',
  hof: '#4848484',
  foggy: '#767676',

  primary: '#FF5A5F'
  // more colors would go here
}

export const space = [0, 8, 16, 24, 48, 64 /* add more to your liking */]
space.tiny = space[1]
space.small = space[2]
space.base = space[3]
space.large = space[4]
space.xlarge = space[5]

export const fontSizes = [
  '8px', 
  '14px', 
  '17px', 
  '19px', 
  '24px', 
  '32px', 
  '44px'
]

export const lineHeights = [
  '8px',
  '18px',
  '22px',
  '24px',
  '28px',
  '36px',
  '56px'
]

// other things like fontWeights, borders, and shadows can be added here