/**
 * Profi — Human Development Ecosystem
 * Brand palette: Maroon · Gold · Warm Black
 */
:root {
    --brand-red: #872332;
    --brand-red-mid: #742A35;
    --brand-red-dark: #5E121D;
    --brand-red-darker: #4A1018;
    --brand-red-light: #f8ecee;
    --brand-red-muted: #b05a68;
    --brand-yellow: #C59358;
    --brand-yellow-dark: #A67C45;
    --brand-yellow-light: #f5ead8;
    --brand-yellow-muted: #D4A86A;
    --brand-black: #451620;
    --brand-black-soft: #5E121D;
    --brand-black-muted: #742A35;
}

/* ── Indigo → Merah (primary brand) ── */
.bg-indigo-50 { background-color: #fef2f2 !important; }
.bg-indigo-100 { background-color: #fee2e2 !important; }
.bg-indigo-500 { background-color: #ef4444 !important; }
.bg-indigo-500\/10 { background-color: rgba(220, 38, 38, 0.1) !important; }
.bg-indigo-500\/20 { background-color: rgba(220, 38, 38, 0.2) !important; }
.bg-indigo-500\/30 { background-color: rgba(220, 38, 38, 0.3) !important; }
.bg-indigo-600 { background-color: var(--brand-red) !important; }
.bg-indigo-650 { background-color: var(--brand-red-dark) !important; }
.bg-indigo-700 { background-color: var(--brand-red-dark) !important; }
.bg-indigo-900 { background-color: #450a0a !important; }
.bg-indigo-950 { background-color: #1c0505 !important; }
.bg-indigo-950\/20 { background-color: rgba(28, 5, 5, 0.2) !important; }
.bg-indigo-950\/30 { background-color: rgba(28, 5, 5, 0.3) !important; }
.bg-indigo-950\/40 { background-color: rgba(28, 5, 5, 0.4) !important; }
.bg-indigo-950\/60 { background-color: rgba(28, 5, 5, 0.6) !important; }

.text-indigo-100 { color: #fecaca !important; }
.text-indigo-200 { color: #fecaca !important; }
.text-indigo-200\/70 { color: rgba(254, 202, 202, 0.7) !important; }
.text-indigo-300 { color: #fca5a5 !important; }
.text-indigo-300\/80 { color: rgba(252, 165, 165, 0.8) !important; }
.text-indigo-400 { color: #f87171 !important; }
.text-indigo-500 { color: #ef4444 !important; }
.text-indigo-600 { color: var(--brand-red) !important; }
.text-indigo-650 { color: var(--brand-red-dark) !important; }
.text-indigo-700 { color: var(--brand-red-dark) !important; }
.text-indigo-800 { color: #991b1b !important; }
.text-indigo-900 { color: #7f1d1d !important; }

.border-indigo-100 { border-color: #fee2e2 !important; }
.border-indigo-200 { border-color: #fecaca !important; }
.border-indigo-300\/40 { border-color: rgba(252, 165, 165, 0.4) !important; }
.border-indigo-400 { border-color: #f87171 !important; }
.border-indigo-500 { border-color: var(--brand-red) !important; }
.border-indigo-500\/20 { border-color: rgba(220, 38, 38, 0.2) !important; }
.border-indigo-500\/30 { border-color: rgba(220, 38, 38, 0.3) !important; }
.border-indigo-500\/40 { border-color: rgba(220, 38, 38, 0.4) !important; }
.border-indigo-600 { border-color: var(--brand-red) !important; }
.border-indigo-800 { border-color: #991b1b !important; }
.border-indigo-900 { border-color: #7f1d1d !important; }

.ring-indigo-100 { --tw-ring-color: #fee2e2 !important; }
.ring-indigo-500 { --tw-ring-color: var(--brand-red) !important; }
.ring-indigo-500\/20 { --tw-ring-color: rgba(220, 38, 38, 0.2) !important; }
.ring-indigo-500\/30 { --tw-ring-color: rgba(220, 38, 38, 0.3) !important; }
.ring-indigo-900\/50 { --tw-ring-color: rgba(127, 29, 29, 0.5) !important; }

.shadow-indigo-200 { --tw-shadow-color: rgba(254, 202, 202, 0.5) !important; }
.shadow-indigo-200\/40 { --tw-shadow-color: rgba(254, 202, 202, 0.4) !important; }
.shadow-indigo-200\/50 { --tw-shadow-color: rgba(254, 202, 202, 0.5) !important; }
.shadow-indigo-500\/25 { --tw-shadow-color: rgba(220, 38, 38, 0.25) !important; }
.shadow-indigo-600\/10 { --tw-shadow-color: rgba(220, 38, 38, 0.1) !important; }
.shadow-indigo-900\/20 { --tw-shadow-color: rgba(127, 29, 29, 0.2) !important; }
.shadow-indigo-900\/30 { --tw-shadow-color: rgba(127, 29, 29, 0.3) !important; }

.hover\:bg-indigo-50:hover { background-color: #fef2f2 !important; }
.hover\:bg-indigo-100:hover { background-color: #fee2e2 !important; }
.hover\:bg-indigo-100\/50:hover { background-color: rgba(254, 226, 226, 0.5) !important; }
.hover\:bg-indigo-500:hover { background-color: #ef4444 !important; }
.hover\:bg-indigo-500\/50:hover { background-color: rgba(220, 38, 38, 0.5) !important; }
.hover\:bg-indigo-600:hover { background-color: var(--brand-red-dark) !important; }
.hover\:bg-indigo-700:hover { background-color: var(--brand-red-darker) !important; }
.hover\:text-indigo-100:hover { color: #fecaca !important; }
.hover\:text-indigo-300:hover { color: #fca5a5 !important; }
.hover\:text-indigo-400:hover { color: #f87171 !important; }
.hover\:text-indigo-500:hover { color: #ef4444 !important; }
.hover\:text-indigo-600:hover { color: var(--brand-red) !important; }
.hover\:text-indigo-800:hover { color: #991b1b !important; }
.hover\:border-indigo-200:hover { border-color: #fecaca !important; }
.hover\:border-indigo-300:hover { border-color: #fca5a5 !important; }
.hover\:border-indigo-500\/40:hover { border-color: rgba(220, 38, 38, 0.4) !important; }
.hover\:border-indigo-600:hover { border-color: var(--brand-red) !important; }

.focus\:ring-indigo-500:focus { --tw-ring-color: var(--brand-red) !important; }
.focus\:border-indigo-500:focus { border-color: var(--brand-red) !important; }

.from-indigo-300 { --tw-gradient-from: #fca5a5 var(--tw-gradient-from-position) !important; }
.from-indigo-400 { --tw-gradient-from: #f87171 var(--tw-gradient-from-position) !important; }
.from-indigo-600 { --tw-gradient-from: var(--brand-red) var(--tw-gradient-from-position) !important; }
.from-indigo-950\/60 { --tw-gradient-from: rgba(28, 5, 5, 0.6) var(--tw-gradient-from-position) !important; }
.via-indigo-700 { --tw-gradient-via: var(--brand-red-dark) var(--tw-gradient-via-position) !important; }
.via-indigo-900\/50 { --tw-gradient-via: rgba(69, 10, 10, 0.5) var(--tw-gradient-via-position) !important; }
.via-purple-400 { --tw-gradient-via: var(--brand-yellow-muted) var(--tw-gradient-via-position) !important; }
.to-indigo-500 { --tw-gradient-to: #ef4444 var(--tw-gradient-to-position) !important; }
.to-indigo-800 { --tw-gradient-to: #991b1b var(--tw-gradient-to-position) !important; }
.to-violet-600 { --tw-gradient-to: var(--brand-red-dark) var(--tw-gradient-to-position) !important; }

.group-hover\:text-indigo-400 { color: #f87171 !important; }
.group-hover\:text-indigo-600 { color: var(--brand-red) !important; }
.dark\:group-hover\:text-indigo-400 { color: #f87171 !important; }
.dark\:group-hover\:text-indigo-500 { color: #ef4444 !important; }

.dark .bg-indigo-50 { background-color: rgba(220, 38, 38, 0.12) !important; }
.dark .bg-indigo-900\/30 { background-color: rgba(127, 29, 29, 0.3) !important; }
.dark .bg-indigo-900\/50 { background-color: rgba(127, 29, 29, 0.5) !important; }
.dark .bg-indigo-950\/40 { background-color: rgba(28, 5, 5, 0.4) !important; }
.dark .text-indigo-300 { color: #fca5a5 !important; }
.dark .text-indigo-400 { color: #f87171 !important; }
.dark .text-indigo-500 { color: #ef4444 !important; }
.dark .border-indigo-400 { border-color: #f87171 !important; }
.dark .border-indigo-500 { border-color: var(--brand-red) !important; }
.dark .border-indigo-800 { border-color: #991b1b !important; }
.dark .hover\:bg-indigo-900\/30:hover { background-color: rgba(127, 29, 29, 0.3) !important; }
.dark .hover\:bg-indigo-950\/40:hover { background-color: rgba(28, 5, 5, 0.4) !important; }
.dark .hover\:text-indigo-400:hover { color: #f87171 !important; }
.dark .hover\:border-indigo-500\/40:hover { border-color: rgba(220, 38, 38, 0.4) !important; }
.dark .hover\:border-indigo-600:hover { border-color: var(--brand-red) !important; }
.dark .hover\:border-indigo-800:hover { border-color: #991b1b !important; }

/* ── Blue (industry theme) → Merah ── */
.bg-blue-50 { background-color: #fef2f2 !important; }
.bg-blue-100 { background-color: #fee2e2 !important; }
.bg-blue-500 { background-color: var(--brand-red) !important; }
.bg-blue-600 { background-color: var(--brand-red) !important; }
.bg-blue-700 { background-color: var(--brand-red-dark) !important; }
.bg-blue-950 { background-color: #1c0505 !important; }
.bg-blue-950\/30 { background-color: rgba(28, 5, 5, 0.3) !important; }
.bg-blue-950\/40 { background-color: rgba(28, 5, 5, 0.4) !important; }
.bg-blue-950\/50 { background-color: rgba(28, 5, 5, 0.5) !important; }
.text-blue-500 { color: #ef4444 !important; }
.text-blue-600 { color: var(--brand-red) !important; }
.text-blue-700 { color: var(--brand-red-dark) !important; }
.text-blue-800 { color: #991b1b !important; }
.text-blue-900 { color: #7f1d1d !important; }
.border-blue-100 { border-color: #fee2e2 !important; }
.border-blue-200 { border-color: #fecaca !important; }
.border-blue-400 { border-color: #f87171 !important; }
.border-blue-500 { border-color: var(--brand-red) !important; }
.border-blue-600 { border-color: var(--brand-red) !important; }
.border-blue-800 { border-color: #991b1b !important; }
.border-blue-900 { border-color: #7f1d1d !important; }
.hover\:bg-blue-50:hover { background-color: #fef2f2 !important; }
.hover\:bg-blue-100:hover { background-color: #fee2e2 !important; }
.hover\:bg-blue-700:hover { background-color: var(--brand-red-darker) !important; }
.hover\:text-blue-600:hover { color: var(--brand-red) !important; }
.hover\:border-blue-100:hover { border-color: #fee2e2 !important; }
.hover\:border-blue-200:hover { border-color: #fecaca !important; }
.hover\:border-blue-800:hover { border-color: #991b1b !important; }
.hover\:border-blue-900\/40:hover { border-color: rgba(127, 29, 29, 0.4) !important; }
.from-blue-50 { --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position) !important; }
.from-blue-600 { --tw-gradient-from: var(--brand-red) var(--tw-gradient-from-position) !important; }
.from-blue-950\/40 { --tw-gradient-from: rgba(28, 5, 5, 0.4) var(--tw-gradient-from-position) !important; }
.via-blue-700 { --tw-gradient-via: var(--brand-red-dark) var(--tw-gradient-via-position) !important; }
.to-blue-50 { --tw-gradient-to: #fef2f2 var(--tw-gradient-to-position) !important; }
.to-indigo-50 { --tw-gradient-to: #fef2f2 var(--tw-gradient-to-position) !important; }
.to-indigo-500 { --tw-gradient-to: #ef4444 var(--tw-gradient-to-position) !important; }
.to-indigo-800 { --tw-gradient-to: #991b1b var(--tw-gradient-to-position) !important; }
.shadow-blue-200 { --tw-shadow-color: rgba(254, 202, 202, 0.5) !important; }
.shadow-blue-900\/30 { --tw-shadow-color: rgba(127, 29, 29, 0.3) !important; }
.ring-blue-100 { --tw-ring-color: #fee2e2 !important; }
.ring-blue-900\/50 { --tw-ring-color: rgba(127, 29, 29, 0.5) !important; }
.dark .bg-blue-900\/30 { background-color: rgba(127, 29, 29, 0.3) !important; }
.dark .bg-blue-900\/50 { background-color: rgba(127, 29, 29, 0.5) !important; }
.dark .bg-blue-950\/40 { background-color: rgba(28, 5, 5, 0.4) !important; }
.dark .text-blue-200 { color: #fecaca !important; }
.dark .text-blue-300 { color: #fca5a5 !important; }
.dark .text-blue-400 { color: #f87171 !important; }
.dark .border-blue-800 { border-color: #991b1b !important; }
.dark .border-blue-900 { border-color: #7f1d1d !important; }
.dark .hover\:bg-blue-950\/40:hover { background-color: rgba(28, 5, 5, 0.4) !important; }
.dark .hover\:border-blue-500\/40:hover { border-color: rgba(220, 38, 38, 0.4) !important; }
.dark .hover\:border-blue-800:hover { border-color: #991b1b !important; }
.dark .hover\:text-blue-400:hover { color: #f87171 !important; }
.dark .group-hover\:text-blue-400 { color: #f87171 !important; }
.dark .group-hover\:text-blue-500 { color: #ef4444 !important; }

/* ── Emerald/Teal (education accent) → Kuning ── */
.bg-emerald-50 { background-color: #fefce8 !important; }
.bg-emerald-500 { background-color: var(--brand-yellow) !important; }
.bg-emerald-600 { background-color: var(--brand-yellow-dark) !important; }
.text-emerald-300 { color: var(--brand-yellow-muted) !important; }
.text-emerald-400 { color: var(--brand-yellow) !important; }
.text-emerald-700 { color: #a16207 !important; }
.border-emerald-500\/20 { border-color: rgba(234, 179, 8, 0.2) !important; }
.border-emerald-500\/30 { border-color: rgba(234, 179, 8, 0.3) !important; }
.from-emerald-600 { --tw-gradient-from: var(--brand-yellow-dark) var(--tw-gradient-from-position) !important; }
.from-emerald-950\/40 { --tw-gradient-from: rgba(66, 32, 6, 0.4) var(--tw-gradient-from-position) !important; }
.hover\:bg-emerald-50:hover { background-color: #fefce8 !important; }
.hover\:bg-emerald-500:hover { background-color: #facc15 !important; }
.hover\:from-emerald-500:hover { --tw-gradient-from: #facc15 var(--tw-gradient-from-position) !important; }

.bg-teal-500\/10 { background-color: rgba(234, 179, 8, 0.1) !important; }
.text-teal-300 { color: var(--brand-yellow-muted) !important; }
.text-teal-400 { color: var(--brand-yellow) !important; }
.border-teal-500\/20 { border-color: rgba(234, 179, 8, 0.2) !important; }
.border-teal-500\/30 { border-color: rgba(234, 179, 8, 0.3) !important; }
.from-teal-600 { --tw-gradient-from: var(--brand-yellow-dark) var(--tw-gradient-from-position) !important; }
.to-teal-600 { --tw-gradient-to: var(--brand-yellow-dark) var(--tw-gradient-to-position) !important; }
.to-teal-700 { --tw-gradient-to: #a16207 var(--tw-gradient-to-position) !important; }
.to-teal-950\/40 { --tw-gradient-to: rgba(66, 32, 6, 0.4) var(--tw-gradient-to-position) !important; }
.shadow-teal-500\/20 { --tw-shadow-color: rgba(234, 179, 8, 0.2) !important; }

/* ── Landing & hero surfaces ── */
.bg-slate-900 {
    background-color: var(--brand-black) !important;
}
.bg-slate-900\/80 {
    background-color: rgba(10, 10, 10, 0.92) !important;
}
.bg-slate-800 {
    background-color: var(--brand-black-soft) !important;
}
.bg-slate-800\/40 {
    background-color: rgba(23, 23, 23, 0.65) !important;
}
.border-slate-800 {
    border-color: var(--brand-black-muted) !important;
}

/* ── Developer sidebar accent ── */
.dev-layout-content ~ *,
[class*="from-white"][class*="via-indigo"] {
    /* handled by gradient overrides above */
}

/* ── Focus & form accents ── */
input:focus,
select:focus,
textarea:focus {
    --tw-ring-color: rgba(94, 18, 29, 0.35);
}

/* ── Tailwind red → Profi maroon ── */
.text-red-600 { color: var(--brand-red) !important; }
.text-red-500 { color: var(--brand-red-dark) !important; }
.text-red-700 { color: var(--brand-red-dark) !important; }
.text-red-400 { color: var(--brand-red-muted) !important; }
.bg-red-600 { background-color: var(--brand-red) !important; }
.bg-red-700 { background-color: var(--brand-red-dark) !important; }
.bg-red-50 { background-color: var(--brand-red-light) !important; }
.bg-red-100 { background-color: #edd5d9 !important; }
.border-red-200 { border-color: #ddb8bf !important; }
.border-red-400 { border-color: var(--brand-red-muted) !important; }
.border-red-500 { border-color: var(--brand-red) !important; }
.border-red-600 { border-color: var(--brand-red) !important; }
.ring-red-100 { --tw-ring-color: #edd5d9 !important; }
.ring-red-200 { --tw-ring-color: #ddb8bf !important; }
.ring-red-500 { --tw-ring-color: var(--brand-red) !important; }
.shadow-red-600\/20 { --tw-shadow-color: rgba(94, 18, 29, 0.2) !important; }
.shadow-red-600\/25 { --tw-shadow-color: rgba(94, 18, 29, 0.25) !important; }
.from-red-500 { --tw-gradient-from: var(--brand-red) var(--tw-gradient-from-position) !important; }
.from-red-600 { --tw-gradient-from: var(--brand-red) var(--tw-gradient-from-position) !important; }
.from-red-700 { --tw-gradient-from: var(--brand-red-dark) var(--tw-gradient-from-position) !important; }
.to-red-700 { --tw-gradient-to: var(--brand-red-dark) var(--tw-gradient-to-position) !important; }
.via-red-700 { --tw-gradient-via: var(--brand-red-dark) var(--tw-gradient-via-position) !important; }
.hover\:bg-red-50:hover { background-color: var(--brand-red-light) !important; }
.hover\:bg-red-700:hover { background-color: var(--brand-red-dark) !important; }
.hover\:text-red-600:hover { color: var(--brand-red) !important; }
.hover\:text-red-700:hover { color: var(--brand-red-dark) !important; }
.hover\:ring-red-200:hover { --tw-ring-color: #ddb8bf !important; }
.focus\:ring-red-500:focus { --tw-ring-color: var(--brand-red) !important; }

/* ── Tailwind yellow → Profi gold ── */
.text-yellow-200 { color: var(--brand-yellow-light) !important; }
.text-yellow-300 { color: var(--brand-yellow-muted) !important; }
.text-yellow-400 { color: var(--brand-yellow) !important; }
.bg-yellow-400 { background-color: var(--brand-yellow) !important; }
.bg-yellow-400\/15 { background-color: rgba(197, 147, 88, 0.15) !important; }
.from-yellow-400 { --tw-gradient-from: var(--brand-yellow) var(--tw-gradient-from-position) !important; }
.from-yellow-300 { --tw-gradient-from: var(--brand-yellow-muted) var(--tw-gradient-from-position) !important; }
.to-yellow-400 { --tw-gradient-to: var(--brand-yellow) var(--tw-gradient-to-position) !important; }
.to-yellow-300 { --tw-gradient-to: var(--brand-yellow-muted) var(--tw-gradient-to-position) !important; }
.via-yellow-300 { --tw-gradient-via: var(--brand-yellow-muted) var(--tw-gradient-via-position) !important; }
.border-yellow-400\/30 { border-color: rgba(197, 147, 88, 0.3) !important; }
.border-yellow-400\/40 { border-color: rgba(197, 147, 88, 0.4) !important; }
.ring-yellow-400\/30 { --tw-ring-color: rgba(197, 147, 88, 0.3) !important; }
.hover\:ring-yellow-400\/40:hover { --tw-ring-color: rgba(197, 147, 88, 0.4) !important; }

.dashboard-hero {
    background: linear-gradient(145deg, var(--brand-red) 0%, var(--brand-red-dark) 42%, var(--brand-black) 100%) !important;
}