:root, .light, .light-theme {
  --grass-1: #fbfefb;
  --grass-2: #f5fbf5;
  --grass-3: #e9f6e9;
  --grass-4: #daf1db;
  --grass-5: #c9e8ca;
  --grass-6: #b2ddb5;
  --grass-7: #94ce9a;
  --grass-8: #65ba74;
  --grass-9: #46a758;
  --grass-10: #3e9b4f;
  --grass-11: #2a7e3b;
  --grass-12: #203c25;
  --grass-a1: #00c00004;
  --grass-a2: #0099000a;
  --grass-a3: #00970016;
  --grass-a4: #009f0725;
  --grass-a5: #00930536;
  --grass-a6: #008f0a4d;
  --grass-a7: #018b0f6b;
  --grass-a8: #008d199a;
  --grass-a9: #008619b9;
  --grass-a10: #007b17c1;
  --grass-a11: #006514d5;
  --grass-a12: #002006df;
  --grass-surface: #f3faf3cc;
  --grass-indicator: var(--grass-9);
  --grass-track: var(--grass-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --grass-1: color(display-p3 .986 .996 .985);
      --grass-2: color(display-p3 .966 .983 .964);
      --grass-3: color(display-p3 .923 .965 .917);
      --grass-4: color(display-p3 .872 .94 .865);
      --grass-5: color(display-p3 .811 .908 .802);
      --grass-6: color(display-p3 .733 .864 .724);
      --grass-7: color(display-p3 .628 .803 .622);
      --grass-8: color(display-p3 .477 .72 .482);
      --grass-9: color(display-p3 .38 .647 .378);
      --grass-10: color(display-p3 .344 .598 .342);
      --grass-11: color(display-p3 .263 .488 .261);
      --grass-12: color(display-p3 .151 .233 .153);
      --grass-a1: color(display-p3 .024 .757 .024 / .016);
      --grass-a2: color(display-p3 .024 .565 .024 / .036);
      --grass-a3: color(display-p3 .059 .576 .008 / .083);
      --grass-a4: color(display-p3 .035 .565 .008 / .134);
      --grass-a5: color(display-p3 .047 .545 .008 / .197);
      --grass-a6: color(display-p3 .031 .502 .004 / .275);
      --grass-a7: color(display-p3 .012 .482 .004 / .377);
      --grass-a8: color(display-p3 0 .467 .008 / .522);
      --grass-a9: color(display-p3 .008 .435 0 / .624);
      --grass-a10: color(display-p3 .008 .388 0 / .659);
      --grass-a11: color(display-p3 .263 .488 .261);
      --grass-a12: color(display-p3 .151 .233 .153);
      --grass-surface: color(display-p3 .9569 .9804 .9569 / .8);
    }
  }
}

.dark, .dark-theme {
  --grass-1: #0e1511;
  --grass-2: #141a15;
  --grass-3: #1b2a1e;
  --grass-4: #1d3a24;
  --grass-5: #25482d;
  --grass-6: #2d5736;
  --grass-7: #366740;
  --grass-8: #3e7949;
  --grass-9: #46a758;
  --grass-10: #53b365;
  --grass-11: #71d083;
  --grass-12: #c2f0c2;
  --grass-a1: #00de1205;
  --grass-a2: #5ef7780a;
  --grass-a3: #70fe8c1b;
  --grass-a4: #57ff802c;
  --grass-a5: #68ff8b3b;
  --grass-a6: #71ff8f4b;
  --grass-a7: #77fd925d;
  --grass-a8: #77fd9070;
  --grass-a9: #65ff82a1;
  --grass-a10: #72ff8dae;
  --grass-a11: #89ff9fcd;
  --grass-a12: #ceffceef;
  --grass-surface: #19231b80;
  --grass-indicator: var(--grass-9);
  --grass-track: var(--grass-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --grass-1: color(display-p3 .062 .083 .067);
      --grass-2: color(display-p3 .083 .103 .085);
      --grass-3: color(display-p3 .118 .163 .122);
      --grass-4: color(display-p3 .142 .225 .15);
      --grass-5: color(display-p3 .178 .279 .186);
      --grass-6: color(display-p3 .217 .337 .224);
      --grass-7: color(display-p3 .258 .4 .264);
      --grass-8: color(display-p3 .302 .47 .305);
      --grass-9: color(display-p3 .38 .647 .378);
      --grass-10: color(display-p3 .426 .694 .426);
      --grass-11: color(display-p3 .535 .807 .542);
      --grass-12: color(display-p3 .797 .936 .776);
      --grass-a1: color(display-p3 0 .992 .071 / .017);
      --grass-a2: color(display-p3 .482 .996 .584 / .038);
      --grass-a3: color(display-p3 .549 .992 .588 / .106);
      --grass-a4: color(display-p3 .51 .996 .557 / .169);
      --grass-a5: color(display-p3 .553 1 .588 / .227);
      --grass-a6: color(display-p3 .584 1 .608 / .29);
      --grass-a7: color(display-p3 .604 1 .616 / .358);
      --grass-a8: color(display-p3 .608 1 .62 / .433);
      --grass-a9: color(display-p3 .573 1 .569 / .622);
      --grass-a10: color(display-p3 .6 .996 .6 / .673);
      --grass-a11: color(display-p3 .535 .807 .542);
      --grass-a12: color(display-p3 .797 .936 .776);
      --grass-surface: color(display-p3 .102 .1333 .102 / .5);
    }
  }
}

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