/* Black alpha scale - useful because it naturally adapts to any background. */
:root {
  --black: #000000;
  --black-a1: rgba(0, 0, 0, 0.05);
  --black-a2: rgba(0, 0, 0, 0.1);
  --black-a3: rgba(0, 0, 0, 0.15);
  --black-a4: rgba(0, 0, 0, 0.2);
  --black-a5: rgba(0, 0, 0, 0.3);
  --black-a6: rgba(0, 0, 0, 0.4);
  --black-a7: rgba(0, 0, 0, 0.5);
  --black-a8: rgba(0, 0, 0, 0.6);
  --black-a9: rgba(0, 0, 0, 0.7);
  --black-a10: rgba(0, 0, 0, 0.8);
  --black-a11: rgba(0, 0, 0, 0.9);
  --black-a12: rgba(0, 0, 0, 0.95);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --black-a1: color(display-p3 0 0 0 / 0.05);
      --black-a2: color(display-p3 0 0 0 / 0.1);
      --black-a3: color(display-p3 0 0 0 / 0.15);
      --black-a4: color(display-p3 0 0 0 / 0.2);
      --black-a5: color(display-p3 0 0 0 / 0.3);
      --black-a6: color(display-p3 0 0 0 / 0.4);
      --black-a7: color(display-p3 0 0 0 / 0.5);
      --black-a8: color(display-p3 0 0 0 / 0.6);
      --black-a9: color(display-p3 0 0 0 / 0.7);
      --black-a10: color(display-p3 0 0 0 / 0.8);
      --black-a11: color(display-p3 0 0 0 / 0.9);
      --black-a12: color(display-p3 0 0 0 / 0.95);
    }
  }
}
/* Gray color palette. */
:root, .light, .light-theme {
  --gray-1: #fcfcfc;
  --gray-2: #f9f9f9;
  --gray-3: #f0f0f0;
  --gray-4: #e8e8e8;
  --gray-5: #e0e0e0;
  --gray-6: #d9d9d9;
  --gray-7: #cecece;
  --gray-8: #bbbbbb;
  --gray-9: #8d8d8d;
  --gray-10: #838383;
  --gray-11: #646464;
  --gray-12: #202020;
  --gray-a1: #00000003;
  --gray-a2: #00000006;
  --gray-a3: #0000000f;
  --gray-a4: #00000017;
  --gray-a5: #0000001f;
  --gray-a6: #00000026;
  --gray-a7: #00000031;
  --gray-a8: #00000044;
  --gray-a9: #00000072;
  --gray-a10: #0000007c;
  --gray-a11: #0000009b;
  --gray-a12: #000000df;
  --gray-surface: #ffffffcc;
  --gray-indicator: var(--gray-9);
  --gray-track: var(--gray-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --gray-1: color(display-p3 0.988 0.988 0.988);
      --gray-2: color(display-p3 0.975 0.975 0.975);
      --gray-3: color(display-p3 0.939 0.939 0.939);
      --gray-4: color(display-p3 0.908 0.908 0.908);
      --gray-5: color(display-p3 0.88 0.88 0.88);
      --gray-6: color(display-p3 0.849 0.849 0.849);
      --gray-7: color(display-p3 0.807 0.807 0.807);
      --gray-8: color(display-p3 0.732 0.732 0.732);
      --gray-9: color(display-p3 0.553 0.553 0.553);
      --gray-10: color(display-p3 0.512 0.512 0.512);
      --gray-11: color(display-p3 0.392 0.392 0.392);
      --gray-12: color(display-p3 0.125 0.125 0.125);
      --gray-a1: color(display-p3 0 0 0 / 0.012);
      --gray-a2: color(display-p3 0 0 0 / 0.024);
      --gray-a3: color(display-p3 0 0 0 / 0.063);
      --gray-a4: color(display-p3 0 0 0 / 0.09);
      --gray-a5: color(display-p3 0 0 0 / 0.122);
      --gray-a6: color(display-p3 0 0 0 / 0.153);
      --gray-a7: color(display-p3 0 0 0 / 0.192);
      --gray-a8: color(display-p3 0 0 0 / 0.267);
      --gray-a9: color(display-p3 0 0 0 / 0.447);
      --gray-a10: color(display-p3 0 0 0 / 0.486);
      --gray-a11: color(display-p3 0 0 0 / 0.608);
      --gray-a12: color(display-p3 0 0 0 / 0.875);
      --gray-surface: color(display-p3 1 1 1 / 0.8);
    }
  }
}
.dark, .dark-theme {
  --gray-1: #111111;
  --gray-2: #191919;
  --gray-3: #222222;
  --gray-4: #2a2a2a;
  --gray-5: #313131;
  --gray-6: #3a3a3a;
  --gray-7: #484848;
  --gray-8: #606060;
  --gray-9: #6e6e6e;
  --gray-10: #7b7b7b;
  --gray-11: #b4b4b4;
  --gray-12: #eeeeee;
  --gray-a1: #00000000;
  --gray-a2: #ffffff09;
  --gray-a3: #ffffff12;
  --gray-a4: #ffffff1b;
  --gray-a5: #ffffff22;
  --gray-a6: #ffffff2c;
  --gray-a7: #ffffff3b;
  --gray-a8: #ffffff55;
  --gray-a9: #ffffff64;
  --gray-a10: #ffffff72;
  --gray-a11: #ffffffaf;
  --gray-a12: #ffffffed;
  --gray-surface: #21212180;
  --gray-indicator: var(--gray-9);
  --gray-track: var(--gray-9);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --gray-1: color(display-p3 0.067 0.067 0.067);
      --gray-2: color(display-p3 0.098 0.098 0.098);
      --gray-3: color(display-p3 0.135 0.135 0.135);
      --gray-4: color(display-p3 0.163 0.163 0.163);
      --gray-5: color(display-p3 0.192 0.192 0.192);
      --gray-6: color(display-p3 0.228 0.228 0.228);
      --gray-7: color(display-p3 0.283 0.283 0.283);
      --gray-8: color(display-p3 0.375 0.375 0.375);
      --gray-9: color(display-p3 0.431 0.431 0.431);
      --gray-10: color(display-p3 0.484 0.484 0.484);
      --gray-11: color(display-p3 0.706 0.706 0.706);
      --gray-12: color(display-p3 0.933 0.933 0.933);
      --gray-a1: color(display-p3 0 0 0 / 0);
      --gray-a2: color(display-p3 1 1 1 / 0.034);
      --gray-a3: color(display-p3 1 1 1 / 0.071);
      --gray-a4: color(display-p3 1 1 1 / 0.105);
      --gray-a5: color(display-p3 1 1 1 / 0.134);
      --gray-a6: color(display-p3 1 1 1 / 0.172);
      --gray-a7: color(display-p3 1 1 1 / 0.231);
      --gray-a8: color(display-p3 1 1 1 / 0.332);
      --gray-a9: color(display-p3 1 1 1 / 0.391);
      --gray-a10: color(display-p3 1 1 1 / 0.445);
      --gray-a11: color(display-p3 1 1 1 / 0.685);
      --gray-a12: color(display-p3 1 1 1 / 0.929);
      --gray-surface: color(display-p3 0.1255 0.1255 0.1255 / 0.5);
    }
  }
}
:root {
  --gray-contrast: white;
}

