Update our colour naming convention

This patch made it evident that we must update our colour naming convention.

Instead of using "light" and "darker" and "darkest", it would be more flexible to use numbers.

e.g.

primary-50 primary-100 primary-200 ... primary-900

This would allow us to fit many more colours without running out of words to describe them.

This is a convention that Bootstrap 5 and TailwindCSS have adopted:

• https://getbootstrap.com/docs/5.0/customize/color/
• https://tailwindcss.com/docs/background-color