@intility/bifrost-css/dist/bifrost-colors.css

/* #region teal theme (default) */
/* #endregion */
:root,
::backdrop {
  --bfc-overlay: rgba(0, 0, 0, 0.7);
  --bfc-overlay-c: white;
}

html,
.bf-darkmode,
[data-bf-color-mode=dark] {
  color-scheme: only dark;
  --bf-mode: dark;
  --bfc-base-hsl: 212, 70%, 9%;
  --bfc-base-2-hsl: 210, 64%, 11%;
  --bfc-base-3-hsl: 210, 55%, 13%;
  --bfc-base-c-hsl: 240, 14%, 96%;
  --bfc-base-c-2: hsl(212, 15%, 60%);
  --bfc-base-c-success: hsl(157, 100%, 48%);
  --bfc-base-c-warning: var(--bfc-warning);
  --bfc-base-c-alert: hsl(7, 100%, 60%);
  --bfc-base-c-wcag: hsl(220, 10%, 43%);
  --bfc-base-c-disabled: hsl(212, 18%, 35%);
  --bfc-base-dimmed-hsl: 212, 29%, 20%;
  --bfc-base-dimmed-2-hsl: 210, 39%, 17%;
  --bfc-base-dimmed-3-hsl: 210, 29%, 22%;
  --bfc-base-disabled-hsl: 212, 22%, 34%;
  --bfc-base-c-inverted-hsl: 0, 0%, 100%;
  --bfc-base-c-inverted-2: hsl(235, 16%, 85%);
  --bfc-base-c-inverted-3: hsl(216, 7%, 86%);
  --bfc-neutral-hsl: var(--gray-100-hsl);
  --bfc-neutral-2-hsl: var(--gray-50-hsl);
  --bfc-neutral-c-hsl: var(--gray-800-hsl);
  --bfc-neutral-hc: var(--gray-920);
  --bfc-neutral-fade-hsl: var(--gray-800-hsl);
  --bfc-neutral-fade-c-hsl: var(--gray-100-hsl);
  --bfc-brand-hsl: var(--teal-300-hsl);
  --bfc-brand-c-hsl: var(--teal-800-hsl);
  --bfc-brand-hc: var(--base-920);
  --bfc-brand-fade-hsl: var(--teal-800-hsl);
  --bfc-brand-fade-c-hsl: var(--teal-300-hsl);
  --bfc-chill-hsl: var(--purple-300-hsl);
  --bfc-chill-c-hsl: var(--purple-800-hsl);
  --bfc-chill-hc: var(--base-920);
  --bfc-chill-fade-hsl: var(--purple-800-hsl);
  --bfc-chill-fade-c-hsl: var(--purple-300-hsl);
  --bfc-attn-hsl: var(--pink-300-hsl);
  --bfc-attn-c-hsl: var(--pink-800-hsl);
  --bfc-attn-hc: var(--base-920);
  --bfc-attn-fade-hsl: var(--pink-800-hsl);
  --bfc-attn-fade-c-hsl: var(--pink-300-hsl);
  --bfc-success-hsl: 157, 100%, 48%;
  --bfc-success-c-hsl: 157, 100%, 10%;
  --bfc-success-hc: var(--base-920);
  --bfc-success-fade-hsl: 157, 100%, 23%;
  --bfc-success-fade-c-hsl: 157, 100%, 80%;
  --bfc-warning-fade-hsl: var(--yellow-800-hsl);
  --bfc-warning-fade-c-hsl: var(--yellow-300-hsl);
  --bfc-alert-fade-hsl: 346, 26%, 23%;
  --bfc-alert-fade-2: hsl(7, 100%, 13%);
  --bfc-alert-fade-c-hsl: 7, 100%, 70%;
  --bfc-alert-fade-2-c-hsl: 7, 100%, 70%;
  --bfc-shadow: rgba(0, 0, 0, 0.3);
  --bfc-theme-hsl: var(--teal-300-hsl);
  --bfc-theme-2: hsl(var(--teal-250-hsl));
  --bfc-theme-3: hsl(var(--teal-200-hsl));
  --bfc-theme-c-hsl: var(--teal-800-hsl);
  --bfc-theme-c-2-hsl: var(--teal-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--teal-800-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-300-hsl);
}

