Refactor Claro's shortcut stylesheet

Problem/Motivation

This is a child of #3324398: [META] Update Claro CSS with new coding standards and part of #3254529: [PLAN] Drupal CSS Modernization Initiative.

Steps to reproduce

The stylesheet at https://git.drupalcode.org/project/drupal/-/blob/10.0.x/core/themes/clar... needs to be refactored to make use of modern CSS and Drupal core's PostCSS tooling.

@todo: Add clear testing instructions to test this manually on the UI.

Proposed resolution

• Use CSS Logical Properties where appropriate.
• Use CSS nesting where appropriate.
• Use existing variables (variables.pcss.css) where appropriate. Follow the proposed Drupal CSS coding standards to name the variables.
• Add a comment when there's a value where there is not a variable like font-size: 1.23rem; /* @todo One off value. */
• When possible, set variables at the root of the component and then map them to global theme variables:
  

  .entity-meta {
            --entity-meta-title-font-size: var(--font-size-h5);
  
            ... more style
          }
  
          .entity-meta__title {
            font-size: var(--entity-meta-title-font-size);
          }

Out of scope

• Changing CSS classes
• Drupal 9 patches

User interface changes

None. There should be no visual differences.
Please post before/after screenshots and make sure they look the same.