.dark, .dark-theme {
  --violet-1: #14121f;
  --violet-2: #1b1525;
  --violet-3: #291f43;
  --violet-4: #33255b;
  --violet-5: #3c2e69;
  --violet-6: #473876;
  --violet-7: #56468b;
  --violet-8: #6958ad;
  --violet-9: #6e56cf;
  --violet-10: #7d66d9;
  --violet-11: #baa7ff;
  --violet-12: #e2ddfe;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --violet-1: color(display-p3 0.077 0.071 0.118);
      --violet-2: color(display-p3 0.101 0.084 0.141);
      --violet-3: color(display-p3 0.154 0.123 0.256);
      --violet-4: color(display-p3 0.191 0.148 0.345);
      --violet-5: color(display-p3 0.226 0.182 0.396);
      --violet-6: color(display-p3 0.269 0.223 0.449);
      --violet-7: color(display-p3 0.326 0.277 0.53);
      --violet-8: color(display-p3 0.399 0.346 0.656);
      --violet-9: color(display-p3 0.417 0.341 0.784);
      --violet-10: color(display-p3 0.477 0.402 0.823);
      --violet-11: color(display-p3 0.72 0.65 1);
      --violet-12: color(display-p3 0.883 0.867 0.986);
    }
  }
}