[data-bs-theme=light] {
   --bs-body-bg: #fff;
   --bs-body-bg-rgb: 255, 255, 255;
   --bs-body-color: #565656;
   --bs-body-color-rgb: 86, 86, 86;
}

[data-bs-theme=dark] {
   --bs-body-bg: #262626;
   --bs-body-bg-rgb: 38, 38, 38;
   --bs-body-color: #f1f2f2;
   --bs-body-color-rgb: 241, 242, 242;
}

html {
   color-scheme: light dark;
}

/* lock browser behavior */
html[data-bs-theme=light] {
   color-scheme: light;
}

html[data-bs-theme=dark] {
   color-scheme: dark;
}

body {
   background-color: var(--bs-body-bg);
   color: var(--bs-body-color);
}

.theme-toggle {
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   color: var(--text);
}

/* default */
.icon-sun,
.icon-moon {
   transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Light → tampilkan moon */
[data-bs-theme="light"] .icon-sun {
   opacity: 0;
   transform: scale(0.7);
}

[data-bs-theme="light"] .icon-moon {
   opacity: 1;
}

/* Dark → tampilkan sun */
[data-bs-theme="dark"] .icon-moon {
   opacity: 0;
   transform: scale(0.7);
}

[data-bs-theme="dark"] .icon-sun {
   opacity: 1;
}