Custom properties are ordinary properties, so they can be declared on any element, are resolved with the normal inheritance and cascade rules, can be made conditional with @media and other conditional rules, can be used in HTML’s style attribute, can be read or set using the CSSOM, etc.

from W3C Working Draft: CSS Custom Properties for Cascading Variables Module Level 1

:root {
    --width: 100px;
}

.box {
    width: var(--width);
}

@media (max-width: 1000px) {
    :root {
        --width: 200px;
    }
}

I expect or should result in:

.box {
    width: 100px;
}

@media (max-width: 1000px) {
    .box {
        width: 200px;
    }
}

Is this a correct understanding?

Playing around in the cssnext playground, I am getting different results.

I understand this could get a little tricky in a situation like described here.