Abstract and refactor Olivero's text color styles with new "text-color" custom properties

Background

The Olivero theme utilizes CSS variables in a very basic fashion. We declare colors like --color--primary-30, --color--primary-40, --color--primary-50, --color--primary-60,
--color--gray-5, --color--gray-10, --color--gray-20, --color--gray-45, --color--gray-60, etc.

We then utilize these variables directly within the component styles like

.breadcrumb__link {
  color: var(--color--primary-40);
}

Task

This task is to create an abstraction layer between the color custom properties and the component's CSS rules.

So, in the case above, we'd define a new variable scoped to :root something like --color-text-primary-medium and set that to var(--color--primary-40)

Then within the component stylesheet, we'd set the rule to use the new --color-text-primary-medium property.

.breadcrumb__link {
  color: var(--color-text-primary-medium);
}

Benefits

Once we have this abstraction layer in place, and another similar layer with background colors, we'll be in a great position to better control accessibility, as well as implement dark modes, etc.

Notes

We're not updating the link hover states here. The link hover-state color does not meet the 4.5:1 WCAG 2.0 AA standard, and needs to be updated. This will occur in a followup issue.

Resources

A list of CSS color properties, selectors, and values is at https://docs.google.com/spreadsheets/d/19zkRfD4CogL8ZUbIirpHpAH2Xh9ma6Va...