[Functionality] Rework colors used, document more thoroughly use cases

## Problem
The site attempts to negotiate a compromise for use of the brand colors in a usable and accessible way, while also adhering to an internal logical set of use cases for drawing attention, highlight and element, and provide compositional contrast.

These uses are not documented currently, and furthermore need to be better thought out.

Additionally, the colors used within Vocabulary are a narrow subset of the overall possible brand colors.

The brand colors were also not considered from a digital or accessible lens well enough and therefore some of the colors used within Vocabulary had to experience a shift in saturation and/or contrast.

## Description
The color pallettes need to be resolved overall within Vocabulary and the larger CC Style Guide, and then documented fully.

Presently the following colors exist within Vocabulary and are not complete with what should be possible in accordance with brand guidelines.

`````css
--vocabulary-brand-color-gold: #FBD43C;
--vocabulary-brand-color-green: #008000;
--vocabulary-brand-color-tomato: #C74200;
--vocabulary-brand-color-turquoise: #05b5da;

--vocabulary-brand-color-soft-gold: #FEF6D8;

--vocabulary-brand-color-soft-green: #E0F5E0;
--vocabulary-brand-color-dark-green: #005d00;

--vocabulary-brand-color-soft-turquoise: #DFF6FC;

--vocabulary-brand-color-soft-tomato: #FEEDE9;
--vocabulary-brand-color-dark-tomato: #903101;

--vocabulary-neutral-color-lighter-gray: #F5F5F5;
--vocabulary-neutral-color-dark-gray: #767676;
`````

## Additional context

## Implementation

- [x] I would be interested in implementing this feature.