正解は--main-color: #333で定義しvar(--main-color)で参照することです。:rootで定義するとグローバルに使用でき、各要素で上書きも可能です。var()の第2引数でフォールバック値を指定できます。