[feat] CSS: env() variables for titlebars/etc

[jamiebuilds-signal]

Describe the problem

From the Tauri TitleBarStyle docs:

• "Overlay": Shows the title bar as a transparent overlay over the window's content.

Keep in mind:

The height of the title bar is different on different OS versions, which can lead to window the controls and title not being where you don't expect.

There is a CSS feature for this purpose env() and it would be very convenient if Tauri provided this for each platform.

Describe the solution you'd like

The env() function works much like CSS variables, except provided by the user agent:

padding-top: env(titlebar-area-height, 32px);

This is the complete set of standard env() variables today:

/* For notches/rounded-corners/etc */
safe-area-inset-{top,bottom,left,right}

/* For window titlebars, such as when overlay */
titlebar-area-{x,y,width,height}

/* For on-screen keyboards */
keyboard-inset-{top,bottom,left,right,width,height}

Alternatives considered

No response

Additional context

No response

[alexfgreen]

we also need this, React native solves this with custom component, tauri should probably do the same? this is a critical issue for mobile applications built in tauri