:root, .light, .light-theme {
  --blue-1: #fbfdff;
  --blue-2: #f4faff;
  --blue-3: #e6f4fe;
  --blue-4: #d5efff;
  --blue-5: #c2e5ff;
  --blue-6: #acd8fc;
  --blue-7: #8ec8f6;
  --blue-8: #5eb1ef;
  --blue-9: #0090ff;
  --blue-10: #0588f0;
  --blue-11: #0d74ce;
  --blue-12: #113264;
  --blue-a1: #0080ff04;
  --blue-a2: #008cff0b;
  --blue-a3: #008ff519;
  --blue-a4: #009eff2a;
  --blue-a5: #0093ff3d;
  --blue-a6: #0088f653;
  --blue-a7: #0083eb71;
  --blue-a8: #0084e6a1;
  --blue-a9: #0090ff;
  --blue-a10: #0086f0fa;
  --blue-a11: #006dcbf2;
  --blue-a12: #002359ee;
  --blue-surface: #f1f9ffcc;
  --blue-indicator: var(--blue-9);
  --blue-track: var(--blue-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --blue-1: color(display-p3 .986 .992 .999);
      --blue-2: color(display-p3 .96 .979 .998);
      --blue-3: color(display-p3 .912 .956 .991);
      --blue-4: color(display-p3 .853 .932 1);
      --blue-5: color(display-p3 .788 .894 .998);
      --blue-6: color(display-p3 .709 .843 .976);
      --blue-7: color(display-p3 .606 .777 .947);
      --blue-8: color(display-p3 .451 .688 .917);
      --blue-9: color(display-p3 .247 .556 .969);
      --blue-10: color(display-p3 .234 .523 .912);
      --blue-11: color(display-p3 .15 .44 .84);
      --blue-12: color(display-p3 .102 .193 .379);
      --blue-a1: color(display-p3 .024 .514 1 / .016);
      --blue-a2: color(display-p3 .024 .514 .906 / .04);
      --blue-a3: color(display-p3 .012 .506 .914 / .087);
      --blue-a4: color(display-p3 .008 .545 1 / .146);
      --blue-a5: color(display-p3 .004 .502 .984 / .212);
      --blue-a6: color(display-p3 .004 .463 .922 / .291);
      --blue-a7: color(display-p3 .004 .431 .863 / .393);
      --blue-a8: color(display-p3 0 .427 .851 / .55);
      --blue-a9: color(display-p3 0 .412 .961 / .753);
      --blue-a10: color(display-p3 0 .376 .886 / .765);
      --blue-a11: color(display-p3 .15 .44 .84);
      --blue-a12: color(display-p3 .102 .193 .379);
      --blue-surface: color(display-p3 .9529 .9765 .9961 / .8);
    }
  }
}

.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;
  --blue-a1: #004df211;
  --blue-a2: #1166fb18;
  --blue-a3: #0077ff3a;
  --blue-a4: #0075ff57;
  --blue-a5: #0081fd6b;
  --blue-a6: #0f89fd7f;
  --blue-a7: #2a91fe98;
  --blue-a8: #3094feb9;
  --blue-a9: #0090ff;
  --blue-a10: #3b9eff;
  --blue-a11: #70b8ff;
  --blue-a12: #c2e6ff;
  --blue-surface: #11213d80;
  --blue-indicator: var(--blue-9);
  --blue-track: var(--blue-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --blue-1: color(display-p3 .057 .081 .122);
      --blue-2: color(display-p3 .072 .098 .147);
      --blue-3: color(display-p3 .078 .154 .27);
      --blue-4: color(display-p3 .033 .197 .37);
      --blue-5: color(display-p3 .08 .245 .441);
      --blue-6: color(display-p3 .14 .298 .511);
      --blue-7: color(display-p3 .195 .361 .6);
      --blue-8: color(display-p3 .239 .434 .72);
      --blue-9: color(display-p3 .247 .556 .969);
      --blue-10: color(display-p3 .344 .612 .973);
      --blue-11: color(display-p3 .49 .72 1);
      --blue-12: color(display-p3 .788 .898 .99);
      --blue-a1: color(display-p3 0 .333 1 / .059);
      --blue-a2: color(display-p3 .114 .435 .988 / .085);
      --blue-a3: color(display-p3 .122 .463 1 / .219);
      --blue-a4: color(display-p3 0 .467 1 / .324);
      --blue-a5: color(display-p3 .098 .51 1 / .4);
      --blue-a6: color(display-p3 .224 .557 1 / .475);
      --blue-a7: color(display-p3 .294 .584 1 / .572);
      --blue-a8: color(display-p3 .314 .592 1 / .702);
      --blue-a9: color(display-p3 .251 .573 .996 / .967);
      --blue-a10: color(display-p3 .357 .631 1 / .971);
      --blue-a11: color(display-p3 .49 .72 1);
      --blue-a12: color(display-p3 .788 .898 .99);
      --blue-surface: color(display-p3 .0706 .1255 .2196 / .5);
    }
  }
}

:root {
  --blue-contrast: white;
}