/* Odin Intelligence — colour primitives.
   Eight scales, thirteen steps each, solid and translucent, sRGB and display-p3,
   light and dark. Generated. Do not hand-edit. */

/* ---- stone ---- */
:root, .light, .light-theme {
  --stone-100: #fefdfb;
  --stone-200: #fbf9f6;
  --stone-250: #f7f4f0;
  --stone-300: #f3f0eb;
  --stone-400: #ede7e0;
  --stone-500: #e6e0d6;
  --stone-600: #e0d7ca;
  --stone-700: #d7cbbb;
  --stone-800: #c6b7a1;
  --stone-900: #635848;
  --stone-1000: #746958;
  --stone-1100: #6d6151;
  --stone-1200: #282219;

  --stone-a100: #bf800004;
  --stone-a200: #8e550009;
  --stone-a250: #7744000f;
  --stone-a300: #66400014;
  --stone-a400: #6b3a001f;
  --stone-a500: #643e0029;
  --stone-a600: #6a3f0035;
  --stone-a700: #693c0044;
  --stone-a800: #643c005e;
  --stone-a900: #261600b7;
  --stone-a1000: #2b1a00a7;
  --stone-a1100: #291700ae;
  --stone-a1200: #110a00e6;

  --stone-contrast: #fff;
  --stone-surface: #faf8f4cc;
  --stone-indicator: #635848;
  --stone-track: #635848;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --stone-100: oklch(99.4% 0.0023 77.15);
      --stone-200: oklch(98.3% 0.004 77.15);
      --stone-250: oklch(96.8% 0.0057 77.15);
      --stone-300: oklch(95.6% 0.0075 77.15);
      --stone-400: oklch(93.1% 0.0114 77.15);
      --stone-500: oklch(90.9% 0.0147 77.15);
      --stone-600: oklch(88.3% 0.0195 77.15);
      --stone-700: oklch(84.8% 0.0258 77.15);
      --stone-800: oklch(78.6% 0.035 77.15);
      --stone-900: oklch(46.6% 0.0287 77.15);
      --stone-1000: oklch(52.6% 0.0287 77.15);
      --stone-1100: oklch(49.9% 0.0287 77.15);
      --stone-1200: oklch(25.6% 0.0178 77.15);

      --stone-a100: color(display-p3 0.6667 0.3333 0 / 0.012);
      --stone-a200: color(display-p3 0.502 0.251 0 / 0.031);
      --stone-a250: color(display-p3 0.3569 0.2157 0 / 0.055);
      --stone-a300: color(display-p3 0.4 0.251 0 / 0.078);
      --stone-a400: color(display-p3 0.3686 0.2 0 / 0.118);
      --stone-a500: color(display-p3 0.349 0.2235 0 / 0.157);
      --stone-a600: color(display-p3 0.3529 0.2157 0 / 0.2);
      --stone-a700: color(display-p3 0.3725 0.2392 0 / 0.263);
      --stone-a800: color(display-p3 0.3569 0.2157 0 / 0.361);
      --stone-a900: color(display-p3 0.1255 0.0784 0 / 0.71);
      --stone-a1000: color(display-p3 0.1451 0.0902 0 / 0.647);
      --stone-a1100: color(display-p3 0.1412 0.0863 0 / 0.675);
      --stone-a1200: color(display-p3 0.0549 0.0353 0 / 0.898);

      --stone-contrast: #fff;
      --stone-surface: color(display-p3 0.9804 0.9725 0.9569 / 0.8);
      --stone-indicator: oklch(46.6% 0.0287 77.15);
      --stone-track: oklch(46.6% 0.0287 77.15);
    }
  }
}

