以下のようにブレイクポイントをCSS変数で定義すると正しく動きません。
どこがまずいのかご指摘いただけないでしょうか？

:root {
  --bp: 600px;
}

/* large screen */
@media (min-width: var(--bp)) {

  body {
    background: pink;
  }
}