.dark, .dark-theme {
  --purple-1: #18111b;
  --purple-2: #1e1523;
  --purple-3: #301c3b;
  --purple-4: #3d224e;
  --purple-5: #48295c;
  --purple-6: #54346b;
  --purple-7: #664282;
  --purple-8: #8457aa;
  --purple-9: #8e4ec6;
  --purple-10: #9a5cd0;
  --purple-11: #d19dff;
  --purple-12: #ecd9fa;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --purple-1: color(display-p3 0.09 0.068 0.103);
      --purple-2: color(display-p3 0.113 0.082 0.134);
      --purple-3: color(display-p3 0.175 0.112 0.224);
      --purple-4: color(display-p3 0.224 0.137 0.297);
      --purple-5: color(display-p3 0.264 0.167 0.349);
      --purple-6: color(display-p3 0.311 0.208 0.406);
      --purple-7: color(display-p3 0.381 0.266 0.496);
      --purple-8: color(display-p3 0.49 0.349 0.649);
      --purple-9: color(display-p3 0.523 0.318 0.751);
      --purple-10: color(display-p3 0.57 0.373 0.791);
      --purple-11: color(display-p3 0.8 0.62 1);
      --purple-12: color(display-p3 0.913 0.854 0.971);
    }
  }
}