.dark, .dark-theme {
  --stone-100: #12110f;
  --stone-200: #1a1917;
  --stone-250: #1f1d1b;
  --stone-300: #24221f;
  --stone-400: #2d2a25;
  --stone-500: #36312b;
  --stone-600: #413b33;
  --stone-700: #51493e;
  --stone-800: #6c6150;
  --stone-900: #7d7161;
  --stone-1000: #8a8174;
  --stone-1100: #c1b5a3;
  --stone-1200: #f0e9de;

  --stone-a100: #90110002;
  --stone-a200: #f6ddaa0a;
  --stone-a250: #ffddbb0f;
  --stone-a300: #f8dfbb15;
  --stone-a400: #ffe6bb1e;
  --stone-a500: #fdddb728;
  --stone-a600: #fcdfb834;
  --stone-a700: #fee0b745;
  --stone-a800: #fee1b562;
  --stone-a900: #fee4c174;
  --stone-a1000: #feedd382;
  --stone-a1100: #feeed6bd;
  --stone-a1200: #fff7ecef;

  --stone-contrast: #fff;
  --stone-surface: #23211d80;
  --stone-indicator: #7d7161;
  --stone-track: #7d7161;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --stone-100: oklch(17.8% 0.0035 77.15);
      --stone-200: oklch(21.4% 0.0041 77.15);
      --stone-250: oklch(23.2% 0.0054 77.15);
      --stone-300: oklch(25.3% 0.0068 77.15);
      --stone-400: oklch(28.6% 0.0095 77.15);
      --stone-500: oklch(31.6% 0.0126 77.15);
      --stone-600: oklch(35.6% 0.0164 77.15);
      --stone-700: oklch(41% 0.0214 77.15);
      --stone-800: oklch(49.8% 0.0287 77.15);
      --stone-900: oklch(55.5% 0.0287 77.15);
      --stone-1000: oklch(60.7% 0.0214 77.15);
      --stone-1100: oklch(77.8% 0.0287 77.15);
      --stone-1200: oklch(93.6% 0.0166 77.15);

      --stone-a100: color(display-p3 0.5647 0.0667 0 / 0.008);
      --stone-a200: color(display-p3 0.9647 0.8667 0.6667 / 0.039);
      --stone-a250: color(display-p3 1 0.8667 0.7333 / 0.059);
      --stone-a300: color(display-p3 0.9725 0.8745 0.7333 / 0.082);
      --stone-a400: color(display-p3 1 0.902 0.7686 / 0.118);
      --stone-a500: color(display-p3 0.9882 0.8863 0.7608 / 0.153);
      --stone-a600: color(display-p3 0.9882 0.8902 0.7529 / 0.2);
      --stone-a700: color(display-p3 0.9922 0.8902 0.7451 / 0.267);
      --stone-a800: color(display-p3 0.9922 0.902 0.7451 / 0.376);
      --stone-a900: color(display-p3 0.9961 0.9176 0.7765 / 0.447);
      --stone-a1000: color(display-p3 0.9961 0.9412 0.8549 / 0.502);
      --stone-a1100: color(display-p3 0.9961 0.9451 0.8588 / 0.733);
      --stone-a1200: color(display-p3 1 0.9725 0.9333 / 0.933);

      --stone-contrast: #fff;
      --stone-surface: color(display-p3 0.1373 0.1294 0.1137 / 0.5);
      --stone-indicator: oklch(55.5% 0.0287 77.15);
      --stone-track: oklch(55.5% 0.0287 77.15);
    }
  }
}

/* ---- sienna ---- */
:root, .light, .light-theme {
  --sienna-100: #fdfbfa;
  --sienna-200: #fdf8f5;
  --sienna-250: #fcf3ed;
  --sienna-300: #fcede5;
  --sienna-400: #ffdfcd;
  --sienna-500: #fbd1ba;
  --sienna-600: #f5c5ab;
  --sienna-700: #e8b396;
  --sienna-800: #dc9c78;
  --sienna-900: #bc5b12;
  --sienna-1000: #ae4f00;
  --sienna-1100: #9d4300;
  --sienna-1200: #573623;

  --sienna-a100: #99330005;
  --sienna-a200: #cc4c000a;
  --sienna-a250: #d4550012;
  --sienna-a300: #e24e001a;
  --sienna-a400: #ff5c0032;
  --sienna-a500: #f0550045;
  --sienna-a600: #e14f0054;
  --sienna-a700: #c7460069;
  --sienna-a800: #bd440087;
  --sienna-a900: #b74f00ed;
  --sienna-a1000: #ae4f00ff;
  --sienna-a1100: #9d4300ff;
  --sienna-a1200: #3c1600dc;

  --sienna-contrast: #fff;
  --sienna-surface: #fcf6f2cc;
  --sienna-indicator: #bc5b12;
  --sienna-track: #bc5b12;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --sienna-100: oklch(98.9% 0.0025 50.2);
      --sienna-200: oklch(98.2% 0.0067 50.2);
      --sienna-250: oklch(97% 0.0126 50.2);
      --sienna-300: oklch(95.6% 0.0195 50.2);
      --sienna-400: oklch(92.5% 0.043 50.2);
      --sienna-500: oklch(89.1% 0.0567 50.2);
      --sienna-600: oklch(85.9% 0.0653 50.2);
      --sienna-700: oklch(80.8% 0.0736 50.2);
      --sienna-800: oklch(74.6% 0.0913 50.2);
      --sienna-900: oklch(58% 0.1461 50.2);
      --sienna-1000: oklch(54% 0.1439 50.2);
      --sienna-1100: oklch(49.5% 0.1362 50.2);
      --sienna-1200: oklch(36.8% 0.0563 50.2);

      --sienna-a100: color(display-p3 0.6 0.2 0 / 0.02);
      --sienna-a200: color(display-p3 0.698 0.298 0 / 0.039);
      --sienna-a250: color(display-p3 0.7647 0.2941 0 / 0.067);
      --sienna-a300: color(display-p3 0.7608 0.3216 0 / 0.098);
      --sienna-a400: color(display-p3 0.8941 0.3412 0 / 0.184);
      --sienna-a500: color(display-p3 0.8314 0.3333 0 / 0.259);
      --sienna-a600: color(display-p3 0.7765 0.298 0 / 0.314);
      --sienna-a700: color(display-p3 0.6941 0.2667 0 / 0.396);
      --sienna-a800: color(display-p3 0.651 0.2549 0 / 0.506);
      --sienna-a900: color(display-p3 0.6314 0.2588 0 / 0.843);
      --sienna-a1000: color(display-p3 0.5922 0.251 0 / 0.89);
      --sienna-a1100: color(display-p3 0.5333 0.2314 0 / 0.925);
      --sienna-a1200: color(display-p3 0.2039 0.0784 0 / 0.851);

      --sienna-contrast: #fff;
      --sienna-surface: color(display-p3 0.9882 0.9647 0.949 / 0.8);
      --sienna-indicator: oklch(58% 0.1461 50.2);
      --sienna-track: oklch(58% 0.1461 50.2);
    }
  }
}

