/* BG COLOR */

.bg-lightest {
  background-color: #f8f9fa !important;
} /* seperti var(--color-bg) */
.bg-lighter {
  background-color: #f1f3f5 !important;
} /* seperti var(--color-search-bg) */
.bg-light {
  background-color: #e9ecef !important;
} /* seperti var(--color-hover-bg) */
.bg-muted {
  background-color: #dee2e6 !important;
}
.bg-soft {
  background-color: #ced4da !important;
}
.bg-gray {
  background-color: #adb5bd !important;
}
.bg-darkgray {
  background-color: #6c757d !important;
}
.bg-paper {
  background-color: #fdfdfd !important;
} /* hampir putih */
.bg-warm {
  background-color: #f0f0f0 !important;
} /* netral hangat */
.bg-stone {
  background-color: #e0e0e0 !important;
} /* abu terang */
.bg-silver {
  background-color: #d6d8db !important;
} /* abu soft metalik */
.bg-cloud {
  background-color: #cfd4da !important;
} /* abu kebiruan */
.bg-skeleton {
  background-color: #eaeaea !important;
} /* cocok untuk skeleton loader */
.bg-fade {
  background-color: rgba(0, 0, 0, 0.02) !important;
}
.bg-fade-dark {
  background-color: rgba(255, 255, 255, 0.03) !important;
}
.bg-red {
  background-color: #ffe3e3 !important;
} /* merah muda soft */
.bg-orange {
  background-color: #fff4e6 !important;
} /* oranye terang soft */
.bg-yellow {
  background-color: #fff9db !important;
} /* kuning krem */
.bg-green {
  background-color: #d3f9d8 !important;
} /* hijau pucat */
.bg-teal {
  background-color: #d3f9f2 !important;
} /* hijau kebiruan soft */
.bg-blue {
  background-color: #d0ebff !important;
} /* biru pastel */
.bg-indigo {
  background-color: #e5edff !important;
} /* biru keunguan muda */
.bg-purple {
  background-color: #f3d9fa !important;
} /* ungu pucat */
.bg-pink {
  background-color: #ffe0f0 !important;
} /* pink lembut */

body.dark-mode .bg-lightest {
  background-color: #2a2d31 !important;
}
body.dark-mode .bg-lighter {
  background-color: #262a31 !important;
}
body.dark-mode .bg-light {
  background-color: #2b2f36 !important;
}
body.dark-mode .bg-muted {
  background-color: #3a3e45 !important;
}
body.dark-mode .bg-soft {
  background-color: #44484f !important;
}
body.dark-mode .bg-gray {
  background-color: #5c636a !important;
}
body.dark-mode .bg-darkgray {
  background-color: #6c757d !important;
}
body.dark-mode .bg-paper {
  background-color: #2b2b2b !important;
}
body.dark-mode .bg-warm {
  background-color: #2f3135 !important;
}
body.dark-mode .bg-stone {
  background-color: #3a3c40 !important;
}
body.dark-mode .bg-silver {
  background-color: #4a4d52 !important;
}
body.dark-mode .bg-cloud {
  background-color: #51565c !important;
}
body.dark-mode .bg-skeleton {
  background-color: #3a3a3a !important;
}
body.dark-mode .bg-fade {
  background-color: rgba(255, 255, 255, 0.04) !important;
}
body.dark-mode .bg-fade-dark {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .bg-red {
  background-color: #5f1b1b !important;
}
body.dark-mode .bg-orange {
  background-color: #593d1b !important;
}
body.dark-mode .bg-yellow {
  background-color: #4f4200 !important;
}
body.dark-mode .bg-green {
  background-color: #1f3f2a !important;
}
body.dark-mode .bg-teal {
  background-color: #17473f !important;
}
body.dark-mode .bg-blue {
  background-color: #1b324a !important;
}
body.dark-mode .bg-indigo {
  background-color: #2a3260 !important;
}
body.dark-mode .bg-purple {
  background-color: #4a2c5a !important;
}
body.dark-mode .bg-pink {
  background-color: #5a2a3a !important;
}

/* TEXT COLOR */
.text-darkest {
  color: #212529 !important;
} /* hampir hitam */
.text-dark {
  color: #343a40 !important;
} /* teks utama */
.text-base {
  color: #495057 !important;
} /* netral utama */
.text-muted {
  color: #6c757d !important;
} /* teks redup */
.text-soft {
  color: #868e96 !important;
} /* teks form-label */
.text-placeholder {
  color: #adb5bd !important;
} /* placeholder atau hint */
.text-light {
  color: #ced4da !important;
} /* sangat lembut */
.text-lighter {
  color: #dee2e6 !important;
}
.text-lightest {
  color: #f8f9fa !important;
} /* hampir putih */
.text-red {
  color: #e03131 !important;
} /* merah soft */
.text-orange {
  color: #f08c00 !important;
} /* oranye hangat */
.text-yellow {
  color: #e67700 !important;
} /* kuning mustard */
.text-green {
  color: #2f9e44 !important;
} /* hijau stabil */
.text-teal {
  color: #20c997 !important;
} /* hijau kebiruan */
.text-blue {
  color: #1c7ed6 !important;
} /* biru netral */
.text-indigo {
  color: #5c7cfa !important;
} /* biru keunguan */
.text-purple {
  color: #ae3ec9 !important;
} /* ungu pastel */
.text-pink {
  color: #d6336c !important;
} /* merah muda elegan */

body.dark-mode .text-darkest {
  color: #f1f3f5 !important;
}
body.dark-mode .text-dark {
  color: #e9ecef !important;
}
body.dark-mode .text-base {
  color: #dee2e6 !important;
}
body.dark-mode .text-muted {
  color: #adb5bd !important;
}
body.dark-mode .text-soft {
  color: #888 !important;
}
body.dark-mode .text-placeholder {
  color: #666 !important;
}
body.dark-mode .text-light {
  color: #555 !important;
}
body.dark-mode .text-lighter {
  color: #444 !important;
}
body.dark-mode .text-lightest {
  color: #333 !important;
}
body.dark-mode .text-red {
  color: #ff6b6b !important;
}
body.dark-mode .text-orange {
  color: #ffc078 !important;
}
body.dark-mode .text-yellow {
  color: #ffd43b !important;
}
body.dark-mode .text-green {
  color: #8ce99a !important;
}
body.dark-mode .text-teal {
  color: #63e6be !important;
}
body.dark-mode .text-blue {
  color: #91a7ff !important;
}
body.dark-mode .text-indigo {
  color: #bac8ff !important;
}
body.dark-mode .text-purple {
  color: #e599f7 !important;
}
body.dark-mode .text-pink {
  color: #f783ac !important;
}