Olivero Rename blue name-spaced variables to primary, and rename numbers to correspond with luminosity

Child of #3217923: [Plan] Organize and refactor CSS color variables for Olivero

Rename blue name-spaced variables to primary, and rename numbers to correspond with luminosity.

Once the colors are converted to HSL in #3217924: Olivero: Convert all colors (blues and grays) to HSL and normalize hues and saturations. , we need to do the following:

1. Rename the blue variable to primary
2. Change the number value appended to the variable to roughly correspond with the luminosity.

For example, --color--blue-20 will correspond to hsl(202, 79%, 38%). This means that its updated variable name can be something like --color--primary-40.