.dark, .dark-theme {
  --sienna-100: #14100e;
  --sienna-200: #1d1612;
  --sienna-250: #261a12;
  --sienna-300: #301d12;
  --sienna-400: #41210e;
  --sienna-500: #502912;
  --sienna-600: #60361c;
  --sienna-700: #764629;
  --sienna-800: #985933;
  --sienna-900: #bc5b12;
  --sienna-1000: #c96826;
  --sienna-1100: #ffa977;
  --sienna-1200: #ffe0d0;

  --sienna-a100: #d0000004;
  --sienna-a200: #fc73250d;
  --sienna-a250: #fa751c17;
  --sienna-a300: #fa6b1822;
  --sienna-a400: #fc5f0234;
  --sienna-a500: #fd6b1544;
  --sienna-a600: #fe803255;
  --sienna-a700: #fd8d496d;
  --sienna-a800: #fe904d91;
  --sienna-a900: #fe7812b8;
  --sienna-a1000: #fe812cc6;
  --sienna-a1100: #ffa977ff;
  --sienna-a1200: #ffe0d0ff;

  --sienna-contrast: #fff;
  --sienna-surface: #291b1380;
  --sienna-indicator: #bc5b12;
  --sienna-track: #bc5b12;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --sienna-100: oklch(17.7% 0.0079 50.2);
      --sienna-200: oklch(20.7% 0.0138 50.2);
      --sienna-250: oklch(23% 0.0242 50.2);
      --sienna-300: oklch(25.2% 0.0357 50.2);
      --sienna-400: oklch(28.7% 0.0576 50.2);
      --sienna-500: oklch(32.8% 0.0676 50.2);
      --sienna-600: oklch(37.9% 0.0715 50.2);
      --sienna-700: oklch(44.4% 0.0785 50.2);
      --sienna-800: oklch(52.8% 0.0983 50.2);
      --sienna-900: oklch(58% 0.1461 50.2);
      --sienna-1000: oklch(62.1% 0.1446 50.2);
      --sienna-1100: oklch(80.9% 0.1209 50.2);
      --sienna-1200: oklch(92.8% 0.0406 50.2);

      --sienna-a100: color(display-p3 0.7333 0 0 / 0.012);
      --sienna-a200: color(display-p3 0.9843 0.4824 0.2353 / 0.047);
      --sienna-a250: color(display-p3 0.9725 0.4941 0.2078 / 0.082);
      --sienna-a300: color(display-p3 1 0.502 0.1647 / 0.118);
      --sienna-a400: color(display-p3 0.9843 0.4431 0.0863 / 0.188);
      --sienna-a500: color(display-p3 0.9882 0.4784 0.1451 / 0.247);
      --sienna-a600: color(display-p3 0.9922 0.5608 0.2706 / 0.31);
      --sienna-a700: color(display-p3 0.9961 0.6118 0.3647 / 0.396);
      --sienna-a800: color(display-p3 1 0.6235 0.3686 / 0.529);
      --sienna-a900: color(display-p3 0.9961 0.5294 0.2 / 0.671);
      --sienna-a1000: color(display-p3 0.9961 0.5647 0.2745 / 0.722);
      --sienna-a1100: color(display-p3 0.9961 0.7098 0.5216 / 0.953);
      --sienna-a1200: color(display-p3 1 0.898 0.8392 / 0.98);

      --sienna-contrast: #fff;
      --sienna-surface: color(display-p3 0.1608 0.1059 0.0745 / 0.5);
      --sienna-indicator: oklch(58% 0.1461 50.2);
      --sienna-track: oklch(58% 0.1461 50.2);
    }
  }
}

/* ---- dusk ---- */
: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);
    }
  }
}

