/* docara-shell-source: runtime/utility/background-color/default/css/default.css */
@layer sf.utilities {
  .bg-transparent {
    background-color: var(--sf-transparent);
  }
  .bg-current {
    background-color: var(--sf-current);
  }
  .bg-surface-0 {
    background-color: var(--sf-surface-0);
  }
  .bg-surface-1 {
    background-color: var(--sf-surface-1);
  }
  .bg-surface-2 {
    background-color: var(--sf-surface-2);
  }
  .bg-surface-3 {
    background-color: var(--sf-surface-3);
  }
  .bg-surface-4 {
    background-color: var(--sf-surface-4);
  }
  .bg-surface {
    background-color: var(--sf-surface-1);
  }
  .bg-surface-inverse {
    background-color: var(--sf-surface-inverse);
  }
  .bg-surface-inverse-fixed {
    background-color: var(--sf-surface-inverse-fixed);
  }
  .bg-surface-container {
    background-color: var(--sf-surface-container);
  }
  .bg-on-surface {
    background-color: var(--sf-on-surface);
  }
  .bg-on-surface-variant {
    background-color: var(--sf-on-surface-variant);
  }
  .bg-surface-transparent-select {
    background-color: var(--sf-surface-transparent-select);
  }
  .bg-surface-transparent-overlay {
    background-color: var(--sf-surface-transparent-overlay);
  }
  .bg-disable {
    background-color: var(--sf-disable);
  }
  .bg-primary {
    background-color: var(--sf-primary);
  }
  .bg-primary-container {
    background-color: var(--sf-primary-container);
  }
  .bg-primary-transparent-select {
    background-color: var(--sf-primary-transparent-select);
  }
  .bg-primary-transparent-overlay {
    background-color: var(--sf-primary-transparent-overlay);
  }
  .bg-secondary {
    background-color: var(--sf-secondary);
  }
  .bg-secondary-container {
    background-color: var(--sf-secondary-container);
  }
  .bg-secondary-transparent-select {
    background-color: var(--sf-secondary-transparent-select);
  }
  .bg-secondary-transparent-overlay {
    background-color: var(--sf-secondary-transparent-overlay);
  }
  .bg-tertiary {
    background-color: var(--sf-tertiary);
  }
  .bg-tertiary-container {
    background-color: var(--sf-tertiary-container);
  }
  .bg-tertiary-transparent-select {
    background-color: var(--sf-tertiary-transparent-select);
  }
  .bg-tertiary-transparent-overlay {
    background-color: var(--sf-tertiary-transparent-overlay);
  }
  .bg-error {
    background-color: var(--sf-error);
  }
  .bg-error-container {
    background-color: var(--sf-error-container);
  }
  .bg-error-transparent-select {
    background-color: var(--sf-error-transparent-select);
  }
  .bg-error-transparent-overlay {
    background-color: var(--sf-error-transparent-overlay);
  }
  .bg-warning {
    background-color: var(--sf-warning);
  }
  .bg-warning-container {
    background-color: var(--sf-warning-container);
  }
  .bg-warning-transparent-select {
    background-color: var(--sf-warning-transparent-select);
  }
  .bg-warning-transparent-overlay {
    background-color: var(--sf-warning-transparent-overlay);
  }
  .bg-success {
    background-color: var(--sf-success);
  }
  .bg-success-container {
    background-color: var(--sf-success-container);
  }
  .bg-success-transparent-select {
    background-color: var(--sf-success-transparent-select);
  }
  .bg-success-transparent-overlay {
    background-color: var(--sf-success-transparent-overlay);
  }
  .bg-surface-container {
    --sf-on-surface-variant: var(--sf-on-surface-container--variant);
  }
  .active\:bg-surface-container:active {
    background-color: var(--sf-surface-container-active);
  }
  .active\:bg-on-surface:active {
    background-color: var(--sf-on-surface-active);
  }
  .active\:bg-surface-transparent:active {
    background-color: var(--sf-surface-transparent-active);
  }
  .active\:bg-primary:active {
    background-color: var(--sf-primary-active);
  }
  .active\:bg-primary-container:active {
    background-color: var(--sf-primary-container-active);
  }
  .active\:bg-primary-transparent:active {
    background-color: var(--sf-primary-transparent-active);
  }
  .active\:bg-secondary:active {
    background-color: var(--sf-secondary-active);
  }
  .active\:bg-secondary-container:active {
    background-color: var(--sf-secondary-container-active);
  }
  .active\:bg-secondary-transparent:active {
    background-color: var(--sf-secondary-transparent-active);
  }
  .active\:bg-tertiary:active {
    background-color: var(--sf-tertiary-active);
  }
  .active\:bg-tertiary-container:active {
    background-color: var(--sf-tertiary-container-active);
  }
  .active\:bg-tertiary-transparent:active {
    background-color: var(--sf-tertiary-transparent-active);
  }
  .active\:bg-error:active {
    background-color: var(--sf-error-active);
  }
  .active\:bg-error-container:active {
    background-color: var(--sf-error-container-active);
  }
  .active\:bg-error-transparent:active {
    background-color: var(--sf-error-transparent-active);
  }
  .active\:bg-warning:active {
    background-color: var(--sf-warning-active);
  }
  .active\:bg-warning-container:active {
    background-color: var(--sf-warning-container-active);
  }
  .active\:bg-warning-transparent:active {
    background-color: var(--sf-warning-transparent-active);
  }
  .active\:bg-success:active {
    background-color: var(--sf-success-active);
  }
  .active\:bg-success-container:active {
    background-color: var(--sf-success-container-active);
  }
  .active\:bg-success-transparent:active {
    background-color: var(--sf-success-transparent-active);
  }
  .hover\:bg-surface-container:hover {
    background-color: var(--sf-surface-container-hover);
  }
  .hover\:bg-on-surface:hover {
    background-color: var(--sf-on-surface-hover);
  }
  .hover\:bg-surface-transparent:hover {
    background-color: var(--sf-surface-transparent-hover);
  }
  .hover\:bg-primary:hover {
    background-color: var(--sf-primary-hover);
  }
  .hover\:bg-primary-container:hover {
    background-color: var(--sf-primary-container-hover);
  }
  .hover\:bg-primary-transparent:hover {
    background-color: var(--sf-primary-transparent-hover);
  }
  .hover\:bg-secondary:hover {
    background-color: var(--sf-secondary-hover);
  }
  .hover\:bg-secondary-container:hover {
    background-color: var(--sf-secondary-container-hover);
  }
  .hover\:bg-secondary-transparent:hover {
    background-color: var(--sf-secondary-transparent-hover);
  }
  .hover\:bg-tertiary:hover {
    background-color: var(--sf-tertiary-hover);
  }
  .hover\:bg-tertiary-container:hover {
    background-color: var(--sf-tertiary-container-hover);
  }
  .hover\:bg-tertiary-transparent:hover {
    background-color: var(--sf-tertiary-transparent-hover);
  }
  .hover\:bg-error:hover {
    background-color: var(--sf-error-hover);
  }
  .hover\:bg-error-container:hover {
    background-color: var(--sf-error-container-hover);
  }
  .hover\:bg-error-transparent:hover {
    background-color: var(--sf-error-transparent-hover);
  }
  .hover\:bg-warning:hover {
    background-color: var(--sf-warning-hover);
  }
  .hover\:bg-warning-container:hover {
    background-color: var(--sf-warning-container-hover);
  }
  .hover\:bg-warning-transparent:hover {
    background-color: var(--sf-warning-transparent-hover);
  }
  .hover\:bg-success:hover {
    background-color: var(--sf-success-hover);
  }
  .hover\:bg-success-container:hover {
    background-color: var(--sf-success-container-hover);
  }
  .hover\:bg-success-transparent:hover {
    background-color: var(--sf-success-transparent-hover);
  }
  .bg-white {
    background-color: rgb(255, 255, 255);
  }
  .bg-black {
    background-color: rgb(0, 0, 0);
  }
  .bg-gray {
    background-color: rgb(106, 115, 125);
  }
  .bg-gray-0 {
    background-color: rgb(250, 251, 252);
  }
  .bg-gray-1 {
    background-color: rgb(246, 248, 250);
  }
  .bg-gray-2 {
    background-color: rgb(225, 228, 232);
  }
  .bg-gray-3 {
    background-color: rgb(209, 213, 218);
  }
  .bg-gray-4 {
    background-color: rgb(149, 157, 165);
  }
  .bg-gray-5 {
    background-color: rgb(106, 115, 125);
  }
  .bg-gray-6 {
    background-color: rgb(88, 96, 105);
  }
  .bg-gray-7 {
    background-color: rgb(68, 77, 86);
  }
  .bg-gray-8 {
    background-color: rgb(47, 54, 61);
  }
  .bg-gray-9 {
    background-color: rgb(36, 41, 46);
  }
  .bg-red {
    background-color: rgb(215, 58, 73);
  }
  .bg-red-0 {
    background-color: rgb(255, 238, 240);
  }
  .bg-red-1 {
    background-color: rgb(255, 220, 224);
  }
  .bg-red-2 {
    background-color: rgb(253, 174, 183);
  }
  .bg-red-3 {
    background-color: rgb(249, 117, 131);
  }
  .bg-red-4 {
    background-color: rgb(234, 74, 90);
  }
  .bg-red-5 {
    background-color: rgb(215, 58, 73);
  }
  .bg-red-6 {
    background-color: rgb(203, 36, 49);
  }
  .bg-red-7 {
    background-color: rgb(179, 29, 40);
  }
  .bg-red-8 {
    background-color: rgb(158, 28, 35);
  }
  .bg-red-9 {
    background-color: rgb(134, 24, 29);
  }
  .bg-orange {
    background-color: rgb(246, 106, 10);
  }
  .bg-orange-0 {
    background-color: rgb(255, 248, 242);
  }
  .bg-orange-1 {
    background-color: rgb(255, 235, 218);
  }
  .bg-orange-2 {
    background-color: rgb(255, 209, 172);
  }
  .bg-orange-3 {
    background-color: rgb(255, 171, 112);
  }
  .bg-orange-4 {
    background-color: rgb(251, 133, 50);
  }
  .bg-orange-5 {
    background-color: rgb(246, 106, 10);
  }
  .bg-orange-6 {
    background-color: rgb(227, 98, 9);
  }
  .bg-orange-7 {
    background-color: rgb(209, 87, 4);
  }
  .bg-orange-8 {
    background-color: rgb(194, 78, 0);
  }
  .bg-orange-9 {
    background-color: rgb(160, 65, 0);
  }
  .bg-yellow {
    background-color: rgb(255, 211, 61);
  }
  .bg-yellow-0 {
    background-color: rgb(255, 253, 239);
  }
  .bg-yellow-1 {
    background-color: rgb(255, 251, 221);
  }
  .bg-yellow-2 {
    background-color: rgb(255, 245, 177);
  }
  .bg-yellow-3 {
    background-color: rgb(255, 234, 127);
  }
  .bg-yellow-4 {
    background-color: rgb(255, 223, 93);
  }
  .bg-yellow-5 {
    background-color: rgb(255, 211, 61);
  }
  .bg-yellow-6 {
    background-color: rgb(249, 197, 19);
  }
  .bg-yellow-7 {
    background-color: rgb(219, 171, 9);
  }
  .bg-yellow-8 {
    background-color: rgb(176, 136, 0);
  }
  .bg-yellow-9 {
    background-color: rgb(115, 92, 15);
  }
  .bg-green {
    background-color: rgb(40, 167, 69);
  }
  .bg-green-0 {
    background-color: rgb(240, 255, 244);
  }
  .bg-green-1 {
    background-color: rgb(220, 255, 228);
  }
  .bg-green-2 {
    background-color: rgb(190, 245, 203);
  }
  .bg-green-3 {
    background-color: rgb(133, 232, 157);
  }
  .bg-green-4 {
    background-color: rgb(52, 208, 88);
  }
  .bg-green-5 {
    background-color: rgb(40, 167, 69);
  }
  .bg-green-6 {
    background-color: rgb(34, 134, 58);
  }
  .bg-green-7 {
    background-color: rgb(23, 111, 44);
  }
  .bg-green-8 {
    background-color: rgb(22, 92, 38);
  }
  .bg-green-9 {
    background-color: rgb(20, 70, 32);
  }
  .bg-blue {
    background-color: rgb(3, 102, 214);
  }
  .bg-blue-0 {
    background-color: rgb(241, 248, 255);
  }
  .bg-blue-1 {
    background-color: rgb(219, 237, 255);
  }
  .bg-blue-2 {
    background-color: rgb(200, 225, 255);
  }
  .bg-blue-3 {
    background-color: rgb(121, 184, 255);
  }
  .bg-blue-4 {
    background-color: rgb(33, 136, 255);
  }
  .bg-blue-5 {
    background-color: rgb(3, 102, 214);
  }
  .bg-blue-6 {
    background-color: rgb(0, 92, 197);
  }
  .bg-blue-7 {
    background-color: rgb(4, 66, 137);
  }
  .bg-blue-8 {
    background-color: rgb(3, 47, 98);
  }
  .bg-blue-9 {
    background-color: rgb(5, 38, 76);
  }
  .bg-purple {
    background-color: rgb(111, 66, 193);
  }
  .bg-purple-0 {
    background-color: rgb(245, 240, 255);
  }
  .bg-purple-1 {
    background-color: rgb(230, 220, 253);
  }
  .bg-purple-2 {
    background-color: rgb(209, 188, 249);
  }
  .bg-purple-3 {
    background-color: rgb(179, 146, 240);
  }
  .bg-purple-4 {
    background-color: rgb(138, 99, 210);
  }
  .bg-purple-5 {
    background-color: rgb(111, 66, 193);
  }
  .bg-purple-6 {
    background-color: rgb(90, 50, 163);
  }
  .bg-purple-7 {
    background-color: rgb(76, 40, 136);
  }
  .bg-purple-8 {
    background-color: rgb(58, 29, 110);
  }
  .bg-purple-9 {
    background-color: rgb(41, 19, 78);
  }
  .bg-pink {
    background-color: rgb(234, 74, 170);
  }
  .bg-pink-0 {
    background-color: rgb(255, 238, 248);
  }
  .bg-pink-1 {
    background-color: rgb(254, 219, 240);
  }
  .bg-pink-2 {
    background-color: rgb(249, 179, 221);
  }
  .bg-pink-3 {
    background-color: rgb(246, 146, 206);
  }
  .bg-pink-4 {
    background-color: rgb(236, 108, 185);
  }
  .bg-pink-5 {
    background-color: rgb(234, 74, 170);
  }
  .bg-pink-6 {
    background-color: rgb(208, 53, 146);
  }
  .bg-pink-7 {
    background-color: rgb(185, 58, 134);
  }
  .bg-pink-8 {
    background-color: rgb(153, 48, 111);
  }
  .bg-pink-9 {
    background-color: rgb(109, 34, 79);
  }
}