:root, .light, .light-theme {
  --pink-1: #fffcfd;
  --pink-2: #fdf7fa;
  --pink-3: #fceaf2;
  --pink-4: #f9dee9;
  --pink-5: #f3d1e0;
  --pink-6: #ebc2d4;
  --pink-7: #e1b0c6;
  --pink-8: #d699b5;
  --pink-9: #5e2443;
  --pink-10: #723655;
  --pink-11: #9b5b7a;
  --pink-12: #5a203f;

  --pink-a1: #ff005503;
  --pink-a2: #c0006008;
  --pink-a3: #db006215;
  --pink-a4: #d1005521;
  --pink-a5: #bd00542e;
  --pink-a6: #ac004c3d;
  --pink-a7: #9f00484f;
  --pink-a8: #99004666;
  --pink-a9: #440024db;
  --pink-a10: #4c0027c9;
  --pink-a11: #640030a4;
  --pink-a12: #420024df;

  --pink-contrast: #fff;
  --pink-surface: #fdf5f9cc;
  --pink-indicator: #5e2443;
  --pink-track: #5e2443;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --pink-1: oklch(99.4% 0.0027 349.6);
      --pink-2: oklch(98.2% 0.0066 349.6);
      --pink-3: oklch(95.4% 0.0213 349.6);
      --pink-4: oklch(92.5% 0.0334 349.6);
      --pink-5: oklch(89.3% 0.0436 349.6);
      --pink-6: oklch(85.5% 0.0526 349.6);
      --pink-7: oklch(80.8% 0.064 349.6);
      --pink-8: oklch(75% 0.0809 349.6);
      --pink-9: oklch(35.6% 0.093 349.6);
      --pink-10: oklch(42.1% 0.093 349.6);
      --pink-11: oklch(55.2% 0.093 349.6);
      --pink-12: oklch(34.2% 0.093 349.6);

      --pink-a1: color(display-p3 0.6745 0.0235 0.349 / 0.012);
      --pink-a2: color(display-p3 0.6353 0.0196 0.3882 / 0.032);
      --pink-a3: color(display-p3 0.7059 0.0078 0.3569 / 0.079);
      --pink-a4: color(display-p3 0.6588 0.0078 0.3176 / 0.126);
      --pink-a5: color(display-p3 0.6039 0.0039 0.2941 / 0.177);
      --pink-a6: color(display-p3 0.5451 0.0039 0.2588 / 0.232);
      --pink-a7: color(display-p3 0.5098 0.0039 0.2471 / 0.302);
      --pink-a8: color(display-p3 0.498 0.0039 0.2431 / 0.389);
      --pink-a9: color(display-p3 0.2196 0 0.1216 / 0.844);
      --pink-a10: color(display-p3 0.2471 0 0.1373 / 0.777);
      --pink-a11: color(display-p3 0.3255 0 0.1686 / 0.632);
      --pink-a12: color(display-p3 0.2157 0 0.1176 / 0.859);

      --pink-contrast: #fff;
      --pink-surface: color(display-p3 0.9843 0.9647 0.9765 / 0.8);
      --pink-indicator: oklch(35.6% 0.093 349.6);
      --pink-track: oklch(35.6% 0.093 349.6);
    }
  }
}

