:root, .light, .light-theme {
  --brown-1: #fefdfc;
  --brown-2: #fcf9f6;
  --brown-3: #f6eee7;
  --brown-4: #f0e4d9;
  --brown-5: #ebdaca;
  --brown-6: #e4cdb7;
  --brown-7: #dcbc9f;
  --brown-8: #cea37e;
  --brown-9: #ad7f58;
  --brown-10: #a07553;
  --brown-11: #815e46;
  --brown-12: #3e332e;
  --brown-a1: #aa550003;
  --brown-a2: #aa550009;
  --brown-a3: #a04b0018;
  --brown-a4: #9b4a0026;
  --brown-a5: #9f4d0035;
  --brown-a6: #a04e0048;
  --brown-a7: #a34e0060;
  --brown-a8: #9f4a0081;
  --brown-a9: #823c00a7;
  --brown-a10: #723300ac;
  --brown-a11: #522100b9;
  --brown-a12: #140600d1;
  --brown-surface: #fbf8f4cc;
  --brown-indicator: var(--brown-9);
  --brown-track: var(--brown-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --brown-1: color(display-p3 .995 .992 .989);
      --brown-2: color(display-p3 .987 .976 .964);
      --brown-3: color(display-p3 .959 .936 .909);
      --brown-4: color(display-p3 .934 .897 .855);
      --brown-5: color(display-p3 .909 .856 .798);
      --brown-6: color(display-p3 .88 .808 .73);
      --brown-7: color(display-p3 .841 .742 .639);
      --brown-8: color(display-p3 .782 .647 .514);
      --brown-9: color(display-p3 .651 .505 .368);
      --brown-10: color(display-p3 .601 .465 .344);
      --brown-11: color(display-p3 .485 .374 .288);
      --brown-12: color(display-p3 .236 .202 .183);
      --brown-a1: color(display-p3 .675 .349 .024 / .012);
      --brown-a2: color(display-p3 .675 .349 .024 / .036);
      --brown-a3: color(display-p3 .573 .314 .012 / .091);
      --brown-a4: color(display-p3 .545 .302 .008 / .146);
      --brown-a5: color(display-p3 .561 .29 .004 / .204);
      --brown-a6: color(display-p3 .553 .294 .004 / .271);
      --brown-a7: color(display-p3 .557 .286 .004 / .361);
      --brown-a8: color(display-p3 .549 .275 .004 / .487);
      --brown-a9: color(display-p3 .447 .22 0 / .632);
      --brown-a10: color(display-p3 .388 .188 0 / .655);
      --brown-a11: color(display-p3 .485 .374 .288);
      --brown-a12: color(display-p3 .236 .202 .183);
      --brown-surface: color(display-p3 .9843 .9725 .9569 / .8);
    }
  }
}

.dark, .dark-theme {
  --brown-1: #12110f;
  --brown-2: #1c1816;
  --brown-3: #28211d;
  --brown-4: #322922;
  --brown-5: #3e3128;
  --brown-6: #4d3c2f;
  --brown-7: #614a39;
  --brown-8: #7c5f46;
  --brown-9: #ad7f58;
  --brown-10: #b88c67;
  --brown-11: #dbb594;
  --brown-12: #f2e1ca;
  --brown-a1: #91110002;
  --brown-a2: #fba67c0c;
  --brown-a3: #fcb58c19;
  --brown-a4: #fbbb8a24;
  --brown-a5: #fcb88931;
  --brown-a6: #fdba8741;
  --brown-a7: #ffbb8856;
  --brown-a8: #ffbe8773;
  --brown-a9: #feb87da8;
  --brown-a10: #ffc18cb3;
  --brown-a11: #fed1aad9;
  --brown-a12: #feecd4f2;
  --brown-surface: #271f1b80;
  --brown-indicator: var(--brown-9);
  --brown-track: var(--brown-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --brown-1: color(display-p3 .071 .067 .059);
      --brown-2: color(display-p3 .107 .095 .087);
      --brown-3: color(display-p3 .151 .13 .115);
      --brown-4: color(display-p3 .191 .161 .138);
      --brown-5: color(display-p3 .235 .194 .162);
      --brown-6: color(display-p3 .291 .237 .192);
      --brown-7: color(display-p3 .365 .295 .232);
      --brown-8: color(display-p3 .469 .377 .287);
      --brown-9: color(display-p3 .651 .505 .368);
      --brown-10: color(display-p3 .697 .557 .423);
      --brown-11: color(display-p3 .835 .715 .597);
      --brown-12: color(display-p3 .938 .885 .802);
      --brown-a1: color(display-p3 .855 .071 0 / .005);
      --brown-a2: color(display-p3 .98 .706 .525 / .043);
      --brown-a3: color(display-p3 .996 .745 .576 / .093);
      --brown-a4: color(display-p3 1 .765 .592 / .135);
      --brown-a5: color(display-p3 1 .761 .588 / .181);
      --brown-a6: color(display-p3 1 .773 .592 / .24);
      --brown-a7: color(display-p3 .996 .776 .58 / .32);
      --brown-a8: color(display-p3 1 .78 .573 / .433);
      --brown-a9: color(display-p3 1 .769 .549 / .627);
      --brown-a10: color(display-p3 1 .792 .596 / .677);
      --brown-a11: color(display-p3 .835 .715 .597);
      --brown-a12: color(display-p3 .938 .885 .802);
      --brown-surface: color(display-p3 .1412 .1176 .102 / .5);
    }
  }
}

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