/* ---- sage ---- */
:root, .light, .light-theme {
  --sage-100: #fbfefd;
  --sage-200: #f4fbf8;
  --sage-250: #edf9f4;
  --sage-300: #e6f6ef;
  --sage-400: #d7f0e5;
  --sage-500: #c5e8d9;
  --sage-600: #b0dcc9;
  --sage-700: #92ccb4;
  --sage-800: #66b798;
  --sage-900: #008562;
  --sage-1000: #007758;
  --sage-1100: #006a4e;
  --sage-1200: #1f3a30;

  --sage-a100: #00bf8004;
  --sage-a200: #00a25d0b;
  --sage-a250: #00aa6312;
  --sage-a300: #00a35c19;
  --sage-a400: #009f5928;
  --sage-a500: #009a583a;
  --sage-a600: #008e514f;
  --sage-a700: #0088506d;
  --sage-a800: #00875399;
  --sage-a900: #008562ff;
  --sage-a1000: #007758ff;
  --sage-a1100: #006a4eff;
  --sage-a1200: #001f13e0;

  --sage-contrast: #fff;
  --sage-surface: #f1faf6cc;
  --sage-indicator: #008562;
  --sage-track: #008562;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --sage-100: oklch(99.4% 0.0034 166.53);
      --sage-200: oklch(98.2% 0.0084 166.53);
      --sage-250: oklch(97.2% 0.0142 166.53);
      --sage-300: oklch(95.9% 0.0192 166.53);
      --sage-400: oklch(93.4% 0.0301 166.53);
      --sage-500: oklch(90.2% 0.0419 166.53);
      --sage-600: oklch(85.8% 0.053 166.53);
      --sage-700: oklch(79.9% 0.069 166.53);
      --sage-800: oklch(71.9% 0.0927 166.53);
      --sage-900: oklch(54.7% 0.1128 166.53);
      --sage-1000: oklch(50.5% 0.1035 166.53);
      --sage-1100: oklch(46.5% 0.0954 166.53);
      --sage-1200: oklch(32.3% 0.0379 166.53);

      --sage-a100: color(display-p3 0 0.6667 0.3333 / 0.012);
      --sage-a200: color(display-p3 0 0.6 0.298 / 0.039);
      --sage-a250: color(display-p3 0 0.6235 0.3137 / 0.063);
      --sage-a300: color(display-p3 0 0.5451 0.2745 / 0.086);
      --sage-a400: color(display-p3 0 0.5412 0.2588 / 0.137);
      --sage-a500: color(display-p3 0 0.5294 0.2549 / 0.2);
      --sage-a600: color(display-p3 0 0.4863 0.2431 / 0.275);
      --sage-a700: color(display-p3 0 0.4471 0.2275 / 0.376);
      --sage-a800: color(display-p3 0 0.4431 0.2314 / 0.522);
      --sage-a900: color(display-p3 0 0.3686 0.2118 / 0.773);
      --sage-a1000: color(display-p3 0 0.3216 0.1882 / 0.8);
      --sage-a1100: color(display-p3 0 0.2824 0.1608 / 0.824);
      --sage-a1200: color(display-p3 0 0.0863 0.0471 / 0.851);

      --sage-contrast: #fff;
      --sage-surface: color(display-p3 0.9451 0.9804 0.9647 / 0.8);
      --sage-indicator: oklch(54.7% 0.1128 166.53);
      --sage-track: oklch(54.7% 0.1128 166.53);
    }
  }
}

.dark, .dark-theme {
  --sage-100: #0d1310;
  --sage-200: #141b18;
  --sage-250: #16231e;
  --sage-300: #172c24;
  --sage-400: #1b392e;
  --sage-500: #234539;
  --sage-600: #2e5445;
  --sage-700: #3a6554;
  --sage-800: #3e725e;
  --sage-900: #008562;
  --sage-1000: #2f906f;
  --sage-1100: #67bb9a;
  --sage-1200: #bcecd8;

  --sage-a100: #00bb0003;
  --sage-a200: #57f9b30b;
  --sage-a250: #51f6b714;
  --sage-a300: #46feb81d;
  --sage-a400: #4cfebd2b;
  --sage-a500: #63fec738;
  --sage-a600: #78fec948;
  --sage-a700: #85ffcf5a;
  --sage-a800: #7fffce68;
  --sage-a900: #00feb67d;
  --sage-a1000: #49fdc089;
  --sage-a1100: #89fed0b7;
  --sage-a1200: #cbffe9eb;

  --sage-contrast: #fff;
  --sage-surface: #17251f80;
  --sage-indicator: #008562;
  --sage-track: #008562;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --sage-100: oklch(17.9% 0.0111 166.53);
      --sage-200: oklch(21.4% 0.0119 166.53);
      --sage-250: oklch(24.2% 0.0205 166.53);
      --sage-300: oklch(27.2% 0.0311 166.53);
      --sage-400: oklch(31.7% 0.0415 166.53);
      --sage-500: oklch(36% 0.0454 166.53);
      --sage-600: oklch(41.3% 0.0508 166.53);
      --sage-700: oklch(47% 0.0559 166.53);
      --sage-800: oklch(50.9% 0.0651 166.53);
      --sage-900: oklch(54.7% 0.1128 166.53);
      --sage-1000: oklch(58.8% 0.1035 166.53);
      --sage-1100: oklch(72.9% 0.0962 166.53);
      --sage-1200: oklch(90.4% 0.0565 166.53);

      --sage-a100: color(display-p3 0 0.7333 0 / 0.012);
      --sage-a200: color(display-p3 0.4314 0.9765 0.702 / 0.043);
      --sage-a250: color(display-p3 0.4667 0.9647 0.7176 / 0.078);
      --sage-a300: color(display-p3 0.4588 0.9961 0.7451 / 0.11);
      --sage-a400: color(display-p3 0.4941 0.9961 0.7569 / 0.165);
      --sage-a500: color(display-p3 0.5569 0.9922 0.7922 / 0.216);
      --sage-a600: color(display-p3 0.6 0.9961 0.8118 / 0.278);
      --sage-a700: color(display-p3 0.6392 1 0.8314 / 0.349);
      --sage-a800: color(display-p3 0.6314 1 0.8235 / 0.404);
      --sage-a900: color(display-p3 0.4 0.9922 0.7412 / 0.482);
      --sage-a1000: color(display-p3 0.5059 1 0.7843 / 0.525);
      --sage-a1100: color(display-p3 0.6549 1 0.8392 / 0.706);
      --sage-a1200: color(display-p3 0.8392 1 0.9176 / 0.918);

      --sage-contrast: #fff;
      --sage-surface: color(display-p3 0.0902 0.1451 0.1216 / 0.5);
      --sage-indicator: oklch(54.7% 0.1128 166.53);
      --sage-track: oklch(54.7% 0.1128 166.53);
    }
  }
}

