:root, .light, .light-theme {
  --sage-1: #fbfdfc;
  --sage-2: #f7f9f8;
  --sage-3: #eef1f0;
  --sage-4: #e6e9e8;
  --sage-5: #dfe2e0;
  --sage-6: #d7dad9;
  --sage-7: #cbcfcd;
  --sage-8: #b8bcba;
  --sage-9: #868e8b;
  --sage-10: #7c8481;
  --sage-11: #5f6563;
  --sage-12: #1a211e;
  --sage-a1: #00804004;
  --sage-a2: #00402008;
  --sage-a3: #002d1e11;
  --sage-a4: #001f1519;
  --sage-a5: #00180820;
  --sage-a6: #00140d28;
  --sage-a7: #00140a34;
  --sage-a8: #000f0847;
  --sage-a9: #00110b79;
  --sage-a10: #00100a83;
  --sage-a11: #000a07a0;
  --sage-a12: #000805e5;
  --sage-surface: #fffc;
  --sage-indicator: var(--sage-9);
  --sage-track: var(--sage-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --sage-1: color(display-p3 .986 .992 .988);
      --sage-2: color(display-p3 .97 .977 .974);
      --sage-3: color(display-p3 .935 .944 .94);
      --sage-4: color(display-p3 .904 .913 .909);
      --sage-5: color(display-p3 .875 .885 .88);
      --sage-6: color(display-p3 .844 .854 .849);
      --sage-7: color(display-p3 .8 .811 .806);
      --sage-8: color(display-p3 .725 .738 .732);
      --sage-9: color(display-p3 .531 .556 .546);
      --sage-10: color(display-p3 .492 .515 .506);
      --sage-11: color(display-p3 .377 .395 .389);
      --sage-12: color(display-p3 .107 .129 .118);
      --sage-a1: color(display-p3 .024 .514 .267 / .016);
      --sage-a2: color(display-p3 .02 .267 .145 / .032);
      --sage-a3: color(display-p3 .008 .184 .125 / .067);
      --sage-a4: color(display-p3 .012 .094 .051 / .095);
      --sage-a5: color(display-p3 .008 .098 .035 / .126);
      --sage-a6: color(display-p3 .004 .078 .027 / .157);
      --sage-a7: color(display-p3 0 .059 .039 / .2);
      --sage-a8: color(display-p3 .004 .047 .031 / .275);
      --sage-a9: color(display-p3 .004 .059 .035 / .471);
      --sage-a10: color(display-p3 0 .047 .031 / .51);
      --sage-a11: color(display-p3 0 .031 .02 / .624);
      --sage-a12: color(display-p3 0 .027 .012 / .895);
      --sage-surface: color(display-p3 1 1 1 / .8);
    }
  }
}

.dark, .dark-theme {
  --sage-1: #101211;
  --sage-2: #171918;
  --sage-3: #202221;
  --sage-4: #272a29;
  --sage-5: #2e3130;
  --sage-6: #373b39;
  --sage-7: #444947;
  --sage-8: #5b625f;
  --sage-9: #63706b;
  --sage-10: #717d79;
  --sage-11: #adb5b2;
  --sage-12: #eceeed;
  --sage-a1: #0000;
  --sage-a2: #f0f2f108;
  --sage-a3: #f3f5f412;
  --sage-a4: #f2fefd1a;
  --sage-a5: #f1fbfa22;
  --sage-a6: #edfbf42d;
  --sage-a7: #edfcf73c;
  --sage-a8: #ebfdf657;
  --sage-a9: #dffdf266;
  --sage-a10: #e5fdf674;
  --sage-a11: #f4fefbb0;
  --sage-a12: #fdfffeed;
  --sage-surface: #1e201f80;
  --sage-indicator: var(--sage-9);
  --sage-track: var(--sage-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --sage-1: color(display-p3 .064 .07 .067);
      --sage-2: color(display-p3 .092 .098 .094);
      --sage-3: color(display-p3 .128 .135 .131);
      --sage-4: color(display-p3 .155 .164 .159);
      --sage-5: color(display-p3 .183 .193 .188);
      --sage-6: color(display-p3 .218 .23 .224);
      --sage-7: color(display-p3 .269 .285 .277);
      --sage-8: color(display-p3 .362 .382 .373);
      --sage-9: color(display-p3 .398 .438 .421);
      --sage-10: color(display-p3 .453 .49 .474);
      --sage-11: color(display-p3 .685 .709 .697);
      --sage-12: color(display-p3 .927 .933 .93);
      --sage-a1: color(display-p3 0 0 0 / 0);
      --sage-a2: color(display-p3 .976 .988 .984 / .03);
      --sage-a3: color(display-p3 .992 .945 .941 / .072);
      --sage-a4: color(display-p3 .988 .996 .992 / .102);
      --sage-a5: color(display-p3 .992 1 .996 / .131);
      --sage-a6: color(display-p3 .973 1 .976 / .173);
      --sage-a7: color(display-p3 .957 1 .976 / .233);
      --sage-a8: color(display-p3 .957 1 .984 / .334);
      --sage-a9: color(display-p3 .902 1 .957 / .397);
      --sage-a10: color(display-p3 .929 1 .973 / .452);
      --sage-a11: color(display-p3 .969 1 .988 / .688);
      --sage-a12: color(display-p3 .992 1 .996 / .929);
      --sage-surface: color(display-p3 .1176 .1255 .1176 / .5);
    }
  }
}

:root {
  --sage-contrast: white;
}