Add focus rings for accessibility

[MMK21Hub]

This PR begins the task of ensuring that all keyboard-focusable elements have some sort of visual indicator when they're focused.

What was before

Previously, we were setting outline: none on some elements, some had focus rings but implemented using box-shadow (which is not ideal because high-contrast modes often remove box shadows - I've replaced them with outlines), and others just used the user-agent focus styles (which is fine, but not consistent with our design, and sometimes the defaults are not very visible).

What is now

What I've added focus rings to:

• All .btn buttons
• Text input elements (create project, rsvp)
• File input elements (create project)

Some elements that are still missing custom focus rings: (they have the browser-provided focus rings so it's not the end of the world)

• Sidebar items
  • any designers have opinions on what that should look like?
• Dropdowns (select elements) (create project)
  • would be best to first refactor the coloured selects in a similar way to what I did with the colored inputs (see below)

Other changes I made:

• Refactored the styles for the coloured input elements to use CSS variables. Much less repeated code and it made it easy to add focus rings!
• The sidebar now expands when you tab into it (so you can see what links you've got focused!)

If these changes are acceptable, I would be happy to implement the rest of the focus rings as well!

Screenshots

[3kh0]

thank you!