:root, .light, .light-theme {
  --purple-1: #fefcfe;
  --purple-2: #fbf7fe;
  --purple-3: #f7edfe;
  --purple-4: #f2e2fc;
  --purple-5: #ead5f9;
  --purple-6: #e0c4f4;
  --purple-7: #d1afec;
  --purple-8: #be93e4;
  --purple-9: #8e4ec6;
  --purple-10: #8347b9;
  --purple-11: #8145b5;
  --purple-12: #402060;
  --purple-a1: #aa00aa03;
  --purple-a2: #8000e008;
  --purple-a3: #8e00f112;
  --purple-a4: #8d00e51d;
  --purple-a5: #8000db2a;
  --purple-a6: #7a01d03b;
  --purple-a7: #6d00c350;
  --purple-a8: #6600c06c;
  --purple-a9: #5c00adb1;
  --purple-a10: #53009eb8;
  --purple-a11: #52009aba;
  --purple-a12: #250049df;
  --purple-surface: #faf5fecc;
  --purple-indicator: var(--purple-9);
  --purple-track: var(--purple-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --purple-1: color(display-p3 .995 .988 .996);
      --purple-2: color(display-p3 .983 .971 .993);
      --purple-3: color(display-p3 .963 .931 .989);
      --purple-4: color(display-p3 .937 .888 .981);
      --purple-5: color(display-p3 .904 .837 .966);
      --purple-6: color(display-p3 .86 .774 .942);
      --purple-7: color(display-p3 .799 .69 .91);
      --purple-8: color(display-p3 .719 .583 .874);
      --purple-9: color(display-p3 .523 .318 .751);
      --purple-10: color(display-p3 .483 .289 .7);
      --purple-11: color(display-p3 .473 .281 .687);
      --purple-12: color(display-p3 .234 .132 .363);
      --purple-a1: color(display-p3 .675 .024 .675 / .012);
      --purple-a2: color(display-p3 .443 .024 .722 / .028);
      --purple-a3: color(display-p3 .506 .008 .835 / .071);
      --purple-a4: color(display-p3 .451 .004 .831 / .114);
      --purple-a5: color(display-p3 .431 .004 .788 / .165);
      --purple-a6: color(display-p3 .384 .004 .745 / .228);
      --purple-a7: color(display-p3 .357 .004 .71 / .31);
      --purple-a8: color(display-p3 .322 .004 .702 / .416);
      --purple-a9: color(display-p3 .298 0 .639 / .683);
      --purple-a10: color(display-p3 .271 0 .58 / .71);
      --purple-a11: color(display-p3 .473 .281 .687);
      --purple-a12: color(display-p3 .234 .132 .363);
      --purple-surface: color(display-p3 .9804 .9647 .9922 / .8);
    }
  }
}

.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;
  --purple-a1: #b412f90b;
  --purple-a2: #b744f714;
  --purple-a3: #c150ff2d;
  --purple-a4: #bb53fd42;
  --purple-a5: #be5cfd51;
  --purple-a6: #c16dfd61;
  --purple-a7: #c378fd7a;
  --purple-a8: #c47effa4;
  --purple-a9: #b661ffc2;
  --purple-a10: #bc6fffcd;
  --purple-a11: #d19dff;
  --purple-a12: #f1ddfffa;
  --purple-surface: #2b173580;
  --purple-indicator: var(--purple-9);
  --purple-track: var(--purple-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --purple-1: color(display-p3 .09 .068 .103);
      --purple-2: color(display-p3 .113 .082 .134);
      --purple-3: color(display-p3 .175 .112 .224);
      --purple-4: color(display-p3 .224 .137 .297);
      --purple-5: color(display-p3 .264 .167 .349);
      --purple-6: color(display-p3 .311 .208 .406);
      --purple-7: color(display-p3 .381 .266 .496);
      --purple-8: color(display-p3 .49 .349 .649);
      --purple-9: color(display-p3 .523 .318 .751);
      --purple-10: color(display-p3 .57 .373 .791);
      --purple-11: color(display-p3 .8 .62 1);
      --purple-12: color(display-p3 .913 .854 .971);
      --purple-a1: color(display-p3 .686 .071 .996 / .038);
      --purple-a2: color(display-p3 .722 .286 .996 / .072);
      --purple-a3: color(display-p3 .718 .349 .996 / .169);
      --purple-a4: color(display-p3 .702 .353 1 / .248);
      --purple-a5: color(display-p3 .718 .404 1 / .303);
      --purple-a6: color(display-p3 .733 .455 1 / .366);
      --purple-a7: color(display-p3 .753 .506 1 / .458);
      --purple-a8: color(display-p3 .749 .522 1 / .622);
      --purple-a9: color(display-p3 .686 .408 1 / .736);
      --purple-a10: color(display-p3 .71 .459 1 / .778);
      --purple-a11: color(display-p3 .8 .62 1);
      --purple-a12: color(display-p3 .913 .854 .971);
      --purple-surface: color(display-p3 .149 .0941 .1961 / .5);
    }
  }
}

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