CSS browser consistency on button focus

[stuller]

Buttons in IE and FF are showing a dotted line around the text when they receive focus.

Browsers add this line to make it easier for people who use keyboard instead of mouse to be able to tell that the button is in focus - so it's not a defect, it's an accessibility feature.

However, we'd like behavior to be the same in all browsers. Chrome adds an outline to the whole button - but it's not really clear in Atlas because the color is similar to the primary button color.

We should update css for focus on buttons to:

1. remove the dotted line in IE and FF
2. in all browsers, display an 3px outline on focus using the darker version of the button color. There are variables already created for these colors. For example, we have --primary and --primary-darker variables.