/* Custom green - based on #27AE60 */
:root, .light, .light-theme {
  --green-1: #fafefb;
  --green-2: #f4fbf6;
  --green-3: #e6f7ea;
  --green-4: #d6f2dc;
  --green-5: #c3eacc;
  --green-6: #aae0b8;
  --green-7: #89d19d;
  --green-8: #52bc77;
  --green-9: #27ae60;
  --green-10: #1ca157;
  --green-11: #00813f;
  --green-12: #1a3d26;
  --green-a1: #00cc3305;
  --green-a2: #00a32f0b;
  --green-a3: #00ae2919;
  --green-a4: #00af2629;
  --green-a5: #00a6273c;
  --green-a6: #00a22a55;
  --green-a7: #009c2c76;
  --green-a8: #009c37ad;
  --green-a9: #009f43d8;
  --green-a10: #009542e3;
  --green-a11: #00813f;
  --green-a12: #00270de5;
  --green-contrast: #fff;
  --green-surface: #f1faf4cc;
  --green-indicator: #27ae60;
  --green-track: #27ae60;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --green-1: oklch(99.4% 0.0058 152.4);
      --green-2: oklch(98.2% 0.01 152.4);
      --green-3: oklch(96.1% 0.0253 152.4);
      --green-4: oklch(93.4% 0.0403 152.4);
      --green-5: oklch(90.1% 0.0577 152.4);
      --green-6: oklch(85.8% 0.0779 152.4);
      --green-7: oklch(79.8% 0.1036 152.4);
      --green-8: oklch(71.6% 0.1419 152.4);
      --green-9: oklch(66.3% 0.1602 152.4);
      --green-10: oklch(62.4% 0.1545 152.4);
      --green-11: oklch(52.7% 0.1414 152.4);
      --green-12: oklch(32.7% 0.0583 152.4);
      --green-a1: color(display-p3 0.0235 0.7569 0.0235 / 0.016);
      --green-a2: color(display-p3 0.0235 0.6118 0.1216 / 0.04);
      --green-a3: color(display-p3 0.0118 0.5961 0.102 / 0.087);
      --green-a4: color(display-p3 0.0078 0.6157 0.0902 / 0.142);
      --green-a5: color(display-p3 0.0039 0.5804 0.0588 / 0.204);
      --green-a6: color(display-p3 0.0039 0.5569 0.0863 / 0.291);
      --green-a7: color(display-p3 0 0.5294 0.0784 / 0.4);
      --green-a8: color(display-p3 0 0.5216 0.098 / 0.565);
      --green-a9: color(display-p3 0 0.5137 0.1137 / 0.667);
      --green-a10: color(display-p3 0 0.4627 0.102 / 0.702);
      --green-a11: color(display-p3 0 0.3569 0.0706 / 0.781);
      --green-a12: color(display-p3 0 0.1137 0.0235 / 0.863);
      --green-contrast: #fff;
      --green-surface: color(display-p3 0.9569 0.9804 0.9569 / 0.8);
      --green-indicator: oklch(66.3% 0.1602 152.4);
      --green-track: oklch(66.3% 0.1602 152.4);
    }
  }
}
.dark, .dark-theme {
  --green-1: #0c130e;
  --green-2: #131b15;
  --green-3: #172b1d;
  --green-4: #163b23;
  --green-5: #1c492c;
  --green-6: #235835;
  --green-7: #29693f;
  --green-8: #2f7c4a;
  --green-9: #27ae60;
  --green-10: #0ba154;
  --green-11: #57d483;
  --green-12: #b4f3c4;
  --green-a1: #00bb0003;
  --green-a2: #40f96e0b;
  --green-a3: #48fe7f1c;
  --green-a4: #2eff772d;
  --green-a5: #40ff843c;
  --green-a6: #4dfd894d;
  --green-a7: #51fd8c5f;
  --green-a8: #54ff9073;
  --green-a9: #32fe88a9;
  --green-a10: #08fe7f9b;
  --green-a11: #67ff9cd1;
  --green-a12: #bcfecdf3;
  --green-contrast: #fff;
  --green-surface: #15251980;
  --green-indicator: #27ae60;
  --green-track: #27ae60;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --green-1: oklch(17.8% 0.0154 152.4);
      --green-2: oklch(21% 0.0167 152.4);
      --green-3: oklch(26.8% 0.0373 152.4);
      --green-4: oklch(31.8% 0.0609 152.4);
      --green-5: oklch(36.6% 0.0715 152.4);
      --green-6: oklch(41.5% 0.0818 152.4);
      --green-7: oklch(46.8% 0.094 152.4);
      --green-8: oklch(52.5% 0.1093 152.4);
      --green-9: oklch(66.3% 0.1602 152.4);
      --green-10: oklch(62.4% 0.1602 152.4);
      --green-11: oklch(78% 0.1602 152.4);
      --green-12: oklch(90.9% 0.0897 152.4);
      --green-a1: color(display-p3 0 0.9412 0 / 0.009);
      --green-a2: color(display-p3 0.4353 0.9804 0.4353 / 0.043);
      --green-a3: color(display-p3 0.4745 0.9922 0.549 / 0.106);
      --green-a4: color(display-p3 0.4078 0.9961 0.5216 / 0.173);
      --green-a5: color(display-p3 0.4588 1 0.5765 / 0.232);
      --green-a6: color(display-p3 0.4941 1 0.5882 / 0.295);
      --green-a7: color(display-p3 0.5176 1 0.6039 / 0.366);
      --green-a8: color(display-p3 0.5294 1 0.6196 / 0.442);
      --green-a9: color(display-p3 0.4745 1 0.5922 / 0.652);
      --green-a10: color(display-p3 0.4353 1 0.5608 / 0.597);
      --green-a11: color(display-p3 0.5804 1 0.6549 / 0.807);
      --green-a12: color(display-p3 0.8 1 0.8275 / 0.942);
      --green-contrast: #fff;
      --green-surface: color(display-p3 0.0863 0.1333 0.0941 / 0.5);
      --green-indicator: oklch(66.3% 0.1602 152.4);
      --green-track: oklch(66.3% 0.1602 152.4);
    }
  }
}
/* Custom red - based on #EB5757 */
:root, .light, .light-theme {
  --red-1: #fffcfc;
  --red-2: #fff8f7;
  --red-3: #feecea;
  --red-4: #ffdcd9;
  --red-5: #ffceca;
  --red-6: #fbbeba;
  --red-7: #f2aba6;
  --red-8: #e9918b;
  --red-9: #eb5757;
  --red-10: #dd494b;
  --red-11: #c9363b;
  --red-12: #621c1d;
  --red-a1: #ff000003;
  --red-a2: #ff200008;
  --red-a3: #f3190015;
  --red-a4: #ff150026;
  --red-a5: #ff140035;
  --red-a6: #f10f0045;
  --red-a7: #da0f0059;
  --red-a8: #cf0e0074;
  --red-a9: #e10000a8;
  --red-a10: #d00003b6;
  --red-a11: #bb0006c9;
  --red-a12: #4f0001e3;
  --red-contrast: #fff;
  --red-surface: #fff6f5cc;
  --red-indicator: #eb5757;
  --red-track: #eb5757;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --red-1: oklch(99.4% 0.003 23.68);
      --red-2: oklch(98.3% 0.0078 23.68);
      --red-3: oklch(95.6% 0.0199 23.68);
      --red-4: oklch(92.8% 0.0448 23.68);
      --red-5: oklch(89.6% 0.0587 23.68);
      --red-6: oklch(85.7% 0.0708 23.68);
      --red-7: oklch(80.7% 0.0851 23.68);
      --red-8: oklch(74.5% 0.1077 23.68);
      --red-9: oklch(65.3% 0.1835 23.68);
      --red-10: oklch(61.4% 0.1852 23.68);
      --red-11: oklch(55.8% 0.1835 23.68);
      --red-12: oklch(34% 0.1014 23.68);
      --red-a1: color(display-p3 0.6745 0.0235 0.0235 / 0.012);
      --red-a2: color(display-p3 0.8784 0.1451 0.0196 / 0.032);
      --red-a3: color(display-p3 0.8039 0.1098 0.0078 / 0.079);
      --red-a4: color(display-p3 0.8392 0.0902 0.0078 / 0.146);
      --red-a5: color(display-p3 0.8471 0.098 0.0039 / 0.204);
      --red-a6: color(display-p3 0.8078 0.0627 0.0039 / 0.263);
      --red-a7: color(display-p3 0.7255 0.0745 0.0039 / 0.342);
      --red-a8: color(display-p3 0.702 0.0627 0.0039 / 0.444);
      --red-a9: color(display-p3 0.7725 0.0314 0 / 0.64);
      --red-a10: color(display-p3 0.7098 0.0235 0 / 0.687);
      --red-a11: color(display-p3 0.6314 0.0078 0 / 0.746);
      --red-a12: color(display-p3 0.2588 0.0039 0 / 0.875);
      --red-contrast: #fff;
      --red-surface: color(display-p3 0.9922 0.9647 0.9608 / 0.8);
      --red-indicator: oklch(65.3% 0.1835 23.68);
      --red-track: oklch(65.3% 0.1835 23.68);
    }
  }
}
.dark, .dark-theme {
  --red-1: #170f0e;
  --red-2: #201312;
  --red-3: #3c1211;
  --red-4: #520d11;
  --red-5: #621518;
  --red-6: #742223;
  --red-7: #8e3232;
  --red-8: #b74343;
  --red-9: #eb5757;
  --red-10: #dd4a4b;
  --red-11: #ff8f89;
  --red-12: #ffd1cd;
  --red-a1: #ec000007;
  --red-a2: #f22f2011;
  --red-a3: #fb17112f;
  --red-a4: #fe031246;
  --red-a5: #ff1d2657;
  --red-a6: #fd3a3c6b;
  --red-a7: #ff505086;
  --red-a8: #ff5959b2;
  --red-a9: #ff5e5eea;
  --red-a10: #ff5455db;
  --red-a11: #ff8f89;
  --red-a12: #ffd1cd;
  --red-contrast: #fff;
  --red-surface: #2f151380;
  --red-indicator: #eb5757;
  --red-track: #eb5757;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --red-1: oklch(17.8% 0.0138 23.68);
      --red-2: oklch(20.3% 0.0223 23.68);
      --red-3: oklch(25% 0.0665 23.68);
      --red-4: oklch(28.8% 0.0992 23.68);
      --red-5: oklch(33.1% 0.1103 23.68);
      --red-6: oklch(38.2% 0.1152 23.68);
      --red-7: oklch(45% 0.1248 23.68);
      --red-8: oklch(54.4% 0.1516 23.68);
      --red-9: oklch(65.3% 0.1835 23.68);
      --red-10: oklch(61.4% 0.1835 23.68);
      --red-11: oklch(78.4% 0.1675 23.68);
      --red-12: oklch(90.2% 0.0547 23.68);
      --red-a1: color(display-p3 0.9608 0 0 / 0.022);
      --red-a2: color(display-p3 0.9961 0.2824 0.1412 / 0.055);
      --red-a3: color(display-p3 1 0.1647 0.1176 / 0.16);
      --red-a4: color(display-p3 1 0.102 0.1176 / 0.244);
      --red-a5: color(display-p3 1 0.2078 0.1961 / 0.307);
      --red-a6: color(display-p3 0.9961 0.302 0.2824 / 0.379);
      --red-a7: color(display-p3 1 0.3882 0.3608 / 0.479);
      --red-a8: color(display-p3 1 0.4235 0.3961 / 0.643);
      --red-a9: color(display-p3 1 0.4353 0.4118 / 0.845);
      --red-a10: color(display-p3 1 0.4039 0.3843 / 0.786);
      --red-a11: color(display-p3 1 0.6196 0.5843 / 0.937);
      --red-a12: color(display-p3 1 0.851 0.8314 / 0.971);
      --red-contrast: #fff;
      --red-surface: color(display-p3 0.1647 0.0784 0.0706 / 0.5);
      --red-indicator: oklch(65.3% 0.1835 23.68);
      --red-track: oklch(65.3% 0.1835 23.68);
    }
  }
}
/* White alpha scale - useful because it naturally adapts to any background. */
:root {
  --white: #FFFFFF;
  --white-a1: rgba(255, 255, 255, 0.05);
  --white-a2: rgba(255, 255, 255, 0.1);
  --white-a3: rgba(255, 255, 255, 0.15);
  --white-a4: rgba(255, 255, 255, 0.2);
  --white-a5: rgba(255, 255, 255, 0.3);
  --white-a6: rgba(255, 255, 255, 0.4);
  --white-a7: rgba(255, 255, 255, 0.5);
  --white-a8: rgba(255, 255, 255, 0.6);
  --white-a9: rgba(255, 255, 255, 0.7);
  --white-a10: rgba(255, 255, 255, 0.8);
  --white-a11: rgba(255, 255, 255, 0.9);
  --white-a12: rgba(255, 255, 255, 0.95);
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root {
      --white-a1: color(display-p3 1 1 1 / 0.05);
      --white-a2: color(display-p3 1 1 1 / 0.1);
      --white-a3: color(display-p3 1 1 1 / 0.15);
      --white-a4: color(display-p3 1 1 1 / 0.2);
      --white-a5: color(display-p3 1 1 1 / 0.3);
      --white-a6: color(display-p3 1 1 1 / 0.4);
      --white-a7: color(display-p3 1 1 1 / 0.5);
      --white-a8: color(display-p3 1 1 1 / 0.6);
      --white-a9: color(display-p3 1 1 1 / 0.7);
      --white-a10: color(display-p3 1 1 1 / 0.8);
      --white-a11: color(display-p3 1 1 1 / 0.9);
      --white-a12: color(display-p3 1 1 1 / 0.95);
    }
  }
}
/* Custom yellow - based on #ECB106 */
:root, .light, .light-theme {
  --yellow-1: #fefdf9;
  --yellow-2: #fffae5;
  --yellow-3: #fff2bd;
  --yellow-4: #ffe9a2;
  --yellow-5: #ffde7e;
  --yellow-6: #ffcf51;
  --yellow-7: #f3bf4c;
  --yellow-8: #e2a700;
  --yellow-9: #ecb106;
  --yellow-10: #e1a600;
  --yellow-11: #9d6f00;
  --yellow-12: #493918;
  --yellow-a1: #d5aa0006;
  --yellow-a2: #ffce001a;
  --yellow-a3: #ffcd0042;
  --yellow-a4: #ffc3005d;
  --yellow-a5: #ffbe0081;
  --yellow-a6: #ffb900ae;
  --yellow-a7: #eea400b3;
  --yellow-a8: #e2a700;
  --yellow-a9: #ecaf00f9;
  --yellow-a10: #e1a600;
  --yellow-a11: #9d6f00;
  --yellow-a12: #362400e7;
  --yellow-contrast: #2b2009;
  --yellow-surface: #fff9dfcc;
  --yellow-indicator: #ecb106;
  --yellow-track: #ecb106;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    :root, .light, .light-theme {
      --yellow-1: oklch(99.3% 0.0046 84.19);
      --yellow-2: oklch(98.7% 0.0288 84.19);
      --yellow-3: oklch(97.2% 0.0899 84.19);
      --yellow-4: oklch(94.9% 0.1297 84.19);
      --yellow-5: oklch(92.2% 0.1611 84.19);
      --yellow-6: oklch(88.1% 0.1513 84.19);
      --yellow-7: oklch(83.1% 0.1421 84.19);
      --yellow-8: oklch(76.2% 0.162 84.19);
      --yellow-9: oklch(79.3% 0.162 84.19);
      --yellow-10: oklch(76% 0.162 84.19);
      --yellow-11: oklch(57.2% 0.162 84.19);
      --yellow-12: oklch(35.5% 0.0533 84.19);
      --yellow-a1: color(display-p3 0.8392 0.6745 0.0235 / 0.024);
      --yellow-a2: color(display-p3 0.9608 0.7961 0.0118 / 0.095);
      --yellow-a3: color(display-p3 0.9686 0.7843 0.0039 / 0.236);
      --yellow-a4: color(display-p3 0.9529 0.7529 0.0039 / 0.33);
      --yellow-a5: color(display-p3 0.9608 0.7255 0.0039 / 0.455);
      --yellow-a6: color(display-p3 0.9451 0.6941 0 / 0.593);
      --yellow-a7: color(display-p3 0.8745 0.6078 0 / 0.62);
      --yellow-a8: color(display-p3 0.8078 0.5647 0 / 0.777);
      --yellow-a9: color(display-p3 0.8549 0.6078 0 / 0.757);
      --yellow-a10: color(display-p3 0.8039 0.5608 0 / 0.777);
      --yellow-a11: color(display-p3 0.5216 0.3529 0 / 0.859);
      --yellow-a12: color(display-p3 0.1804 0.1294 0 / 0.887);
      --yellow-contrast: #2b2009;
      --yellow-surface: color(display-p3 1 0.9765 0.8902 / 0.8);
      --yellow-indicator: oklch(79.3% 0.162 84.19);
      --yellow-track: oklch(79.3% 0.162 84.19);
    }
  }
}
.dark, .dark-theme {
  --yellow-1: #13110b;
  --yellow-2: #1c180f;
  --yellow-3: #2c210a;
  --yellow-4: #3c2900;
  --yellow-5: #493300;
  --yellow-6: #57400a;
  --yellow-7: #6a521c;
  --yellow-8: #876926;
  --yellow-9: #ecb106;
  --yellow-10: #e1a600;
  --yellow-11: #ffc53f;
  --yellow-12: #fde6ba;
  --yellow-a1: #bb110003;
  --yellow-a2: #fba6000c;
  --yellow-a3: #ff9e001d;
  --yellow-a4: #fb94002f;
  --yellow-a5: #ffa2003c;
  --yellow-a6: #ffb1004b;
  --yellow-a7: #fdbd2e60;
  --yellow-a8: #fdc13b7f;
  --yellow-a9: #ffbf06eb;
  --yellow-a10: #ffbc00df;
  --yellow-a11: #ffc53f;
  --yellow-a12: #ffe8bbfd;
  --yellow-contrast: #2b2009;
  --yellow-surface: #271f0e80;
  --yellow-indicator: #ecb106;
  --yellow-track: #ecb106;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark, .dark-theme {
      --yellow-1: oklch(17.8% 0.0114 84.19);
      --yellow-2: oklch(21% 0.0169 84.19);
      --yellow-3: oklch(25.7% 0.0407 84.19);
      --yellow-4: oklch(29.5% 0.0675 84.19);
      --yellow-5: oklch(33.6% 0.076 84.19);
      --yellow-6: oklch(38.7% 0.0738 84.19);
      --yellow-7: oklch(45.3% 0.0776 84.19);
      --yellow-8: oklch(53.7% 0.0921 84.19);
      --yellow-9: oklch(79.3% 0.162 84.19);
      --yellow-10: oklch(76% 0.162 84.19);
      --yellow-11: oklch(85.5% 0.1564 84.19);
      --yellow-12: oklch(93.3% 0.0622 84.19);
      --yellow-a1: color(display-p3 0.9412 0.0667 0 / 0.009);
      --yellow-a2: color(display-p3 0.9804 0.7059 0 / 0.043);
      --yellow-a3: color(display-p3 0.9922 0.6588 0 / 0.106);
      --yellow-a4: color(display-p3 0.9961 0.6471 0 / 0.169);
      --yellow-a5: color(display-p3 1 0.6824 0 / 0.223);
      --yellow-a6: color(display-p3 1 0.7451 0.1373 / 0.278);
      --yellow-a7: color(display-p3 1 0.7922 0.298 / 0.358);
      --yellow-a8: color(display-p3 1 0.8039 0.3412 / 0.475);
      --yellow-a9: color(display-p3 1 0.7882 0.2667 / 0.883);
      --yellow-a10: color(display-p3 1 0.7725 0.2549 / 0.837);
      --yellow-a11: color(display-p3 0.9961 0.8078 0.3608 / 0.963);
      --yellow-a12: color(display-p3 1 0.9294 0.7686 / 0.975);
      --yellow-contrast: #2b2009;
      --yellow-surface: color(display-p3 0.1412 0.1176 0.0588 / 0.5);
      --yellow-indicator: oklch(79.3% 0.162 84.19);
      --yellow-track: oklch(79.3% 0.162 84.19);
    }
  }
}
/* Main color scheme is mapped to bronze => default accent color. See docs for more info (https://flowbox-docs.atlassian.net/wiki/spaces/DKB/pages/318898192/Colors#Implementation) */
/* Main color scheme is mapped to bronze => default accent color. See docs for more info (https://flowbox-docs.atlassian.net/wiki/spaces/DKB/pages/318898192/Colors#Implementation) */
:root {
  --accent-1: var(--bronze-1);
  --accent-2: var(--bronze-2);
  --accent-3: var(--bronze-3);
  --accent-4: var(--bronze-4);
  --accent-5: var(--bronze-5);
  --accent-6: var(--bronze-6);
  --accent-7: var(--bronze-7);
  --accent-8: var(--bronze-8);
  --accent-9: var(--bronze-9);
  --accent-10: var(--bronze-10);
  --accent-11: var(--bronze-11);
  --accent-12: var(--bronze-12);
  --accent-a1: var(--bronze-a1);
  --accent-a2: var(--bronze-a2);
  --accent-a3: var(--bronze-a3);
  --accent-a4: var(--bronze-a4);
  --accent-a5: var(--bronze-a5);
  --accent-a6: var(--bronze-a6);
  --accent-a7: var(--bronze-a7);
  --accent-a8: var(--bronze-a8);
  --accent-a9: var(--bronze-a9);
  --accent-a10: var(--bronze-a10);
  --accent-a11: var(--bronze-a11);
  --accent-a12: var(--bronze-a12);
  --accent-contrast: var(--bronze-contrast);
  --accent-surface: var(--bronze-surface);
  --accent-indicator: var(--bronze-indicator);
  --accent-track: var(--bronze-track);
}

