I have seen a site styling
html
{
--r-globalnav-height: 44px;
}
what does this mean?
It is CSS variable. It can contain specific values to be used multiple times in a style sheets.
You can then use the variable from your example as follows:
nav {
height: var(--r-globalnav-height); /* height: 44px */
}
You can read more at Using CSS custom properties (variables) - MDN