Fully support system color keywords in Forced Colors mode

Eric's always got good material for folks wanting to learn about High Contrast Mode https://someantics.dev/high-contrast-mode/

Adrian talks about the importance of system colors https://adrianroselli.com/2021/02/whcm-and-system-colors.html

Also check out
- https://hashrocket.com/blog/posts/embracing-accessibility-and-consistenc...
- https://dev.to/mpriour/an-introduction-to-high-contrast-accessibility-4im4

So if I understand this correctly, we can overwrite this by simply, ensuring that everywhere we are leveraging System Color names we don't overwrite them with systems colors. I think with:

@media (forced-colors: active) {
  .gin-toolbar,
  .toolbar-menu-administration {
    background-color: Canvas;
    color: CanvasText;
    border-color: ButtonText;
  }

  a,
  .link {
    color: LinkText;
    text-decoration: underline;
  }

  .button,
  input[type="submit"],
  .form-submit {
    background-color: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }

  .form-item input,
  .form-item textarea,
  .form-item select {
    background-color: Field;
    color: FieldText;
    border: 1px solid GrayText;
  }

  .focus-ring,
  :focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  /* Avoid hidden text in HC mode */
  .visually-hidden {
    position: static !important;
    clip: auto !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
  }
}

I don't think we need to protect the entire system colors, just those we are using.