:root, .light, .light-theme {
  --gray-1: #fcfcfc;
  --gray-2: #f9f9f9;
  --gray-3: #f0f0f0;
  --gray-4: #e8e8e8;
  --gray-5: #e0e0e0;
  --gray-6: #d9d9d9;
  --gray-7: #cecece;
  --gray-8: #bbb;
  --gray-9: #8d8d8d;
  --gray-10: #838383;
  --gray-11: #646464;
  --gray-12: #202020;
  --gray-a1: #00000003;
  --gray-a2: #00000006;
  --gray-a3: #0000000f;
  --gray-a4: #00000017;
  --gray-a5: #0000001f;
  --gray-a6: #00000026;
  --gray-a7: #00000031;
  --gray-a8: #0004;
  --gray-a9: #00000072;
  --gray-a10: #0000007c;
  --gray-a11: #0000009b;
  --gray-a12: #000000df;
  --gray-surface: #fffc;
  --gray-indicator: var(--gray-9);
  --gray-track: var(--gray-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --gray-1: color(display-p3 .988 .988 .988);
      --gray-2: color(display-p3 .975 .975 .975);
      --gray-3: color(display-p3 .939 .939 .939);
      --gray-4: color(display-p3 .908 .908 .908);
      --gray-5: color(display-p3 .88 .88 .88);
      --gray-6: color(display-p3 .849 .849 .849);
      --gray-7: color(display-p3 .807 .807 .807);
      --gray-8: color(display-p3 .732 .732 .732);
      --gray-9: color(display-p3 .553 .553 .553);
      --gray-10: color(display-p3 .512 .512 .512);
      --gray-11: color(display-p3 .392 .392 .392);
      --gray-12: color(display-p3 .125 .125 .125);
      --gray-a1: color(display-p3 0 0 0 / .012);
      --gray-a2: color(display-p3 0 0 0 / .024);
      --gray-a3: color(display-p3 0 0 0 / .063);
      --gray-a4: color(display-p3 0 0 0 / .09);
      --gray-a5: color(display-p3 0 0 0 / .122);
      --gray-a6: color(display-p3 0 0 0 / .153);
      --gray-a7: color(display-p3 0 0 0 / .192);
      --gray-a8: color(display-p3 0 0 0 / .267);
      --gray-a9: color(display-p3 0 0 0 / .447);
      --gray-a10: color(display-p3 0 0 0 / .486);
      --gray-a11: color(display-p3 0 0 0 / .608);
      --gray-a12: color(display-p3 0 0 0 / .875);
      --gray-surface: color(display-p3 1 1 1 / .8);
    }
  }
}

.dark, .dark-theme {
  --gray-1: #111;
  --gray-2: #191919;
  --gray-3: #222;
  --gray-4: #2a2a2a;
  --gray-5: #313131;
  --gray-6: #3a3a3a;
  --gray-7: #484848;
  --gray-8: #606060;
  --gray-9: #6e6e6e;
  --gray-10: #7b7b7b;
  --gray-11: #b4b4b4;
  --gray-12: #eee;
  --gray-a1: #0000;
  --gray-a2: #ffffff09;
  --gray-a3: #ffffff12;
  --gray-a4: #ffffff1b;
  --gray-a5: #fff2;
  --gray-a6: #ffffff2c;
  --gray-a7: #ffffff3b;
  --gray-a8: #fff5;
  --gray-a9: #ffffff64;
  --gray-a10: #ffffff72;
  --gray-a11: #ffffffaf;
  --gray-a12: #ffffffed;
  --gray-surface: #21212180;
  --gray-indicator: var(--gray-9);
  --gray-track: var(--gray-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --gray-1: color(display-p3 .067 .067 .067);
      --gray-2: color(display-p3 .098 .098 .098);
      --gray-3: color(display-p3 .135 .135 .135);
      --gray-4: color(display-p3 .163 .163 .163);
      --gray-5: color(display-p3 .192 .192 .192);
      --gray-6: color(display-p3 .228 .228 .228);
      --gray-7: color(display-p3 .283 .283 .283);
      --gray-8: color(display-p3 .375 .375 .375);
      --gray-9: color(display-p3 .431 .431 .431);
      --gray-10: color(display-p3 .484 .484 .484);
      --gray-11: color(display-p3 .706 .706 .706);
      --gray-12: color(display-p3 .933 .933 .933);
      --gray-a1: color(display-p3 0 0 0 / 0);
      --gray-a2: color(display-p3 1 1 1 / .034);
      --gray-a3: color(display-p3 1 1 1 / .071);
      --gray-a4: color(display-p3 1 1 1 / .105);
      --gray-a5: color(display-p3 1 1 1 / .134);
      --gray-a6: color(display-p3 1 1 1 / .172);
      --gray-a7: color(display-p3 1 1 1 / .231);
      --gray-a8: color(display-p3 1 1 1 / .332);
      --gray-a9: color(display-p3 1 1 1 / .391);
      --gray-a10: color(display-p3 1 1 1 / .445);
      --gray-a11: color(display-p3 1 1 1 / .685);
      --gray-a12: color(display-p3 1 1 1 / .929);
      --gray-surface: color(display-p3 .1255 .1255 .1255 / .5);
    }
  }
}

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