:root {
  --black-a1: #0000000d;
  --black-a2: #0000001a;
  --black-a3: #00000026;
  --black-a4: #0003;
  --black-a5: #0000004d;
  --black-a6: #0006;
  --black-a7: #00000080;
  --black-a8: #0009;
  --black-a9: #000000b3;
  --black-a10: #000c;
  --black-a11: #000000e6;
  --black-a12: #000000f2;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --black-a1: color(display-p3 0 0 0 / .05);
      --black-a2: color(display-p3 0 0 0 / .1);
      --black-a3: color(display-p3 0 0 0 / .15);
      --black-a4: color(display-p3 0 0 0 / .2);
      --black-a5: color(display-p3 0 0 0 / .3);
      --black-a6: color(display-p3 0 0 0 / .4);
      --black-a7: color(display-p3 0 0 0 / .5);
      --black-a8: color(display-p3 0 0 0 / .6);
      --black-a9: color(display-p3 0 0 0 / .7);
      --black-a10: color(display-p3 0 0 0 / .8);
      --black-a11: color(display-p3 0 0 0 / .9);
      --black-a12: color(display-p3 0 0 0 / .95);
    }
  }
}