.dark, .dark-theme {
  --sage-a1: #00000000;
  --sage-a2: #f0f2f108;
  --sage-a3: #f3f5f412;
  --sage-a4: #f2fefd1a;
  --sage-a5: #f1fbfa22;
  --sage-a6: #edfbf42d;
  --sage-a7: #edfcf73c;
  --sage-a8: #ebfdf657;
  --sage-a9: #dffdf266;
  --sage-a10: #e5fdf674;
  --sage-a11: #f4fefbb0;
  --sage-a12: #fdfffeed;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --sage-a1: color(display-p3 0 0 0 / 0);
      --sage-a2: color(display-p3 0.976 0.988 0.984 / 0.03);
      --sage-a3: color(display-p3 0.992 0.945 0.941 / 0.072);
      --sage-a4: color(display-p3 0.988 0.996 0.992 / 0.102);
      --sage-a5: color(display-p3 0.992 1 0.996 / 0.131);
      --sage-a6: color(display-p3 0.973 1 0.976 / 0.173);
      --sage-a7: color(display-p3 0.957 1 0.976 / 0.233);
      --sage-a8: color(display-p3 0.957 1 0.984 / 0.334);
      --sage-a9: color(display-p3 0.902 1 0.957 / 0.397);
      --sage-a10: color(display-p3 0.929 1 0.973 / 0.452);
      --sage-a11: color(display-p3 0.969 1 0.988 / 0.688);
      --sage-a12: color(display-p3 0.992 1 0.996 / 0.929);
    }
  }
}