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