Incorrect error report of Custom Property

If you have a nesting Custom Property (aka. CSS Variable, or var for 
short) the validator will refuse to accept it as valid value type. We 
can reproduce it with this code:

:root
{
--filter-shadow: drop-shadow(var(--shadow-size) var(--c-shadow));
}
@media(prefers-color-scheme: light)
{
:root:not([data-theme])
{
--shadow-size: 0.3rem.7rem;
--c-shadow: #0000008f
}
}
header
{
-webkit-filter: var(--filter-shadow);
filter: var(--filter-shadow)
}

Above is my code that cause the CSS validator fail. I understand that 
due to var nature, it is impossible to make a right judgement. However, 
labeling it as error is not good notice either as it may foreshadowing 
other (could be) more important error.

Since var will play a big part in CSS later on, I suggest to have it own 
section for warning and instruction rather then merging them with other 
notice. It can help developers easily read report and decide to concern 
or ignore the var warning report.

-- 
Send from Thunderbird <https://www.thunderbird.net>