:root, .light, .light-theme {
  --gray-1: #fcfcfd;
  --gray-2: #f9f9fb;
  --gray-3: #eff0f3;
  --gray-4: #e7e8ec;
  --gray-5: #e0e1e6;
  --gray-6: #d8d9e0;
  --gray-7: #cdced7;
  --gray-8: #b9bbc6;
  --gray-9: #8b8d98;
  --gray-10: #80828d;
  --gray-11: #62636c;
  --gray-12: #1e1f24;

  --gray-a1: #00005503;
  --gray-a2: #00005506;
  --gray-a3: #00104010;
  --gray-a4: #000b3618;
  --gray-a5: #0009321f;
  --gray-a6: #00073527;
  --gray-a7: #00063332;
  --gray-a8: #00083046;
  --gray-a9: #00051d74;
  --gray-a10: #00051b7f;
  --gray-a11: #0002119d;
  --gray-a12: #000107e1;

  --gray-contrast: #FFFFFF;
  --gray-surface: #ffffffcc;
  --gray-indicator: #8b8d98;
  --gray-track: #8b8d98;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --gray-1: oklch(99.1% 0.0015 277.7);
      --gray-2: oklch(98.2% 0.003 277.7);
      --gray-3: oklch(95.6% 0.0045 277.7);
      --gray-4: oklch(93.1% 0.0061 277.7);
      --gray-5: oklch(91% 0.0077 277.7);
      --gray-6: oklch(88.8% 0.0093 277.7);
      --gray-7: oklch(85.3% 0.0117 277.7);
      --gray-8: oklch(79.4% 0.016 277.7);
      --gray-9: oklch(64.6% 0.0165 277.7);
      --gray-10: oklch(61% 0.0161 277.7);
      --gray-11: oklch(50.3% 0.0139 277.7);
      --gray-12: oklch(24.1% 0.0099 277.7);

      --gray-a1: color(display-p3 0.0235 0.0235 0.349 / 0.012);
      --gray-a2: color(display-p3 0.0235 0.0235 0.349 / 0.024);
      --gray-a3: color(display-p3 0.0078 0.0667 0.2549 / 0.063);
      --gray-a4: color(display-p3 0.0118 0.051 0.2157 / 0.095);
      --gray-a5: color(display-p3 0.0039 0.0392 0.2 / 0.122);
      --gray-a6: color(display-p3 0.0039 0.0275 0.1804 / 0.153);
      --gray-a7: color(display-p3 0.0078 0.0275 0.1843 / 0.197);
      --gray-a8: color(display-p3 0.0039 0.0314 0.1765 / 0.275);
      --gray-a9: color(display-p3 0.0039 0.0196 0.1059 / 0.455);
      --gray-a10: color(display-p3 0.0039 0.0196 0.098 / 0.499);
      --gray-a11: color(display-p3 0 0.0078 0.0588 / 0.616);
      --gray-a12: color(display-p3 0 0.0039 0.0275 / 0.883);

      --gray-contrast: #FFFFFF;
      --gray-surface: color(display-p3 1 1 1 / 80%);
      --gray-indicator: oklch(64.6% 0.0165 277.7);
      --gray-track: oklch(64.6% 0.0165 277.7);
    }
  }
}

:root, .light, .light-theme, .radix-themes {
  --color-background: #fff;
}

.dark, .dark-theme {
  --pink-1: #000;
  --pink-2: #180d12;
  --pink-3: #2f1724;
  --pink-4: #431b31;
  --pink-5: #51243c;
  --pink-6: #61314a;
  --pink-7: #79425f;
  --pink-8: #9c557a;
  --pink-9: #ce6a9f;
  --pink-10: #c15e93;
  --pink-11: #f896c8;
  --pink-12: #f6d5e4;

  --pink-a1: #00000000;
  --pink-a2: #ff8bc018;
  --pink-a3: #ff7dc42f;
  --pink-a4: #ff67bb43;
  --pink-a5: #ff72bd51;
  --pink-a6: #ff81c361;
  --pink-a7: #ff8cc979;
  --pink-a8: #ff8bc89c;
  --pink-a9: #ff83c5ce;
  --pink-a10: #ff7cc2c1;
  --pink-a11: #ff9acef8;
  --pink-a12: #ffddecf6;

  --pink-contrast: #fff;
  --pink-surface: #301a2480;
  --pink-indicator: #ce6a9f;
  --pink-track: #ce6a9f;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --pink-1: oklch(0% 0.012 348.6);
      --pink-2: oklch(17.6% 0.0211 348.6);
      --pink-3: oklch(24.5% 0.0433 348.6);
      --pink-4: oklch(29% 0.069 348.6);
      --pink-5: oklch(33.3% 0.0742 348.6);
      --pink-6: oklch(38.5% 0.0765 348.6);
      --pink-7: oklch(45.6% 0.085 348.6);
      --pink-8: oklch(54.4% 0.1035 348.6);
      --pink-9: oklch(65.6% 0.1401 348.6);
      --pink-10: oklch(61.6% 0.1401 348.6);
      --pink-11: oklch(78.8% 0.1321 348.6);
      --pink-12: oklch(90.6% 0.0412 348.6);

      --pink-a1: color(display-p3 0 0 0 / 0);
      --pink-a2: color(display-p3 0.9922 0.5882 0.8118 / 0.087);
      --pink-a3: color(display-p3 1 0.5451 0.7961 / 0.173);
      --pink-a4: color(display-p3 1 0.4667 0.7725 / 0.244);
      --pink-a5: color(display-p3 1 0.5059 0.7843 / 0.295);
      --pink-a6: color(display-p3 1 0.5608 0.8039 / 0.357);
      --pink-a7: color(display-p3 1 0.6078 0.8235 / 0.448);
      --pink-a8: color(display-p3 1 0.6118 0.8235 / 0.573);
      --pink-a9: color(display-p3 1 0.5765 0.8157 / 0.757);
      --pink-a10: color(display-p3 1 0.549 0.8078 / 0.706);
      --pink-a11: color(display-p3 1 0.6627 0.8471 / 0.918);
      --pink-a12: color(display-p3 1 0.8863 0.9412 / 0.946);

      --pink-contrast: #fff;
      --pink-surface: color(display-p3 0.1725 0.102 0.1412 / 0.5);
      --pink-indicator: oklch(65.6% 0.1401 348.6);
      --pink-track: oklch(65.6% 0.1401 348.6);
    }
  }
}