/* ---- amber ---- */
:root, .light, .light-theme {
  --amber-100: #fefdfb;
  --amber-200: #fef9f0;
  --amber-250: #fef4e4;
  --amber-300: #feefd8;
  --amber-400: #fbe3bf;
  --amber-500: #f7d9a9;
  --amber-600: #f1d1a0;
  --amber-700: #dfbf8f;
  --amber-800: #cda971;
  --amber-900: #cf910a;
  --amber-1000: #bf8607;
  --amber-1100: #805700;
  --amber-1200: #3e2903;

  --amber-a100: #bf800004;
  --amber-a200: #ee99000f;
  --amber-a250: #f697001b;
  --amber-a300: #f8960027;
  --amber-a400: #ef8f0040;
  --amber-a500: #e78e0056;
  --amber-a600: #d984005f;
  --amber-a700: #b66d0070;
  --amber-a800: #a565008e;
  --amber-a900: #cd8d00f5;
  --amber-a1000: #bd8300f8;
  --amber-a1100: #805700ff;
  --amber-a1200: #3c2600fc;

  --amber-contrast: #3e2903;
  --amber-surface: #fef8eccc;
  --amber-indicator: #cf910a;
  --amber-track: #cf910a;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --amber-100: oklch(99.4% 0.0028 77.8);
      --amber-200: oklch(98.4% 0.013 77.8);
      --amber-250: oklch(97.1% 0.0237 77.8);
      --amber-300: oklch(95.8% 0.0343 77.8);
      --amber-400: oklch(92.6% 0.054 77.8);
      --amber-500: oklch(89.9% 0.0706 77.8);
      --amber-600: oklch(87.6% 0.0731 77.8);
      --amber-700: oklch(82.1% 0.0729 77.8);
      --amber-800: oklch(75.4% 0.0844 77.8);
      --amber-900: oklch(70% 0.1442 77.8);
      --amber-1000: oklch(66% 0.136 77.8);
      --amber-1100: oklch(48.9% 0.1022 77.8);
      --amber-1200: oklch(29.9% 0.0595 77.8);

      --amber-a100: color(display-p3 0.749 0.502 0 / 0.016);
      --amber-a200: color(display-p3 0.9294 0.5725 0 / 0.055);
      --amber-a250: color(display-p3 0.9216 0.5608 0 / 0.098);
      --amber-a300: color(display-p3 0.9176 0.5569 0 / 0.141);
      --amber-a400: color(display-p3 0.8667 0.549 0 / 0.235);
      --amber-a500: color(display-p3 0.851 0.5373 0 / 0.314);
      --amber-a600: color(display-p3 0.7882 0.4941 0 / 0.349);
      --amber-a700: color(display-p3 0.651 0.4039 0 / 0.416);
      --amber-a800: color(display-p3 0.5804 0.3647 0 / 0.525);
      --amber-a900: color(display-p3 0.7176 0.4745 0 / 0.796);
      --amber-a1000: color(display-p3 0.6549 0.4275 0 / 0.816);
      --amber-a1100: color(display-p3 0.4196 0.2745 0 / 0.898);
      --amber-a1200: color(display-p3 0.1961 0.1255 0 / 0.957);

      --amber-contrast: #3e2903;
      --amber-surface: color(display-p3 0.9961 0.9725 0.9255 / 0.8);
      --amber-indicator: oklch(70% 0.1442 77.8);
      --amber-track: oklch(70% 0.1442 77.8);
    }
  }
}

