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