Three different parse errors related to CSS variables

[tmb-github]

/*
Three different cases where the validator cannot parse CSS variables & reports parse errors:
*/

.aaa {
  padding-top: calc(var(--aspect-ratio-h, 1) / var(--aspect-ratio-w, 1) * 100%);
}

.bbb {
  background: linear-gradient(var(--cta-orange-light), var(--cta-orange-dark));
}

.ccc {
  margin: calc(1em + var(--header-height)) auto 3em auto;
}

/*
It reports back the following:
2   .aaa  Value Error : padding-top Parse Error ) * 100%)
6   .bbb  Value Error : background Parse Error )
10  .ccc  Value Error : margin Parse Error )) auto 3em auto
*/

[tmb-github]

@ylafon Additional info: It fails even if the variables are defined, and it mistakes each variable for an unknown vendor extension:

:root {
  --aspect-ratio-h: 2;
  --aspect-ratio-w: 3;
  --cta-orange-dark: #eeb935;
  --cta-orange-light: #f4d589;
  --header-height: 60px;
}

.aaa {
  padding-top: calc(var(--aspect-ratio-h, 1) / var(--aspect-ratio-w, 1) * 100%);
}

.bbb {
  background: linear-gradient(var(--cta-orange-light), var(--cta-orange-dark));
}

.ccc {
  margin: calc(1em + var(--header-height)) auto 3em auto;
}

[ylafon]

Fixed by #316