Add "tintless" color variables to hold the key/accent color for each palette (`--color-foo`, not just `--color-foo-XX`)

[LeaVerou]

As discussed in Color meeting with Dave. This would include both literal hues (--wa-color-blue) as well as semantic colors (e.g. --wa-color-primary).

Then, CSS would need to be updated to use the right hue. E.g. a primary button would use --wa-color-primary (with an automatic text color) whereas a callout background would use an actual tint.

[LeaVerou]

So, I think the best way to approach this is something maintainable down the line:

• I can write a script that adds tintless variables to one or more CSS files automatically (and updates them when re-run)
• But @lindsaym-fa will need to go through them, see if any adjustments are needed and re-run the script, verify contrast ratios are still met), and use them in the CSS (e.g. ideally --color-*-on-loud should use these — if it doesn't, something is off).

[LeaVerou]

So, I think the best way to approach this is something maintainable down the line:

• I can write a script that adds tintless variables to one or more CSS files automatically (and updates them when re-run)
• But @lindsaym-fa will need to go through them, see if any adjustments are needed and re-run the script, verify contrast ratios are still met), and use them in the CSS (e.g. ideally --color-*-on-loud should use these — if it doesn't, something is off).

• Contrast ratio testsuite was added in Quick proof of concept contrast tests #541
• Tintless script added in Tintless variables + OKLCH coords as comments #596