:root, .light, .light-theme {
  --yellow-1: #fdfdf9;
  --yellow-2: #fefce9;
  --yellow-3: #fffab8;
  --yellow-4: #fff394;
  --yellow-5: #ffe770;
  --yellow-6: #f3d768;
  --yellow-7: #e4c767;
  --yellow-8: #d5ae39;
  --yellow-9: #ffe629;
  --yellow-10: #ffdc00;
  --yellow-11: #9e6c00;
  --yellow-12: #473b1f;
  --yellow-a1: #aaaa0006;
  --yellow-a2: #f4dd0016;
  --yellow-a3: #ffee0047;
  --yellow-a4: #ffe3016b;
  --yellow-a5: #ffd5008f;
  --yellow-a6: #ebbc0097;
  --yellow-a7: #d2a10098;
  --yellow-a8: #c99700c6;
  --yellow-a9: #ffe100d6;
  --yellow-a10: #ffdc00;
  --yellow-a11: #9e6c00;
  --yellow-a12: #2e2000e0;
  --yellow-surface: #fefbe4cc;
  --yellow-indicator: var(--yellow-10);
  --yellow-track: var(--yellow-10);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --yellow-1: color(display-p3 .992 .992 .978);
      --yellow-2: color(display-p3 .995 .99 .922);
      --yellow-3: color(display-p3 .997 .982 .749);
      --yellow-4: color(display-p3 .992 .953 .627);
      --yellow-5: color(display-p3 .984 .91 .51);
      --yellow-6: color(display-p3 .934 .847 .474);
      --yellow-7: color(display-p3 .876 .785 .46);
      --yellow-8: color(display-p3 .811 .689 .313);
      --yellow-9: color(display-p3 1 .92 .22);
      --yellow-10: color(display-p3 .977 .868 .291);
      --yellow-11: color(display-p3 .6 .44 0);
      --yellow-12: color(display-p3 .271 .233 .137);
      --yellow-a1: color(display-p3 .675 .675 .024 / .024);
      --yellow-a2: color(display-p3 .953 .855 .008 / .079);
      --yellow-a3: color(display-p3 .988 .925 .004 / .251);
      --yellow-a4: color(display-p3 .98 .875 .004 / .373);
      --yellow-a5: color(display-p3 .969 .816 .004 / .491);
      --yellow-a6: color(display-p3 .875 .71 0 / .526);
      --yellow-a7: color(display-p3 .769 .604 0 / .542);
      --yellow-a8: color(display-p3 .725 .549 0 / .687);
      --yellow-a9: color(display-p3 1 .898 0 / .781);
      --yellow-a10: color(display-p3 .969 .812 0 / .71);
      --yellow-a11: color(display-p3 .6 .44 0);
      --yellow-a12: color(display-p3 .271 .233 .137);
      --yellow-surface: color(display-p3 .9961 .9922 .902 / .8);
    }
  }
}

.dark, .dark-theme {
  --yellow-1: #14120b;
  --yellow-2: #1b180f;
  --yellow-3: #2d2305;
  --yellow-4: #362b00;
  --yellow-5: #433500;
  --yellow-6: #524202;
  --yellow-7: #665417;
  --yellow-8: #836a21;
  --yellow-9: #ffe629;
  --yellow-10: #ffff57;
  --yellow-11: #f5e147;
  --yellow-12: #f6eeb4;
  --yellow-a1: #d1510004;
  --yellow-a2: #f9b4000b;
  --yellow-a3: #ffaa001e;
  --yellow-a4: #fdb70028;
  --yellow-a5: #febb0036;
  --yellow-a6: #fec40046;
  --yellow-a7: #fdcb225c;
  --yellow-a8: #fdca327b;
  --yellow-a9: #ffe629;
  --yellow-a10: #ffff57;
  --yellow-a11: #fee949f5;
  --yellow-a12: #fef6baf6;
  --yellow-surface: #231f1380;
  --yellow-indicator: var(--yellow-9);
  --yellow-track: var(--yellow-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --yellow-1: color(display-p3 .078 .069 .047);
      --yellow-2: color(display-p3 .103 .094 .063);
      --yellow-3: color(display-p3 .168 .137 .039);
      --yellow-4: color(display-p3 .209 .169 0);
      --yellow-5: color(display-p3 .255 .209 0);
      --yellow-6: color(display-p3 .31 .261 .07);
      --yellow-7: color(display-p3 .389 .331 .135);
      --yellow-8: color(display-p3 .497 .42 .182);
      --yellow-9: color(display-p3 1 .92 .22);
      --yellow-10: color(display-p3 1 1 .456);
      --yellow-11: color(display-p3 .948 .885 .392);
      --yellow-12: color(display-p3 .959 .934 .731);
      --yellow-a1: color(display-p3 .973 .369 0 / .013);
      --yellow-a2: color(display-p3 .996 .792 0 / .038);
      --yellow-a3: color(display-p3 .996 .71 0 / .11);
      --yellow-a4: color(display-p3 .996 .741 0 / .152);
      --yellow-a5: color(display-p3 .996 .765 0 / .202);
      --yellow-a6: color(display-p3 .996 .816 .082 / .261);
      --yellow-a7: color(display-p3 1 .831 .263 / .345);
      --yellow-a8: color(display-p3 1 .831 .314 / .463);
      --yellow-a9: color(display-p3 1 .922 .22);
      --yellow-a10: color(display-p3 1 1 .455);
      --yellow-a11: color(display-p3 .948 .885 .392);
      --yellow-a12: color(display-p3 .959 .934 .731);
      --yellow-surface: color(display-p3 .1333 .1176 .0706 / .5);
    }
  }
}

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

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