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