.dark, .dark-theme {
  --gray-1: #000;
  --gray-2: #121315;
  --gray-3: #1f1f22;
  --gray-4: #27282c;
  --gray-5: #2f3035;
  --gray-6: #393a3f;
  --gray-7: #46474e;
  --gray-8: #5e606a;
  --gray-9: #6c6e79;
  --gray-10: #797b86;
  --gray-11: #b2b3bd;
  --gray-12: #eeeef0;

  --gray-a1: #00000000;
  --gray-a2: #dbe7ff15;
  --gray-a3: #e9e9ff22;
  --gray-a4: #e3e8ff2c;
  --gray-a5: #e3e7ff35;
  --gray-a6: #e7ebff3f;
  --gray-a7: #e5e9ff4e;
  --gray-a8: #e3e7ff6a;
  --gray-a9: #e4e8ff79;
  --gray-a10: #e7ebff86;
  --gray-a11: #f0f2ffbd;
  --gray-a12: #fdfdfff0;

  --gray-contrast: #FFFFFF;
  --gray-surface: rgba(0, 0, 0, 0.05);
  --gray-indicator: #6c6e79;
  --gray-track: #6c6e79;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --gray-1: oklch(0% 0.0042 277.7);
      --gray-2: oklch(18.5% 0.004 277.7);
      --gray-3: oklch(24% 0.0055 277.7);
      --gray-4: oklch(27.7% 0.0075 277.7);
      --gray-5: oklch(31% 0.0089 277.7);
      --gray-6: oklch(34.8% 0.01 277.7);
      --gray-7: oklch(40% 0.0121 277.7);
      --gray-8: oklch(49.1% 0.0157 277.7);
      --gray-9: oklch(54% 0.0167 277.7);
      --gray-10: oklch(58.6% 0.0165 277.7);
      --gray-11: oklch(77% 0.0138 277.7);
      --gray-12: oklch(94.9% 0.0026 277.7);

      --gray-a1: color(display-p3 0 0 0 / 0);
      --gray-a2: color(display-p3 0.851 0.898 0.9961 / 0.083);
      --gray-a3: color(display-p3 0.9098 0.9098 0.9961 / 0.134);
      --gray-a4: color(display-p3 0.8863 0.9098 1 / 0.173);
      --gray-a5: color(display-p3 0.8863 0.9059 1 / 0.208);
      --gray-a6: color(display-p3 0.902 0.9176 1 / 0.248);
      --gray-a7: color(display-p3 0.9098 0.9255 1 / 0.302);
      --gray-a8: color(display-p3 0.898 0.9176 1 / 0.412);
      --gray-a9: color(display-p3 0.902 0.9176 1 / 0.471);
      --gray-a10: color(display-p3 0.9098 0.9255 1 / 0.522);
      --gray-a11: color(display-p3 0.9451 0.9529 1 / 0.738);
      --gray-a12: color(display-p3 0.9922 0.9922 1 / 0.942);

      --gray-contrast: #FFFFFF;
      --gray-surface: color(display-p3 0 0 0 / 5%);
      --gray-indicator: oklch(54% 0.0167 277.7);
      --gray-track: oklch(54% 0.0167 277.7);
    }
  }
}

.dark, .dark-theme, :is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
  --color-background: #000;
}