/* ## https://www.radix-ui.com/colors/custom */

/* ### LIGHT THEME */

/* #### ACCENT SCALE */
:root,
.light,
.light-theme {
  --blue-1: #fafdff;
  --blue-2: #f2faff;
  --blue-3: #e4f5fe;
  --blue-4: #d1f0ff;
  --blue-5: #bbe7ff;
  --blue-6: #a2dbfa;
  --blue-7: #7fccf3;
  --blue-8: #40b6ec;
  --blue-9: #00a3e5;
  --blue-10: #0096d4;
  --blue-11: #007eb4;
  --blue-12: #003b5a;

  --blue-a1: #0099ff05;
  --blue-a2: #009dff0d;
  --blue-a3: #00a1f61b;
  --blue-a4: #00acff2e;
  --blue-a5: #00a5ff44;
  --blue-a6: #009df25d;
  --blue-a7: #009ae880;
  --blue-a8: #009ee6bf;
  --blue-a9: #00a3e5;
  --blue-a10: #0096d4;
  --blue-a11: #007eb4;
  --blue-a12: #003b5a;

  --blue-contrast: #fff;
  --blue-surface: #eff9ffcc;
  --blue-indicator: #00a3e5;
  --blue-track: #00a3e5;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root,
    .light,
    .light-theme {
      --blue-1: oklch(99.3% 0.0037 232);
      --blue-2: oklch(98.1% 0.0103 232);
      --blue-3: oklch(96% 0.0219 232);
      --blue-4: oklch(93.7% 0.0399 232);
      --blue-5: oklch(90.6% 0.057 232);
      --blue-6: oklch(86.4% 0.073 232);
      --blue-7: oklch(80.9% 0.094 232);
      --blue-8: oklch(73.4% 0.1286 232);
      --blue-9: oklch(66.8% 0.1929 232);
      --blue-10: oklch(62.9% 0.1887 232);
      --blue-11: oklch(55.5% 0.1929 232);
      --blue-12: oklch(32.6% 0.1005 232);

      --blue-a1: color(display-p3 0.0235 0.5137 1 / 0.016);
      --blue-a2: color(display-p3 0.0235 0.5922 0.9216 / 0.048);
      --blue-a3: color(display-p3 0.0118 0.549 0.9176 / 0.095);
      --blue-a4: color(display-p3 0.0039 0.6039 0.9529 / 0.157);
      --blue-a5: color(display-p3 0.0039 0.5804 0.9529 / 0.232);
      --blue-a6: color(display-p3 0.0039 0.5333 0.902 / 0.318);
      --blue-a7: color(display-p3 0.0039 0.5216 0.8549 / 0.432);
      --blue-a8: color(display-p3 0 0.5216 0.8471 / 0.612);
      --blue-a9: color(display-p3 0 0.4863 0.8275 / 0.718);
      --blue-a10: color(display-p3 0 0.4353 0.7451 / 0.742);
      --blue-a11: color(display-p3 0 0.349 0.6 / 0.789);
      --blue-a12: color(display-p3 0 0.1529 0.2784 / 0.914);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 0.9451 0.9765 0.9961 / 0.8);
      --blue-indicator: oklch(66.8% 0.1929 232);
      --blue-track: oklch(66.8% 0.1929 232);
    }
  }
}

/* ### GREY SCALE */

