:root, .light, .light-theme {
  --violet-1: #fdfcfe;
  --violet-2: #faf8ff;
  --violet-3: #f4f0fe;
  --violet-4: #ebe4ff;
  --violet-5: #e1d9ff;
  --violet-6: #d4cafe;
  --violet-7: #c2b5f5;
  --violet-8: #aa99ec;
  --violet-9: #6e56cf;
  --violet-10: #654dc4;
  --violet-11: #6550b9;
  --violet-12: #2f265f;
  --violet-a1: #5500aa03;
  --violet-a2: #4900ff07;
  --violet-a3: #4400ee0f;
  --violet-a4: #4300ff1b;
  --violet-a5: #3600ff26;
  --violet-a6: #3100fb35;
  --violet-a7: #2d01dd4a;
  --violet-a8: #2b00d066;
  --violet-a9: #2400b7a9;
  --violet-a10: #2300abb2;
  --violet-a11: #1f0099af;
  --violet-a12: #0b0043d9;
  --violet-surface: #f9f6ffcc;
  --violet-indicator: var(--violet-9);
  --violet-track: var(--violet-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --violet-1: color(display-p3 .991 .988 .995);
      --violet-2: color(display-p3 .978 .974 .998);
      --violet-3: color(display-p3 .953 .943 .993);
      --violet-4: color(display-p3 .916 .897 1);
      --violet-5: color(display-p3 .876 .851 1);
      --violet-6: color(display-p3 .825 .793 .981);
      --violet-7: color(display-p3 .752 .712 .943);
      --violet-8: color(display-p3 .654 .602 .902);
      --violet-9: color(display-p3 .417 .341 .784);
      --violet-10: color(display-p3 .381 .306 .741);
      --violet-11: color(display-p3 .383 .317 .702);
      --violet-12: color(display-p3 .179 .15 .359);
      --violet-a1: color(display-p3 .349 .024 .675 / .012);
      --violet-a2: color(display-p3 .161 .024 .863 / .028);
      --violet-a3: color(display-p3 .204 .004 .871 / .059);
      --violet-a4: color(display-p3 .196 .004 1 / .102);
      --violet-a5: color(display-p3 .165 .008 1 / .15);
      --violet-a6: color(display-p3 .153 .004 .906 / .208);
      --violet-a7: color(display-p3 .141 .004 .796 / .287);
      --violet-a8: color(display-p3 .133 .004 .753 / .397);
      --violet-a9: color(display-p3 .114 0 .675 / .659);
      --violet-a10: color(display-p3 .11 0 .627 / .695);
      --violet-a11: color(display-p3 .383 .317 .702);
      --violet-a12: color(display-p3 .179 .15 .359);
      --violet-surface: color(display-p3 .9725 .9647 .9961 / .8);
    }
  }
}

.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;
  --violet-a1: #4422ff0f;
  --violet-a2: #853ff916;
  --violet-a3: #8354fe36;
  --violet-a4: #7d51fd50;
  --violet-a5: #845ffd5f;
  --violet-a6: #8f6cfd6d;
  --violet-a7: #9879ff83;
  --violet-a8: #977dfea8;
  --violet-a9: #8668ffcc;
  --violet-a10: #9176fed7;
  --violet-a11: #baa7ff;
  --violet-a12: #e3defffe;
  --violet-surface: #25193980;
  --violet-indicator: var(--violet-9);
  --violet-track: var(--violet-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --violet-1: color(display-p3 .077 .071 .118);
      --violet-2: color(display-p3 .101 .084 .141);
      --violet-3: color(display-p3 .154 .123 .256);
      --violet-4: color(display-p3 .191 .148 .345);
      --violet-5: color(display-p3 .226 .182 .396);
      --violet-6: color(display-p3 .269 .223 .449);
      --violet-7: color(display-p3 .326 .277 .53);
      --violet-8: color(display-p3 .399 .346 .656);
      --violet-9: color(display-p3 .417 .341 .784);
      --violet-10: color(display-p3 .477 .402 .823);
      --violet-11: color(display-p3 .72 .65 1);
      --violet-12: color(display-p3 .883 .867 .986);
      --violet-a1: color(display-p3 .282 .141 .996 / .055);
      --violet-a2: color(display-p3 .51 .263 1 / .08);
      --violet-a3: color(display-p3 .494 .337 .996 / .202);
      --violet-a4: color(display-p3 .49 .345 1 / .299);
      --violet-a5: color(display-p3 .525 .392 1 / .353);
      --violet-a6: color(display-p3 .569 .455 1 / .408);
      --violet-a7: color(display-p3 .588 .494 1 / .496);
      --violet-a8: color(display-p3 .596 .51 1 / .631);
      --violet-a9: color(display-p3 .522 .424 1 / .769);
      --violet-a10: color(display-p3 .576 .482 1 / .811);
      --violet-a11: color(display-p3 .72 .65 1);
      --violet-a12: color(display-p3 .883 .867 .986);
      --violet-surface: color(display-p3 .1333 .102 .2118 / .5);
    }
  }
}

:root {
  --violet-contrast: white;
}