/* Additional accent color mappings (e.g. an error popup can be set to use red as accent color) */
[data-accent-color=green] {
  --accent-1: var(--green-1);
  --accent-2: var(--green-2);
  --accent-3: var(--green-3);
  --accent-4: var(--green-4);
  --accent-5: var(--green-5);
  --accent-6: var(--green-6);
  --accent-7: var(--green-7);
  --accent-8: var(--green-8);
  --accent-9: var(--green-9);
  --accent-10: var(--green-10);
  --accent-11: var(--green-11);
  --accent-12: var(--green-12);
  --accent-a1: var(--green-a1);
  --accent-a2: var(--green-a2);
  --accent-a3: var(--green-a3);
  --accent-a4: var(--green-a4);
  --accent-a5: var(--green-a5);
  --accent-a6: var(--green-a6);
  --accent-a7: var(--green-a7);
  --accent-a8: var(--green-a8);
  --accent-a9: var(--green-a9);
  --accent-a10: var(--green-a10);
  --accent-a11: var(--green-a11);
  --accent-a12: var(--green-a12);
  --accent-contrast: var(--green-contrast);
  --accent-surface: var(--green-surface);
  --accent-indicator: var(--green-indicator);
  --accent-track: var(--green-track);
}

[data-accent-color=yellow] {
  --accent-1: var(--yellow-1);
  --accent-2: var(--yellow-2);
  --accent-3: var(--yellow-3);
  --accent-4: var(--yellow-4);
  --accent-5: var(--yellow-5);
  --accent-6: var(--yellow-6);
  --accent-7: var(--yellow-7);
  --accent-8: var(--yellow-8);
  --accent-9: var(--yellow-9);
  --accent-10: var(--yellow-10);
  --accent-11: var(--yellow-11);
  --accent-12: var(--yellow-12);
  --accent-a1: var(--yellow-a1);
  --accent-a2: var(--yellow-a2);
  --accent-a3: var(--yellow-a3);
  --accent-a4: var(--yellow-a4);
  --accent-a5: var(--yellow-a5);
  --accent-a6: var(--yellow-a6);
  --accent-a7: var(--yellow-a7);
  --accent-a8: var(--yellow-a8);
  --accent-a9: var(--yellow-a9);
  --accent-a10: var(--yellow-a10);
  --accent-a11: var(--yellow-a11);
  --accent-a12: var(--yellow-a12);
  --accent-contrast: var(--yellow-contrast);
  --accent-surface: var(--yellow-surface);
  --accent-indicator: var(--yellow-indicator);
  --accent-track: var(--yellow-track);
}

