:root {
    --primary: #000000;
    --primary-dark: #ffffff;
    --accent: #474747;
}

/* Override subset Tailwind blue-* agar ikut tema brand */
.text-blue-600, a.text-blue-600 { color: var(--primary) !important; }
.text-blue-700 { color: var(--primary-dark) !important; }
.border-blue-600, .border-blue-200, .border-blue-100, .border-blue-300 { border-color: var(--primary) !important; }
.bg-blue-600, .from-blue-600, .to-blue-700 { background-color: var(--primary) !important; }
.bg-blue-50, .from-blue-50, .to-blue-50 { background-color: color-mix(in srgb, var(--primary) 8%, white) !important; }
.bg-blue-100, .from-blue-100, .to-blue-100, .to-blue-200 { background-color: color-mix(in srgb, var(--primary) 15%, white) !important; }
.bg-gradient-to-r.from-blue-600.to-blue-700,
.bg-gradient-to-br.from-blue-100.to-blue-200,
.bg-gradient-to-br.from-blue-50.to-blue-100 {
    background-image: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
}
.from-blue-50.to-blue-100 { background-image: linear-gradient(to bottom right, color-mix(in srgb, var(--primary) 8%, white), color-mix(in srgb, var(--primary) 15%, white)) !important; }
.from-blue-100.to-blue-200 { background-image: linear-gradient(to bottom right, color-mix(in srgb, var(--primary) 15%, white), color-mix(in srgb, var(--primary) 22%, white)) !important; }
.border-t-blue-600 { border-top-color: var(--primary) !important; }
.hover\:text-blue-700:hover { color: var(--primary-dark) !important; }
.hover\:bg-blue-50:hover { background-color: color-mix(in srgb, var(--primary) 8%, white) !important; }
.focus\:border-blue-600:focus { border-color: var(--primary) !important; }

.menu-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent) !important;
}

.card-container {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--primary) 10%, transparent);
}
.card-container:hover {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 12%, transparent);
}

.topup-btn {
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, black) 100%) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
.topup-btn:hover {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent) !important;
}