Use CSS variable for toolbar tray height instead of inline style body padding

Problem/Motivation

The Drupal admin toolbar currently updates the body and html padding dynamically via JS to prevent its content from being overlapped:

$('body')[0].style.paddingTop = `${this.model.get('height')}px`;
$('html')[0].style.scrollPaddingTop = `${this.model.get('height')}px`;

This works but has limitations:
• Hardcoded JS values are not easily reusable in CSS for other components.
• Themes cannot reference the toolbar height in their styles.

Proposed resolution

Store the toolbar height in a CSS variable instead of applying the padding directly. For example:
document.documentElement.style.setProperty('--toolbar-height', `${this.model.get('height')}px`);

Update CSS to use the variable:

body.toolbar-tray-open {
  padding-top: var(--toolbar-height);
}

html {
  scroll-padding-top: var(--toolbar-height);
}

Benefits

- Provides a reusable value for other components (e.g., sticky headers, modals).
- Makes responsive adjustments easier without modifying JS.
- Separates measurement (JS) from styling (CSS), improving maintainability.
- Future-proof: any toolbar height changes automatically propagate to layouts using the variable.