.dark, .dark-theme {
  --amber-100: #13110d;
  --amber-200: #1b1814;
  --amber-250: #211d17;
  --amber-300: #27221a;
  --amber-400: #322a1d;
  --amber-500: #3d3222;
  --amber-600: #4b3e2a;
  --amber-700: #5e4e35;
  --amber-800: #796342;
  --amber-900: #cf910a;
  --amber-1000: #bf8607;
  --amber-1100: #e3b670;
  --amber-1200: #f8e1be;

  --amber-a100: #bb110003;
  --amber-a200: #f9b3570b;
  --amber-a250: #f4bb6612;
  --amber-a300: #fbc67118;
  --amber-a400: #fbc26624;
  --amber-a500: #fbc06b30;
  --amber-a600: #fcc7763f;
  --amber-a700: #fecc8053;
  --amber-a800: #fecc8170;
  --amber-a900: #feb108cc;
  --amber-a1000: #feb103bb;
  --amber-a1100: #ffcc7de1;
  --amber-a1200: #ffe7c3f8;

  --amber-contrast: #3e2903;
  --amber-surface: #251f1780;
  --amber-indicator: #cf910a;
  --amber-track: #cf910a;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --amber-100: oklch(17.9% 0.0086 77.8);
      --amber-200: oklch(21.1% 0.009 77.8);
      --amber-250: oklch(23.3% 0.0127 77.8);
      --amber-300: oklch(25.5% 0.0163 77.8);
      --amber-400: oklch(29% 0.0251 77.8);
      --amber-500: oklch(32.4% 0.0308 77.8);
      --amber-600: oklch(37.2% 0.0365 77.8);
      --amber-700: oklch(43.3% 0.0437 77.8);
      --amber-800: oklch(51.3% 0.0555 77.8);
      --amber-900: oklch(70% 0.1442 77.8);
      --amber-1000: oklch(66% 0.136 77.8);
      --amber-1100: oklch(80.2% 0.1023 77.8);
      --amber-1200: oklch(92% 0.0524 77.8);

      --amber-a100: color(display-p3 0.7333 0.0667 0 / 0.012);
      --amber-a200: color(display-p3 0.9647 0.7686 0.3686 / 0.039);
      --amber-a250: color(display-p3 0.949 0.7725 0.4784 / 0.067);
      --amber-a300: color(display-p3 0.9804 0.8039 0.502 / 0.09);
      --amber-a400: color(display-p3 0.9804 0.7804 0.4667 / 0.137);
      --amber-a500: color(display-p3 1 0.8235 0.4902 / 0.176);
      --amber-a600: color(display-p3 1 0.8157 0.5333 / 0.235);
      --amber-a700: color(display-p3 0.9922 0.8314 0.549 / 0.318);
      --amber-a800: color(display-p3 0.9922 0.8353 0.5569 / 0.424);
      --amber-a900: color(display-p3 1 0.7412 0.2471 / 0.761);
      --amber-a1000: color(display-p3 1 0.7333 0.2353 / 0.698);
      --amber-a1100: color(display-p3 0.9961 0.8314 0.549 / 0.855);
      --amber-a1200: color(display-p3 0.9961 0.9216 0.7922 / 0.957);

      --amber-contrast: #3e2903;
      --amber-surface: color(display-p3 0.1451 0.1216 0.0902 / 0.5);
      --amber-indicator: oklch(70% 0.1442 77.8);
      --amber-track: oklch(70% 0.1442 77.8);
    }
  }
}

/* ---- crimson ---- */
:root, .light, .light-theme {
  --crimson-100: #fffcfc;
  --crimson-200: #fef8f7;
  --crimson-250: #fef2f0;
  --crimson-300: #fdece9;
  --crimson-400: #ffded7;
  --crimson-500: #ffd0c8;
  --crimson-600: #f8c0b7;
  --crimson-700: #efada2;
  --crimson-800: #e59486;
  --crimson-900: #c0392b;
  --crimson-1000: #b0281c;
  --crimson-1100: #a92014;
  --crimson-1200: #5e231b;

  --crimson-a100: #ff000003;
  --crimson-a200: #df200008;
  --crimson-a250: #ee22000f;
  --crimson-a300: #e8230016;
  --crimson-a400: #ff2d0028;
  --crimson-a500: #ff250037;
  --crimson-a600: #e6200048;
  --crimson-a700: #d31e005d;
  --crimson-a800: #c81e0079;
  --crimson-a900: #b31100d4;
  --crimson-a1000: #a60d00e3;
  --crimson-a1100: #a20d00eb;
  --crimson-a1200: #4b0900e4;

  --crimson-contrast: #fff;
  --crimson-surface: #fef6f5cc;
  --crimson-indicator: #c0392b;
  --crimson-track: #c0392b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --crimson-100: oklch(99.3% 0.0027 29.7);
      --crimson-200: oklch(98.3% 0.007 29.7);
      --crimson-250: oklch(97% 0.0128 29.7);
      --crimson-300: oklch(95.6% 0.0186 29.7);
      --crimson-400: oklch(92.6% 0.0413 29.7);
      --crimson-500: oklch(89.6% 0.0544 29.7);
      --crimson-600: oklch(85.6% 0.0659 29.7);
      --crimson-700: oklch(80.7% 0.0796 29.7);
      --crimson-800: oklch(74.5% 0.1006 29.7);
      --crimson-900: oklch(54.3% 0.174 29.7);
      --crimson-1000: oklch(49.7% 0.174 29.7);
      --crimson-1100: oklch(47.7% 0.174 29.7);
      --crimson-1200: oklch(34.2% 0.0883 29.7);

      --crimson-a100: color(display-p3 0.6667 0 0 / 0.012);
      --crimson-a200: color(display-p3 0.749 0.1255 0 / 0.031);
      --crimson-a250: color(display-p3 0.8 0.2 0 / 0.059);
      --crimson-a300: color(display-p3 0.7608 0.1412 0 / 0.082);
      --crimson-a400: color(display-p3 0.898 0.1529 0 / 0.153);
      --crimson-a500: color(display-p3 0.851 0.149 0 / 0.208);
      --crimson-a600: color(display-p3 0.7725 0.1294 0 / 0.275);
      --crimson-a700: color(display-p3 0.7137 0.1333 0 / 0.357);
      --crimson-a800: color(display-p3 0.6745 0.1216 0 / 0.459);
      --crimson-a900: color(display-p3 0.6157 0.0784 0 / 0.796);
      --crimson-a1000: color(display-p3 0.5725 0.0706 0 / 0.851);
      --crimson-a1100: color(display-p3 0.5529 0.0627 0 / 0.875);
      --crimson-a1200: color(display-p3 0.2549 0.0392 0 / 0.882);

      --crimson-contrast: #fff;
      --crimson-surface: color(display-p3 0.9961 0.9647 0.9608 / 0.8);
      --crimson-indicator: oklch(54.3% 0.174 29.7);
      --crimson-track: oklch(54.3% 0.174 29.7);
    }
  }
}