[data-accent-color=red] {
  --accent-1: var(--red-1);
  --accent-2: var(--red-2);
  --accent-3: var(--red-3);
  --accent-4: var(--red-4);
  --accent-5: var(--red-5);
  --accent-6: var(--red-6);
  --accent-7: var(--red-7);
  --accent-8: var(--red-8);
  --accent-9: var(--red-9);
  --accent-10: var(--red-10);
  --accent-11: var(--red-11);
  --accent-12: var(--red-12);
  --accent-a1: var(--red-a1);
  --accent-a2: var(--red-a2);
  --accent-a3: var(--red-a3);
  --accent-a4: var(--red-a4);
  --accent-a5: var(--red-a5);
  --accent-a6: var(--red-a6);
  --accent-a7: var(--red-a7);
  --accent-a8: var(--red-a8);
  --accent-a9: var(--red-a9);
  --accent-a10: var(--red-a10);
  --accent-a11: var(--red-a11);
  --accent-a12: var(--red-a12);
  --accent-contrast: var(--red-contrast);
  --accent-surface: var(--red-surface);
  --accent-indicator: var(--red-indicator);
  --accent-track: var(--red-track);
}

[data-accent-color=gray] {
  --accent-1: var(--gray-1);
  --accent-2: var(--gray-2);
  --accent-3: var(--gray-3);
  --accent-4: var(--gray-4);
  --accent-5: var(--gray-5);
  --accent-6: var(--gray-6);
  --accent-7: var(--gray-7);
  --accent-8: var(--gray-8);
  --accent-9: var(--gray-9);
  --accent-10: var(--gray-10);
  --accent-11: var(--gray-11);
  --accent-12: var(--gray-12);
  --accent-a1: var(--gray-a1);
  --accent-a2: var(--gray-a2);
  --accent-a3: var(--gray-a3);
  --accent-a4: var(--gray-a4);
  --accent-a5: var(--gray-a5);
  --accent-a6: var(--gray-a6);
  --accent-a7: var(--gray-a7);
  --accent-a8: var(--gray-a8);
  --accent-a9: var(--gray-a9);
  --accent-a10: var(--gray-a10);
  --accent-a11: var(--gray-a11);
  --accent-a12: var(--gray-a12);
  --accent-contrast: var(--gray-contrast);
  --accent-surface: var(--gray-surface);
  --accent-indicator: var(--gray-indicator);
  --accent-track: var(--gray-track);
}

