:root, .light, .light-theme {
  --dusk-100: #fcfdff;
  --dusk-200: #f6f9fe;
  --dusk-250: #f0f6ff;
  --dusk-300: #eaf3ff;
  --dusk-400: #ddebfe;
  --dusk-500: #cee1fb;
  --dusk-600: #bbd4f6;
  --dusk-700: #a4c2ec;
  --dusk-800: #83aae1;
  --dusk-900: #3a6bb0;
  --dusk-1000: #2c5da1;
  --dusk-1100: #26579b;
  --dusk-1200: #213757;

  --dusk-a100: #0055ff03;
  --dusk-a200: #0055e309;
  --dusk-a250: #0066ff0f;
  --dusk-a300: #006dff15;
  --dusk-a400: #0069f822;
  --dusk-a500: #0063ea31;
  --dusk-a600: #005edd44;
  --dusk-a700: #0054ca5b;
  --dusk-a800: #0050c17c;
  --dusk-a900: #003f99c5;
  --dusk-a1000: #003b8dd3;
  --dusk-a1100: #003a89d9;
  --dusk-a1200: #00193ede;

  --dusk-contrast: #fff;
  --dusk-surface: #f4f8fecc;
  --dusk-indicator: #3a6bb0;
  --dusk-track: #3a6bb0;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --dusk-100: oklch(99.4% 0.0029 257.28);
      --dusk-200: oklch(98.1% 0.0074 257.28);
      --dusk-250: oklch(97.1% 0.0136 257.28);
      --dusk-300: oklch(96.1% 0.0188 257.28);
      --dusk-400: oklch(93.5% 0.0298 257.28);
      --dusk-500: oklch(90.4% 0.0412 257.28);
      --dusk-600: oklch(86.3% 0.0546 257.28);
      --dusk-700: oklch(80.6% 0.0681 257.28);
      --dusk-800: oklch(73.1% 0.0911 257.28);
      --dusk-900: oklch(52.8% 0.1215 257.28);
      --dusk-1000: oklch(48% 0.122 257.28);
      --dusk-1100: oklch(46% 0.1228 257.28);
      --dusk-1200: oklch(33.5% 0.0634 257.28);

      --dusk-a100: color(display-p3 0 0.3333 1 / 0.012);
      --dusk-a200: color(display-p3 0 0.3333 0.7765 / 0.035);
      --dusk-a250: color(display-p3 0 0.3569 0.9294 / 0.055);
      --dusk-a300: color(display-p3 0 0.3686 0.949 / 0.075);
      --dusk-a400: color(display-p3 0 0.3216 0.902 / 0.122);
      --dusk-a500: color(display-p3 0 0.3098 0.8667 / 0.176);
      --dusk-a600: color(display-p3 0 0.302 0.8078 / 0.247);
      --dusk-a700: color(display-p3 0 0.2706 0.7294 / 0.333);
      --dusk-a800: color(display-p3 0 0.2588 0.698 / 0.455);
      --dusk-a900: color(display-p3 0 0.1961 0.5451 / 0.725);
      --dusk-a1000: color(display-p3 0 0.1765 0.502 / 0.776);
      --dusk-a1100: color(display-p3 0 0.1725 0.4863 / 0.8);
      --dusk-a1200: color(display-p3 0 0.0784 0.2118 / 0.851);

      --dusk-contrast: #fff;
      --dusk-surface: color(display-p3 0.9569 0.9725 0.9961 / 0.8);
      --dusk-indicator: oklch(52.8% 0.1215 257.28);
      --dusk-track: oklch(52.8% 0.1215 257.28);
    }
  }
}

.dark, .dark-theme {
  --dusk-100: #0b111b;
  --dusk-200: #111924;
  --dusk-250: #122033;
  --dusk-300: #132743;
  --dusk-400: #12315d;
  --dusk-500: #1a3d6e;
  --dusk-600: #264b7f;
  --dusk-700: #315a95;
  --dusk-800: #3162a6;
  --dusk-900: #3a6bb0;
  --dusk-1000: #4f7ab6;
  --dusk-1100: #85b6fc;
  --dusk-1200: #d0e2fd;

  --dusk-a100: #0011f90b;
  --dusk-a200: #1172f815;
  --dusk-a250: #1878fb25;
  --dusk-a300: #1a79fd36;
  --dusk-a400: #1475fd52;
  --dusk-a500: #2881fe64;
  --dusk-a600: #3e8eff76;
  --dusk-a700: #4a94fe8e;
  --dusk-a800: #4492fea0;
  --dusk-a900: #4e97feab;
  --dusk-a1000: #6aa8ffb1;
  --dusk-a1100: #86b8fffc;
  --dusk-a1200: #d2e4fffd;

  --dusk-contrast: #fff;
  --dusk-surface: #11213780;
  --dusk-indicator: #3a6bb0;
  --dusk-track: #3a6bb0;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --dusk-100: oklch(17.7% 0.0229 257.28);
      --dusk-200: oklch(21.1% 0.025 257.28);
      --dusk-250: oklch(24.1% 0.0415 257.28);
      --dusk-300: oklch(27.2% 0.0585 257.28);
      --dusk-400: oklch(31.6% 0.0867 257.28);
      --dusk-500: oklch(36.2% 0.094 257.28);
      --dusk-600: oklch(41.3% 0.0972 257.28);
      --dusk-700: oklch(46.8% 0.1068 257.28);
      --dusk-800: oklch(49.7% 0.1213 257.28);
      --dusk-900: oklch(52.8% 0.1215 257.28);
      --dusk-1000: oklch(57.5% 0.1048 257.28);
      --dusk-1100: oklch(76.9% 0.1138 257.28);
      --dusk-1200: oklch(90.8% 0.0418 257.28);

      --dusk-a100: color(display-p3 0 0.0667 0.9647 / 0.039);
      --dusk-a200: color(display-p3 0.1647 0.4667 0.9647 / 0.078);
      --dusk-a250: color(display-p3 0.1765 0.4824 0.9843 / 0.141);
      --dusk-a300: color(display-p3 0.2 0.4706 0.9882 / 0.204);
      --dusk-a400: color(display-p3 0.1804 0.4588 0.9922 / 0.31);
      --dusk-a500: color(display-p3 0.2549 0.5137 0.9922 / 0.376);
      --dusk-a600: color(display-p3 0.3294 0.5647 0.9961 / 0.447);
      --dusk-a700: color(display-p3 0.3647 0.5882 0.9961 / 0.541);
      --dusk-a800: color(display-p3 0.349 0.5843 0.9961 / 0.608);
      --dusk-a900: color(display-p3 0.3882 0.6078 1 / 0.647);
      --dusk-a1000: color(display-p3 0.4863 0.6706 0.9961 / 0.675);
      --dusk-a1100: color(display-p3 0.5804 0.7333 0.9961 / 0.965);
      --dusk-a1200: color(display-p3 0.8431 0.902 1 / 0.98);

      --dusk-contrast: #fff;
      --dusk-surface: color(display-p3 0.0667 0.1294 0.2157 / 0.5);
      --dusk-indicator: oklch(52.8% 0.1215 257.28);
      --dusk-track: oklch(52.8% 0.1215 257.28);
    }
  }
}