:root, .light, .light-theme {
  --sage-100: #fbfefd;
  --sage-200: #f4fbf8;
  --sage-250: #edf9f4;
  --sage-300: #e6f6ef;
  --sage-400: #d7f0e5;
  --sage-500: #c5e8d9;
  --sage-600: #b0dcc9;
  --sage-700: #92ccb4;
  --sage-800: #66b798;
  --sage-900: #008562;
  --sage-1000: #007758;
  --sage-1100: #006a4e;
  --sage-1200: #1f3a30;

  --sage-a100: #00bf8004;
  --sage-a200: #00a25d0b;
  --sage-a250: #00aa6312;
  --sage-a300: #00a35c19;
  --sage-a400: #009f5928;
  --sage-a500: #009a583a;
  --sage-a600: #008e514f;
  --sage-a700: #0088506d;
  --sage-a800: #00875399;
  --sage-a900: #008562ff;
  --sage-a1000: #007758ff;
  --sage-a1100: #006a4eff;
  --sage-a1200: #001f13e0;

  --sage-contrast: #fff;
  --sage-surface: #f1faf6cc;
  --sage-indicator: #008562;
  --sage-track: #008562;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --sage-100: oklch(99.4% 0.0034 166.53);
      --sage-200: oklch(98.2% 0.0084 166.53);
      --sage-250: oklch(97.2% 0.0142 166.53);
      --sage-300: oklch(95.9% 0.0192 166.53);
      --sage-400: oklch(93.4% 0.0301 166.53);
      --sage-500: oklch(90.2% 0.0419 166.53);
      --sage-600: oklch(85.8% 0.053 166.53);
      --sage-700: oklch(79.9% 0.069 166.53);
      --sage-800: oklch(71.9% 0.0927 166.53);
      --sage-900: oklch(54.7% 0.1128 166.53);
      --sage-1000: oklch(50.5% 0.1035 166.53);
      --sage-1100: oklch(46.5% 0.0954 166.53);
      --sage-1200: oklch(32.3% 0.0379 166.53);

      --sage-a100: color(display-p3 0 0.6667 0.3333 / 0.012);
      --sage-a200: color(display-p3 0 0.6 0.298 / 0.039);
      --sage-a250: color(display-p3 0 0.6235 0.3137 / 0.063);
      --sage-a300: color(display-p3 0 0.5451 0.2745 / 0.086);
      --sage-a400: color(display-p3 0 0.5412 0.2588 / 0.137);
      --sage-a500: color(display-p3 0 0.5294 0.2549 / 0.2);
      --sage-a600: color(display-p3 0 0.4863 0.2431 / 0.275);
      --sage-a700: color(display-p3 0 0.4471 0.2275 / 0.376);
      --sage-a800: color(display-p3 0 0.4431 0.2314 / 0.522);
      --sage-a900: color(display-p3 0 0.3686 0.2118 / 0.773);
      --sage-a1000: color(display-p3 0 0.3216 0.1882 / 0.8);
      --sage-a1100: color(display-p3 0 0.2824 0.1608 / 0.824);
      --sage-a1200: color(display-p3 0 0.0863 0.0471 / 0.851);

      --sage-contrast: #fff;
      --sage-surface: color(display-p3 0.9451 0.9804 0.9647 / 0.8);
      --sage-indicator: oklch(54.7% 0.1128 166.53);
      --sage-track: oklch(54.7% 0.1128 166.53);
    }
  }
}

.dark, .dark-theme {
  --sage-100: #0d1310;
  --sage-200: #141b18;
  --sage-250: #16231e;
  --sage-300: #172c24;
  --sage-400: #1b392e;
  --sage-500: #234539;
  --sage-600: #2e5445;
  --sage-700: #3a6554;
  --sage-800: #3e725e;
  --sage-900: #008562;
  --sage-1000: #2f906f;
  --sage-1100: #67bb9a;
  --sage-1200: #bcecd8;

  --sage-a100: #00bb0003;
  --sage-a200: #57f9b30b;
  --sage-a250: #51f6b714;
  --sage-a300: #46feb81d;
  --sage-a400: #4cfebd2b;
  --sage-a500: #63fec738;
  --sage-a600: #78fec948;
  --sage-a700: #85ffcf5a;
  --sage-a800: #7fffce68;
  --sage-a900: #00feb67d;
  --sage-a1000: #49fdc089;
  --sage-a1100: #89fed0b7;
  --sage-a1200: #cbffe9eb;

  --sage-contrast: #fff;
  --sage-surface: #17251f80;
  --sage-indicator: #008562;
  --sage-track: #008562;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --sage-100: oklch(17.9% 0.0111 166.53);
      --sage-200: oklch(21.4% 0.0119 166.53);
      --sage-250: oklch(24.2% 0.0205 166.53);
      --sage-300: oklch(27.2% 0.0311 166.53);
      --sage-400: oklch(31.7% 0.0415 166.53);
      --sage-500: oklch(36% 0.0454 166.53);
      --sage-600: oklch(41.3% 0.0508 166.53);
      --sage-700: oklch(47% 0.0559 166.53);
      --sage-800: oklch(50.9% 0.0651 166.53);
      --sage-900: oklch(54.7% 0.1128 166.53);
      --sage-1000: oklch(58.8% 0.1035 166.53);
      --sage-1100: oklch(72.9% 0.0962 166.53);
      --sage-1200: oklch(90.4% 0.0565 166.53);

      --sage-a100: color(display-p3 0 0.7333 0 / 0.012);
      --sage-a200: color(display-p3 0.4314 0.9765 0.702 / 0.043);
      --sage-a250: color(display-p3 0.4667 0.9647 0.7176 / 0.078);
      --sage-a300: color(display-p3 0.4588 0.9961 0.7451 / 0.11);
      --sage-a400: color(display-p3 0.4941 0.9961 0.7569 / 0.165);
      --sage-a500: color(display-p3 0.5569 0.9922 0.7922 / 0.216);
      --sage-a600: color(display-p3 0.6 0.9961 0.8118 / 0.278);
      --sage-a700: color(display-p3 0.6392 1 0.8314 / 0.349);
      --sage-a800: color(display-p3 0.6314 1 0.8235 / 0.404);
      --sage-a900: color(display-p3 0.4 0.9922 0.7412 / 0.482);
      --sage-a1000: color(display-p3 0.5059 1 0.7843 / 0.525);
      --sage-a1100: color(display-p3 0.6549 1 0.8392 / 0.706);
      --sage-a1200: color(display-p3 0.8392 1 0.9176 / 0.918);

      --sage-contrast: #fff;
      --sage-surface: color(display-p3 0.0902 0.1451 0.1216 / 0.5);
      --sage-indicator: oklch(54.7% 0.1128 166.53);
      --sage-track: oklch(54.7% 0.1128 166.53);
    }
  }
}