:root {
    --brand-navy: #0F2C5C;
    --brand-orange: #FF6B00;
    --bg-page: #F6F8FB;
}

[data-bs-theme="dark"] {
    --brand-navy: #1B3A6B;
    --brand-orange: #FF8A3D;
    --bg-page: #0F172A;
    --bs-body-bg: #0F172A;
    --bs-body-color: #E2E8F0;
}

body {
    font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif;
    background-color: var(--bg-page);
}

.btn-pill {
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.card {
    border-radius: 1rem;
}

/* Warna pastel per kategori, setara "bg-*-50" Tailwind di aplikasi
   sumber (Tahap 1/2) -- didefinisikan manual karena project ini
   memakai Bootstrap, bukan Tailwind. */
.bg-blue-50 { background-color: #EFF6FF; }
.bg-amber-50 { background-color: #FFFBEB; }
.bg-emerald-50 { background-color: #ECFDF5; }
.bg-indigo-50 { background-color: #EEF2FF; }
.bg-orange-50 { background-color: #FFF7ED; }
.bg-teal-50 { background-color: #F0FDFA; }
.bg-red-50 { background-color: #FEF2F2; }

[data-bs-theme="dark"] .bg-blue-50 { background-color: #1E293B; }
[data-bs-theme="dark"] .bg-amber-50 { background-color: #292416; }
[data-bs-theme="dark"] .bg-emerald-50 { background-color: #162922; }
[data-bs-theme="dark"] .bg-indigo-50 { background-color: #1E1B33; }
[data-bs-theme="dark"] .bg-orange-50 { background-color: #2B1D0F; }
[data-bs-theme="dark"] .bg-teal-50 { background-color: #122927; }
[data-bs-theme="dark"] .bg-red-50 { background-color: #2B1414; }