CSS变量引用异常：--var2未正确继承深色模式下--var1的值

我期望文本显示为蓝色，但实际显示为红色，代码如下：

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      :root,
      .light {
        --var1: red;
      }
      .dark {
        --var1: blue;
      }
      /* @media (prefers-color-scheme: dark) {
        :root {
          --var1: blue;
        }
      } */

      :root {
        --var2: var(--var1);
      }

      body {
        color: var(--var2);
      }
    </style>
  </head>
  <body class="dark">
    <p>red = light, blue = dark</p>
  </body>
</html>

我在macOS的Chrome、Safari、Firefox及iOS Safari中测试，结果均为红色。在Chrome和Safari DevTools中，悬浮查看--var2: var(--var1)时计算值为红色，但点击该--var1会跳转到.dark中的--var1: blue;，且:root, .light中的--var1: red已被划掉，显示被.dark覆盖。

取消注释@media (prefers-color-scheme: dark)后，我测试了不同prefers-color-scheme与body类的组合，部分场景不符合预期（如下表*标注项）：

我已找到两种临时解决方法：

• 将color: var(--var2)改为color: var(--var1)
  • 但希望保留变量分层（--var1对应--slate-12，--var2对应--foreground-color）
• 添加.dark { --var2: var(--var1); }
  • 但不想在:root定义后重复编写

请问是否有其他解决方法？为何DevTools对--var1的实际引用定义显示矛盾？

补充背景 #

我正在使用Radix Colors，其CSS如下：

:root, .light, .light-theme {
  --slate-1: hsl(240, 22.0%, 99.0%);
  --slate-2: hsl(240, 20.0%, 98.0%);
  --slate-3: hsl(239, 13.4%, 95.4%);
  --slate-4: hsl(238, 11.8%, 92.9%);
  --slate-5: hsl(237, 11.1%, 90.5%);
  --slate-6: hsl(236, 10.6%, 87.9%);
  --slate-7: hsl(234, 10.4%, 84.4%);
  --slate-8: hsl(231, 10.2%, 75.1%);
  --slate-9: hsl(230, 6.0%, 57.0%);
  --slate-10: hsl(227, 5.2%, 51.8%);
  --slate-11: hsl(220, 6.0%, 40.0%);
  --slate-12: hsl(210, 16.0%, 20.0%);
}

.dark, dark-theme {
  --slate-1: hsl(240, 5.0%, 9.8%);
  --slate-2: hsl(240, 6.9%, 11.4%);
  --slate-3: hsl(235, 6.8%, 17.1%);
  --slate-4: hsl(233, 6.8%, 19.9%);
  --slate-5: hsl(231, 6.8%, 21.7%);
  --slate-6: hsl(230, 6.9%, 23.8%);
  --slate-7: hsl(228, 7.0%, 27.0%);
  --slate-8: hsl(225, 7.2%, 32.5%);
  --slate-9: hsl(220, 6.0%, 44.0%);
  --slate-10: hsl(218, 5.3%, 51.5%);
  --slate-11: hsl(220, 7.0%, 70.0%);
  --slate-12: hsl(220, 10.0%, 90.0%);
}

我希望通过:root { --foreground-color: var(--slate-12); }统一管理前景色，而非直接使用body { color: var(--slate-12); }。

内容的提问来源于stack exchange，提问作者cherryblossom