:root, .light, .light-theme {
  --midnight-100: #fdfdff;
  --midnight-200: #f8f8ff;
  --midnight-250: #f4f4ff;
  --midnight-300: #f1f0fe;
  --midnight-400: #e8e7fe;
  --midnight-500: #dddbfc;
  --midnight-600: #cfcdf4;
  --midnight-700: #bdb9ea;
  --midnight-800: #a5a0d9;
  --midnight-900: #666099;
  --midnight-1000: #5b558c;
  --midnight-1100: #504a7e;
  --midnight-1200: #27253f;

  --midnight-a100: #0000ff02;
  --midnight-a200: #0000ff07;
  --midnight-a250: #0000ff0b;
  --midnight-a300: #1100ee0f;
  --midnight-a400: #0b00f418;
  --midnight-a500: #0e00ea24;
  --midnight-a600: #0a00c732;
  --midnight-a700: #0f00b246;
  --midnight-a800: #0d00995f;
  --midnight-a900: #0a005b9f;
  --midnight-a1000: #090052aa;
  --midnight-a1100: #080049b5;
  --midnight-a1200: #02001eda;

  --midnight-contrast: #fff;
  --midnight-surface: #f6f6ffcc;
  --midnight-indicator: #666099;
  --midnight-track: #666099;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --midnight-100: oklch(99.5% 0.0051 278);
      --midnight-200: oklch(98.1% 0.0095 278);
      --midnight-250: oklch(97% 0.0162 278);
      --midnight-300: oklch(96% 0.0228 278);
      --midnight-400: oklch(93.6% 0.0341 278);
      --midnight-500: oklch(90.3% 0.0445 278);
      --midnight-600: oklch(86.2% 0.0552 278);
      --midnight-700: oklch(80.6% 0.0686 278);
      --midnight-800: oklch(73.1% 0.0822 278);
      --midnight-900: oklch(51.9% 0.0548 278);
      --midnight-1000: oklch(48% 0.0548 278);
      --midnight-1100: oklch(43.9% 0.0822 278);
      --midnight-1200: oklch(28% 0.0548 278);

      --midnight-a100: color(display-p3 0 0.3333 1 / 0.012);
      --midnight-a200: color(display-p3 0 0.1255 1 / 0.031);
      --midnight-a250: color(display-p3 0 0.0824 1 / 0.047);
      --midnight-a300: color(display-p3 0 0.1765 1 / 0.067);
      --midnight-a400: color(display-p3 0 0.1137 1 / 0.102);
      --midnight-a500: color(display-p3 0 0.1059 0.8667 / 0.149);
      --midnight-a600: color(display-p3 0 0.0941 0.7725 / 0.208);
      --midnight-a700: color(display-p3 0 0.0824 0.6863 / 0.286);
      --midnight-a800: color(display-p3 0 0.0627 0.5922 / 0.384);
      --midnight-a900: color(display-p3 0 0.0235 0.2275 / 0.616);
      --midnight-a1000: color(display-p3 0 0.0235 0.2078 / 0.659);
      --midnight-a1100: color(display-p3 0 0.0235 0.2745 / 0.714);
      --midnight-a1200: color(display-p3 0 0.0078 0.1373 / 0.863);

      --midnight-contrast: #fff;
      --midnight-surface: color(display-p3 0.9647 0.9647 1 / 0.8);
      --midnight-indicator: oklch(51.9% 0.0548 278);
      --midnight-track: oklch(51.9% 0.0548 278);
    }
  }
}

.dark, .dark-theme {
  --midnight-100: #101018;
  --midnight-200: #181822;
  --midnight-250: #1e1d2b;
  --midnight-300: #242234;
  --midnight-400: #2d2b43;
  --midnight-500: #373551;
  --midnight-600: #434061;
  --midnight-700: #524f74;
  --midnight-800: #5d5785;
  --midnight-900: #666099;
  --midnight-1000: #726e99;
  --midnight-1100: #b5b2dd;
  --midnight-1200: #eae9fe;

  --midnight-a100: #0000f008;
  --midnight-a200: #6f6ff513;
  --midnight-a250: #877efe1c;
  --midnight-a300: #9083fc26;
  --midnight-a400: #958cfd36;
  --midnight-a500: #9d96fe45;
  --midnight-a600: #a59cfe56;
  --midnight-a700: #aca5fd6b;
  --midnight-a800: #aca0fe7d;
  --midnight-a900: #a59bff92;
  --midnight-a1000: #bab3ff92;
  --midnight-a1100: #d0ccffdb;
  --midnight-a1200: #ebeafffe;

  --midnight-contrast: #fff;
  --midnight-surface: #1f1f3380;
  --midnight-indicator: #666099;
  --midnight-track: #666099;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --midnight-100: oklch(17.7% 0.0163 278);
      --midnight-200: oklch(21.4% 0.0189 278);
      --midnight-250: oklch(23.9% 0.0263 278);
      --midnight-300: oklch(26.3% 0.0337 278);
      --midnight-400: oklch(30.3% 0.0433 278);
      --midnight-500: oklch(34.4% 0.0491 278);
      --midnight-600: oklch(38.9% 0.0548 278);
      --midnight-700: oklch(44.6% 0.062 278);
      --midnight-800: oklch(48.2% 0.0729 278);
      --midnight-900: oklch(51.9% 0.0662 278);
      --midnight-1000: oklch(55.9% 0.0662 278);
      --midnight-1100: oklch(78.1% 0.0614 278);
      --midnight-1200: oklch(94.1% 0.0317 278);

      --midnight-a100: color(display-p3 0 0 0.9412 / 0.031);
      --midnight-a200: color(display-p3 0.4 0.4549 0.9569 / 0.071);
      --midnight-a250: color(display-p3 0.4745 0.549 0.9922 / 0.106);
      --midnight-a300: color(display-p3 0.4863 0.5412 0.9882 / 0.149);
      --midnight-a400: color(display-p3 0.5373 0.5765 0.9922 / 0.208);
      --midnight-a500: color(display-p3 0.5647 0.6118 0.9922 / 0.267);
      --midnight-a600: color(display-p3 0.6078 0.6431 0.9961 / 0.333);
      --midnight-a700: color(display-p3 0.6275 0.6667 0.9922 / 0.42);
      --midnight-a800: color(display-p3 0.6157 0.6549 0.9922 / 0.486);
      --midnight-a900: color(display-p3 0.6745 0.702 1 / 0.518);
      --midnight-a1000: color(display-p3 0.6941 0.7216 0.9961 / 0.569);
      --midnight-a1100: color(display-p3 0.7922 0.8157 0.9961 / 0.855);
      --midnight-a1200: color(display-p3 0.9059 0.9176 1 / 1);

      --midnight-contrast: #fff;
      --midnight-surface: color(display-p3 0.1216 0.1216 0.2 / 0.5);
      --midnight-indicator: oklch(51.9% 0.0662 278);
      --midnight-track: oklch(51.9% 0.0662 278);
    }
  }
}