:root, .light, .light-theme {
  --sky-1: #f9feff;
  --sky-2: #f1fafd;
  --sky-3: #e1f6fd;
  --sky-4: #d1f0fa;
  --sky-5: #bee7f5;
  --sky-6: #a9daed;
  --sky-7: #8dcae3;
  --sky-8: #60b3d7;
  --sky-9: #7ce2fe;
  --sky-10: #74daf8;
  --sky-11: #00749e;
  --sky-12: #1d3e56;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --sky-1: color(display-p3 0.98 0.995 0.999);
      --sky-2: color(display-p3 0.953 0.98 0.99);
      --sky-3: color(display-p3 0.899 0.963 0.989);
      --sky-4: color(display-p3 0.842 0.937 0.977);
      --sky-5: color(display-p3 0.777 0.9 0.954);
      --sky-6: color(display-p3 0.701 0.851 0.921);
      --sky-7: color(display-p3 0.604 0.785 0.879);
      --sky-8: color(display-p3 0.457 0.696 0.829);
      --sky-9: color(display-p3 0.585 0.877 0.983);
      --sky-10: color(display-p3 0.555 0.845 0.959);
      --sky-11: color(display-p3 0.193 0.448 0.605);
      --sky-12: color(display-p3 0.145 0.241 0.329);
    }
  }
}