.bf-lightmode,
[data-bf-color-mode=light] {
  color-scheme: only light;
  --bf-mode: light;
  --bfc-base-hsl: 238, 15%, 96%;
  --bfc-base-2-hsl: 238, 10%, 98%;
  --bfc-base-3-hsl: 0, 0%, 100%;
  --bfc-base-c-hsl: 212, 70%, 9%;
  --bfc-base-c-2: hsl(238, 16%, 40%);
  --bfc-base-c-success: hsl(157, 100%, 24%);
  --bfc-base-c-warning: var(--yellow-570);
  --bfc-base-c-alert: hsl(7, 77%, 41%);
  --bfc-base-c-wcag: hsl(240, 5%, 57%);
  --bfc-base-c-disabled: hsl(238, 18%, 65%);
  --bfc-base-dimmed-hsl: 238, 16%, 85%;
  --bfc-base-dimmed-2-hsl: 216, 7%, 86%;
  --bfc-base-dimmed-3-hsl: 210, 7%, 77%;
  --bfc-base-disabled-hsl: 238, 18%, 65%;
  --bfc-base-c-inverted-hsl: 210, 55%, 13%;
  --bfc-base-c-inverted-2: hsl(212, 29%, 26%);
  --bfc-base-c-inverted-3: hsl(210, 39%, 17%);
  --bfc-neutral-hsl: var(--gray-920-hsl);
  --bfc-neutral-2-hsl: var(--gray-970-hsl);
  --bfc-neutral-c-hsl: var(--gray-150-hsl);
  --bfc-neutral-hc: white;
  --bfc-neutral-fade-hsl: var(--gray-150-hsl);
  --bfc-neutral-fade-c-hsl: var(--gray-920-hsl);
  --bfc-brand-hsl: var(--teal-570-hsl);
  --bfc-brand-c-hsl: var(--teal-120-hsl);
  --bfc-brand-hc: white;
  --bfc-brand-fade-hsl: var(--teal-120-hsl);
  --bfc-brand-fade-c-hsl: var(--teal-570-hsl);
  --bfc-chill-hsl: var(--purple-570-hsl);
  --bfc-chill-c-hsl: var(--purple-120-hsl);
  --bfc-chill-hc: white;
  --bfc-chill-fade-hsl: var(--purple-120-hsl);
  --bfc-chill-fade-c-hsl: var(--purple-570-hsl);
  --bfc-attn-hsl: var(--pink-570-hsl);
  --bfc-attn-c-hsl: var(--pink-120-hsl);
  --bfc-attn-hc: white;
  --bfc-attn-fade-hsl: var(--pink-120-hsl);
  --bfc-attn-fade-c-hsl: var(--pink-570-hsl);
  --bfc-success-hsl: 157, 100%, 48%;
  --bfc-success-c-hsl: 157, 100%, 10%;
  --bfc-success-hc: var(--base-920);
  --bfc-success-fade-hsl: 144, 100%, 82%;
  --bfc-success-fade-c-hsl: 144, 100%, 20%;
  --bfc-warning-fade-hsl: var(--yellow-120-hsl);
  --bfc-warning-fade-c-hsl: var(--yellow-570-hsl);
  --bfc-alert-fade-hsl: 8, 100%, 94%;
  --bfc-alert-fade-2: hsl(7, 100%, 95%);
  --bfc-alert-fade-c-hsl: 7, 77%, 41%;
  --bfc-alert-fade-2-c-hsl: 7, 100%, 40%;
  --bfc-shadow: rgba(0, 0, 0, 0.1);
  --bfc-theme-hsl: var(--teal-570-hsl);
  --bfc-theme-2: hsl(var(--teal-620-hsl));
  --bfc-theme-3: hsl(var(--teal-660-hsl));
  --bfc-theme-c-hsl: var(--teal-120-hsl);
  --bfc-theme-c-2-hsl: var(--teal-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--teal-120-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
}

@media (prefers-color-scheme: light) {
  html {
    color-scheme: only light;
    --bf-mode: light;
    --bfc-base-hsl: 238, 15%, 96%;
    --bfc-base-2-hsl: 238, 10%, 98%;
    --bfc-base-3-hsl: 0, 0%, 100%;
    --bfc-base-c-hsl: 212, 70%, 9%;
    --bfc-base-c-2: hsl(238, 16%, 40%);
    --bfc-base-c-success: hsl(157, 100%, 24%);
    --bfc-base-c-warning: var(--yellow-570);
    --bfc-base-c-alert: hsl(7, 77%, 41%);
    --bfc-base-c-wcag: hsl(240, 5%, 57%);
    --bfc-base-c-disabled: hsl(238, 18%, 65%);
    --bfc-base-dimmed-hsl: 238, 16%, 85%;
    --bfc-base-dimmed-2-hsl: 216, 7%, 86%;
    --bfc-base-dimmed-3-hsl: 210, 7%, 77%;
    --bfc-base-disabled-hsl: 238, 18%, 65%;
    --bfc-base-c-inverted-hsl: 210, 55%, 13%;
    --bfc-base-c-inverted-2: hsl(212, 29%, 26%);
    --bfc-base-c-inverted-3: hsl(210, 39%, 17%);
    --bfc-neutral-hsl: var(--gray-920-hsl);
    --bfc-neutral-2-hsl: var(--gray-970-hsl);
    --bfc-neutral-c-hsl: var(--gray-150-hsl);
    --bfc-neutral-hc: white;
    --bfc-neutral-fade-hsl: var(--gray-150-hsl);
    --bfc-neutral-fade-c-hsl: var(--gray-920-hsl);
    --bfc-brand-hsl: var(--teal-570-hsl);
    --bfc-brand-c-hsl: var(--teal-120-hsl);
    --bfc-brand-hc: white;
    --bfc-brand-fade-hsl: var(--teal-120-hsl);
    --bfc-brand-fade-c-hsl: var(--teal-570-hsl);
    --bfc-chill-hsl: var(--purple-570-hsl);
    --bfc-chill-c-hsl: var(--purple-120-hsl);
    --bfc-chill-hc: white;
    --bfc-chill-fade-hsl: var(--purple-120-hsl);
    --bfc-chill-fade-c-hsl: var(--purple-570-hsl);
    --bfc-attn-hsl: var(--pink-570-hsl);
    --bfc-attn-c-hsl: var(--pink-120-hsl);
    --bfc-attn-hc: white;
    --bfc-attn-fade-hsl: var(--pink-120-hsl);
    --bfc-attn-fade-c-hsl: var(--pink-570-hsl);
    --bfc-success-hsl: 157, 100%, 48%;
    --bfc-success-c-hsl: 157, 100%, 10%;
    --bfc-success-hc: var(--base-920);
    --bfc-success-fade-hsl: 144, 100%, 82%;
    --bfc-success-fade-c-hsl: 144, 100%, 20%;
    --bfc-warning-fade-hsl: var(--yellow-120-hsl);
    --bfc-warning-fade-c-hsl: var(--yellow-570-hsl);
    --bfc-alert-fade-hsl: 8, 100%, 94%;
    --bfc-alert-fade-2: hsl(7, 100%, 95%);
    --bfc-alert-fade-c-hsl: 7, 77%, 41%;
    --bfc-alert-fade-2-c-hsl: 7, 100%, 40%;
    --bfc-shadow: rgba(0, 0, 0, 0.1);
    --bfc-theme-hsl: var(--teal-570-hsl);
    --bfc-theme-2: hsl(var(--teal-620-hsl));
    --bfc-theme-3: hsl(var(--teal-660-hsl));
    --bfc-theme-c-hsl: var(--teal-120-hsl);
    --bfc-theme-c-2-hsl: var(--teal-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--teal-120-hsl);
    --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
  }
  html:not(.bf-darkmode, [data-bf-color-mode=dark]) .bf-dark-only {
    display: none !important;
  }
}
@media (prefers-color-scheme: dark) {
  html:not(.bf-lightmode, [data-bf-color-mode=light]) .bf-light-only {
    display: none !important;
  }
}
html:is(.bf-darkmode, [data-bf-color-mode=dark]) .bf-light-only,
html:is(.bf-lightmode, [data-bf-color-mode=light]) .bf-dark-only {
  display: none !important;
}

.bf-theme-teal,
.bf-theme-teal.bf-darkmode,
.bf-darkmode .bf-theme-teal,
[data-bf-color-mode=dark] .bf-theme-teal,
.bf-lightmode .bf-darkmode .bf-theme-teal {
  --bfc-theme-hsl: var(--teal-300-hsl);
  --bfc-theme-2: hsl(var(--teal-250-hsl));
  --bfc-theme-3: hsl(var(--teal-200-hsl));
  --bfc-theme-c-hsl: var(--teal-800-hsl);
  --bfc-theme-c-2-hsl: var(--teal-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--teal-800-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-300-hsl);
}

.bf-theme-teal.bf-lightmode,
.bf-lightmode .bf-theme-teal,
[data-bf-color-mode=light] .bf-theme-teal,
.bf-darkmode .bf-lightmode .bf-theme-teal {
  --bfc-theme-hsl: var(--teal-570-hsl);
  --bfc-theme-2: hsl(var(--teal-620-hsl));
  --bfc-theme-3: hsl(var(--teal-660-hsl));
  --bfc-theme-c-hsl: var(--teal-120-hsl);
  --bfc-theme-c-2-hsl: var(--teal-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--teal-120-hsl);
  --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-teal {
    --bfc-theme-hsl: var(--teal-570-hsl);
    --bfc-theme-2: hsl(var(--teal-620-hsl));
    --bfc-theme-3: hsl(var(--teal-660-hsl));
    --bfc-theme-c-hsl: var(--teal-120-hsl);
    --bfc-theme-c-2-hsl: var(--teal-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--teal-120-hsl);
    --bfc-theme-fade-c-hsl: var(--teal-570-hsl);
  }
}
/* #region purple theme */
.bf-theme-purple,
.bf-theme-purple.bf-darkmode,
.bf-darkmode .bf-theme-purple,
[data-bf-color-mode=dark] .bf-theme-purple,
.bf-lightmode .bf-darkmode .bf-theme-purple {
  --bfc-theme-hsl: var(--purple-300-hsl);
  --bfc-theme-2: hsl(var(--purple-250-hsl));
  --bfc-theme-3: hsl(var(--purple-200-hsl));
  --bfc-theme-c-hsl: var(--purple-800-hsl);
  --bfc-theme-c-2-hsl: var(--purple-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--purple-800-hsl);
  --bfc-theme-fade-c-hsl: var(--purple-300-hsl);
}

.bf-theme-purple.bf-lightmode,
.bf-lightmode .bf-theme-purple,
[data-bf-color-mode=light] .bf-theme-purple,
.bf-darkmode .bf-lightmode .bf-theme-purple {
  --bfc-theme-hsl: var(--purple-570-hsl);
  --bfc-theme-2: hsl(var(--purple-620-hsl));
  --bfc-theme-3: hsl(var(--purple-660-hsl));
  --bfc-theme-c-hsl: var(--purple-120-hsl);
  --bfc-theme-c-2-hsl: var(--purple-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--purple-120-hsl);
  --bfc-theme-fade-c-hsl: var(--purple-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-purple {
    --bfc-theme-hsl: var(--purple-570-hsl);
    --bfc-theme-2: hsl(var(--purple-620-hsl));
    --bfc-theme-3: hsl(var(--purple-660-hsl));
    --bfc-theme-c-hsl: var(--purple-120-hsl);
    --bfc-theme-c-2-hsl: var(--purple-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--purple-120-hsl);
    --bfc-theme-fade-c-hsl: var(--purple-570-hsl);
  }
}
/* #endregion */
/* #region gray theme */
.bf-theme-gray,
.bf-theme-gray.bf-darkmode,
.bf-darkmode .bf-theme-gray,
[data-bf-color-mode=dark] .bf-theme-gray,
.bf-lightmode .bf-darkmode .bf-theme-gray {
  --bfc-theme-hsl: var(--base-120-hsl);
  --bfc-theme-2: hsl(var(--base-100-hsl));
  --bfc-theme-3: hsl(var(--base-30-hsl));
  --bfc-theme-c-hsl: var(--base-500-hsl);
  --bfc-theme-c-2-hsl: var(--base-920-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--base-500-hsl);
  --bfc-theme-fade-c-hsl: var(--base-120-hsl);
}

.bf-theme-gray.bf-lightmode,
.bf-lightmode .bf-theme-gray,
[data-bf-color-mode=light] .bf-theme-gray,
.bf-darkmode .bf-lightmode .bf-theme-gray {
  --bfc-theme-hsl: var(--base-420-hsl);
  --bfc-theme-2: hsl(var(--base-380-hsl));
  --bfc-theme-3: hsl(var(--gray-400-hsl));
  --bfc-theme-c-hsl: var(--base-40-hsl);
  --bfc-theme-c-2-hsl: var(--base-30-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--base-40-hsl);
  --bfc-theme-fade-c-hsl: var(--base-360-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-gray {
    --bfc-theme-hsl: var(--base-420-hsl);
    --bfc-theme-2: hsl(var(--base-380-hsl));
    --bfc-theme-3: hsl(var(--gray-400-hsl));
    --bfc-theme-c-hsl: var(--base-40-hsl);
    --bfc-theme-c-2-hsl: var(--base-30-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--base-40-hsl);
    --bfc-theme-fade-c-hsl: var(--base-360-hsl);
  }
}
/* #endregion */
/* #region pink theme */
.bf-theme-pink,
.bf-theme-pink.bf-darkmode,
.bf-darkmode .bf-theme-pink,
[data-bf-color-mode=dark] .bf-theme-pink,
.bf-lightmode .bf-darkmode .bf-theme-pink {
  --bfc-theme-hsl: var(--pink-300-hsl);
  --bfc-theme-2: hsl(var(--pink-250-hsl));
  --bfc-theme-3: hsl(var(--pink-200-hsl));
  --bfc-theme-c-hsl: var(--pink-800-hsl);
  --bfc-theme-c-2-hsl: var(--pink-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--pink-800-hsl);
  --bfc-theme-fade-c-hsl: var(--pink-300-hsl);
}

.bf-theme-pink.bf-lightmode,
.bf-lightmode .bf-theme-pink,
[data-bf-color-mode=light] .bf-theme-pink,
.bf-darkmode .bf-lightmode .bf-theme-pink {
  --bfc-theme-hsl: var(--pink-570-hsl);
  --bfc-theme-2: hsl(var(--pink-620-hsl));
  --bfc-theme-3: hsl(var(--pink-660-hsl));
  --bfc-theme-c-hsl: var(--pink-120-hsl);
  --bfc-theme-c-2-hsl: var(--pink-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--pink-120-hsl);
  --bfc-theme-fade-c-hsl: var(--pink-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-pink {
    --bfc-theme-hsl: var(--pink-570-hsl);
    --bfc-theme-2: hsl(var(--pink-620-hsl));
    --bfc-theme-3: hsl(var(--pink-660-hsl));
    --bfc-theme-c-hsl: var(--pink-120-hsl);
    --bfc-theme-c-2-hsl: var(--pink-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--pink-120-hsl);
    --bfc-theme-fade-c-hsl: var(--pink-570-hsl);
  }
}
/* #endregion */
/* #region green theme */
.bf-theme-green,
.bf-theme-green.bf-darkmode,
.bf-darkmode .bf-theme-green,
[data-bf-color-mode=dark] .bf-theme-green,
.bf-lightmode .bf-darkmode .bf-theme-green {
  --bfc-theme-hsl: var(--green-300-hsl);
  --bfc-theme-2: hsl(var(--green-250-hsl));
  --bfc-theme-3: hsl(var(--green-200-hsl));
  --bfc-theme-c-hsl: var(--green-800-hsl);
  --bfc-theme-c-2-hsl: var(--green-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--green-800-hsl);
  --bfc-theme-fade-c-hsl: var(--green-300-hsl);
}

.bf-theme-green.bf-lightmode,
.bf-lightmode .bf-theme-green,
[data-bf-color-mode=light] .bf-theme-green,
.bf-darkmode .bf-lightmode .bf-theme-green {
  --bfc-theme-hsl: var(--green-570-hsl);
  --bfc-theme-2: hsl(var(--green-620-hsl));
  --bfc-theme-3: hsl(var(--green-660-hsl));
  --bfc-theme-c-hsl: var(--green-120-hsl);
  --bfc-theme-c-2-hsl: var(--green-120-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--green-120-hsl);
  --bfc-theme-fade-c-hsl: var(--green-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-green {
    --bfc-theme-hsl: var(--green-570-hsl);
    --bfc-theme-2: hsl(var(--green-620-hsl));
    --bfc-theme-3: hsl(var(--green-660-hsl));
    --bfc-theme-c-hsl: var(--green-120-hsl);
    --bfc-theme-c-2-hsl: var(--green-120-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--green-120-hsl);
    --bfc-theme-fade-c-hsl: var(--green-570-hsl);
  }
}
/* #endregion */
/* #region yellow theme */
.bf-theme-yellow,
.bf-theme-yellow.bf-darkmode,
.bf-darkmode .bf-theme-yellow,
[data-bf-color-mode=dark] .bf-theme-yellow,
.bf-lightmode .bf-darkmode .bf-theme-yellow {
  --bfc-theme-hsl: var(--yellow-300-hsl);
  --bfc-theme-2: hsl(var(--yellow-250-hsl));
  --bfc-theme-3: hsl(var(--yellow-200-hsl));
  --bfc-theme-c-hsl: var(--yellow-800-hsl);
  --bfc-theme-c-2-hsl: var(--yellow-890-hsl);
  --bfc-theme-hc: var(--base-920);
  --bfc-theme-fade-hsl: var(--yellow-800-hsl);
  --bfc-theme-fade-c-hsl: var(--yellow-300-hsl);
}

.bf-theme-yellow.bf-lightmode,
.bf-lightmode .bf-theme-yellow,
[data-bf-color-mode=light] .bf-theme-yellow,
.bf-darkmode .bf-lightmode .bf-theme-yellow {
  --bfc-theme-hsl: var(--yellow-570-hsl);
  --bfc-theme-2: hsl(var(--yellow-620-hsl));
  --bfc-theme-3: hsl(var(--yellow-660-hsl));
  --bfc-theme-c-hsl: var(--yellow-120-hsl);
  --bfc-theme-c-2-hsl: var(--yellow-100-hsl);
  --bfc-theme-hc: white;
  --bfc-theme-fade-hsl: var(--yellow-120-hsl);
  --bfc-theme-fade-c-hsl: var(--yellow-570-hsl);
}

@media (prefers-color-scheme: light) {
  .bf-theme-yellow {
    --bfc-theme-hsl: var(--yellow-570-hsl);
    --bfc-theme-2: hsl(var(--yellow-620-hsl));
    --bfc-theme-3: hsl(var(--yellow-660-hsl));
    --bfc-theme-c-hsl: var(--yellow-120-hsl);
    --bfc-theme-c-2-hsl: var(--yellow-100-hsl);
    --bfc-theme-hc: white;
    --bfc-theme-fade-hsl: var(--yellow-120-hsl);
    --bfc-theme-fade-c-hsl: var(--yellow-570-hsl);
  }
}
/* #endregion */
/* #region theme aliases
aliases and values for `theme` needs to be applied for both dark and light
mode for every theme class (or nested themes won't work) */
html,
.bf-darkmode,
.bf-lightmode,
[data-bf-color-mode=dark],
[data-bf-color-mode=light],
.bf-theme-teal,
.bf-theme-purple,
.bf-theme-pink,
.bf-theme-green,
.bf-theme-yellow,
.bf-theme-gray {
  --bfc-base-c-theme: var(--bfc-theme);
  --bfc-theme-1: hsl(var(--bfc-theme-hsl));
  --bfc-theme-c-1: hsl(var(--bfc-theme-c-hsl));
  --bfc-theme-c-2: hsl(var(--bfc-theme-c-2-hsl));
  --bfc-theme-c: var(--bfc-theme-c-1);
  --bfc-theme: var(--bfc-theme-1);
  --bfc-theme-fade: hsl(var(--bfc-theme-fade-hsl));
  --bfc-theme-fade-c: hsl(var(--bfc-theme-fade-c-hsl));
  --bff-theme: var(--bfc-base-c-theme);
  --bft-theme: var(--bfc-base-c-theme);
}

/* #endregion */
/* #region aliases and values for both dark and light mode */
html,
.bf-darkmode,
.bf-lightmode,
[data-bf-color-mode=dark],
[data-bf-color-mode=light] {
  --bf-shadow-blur: 8px;
  --bf-shadow-bottom: 0 4px var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow-left: -4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow-right: 4px 0 var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow-top: 0 -4px var(--bf-shadow-blur) var(--bfc-shadow);
  --bf-shadow: 0 0 var(--bf-shadow-blur) var(--bfc-shadow);
  --bfc-base: var(--bfc-base-1);
  --bfc-base-1: hsl(var(--bfc-base-hsl));
  --bfc-base-2: hsl(var(--bfc-base-2-hsl));
  --bfc-base-3: hsl(var(--bfc-base-3-hsl));
  --bfc-base-c-1: hsl(var(--bfc-base-c-hsl));
  --bfc-base-c-chill: var(--bfc-chill);
  --bfc-base-c-brand: var(--bfc-brand);
  --bfc-base-c-attn: var(--bfc-attn);
  --bfc-base-c-dimmed: var(--bfc-base-dimmed);
  --bfc-base-c: var(--bfc-base-c-1);
  --bfc-base-dimmed-1: var(--bfc-base-dimmed);
  --bfc-base-dimmed-2: hsl(var(--bfc-base-dimmed-2-hsl));
  --bfc-base-dimmed-3: hsl(var(--bfc-base-dimmed-3-hsl));
  --bfc-base-dimmed-c: var(--bfc-base-c-1);
  --bfc-base-dimmed: hsl(var(--bfc-base-dimmed-hsl));
  --bfc-base-c-inverted-1: hsl(var(--bfc-base-c-inverted-hsl));
  --bfc-base-c-inverted: var(--bfc-base-c-inverted-1);
  --bfc-base-disabled-c: var(--bfc-base-c-2);
  --bfc-base-disabled: hsl(var(--bfc-base-disabled-hsl));
  --bfc-neutral: hsl(var(--bfc-neutral-hsl));
  --bfc-neutral-2: hsl(var(--bfc-neutral-2-hsl));
  --bfc-neutral-c: hsl(var(--bfc-neutral-c-hsl));
  --bfc-neutral-fade: hsl(var(--bfc-neutral-fade-hsl));
  --bfc-neutral-fade-c: hsl(var(--bfc-neutral-fade-c-hsl));
  --bfc-brand: hsl(var(--bfc-brand-hsl));
  --bfc-brand-c: hsl(var(--bfc-brand-c-hsl));
  --bfc-brand-fade: hsl(var(--bfc-brand-fade-hsl));
  --bfc-brand-fade-c: hsl(var(--bfc-brand-fade-c-hsl));
  --bfc-chill: hsl(var(--bfc-chill-hsl));
  --bfc-chill-c: hsl(var(--bfc-chill-c-hsl));
  --bfc-chill-fade: hsl(var(--bfc-chill-fade-hsl));
  --bfc-chill-fade-c: hsl(var(--bfc-chill-fade-c-hsl));
  --bfc-attn: hsl(var(--bfc-attn-hsl));
  --bfc-attn-c: hsl(var(--bfc-attn-c-hsl));
  --bfc-attn-fade: hsl(var(--bfc-attn-fade-hsl));
  --bfc-attn-fade-c: hsl(var(--bfc-attn-fade-c-hsl));
  --bfc-success: hsl(var(--bfc-success-hsl));
  --bfc-success-c: hsl(var(--bfc-success-c-hsl));
  --bfc-success-fade: hsl(var(--bfc-success-fade-hsl));
  --bfc-success-fade-c: hsl(var(--bfc-success-fade-c-hsl));
  --bfc-warning-hs: 45, 100%;
  --bfc-warning-hsl: var(--yellow-300-hsl);
  --bfc-warning-c-hsl: var(--yellow-800-hsl);
  --bfc-warning-hc: var(--base-920);
  --bfc-warning: hsl(var(--bfc-warning-hsl));
  --bfc-warning-c: hsl(var(--bfc-warning-c-hsl));
  --bfc-warning-fade: hsl(var(--bfc-warning-fade-hsl));
  --bfc-warning-fade-c: hsl(var(--bfc-warning-fade-c-hsl));
  --bfc-alert-hsl: 8, 75%, 45%;
  --bfc-alert-2: hsl(8, 73%, 49%);
  --bfc-alert-c-hsl: 0, 0%, 100%;
  --bfc-alert-c: hsl(var(--bfc-alert-c-hsl));
  --bfc-alert-hc: white;
  --bfc-alert-fade-1-c: hsl(var(--bfc-alert-fade-c-hsl));
  --bfc-alert-fade-1: hsl(var(--bfc-alert-fade-hsl));
  --bfc-alert-fade-2-c: hsl(var(--bfc-alert-fade-2-c-hsl));
  --bfc-alert-fade-c: var(--bfc-alert-fade-1-c);
  --bfc-alert-fade: var(--bfc-alert-fade-1);
  --bfc-alert: hsl(var(--bfc-alert-hsl));
  --bff-alert: var(--bfc-base-c-alert);
  --bff-attn: var(--bfc-base-c-attn);
  --bff-base-2: var(--bfc-base-c-2);
  --bff-base: var(--bfc-base-c);
  --bff-chill: var(--bfc-base-c-chill);
  --bff-dimmed: var(--bfc-base-c-dimmed);
  --bff-disabled: var(--bfc-base-c-disabled);
  --bff-inverted-2: var(--bfc-base-c-inverted-2);
  --bff-inverted: var(--bfc-base-c-inverted);
  --bff-success: var(--bfc-base-c-success);
  --bff-warning: var(--bfc-base-c-warning);
  --bff-wcag: var(--bfc-base-c-wcag);
  --bft-base-2: var(--bfc-base-c-2);
  --bft-base: var(--bfc-base-c);
  --bft-disabled: var(--bfc-base-c-disabled);
}

/* #endregion */
/* #region Background color class names */
.bfc-base-bg,
.bfc-base-1-bg {
  background-color: var(--bfc-base);
  color: var(--bft-base);
}

.bfc-base-2-bg {
  background-color: var(--bfc-base-2);
  color: var(--bft-base);
}

.bfc-base-3-bg {
  background-color: var(--bfc-base-3);
  color: var(--bft-base);
}

.bfc-dimmed-bg {
  background-color: var(--bfc-base-dimmed);
  color: var(--bfc-base-dimmed-c);
}

.bfc-inverted-bg {
  background-color: var(--bfc-base-c-inverted);
  color: var(--bfc-base);
}

.bfc-inverted-2-bg {
  background-color: var(--bfc-base-c-inverted-2);
  color: var(--bfc-base);
}

.bfc-disabled-bg {
  background-color: var(--bfc-base-disabled);
  color: var(--bfc-base-c-2);
}

.bfc-theme-bg {
  background-color: var(--bfc-theme);
  color: var(--bfc-theme-hc);
}

.bfc-theme-fade-bg {
  background-color: var(--bfc-theme-fade);
  color: var(--bfc-theme-fade-c);
}

.bfc-theme-fade-2-bg {
  background-color: var(--bfc-theme-c-2);
  color: var(--bfc-theme);
}

.bfc-success-bg {
  background-color: var(--bfc-success);
  color: var(--bfc-success-hc);
}

.bfc-success-fade-bg {
  background-color: var(--bfc-success-fade);
  color: var(--bfc-success-fade-c);
}

.bfc-warning-bg {
  background-color: var(--bfc-warning);
  color: var(--bfc-warning-hc);
}

.bfc-warning-fade-bg {
  background-color: var(--bfc-warning-fade);
  color: var(--bfc-warning-fade-c);
}

.bfc-neutral-bg {
  background-color: var(--bfc-neutral);
  color: var(--bfc-neutral-hc);
}

.bfc-neutral-fade-bg {
  background-color: var(--bfc-neutral-fade);
  color: var(--bfc-neutral-fade-c);
}

.bfc-alert-bg {
  background-color: var(--bfc-alert);
  color: var(--bfc-alert-hc);
}

.bfc-alert-fade-bg {
  background-color: var(--bfc-alert-fade);
  color: var(--bfc-alert-fade-c);
}

.bfc-alert-fade-2-bg {
  background-color: var(--bfc-alert-fade-2);
  color: var(--bfc-alert-fade-2-c);
}

.bfc-attn-bg {
  background-color: var(--bfc-attn);
  color: var(--bfc-attn-hc);
}

.bfc-attn-fade-bg {
  background-color: hsl(var(--bfc-attn-fade-hsl));
  color: hsl(var(--bfc-attn-fade-c-hsl));
}

.bfc-brand-bg {
  background-color: var(--bfc-brand);
  color: var(--bfc-brand-hc);
}

.bfc-brand-fade-bg {
  background-color: var(--bfc-brand-fade);
  color: var(--bfc-brand-fade-c);
}

.bfc-chill-bg {
  background-color: var(--bfc-chill);
  color: var(--bfc-chill-hc);
}

.bfc-chill-fade-bg {
  background-color: var(--bfc-chill-fade);
  color: var(--bfc-chill-fade-c);
}

/* #endregion */
:where(.bfc-dimmed-bg,
.bfc-inverted-bg,
.bfc-inverted-2-bg,
.bfc-disabled-bg,
.bfc-theme-bg,
.bfc-theme-fade-bg,
.bfc-theme-fade-2-bg,
.bfc-neutral-bg,
.bfc-neutral-fade-bg,
.bfc-brand-bg,
.bfc-brand-fade-bg,
.bfc-chill-bg,
.bfc-chill-fade-bg,
.bfc-attn-bg,
.bfc-attn-fade-bg,
.bfc-success-bg,
.bfc-success-fade-bg,
.bfc-warning-bg,
.bfc-warning-fade-bg,
.bfc-alert-bg,
.bfc-alert-fade-bg,
.bfc-alert-fade-2-bg) :is(a, .bf-link) {
  color: inherit;
}

.bfc-base-1,
.bfc-base {
  color: var(--bft-base);
}

.bfc-base-2 {
  color: var(--bft-base-2);
}

.bfc-disabled {
  color: var(--bft-disabled);
}

.bfc-theme {
  color: var(--bft-theme);
}

.bfc-success {
  color: var(--bfc-base-c-success);
}

.bfc-warning {
  color: var(--bfc-base-c-warning);
}

.bfc-alert {
  color: var(--bfc-base-c-alert);
}

.bfc-attn {
  color: var(--bfc-base-c-attn);
}

.bfc-brand {
  color: var(--bfc-base-c-brand);
}

.bfc-chill {
  color: var(--bfc-base-c-chill);
}

.bf-shadow {
  box-shadow: var(--bf-shadow);
}

.bf-shadow-top {
  box-shadow: var(--bf-shadow-top);
}

.bf-shadow-right {
  box-shadow: var(--bf-shadow-right);
}

.bf-shadow-bottom {
  box-shadow: var(--bf-shadow-bottom);
}

.bf-shadow-left {
  box-shadow: var(--bf-shadow-left);
}

html {
  --teal-100-hsl: 172, 94%, 94%;
  --teal-100: hsl(var(--teal-100-hsl));
  --teal-120-hsl: 172, 91%, 92%;
  --teal-120: hsl(var(--teal-120-hsl));
  --teal-150-hsl: 172, 90%, 88%;
  --teal-150: hsl(var(--teal-150-hsl));
  --teal-200-hsl: 173, 90%, 80%;
  --teal-200: hsl(var(--teal-200-hsl));
  --teal-250-hsl: 173, 90%, 68%;
  --teal-250: hsl(var(--teal-250-hsl));
  --teal-300-hsl: 173, 90%, 50%;
  --teal-300: hsl(var(--teal-300-hsl));
  --teal-570-hsl: 181, 100%, 23%;
  --teal-570: hsl(var(--teal-570-hsl));
  --teal-620-hsl: 181, 98%, 21%;
  --teal-620: hsl(var(--teal-620-hsl));
  --teal-660-hsl: 181, 100%, 17%;
  --teal-660: hsl(var(--teal-660-hsl));
  --teal-800-hsl: 186, 100%, 13%;
  --teal-800: hsl(var(--teal-800-hsl));
  --teal-890-hsl: 192, 100%, 8%;
  --teal-890: hsl(var(--teal-890-hsl));
  --purple-100-hsl: 258, 92%, 95%;
  --purple-100: hsl(var(--purple-100-hsl));
  --purple-120-hsl: 259, 94%, 93%;
  --purple-120: hsl(var(--purple-120-hsl));
  --purple-150-hsl: 258, 100%, 91%;
  --purple-150: hsl(var(--purple-150-hsl));
  --purple-200-hsl: 258, 100%, 87%;
  --purple-200: hsl(var(--purple-200-hsl));
  --purple-250-hsl: 258, 100%, 82%;
  --purple-250: hsl(var(--purple-250-hsl));
  --purple-300-hsl: 258, 100%, 77%;
  --purple-300: hsl(var(--purple-300-hsl));
  --purple-570-hsl: 264, 76%, 46%;
  --purple-570: hsl(var(--purple-570-hsl));
  --purple-620-hsl: 264, 76%, 41%;
  --purple-620: hsl(var(--purple-620-hsl));
  --purple-660-hsl: 264, 77%, 37%;
  --purple-660: hsl(var(--purple-660-hsl));
  --purple-800-hsl: 252, 53%, 25%;
  --purple-800: hsl(var(--purple-800-hsl));
  --purple-890-hsl: 238, 44%, 16%;
  --purple-890: hsl(var(--purple-890-hsl));
  --pink-100-hsl: 323, 100%, 93%;
  --pink-100: hsl(var(--pink-100-hsl));
  --pink-120-hsl: 323, 100%, 91%;
  --pink-120: hsl(var(--pink-120-hsl));
  --pink-150-hsl: 323, 100%, 89%;
  --pink-150: hsl(var(--pink-150-hsl));
  --pink-200-hsl: 324, 100%, 84%;
  --pink-200: hsl(var(--pink-200-hsl));
  --pink-250-hsl: 323, 100%, 77%;
  --pink-250: hsl(var(--pink-250-hsl));
  --pink-300-hsl: 324, 100%, 71%;
  --pink-300: hsl(var(--pink-300-hsl));
  --pink-570-hsl: 325, 100%, 37%;
  --pink-570: hsl(var(--pink-570-hsl));
  --pink-620-hsl: 325, 94%, 34%;
  --pink-620: hsl(var(--pink-620-hsl));
  --pink-660-hsl: 324, 89%, 32%;
  --pink-660: hsl(var(--pink-660-hsl));
  --pink-800-hsl: 317, 75%, 20%;
  --pink-800: hsl(var(--pink-800-hsl));
  --pink-890-hsl: 285, 51%, 12%;
  --pink-890: hsl(var(--pink-890-hsl));
  --green-100-hsl: 145, 100%, 93%;
  --green-100: hsl(var(--green-100-hsl));
  --green-150-hsl: 144, 100%, 89%;
  --green-150: hsl(var(--green-150-hsl));
  --green-200-hsl: 144, 100%, 82%;
  --green-200: hsl(var(--green-200-hsl));
  --green-250-hsl: 153, 95%, 67%;
  --green-250: hsl(var(--green-250-hsl));
  --green-300-hsl: 157, 100%, 48%;
  --green-300: hsl(var(--green-300-hsl));
  --green-570-hsl: 157, 100%, 24%;
  --green-570: hsl(var(--green-570-hsl));
  --green-620-hsl: 157, 100%, 21%;
  --green-620: hsl(var(--green-620-hsl));
  --green-660-hsl: 157, 100%, 19%;
  --green-660: hsl(var(--green-660-hsl));
  --green-800-hsl: 157, 100%, 11%;
  --green-800: hsl(var(--green-800-hsl));
  --green-890-hsl: 156, 67%, 8%;
  --green-890: hsl(var(--green-890-hsl));
  --yellow-100-hsl: 49, 100%, 92%;
  --yellow-100: hsl(var(--yellow-100-hsl));
  --yellow-120-hsl: 49, 100%, 89%;
  --yellow-120: hsl(var(--yellow-120-hsl));
  --yellow-150-hsl: 49, 100%, 85%;
  --yellow-150: hsl(var(--yellow-150-hsl));
  --yellow-200-hsl: 49, 100%, 79%;
  --yellow-200: hsl(var(--yellow-200-hsl));
  --yellow-250-hsl: 47, 100%, 75%;
  --yellow-250: hsl(var(--yellow-250-hsl));
  --yellow-300-hsl: 45, 100%, 72%;
  --yellow-300: hsl(var(--yellow-300-hsl));
  --yellow-570-hsl: 37, 88%, 32%;
  --yellow-570: hsl(var(--yellow-570-hsl));
  --yellow-620-hsl: 39, 91%, 27%;
  --yellow-620: hsl(var(--yellow-620-hsl));
  --yellow-660-hsl: 40, 95%, 23%;
  --yellow-660: hsl(var(--yellow-660-hsl));
  --yellow-800-hsl: 39, 100%, 15%;
  --yellow-800: hsl(var(--yellow-800-hsl));
  --yellow-890-hsl: 43, 100%, 5%;
  --yellow-890: hsl(var(--yellow-890-hsl));
  /* temporary base primitives */
  --base-0-hsl: 0, 0%, 100%;
  --base-10-hsl: 238, 10%, 98%;
  --base-10: hsl(var(--base-10-hsl));
  --base-20-hsl: 238, 15%, 96%;
  --base-20: hsl(var(--base-20-hsl));
  --base-30-hsl: 238, 13%, 94%;
  --base-30: hsl(var(--base-30-hsl));
  --base-40-hsl: 238, 10%, 90%;
  --base-40: hsl(var(--base-40-hsl));
  --base-100-hsl: 210, 15%, 87%;
  --base-100: hsl(var(--base-100-hsl));
  --base-110-hsl: 213, 14%, 85%;
  --base-110: hsl(var(--base-110-hsl));
  --base-120-hsl: 212, 15%, 83%;
  --base-120: hsl(var(--base-120-hsl));
  --base-200-hsl: 211, 15%, 65%;
  --base-200: hsl(var(--base-200-hsl));
  --base-320-hsl: 212, 15%, 56%;
  --base-320: hsl(var(--base-320-hsl));
  --base-340-hsl: 212, 15%, 44%;
  --base-340: hsl(var(--base-340-hsl));
  --base-360-hsl: 213, 22%, 34%;
  --base-360: hsl(var(--base-360-hsl));
  --base-380-hsl: 211, 20%, 30%;
  --base-380: hsl(var(--base-380-hsl));
  --base-400-hsl: 212, 30%, 22%;
  --base-400: hsl(var(--base-400-hsl));
  --base-410-hsl: 212, 33%, 20%;
  --base-410: hsl(var(--base-410-hsl));
  --base-420-hsl: 212, 35%, 19%;
  --base-420: hsl(var(--base-420-hsl));
  --base-500-hsl: 211, 39%, 17%;
  --base-500: hsl(var(--base-500-hsl));
  --base-900-hsl: 210, 55%, 13%;
  --base-900: hsl(var(--base-900-hsl));
  --base-910-hsl: 210, 64%, 11%;
  --base-910: hsl(var(--base-910-hsl));
  --base-920-hsl: 212, 70%, 9%;
  --base-920: hsl(var(--base-920-hsl));
  --gray-50-hsl: 240, 9%, 98%;
  --gray-50: hsl(var(--gray-50-hsl));
  --gray-100-hsl: 240, 14%, 96%;
  --gray-100: hsl(var(--gray-100-hsl));
  --gray-150-hsl: 240, 10%, 90%;
  --gray-150: hsl(var(--gray-150-hsl));
  --gray-800-hsl: 210, 40%, 17%;
  --gray-800: hsl(var(--gray-800-hsl));
  --gray-920-hsl: 212, 70%, 9%;
  --gray-920: hsl(var(--gray-920-hsl));
  --gray-970-hsl: 215, 67%, 4%;
  --gray-970: hsl(var(--gray-970-hsl));
}