ENH Update focus states to be consistent

[GuySartorelli]

This PR uses CSS variables to set focus outline style, colour, width, and offset.
This has a few advantages over relying directly on SCSS variables:

• Developers can easily update the styles of their own components and even our components by simply updating CSS variable values
• We don't need to redeclare any of the outline-* CSS properties, which means the specificity remains very broad, making targetted updates very easy.

This PR updates all focus-visible styling to be consistent. Broadly speaking:

• Focused elements have a dark blue outline
• If the background is too dark for the outline to display, a white outline is used instead.
• If there is no room to display an outline outside the focused element, the outline is inset inside the element's boundaries

Issue

• Accessibility: Inconsistent focus outlines across the CMS .github#443

[GuySartorelli]

focus-visible lets the browser decide when the focus outline is displayed. This means our styles are more inline with browser defaults 👍

[GuySartorelli]

Removing a bunch of drop shadows in favour of the new focus outline

[GuySartorelli]

This was originally added in #304.
I tried adding a bunch of pages, some with long names, and didn't experience any difference with this vs without it - except that without it the focus outline displays correctly for links at the edges of the wrapper boundaries.

Here's a screenshot of my test, note it looked like this both with and without hiding the overflow.