:root,
.light,
.light-theme {
  --gray-1: #fcfcfd;
  --gray-2: #f9f9fb;
  --gray-3: #eff0f3;
  --gray-4: #e7e8ec;
  --gray-5: #e0e1e6;
  --gray-6: #d8d9e0;
  --gray-7: #cdced7;
  --gray-8: #b9bbc6;
  --gray-9: #8b8d98;
  --gray-10: #80828d;
  --gray-11: #62636c;
  --gray-12: #1e1f24;

  --gray-a1: #00005503;
  --gray-a2: #00005506;
  --gray-a3: #00104010;
  --gray-a4: #000b3618;
  --gray-a5: #0009321f;
  --gray-a6: #00073527;
  --gray-a7: #00063332;
  --gray-a8: #00083046;
  --gray-a9: #00051d74;
  --gray-a10: #00051b7f;
  --gray-a11: #0002119d;
  --gray-a12: #000107e1;

  --gray-contrast: #ffffff;
  --gray-surface: #ffffffcc;
  --gray-indicator: #8b8d98;
  --gray-track: #8b8d98;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root,
    .light,
    .light-theme {
      --gray-1: oklch(99.1% 0.0015 277.7);
      --gray-2: oklch(98.2% 0.003 277.7);
      --gray-3: oklch(95.6% 0.0045 277.7);
      --gray-4: oklch(93.1% 0.0061 277.7);
      --gray-5: oklch(91% 0.0077 277.7);
      --gray-6: oklch(88.8% 0.0093 277.7);
      --gray-7: oklch(85.3% 0.0117 277.7);
      --gray-8: oklch(79.4% 0.016 277.7);
      --gray-9: oklch(64.6% 0.0165 277.7);
      --gray-10: oklch(61% 0.0161 277.7);
      --gray-11: oklch(50.3% 0.0139 277.7);
      --gray-12: oklch(24.1% 0.0099 277.7);

      --gray-a1: color(display-p3 0.0235 0.0235 0.349 / 0.012);
      --gray-a2: color(display-p3 0.0235 0.0235 0.349 / 0.024);
      --gray-a3: color(display-p3 0.0078 0.0667 0.2549 / 0.063);
      --gray-a4: color(display-p3 0.0118 0.051 0.2157 / 0.095);
      --gray-a5: color(display-p3 0.0039 0.0392 0.2 / 0.122);
      --gray-a6: color(display-p3 0.0039 0.0275 0.1804 / 0.153);
      --gray-a7: color(display-p3 0.0078 0.0275 0.1843 / 0.197);
      --gray-a8: color(display-p3 0.0039 0.0314 0.1765 / 0.275);
      --gray-a9: color(display-p3 0.0039 0.0196 0.1059 / 0.455);
      --gray-a10: color(display-p3 0.0039 0.0196 0.098 / 0.499);
      --gray-a11: color(display-p3 0 0.0078 0.0588 / 0.616);
      --gray-a12: color(display-p3 0 0.0039 0.0275 / 0.883);

      --gray-contrast: #ffffff;
      --gray-surface: color(display-p3 1 1 1 / 80%);
      --gray-indicator: oklch(64.6% 0.0165 277.7);
      --gray-track: oklch(64.6% 0.0165 277.7);
    }
  }
}

/* ### BACKGROUND COLOR */

:root,
.light,
.light-theme,
.radix-themes {
  --color-background: #fff;
}

/* # DARK THEME */

/* ### ACCENT SCALE */

.dark,
.dark-theme {
  --blue-1: #09121c;
  --blue-2: #0f1925;
  --blue-3: #0e2846;
  --blue-4: #033162;
  --blue-5: #0c3e74;
  --blue-6: #1a4c86;
  --blue-7: #265d9c;
  --blue-8: #2e70bb;
  --blue-9: #2a90ff;
  --blue-10: #1783f1;
  --blue-11: #77b7ff;
  --blue-12: #cbe3ff;

  --blue-a1: #0027fb0c;
  --blue-a2: #006ef916;
  --blue-a3: #0478ff39;
  --blue-a4: #006fff57;
  --blue-a5: #067dfd6b;
  --blue-a6: #2388fd7e;
  --blue-a7: #3594ff95;
  --blue-a8: #3995feb7;
  --blue-a9: #2a90ff;
  --blue-a10: #178afff0;
  --blue-a11: #77b7ff;
  --blue-a12: #cbe3ff;

  --blue-contrast: #fff;
  --blue-surface: #0e213980;
  --blue-indicator: #2a90ff;
  --blue-track: #2a90ff;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark,
    .dark-theme {
      --blue-1: oklch(17.8% 0.0251 254.3);
      --blue-2: oklch(21% 0.0287 254.3);
      --blue-3: oklch(27.3% 0.0652 254.3);
      --blue-4: oklch(31.6% 0.0974 254.3);
      --blue-5: oklch(36.4% 0.1055 254.3);
      --blue-6: oklch(41.6% 0.1095 254.3);
      --blue-7: oklch(47.4% 0.1179 254.3);
      --blue-8: oklch(54% 0.1359 254.3);
      --blue-9: oklch(65.4% 0.188 254.3);
      --blue-10: oklch(61.4% 0.188 254.3);
      --blue-11: oklch(76.8% 0.1308 254.3);
      --blue-12: oklch(90.7% 0.0495 254.3);

      --blue-a1: color(display-p3 0 0.1608 0.9804 / 0.043);
      --blue-a2: color(display-p3 0.0667 0.4588 1 / 0.08);
      --blue-a3: color(display-p3 0.1412 0.4706 1 / 0.215);
      --blue-a4: color(display-p3 0.0824 0.4392 1 / 0.328);
      --blue-a5: color(display-p3 0.1765 0.498 1 / 0.4);
      --blue-a6: color(display-p3 0.2588 0.5451 1 / 0.475);
      --blue-a7: color(display-p3 0.3176 0.5882 1 / 0.564);
      --blue-a8: color(display-p3 0.3373 0.6039 1 / 0.69);
      --blue-a9: color(display-p3 0.298 0.5725 0.9961 / 0.967);
      --blue-a10: color(display-p3 0.2549 0.549 0.9961 / 0.908);
      --blue-a11: color(display-p3 0.5333 0.7294 1 / 0.975);
      --blue-a12: color(display-p3 0.8275 0.898 1 / 0.988);

      --blue-contrast: #fff;
      --blue-surface: color(display-p3 0.0627 0.1255 0.2118 / 0.5);
      --blue-indicator: oklch(65.4% 0.188 254.3);
      --blue-track: oklch(65.4% 0.188 254.3);
    }
  }
}

