:root, .light, .light-theme {
  --mauve-1: #fdfcfd;
  --mauve-2: #faf9fb;
  --mauve-3: #f2eff3;
  --mauve-4: #eae7ec;
  --mauve-5: #e3dfe6;
  --mauve-6: #dbd8e0;
  --mauve-7: #d0cdd7;
  --mauve-8: #bcbac7;
  --mauve-9: #8e8c99;
  --mauve-10: #84828e;
  --mauve-11: #65636d;
  --mauve-12: #211f26;
  --mauve-a1: #55005503;
  --mauve-a2: #2b005506;
  --mauve-a3: #30004010;
  --mauve-a4: #20003618;
  --mauve-a5: #20003820;
  --mauve-a6: #14003527;
  --mauve-a7: #10003332;
  --mauve-a8: #08003145;
  --mauve-a9: #05001d73;
  --mauve-a10: #0500197d;
  --mauve-a11: #0400119c;
  --mauve-a12: #020008e0;
  --mauve-surface: #fffc;
  --mauve-indicator: var(--mauve-9);
  --mauve-track: var(--mauve-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --mauve-1: color(display-p3 .991 .988 .992);
      --mauve-2: color(display-p3 .98 .976 .984);
      --mauve-3: color(display-p3 .946 .938 .952);
      --mauve-4: color(display-p3 .915 .906 .925);
      --mauve-5: color(display-p3 .886 .876 .901);
      --mauve-6: color(display-p3 .856 .846 .875);
      --mauve-7: color(display-p3 .814 .804 .84);
      --mauve-8: color(display-p3 .735 .728 .777);
      --mauve-9: color(display-p3 .555 .549 .596);
      --mauve-10: color(display-p3 .514 .508 .552);
      --mauve-11: color(display-p3 .395 .388 .424);
      --mauve-12: color(display-p3 .128 .122 .147);
      --mauve-a1: color(display-p3 .349 .024 .349 / .012);
      --mauve-a2: color(display-p3 .184 .024 .349 / .024);
      --mauve-a3: color(display-p3 .129 .008 .255 / .063);
      --mauve-a4: color(display-p3 .094 .012 .216 / .095);
      --mauve-a5: color(display-p3 .098 .008 .224 / .126);
      --mauve-a6: color(display-p3 .055 .004 .18 / .153);
      --mauve-a7: color(display-p3 .067 .008 .184 / .197);
      --mauve-a8: color(display-p3 .02 .004 .176 / .271);
      --mauve-a9: color(display-p3 .02 .004 .106 / .451);
      --mauve-a10: color(display-p3 .012 .004 .09 / .491);
      --mauve-a11: color(display-p3 .016 0 .059 / .612);
      --mauve-a12: color(display-p3 .008 0 .027 / .879);
      --mauve-surface: color(display-p3 1 1 1 / .8);
    }
  }
}

.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;
  --mauve-a1: #0000;
  --mauve-a2: #f5f4f609;
  --mauve-a3: #ebeaf814;
  --mauve-a4: #eee5f81d;
  --mauve-a5: #efe6fe25;
  --mauve-a6: #f1e6fd30;
  --mauve-a7: #eee9ff40;
  --mauve-a8: #eee7ff5d;
  --mauve-a9: #eae6fd6e;
  --mauve-a10: #ece9fd7c;
  --mauve-a11: #f5f1ffb7;
  --mauve-a12: #fdfdffef;
  --mauve-surface: #22212380;
  --mauve-indicator: var(--mauve-9);
  --mauve-track: var(--mauve-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --mauve-1: color(display-p3 .07 .067 .074);
      --mauve-2: color(display-p3 .101 .098 .105);
      --mauve-3: color(display-p3 .138 .134 .144);
      --mauve-4: color(display-p3 .167 .161 .175);
      --mauve-5: color(display-p3 .196 .189 .206);
      --mauve-6: color(display-p3 .232 .225 .245);
      --mauve-7: color(display-p3 .286 .277 .302);
      --mauve-8: color(display-p3 .383 .373 .408);
      --mauve-9: color(display-p3 .434 .428 .467);
      --mauve-10: color(display-p3 .487 .48 .519);
      --mauve-11: color(display-p3 .707 .7 .735);
      --mauve-12: color(display-p3 .933 .933 .94);
      --mauve-a1: color(display-p3 0 0 0 / 0);
      --mauve-a2: color(display-p3 .996 .992 1 / .034);
      --mauve-a3: color(display-p3 .937 .933 .992 / .077);
      --mauve-a4: color(display-p3 .957 .918 .996 / .111);
      --mauve-a5: color(display-p3 .937 .906 .996 / .145);
      --mauve-a6: color(display-p3 .953 .925 .996 / .183);
      --mauve-a7: color(display-p3 .945 .929 1 / .246);
      --mauve-a8: color(display-p3 .937 .918 1 / .361);
      --mauve-a9: color(display-p3 .933 .918 1 / .424);
      --mauve-a10: color(display-p3 .941 .925 1 / .479);
      --mauve-a11: color(display-p3 .965 .961 1 / .712);
      --mauve-a12: color(display-p3 .992 .992 1 / .937);
      --mauve-surface: color(display-p3 .1333 .1255 .1333 / .5);
    }
  }
}

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