/* 1. Definisi Variabel */
:root {
    --pink: #e83e8c;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --dark-grey: #343a40;
}

/* 2. Utility Text & Background */
.text-pink {
    color: var(--pink) !important;
}
.bg-pink {
    background-color: var(--pink) !important;
}
.text-blue {
    color: var(--blue) !important;
}
.bg-blue {
    background-color: var(--blue) !important;
}
.text-indigo {
    color: var(--indigo) !important;
}
.bg-indigo {
    background-color: var(--indigo) !important;
}
.text-purple {
    color: var(--purple) !important;
}
.bg-purple {
    background-color: var(--purple) !important;
}
.text-red {
    color: var(--red) !important;
}
.bg-red {
    background-color: var(--red) !important;
}
.text-orange {
    color: var(--orange) !important;
}
.bg-orange {
    background-color: var(--orange) !important;
}
.text-yellow {
    color: var(--yellow) !important;
}
.bg-yellow {
    background-color: var(--yellow) !important;
}
.text-green {
    color: var(--green) !important;
}
.bg-green {
    background-color: var(--green) !important;
}
.text-teal {
    color: var(--teal) !important;
}
.bg-teal {
    background-color: var(--teal) !important;
}
.text-cyan {
    color: var(--cyan) !important;
}
.bg-cyan {
    background-color: var(--cyan) !important;
}
.text-gray {
    color: var(--gray) !important;
}
.bg-gray {
    background-color: var(--gray) !important;
}
.text-dark-grey {
    color: var(--dark-grey) !important;
}
.bg-dark-grey {
    background-color: var(--dark-grey) !important;
}
.text-white {
    color: var(--white) !important;
}
.bg-white {
    background-color: var(--white) !important;
    border: 1px solid #dee2e6;
}

/* 3. Button Base & Mapping Warna */

/* Teks Putih untuk BG Gelap */
.btn-pink,
.btn-blue,
.btn-indigo,
.btn-purple,
.btn-red,
.btn-orange,
.btn-green,
.btn-teal,
.btn-gray,
.btn-dark-grey {
    color: #fff !important;
}

/* Teks Gelap untuk BG Terang */
.btn-yellow,
.btn-cyan,
.btn-white {
    color: #212529 !important;
}

.btn-pink {
    background-color: var(--pink);
    border-color: var(--pink);
}
.btn-blue {
    background-color: var(--blue);
    border-color: var(--blue);
}
.btn-indigo {
    background-color: var(--indigo);
    border-color: var(--indigo);
}
.btn-purple {
    background-color: var(--purple);
    border-color: var(--purple);
}
.btn-red {
    background-color: var(--red);
    border-color: var(--red);
}
.btn-orange {
    background-color: var(--orange);
    border-color: var(--orange);
}
.btn-yellow {
    background-color: var(--yellow);
    border-color: var(--yellow);
}
.btn-green {
    background-color: var(--green);
    border-color: var(--green);
}
.btn-teal {
    background-color: var(--teal);
    border-color: var(--teal);
}
.btn-cyan {
    background-color: var(--cyan);
    border-color: var(--cyan);
}
.btn-gray {
    background-color: var(--gray);
    border-color: var(--gray);
}
.btn-dark-grey {
    background-color: var(--dark-grey);
    border-color: var(--dark-grey);
}
.btn-white {
    background-color: var(--white);
    border-color: #dee2e6;
}

/* 4. Hover State Solid (Fix Background Hilang) */
.btn-pink:hover {
    background-color: var(--pink) !important;
    filter: brightness(90%);
}
.btn-blue:hover {
    background-color: var(--blue) !important;
    filter: brightness(90%);
}
.btn-indigo:hover {
    background-color: var(--indigo) !important;
    filter: brightness(90%);
}
.btn-purple:hover {
    background-color: var(--purple) !important;
    filter: brightness(90%);
}
.btn-red:hover {
    background-color: var(--red) !important;
    filter: brightness(90%);
}
.btn-orange:hover {
    background-color: var(--orange) !important;
    filter: brightness(90%);
}
.btn-yellow:hover {
    background-color: var(--yellow) !important;
    filter: brightness(90%);
}
.btn-green:hover {
    background-color: var(--green) !important;
    filter: brightness(90%);
}
.btn-teal:hover {
    background-color: var(--teal) !important;
    filter: brightness(90%);
}
.btn-cyan:hover {
    background-color: var(--cyan) !important;
    filter: brightness(90%);
}
.btn-gray:hover {
    background-color: var(--gray) !important;
    filter: brightness(90%);
}
.btn-dark-grey:hover {
    background-color: var(--dark-grey) !important;
    filter: brightness(90%);
}

/* Khusus Putih: Hover Solid Abu-abu Muda */
.btn-white:hover {
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
    filter: none;
}