/* ### GREY SCALE */

.dark,
.dark-theme {
  --gray-1: #111112;
  --gray-2: #181819;
  --gray-3: #212223;
  --gray-4: #29292a;
  --gray-5: #303032;
  --gray-6: #393a3b;
  --gray-7: #474749;
  --gray-8: #5f6062;
  --gray-9: #6b6c71;
  --gray-10: #787a7e;
  --gray-11: #b2b3b6;
  --gray-12: #ededee;

  --gray-a1: #11119102;
  --gray-a2: #d8d8f409;
  --gray-a3: #ddeaf714;
  --gray-a4: #f4f4fe1b;
  --gray-a5: #ededfb24;
  --gray-a6: #f4faff2d;
  --gray-a7: #f7f7ff3c;
  --gray-a8: #f6f9ff57;
  --gray-a9: #f0f3ff67;
  --gray-a10: #f2f6ff75;
  --gray-a11: #f9fbffb1;
  --gray-a12: #fefeffed;

  --gray-contrast: #ffffff;
  --gray-surface: rgba(0, 0, 0, 0.05);
  --gray-indicator: #6b6c71;
  --gray-track: #6b6c71;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark,
    .dark-theme {
      --gray-1: oklch(17.8% 0.0016 271.3);
      --gray-2: oklch(21.1% 0.0017 271.3);
      --gray-3: oklch(25.1% 0.0018 271.3);
      --gray-4: oklch(28.1% 0.0022 271.3);
      --gray-5: oklch(31.1% 0.0024 271.3);
      --gray-6: oklch(34.7% 0.0028 271.3);
      --gray-7: oklch(39.9% 0.0035 271.3);
      --gray-8: oklch(48.8% 0.0041 271.3);
      --gray-9: oklch(53.3% 0.0068 271.3);
      --gray-10: oklch(57.9% 0.0068 271.3);
      --gray-11: oklch(76.6% 0.0045 271.3);
      --gray-12: oklch(94.7% 0.0011 271.3);

      --gray-a1: color(display-p3 0.0706 0.0706 0.8549 / 0.005);
      --gray-a2: color(display-p3 0.8745 0.8745 0.9922 / 0.034);
      --gray-a3: color(display-p3 0.8941 0.9451 0.9961 / 0.076);
      --gray-a4: color(display-p3 0.9569 0.9569 0.9922 / 0.106);
      --gray-a5: color(display-p3 0.9451 0.9451 1 / 0.139);
      --gray-a6: color(display-p3 0.9529 0.9765 1 / 0.177);
      --gray-a7: color(display-p3 0.9647 0.9647 1 / 0.236);
      --gray-a8: color(display-p3 0.9647 0.9765 1 / 0.341);
      --gray-a9: color(display-p3 0.9412 0.9529 1 / 0.404);
      --gray-a10: color(display-p3 0.949 0.9686 1 / 0.458);
      --gray-a11: color(display-p3 0.9765 0.9843 1 / 0.694);
      --gray-a12: color(display-p3 0.9961 0.9961 1 / 0.929);

      --gray-contrast: #ffffff;
      --gray-surface: color(display-p3 0 0 0 / 5%);
      --gray-indicator: oklch(53.3% 0.0068 271.3);
      --gray-track: oklch(53.3% 0.0068 271.3);
    }
  }
}

/* ### BACKGROUND COLOR */

.dark,
.dark-theme,
:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
  --color-background: #111;
}