:root {
  --success-1: var(--green-1);
  --success-2: var(--green-2);
  --success-3: var(--green-3);
  --success-4: var(--green-4);
  --success-5: var(--green-5);
  --success-6: var(--green-6);
  --success-7: var(--green-7);
  --success-8: var(--green-8);
  --success-9: var(--green-9);
  --success-10: var(--green-10);
  --success-11: var(--green-11);
  --success-12: var(--green-12);
  --success-a1: var(--green-a1);
  --success-a2: var(--green-a2);
  --success-a3: var(--green-a3);
  --success-a4: var(--green-a4);
  --success-a5: var(--green-a5);
  --success-a6: var(--green-a6);
  --success-a7: var(--green-a7);
  --success-a8: var(--green-a8);
  --success-a9: var(--green-a9);
  --success-a10: var(--green-a10);
  --success-a11: var(--green-a11);
  --success-a12: var(--green-a12);
  --success-surface: var(--green-surface);
  --success-indicator: var(--green-indicator);
  --success-track: var(--green-track);
  --success-contrast: var(--green-contrast);
}

:root {
  --warning-1: var(--yellow-1);
  --warning-2: var(--yellow-2);
  --warning-3: var(--yellow-3);
  --warning-4: var(--yellow-4);
  --warning-5: var(--yellow-5);
  --warning-6: var(--yellow-6);
  --warning-7: var(--yellow-7);
  --warning-8: var(--yellow-8);
  --warning-9: var(--yellow-9);
  --warning-10: var(--yellow-10);
  --warning-11: var(--yellow-11);
  --warning-12: var(--yellow-12);
  --warning-a1: var(--yellow-a1);
  --warning-a2: var(--yellow-a2);
  --warning-a3: var(--yellow-a3);
  --warning-a4: var(--yellow-a4);
  --warning-a5: var(--yellow-a5);
  --warning-a6: var(--yellow-a6);
  --warning-a7: var(--yellow-a7);
  --warning-a8: var(--yellow-a8);
  --warning-a9: var(--yellow-a9);
  --warning-a10: var(--yellow-a10);
  --warning-a11: var(--yellow-a11);
  --warning-a12: var(--yellow-a12);
  --warning-surface: var(--yellow-surface);
  --warning-indicator: var(--yellow-indicator);
  --warning-track: var(--yellow-track);
  --warning-contrast: var(--yellow-contrast);
}