.dark, .dark-theme {
  --crimson-100: #180e0d;
  --crimson-200: #211210;
  --crimson-250: #30120e;
  --crimson-300: #3f0f09;
  --crimson-400: #560401;
  --crimson-500: #680a04;
  --crimson-600: #7a1a11;
  --crimson-700: #942b20;
  --crimson-800: #b0281c;
  --crimson-900: #c0392b;
  --crimson-1000: #d04939;
  --crimson-1100: #ff907e;
  --crimson-1200: #ffd0c7;

  --crimson-a100: #f0000008;
  --crimson-a200: #f41f0312;
  --crimson-a250: #fa180022;
  --crimson-a300: #fc070032;
  --crimson-a400: #ff00004a;
  --crimson-a500: #fd00005e;
  --crimson-a600: #fe251171;
  --crimson-a700: #fe402c8d;
  --crimson-a800: #fe3321ab;
  --crimson-a900: #fe4734bc;
  --crimson-a1000: #ff5743cd;
  --crimson-a1100: #ff907eff;
  --crimson-a1200: #ffd0c7ff;

  --crimson-contrast: #fff;
  --crimson-surface: #31130f80;
  --crimson-indicator: #c0392b;
  --crimson-track: #c0392b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --crimson-100: oklch(17.7% 0.0158 29.7);
      --crimson-200: oklch(20.2% 0.0252 29.7);
      --crimson-250: oklch(22.8% 0.0506 29.7);
      --crimson-300: oklch(25.1% 0.076 29.7);
      --crimson-400: oklch(28.8% 0.114 29.7);
      --crimson-500: oklch(33.2% 0.1268 29.7);
      --crimson-600: oklch(38.2% 0.1323 29.7);
      --crimson-700: oklch(45% 0.1432 29.7);
      --crimson-800: oklch(49.7% 0.174 29.7);
      --crimson-900: oklch(54.3% 0.174 29.7);
      --crimson-1000: oklch(59% 0.174 29.7);
      --crimson-1100: oklch(76.8% 0.174 29.7);
      --crimson-1200: oklch(89.6% 0.0624 29.7);

      --crimson-a100: color(display-p3 0.902 0 0 / 0.024);
      --crimson-a200: color(display-p3 1 0.2 0 / 0.059);
      --crimson-a250: color(display-p3 0.9961 0.1686 0 / 0.114);
      --crimson-a300: color(display-p3 1 0.0902 0 / 0.173);
      --crimson-a400: color(display-p3 0.9922 0.0078 0 / 0.259);
      --crimson-a500: color(display-p3 0.9961 0.1137 0.0078 / 0.329);
      --crimson-a600: color(display-p3 0.9961 0.2353 0.1333 / 0.4);
      --crimson-a700: color(display-p3 0.9961 0.3294 0.2314 / 0.506);
      --crimson-a800: color(display-p3 0.9961 0.298 0.2 / 0.612);
      --crimson-a900: color(display-p3 0.9961 0.3647 0.2706 / 0.675);
      --crimson-a1000: color(display-p3 0.9961 0.4118 0.3216 / 0.741);
      --crimson-a1100: color(display-p3 1 0.5451 0.4627 / 0.996);
      --crimson-a1200: color(display-p3 1 0.8275 0.7922 / 0.984);

      --crimson-contrast: #fff;
      --crimson-surface: color(display-p3 0.1922 0.0745 0.0588 / 0.5);
      --crimson-indicator: oklch(54.3% 0.174 29.7);
      --crimson-track: oklch(54.3% 0.174 29.7);
    }
  }
}

/* ---- midnight ---- */
: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);
    }
  }
}

