I have seen a site styling

html
{
  --r-globalnav-height: 44px;
}

what does this mean?

>Solution :

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