:root {
  --error-1: var(--red-1);
  --error-2: var(--red-2);
  --error-3: var(--red-3);
  --error-4: var(--red-4);
  --error-5: var(--red-5);
  --error-6: var(--red-6);
  --error-7: var(--red-7);
  --error-8: var(--red-8);
  --error-9: var(--red-9);
  --error-10: var(--red-10);
  --error-11: var(--red-11);
  --error-12: var(--red-12);
  --error-a1: var(--red-a1);
  --error-a2: var(--red-a2);
  --error-a3: var(--red-a3);
  --error-a4: var(--red-a4);
  --error-a5: var(--red-a5);
  --error-a6: var(--red-a6);
  --error-a7: var(--red-a7);
  --error-a8: var(--red-a8);
  --error-a9: var(--red-a9);
  --error-a10: var(--red-a10);
  --error-a11: var(--red-a11);
  --error-a12: var(--red-a12);
  --error-surface: var(--red-surface);
  --error-indicator: var(--red-indicator);
  --error-track: var(--red-track);
  --error-contrast: var(--red-contrast);
}

:root, .light, .light-theme {
  --color-overlay: var(--black-a6);
  --color-panel-solid: var(--white);
  --color-panel-translucent: rgba(255, 255, 255, 0.7);
  --color-surface: rgba(255, 255, 255, 0.85);
  --color-transparent: rgb(0 0 0 / 0);
}

