Refactor: Use CSS Variables for colors, font-family

[machikoyasuda]

closes #968

• As much as possible, override root Bootstrap CSS variables to match Figma style guide
• When a Bootstrap CSS variable is not available, create new CSS variables and use them throughout the code
• Makes some changes to colors based on new Figma designs

The CSS file should no longer have any un-variable-ized colors and font-family declarations.

How to read this code

• Read https://getbootstrap.com/docs/5.1/customize/css-variables/
• All variables that start with --bs are overriding Bootstrap CSS variables.

How this change works

For example, when overriding --bs-primary with #046b99, like so:

:root {
  --primary-color: #046b99;
  --primary-color-rgb: 4, 107, 153;
  --bs-blue: var(--primary-color);
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: var(--primary-color-rgb);
}

all Bootstrap classes that rely on --bs-primary color will also be affected. Most notably, btn-primary, bg-primary will now all also use #046b99. With just these few CSS variable override lines, I was able to change all instances of the "primary" color to #046b99 throughout the CSS styles. Because of this, I was able to delete places in the style.css code where we were manually setting the Header background color or a Button background color to #046b99, because we are using classes of bg-primary or btn-primary instead.

Caveat: If the CA Web Standard code also sets another override to a --bs variable, then we'll still have to manually override it. An example of this is the body and h1 font declaration: we cannot remove the manual font declaration even though we've set --bs-font-family to Roboto because the CA Web Standard code overrides it to some other font. It is tricky.

How to test this

• Run the app, none of the colors should be different from Figma designs

Changes

• Radio button is now #323A45

• Form input is now #046B99

• Header, button primary color is now #046B99, which is different from prod:

[machikoyasuda]

Rebased