.dark, .dark-theme {
  --blue-1: #0d1520;
  --blue-2: #111927;
  --blue-3: #0d2847;
  --blue-4: #003362;
  --blue-5: #004074;
  --blue-6: #104d87;
  --blue-7: #205d9e;
  --blue-8: #2870bd;
  --blue-9: #0090ff;
  --blue-10: #3b9eff;
  --blue-11: #70b8ff;
  --blue-12: #c2e6ff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --blue-1: color(display-p3 0.057 0.081 0.122);
      --blue-2: color(display-p3 0.072 0.098 0.147);
      --blue-3: color(display-p3 0.078 0.154 0.27);
      --blue-4: color(display-p3 0.033 0.197 0.37);
      --blue-5: color(display-p3 0.08 0.245 0.441);
      --blue-6: color(display-p3 0.14 0.298 0.511);
      --blue-7: color(display-p3 0.195 0.361 0.6);
      --blue-8: color(display-p3 0.239 0.434 0.72);
      --blue-9: color(display-p3 0.247 0.556 0.969);
      --blue-10: color(display-p3 0.344 0.612 0.973);
      --blue-11: color(display-p3 0.49 0.72 1);
      --blue-12: color(display-p3 0.788 0.898 0.99);
    }
  }
}