What do these double-dash-prefixed CSS properties do? [duplicate]

A double leading dash is used for defining custom properties. For more information, check out this W3C Spec page.

Example from W3C:

:root {
  --main-color: #05c;
  --accent-color: #056;
}

#foo h1 {
  color: var(--main-color);
}