[data-theme="dark"] {
  --slate-1: #111113;
  --slate-2: #18191b;
  --slate-3: #212225;
  --slate-4: #272a2d;
  --slate-5: #2e3135;
  --slate-6: #363a3f;
  --slate-7: #43484e;
  --slate-8: #5a6169;
  --slate-9: #696e77;
  --slate-10: #777b84;
  --slate-11: #b0b4ba;
  --slate-12: #edeef0;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    [data-theme="dark"] {
      --slate-1: color(display-p3 0.067 0.067 0.074);
      --slate-2: color(display-p3 0.095 0.098 0.105);
      --slate-3: color(display-p3 0.13 0.135 0.145);
      --slate-4: color(display-p3 0.156 0.163 0.176);
      --slate-5: color(display-p3 0.183 0.191 0.206);
      --slate-6: color(display-p3 0.215 0.226 0.244);
      --slate-7: color(display-p3 0.265 0.28 0.302);
      --slate-8: color(display-p3 0.357 0.381 0.409);
      --slate-9: color(display-p3 0.415 0.431 0.463);
      --slate-10: color(display-p3 0.469 0.483 0.514);
      --slate-11: color(display-p3 0.692 0.704 0.728);
      --slate-12: color(display-p3 0.93 0.933 0.94);
    }
  }
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --slate-1: #111113;
    --slate-2: #18191b;
    --slate-3: #212225;
    --slate-4: #272a2d;
    --slate-5: #2e3135;
    --slate-6: #363a3f;
    --slate-7: #43484e;
    --slate-8: #5a6169;
    --slate-9: #696e77;
    --slate-10: #777b84;
    --slate-11: #b0b4ba;
    --slate-12: #edeef0;
  }
  
  @supports (color: color(display-p3 1 1 1)) {
    @media (color-gamut: p3) {
      :root:not([data-theme="light"]) {
        --slate-1: color(display-p3 0.067 0.067 0.074);
        --slate-2: color(display-p3 0.095 0.098 0.105);
        --slate-3: color(display-p3 0.13 0.135 0.145);
        --slate-4: color(display-p3 0.156 0.163 0.176);
        --slate-5: color(display-p3 0.183 0.191 0.206);
        --slate-6: color(display-p3 0.215 0.226 0.244);
        --slate-7: color(display-p3 0.265 0.28 0.302);
        --slate-8: color(display-p3 0.357 0.381 0.409);
        --slate-9: color(display-p3 0.415 0.431 0.463);
        --slate-10: color(display-p3 0.469 0.483 0.514);
        --slate-11: color(display-p3 0.692 0.704 0.728);
        --slate-12: color(display-p3 0.93 0.933 0.94);
      }
    }
  }
}