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