Rename Tailwind colors to semantic names and switch to CSS variables

[zackkrida]

This issue is part of the Dark Mode project: #3592. Please see the implementation plan for additional detail and context.

Description

Using the colors mapped in this issue, rename all of the colors in the Tailwind configuration file and the tailwind classes used in our frontend components to use new, semantic names.

I strongly reccommend using find-and-replace with scripts like ripgrep or tools like the find and replace built into VS Code (which uses ripgrep internally!).

This PR will not result in any visual changes but will have a large diff. Provided all tests pass it will be safe to merge.

This PR should also move the colors from being hardcoded in the Tailwind configuration to being CSS variables. These colors should be nested under a :root,:is(.light-mode *) {} CSS selector.

Here is an example with the "yellow" color:

Before (tailwind.config.ts)

{
  theme: {
    colors: {
      yellow: "#ffe033"
    }
  }
}

After

Tailwind.config.ts

{
  theme: {
    colors: {
      primary: var(--color-primary); // previously "yellow"
    }
  }
}

tailwind.css

@layer base {
  :root,
  :is(.light-mode *) {
    --color-primary: #ffe033 /* previously "yellow" */
  }
}

[zackkrida]

This issue is blocked until we finalize and clarify names in #4268