.dark, .dark-theme {
  --sage-1: #101211;
  --sage-2: #171918;
  --sage-3: #202221;
  --sage-4: #272a29;
  --sage-5: #2e3130;
  --sage-6: #373b39;
  --sage-7: #444947;
  --sage-8: #5b625f;
  --sage-9: #63706b;
  --sage-10: #717d79;
  --sage-11: #adb5b2;
  --sage-12: #eceeed;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --sage-1: color(display-p3 0.064 0.07 0.067);
      --sage-2: color(display-p3 0.092 0.098 0.094);
      --sage-3: color(display-p3 0.128 0.135 0.131);
      --sage-4: color(display-p3 0.155 0.164 0.159);
      --sage-5: color(display-p3 0.183 0.193 0.188);
      --sage-6: color(display-p3 0.218 0.23 0.224);
      --sage-7: color(display-p3 0.269 0.285 0.277);
      --sage-8: color(display-p3 0.362 0.382 0.373);
      --sage-9: color(display-p3 0.398 0.438 0.421);
      --sage-10: color(display-p3 0.453 0.49 0.474);
      --sage-11: color(display-p3 0.685 0.709 0.697);
      --sage-12: color(display-p3 0.927 0.933 0.93);
    }
  }
}