.dark, .dark-theme {
  --color-overlay: var(--black-a8);
  --color-panel-solid: var(--gray-2);
  --color-panel-translucent: var(--gray-a2);
  --color-surface: rgba(0, 0, 0, 0.25);
}

:root {
  /* --- Gray --- */
  --c-bg: var(--gray-1);
  --c-bg-alt: var(--gray-2);
  --c-element: var(--gray-3);
  --c-element-hover: var(--gray-4);
  --c-element-active: var(--gray-5);
  --c-border-subtle: var(--gray-6);
  --c-border: var(--gray-7);
  --c-border-active: var(--gray-8);
  --c-solid: var(--gray-9);
  --c-solid-hover: var(--gray-10);
  --c-text-subtle: var(--gray-11);
  --c-text: var(--gray-12);
  --c-text-contrast: var(--gray-contrast);
  /* --- Accent --- */
  --c-accent-element: var(--accent-3);
  --c-accent-element-hover: var(--accent-4);
  --c-accent-border: var(--accent-7);
  --c-accent-solid: var(--accent-9);
  --c-accent-solid-hover: var(--accent-10);
  --c-accent-text: var(--accent-11);
  --c-accent-text-contrast: var(--accent-contrast);
  /* --- Feedback --- */
  --c-success-element: var(--success-3);
  --c-success-solid: var(--success-9);
  --c-success-text: var(--success-11);
  --c-warning-element: var(--warning-3);
  --c-warning-solid: var(--warning-9);
  --c-warning-text: var(--warning-11);
  --c-error-element: var(--error-3);
  --c-error-solid: var(--error-9);
  --c-error-text: var(--error-11);
  /* --- Surfaces --- */
  --c-panel: var(--color-panel-translucent);
  --c-panel-solid: var(--color-panel-solid);
  --c-surface: var(--color-surface);
  --c-overlay: var(--color-overlay);
  --c-transparent: var(--color-transparent);
}