Define how and where to use REM units

There was nothing to review code wise.
Could this one be closed out?

We should not use the on certain pseudo selectors e.g.

.toolbar .toolbar-icon::before {

see https://www.drupal.org/project/drupal/issues/3332943 ✨ Claro - fix issues with icon sizes Needs work

I would also suggest avoiding using them on the root/html as the base font sizing can be adjusted there with media queries

e.g.

html {
    font-size: 14px;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@media only screen and (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media only screen and (min-width: 1200px) {
    html {
        font-size: 18px;
    }
}

According to the W3C spec the the key thing to note about rem units is::

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

https://www.sitepoint.com/understanding-and-using-rem-units-in-css/