Refactor Claro's elements stylesheet

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.1.x/core/themes/claro/css/base/elements.pcss.css 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

User interface changes

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