.dark, .dark-theme {
  --mauve-1: #121113;
  --mauve-2: #1a191b;
  --mauve-3: #232225;
  --mauve-4: #2b292d;
  --mauve-5: #323035;
  --mauve-6: #3c393f;
  --mauve-7: #49474e;
  --mauve-8: #625f69;
  --mauve-9: #6f6d78;
  --mauve-10: #7c7a85;
  --mauve-11: #b5b2bc;
  --mauve-12: #eeeef0;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --mauve-1: color(display-p3 0.07 0.067 0.074);
      --mauve-2: color(display-p3 0.101 0.098 0.105);
      --mauve-3: color(display-p3 0.138 0.134 0.144);
      --mauve-4: color(display-p3 0.167 0.161 0.175);
      --mauve-5: color(display-p3 0.196 0.189 0.206);
      --mauve-6: color(display-p3 0.232 0.225 0.245);
      --mauve-7: color(display-p3 0.286 0.277 0.302);
      --mauve-8: color(display-p3 0.383 0.373 0.408);
      --mauve-9: color(display-p3 0.434 0.428 0.467);
      --mauve-10: color(display-p3 0.487 0.48 0.519);
      --mauve-11: color(display-p3 0.707 0.7 0.735);
      --mauve-12: color(display-p3 0.933 0.933 0.94);
    }
  }
}