/* ---- rose ---- */
:root, .light, .light-theme {
  --rose-100: #fefcfc;
  --rose-200: #fdf8f9;
  --rose-250: #fbf2f4;
  --rose-300: #f8edef;
  --rose-400: #f3e3e7;
  --rose-500: #efd9de;
  --rose-600: #ebcdd5;
  --rose-700: #e6bec8;
  --rose-800: #d9a5b3;
  --rose-900: #9b6575;
  --rose-1000: #8f5a69;
  --rose-1100: #834e5e;
  --rose-1200: #332428;

  --rose-a100: #aa000003;
  --rose-a200: #b6002407;
  --rose-a250: #b100270d;
  --rose-a300: #9c001c12;
  --rose-a400: #9200241c;
  --rose-a500: #94002226;
  --rose-a600: #99002932;
  --rose-a700: #9d002741;
  --rose-a800: #9300285a;
  --rose-a900: #59001a9a;
  --rose-a1000: #520017a5;
  --rose-a1100: #4c0017b1;
  --rose-a1200: #110005db;

  --rose-contrast: #fff;
  --rose-surface: #fcf6f8cc;
  --rose-indicator: #9b6575;
  --rose-track: #9b6575;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --rose-100: oklch(99.3% 0.0021 0.39);
      --rose-200: oklch(98.3% 0.0055 0.39);
      --rose-250: oklch(96.9% 0.01 0.39);
      --rose-300: oklch(95.5% 0.0122 0.39);
      --rose-400: oklch(93% 0.0182 0.39);
      --rose-500: oklch(90.5% 0.0251 0.39);
      --rose-600: oklch(87.6% 0.0352 0.39);
      --rose-700: oklch(83.9% 0.0475 0.39);
      --rose-800: oklch(77.4% 0.0638 0.39);
      --rose-900: oklch(56.9% 0.0726 0.39);
      --rose-1000: oklch(53.1% 0.0723 0.39);
      --rose-1100: oklch(49% 0.0742 0.39);
      --rose-1200: oklch(28% 0.0237 0.39);

      --rose-a100: color(display-p3 0.6667 0 0 / 0.012);
      --rose-a200: color(display-p3 0.5725 0 0.1412 / 0.027);
      --rose-a250: color(display-p3 0.5373 0 0.1529 / 0.051);
      --rose-a300: color(display-p3 0.502 0 0.1647 / 0.071);
      --rose-a400: color(display-p3 0.4431 0 0.1098 / 0.106);
      --rose-a500: color(display-p3 0.4588 0 0.1098 / 0.145);
      --rose-a600: color(display-p3 0.4902 0 0.1412 / 0.192);
      --rose-a700: color(display-p3 0.502 0 0.1412 / 0.251);
      --rose-a800: color(display-p3 0.4784 0 0.1373 / 0.345);
      --rose-a900: color(display-p3 0.2902 0 0.0902 / 0.596);
      --rose-a1000: color(display-p3 0.2627 0 0.0863 / 0.639);
      --rose-a1100: color(display-p3 0.251 0 0.0784 / 0.686);
      --rose-a1200: color(display-p3 0.0549 0 0.0157 / 0.855);

      --rose-contrast: #fff;
      --rose-surface: color(display-p3 0.9882 0.9647 0.9725 / 0.8);
      --rose-indicator: oklch(56.9% 0.0726 0.39);
      --rose-track: oklch(56.9% 0.0726 0.39);
    }
  }
}

.dark, .dark-theme {
  --rose-100: #121011;
  --rose-200: #1c1819;
  --rose-250: #221c1d;
  --rose-300: #282022;
  --rose-400: #32272a;
  --rose-500: #3e2e32;
  --rose-600: #4c373d;
  --rose-700: #5f434b;
  --rose-800: #7d5762;
  --rose-900: #9b6575;
  --rose-1000: #a87181;
  --rose-1100: #c68b9c;
  --rose-1200: #fddfe7;

  --rose-a100: #90001102;
  --rose-a200: #fba6bb0c;
  --rose-a250: #f5a5b213;
  --rose-a300: #fcaabe19;
  --rose-a400: #fbadc224;
  --rose-a500: #fba8bd31;
  --rose-a600: #fca8c040;
  --rose-a700: #fea9c154;
  --rose-a800: #feabc374;
  --rose-a900: #ffa2bd94;
  --rose-a1000: #ffa8c1a2;
  --rose-a1100: #ffb1c8c2;
  --rose-a1200: #ffe1e9fd;

  --rose-contrast: #fff;
  --rose-surface: #271f2180;
  --rose-indicator: #9b6575;
  --rose-track: #9b6575;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --rose-100: oklch(17.6% 0.0039 0.39);
      --rose-200: oklch(21.4% 0.0066 0.39);
      --rose-250: oklch(23.4% 0.0095 0.39);
      --rose-300: oklch(25.4% 0.0128 0.39);
      --rose-400: oklch(28.6% 0.0172 0.39);
      --rose-500: oklch(32.1% 0.0243 0.39);
      --rose-600: oklch(36.2% 0.0313 0.39);
      --rose-700: oklch(41.6% 0.0404 0.39);
      --rose-800: oklch(50.1% 0.0525 0.39);
      --rose-900: oklch(56.9% 0.0726 0.39);
      --rose-1000: oklch(61% 0.0725 0.39);
      --rose-1100: oklch(70% 0.075 0.39);
      --rose-1200: oklch(93.1% 0.0346 0.39);

      --rose-a100: color(display-p3 0.5647 0 0.0667 / 0.008);
      --rose-a200: color(display-p3 0.9765 0.702 0.7922 / 0.043);
      --rose-a250: color(display-p3 0.9569 0.6784 0.7333 / 0.071);
      --rose-a300: color(display-p3 0.9843 0.6902 0.7765 / 0.094);
      --rose-a400: color(display-p3 0.9804 0.7137 0.8 / 0.133);
      --rose-a500: color(display-p3 1 0.7333 0.8 / 0.176);
      --rose-a600: color(display-p3 1 0.7176 0.8 / 0.235);
      --rose-a700: color(display-p3 0.9922 0.7059 0.7922 / 0.314);
      --rose-a800: color(display-p3 0.9922 0.7216 0.8039 / 0.431);
      --rose-a900: color(display-p3 0.9961 0.6824 0.7804 / 0.549);
      --rose-a1000: color(display-p3 0.9961 0.702 0.7922 / 0.604);
      --rose-a1100: color(display-p3 0.9961 0.7373 0.8196 / 0.725);
      --rose-a1200: color(display-p3 1 0.902 0.9294 / 0.973);

      --rose-contrast: #fff;
      --rose-surface: color(display-p3 0.1529 0.1216 0.1294 / 0.5);
      --rose-indicator: oklch(56.9% 0.0726 0.39);
      --rose-track: oklch(56.9% 0.0726 0.39);
    }
  }
}