:root, .light, .light-theme {
  --amber-1: #fefdfb;
  --amber-2: #fefbe9;
  --amber-3: #fff7c2;
  --amber-4: #ffee9c;
  --amber-5: #fbe577;
  --amber-6: #f3d673;
  --amber-7: #e9c162;
  --amber-8: #e2a336;
  --amber-9: #ffc53d;
  --amber-10: #ffba18;
  --amber-11: #ab6400;
  --amber-12: #4f3422;
  --amber-a1: #c0800004;
  --amber-a2: #f4d10016;
  --amber-a3: #ffde003d;
  --amber-a4: #ffd40063;
  --amber-a5: #f8cf0088;
  --amber-a6: #eab5008c;
  --amber-a7: #dc9b009d;
  --amber-a8: #da8a00c9;
  --amber-a9: #ffb300c2;
  --amber-a10: #ffb300e7;
  --amber-a11: #ab6400;
  --amber-a12: #341500dd;
  --amber-surface: #fefae4cc;
  --amber-indicator: var(--amber-9);
  --amber-track: var(--amber-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --amber-1: color(display-p3 .995 .992 .985);
      --amber-2: color(display-p3 .994 .986 .921);
      --amber-3: color(display-p3 .994 .969 .782);
      --amber-4: color(display-p3 .989 .937 .65);
      --amber-5: color(display-p3 .97 .902 .527);
      --amber-6: color(display-p3 .936 .844 .506);
      --amber-7: color(display-p3 .89 .762 .443);
      --amber-8: color(display-p3 .85 .65 .3);
      --amber-9: color(display-p3 1 .77 .26);
      --amber-10: color(display-p3 .959 .741 .274);
      --amber-11: color(display-p3 .64 .4 0);
      --amber-12: color(display-p3 .294 .208 .145);
      --amber-a1: color(display-p3 .757 .514 .024 / .016);
      --amber-a2: color(display-p3 .902 .804 .008 / .079);
      --amber-a3: color(display-p3 .965 .859 .004 / .22);
      --amber-a4: color(display-p3 .969 .82 .004 / .35);
      --amber-a5: color(display-p3 .933 .796 .004 / .475);
      --amber-a6: color(display-p3 .875 .682 .004 / .495);
      --amber-a7: color(display-p3 .804 .573 0 / .557);
      --amber-a8: color(display-p3 .788 .502 0 / .699);
      --amber-a9: color(display-p3 1 .686 0 / .742);
      --amber-a10: color(display-p3 .945 .643 0 / .726);
      --amber-a11: color(display-p3 .64 .4 0);
      --amber-a12: color(display-p3 .294 .208 .145);
      --amber-surface: color(display-p3 .9922 .9843 .902 / .8);
    }
  }
}

.dark, .dark-theme {
  --amber-1: #16120c;
  --amber-2: #1d180f;
  --amber-3: #302008;
  --amber-4: #3f2700;
  --amber-5: #4d3000;
  --amber-6: #5c3d05;
  --amber-7: #714f19;
  --amber-8: #8f6424;
  --amber-9: #ffc53d;
  --amber-10: #ffd60a;
  --amber-11: #ffca16;
  --amber-12: #ffe7b3;
  --amber-a1: #e63c0006;
  --amber-a2: #fd9b000d;
  --amber-a3: #fa820022;
  --amber-a4: #fc820032;
  --amber-a5: #fd8b0041;
  --amber-a6: #fd9b0051;
  --amber-a7: #ffab2567;
  --amber-a8: #ffae3587;
  --amber-a9: #ffc53d;
  --amber-a10: #ffd60a;
  --amber-a11: #ffca16;
  --amber-a12: #ffe7b3;
  --amber-surface: #271f1380;
  --amber-indicator: var(--amber-9);
  --amber-track: var(--amber-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --amber-1: color(display-p3 .082 .07 .05);
      --amber-2: color(display-p3 .111 .094 .064);
      --amber-3: color(display-p3 .178 .128 .049);
      --amber-4: color(display-p3 .239 .156 0);
      --amber-5: color(display-p3 .29 .193 0);
      --amber-6: color(display-p3 .344 .245 .076);
      --amber-7: color(display-p3 .422 .314 .141);
      --amber-8: color(display-p3 .535 .399 .189);
      --amber-9: color(display-p3 1 .77 .26);
      --amber-10: color(display-p3 1 .87 .15);
      --amber-11: color(display-p3 1 .8 .29);
      --amber-12: color(display-p3 .984 .909 .726);
      --amber-a1: color(display-p3 .992 .298 0 / .017);
      --amber-a2: color(display-p3 .988 .651 0 / .047);
      --amber-a3: color(display-p3 1 .6 0 / .118);
      --amber-a4: color(display-p3 1 .557 0 / .185);
      --amber-a5: color(display-p3 1 .592 0 / .24);
      --amber-a6: color(display-p3 1 .659 .094 / .299);
      --amber-a7: color(display-p3 1 .714 .263 / .383);
      --amber-a8: color(display-p3 .996 .729 .306 / .5);
      --amber-a9: color(display-p3 1 .769 .259);
      --amber-a10: color(display-p3 1 .871 .149);
      --amber-a11: color(display-p3 1 .8 .29);
      --amber-a12: color(display-p3 .984 .909 .726);
      --amber-surface: color(display-p3 .1412 .1176 .0784 / .5);
    }
  }
}

:root {
  --amber-contrast: #21201c;
}

@supports (color: color-mix(in oklab, white, black)) {
  .dark, .dark-theme {
    --amber-track: color-mix(in oklab, var(--amber-8), var(--amber-9) 75%);
  }
}