:root, .light, .light-theme {
  --sand-1: #fdfdfc;
  --sand-2: #f9f9f8;
  --sand-3: #f1f0ef;
  --sand-4: #e9e8e6;
  --sand-5: #e2e1de;
  --sand-6: #dad9d6;
  --sand-7: #cfceca;
  --sand-8: #bcbbb5;
  --sand-9: #8d8d86;
  --sand-10: #82827c;
  --sand-11: #63635e;
  --sand-12: #21201c;
  --sand-a1: #55550003;
  --sand-a2: #25250007;
  --sand-a3: #20100010;
  --sand-a4: #1f150019;
  --sand-a5: #1f180021;
  --sand-a6: #19130029;
  --sand-a7: #19140035;
  --sand-a8: #1915014a;
  --sand-a9: #0f0f0079;
  --sand-a10: #0c0c0083;
  --sand-a11: #080800a1;
  --sand-a12: #060500e3;
  --sand-surface: #fffc;
  --sand-indicator: var(--sand-9);
  --sand-track: var(--sand-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --sand-1: color(display-p3 .992 .992 .989);
      --sand-2: color(display-p3 .977 .977 .973);
      --sand-3: color(display-p3 .943 .942 .936);
      --sand-4: color(display-p3 .913 .912 .903);
      --sand-5: color(display-p3 .885 .883 .873);
      --sand-6: color(display-p3 .854 .852 .839);
      --sand-7: color(display-p3 .813 .81 .794);
      --sand-8: color(display-p3 .738 .734 .713);
      --sand-9: color(display-p3 .553 .553 .528);
      --sand-10: color(display-p3 .511 .511 .488);
      --sand-11: color(display-p3 .388 .388 .37);
      --sand-12: color(display-p3 .129 .126 .111);
      --sand-a1: color(display-p3 .349 .349 .024 / .012);
      --sand-a2: color(display-p3 .161 .161 .024 / .028);
      --sand-a3: color(display-p3 .067 .067 .008 / .063);
      --sand-a4: color(display-p3 .129 .129 .012 / .099);
      --sand-a5: color(display-p3 .098 .067 .008 / .126);
      --sand-a6: color(display-p3 .102 .075 .004 / .161);
      --sand-a7: color(display-p3 .098 .098 .004 / .208);
      --sand-a8: color(display-p3 .086 .075 .004 / .287);
      --sand-a9: color(display-p3 .051 .051 .004 / .471);
      --sand-a10: color(display-p3 .047 .047 0 / .514);
      --sand-a11: color(display-p3 .031 .031 0 / .632);
      --sand-a12: color(display-p3 .024 .02 0 / .891);
      --sand-surface: color(display-p3 1 1 1 / .8);
    }
  }
}

.dark, .dark-theme {
  --sand-1: #111110;
  --sand-2: #191918;
  --sand-3: #222221;
  --sand-4: #2a2a28;
  --sand-5: #31312e;
  --sand-6: #3b3a37;
  --sand-7: #494844;
  --sand-8: #62605b;
  --sand-9: #6f6d66;
  --sand-10: #7c7b74;
  --sand-11: #b5b3ad;
  --sand-12: #eeeeec;
  --sand-a1: #0000;
  --sand-a2: #f4f4f309;
  --sand-a3: #f6f6f513;
  --sand-a4: #fefef31b;
  --sand-a5: #fbfbeb23;
  --sand-a6: #fffaed2d;
  --sand-a7: #fffbed3c;
  --sand-a8: #fff9eb57;
  --sand-a9: #fffae965;
  --sand-a10: #fffdee73;
  --sand-a11: #fffcf4b0;
  --sand-a12: #fffffded;
  --sand-surface: #21212080;
  --sand-indicator: var(--sand-9);
  --sand-track: var(--sand-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --sand-1: color(display-p3 .067 .067 .063);
      --sand-2: color(display-p3 .098 .098 .094);
      --sand-3: color(display-p3 .135 .135 .129);
      --sand-4: color(display-p3 .164 .163 .156);
      --sand-5: color(display-p3 .193 .192 .183);
      --sand-6: color(display-p3 .23 .229 .217);
      --sand-7: color(display-p3 .285 .282 .267);
      --sand-8: color(display-p3 .384 .378 .357);
      --sand-9: color(display-p3 .434 .428 .403);
      --sand-10: color(display-p3 .487 .481 .456);
      --sand-11: color(display-p3 .707 .703 .68);
      --sand-12: color(display-p3 .933 .933 .926);
      --sand-a1: color(display-p3 0 0 0 / 0);
      --sand-a2: color(display-p3 .992 .992 .988 / .034);
      --sand-a3: color(display-p3 .996 .996 .992 / .072);
      --sand-a4: color(display-p3 .992 .992 .953 / .106);
      --sand-a5: color(display-p3 1 1 .965 / .135);
      --sand-a6: color(display-p3 1 .976 .929 / .177);
      --sand-a7: color(display-p3 1 .984 .929 / .236);
      --sand-a8: color(display-p3 1 .976 .925 / .341);
      --sand-a9: color(display-p3 1 .98 .925 / .395);
      --sand-a10: color(display-p3 1 .992 .933 / .45);
      --sand-a11: color(display-p3 1 .996 .961 / .685);
      --sand-a12: color(display-p3 1 1 .992 / .929);
      --sand-surface: color(display-p3 .1255 .1255 .1255 / .5);
    }
  }
}

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