Here is WebKit's proposal for a new type of property and variable.

User Agent Properties

This specification defines an open-ended set of properties called User Agent properties, which, among other things, are used to define the substitution
value of constant() functions.

Name: (various)
Value: <declaration-value>
Initial: (nothing, see prose)
Applies to: all elements
Inherited: yes
Percentages: n/a
Media: all
Computed value: specified value with variables substituted (but see prose for "invalid variables")
Canonical order: per grammar
Animatable: no

A User Agent property is not specified in a style sheet. User Agent properties
instead define variables, referenced with the constant() notation.
For example, a page that wants to use the user's requested font sizing, and page
background:

:root {
  font-size: constant(user-font-size);
}

body {
  background-color: constant(user-background-color);
}

Unlike other CSS properties, User Agent property names are case-sensitive.

User Agent properties are not reset by the all property. If a style rule attempts to
define a value for a User Agent property, it is ignored.

Using Cascading User Agent Variables: the 'constant()' notation

The value of a User Agent property can be substituted into the value of another
property with the constant() function. The syntax of constant() is:

constant() = constant( <user-agent-property-name> [, <declaration-value> ]? )

The constant() function is used in the same manner, and follows the same rules,
as the var() function.

Defined User Agent Variables

• user-font-size: User's requested font size
• user-background-color: User's requested background color
• user-foreground-color: User's requested foreground color
• safe-area-inset-top: Inset, as a <length> from the top of the viewport to the title-safe content area.
• safe-area-inset-right: Inset, as a <length> from the right of the viewport to the title-safe content area.
• safe-area-inset-left: Inset, as a <length> from the left of the viewport to the title-safe content area.
• safe-area-inset-bottom: Inset, as a <length> from the bottom of the viewport to the title-safe content area.