:root {
    --c-yellow-solid-1: light-dark(#FFCB3D, #E0A500);
    --c-yellow-solid-2: light-dark(#FFC014, #FFBC05);
    --c-yellow-solid-3: light-dark(#F5B400, #FFCD42);

    --c-yellow-soft-1: light-dark(#FDF7E2, #291D00);
    --c-yellow-soft-2: light-dark(#FCF0C5, #382900);
    --c-yellow-soft-3: light-dark(#FBEAAD, #473600);
    --c-yellow-soft-4: light-dark(#FAE599, #574100);

    --c-yellow-text-1: light-dark(#805E00, #FFC21A);
    --c-yellow-text-2: light-dark(var(--c-yellow-text-1), #F5D789);
    --c-yellow-text-3: light-dark(var(--c-yellow-text-1), #523C00);
    --c-yellow-text-4: light-dark(#614700, #472B00);

    --rgb-yellow-border: 128 94 0;
    --c-yellow-border-subtle: rgb(var(--rgb-yellow-border) / 0.17);
    --c-yellow-border-regular: rgb(var(--rgb-yellow-border) / 0.39);

    --c-yellow-outline: light-dark(#DEBE6D, #BF8C00);

    --c-yellow-1: light-dark(#DEA300, var(--c-yellow-solid-1));
    --c-yellow-2: light-dark(#E8B430, var(--c-yellow-soft-4));
    --c-yellow-3: light-dark(#B88914, #805E00);
    --c-yellow-4: var(--c-yellow-soft-2);
}
:root.dark {
    --rgb-yellow-border: 255 205 56;
    --c-yellow-border-subtle: rgb(var(--rgb-yellow-border) / 0.18);
    --c-yellow-border-regular: rgb(var(--rgb-yellow-border) / 0.36);
}