Promote Global Styles to CSS Variable Panel

[Henzxon]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro )

What problem is your feature request going to solve? Please describe.

It's frustrating how global styles variable are not named properly.

The only variables with proper names are:
--e-global-color-primary: #;
--e-global-color-secondary: #
--e-global-color-text: #;
--e-global-color-accent: #;

CSS variables are meant to be readable and can be referenced immediately.

The rest are just random

Describe the solution you'd like

It would be nice if a dedicated variables panel can store not only colors and font but also number values which can be used for the following:

1. Border radius
2. Padding
3. Margin
4. Line Height
5. Column and Row Gap
6. Custom Properties
7. Etc.

Then enable linking to all possible number fields on all widgets for a true flexible design and web designing process.

This would make the a cohesive design with less inline styling and custom overrides because clients often breaks something on the site and they always and always unintentionally copy styles to another element with unique properties and variables.

Describe alternatives you've considered

Right now, CSS Classes but only certain elements.
Writing "!important" is not scalable in a long run.

Additional context